initial commit

1 files changed, 109 insertions, 0 deletions

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
new file mode 100644
index 0000000..b6bd538
--- /dev/null
+++ b/src/assets/css/main.css
@@ -0,0 +1,109 @@
+html, body {
+  margin: 0;
+  border: 0;
+  padding: 0;
+  background-color: black;
+}
+
+
+
+@media screen and (max-width: 500px) {
+  #nav, #space {
+    display: none;
+  }
+  #mobile-nav {
+    display: grid;
+    height: 70px;
+    grid-template-columns: 20% 20% 20% 20% 20%;
+  }
+}
+@media screen and (min-width: 501px) and (max-width: 1099px) {
+  .floatwrapper > center > :nth-child(1) {
+    display: none;
+  }
+  .floatwrapper > center > :nth-child(2) {
+    display: unset;
+  }
+  #nav {
+    display: grid;
+    width: 50px;
+  }
+  #space {
+    display: none;
+  }
+  #mobile-nav {
+    display: none;
+  }
+}
+@media screen and (min-width: 1100px) {
+  .floatwrapper > center > :nth-child(1) {
+    display: unset;
+  }
+  .floatwrapper > center > :nth-child(2) {
+    display: none;
+  }
+  #nav {
+    display: grid;
+  }
+  #space {
+    display: unset;
+  }
+  #mobile-nav {
+    display: none;
+  }
+}
+
+
+
+body {
+  display: flex;
+  flex-flow: row nowrap;
+  max-width: 100vw;
+  width: 100vw;
+  min-height: 100vh;
+  background-image: url("/assets/image/background.jpg");
+  background-size: cover;
+}
+
+/* TESTING */
+#nav {
+  background-color: #fffa;
+}
+#content {
+  background-color: #ddda;
+}
+#mobile-nav {
+  background-color: #fffa;
+}
+/* END TESTING */
+
+
+#nav {
+  align-content: space-between;
+}
+#body {
+  display: flex;
+  flex-flow: column nowrap;
+  flex-grow: 7;
+}
+#space {
+  flex-grow: 2;
+}
+
+#content {
+  flex-grow: 1;
+}
+
+.noaa {
+  image-rendering: -moz-crisp-edges;
+  image-rendering: -o-crisp-edges;
+  image-rendering: pixelated;
+}
+.floatwrapper {
+  position: sticky
+}
+
+.mobile-nav-button {
+  display: block;
+  margin: auto;
+}
\ No newline at end of file