improve mobile layout

5 files changed, 34 insertions, 7 deletions

diff --git a/build/layout.moon b/build/layout.moon
index aa97699..6d6e072 100644
--- a/build/layout.moon
+++ b/build/layout.moon
@@ -36,7 +36,8 @@ logo = svg {
         logo
         span {
           span 'mmm', class: 'bold'
-          '.s-ol.nu'
+          '​'
+          '.s‑ol.nu'
         }
       }
       span "fun stuff with code and wires"
diff --git a/scss/_browser.scss b/scss/_browser.scss
index 1c27d40..6a0d78b 100644
--- a/scss/_browser.scss
+++ b/scss/_browser.scss
@@ -47,7 +47,8 @@
       top: 0;
 
       display: flex;
-      flex: 0 0 3.2em;
+      flex: 0 0 auto;
+      flex-wrap: wrap;
       justify-content: space-between;
       background: $gray-bright;
       z-index: 1000;
@@ -58,6 +59,11 @@
 
       > * {
         margin: 1em;
+        white-space: nowrap;
+      }
+
+      > .inspect-btn {
+        @include media-small() { display: none; }
       }
     }
 
diff --git a/scss/_content.scss b/scss/_content.scss
index 607da43..e4345ef 100644
--- a/scss/_content.scss
+++ b/scss/_content.scss
@@ -21,7 +21,7 @@
 
     display: block;
     border-radius: 6px;
-    margin: 0 2em;
+    margin: 0 var(--margin-wide);
     padding: 1em;
     white-space: pre-wrap;
     overflow-x: auto;
@@ -50,7 +50,7 @@
   .example, .well {
     @include left-border;
 
-    margin: 1rem 2rem;
+    margin: 1rem var(--margin-wide);
     padding: 1rem;
     background: $gray-bright;
     border-color: $gray-neutral;
diff --git a/scss/_defs.scss b/scss/_defs.scss
index 7c79831..7806420 100644
--- a/scss/_defs.scss
+++ b/scss/_defs.scss
@@ -6,6 +6,21 @@ $gray-neutral:  #b9bdc1;
 $gray-success:  #bdddc1;
 $gray-fail:     #ddbdc1;
 
+$break-small: 425px;
+$break-large: 768px;
+
+@mixin media-small() {
+  @media only screen and (max-width: $break-small) { @content; }
+}
+
+@mixin media-medium() {
+  @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1) { @content; }
+}
+
+@mixin media-large() {
+  @media only screen and (min-width: $break-large) { @content; }
+}
+
 :root {
   --gray-bright:  #{$gray-bright};
   --gray-dark:    #{$gray-dark};
@@ -13,6 +28,11 @@ $gray-fail:     #ddbdc1;
   --gray-neutral: #{$gray-neutral};
   --gray-success: #{$gray-success};
   --gray-fail:    #{$gray-fail};
+
+  --margin-wide: 2rem;
+  @include media-small() {
+    --margin-wide: 0.5rem;
+  }
 }
 
 @mixin left-border($w: 0.6rem) {
diff --git a/scss/_header.scss b/scss/_header.scss
index 775e23b..ccaf658 100644
--- a/scss/_header.scss
+++ b/scss/_header.scss
@@ -9,7 +9,7 @@ header {
 
     h1 {
       display: flex;
-      justify-content: space-around;
+      justify-content: flex-end;
       align-items: center;
       flex-wrap: wrap;
       margin: 0;
@@ -20,7 +20,6 @@ header {
 
       > span {
         margin-left: auto;
-        white-space: nowrap;
       }
 
       .bold {
@@ -51,9 +50,10 @@ header {
 
   aside {
     margin: 0;
-    padding: 1em 2rem;
+    padding: 0 2rem;
     color: $gray-bright;
     background: $gray-darker;
+    line-height: 3em;
 
     > a {
       margin-right: 2em;