working better now

1 files changed, 50 insertions, 10 deletions

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index d77bf82..c9b4d3a 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -3,9 +3,24 @@ html, body {
   border: 0;
   padding: 0;
   background-color: black;
+  color: var(--text-primary);
 }
 
 
+:root {
+  --primary: 244, 238, 238;
+  --secondary: 187, 187, 187;
+  --tertiary: 153, 153, 153;
+  --text-primary: #222;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --primary: 34, 34, 34;
+    --secondary: 51, 51, 51;
+    --tertiary: 68, 68, 68;
+    --text-primary: #ddd;
+  }
+}
 
 @media screen and (max-width: 500px) {
   #nav, #space {
@@ -16,6 +31,9 @@ html, body {
     height: 70px;
     grid-template-columns: 20% 20% 20% 20% 20%;
   }
+  .body_decoration {
+    display: none;
+  }
 }
 @media screen and (min-width: 501px) and (max-width: 1099px) {
   .header-image > :nth-child(1) {
@@ -27,6 +45,9 @@ html, body {
   .nav-button > :nth-child(2) {
     display: none;
   }
+  .body_decoration {
+    display: none;
+  }
   #nav {
     display: flex;
     flex-flow: column nowrap;
@@ -69,6 +90,7 @@ html, body {
 
 
 
+
 body {
   display: flex;
   flex-flow: row nowrap;
@@ -78,14 +100,12 @@ body {
 }
 
 /* TESTING */
-#nav {
-  background-color: #fff;
-}
 #content {
-  background-color: #ddda;
+  background-color: rgba(var(--primary), 0.7);
+  word-break: break-all;
 }
 #mobile-nav {
-  background-color: #fff;
+  background-color: rgb(var(--primary));
 }
 /* END TESTING */
 
@@ -104,6 +124,16 @@ body {
   flex-flow: column nowrap;
   flex-grow: 7;
 }
+.body_decoration {
+  background-color: rgba(var(--primary), 0.7);
+  mask-image: url(/assets/image/footer.png);
+  mask-size: 50px;
+  mask-repeat: repeat-y;
+  width: 50px;
+  -webkit-mask-image: url(/assets/image/footer.png);
+  -webkit-mask-size: 50px;
+  -webkit-mask-repeat: repeat-y;
+}
 #space {
   flex-grow: 2;
 }
@@ -119,20 +149,22 @@ body {
   image-rendering: pixelated;
 }
 .floatwrapper {
+  background-color: rgb(var(--primary));
+  top: 0;
   position: sticky;
   align-content: space-between;
-  padding: 5px 0px 5px 0px;
   display: grid;
-  height: 100%;
-  flex-grow: 1;
+  height: 100vh;
 }
 .floatwrapper > div > div {
-  padding: 0px 5px 0px 5px;
+  padding-left: 5px;
+  padding-right: 5px;
 }
 
 .header-image {
   display: flex;
   justify-content: center;
+  padding-top: 5px;
 }
 
 .mobile-nav-button {
@@ -140,6 +172,14 @@ body {
   margin: auto;
 }
 
+#mobile-nav {
+  position: sticky;
+  bottom: 0;
+}
+
+#nav-pin > a > span {
+  color: var(--text-primary)
+}
 .nav-button {
   display: block;
   height: 35px;
@@ -156,6 +196,6 @@ body {
   background-color: grey;
 }
 .nav-button > a:link, .nav-button > a:visited .nav-button > a {
-  color: black;
+  color: inherit;
   text-decoration: none;
 }
\ No newline at end of file