Use more horizontal space on smaller screens (#1643)

Author: zachallaun

README.md

@@ -115,7 +115,7 @@ For example, here are some acceptable values:
 ExDoc uses [the makeup project](https://github.com/elixir-makeup/makeup) for syntax highlighting. By default, highlighters for Erlang and Elixir are included. To syntax-highlight other languages, simply add the equivalent `makeup_LANGUAGE` package to your `mix.exs`/`rebar.config` file. For example, for HTML support you would add:
 
 ```elixir
-    {:makeup_html, ">= 0.0.0", only: :dev, runtime: false}
+{:makeup_html, ">= 0.0.0", only: :dev, runtime: false}
 ```
 
 You can find all supported languages under [the Makeup organization on GitHub](https://github.com/elixir-makeup) and view them at [Makeup's website](https://elixir-makeup.github.io/makeup_demo/).

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,27 @@
   border-bottom: 0;
   border-radius: 2px;
 }
+
+@media screen and (max-width: 768px) {
+  /*
+    TODO:
+
+    This selector can be more specific once Firefox ships default
+    support for the :has() pseudo-class: https://caniuse.com/css-has
+
+    .content-inner > pre:has(code),
+    .content-inner section > pre:has(code) {
+  */
+  .content-inner > pre,
+  .content-inner section > pre {
+    margin-left: calc(-1 * var(--content-gutter) - 2px);
+    margin-right: calc(-1 * var(--content-gutter) - 2px);
+  }
+
+  .content-inner > pre code,
+  .content-inner section > pre code {
+    padding-left: var(--content-gutter);
+    padding-right: var(--content-gutter);
+    border-radius: 0;
+  }
+}

assets/css/content/functions.css

@@ -54,6 +54,12 @@
   border: none;
 }
 
+@media screen and (max-width: 768px) {
+  .content-inner .detail-header a.detail-link {
+    margin-left: -30px;
+  }
+}
+
 .content-inner .specs pre {
   font-family: var(--monoFontFamily);
   font-size: .9em;
@@ -72,6 +78,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

@@ -135,6 +135,10 @@
   vertical-align: top;
 }
 
+.content-inner .section-heading {
+  position: relative;
+}
+
 .content-inner .section-heading:hover a.hover-link {
   opacity: 1;
   text-decoration: none;
@@ -146,15 +150,20 @@
   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 {
+    position: absolute;
+    bottom: 0;
+    right: -20px;
+    padding: .3em .6em .4em;
+  }
 }
 
 .content-inner .app-vsn {
@@ -179,3 +188,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;
@@ -20,6 +24,8 @@
   --gray800:                 hsl(216,  52%,  11%      );
   --gray800-opacity-0:      hsla(216,  52%,  11%,   0%);
   --gray900:                 hsl(218,  73%,   4%      );
+  --gray900-opacity-50:     hsla(218,  73%,   4%,  50%);
+  --gray900-opacity-0:      hsla(218,  73%,   4%,   0%);
   --coldGrayFaint:           hsl(240,   5%,  97%      );
   --coldGrayLight:           hsl(240,   5%,  88%      );
   --coldGray-lightened-10:   hsl(240,   5%,  56%      );
@@ -32,8 +38,17 @@
   --green-lightened-10:      hsl( 90, 100%,  45%      );
   --green:                   hsl( 90, 100%,  35%      );
   --white:                   hsl(  0,   0%, 100%      );
+  --white-opacity-50:       hsla(  0,   0%, 100%,  50%);
   --white-opacity-10:       hsla(  0,   0%, 100%,  10%);
+  --white-opacity-0:        hsla(  0,   0%, 100%,   0%);
   --black:                   hsl(  0,   0%,   0%      );
   --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/custom-props/theme-dark.css

@@ -60,4 +60,5 @@ body.dark {
   --success:                     var(--green-lightened-10);
 
   --sidebarButton:               var(--gray50);
+  --sidebarButtonBackground:     linear-gradient(180deg, var(--gray900) 20%, var(--gray900-opacity-50) 70%, var(--gray900-opacity-0) 100%);
 }

assets/css/custom-props/theme-light.css

@@ -60,4 +60,5 @@
   --success:                     var(--green);
 
   --sidebarButton:               var(--gray100);
+  --sidebarButtonBackground:     linear-gradient(180deg, var(--white) 20%, var(--white-opacity-50) 70%, var(--white-opacity-0) 100%);
 }

assets/css/layout.css

@@ -37,13 +37,13 @@ body {
 }
 
 .sidebar-button {
+  --sidebarButtonTopOpen: 6px;
   position: fixed;
   z-index: 99;
   left: 0;
-  top: 7px;
-  transition: color .3s ease-in-out, transform .15s ease-out .1s, opacity .15s ease-out .1s;
+  top: 0;
+  transition: all .3s ease-in-out;
   will-change: transform;
-  transform: translateX(250px);
 }
 
 .content {
@@ -54,8 +54,16 @@ body {
   z-index: 3;
 }
 
-body.sidebar-opening .sidebar-button {
-  transition: transform .3s ease-in-out;
+@media screen and (max-width: 768px) {
+  .content {
+    overflow: auto;
+    scroll-padding-top: 45px;
+  }
+}
+
+body:is(.sidebar-opening, .sidebar-opened) .sidebar-button {
+  transform: translateX(250px);
+  top: var(--sidebarButtonTopOpen);
 }
 
 body.sidebar-opening .sidebar {
@@ -84,11 +92,6 @@ body.sidebar-closing .content {
   transition: all .3s ease-in-out;
 }
 
-body.sidebar-closed .sidebar-button {
-  transition: transform .3s ease-in-out;
-  transform: translateY(-8px);
-}
-
 body.sidebar-closed .sidebar {
   left: -300px;
 }
@@ -98,6 +101,35 @@ body.sidebar-closed .content {
   left: 0;
 }
 
+@media screen and (max-width: 768px) {
+  .sidebar-button:before {
+    --sidebarButtonHeight: 60px;
+    content: '';
+    display: block;
+    z-index: -1;
+    pointer-events: none;
+    position: fixed;
+    left: -1px;
+    top: 0;
+    height: var(--sidebarButtonHeight);
+    width: calc(100vw + 2px);
+    background: var(--sidebarButtonBackground);
+    transition: top .3s ease-in-out;
+  }
+
+  body:is(.sidebar-closed, .sidebar-closing) .sidebar-button:before {
+    top: 0;
+  }
+
+  body:is(.sidebar-opening, .sidebar-opened) .sidebar-button:before {
+    top: calc(-1 * var(--sidebarButtonHeight) - var(--sidebarButtonTopOpen));
+  }
+
+  body.sidebar-opened .sidebar-button:before {
+    opacity: 0;
+  }
+}
+
 body.search-focused .sidebar-button {
   transform: translateX(250px) scaleY(0);
   transition: all .15s ease-out;
@@ -110,9 +142,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 +163,8 @@ body.search-focused .sidebar-search .search-close-button {
   }
 
   .content-inner {
-    padding: 27px 20px 27px 40px;
-    max-width: 100%;
+    padding-top: 10px;
+    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;
 }