Merge pull request #1111 from rtfeldman/docs-improvements

Fix some docs styles on mobile

compiler/module/src/lib.rs

@@ -1,6 +1,6 @@
 #![warn(clippy::all, clippy::dbg_macro)]
 // See github.com/rtfeldman/roc/issues/800 for discussion of the large_enum_variant check.
-#![allow(clippy::large_enum_variant)]
+#![allow(clippy::large_enum_variant, clippy::upper_case_acronyms)]
 
 pub mod ident;
 pub mod low_level;

compiler/mono/src/lib.rs

@@ -1,6 +1,6 @@
 #![warn(clippy::all, clippy::dbg_macro)]
 // See github.com/rtfeldman/roc/issues/800 for discussion of the large_enum_variant check.
-#![allow(clippy::large_enum_variant)]
+#![allow(clippy::large_enum_variant, clippy::upper_case_acronyms)]
 
 pub mod borrow;
 pub mod expand_rc;

docs/src/static/styles.css

@@ -66,16 +66,14 @@ a:hover {
 }
 
 .pkg-and-logo {
-  min-width: 0;
+  min-width: 0; /* necessary for text-overflow: ellipsis to work in descendants */
-  /* necessary for text-overflow: ellipsis to work in descendants */
   display: flex;
   align-items: center;
   height: 100%;
   background-color: var(--top-bar-bg);
 }
 
-.pkg-and-logo a,
+.pkg-and-logo a, .pkg-and-logo a:visited {
-.pkg-and-logo a:visited {
   color: var(--top-bar-fg);
 }
 
@@ -84,18 +82,11 @@ a:hover {
   text-decoration: none;
 }
 
-.main-container {
-  min-width: 0;
-  /* necessary for text-overflow: ellipsis to work in descendants */
-}
-
 .search-button {
-  flex-shrink: 0;
+  flex-shrink: 0; /* always shrink the package name before these; they have a relatively constrained length */
-  /* always shrink the package name before these; they have a relatively constrained length */
   padding: 12px 18px;
   margin-right: 42px;
-  display: none;
+  display: none; /* only show this in the mobile view */
-  /* only show this in the mobile view */
 }
 
 .version {
@@ -127,6 +118,8 @@ main {
   line-height: 1.85em;
   margin-top: 2px;
   padding: 48px;
+
+  min-width: 0; /* necessary for text-overflow: ellipsis to work in descendants */
 }
 
 #sidebar-nav {
@@ -165,8 +158,7 @@ main {
   font-family: var(--font-sans);
   font-size: 24px;
   height: 100%;
-  min-width: 0;
+  min-width: 0; /* necessary for text-overflow: ellipsis to work in descendants */
-  /* necessary for text-overflow: ellipsis to work in descendants */
 }
 
 .top-header-triangle {
@@ -181,8 +173,8 @@ main {
 }
 
 p {
-  overflow-wrap: break-word;
+    overflow-wrap: break-word;
-  margin: 24px 0;
+    margin: 24px 0;
 }
 
 footer {
@@ -240,8 +232,7 @@ footer p {
   margin-bottom: 48px;
 }
 
-.module-name a,
+.module-name a, .module-name a:visited {
-.module-name a:visited {
   color: inherit;
 }
 
@@ -259,8 +250,7 @@ footer p {
   text-overflow: ellipsis;
 }
 
-a,
+a, a:visited {
-a:visited {
   color: var(--link-color);
 }
 
@@ -325,20 +315,19 @@ pre code {
   height: 0;
 }
 
-#module-search,
+#module-search, #module-search:focus {
-#module-search:focus {
   opacity: 1;
   padding: 12px 16px;
   height: 48px;
 }
 
 /* Show the "Search" label link when the text input has a placeholder */
-#module-search:placeholder-shown+#search-link {
+#module-search:placeholder-shown + #search-link {
   display: flex;
 }
 
 /* Hide the "Search" label link when the text input has focus */
-#module-search:focus+#search-link {
+#module-search:focus + #search-link {
   display: none;
 }
 
@@ -398,13 +387,13 @@ pre code {
   }
 }
 
-@media only screen and (max-device-width: 480px) {
+@media only screen and (max-device-width: 480px) and (orientation: portrait) {
   .search-button {
-    display: block;
+    display: block; /* This is only visible in mobile. */
-    /* This is only visible in mobile. */
   }
 
   .top-header {
+    justify-content: space-between;
     width: auto;
   }
 
@@ -443,21 +432,19 @@ pre code {
   }
 
   main {
+    grid-column-start: none;
+    grid-column-end: none;
+    grid-row-start: above-footer;
+    grid-row-end: above-footer;
     padding: 18px;
     font-size: 16px;
   }
 
-  .container {
+  #sidebar-nav {
-    margin: 0;
+    grid-column-start: none;
-    min-width: 320px;
+    grid-column-end: none;
-    max-width: 100%;
+    grid-row-start: sidebar;
-  }
+    grid-row-end: sidebar;
-
-  .content {
-    flex-direction: column;
-  }
-
-  .sidebar {
     margin-top: 0;
     padding-left: 0;
     width: auto;
@@ -478,12 +465,20 @@ pre code {
     font-size: 16px;
   }
 
-  .top-header {
+  body {
-    justify-content: space-between;
+    grid-template-columns: auto;
-  }
+    grid-template-rows: [top-header] var(--top-header-height) [before-sidebar] auto [sidebar] auto [main-content] auto [above-footer] auto [footer] auto;
+/* [before-sidebar] 1fr [sidebar] var(--sidebar-width) [main-content] fit-content(calc(1280px - var(--sidebar-width))) [end] 1fr; */
+
+    margin: 0;
+    min-width: 320px;
+    max-width: 100%;
 
-  .content {
     /* Display the sidebar below <main> without affecting tab index */
     flex-direction: column-reverse;
   }
+
+  .top-header-triangle {
+    display: none;
+  }
 }