Add mobile-first styling for site

Contargo · Jun 25, 2019 · 6417383 · 6417383
1 parent 758699c
commit 6417383
Showing 1 changed file with 24 additions and 11 deletions.
diff --git a/site/static/css/style.css b/site/static/css/style.css
@@ -1,9 +1,20 @@
-/* A64B00 */
+:root {
+  --multiplier: 1;
+  --font-size: 14px;
+}
+
+@media (min-width: 768px) {
+  :root {
+    --multiplier: 2;
+    --font-size: 16px;
+  }
+}
+
 body {
   background-color: #e2ddd5;
   color: #555;
-  font-family: "sans-serif";
-  font-size: 1em;
+  font-family: sans-serif;
+  font-size: var(--font-size);
 }
 
 h1,
@@ -18,7 +29,7 @@ h1 {
 
 h2 {
   font-size: 1.4em;
-  margin: 3rem 0 1.5rem 0;
+  margin: calc(1.5rem * var(--multiplier)) 0 calc(0.75rem * var(--multiplier));
 }
 
 h3 {
@@ -35,6 +46,7 @@ a {
   border-bottom: 1px dotted #965;
   text-decoration: none;
 }
+
 a:hover,
 a:visited {
   color: #777;
@@ -43,16 +55,17 @@ a:visited {
 
 main {
   background-color: #ffffff;
-  box-shadow: 0px 0px 20px #00000015;
+  box-shadow: 0 0 20px #00000015;
   max-width: 80ch;
   margin: 0 auto;
-  padding: 2rem 4em;
+  padding: calc(1rem * var(--multiplier)) calc(2em * var(--multiplier));
 }
 
 header,
 footer {
   max-width: 80ch;
-  margin: 2rem auto;
+  margin: 0 auto;
+  padding: calc(0.5rem * var(--multiplier)) calc(2em * var(--multiplier));
 }
 
 header ul {
@@ -71,16 +84,16 @@ header ul > * + * {
 .highlight,
 .mount {
   background-color: #f0f0f0;
-  margin: 0 -4rem;
+  margin: 0 calc(-2rem * var(--multiplier));
 }
 
 .highlight > pre {
-  padding: 1rem 4rem;
+  padding: calc(0.5rem * var(--multiplier)) calc(2rem * var(--multiplier));
   margin: 0;
 }
 
 .mount > * {
-  padding: 1rem 4rem;
+  padding: calc(0.5rem * var(--multiplier)) calc(2rem * var(--multiplier));
   border-bottom: 5px solid #e5e5e5;
 }
 
@@ -96,7 +109,7 @@ header ul > * + * {
   font-family: monospace;
   font-size: 1rem;
   font-weight: bold;
-  margin: 1rem 0 2rem 0;
+  margin: calc(0.5rem * var(--multiplier)) 0 calc(0.75rem * var(--multiplier));
 }
 
 .highlight > pre:before {