Use a minimal stylesheet for the navbar on rustdoc pages

Nemo157 · Joshua Nelson · commit 27dcd99d31ee · 2020-10-28T17:28:31.000-04:00
diff --git a/build.rs b/build.rs
@@ -56,7 +56,6 @@ fn compile_sass_file(
         }
     }
 
-    // Compile base.scss
     let mut context = Context::new_file(format!("{}/{}.scss", STYLE_DIR, name))?;
     context.set_options(Options {
         output_style: OutputStyle::Compressed,
@@ -76,6 +75,9 @@ fn compile_sass() -> Result<(), Box<dyn Error>> {
     // Compile base.scss -> style.css
     compile_sass_file("base", "style", &[])?;
 
+    // Compile rustdoc.scss -> rustdoc.css
+    compile_sass_file("rustdoc", "rustdoc", &[])?;
+
     // Compile vendored.scss -> vendored.css
     compile_sass_file(
         "vendored",
diff --git a/src/web/statics.rs b/src/web/statics.rs
@@ -12,6 +12,7 @@ use std::{ffi::OsStr, fs, path::Path};
 
 const VENDORED_CSS: &str = include_str!(concat!(env!("OUT_DIR"), "/vendored.css"));
 const STYLE_CSS: &str = include_str!(concat!(env!("OUT_DIR"), "/style.css"));
+const RUSTDOC_CSS: &str = include_str!(concat!(env!("OUT_DIR"), "/rustdoc.css"));
 const STATIC_SEARCH_PATHS: &[&str] = &["vendor/pure-css/css", "static"];
 
 pub(crate) fn static_handler(req: &mut Request) -> IronResult<Response> {
@@ -21,6 +22,7 @@ pub(crate) fn static_handler(req: &mut Request) -> IronResult<Response> {
     Ok(match file {
         "vendored.css" => serve_resource(VENDORED_CSS, ContentType("text/css".parse().unwrap()))?,
         "style.css" => serve_resource(STYLE_CSS, ContentType("text/css".parse().unwrap()))?,
+        "rustdoc.css" => serve_resource(RUSTDOC_CSS, ContentType("text/css".parse().unwrap()))?,
         file => serve_file(req, file)?,
     })
 }
diff --git a/templates/rustdoc/head.html b/templates/rustdoc/head.html
@@ -1,5 +1,5 @@
 {%- import "macros.html" as macros -%}
-        <link rel="stylesheet" href="/-/static/style.css?{{ docsrs_version() | slugify }}" type="text/css" media="all" />
+        <link rel="stylesheet" href="/-/static/rustdoc.css?{{ docsrs_version() | slugify }}" type="text/css" media="all" />
 
         <link rel="search" href="/-/static/opensearch.xml" type="application/opensearchdescription+xml" title="Docs.rs" />
 
diff --git a/templates/style/_fa.scss b/templates/style/_fa.scss
@@ -0,0 +1,14 @@
+.fa-svg-fw {
+    width: 1.25em;
+    text-align: center;
+    display: inline-block;
+}
+
+.fa-svg svg {
+    width: 1em;
+    height: 1em;
+    fill: currentColor;
+    /* pull icon about one stroke width into the descenders */
+    margin-bottom: -0.1em;
+}
+
diff --git a/templates/style/_navbar.scss b/templates/style/_navbar.scss
@@ -1,6 +1,11 @@
 // FIXME: Use modules
 @import "vars", "utils";
 
+.pure-g [class*="pure-u"] {
+    font-family: $font-family-sans;
+    color: var(--color-standard);
+}
+
 div.nav-container {
     // Nothing is supposed to be over or hovering the top navbar. Maybe add a few others '('? :)
     z-index: 999;
@@ -12,6 +17,7 @@ div.nav-container {
     top: 0;
     position: fixed;
     color: var(--color-navbar-standard);
+    font-family: $font-family-sans;
 
     li {
         border-left: 1px solid var(--color-border);
@@ -184,3 +190,38 @@ div.nav-container {
         }
     }
 }
+
+#nav-search {
+    color: var(--color-navbar-standard);
+}
+
+body {
+    // Since top navbar is fixed, we need to add padding to the body content.
+    padding-top: $top-navbar-height !important;
+
+    // The scroll padding on the <body> is necessary for Chrome
+    // browsers for now (see
+    // https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/
+    // for an explanation)
+    scroll-padding-top: $top-navbar-height;
+}
+
+html {
+    // Offset anchor jump targets down by this much, so they don't
+    // overlap the top navigation bar (not supported on Desktop/Mobile
+    // Safari yet):
+    scroll-padding-top: $top-navbar-height;
+}
+
+.menu-item-divided {
+    border-bottom: 1px solid var(--color-border);
+}
+
+.pure-menu-list > li.pure-menu-heading {
+    color: var(--color-standard);
+}
+
+i.dependencies.normal {
+    visibility: hidden;
+    display: none;
+}
diff --git a/templates/style/base.scss b/templates/style/base.scss
@@ -1,5 +1,5 @@
 // FIXME: Use modules
-@import "vars", "rustdoc", "utils", "navbar", "themes";
+@import "vars", "utils", "navbar", "themes", "fa";
 
 html,
 input,
@@ -25,21 +25,17 @@ body {
     padding: 0;
     margin: 0;
 
-    input, :not(#rustdoc_body_wrapper) > #search {
+    input, #search {
         background-color: var(--color-background-input);
         color: var(--input-color);
     }
 
-    #nav-search {
-        color: var(--color-navbar-standard);
-    }
-
-    :not(#rustdoc_body_wrapper) > #search {
+    #search {
         box-shadow: 0 0 0 1px var(--color-border), 0 0 0 1px var(--color-border);
         transition: box-shadow 150ms ease-in-out;
     }
 
-    :not(#rustdoc_body_wrapper) > #search:focus {
+    #search:focus {
         box-shadow: var(--input-box-shadow-focus);
     }
 
@@ -49,34 +45,9 @@ body {
     text-align: center;
     font: 16px/1.4 $font-family-sans;
 
-    // Since top navbar is fixed, we need to add padding to the body content.
-    padding-top: $top-navbar-height;
-
-    // The scroll padding on the <body> is necessary for Chrome
-    // browsers for now (see
-    // https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/
-    // for an explanation)
-    scroll-padding-top: $top-navbar-height;
     background-color: var(--color-background);
     color: var(--color-standard);
 
-    // this is a super nasty override for help dialog in rustdocs
-    // see #52 for details
-    &.blur {
-        > :not(#help) {
-            filter: none;
-            -webkit-filter: none;
-        }
-
-        > div.nav-container > *,
-        > div.cratesfyi-package-container > *,
-        > div.rustdoc > :not(#help) {
-            filter: blur(8px);
-            -webkit-filter: blur(8px);
-            opacity: 0.7;
-        }
-    }
-
     > h1 {
         color: var(--color-standard);
     }
@@ -99,13 +70,6 @@ body {
     }
 }
 
-html {
-    // Offset anchor jump targets down by this much, so they don't
-    // overlap the top navigation bar (not supported on Desktop/Mobile
-    // Safari yet):
-    scroll-padding-top: $top-navbar-height;
-}
-
 pre {
     font-size: 0.9rem;
     overflow: auto;
@@ -330,10 +294,6 @@ div.package-sheet-container {
     }
 }
 
-.pure-menu-list > li.pure-menu-heading {
-    color: var(--color-standard);
-}
-
 div.package-page-container {
     div.package-menu {
         padding: 0 10px;
@@ -620,10 +580,6 @@ div.search-page-search-form {
     }
 }
 
-.menu-item-divided {
-    border-bottom: 1px solid var(--color-border);
-}
-
 .rust-navigation-item {
     background: url(/rust-logo.png) no-repeat;
     background-position: 15px 45%;
@@ -679,28 +635,8 @@ div.search-page-search-form {
     cursor: pointer;
 }
 
-i.dependencies.normal {
-    visibility: hidden;
-    display: none;
-}
-
 /* Don't put a newline after code fragments in headers */
 h3 > code,
 h4 > code {
     display: inline-block;
 }
-
-.fa-svg-fw {
-    width: 1.25em;
-    text-align: center;
-    display: inline-block;
-}
-
-.fa-svg svg {
-    width: 1em;
-    height: 1em;
-    fill: currentColor;
-    /* pull icon about one stroke width into the descenders */
-    margin-bottom: -0.1em;
-}
-
diff --git a/templates/style/rustdoc.scss b/templates/style/rustdoc.scss
@@ -1,5 +1,5 @@
 // FIXME: Use modules
-@import "vars";
+@import "vars", "navbar", "themes", "fa";
 
 // Force the navbar to be left-aligned on rustdoc pages
 body.rustdoc-page > .nav-container > .container {
@@ -10,6 +10,23 @@ div.container-rustdoc {
     text-align: left;
 }
 
+// this is a super nasty override for help dialog in rustdocs
+// see #52 for details
+body.blur {
+    > :not(#help) {
+        filter: none;
+        -webkit-filter: none;
+    }
+
+    > div.nav-container > *,
+    > div.cratesfyi-package-container > *,
+    > div.rustdoc > :not(#help) {
+        filter: blur(8px);
+        -webkit-filter: blur(8px);
+        opacity: 0.7;
+    }
+}
+
 // rustdoc overrides
 div.rustdoc {
     font-family: $font-family-serif;
