the whole layout tweaked

brklntmhwk · Mar 26, 2024 · 6e26f09 · 6e26f09
1 parent 3b54a3a
commit 6e26f09
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 15 deletions.
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -51,6 +51,7 @@ const today = new Date()
 </footer>
 <style>
   footer {
+    grid-area: footer;
     padding: 2em 1em 6em 1em;
     background: linear-gradient(var(--gray-gradient)) no-repeat;
     color: rgb(var(--gray));

diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -33,14 +33,15 @@ const meta = await getEntry('meta', 'site-data')
       >
     </a>
     <a href="https://github.com/brklntmhwk" target="_blank">
-      <span class="sr-only">Go to Astro's GitHub repo</span>
+      <span class="sr-only">Go to the GitHub repo</span>
       <Svg iconName="github" />
     </a>
   </div>
 </nav>
 
 <style>
   nav {
+    grid-area: navigation;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -66,11 +67,10 @@ const meta = await getEntry('meta', 'site-data')
   @media (min-width: 1024px) {
     nav {
       display: block;
-      /* gap: 10px; */
       position: sticky;
       top: 0;
       padding: 8px 15px 5px 25px;
-      width: 18rem;
+      width: 20rem;
       border: 2px solid black;
       box-sizing: border-box;
     }

diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -4,7 +4,7 @@ import '@fontsource-variable/roboto-condensed'
 import BaseHead from '../components/BaseHead.astro'
 // import Header from '../components/Header.astro'
 import Navigation from '../components/Navigation.astro'
-// import Footer from '../components/Footer.astro'
+import Footer from '../components/Footer.astro'
 
 type Props = {
   title: string
@@ -24,7 +24,7 @@ const { title, description } = Astro.props
     <div class="base-wrapper">
       <Navigation />
       <slot />
+      <Footer />
     </div>
-    <!-- <Footer /> -->
   </body>
 </html>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -41,13 +41,14 @@ const meta = await getEntry('meta', 'site-data')
   .logo {
     text-align: center;
     font-size: 5.2rem;
-    /* font-family: 'TiltNeon'; */
     margin: auto;
     user-select: none;
   }
 
   .logo b {
-    font: 500 13vh 'Vibur';
+    font-family: 'TiltNeon', sans-serif;
+    font-weight: 500;
+    /* font: 500 13vh 'Vibur'; */
     color: #fee;
     animation: pulsate 0.11s ease-in-out infinite alternate;
   }

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -44,11 +44,12 @@ body {
   line-height: 1.7;
 }
 main {
-  /* width: 100%; */
-  width: 720px;
-  max-width: calc(100% - 18rem);
+  width: 100%;
+  /* width: 720px; */
+  /* max-width: calc(100% - 18rem); */
+  grid-area: main;
   /* max-width: calc(100% - 2em); */
-  margin: auto;
+  /* margin: auto; */
   padding: 3em 1em;
 }
 h1,
@@ -147,11 +148,18 @@ hr {
 } */
 @media (min-width: 1024px) {
   .base-wrapper {
-    display: flex;
-    flex-direction: row;
-    margin: 0 auto;
     width: 100%;
-    max-width: 1200px;
+    display: grid;
+    grid-template-columns: 20rem 1fr;
+    grid-template-rows: 2fr 1fr;
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-areas:
+      'navigation main'
+      'footer footer';
+    /* display: flex;
+    flex-direction: row; */
+    /* margin: 0 auto; */
+    /* max-width: 1024px; */
   }
 }
 .sr-only {