lots of mobile fixes

content/setup/quickstart.md

@@ -16,7 +16,7 @@ Seeing the dolphin means it's working:
 
 ![start_ocean.sh](images/dolphin.png)
 
-One everything is up and running, you can interact with the components. For example, to interact with Pleuston, go to:
+Once everything is up and running, you can interact with the components. For example, to interact with Pleuston, go to:
 
 [http://localhost:3000/](http://localhost:3000/)
 

src/components/DocHeader.module.scss

@@ -1,14 +1,23 @@
 @import 'variables';
 
 .header {
+    padding-top: $spacer;
+    margin-bottom: $spacer;
+
+    @media screen and (min-width: $break-point--small) {
         padding-top: $spacer * $line-height;
         margin-bottom: $spacer * $line-height;
     }
+}
 
 .title {
-    font-size: $font-size-h1;
+    font-size: $font-size-h1 / 1.3;
     margin-top: 0;
     margin-bottom: $spacer / $line-height;
+
+    @media screen and (min-width: $break-point--small) {
+        font-size: $font-size-h1;
+    }
 }
 
 .lead {

src/components/DocToc.module.scss

@@ -2,10 +2,14 @@
 
 .toc {
     background: darken($brand-white, 2%);
-    padding: $spacer;
+    padding: $spacer / 2;
     margin-bottom: $spacer * 2;
 
+    @media screen and (min-width: $break-point--small) {
+        padding: $spacer / $line-height $spacer;
+    }
+
     ul {
-        margin: 0;
+        margin-bottom: 0;
     }
 }

src/components/Footer.module.scss

@@ -49,6 +49,7 @@
 
     a {
         margin: 0 $spacer / 2;
+        display: inline-block;
 
         &:last-child {
             margin-right: 0;

src/components/Header.module.scss

@@ -12,7 +12,6 @@
 .headerContent {
     composes: content from './Content.module.scss';
     display: flex;
-    justify-content: space-between;
     align-items: center;
 }
 
@@ -41,13 +40,37 @@
     margin-left: $spacer / 2;
     display: none;
 
-    @media (min-width: $break-point--small) {
+    @media (min-width: $break-point--medium) {
         display: inline-block;
     }
 }
 
 .headerMenu {
+    flex: 1;
     justify-self: flex-end;
+    text-align: right;
+    white-space: nowrap;
+    overflow-y: hidden;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    margin-right: -($spacer / 2);
+    padding-right: $spacer;
+
+    @media (min-width: $break-point--medium) {
+        padding-right: 0;
+        margin-right: 0;
+    }
+
+    &::-webkit-scrollbar,
+    &::-moz-scrollbar {
+        display: none;
+    }
+
+    &::-webkit-scrollbar {
+        width: 3px;
+        height: 3px;
+        transition: opacity .2s ease-out;
+    }
 }
 
 .section {

src/components/Repositories/RepositoryList.module.scss

@@ -7,6 +7,7 @@
     -webkit-overflow-scrolling: touch;
     margin-left: calc(-50vw + 50%);
     margin-right: calc(-50vw + 50%);
+    padding-right: $spacer;
     display: flex;
 
     @media (min-width: $break-point--medium) {
@@ -18,7 +19,8 @@
 
     article {
         white-space: normal;
-        flex: 0 0 25rem;
+        flex: 0 0 90vw;
+        max-width: 25rem;
         margin-left: $spacer;
         margin-bottom: $spacer / 4;
 
@@ -67,7 +69,7 @@
 
 .repositoryCategoryTitle {
     width: 100%;
-    font-size: $font-size-h3;
+    font-size: $font-size-h4;
     color: $brand-grey-light;
     margin-bottom: $spacer / 2;
 }

src/styles/global.scss

@@ -103,10 +103,15 @@ ol {
             user-select: none;
         }
 
+        + li {
+            margin-top: $spacer / 8;
+        }
+
         ul,
         ol,
         p {
             margin-bottom: 0;
+            margin-top: $spacer / 8;
         }
     }
 }
@@ -205,11 +210,17 @@ cite {
 blockquote,
 blockquote > p {
     font-style: italic;
+    color: lighten($brand-grey, 15%);
 }
 
 blockquote {
     margin: 0 0 $spacer;
-    padding-left: $spacer;
+    padding-left: $spacer / 2;
+    border-left: .2rem solid $brand-grey-lighter;
+
+    @media screen and (min-width: $break-point--small) {
+        padding-left: $spacer / $line-height;
+    }
 }
 
 // Tables

src/templates/Doc.module.scss

@@ -1,19 +1,20 @@
 @import 'variables';
 
 .wrapper {
-    @media (min-width: $break-point--medium) {
     display: flex;
-    }
+    flex-wrap: wrap;
 }
 
 .sidebar {
     margin-top: $spacer / 2;
     margin-bottom: $spacer / 2;
     top: $spacer;
+    order: 2;
 
     @media (min-width: $break-point--medium) {
         width: 27%;
         margin-bottom: 0;
+        order: 1;
 
         + .main {
             width: 73%;
@@ -22,13 +23,22 @@
 }
 
 .main {
+    width: 100%;
     background: $brand-white;
-    padding: 0 $spacer;
+    padding: 0 $spacer / 2;
     border: 1px solid $brand-grey-lighter;
+    border-top: 0;
+    order: 1;
+
+    @media (min-width: $break-point--small) {
+        padding-left: $spacer;
+        padding-right: $spacer;
+    }
 
     @media (min-width: $break-point--medium) {
-        padding: 0 $spacer * 2;
-        border-top: 0;
+        padding-left: $spacer * 2;
+        padding-right: $spacer * 2;
+        order: 2;
     }
 }