Use more horizontal space on smaller screens

* Decrease size of left gutter, allowing hamburger to overlap content.
* Full-bleed code blocks.
* Full-bleed admonition blocks.
* Tweak various mobile styles.
* Improve transition effect when opening/closing sidebar.

Author: zachallaun

assets/css/content/admonition.css

@@ -96,3 +96,17 @@
   border: 1px solid var(--inlineCodeBorder);
   color: var(--black);
 }
+
+@media screen and (max-width: 768px) {
+  .content-inner blockquote:is(.warning, .error, .info, .neutral, .tip) {
+    margin-left: calc(-1 * var(--content-gutter));
+    margin-right: calc(-1 * var(--content-gutter));
+    padding-left: var(--content-gutter);
+    padding-right: var(--content-gutter);
+    border-radius: 0;
+  }
+
+  .content-inner blockquote :is(h3, h4):is(.warning, .error, .info, .neutral, .tip) {
+    margin: 0 calc(-1 * var(--content-gutter));
+  }
+}

assets/css/content/cheatsheet.css

@@ -26,7 +26,6 @@
   .page-cheatmd h2 {
     margin: var(--vertical-space) 0;
     column-span: all;
-    padding-left: 3px;
     color: var(--gray700);
     font-weight: 500;
   }
@@ -38,13 +37,15 @@
   /* h3 */
 
   .page-cheatmd h3 {
-    overflow: hidden;
     margin: 0 0 1em;
-    padding-left: 5px;
     color: var(--main);
     font-weight: 400;
   }
 
+  .page-cheatmd h3.section-heading .hover-link {
+    display: none;
+  }
+
   .page-cheatmd section.h3 {
     min-width: 300px;
     margin: 0 0 calc(var(--vertical-space) * 2) 0;
@@ -224,7 +225,6 @@
   }
 
   .page-cheatmd section.col-2-left > h2 {
-    display: block;
     grid-column-end: span 2;
   }
 
@@ -295,5 +295,9 @@
     .page-cheatmd section.list-6 > ul > li {
       flex: 0 0 50%;
     }
+
+    .page-cheatmd section.width-50 {
+      width: 100%;
+    }
   }
 }

assets/css/content/code.css

@@ -74,3 +74,20 @@
   border-bottom: 0;
   border-radius: 2px;
 }
+
+@media screen and (max-width: 768px) {
+  .content-inner > pre:has(code),
+  .content-inner section > pre:has(code) {
+    margin-left: calc(-1 * var(--content-gutter));
+    margin-right: calc(-1 * var(--content-gutter));
+  }
+
+  .content-inner > pre code,
+  .content-inner section > pre code {
+    padding-left: var(--content-gutter);
+    padding-right: var(--content-gutter);
+    border-left: 0;
+    border-right: 0;
+    border-radius: 0;
+  }
+}

assets/css/content/functions.css

@@ -24,6 +24,17 @@
   position: relative;
 }
 
+@media screen and (max-width: 768px) {
+  .content-inner .detail-header {
+    margin-left: calc(-1 * var(--content-gutter));
+    margin-right: calc(-1 * var(--content-gutter));
+    padding-left: var(--content-gutter);
+    padding-right: var(--content-gutter);
+    border-left: 0;
+    border-top: 3px solid var(--main);
+  }
+}
+
 .content-inner .detail-header .note {
   float: right;
 }
@@ -54,6 +65,12 @@
   border: none;
 }
 
+@media screen and (max-width: 768px) {
+  .content-inner .detail-header a.detail-link {
+    margin-left: -.5em;
+  }
+}
+
 .content-inner .specs pre {
   font-family: var(--monoFontFamily);
   font-size: .9em;
@@ -72,6 +89,12 @@
   margin: 1.2em 0 3em 1.2em;
 }
 
+@media screen and (max-width: 768px) {
+  .content-inner .docstring {
+    margin-left: 0;
+  }
+}
+
 .content-inner .docstring:is(h2, h3, h4, h5) {
   font-weight: 700;
 }

assets/css/content/general.css

@@ -146,15 +146,19 @@
   opacity: 0;
   padding: .3em .6em .6em;
   line-height: 1em;
