ladas552.me
My Blog, build with Norgolith
blog.ladas552.me
blog
trying to make animation on hover on home screen
+1
-1
public/assets/css/style.css
+1
-1
public/assets/css/style.css
···
1
-
@import "font.css";@import "code-blocks.css";@import "font.css";@import "footer.css";@import "nav-bar.css";html{scroll-behavior:smooth}@media (prefers-color-scheme:dark){body{color:#c9d1d9;background:#0d1117}}h1{color:#f5a97f;text-align:center;font-size:1.4641rem}h2{color:#7dc4e4;font-size:1.331rem}h3{color:#f5a97f;font-size:1.1rem}h4{color:#a6da95;font-size:1rem}h5{color:#7dc4e4;font-size:1rem}h6{color:#7dc4e4;font-size:.909091rem}h2:before{content:"◉ "}h3:before{content:"◎ "}h4:before{content:"○ "}h5:before{content:"✺ "}h6:before{content:"▶ "}h7:before{content:"⤷ "}.body{color:#fff;background-color:#24273a;padding-bottom:1em;font-family:JetBrains Mono,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;position:relative}.content{box-sizing:border-box;width:auto;max-width:650px;height:100%;line-height:auto;text-align:auto;text-justify:inter-word;flex-direction:column;margin:40px auto;padding:0;display:flex;position:relative}.content a:link{color:#b4befe;text-decoration:none}.content a:visited{color:#7e7eff}.content a:hover{color:#f38ba8}.content a:active{color:#202030}.content b,strong{color:#ee99a0}.flex-container{flex-flow:wrap;grid-auto-flow:column;place-content:space-evenly;gap:2em;width:auto;margin:0 auto;display:flex}.flex-box{background-color:#1e2030;border:2px solid #8aadf4;border-radius:20px;width:40%;height:auto;padding:0 1em 1em;display:block;box-shadow:0 0 .7em #8aadf4}.flex-box p{color:#b7bdf8;font-size:12px}.flex-box h3:before{content:" "}.center{width:auto;margin-left:auto;margin-right:auto;display:block}.pokemon{text-align:center;flex-direction:row;align-content:space-evenly;width:auto;margin-left:auto;margin-right:auto;padding-bottom:2em;padding-left:5em}*{scrollbar-width:thin;scrollbar-color:#64687e #1e1e2e}
1
+
@import "font.css";@import "code-blocks.css";@import "font.css";@import "footer.css";@import "nav-bar.css";html{scroll-behavior:smooth}@media (prefers-color-scheme:dark){body{color:#c9d1d9;background:#0d1117}}h1{color:#f5a97f;text-align:center;font-size:1.4641rem}h2{color:#7dc4e4;font-size:1.331rem}h3{color:#f5a97f;font-size:1.1rem}h4{color:#a6da95;font-size:1rem}h5{color:#7dc4e4;font-size:1rem}h6{color:#7dc4e4;font-size:.909091rem}h2:before{content:"◉ "}h3:before{content:"◎ "}h4:before{content:"○ "}h5:before{content:"✺ "}h6:before{content:"▶ "}h7:before{content:"⤷ "}.body{color:#fff;background-color:#24273a;padding-bottom:1em;font-family:JetBrains Mono,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;position:relative}.content{box-sizing:border-box;width:auto;max-width:650px;height:100%;line-height:auto;text-align:auto;text-justify:inter-word;flex-direction:column;margin:40px auto;padding:0;display:flex;position:relative}.content a:link{color:#b4befe;text-decoration:none}.content a:visited{color:#7e7eff}.content a:hover{color:#f38ba8}.content a:active{color:#202030}.content b,strong{color:#ee99a0}.flex-container{flex-flow:wrap;grid-auto-flow:column;place-content:space-evenly;gap:2em;width:auto;margin:0 auto;display:flex}.flex-box{background-color:#1e2030;border:2px solid #8aadf4;border-radius:20px;width:40%;height:auto;padding:0 1em 1em;transition:box-shadow .4s ease-in-out,bottom .6s ease-in-out;display:block;position:relative;bottom:0;box-shadow:0 0 .2em #8aadf4}.flex-box:hover{transition:box-shadow .6s ease-in-out,bottom .6s ease-in-out;bottom:5px;box-shadow:0 0 1.3em #8aadf4}.flex-box p{color:#b7bdf8;font-size:12px}.flex-box h3:before{content:" "}.center{width:auto;margin-left:auto;margin-right:auto;display:block}.pokemon{text-align:center;flex-direction:row;align-content:space-evenly;width:auto;margin-left:auto;margin-right:auto;padding-bottom:2em;padding-left:5em}*{scrollbar-width:thin;scrollbar-color:#64687e #1e1e2e}
+1
-1
public/index.html
+1
-1
public/index.html
···
1
-
<!doctypehtml><html lang=en-us><meta charset=UTF-8><meta content="Hub of the Blog"name=description><meta content=ladas552 name=author><meta content=!Hub name=keywords><meta content=width=device-width,initial-scale=1.0 name=viewport><link href=https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-night-owl.min.css rel=stylesheet><script src=https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js></script><script src=https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js></script><script src=https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js></script><script src=https://ladas552.me/assets/js/apple_roll.js></script><script src=https://ladas552.me/assets/js/scroll.js></script><link href=https://ladas552.me/assets/css/style.css rel=stylesheet><link href=https://www.nerdfonts.com/assets/css/webfont.css rel=stylesheet><link href=https://ladas552.me/assets/images/nix-snowflake-rainbow.svg rel=icon><meta content=/assets/images/nix.png property=og:image><title>Hello - Rattman</title><body class=body><header class="relative shadow-sm"><nav class=navigation><ul><li><a href=https://ladas552.me>Index</a><li><a href=https://ladas552.me/meta/about>About</a><li><a href=https://ladas552.me/meta/credits>Credits</a><li><a href=https://ladas552.me/rss.xml><i class="nf nf-md-rss_box"></i></a></ul></nav></header><main><div class=content id=content><h1 id=HiO!>HiO!</h1><p>This is the <strong>Site/Blog</strong> of <a href=https://ladas552.me/meta/about>Ladas552</a> - have fun browsing it and read some recent posts below!<section><div class=flex-container><div class=flex-box id=flex-box><h3><a href=https://ladas552.me/posts/on_owning_a_cat/>On Owning a Cat</a></h3><div id=description><description> <span>Troublesome blob of feline species</span> <p>Tags: <a href=https://ladas552.me/categories/cats>Cats</a></p> <p><span>Released: 2025-02-08</span></p> </description></div></div><div class=flex-box id=flex-box><h3><a href=https://ladas552.me/posts/Osu_On_Linux/>Osu on Linux</a></h3><div id=description><description> <span>My experience running Osu on Linux and some advice</span> <p>Tags: <a href=https://ladas552.me/categories/games>Games</a></p> <p><span>Released: 2025-04-13</span></p> </description></div></div></div></section></div></main><footer class=footer><div class="segment mode"><a href=https://ladas552.me>NORMAL</a></div><div class="segment branch"><a href=https://github.com/Ladas552/ladas552.github.io><i class="nf nf-md-source_branch"></i> master </a></div><div class="segment filename"><a href=#top><i class="nf nf-dev-norg"></i> Hello.norg</a></div><div class="segment location"id=scroll-percentage></div></footer>
1
+
<!doctypehtml><html lang=en-us><meta charset=UTF-8><meta content="Hub of the Blog"name=description><meta content=ladas552 name=author><meta content=!Hub name=keywords><meta content=width=device-width,initial-scale=1.0 name=viewport><link href=https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-night-owl.min.css rel=stylesheet><script src=https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js></script><script src=https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js></script><script src=https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js></script><script src=https://ladas552.me/assets/js/apple_roll.js></script><script src=https://ladas552.me/assets/js/scroll.js></script><link href=https://ladas552.me/assets/css/style.css rel=stylesheet><link href=https://www.nerdfonts.com/assets/css/webfont.css rel=stylesheet><link href=https://ladas552.me/assets/images/nix-snowflake-rainbow.svg rel=icon><meta content=/assets/images/nix.png property=og:image><title>Hello - Rattman</title><body class=body><header class="relative shadow-sm"><nav class=navigation><ul><li><a href=https://ladas552.me>Index</a><li><a href=https://ladas552.me/meta/about>About</a><li><a href=https://ladas552.me/meta/credits>Credits</a><li><a href=https://ladas552.me/rss.xml><i class="nf nf-md-rss_box"></i></a></ul></nav></header><main><div class=content id=content><h1 id=HiO!>HiO!</h1><p>This is the <strong>Site/Blog</strong> of <a href=https://ladas552.me/meta/about>Ladas552</a> - have fun browsing it and read some recent posts below!<section><div class=flex-container><div class=flex-box id=flex-box onclick=location.href='https://ladas552.me/posts/on_owning_a_cat/'; style=cursor:pointer><h3>On Owning a Cat</h3><div id=description><description> <span>Troublesome blob of feline species</span> <p>Tags: <a href=https://ladas552.me/categories/cats>Cats</a></p> <p><span>Released: 2025-02-08</span></p> </description></div></div><div class=flex-box id=flex-box onclick=location.href='https://ladas552.me/posts/Osu_On_Linux/'; style=cursor:pointer><h3>Osu on Linux</h3><div id=description><description> <span>My experience running Osu on Linux and some advice</span> <p>Tags: <a href=https://ladas552.me/categories/games>Games</a></p> <p><span>Released: 2025-04-13</span></p> </description></div></div></div></section></div></main><footer class=footer><div class="segment mode"><a href=https://ladas552.me>NORMAL</a></div><div class="segment branch"><a href=https://github.com/Ladas552/ladas552.github.io><i class="nf nf-md-source_branch"></i> master </a></div><div class="segment filename"><a href=#top><i class="nf nf-dev-norg"></i> Hello.norg</a></div><div class="segment location"id=scroll-percentage></div></footer>
+1
-1
public/rss.xml
+1
-1
public/rss.xml
···
6
6
<description>Latest posts</description>
7
7
<generator>Norgolith</generator>
8
8
<language>en-us</language>
9
-
<lastBuildDate>Tue, 24 Jun 2025 14:17:57 +0000</lastBuildDate>
9
+
<lastBuildDate>Tue, 08 Jul 2025 12:03:16 +0000</lastBuildDate>
10
10
<ttl>60</ttl>
11
11
<atom:link href="https://ladas552.me/rss.xml" rel="self" type="application/rss+xml" />
12
12
+9
-1
theme/assets/css/style.css
+9
-1
theme/assets/css/style.css
···
128
128
border: 2px solid #8aadf4;
129
129
background-color: #1e2030;
130
130
padding: 0em 1em 1em 1em;
131
-
box-shadow: 0px 0px 0.7em #8aadf4;
131
+
box-shadow: 0px 0px 0.2em #8aadf4;
132
+
transition:box-shadow 400ms ease-in-out, bottom ease-in-out 600ms;
132
133
width: 40%;
133
134
height: auto;
135
+
position: relative;
136
+
bottom: 0px;
137
+
}
138
+
.flex-box:hover {
139
+
transition:box-shadow 600ms ease-in-out, bottom ease-in-out 600ms;
140
+
box-shadow: 0px 0px 1.3em #8aadf4;
141
+
bottom: 5px;
134
142
}
135
143
/* css class for descriptions under "recent posts" */
136
144
.flex-box p{
+2
-2
theme/templates/home.html
+2
-2
theme/templates/home.html
···
8
8
<div class="flex-container">
9
9
{% for post in posts | filter(attribute="draft", value=false) %}
10
10
{# for post in posts #}
11
-
<div class="flex-box" id="flex-box">
12
-
<h3><a href="{{ post.permalink }}">{{ post.title }}</a></h3>
11
+
<div class="flex-box" id="flex-box" onclick="location.href='{{ post.permalink }}';" style="cursor: pointer;">
12
+
<h3>{{ post.title }}</h3>
13
13
<div id=description>
14
14
<description>
15
15
<span>{{ post.description }}</span>