diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 77cfc35..6282c3c 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -26,11 +26,10 @@ const posts = (
     <main>
       <section>
         <h2>My blog</h2>
-        <ul>
+        <ul class="post-list">
           {
             posts.map((post) => (
               <li>
-                <FormattedDate date={post.data.pubDate} />
                 <a href={`/blog/${post.slug}/`}>{post.data.title}</a>
               </li>
             ))
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6df80bb..8cde251 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -14,50 +14,55 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
   <body>
     <Header title={SITE_TITLE} />
     <main>
-      <h2>Welcome to my website!</h2>
-      <p>
-        My name is <strong>Maciej</strong>, but if you don't know how to
-        pronounce it, then you can call me <strong>Mac</strong>. I'm an
-        eighteen-year-old frontend developer from <strong>Poland</strong>.
-        Although I mainly use <strong>Vue</strong> and <strong>Nuxt</strong> for
-        my projects, I'm also familiar with <strong>Alpine</strong> and <strong
-          >Astro</strong
-        >.
-      </p>
-      <h3>My blog</h3>
-      <p>
-        It serves as a means of documenting the development process and inner
-        workings of <a href="/projects">my applications</a>. Check out my latest
-        posts below:
-      </p>
-      <ul>
-        <li>
-          <FormattedDate date={new Date()} />
-          <a href="#">Lorem Ipsum</a>
-        </li>
-        <li>
-          <FormattedDate date={new Date()} />
-          <a href="#">Lorem Ipsum</a>
-        </li>
-        <li>
-          <FormattedDate date={new Date()} />
-          <a href="#">Lorem Ipsum</a>
-        </li>
-      </ul>
-      <h3>Enjoy my work?</h3>
-      <p>
-        If so, then make sure to follow me on <a
-          href="https://github.com/maciejpedzich"
-          target="_blank"
-          rel="noopener noreferrer">GitHub</a
-        >, <a
-          href="https://twitter.com/MaciejPedzich"
-          target="_blank"
-          rel="noopener noreferrer">Twitter</a
-        >, or <a rel="me" href="https://notacult.social/@macindahaus"
-          >Mastodon</a
-        >.
-      </p>
+      <section>
+        <h2>Welcome to my website</h2>
+        <p>
+          My name is <strong>Maciej</strong>, but if you're not sure how to
+          pronounce it, then you can call me <strong>Mac</strong>. I'm an
+          eighteen-year-old frontend developer from <strong>Poland</strong>.
+          Although I mainly use <strong>Vue</strong> and <strong>Nuxt</strong> for
+          my projects, I'm also familiar with <strong>Alpine</strong> and <strong
+            >Astro</strong
+          >.
+        </p>
+      </section>
+      <section>
+        <h3>My blog</h3>
+        <p>
+          It serves as a means of documenting the development process and inner
+          workings of <a href="/projects">my applications</a>. Check out the
+          latest posts below:
+        </p>
+        <ul class="post-list">
+          <li>
+            <a href="#">This link leads nowhere</a>
+          </li>
+          <li>
+            <a href="#"
+              >And so does this one. But why is that, some of you may ask</a
+            >
+          </li>
+          <li>
+            <a href="#">The answer is simple. They're placeholders</a>
+          </li>
+        </ul>
+      </section>
+      <section>
+        <h3>Enjoy my work?</h3>
+        <p>
+          If so, make sure to follow me on <a
+            href="https://github.com/maciejpedzich"
+            target="_blank"
+            rel="noopener noreferrer">GitHub</a
+          >, <a
+            href="https://twitter.com/MaciejPedzich"
+            target="_blank"
+            rel="noopener noreferrer">Twitter</a
+          >, or <a rel="me" href="https://notacult.social/@macindahaus"
+            >Mastodon</a
+          >.
+        </p>
+      </section>
     </main>
     <Footer />
     <style>
@@ -65,9 +70,8 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
         text-align: center;
       }
 
-      h2,
-      h3 {
-        text-transform: none;
+      section {
+        margin-bottom: 1.25rem;
       }
 
       h3 {
@@ -75,7 +79,7 @@ import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
       }
 
       p {
-        margin: 0.5rem 0 1rem 0;
+        margin: 0 0 1rem 0;
       }
     </style>
   </body>
diff --git a/src/styles/global.css b/src/styles/global.css
index 81a9533..b3fdaad 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -4,19 +4,24 @@
   License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
  */
 body {
+  margin: 0 auto;
+  padding: 0;
   display: flex;
   flex-direction: column;
   max-width: min(65ch, 90%);
   height: 100vh;
+  line-height: 1.8;
+  font-size: 1rem;
   font-family: Arial, Helvetica, sans-serif;
-  margin: 0 auto;
-  padding: 0;
   background-color: #485870;
   color: #fff;
   text-align: left;
   word-wrap: break-word;
   overflow-wrap: break-word;
-  line-height: 1.8;
+}
+
+main {
+  flex: 1 1 auto;
 }
 
 h1,
@@ -34,7 +39,7 @@ a:visited {
 
 a:hover,
 a:active {
-  color: rgba(255, 255, 255, 0.4);
+  color: #bbb;
 }
 
 a:focus {
@@ -46,30 +51,22 @@ p {
   text-align: left;
 }
 
-main {
-  flex: 1 1 auto;
-}
-
 a:visited {
   color: unset;
 }
 
 ul {
-  list-style-type: none;
-  padding: unset;
+  list-style: none;
 }
 
 ul li {
-  display: flex;
-  justify-content: center;
+  text-align: left;
 }
 
-ul li::before {
-  content: '-';
-}
-
-ul li time {
-  flex: 0 0 112px;
+li::before {
+  content: '\25A1';
+  font-size: 1.2em;
+  margin-right: 3px;
 }
 
 textarea {
@@ -131,7 +128,7 @@ h1.cmr2-text {
 
 .cmr2-text > span,
 .cmr2-text > a {
-  border-left-width: 0.05em;
+  border-left-width: 1px;
   border-left-style: solid;
   text-align: center;
 }
@@ -149,7 +146,7 @@ h1.cmr2-text {
 }
 
 .cmr2-text > a {
-  padding: 0.05em 0.7em;
+  padding: 0 0.7em;
 }
 
 .cmr2-text > span:first-of-type,
@@ -161,3 +158,66 @@ h1.cmr2-text {
 .cmr2-text > a:focus {
   color: #fff;
 }
+
+/* The following styling rules have been adopted from: https://github.com/codrops/LineHoverStyles/ */
+
+.post-list a {
+  position: relative;
+  outline: none;
+  cursor: pointer;
+  white-space: nowrap;
+  text-decoration: none;
+}
+
+.post-list a:focus {
+  outline: 2px solid #bbb;
+  outline-offset: 3px;
+}
+
+.post-list a:focus:not(:focus-visible) {
+  background: transparent;
+}
+
+a:focus-visible {
+  outline: 2px solid #bbb;
+  outline-offset: 3px;
+  background: transparent;
+}
+
+.post-list a:hover {
+  outline: none;
+  color: #bbb;
+}
+
+.post-list a::before,
+.post-list a::after {
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  background: currentColor;
+  top: 100%;
+  left: 0;
+  pointer-events: none;
+}
+
+.post-list a::before {
+  content: '';
+  transform-origin: 0% 50%;
+  transform: scale3d(0, 1, 1);
+  transition: transform 0.3s;
+}
+
+.post-list a:hover::before {
+  transform: scale3d(1, 1, 1);
+}
+
+.post-list a::after {
+  content: '';
+  top: calc(100% + 4px);
+  transition: transform 0.3s;
+  transform-origin: 100% 50%;
+}
+
+.post-list a:hover::after {
+  transform: scale3d(0, 1, 1);
+}