-  margin-left: -2.7em;
+  margin-left: -2.4em;
   text-decoration: none;
   border: none;
   font-size: 16px;
   vertical-align: middle;
 }
 
-.content-inner .detail :is(h1, h2, h3, h4, h5, h6).section-heading {
-  margin-left: .3em;
+@media screen and (max-width: 768px) {
+  .content-inner .section-heading a.hover-link {
+    float: right;
+    margin: .5em 0 .5em .5em;
+    padding: .3em;
+  }
 }
 
 .content-inner .app-vsn {
@@ -179,3 +183,9 @@
   line-height: 24px;
   font-weight: 400;
 }
+
+@media screen and (max-width: 768px) {
+  .content-inner :is(ol, ul) {
+    padding-left: calc(1.5 * var(--content-gutter));
+  }
+}

assets/css/custom-props/common.css

@@ -1,4 +1,8 @@
 :root {
+  /* Layout & Whitespace */
+  --content-width: 949px;
+  --content-gutter: 60px;
+
   /* Font Families */
   --serifFontFamily: 'Merriweather', 'Book Antiqua', Georgia, 'Century Schoolbook', serif;
   --sansFontFamily: 'Lato', sans-serif;
@@ -37,3 +41,10 @@
   --black-opacity-10:       hsla(  0,   0%,   0%,  10%);
   --black-opacity-50:       hsla(  0,   0%,   0%,  50%);
 }
+
+@media screen and (max-width: 768px) {
+  :root {
+    --content-width: 100%;
+    --content-gutter: 20px;
+  }
+}

assets/css/layout.css

@@ -43,7 +43,6 @@ body {
   top: 7px;
   transition: color .3s ease-in-out, transform .15s ease-out .1s, opacity .15s ease-out .1s;
   will-change: transform;
-  transform: translateX(250px);
 }
 
 .content {
@@ -58,6 +57,15 @@ body.sidebar-opening .sidebar-button {
   transition: transform .3s ease-in-out;
 }
 
+body:is(.sidebar-opening, .sidebar-closing) .sidebar-button {
+  transition: all .3s ease-in-out;
+}
+
+body:is(.sidebar-opening, .sidebar-opened) .sidebar-button {
+  transform: translateX(250px);
+  top: 6px;
+}
+
 body.sidebar-opening .sidebar {
   left: 0;
   transition: left .3s ease-in-out;
@@ -73,6 +81,10 @@ body.sidebar-closing .sidebar-button {
   transform: translateX(0);
 }
 
+body:is(.sidebar-closing, .sidebar-closed) .sidebar-button {
+  left: calc(var(--content-gutter) - var(--sidebar-button-x-padding));
+}
+
 body.sidebar-closing .sidebar {
   left: -300px;
   transition: left .3s ease-in-out;
@@ -85,7 +97,7 @@ body.sidebar-closing .content {
 }
 
 body.sidebar-closed .sidebar-button {
-  transition: transform .3s ease-in-out;
+  transition: transform 0.3s ease-in-out;
   transform: translateY(-8px);
 }
 
@@ -110,9 +122,9 @@ body.search-focused .sidebar-search .search-close-button {
 }
 
 .content-inner {
-  max-width: 949px;
+  max-width: var(--content-width);
   margin: 0 auto;
-  padding: 3px 60px;
+  padding: 3px var(--content-gutter);
 }
 
 .content-inner:focus {
@@ -131,8 +143,8 @@ body.search-focused .sidebar-search .search-close-button {
   }
 
   .content-inner {
-    padding: 27px 20px 27px 40px;
-    max-width: 100%;
+    padding-top: 27px;
+    padding-bottom: 27px;
     overflow-x: auto;
   }
 }

assets/css/sidebar.css

@@ -406,10 +406,11 @@
 }
 
 .sidebar-button {
+  --sidebar-button-x-padding: 11px;
   cursor: pointer;
   background-color: transparent;
   border: none;
-  padding: 15px 11px;
+  padding: 15px var(--sidebar-button-x-padding);
   font-size: 16px;
 }