very refined

3 files changed, 61 insertions, 31 deletions

diff --git a/src/assets/css/background.css b/src/assets/css/background.css
new file mode 100644
index 0000000..3b8f64b
--- /dev/null
+++ b/src/assets/css/background.css
@@ -0,0 +1,10 @@
+.background {
+    position: fixed;
+    top: 0;
+    background-image: url("/assets/image/background.avif");
+    background-size: cover;
+    height: 100vh;
+    z-index: -1;
+    width: -moz-available;
+    width: -webkit-fill-available;
+  }
\ No newline at end of file
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 339ad3b..17798cc 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -8,7 +8,7 @@ html, body {
 
 
 :root {
-  --primary: 244, 238, 238;
+  --primary: 238, 238, 238;
   --secondary: 187, 187, 187;
   --tertiary: 153, 153, 153;
   --text-primary: #222;
@@ -40,18 +40,26 @@ html, body {
     display: none;
   }
   .header-image > :nth-child(2) {
-    display: flex;
+    display: inline-block;
   }
-  .nav-button > :nth-child(2) {
+  .nav-button > a > :nth-child(2) {
     display: none;
   }
+  .nav-button > a > :nth-child(1) {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .nav-button > a {
+    padding-left: 2px;
+    padding-right: 2px;
+  }
   .body_decoration {
     display: none;
   }
   .nav {
     display: flex;
     flex-flow: column nowrap;
-    width: 50px;
+    max-width: 50px;
   }
   .space {
     display: none;
@@ -62,6 +70,14 @@ html, body {
   #nav-pin {
     display: none;
   }
+
+  .nav-button, .header-image {
+    max-width: 50px;
+  }
+
+  .floatwrapper > div {
+    max-width: 50px;
+  }
 }
 @media screen and (min-width: 1100px) {
   .header-image > :nth-child(1) {
@@ -70,7 +86,7 @@ html, body {
   .header-image > :nth-child(2) {
     display: none;
   }
-  .nav-button > :nth-child(2) {
+  .nav-button > div > :nth-child(2) {
     display: flex;
   }
   .nav {
@@ -86,34 +102,24 @@ html, body {
   #nav-pin {
     display: block;
   }
+  .nav-button > a {
+    padding-left: 5px;
+    padding-right: 5px;
+  }
 }
 
 
-
-
 body {
   display: flex;
   flex-flow: row nowrap;
   max-width: 100vw;
   min-height: 100vh;
 }
-
-/* TESTING */
-#content {
-  background-color: rgba(var(--primary), 0.7);
-}
-.mobile-nav {
-  background-color: rgb(var(--primary));
-}
-/* END TESTING */
-
-
 .body-wrapper {
   display: flex;
   flex-flow: row nowrap;
   flex-grow: 1;
-  background-image: url("/assets/image/background.avif");
-  background-size: cover;
+  z-index: 1;
 }
 
 
@@ -145,6 +151,7 @@ main {
   flex-grow: 1;
   padding-left: 10px;
   padding-right: 10px;
+  background-color: rgba(var(--primary), 0.7);
 }
 
 .noaa {
@@ -159,16 +166,15 @@ main {
   align-content: space-between;
   display: grid;
   height: 100vh;
-}
-.floatwrapper > div > div {
-  padding-left: 5px;
-  padding-right: 5px;
+  overflow: auto;
 }
 
 .header-image {
   display: flex;
   justify-content: center;
   padding-top: 5px;
+  padding-left: 5px;
+  padding-right: 5px;
 }
 
 .mobile-nav-button {
@@ -179,6 +185,7 @@ main {
 .mobile-nav {
   position: sticky;
   bottom: 0;
+  background-color: rgb(var(--primary));
 }
 
 #nav-pin > a > span {
@@ -191,8 +198,11 @@ main {
 .nav-button > a {
   display: flex;
   height: inherit;
-  flex-flow: column nowrap;
-  justify-content: center;
+  flex-flow: row nowrap;
+}
+.nav-button > a > span {
+  margin-top: auto;
+  margin-bottom: auto;
   padding-left: 5px;
 }
 .nav-button:hover, .header-image:hover {
diff --git a/src/index.html b/src/index.html
index e24f065..6182160 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,34 +4,39 @@
     <title>Infernal ⁕ Garden</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>@import url("/assets/css/main.css");</style>
-    <link defer rel="icon" type="image/png" href="/assets/image/icon.png">
+    <link rel="icon" type="image/png" href="/assets/image/icon.png">
+    <link rel="stylesheet" href="/assets/css/main.css">
+    <link rel="stylesheet" href="/assets/css/background.css">
   </head>
   <body>
     <nav class="nav">
       <div class="floatwrapper">
         <div>
-          <div class="header-image">
+          <a href="/" class="header-image">
             <img loading="lazy" class="noaa" alt="A pixelated Lycoris Radiata between &quot;infernal&quot; and &quot;garden&quot;" src="/assets/image/header.png">
             <img loading="lazy" class="noaa" alt="A pixelated Lycoris Radiata" src="/assets/image/icon.png">
-          </div>
+          </a>
           <div class="nav-button">
             <a href="/pages/about.html">
+              <img loading="auto" class="noaa" alt="A pixelated Lycoris Radiata" src="/assets/image/icon.png">
               <span>About</span>
             </a>
           </div>
           <div class="nav-button">
             <a href="/pages/projects.html">
+              <img loading="auto" class="noaa" alt="A pixelated Lycoris Radiata" src="/assets/image/icon.png">
               <span>Projects</span>
             </a>
           </div>
           <div class="nav-button">
             <a href="/pages/services.html">
+              <img loading="auto" class="noaa" alt="A pixelated Lycoris Radiata" src="/assets/image/icon.png">
               <span>Services</span>
             </a>
           </div>
           <div class="nav-button">
             <a href="/pages/people.html">
+              <img loading="auto" class="noaa" alt="A pixelated Lycoris Radiata" src="/assets/image/icon.png">
               <span>People</span>
             </a>
           </div>
@@ -39,16 +44,21 @@
         <div>
           <div class="nav-button">
             <a href="/pages/contact.html">
+              <img loading="auto" class="noaa" alt="A pixelated Lycoris Radiata" src="/assets/image/icon.png">
               <span>Contact</span>
             </a>
           </div>
           <div id="nav-pin" class="nav-button">
-            <a><span>Pin</span></a>
+            <a href="#">
+              <img loading="auto" class="noaa" alt="A pixelated Lycoris Radiata" src="/assets/image/icon.png">
+              <span>Expand/Collapse</span>
+            </a>
           </div>
         </div>
       </div>
     </nav>
     <div class="body-wrapper">
+      <div class="background"></div>
       <main>
         <div id="content">
           <section id="lorem">