Footer tweaked

src/components/BlogList.astro

@@ -58,22 +58,16 @@ const { entries, kind } = Astro.props
 <style>
   a.blog-title {
     font-size: 2rem;
-    font-weight: 400;
+    font-weight: 700;
     text-decoration: none;
     &:hover {
       text-decoration: underline;
       text-underline-offset: 7px;
     }
-    /* &:hover::before {
-      font-family: 'PixelMplus10';
-      content: '▶';
-      font-size: 1.25rem;
-      align-self: center;
-    } */
   }
   ul.entry-list {
     display: grid;
-    row-gap: 1.25rem;
+    gap: 1.75rem;
     padding: 0;
   }
   ul.entry-list > li {

src/components/Footer.astro

@@ -52,11 +52,15 @@ const today = new Date()
 <style>
   footer {
     grid-area: footer;
-    padding: 2em 1em 6em 1em;
+    padding: 2em 1em 3.5em 1em;
     background: linear-gradient(var(--gray-gradient)) no-repeat;
     color: rgb(var(--gray));
     text-align: center;
   }
+  @media (min-width: 1024px) {
+    footer {
+    }
+  }
   .social-links {
     display: flex;
     justify-content: center;

src/components/Hamburger.astro

@@ -33,21 +33,48 @@ import Svg from '@/components/Svg/index.astro'
     top: 0;
     left: 100%;
     z-index: 80;
+    display: flex;
+    flex-direction: column;
+    gap: 3.5rem;
     padding-top: 3rem;
-    margin-top: 4.75rem;
+    margin-top: 5.35rem;
     background-color: #f4f4f4;
     transition: all 0.2s;
   }
   nav.mobile-nav > * {
-    padding: 0.75rem 2.5rem;
+    padding: 0.75rem 2.75rem;
+  }
+  nav a {
+    color: var(--black);
+    border-bottom: 2px solid transparent;
+    text-decoration: none;
   }
   .nav-links {
     display: grid;
-    row-gap: 1rem;
+    gap: 1.5rem;
+    margin-left: 1.25rem;
+  }
+  .nav-links a {
+    position: relative;
+    &:hover::before {
+      font-family: 'PixelMplus10';
+      content: '▶';
+      position: absolute;
+      top: 0;
+      left: -1.5rem;
+      font-size: 1.25rem;
+      align-self: center;
+    }
+  }
+  .nav-links a.active {
+    text-decoration: underline;
+    text-decoration-color: var(--accent);
+    text-underline-offset: 8px;
   }
   .icon-links {
     display: flex;
-    column-gap: 1rem;
+    justify-content: center;
+    gap: 1.25rem;
   }
   .hamburger-icon-btn {
     /* position: fixed;
@@ -64,6 +91,7 @@ import Svg from '@/components/Svg/index.astro'
   .hamburger-icon-btn span,
   .hamburger-icon-btn span:before,
   .hamburger-icon-btn span:after {
+    font-family: 'PixelMplus10';
     content: '';
     display: block;
     height: 3px;

src/components/Navigation.astro

@@ -7,7 +7,7 @@ import Hamburger from '@/components/Hamburger.astro'
 
 <nav data-pagefind-ignore="all">
   <a class="blog-title" href="/"
-    ><Svg iconName="site-logo" width={32} height={32} /></a
+    ><Svg iconName="logo" width={54} height={48} /></a
   >
   <div class="nav-links">
     <NavLink href="/">Home</NavLink>

src/layouts/BaseLayout.astro

@@ -29,7 +29,7 @@ const { title, description } = Astro.props
         width: 100%;
         display: grid;
         padding-top: 3.75rem;
-        grid-template-rows: auto 1fr;
+        grid-template-rows: 1fr auto;
         grid-template-areas:
           'main'
           'footer';

src/pages/404.astro

@@ -10,12 +10,13 @@ import BaseLayout from '@/layouts/BaseLayout.astro'
 </BaseLayout>
 <style>
   main {
-    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(8, 10, 24, 0.7)),
+    /* background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(8, 10, 24, 0.7)),
       url('/brick-wall3.jpg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
-    backdrop-filter: grayscale(50%);
+    backdrop-filter: grayscale(50%); */
+    box-sizing: border-box;
     margin-top: 2.5rem;
   }
   @media (min-width: 1024px) {
@@ -29,11 +30,11 @@ import BaseLayout from '@/layouts/BaseLayout.astro'
       0 0 5px #fff,
       0 0 8px #fff,
       0 0 18px #fff,
-      0 0 37px #0fa,
-      0 0 75px #0fa,
-      0 0 85px #0fa,
-      0 0 98px #0fa,
-      0 0 141px #0fa;
+      0 0 37px rgb(0, 255, 136),
+      0 0 75px rgb(0, 255, 136),
+      0 0 85px rgb(0, 255, 136),
+      0 0 98px rgb(0, 255, 136),
+      0 0 141px rgb(0, 255, 136);
   }
   h1,
   p {
@@ -53,22 +54,22 @@ import BaseLayout from '@/layouts/BaseLayout.astro'
         0 0 3px #fff,
         0 0 10px #fff,
         0 0 15px #fff,
-        0 0 30px #0fa,
-        0 0 60px #0fa,
-        0 0 70px #0fa,
-        0 0 90px #0fa,
-        0 0 120px #0fa;
+        0 0 30px rgb(0, 255, 136),
+        0 0 60px rgb(0, 255, 136),
+        0 0 70px rgb(0, 255, 136),
+        0 0 90px rgb(0, 255, 136),
+        0 0 120px rgb(0, 255, 136);
     }
     0% {
       text-shadow:
         0 0 2px #fff,
         0 0 4px #fff,
         0 0 6px #fff,
-        0 0 10px #0fa,
-        0 0 45px #0fa,
-        0 0 55px #0fa,
-        0 0 70px #0fa,
-        0 0 80px #0fa;
+        0 0 10px rgb(0, 255, 136),
+        0 0 45px rgb(0, 255, 136),
+        0 0 55px rgb(0, 255, 136),
+        0 0 70px rgb(0, 255, 136),
+        0 0 80px rgb(0, 255, 136);
     }
   }
 </style>

src/pages/index.astro

@@ -16,13 +16,14 @@ const meta = await getEntry('meta', 'site-data')
 <style>
   /* @import url(//fonts.googleapis.com/css?family=Vibur); */
   main {
-    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(8, 10, 24, 0.7)),
+    /* background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(8, 10, 24, 0.7)),
       url('/brick-wall3.jpg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
-    backdrop-filter: grayscale(50%);
+    backdrop-filter: grayscale(50%); */
     margin-top: 2.5rem;
+    box-sizing: border-box;
     width: 100%;
   }
   @media (min-width: 1024px) {