1 files changed, 67 insertions, 15 deletions

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index b6bd538..d77bf82 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -18,14 +18,18 @@ html, body {
   }
 }
 @media screen and (min-width: 501px) and (max-width: 1099px) {
-  .floatwrapper > center > :nth-child(1) {
+  .header-image > :nth-child(1) {
     display: none;
   }
-  .floatwrapper > center > :nth-child(2) {
-    display: unset;
+  .header-image > :nth-child(2) {
+    display: flex;
+  }
+  .nav-button > :nth-child(2) {
+    display: none;
   }
   #nav {
-    display: grid;
+    display: flex;
+    flex-flow: column nowrap;
     width: 50px;
   }
   #space {
@@ -34,16 +38,23 @@ html, body {
   #mobile-nav {
     display: none;
   }
+  #nav-pin {
+    display: none;
+  }
 }
 @media screen and (min-width: 1100px) {
-  .floatwrapper > center > :nth-child(1) {
-    display: unset;
+  .header-image > :nth-child(1) {
+    display: flex;
   }
-  .floatwrapper > center > :nth-child(2) {
+  .header-image > :nth-child(2) {
     display: none;
   }
+  .nav-button > :nth-child(2) {
+    display: flex;
+  }
   #nav {
-    display: grid;
+    display: flex;
+    flex-flow: column nowrap;
   }
   #space {
     display: unset;
@@ -51,6 +62,9 @@ html, body {
   #mobile-nav {
     display: none;
   }
+  #nav-pin {
+    display: block;
+  }
 }
 
 
@@ -61,26 +75,30 @@ body {
   max-width: 100vw;
   width: 100vw;
   min-height: 100vh;
-  background-image: url("/assets/image/background.jpg");
-  background-size: cover;
 }
 
 /* TESTING */
 #nav {
-  background-color: #fffa;
+  background-color: #fff;
 }
 #content {
   background-color: #ddda;
 }
 #mobile-nav {
-  background-color: #fffa;
+  background-color: #fff;
 }
 /* END TESTING */
 
 
-#nav {
-  align-content: space-between;
+#body-wrapper {
+  display: flex;
+  flex-flow: row nowrap;
+  flex-grow: 1;
+  background-image: url("/assets/image/background.jpg");
+  background-size: cover;
 }
+
+
 #body {
   display: flex;
   flex-flow: column nowrap;
@@ -92,6 +110,7 @@ body {
 
 #content {
   flex-grow: 1;
+  padding: 5px;
 }
 
 .noaa {
@@ -100,10 +119,43 @@ body {
   image-rendering: pixelated;
 }
 .floatwrapper {
-  position: sticky
+  position: sticky;
+  align-content: space-between;
+  padding: 5px 0px 5px 0px;
+  display: grid;
+  height: 100%;
+  flex-grow: 1;
+}
+.floatwrapper > div > div {
+  padding: 0px 5px 0px 5px;
+}
+
+.header-image {
+  display: flex;
+  justify-content: center;
 }
 
 .mobile-nav-button {
   display: block;
   margin: auto;
+}
+
+.nav-button {
+  display: block;
+  height: 35px;
+}
+.nav-button > a {
+  display: flex;
+  height: inherit;
+  flex-flow: column nowrap;
+  justify-content: center;
+  padding-left: 5px;
+}
+.nav-button:hover, .header-image:hover {
+  cursor: pointer;
+  background-color: grey;
+}
+.nav-button > a:link, .nav-button > a:visited .nav-button > a {
+  color: black;
+  text-decoration: none;
 }
\ No newline at end of file