mobile layout

1 files changed, 61 insertions, 1 deletions

diff --git a/styles/layout.css b/styles/layout.css
index 4052091..cef976d 100644
--- a/styles/layout.css
+++ b/styles/layout.css
@@ -15,6 +15,13 @@
   --card-shadow: 0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);
 }
 
+@media (max-width: 500px) {
+  :root {
+    --header-height: 300px;
+    --header-overlap: 120px;
+  }
+}
+
 body {
   margin: 0;
   padding: 0;
@@ -22,6 +29,7 @@ body {
   flex-direction: column;
   min-height: 100vh;
   background: var(--page-background);
+  min-width: 200px;
 }
 
 
@@ -38,6 +46,23 @@ header {
   justify-items: flex-start;
 }
 
+@media(max-width: 380px) {
+  header {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .siteTitle {
+    text-align: center;
+  }
+
+  nav {
+    flex: 1;
+    width: 100%;
+    text-align: center;
+  }
+}
+
 header:not(.homepage) {
   justify-content: space-between;
 }
@@ -61,6 +86,12 @@ header.homepage .siteTitle {
   font-size: 4em;
 }
 
+@media (max-width: 500px) {
+  header.homepage .siteTitle {
+    font-size: 15vw;
+  }
+}
+
 header:not(.homepage) .siteTitle {
   font-size: 1.2em;
 }
@@ -74,11 +105,18 @@ header nav a {
   margin: 0 calc(1.5 * var(--text-padding));
 }
 
+@media (max-width: 500px) {
+  header nav a {
+    margin: 0 8px;
+  }
+}
+
 header.homepage nav {
   border: none;
   background: var(--main-background);
   height: var(--header-bar-height);
   width: var(--main-width);
+  max-width: calc(100vw - var(--text-padding));
   display: flex;
   flex-direction: row;
   justify-content: center;
@@ -131,6 +169,7 @@ main.mainColumn {
 
 .mainColumn {
   width: var(--main-width);
+  max-width: calc(100vw - var(--text-padding));
   box-sizing: border-box;
   padding: var(--text-padding);
   margin: 0 auto;
@@ -160,12 +199,33 @@ footer {
   display: flex;
   flex-direction: row;
   margin-top: var(--footer-spacing);
+  max-width: 100vw;
 }
 
 footer span {
   flex: 1;
 }
 
-footer a {
+footer a:not(:first-of-type) {
   margin-left: calc(2 * var(--text-padding));
 }
+
+@media (max-width: 600px) {
+  footer {
+    box-sizing: initial;
+    flex: initial;
+    flex-wrap: wrap;
+    height: 60px;
+    align-items:center;
+    justify-content:center;
+    margin: 8px 0;
+    padding: 0;
+  }
+
+  footer span {
+    display: block;
+    min-width: 100%;
+    text-align: center;
+  }
+
+}