From 3cba22a25904d00221d1f72e1821e445e6905f01 Mon Sep 17 00:00:00 2001
From: apiraino <apiraino@users.noreply.github.com>
Date: Wed, 24 Jul 2024 17:45:25 +0200
Subject: [PATCH 1/4] Replace CSS vars with HTML vars

---
 src/styles/app.scss | 56 ++++++++++++++++++++++++---------------------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/styles/app.scss b/src/styles/app.scss
index bd59032be..293e40613 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -3,11 +3,16 @@
 $body-font: 'Fira Sans', Helvetica, Arial, sans-serif;
 $header-font: 'Alfa Slab One', serif;
 
-$gray: #2a3439;
-$red: #a72145;
-$green: #0b7261;
-$purple: #2e2459;
-$yellow: #ffc832;
+// Default light theme
+:root {
+  --gray: #2a3439;
+  --red: #a72145;
+  --yellow: #ffc832;
+  --code-bg-color: rgba(42, 52, 57, 0.05);
+  --code-border-color: rgba(42, 52, 57, 0.25);
+  --blockquote-bg-color: rgb(247, 249, 249);
+  --blockquote-left-border-color: rgb(195, 205, 210);
+}
 
 html {
   font-size: 62.5%
@@ -35,8 +40,8 @@ body {
 blockquote {
     font-style: italic;
     position: relative;
-    background-color: lighten($gray, 78%);
-    border-left: 8px solid lighten($gray, 60%);
+    background-color: var(--blockquote-bg-color);
+    border-left: 8px solid var(--blockquote-left-border-color);
     border-radius: 5px;
     margin: 0;
     margin-bottom: 2rem;
@@ -110,7 +115,7 @@ ul.nav, ul.nav li {
 }
 
 .nav a {
-  color: $gray;
+  color: var(--gray);
 }
 
 div.brand {
@@ -141,28 +146,28 @@ div.brand {
 .white {
    color: black;
   .highlight {
-    background-color: $yellow;
+    background-color: var(--yellow);
   }
   a {
-    color: $gray;
+    color: var(--gray);
     text-decoration: underline;
   }
   .button.button-secondary {
-    background-color: $yellow;
-    border: 1px solid $yellow;
-    color: $gray;
+    background-color: var(--yellow);
+    color: var(--gray);
+    border: 1px solid var(--yellow);
     text-decoration: none;
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
     &:hover, &:focus {
-      border-color: $gray;
+      border-color: var(--gray);
     }
   }
   code {
     color: black;
-    background-color: rgba($gray, 0.05);
-    border: 1px solid rgba($gray, 0.25);
+    background-color: var(--code-bg-color);
+    border: 1px solid var(--code-border-color);
   }
 
   a.anchor::before {
@@ -173,7 +178,7 @@ div.brand {
     margin-left: -1em;
     text-decoration: none;
     opacity: 0.7;
-    color: $gray;
+    color: var(--gray);
     font-weight: normal;
   }
   :hover > a.anchor::before {
@@ -194,18 +199,18 @@ ul {
 }
 
 .posts {
-  background-color: $gray;
+  background-color: var(--gray);
   color: white;
   .highlight {
-    background-color: $red;
+    background-color: var(--red);
   }
   a {
     color: white;
     text-decoration: underline;
   }
   .button.button-secondary {
-    background-color: $red;
-    border: 1px solid $red;
+    background-color: var(--red);
+    border: 1px solid var(--red);
     color: white;
     text-decoration: none;
     display: block;
@@ -230,7 +235,7 @@ table.post-list a:hover {
 }
 
 .publish-date-author {
-  color: $gray;
+  color: var(--gray);
   margin: -60px 0 60px 0;
 }
 
@@ -245,11 +250,11 @@ footer {
   }
 
   a {
-    color: $yellow;
+    color: var(--yellow);
     text-decoration: none;
 
     &:hover {
-      color: $yellow;
+      color: var(--yellow);
       text-decoration: underline;
     }
   }
@@ -281,7 +286,7 @@ h3, .post h2, header h2 {
   h2 {
     font-size: 2em;
   }
-  
+
   h3 {
     display: block;
   }
@@ -323,4 +328,3 @@ header h1 {
     border-top-left-radius: 0;
   }
 }
-

From ee2f8cfa1e19a53a035ededbdaf54e4ad09b8f24 Mon Sep 17 00:00:00 2001
From: apiraino <apiraino@users.noreply.github.com>
Date: Mon, 29 Jul 2024 17:18:59 +0200
Subject: [PATCH 2/4] Add dark mode

---
 src/styles/app.scss | 55 ++++++++++++++++++++++++++++++++++++---------
 1 file changed, 45 insertions(+), 10 deletions(-)

diff --git a/src/styles/app.scss b/src/styles/app.scss
index 293e40613..b7e48bd33 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -8,14 +8,46 @@ $header-font: 'Alfa Slab One', serif;
   --gray: #2a3439;
   --red: #a72145;
   --yellow: #ffc832;
+  --code-color: black;
   --code-bg-color: rgba(42, 52, 57, 0.05);
   --code-border-color: rgba(42, 52, 57, 0.25);
+  --blockquote-color: black;
   --blockquote-bg-color: rgb(247, 249, 249);
   --blockquote-left-border-color: rgb(195, 205, 210);
+  --body-background-color: white;
+  --body-foreground-color: white;
+  --body-color: rgb(34,34,34);
+  --div-brand-a-color: black;
+  --white-elem-color: black;
+  --white-a: #2a3439;
+  --nav-links-a: #2a3439;
+  --publish-date-author: #2a3439;
+  --section-header-h2-color: black;
+}
+
+// Dark theme
+@media (prefers-color-scheme: dark) {
+  :root {
+    --code-color: white;
+    --code-bg-color: rgba(213, 203, 198, 0.05);
+    --code-border-color: rgba(213, 203, 198, 0.25);
+    --blockquote-color: rgb(195, 205, 210);
+    --blockquote-bg-color: rgba(213, 203, 198, 0.05);
+    --blockquote-left-border-color: rgb(195, 205, 210);
+    --body-background-color: #181a1b;
+    --body-foreground-color: #e8e6e3;
+    --body-color: white;
+    --div-brand-a-color: white;
+    --white-elem-color: white;
+    --white-elem-a: #d5cbc6;
+    --nav-links-a: #d5cbc6;
+    --publish-date-author: #d5cbc6;
+    --section-header-h2-color: white;
+  }
 }
 
 html {
-  font-size: 62.5%
+  font-size: 62.5%;
 }
 
 @media screen and (min-width: 30em) {
@@ -26,14 +58,15 @@ html {
 
 body {
   font-family: $body-font;
-  background-color: white;
+  background-color: var(--body-background-color);
+  color: var(--body-color);
 
   /* Ensure the footer is always at the bottom of the screen */
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   & > #main-content {
-      flex: 1;
+    flex: 1;
   }
 }
 
@@ -85,6 +118,7 @@ section {
       margin: 0;
       padding: 0;
       letter-spacing: 1px;
+      color: var(--section-header-h2-color);
     }
   }
 }
@@ -116,6 +150,7 @@ ul.nav, ul.nav li {
 
 .nav a {
   color: var(--gray);
+  color: var(--nav-links-a);
 }
 
 div.brand {
@@ -128,7 +163,7 @@ div.brand {
   margin-top: $v-top;
 
   & a {
-    color: black;
+    color: var(--div-brand-a-color);
     text-decoration: none;
   }
 
@@ -144,12 +179,12 @@ div.brand {
 }
 
 .white {
-   color: black;
+  color: var(--white-elem-color);
   .highlight {
     background-color: var(--yellow);
   }
   a {
-    color: var(--gray);
+    color: var(--white-elem-a);
     text-decoration: underline;
   }
   .button.button-secondary {
@@ -165,7 +200,7 @@ div.brand {
     }
   }
   code {
-    color: black;
+    color: var(--code-color);
     background-color: var(--code-bg-color);
     border: 1px solid var(--code-border-color);
   }
@@ -200,12 +235,12 @@ ul {
 
 .posts {
   background-color: var(--gray);
-  color: white;
+  color: var(--body-foreground-color);
   .highlight {
     background-color: var(--red);
   }
   a {
-    color: white;
+    color: var(--body-foreground-color);
     text-decoration: underline;
   }
   .button.button-secondary {
@@ -235,7 +270,7 @@ table.post-list a:hover {
 }
 
 .publish-date-author {
-  color: var(--gray);
+  color: var(--publish-date-author);
   margin: -60px 0 60px 0;
 }
 

From b2b716f04fb874632576eb1ad1c4007fb13f90e0 Mon Sep 17 00:00:00 2001
From: apiraino <apiraino@users.noreply.github.com>
Date: Fri, 9 Aug 2024 15:35:57 +0200
Subject: [PATCH 3/4] Add theme selector

---
 .gitignore                     |  1 +
 src/lib.rs                     |  1 +
 src/styles/app.scss            | 93 +++++++++++++++++++++++++++-------
 src/styles/noscript.scss       | 53 +++++++++++++++++++
 static/scripts/theme-switch.js | 63 +++++++++++++++++++++++
 templates/footer.hbs           |  1 +
 templates/headers.hbs          | 21 +++++---
 templates/nav.hbs              |  6 +++
 8 files changed, 212 insertions(+), 27 deletions(-)
 create mode 100644 src/styles/noscript.scss
 create mode 100644 static/scripts/theme-switch.js

diff --git a/.gitignore b/.gitignore
index 0691a5444..c12003316 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@ site
 static/styles/vendor.css
 static/styles/app.css
 static/styles/fonts.css
+static/styles/noscript.css
diff --git a/src/lib.rs b/src/lib.rs
index 6823f1193..38e0cfe05 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -88,6 +88,7 @@ impl<'a> Generator<'a> {
             self.render_blog(blog)?;
         }
         self.compile_sass("app")?;
+        self.compile_sass("noscript")?;
         self.compile_sass("fonts")?;
         self.concat_vendor_css(vec!["skeleton", "tachyons"])?;
         self.copy_static_files()?;
diff --git a/src/styles/app.scss b/src/styles/app.scss
index b7e48bd33..227e7821b 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -3,8 +3,10 @@
 $body-font: 'Fira Sans', Helvetica, Arial, sans-serif;
 $header-font: 'Alfa Slab One', serif;
 
+// Switching theme will only work if JavaScript is enabled as well
+
 // Default light theme
-:root {
+:root, :root:not([data-theme]) {
   --gray: #2a3439;
   --red: #a72145;
   --yellow: #ffc832;
@@ -23,27 +25,38 @@ $header-font: 'Alfa Slab One', serif;
   --nav-links-a: #2a3439;
   --publish-date-author: #2a3439;
   --section-header-h2-color: black;
+  --theme-icon: #43484d;
+  --theme-popup-border: #43484d;
+  --theme-popup-bg: white;
+  --theme-hover: #cacaca;
+  --theme-choice-color: black;
 }
 
 // Dark theme
-@media (prefers-color-scheme: dark) {
-  :root {
-    --code-color: white;
-    --code-bg-color: rgba(213, 203, 198, 0.05);
-    --code-border-color: rgba(213, 203, 198, 0.25);
-    --blockquote-color: rgb(195, 205, 210);
-    --blockquote-bg-color: rgba(213, 203, 198, 0.05);
-    --blockquote-left-border-color: rgb(195, 205, 210);
-    --body-background-color: #181a1b;
-    --body-foreground-color: #e8e6e3;
-    --body-color: white;
-    --div-brand-a-color: white;
-    --white-elem-color: white;
-    --white-elem-a: #d5cbc6;
-    --nav-links-a: #d5cbc6;
-    --publish-date-author: #d5cbc6;
-    --section-header-h2-color: white;
-  }
+:root[data-theme='dark'] {
+  --gray: #2a3439;
+  --red: #a72145;
+  --yellow: #ffc832;
+  --code-color: white;
+  --code-bg-color: rgba(213, 203, 198, 0.05);
+  --code-border-color: rgba(213, 203, 198, 0.25);
+  --blockquote-color: rgb(195, 205, 210);
+  --blockquote-bg-color: rgba(213, 203, 198, 0.05);
+  --blockquote-left-border-color: rgb(195, 205, 210);
+  --body-background-color: #181a1b;
+  --body-foreground-color: #e8e6e3;
+  --body-color: white;
+  --div-brand-a-color: white;
+  --white-elem-color: white;
+  --white-elem-a: #d5cbc6;
+  --nav-links-a: #d5cbc6;
+  --publish-date-author: #d5cbc6;
+  --section-header-h2-color: white;
+  --theme-icon: #43484d;
+  --theme-popup-border: #43484d;
+  --theme-popup-bg: #141617;
+  --theme-hover: #474c51;
+  --theme-choice-color: #d5cbc6;
 }
 
 html {
@@ -363,3 +376,45 @@ header h1 {
     border-top-left-radius: 0;
   }
 }
+
+// Theme switch popup
+// theme selector visible only if JavaScript is available
+
+.theme-icon {
+  display: none;
+  line-height: 2em;
+  border: 2px solid var(--theme-icon);
+  border-radius: 5px;
+  padding: 0px 5px;
+  color: var(--theme-choice-color);
+  &:hover {
+    color: var(--theme-choice-color);
+  }
+}
+
+#theme-choice {
+  display: none;
+  border: 2px solid var(--theme-popup-border);
+  border-radius: 5px;
+  color: var(--theme-choice-color);
+  background: var(--theme-popup-bg);
+  position: absolute;
+  list-style: none;
+  font-weight: 400;
+  padding: 0px;
+  // counterbalance vendored skeleton.css
+  margin: 0.2em -0.5em;
+}
+
+.theme-item {
+  padding: 0px 5px;
+}
+
+#theme-choice.showThemeDropdown {
+  display: block;
+  z-index: 1;
+}
+
+li.theme-item:hover {
+  background-color: var(--theme-hover);
+}
diff --git a/src/styles/noscript.scss b/src/styles/noscript.scss
new file mode 100644
index 000000000..ced45fe5e
--- /dev/null
+++ b/src/styles/noscript.scss
@@ -0,0 +1,53 @@
+// This stylesheet is used when the user agent has no JavaScript capabilities (or has it disabled)
+// Sets dark theme according to user agent preferences
+
+// Default light theme
+:root, :root:not([data-theme]) {
+  --gray: #2a3439;
+  --red: #a72145;
+  --yellow: #ffc832;
+  --code-color: black;
+  --code-bg-color: rgba(42, 52, 57, 0.05);
+  --code-border-color: rgba(42, 52, 57, 0.25);
+  --blockquote-color: black;
+  --blockquote-bg-color: rgb(247, 249, 249);
+  --blockquote-left-border-color: rgb(195, 205, 210);
+  --body-background-color: white;
+  --body-foreground-color: white;
+  --body-color: rgb(34,34,34);
+  --div-brand-a-color: black;
+  --white-elem-color: black;
+  --white-a: #2a3439;
+  --nav-links-a: #2a3439;
+  --publish-date-author: #2a3439;
+  --section-header-h2-color: black;
+}
+
+// Dark theme (probed from user prefs)
+@media (prefers-color-scheme: dark) {
+  :root, :root:not([data-theme]) {
+    --gray: #2a3439;
+    --red: #a72145;
+    --yellow: #ffc832;
+    --code-color: white;
+    --code-bg-color: rgba(213, 203, 198, 0.05);
+    --code-border-color: rgba(213, 203, 198, 0.25);
+    --blockquote-color: rgb(195, 205, 210);
+    --blockquote-bg-color: rgba(213, 203, 198, 0.05);
+    --blockquote-left-border-color: rgb(195, 205, 210);
+    --body-background-color: #181a1b;
+    --body-foreground-color: #e8e6e3;
+    --body-color: white;
+    --div-brand-a-color: white;
+    --white-elem-color: white;
+    --white-elem-a: #d5cbc6;
+    --nav-links-a: #d5cbc6;
+    --publish-date-author: #d5cbc6;
+    --section-header-h2-color: white;
+  }
+}
+
+// Don't show the theme selector button when JavaScript is disabled
+#theme-icon {
+  display: none !important;
+}
diff --git a/static/scripts/theme-switch.js b/static/scripts/theme-switch.js
new file mode 100644
index 000000000..804e72b58
--- /dev/null
+++ b/static/scripts/theme-switch.js
@@ -0,0 +1,63 @@
+"use strict";
+
+function changeThemeTo(val) {
+    document.documentElement.setAttribute("data-theme", val);
+    // save theme prefs in the browser
+    if (storageAvailable("localStorage")) {
+        localStorage.setItem("blog-rust-lang-org-theme", val);
+    }
+    // the theme dropdown will close itself when returning to the dropdown() caller
+}
+
+function dropdown () {
+    document.getElementById("theme-choice").classList.toggle("showThemeDropdown");
+}
+
+// courtesy MDN
+function storageAvailable(type) {
+    let storage;
+    try {
+        storage = window[type];
+        const x = "__storage_test__";
+        storage.setItem(x, x);
+        storage.removeItem(x);
+        return true;
+    } catch (e) {
+        return (
+            e instanceof DOMException &&
+                e.name === "QuotaExceededError" &&
+                // acknowledge QuotaExceededError only if there's something already stored
+            storage &&
+                storage.length !== 0
+        );
+    }
+}
+
+function handleBlur(event) {
+    const parent = document.getElementById("theme-choice");
+    if (!parent.contains(document.activeElement) &&
+        !parent.contains(event.relatedTarget) &&
+        parent.classList.contains("showThemeDropdown")
+       ) {
+        console.debug('Closing the dropdown');
+        parent.classList.remove("showThemeDropdown");
+    }
+}
+
+// close the theme dropdown if clicking somewhere else
+document.querySelector('.theme-icon').onblur = handleBlur;
+
+// Check for saved user preference on load, else check and save user agent prefs
+let savedTheme = null;
+if (storageAvailable("localStorage")) {
+    savedTheme = localStorage.getItem("blog-rust-lang-org-theme");
+}
+if (savedTheme) {
+    document.documentElement.setAttribute("data-theme", savedTheme);
+} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    document.documentElement.setAttribute("data-theme", "dark");
+    localStorage.setItem("blog-rust-lang-org-theme", "dark");
+}
+
+// show the theme selector only if JavaScript is enabled/available
+document.querySelector('.theme-icon').style.display = 'block';
diff --git a/templates/footer.hbs b/templates/footer.hbs
index 30899b465..b089d6b1b 100644
--- a/templates/footer.hbs
+++ b/templates/footer.hbs
@@ -44,3 +44,4 @@
 
 <!-- scripts -->
 <script src="{{root}}scripts/highlight.js"></script>
+<script src="{{root}}scripts/theme-switch.js"></script>
diff --git a/templates/headers.hbs b/templates/headers.hbs
index 3e19aa182..f94e6eea0 100644
--- a/templates/headers.hbs
+++ b/templates/headers.hbs
@@ -1,9 +1,9 @@
- <!-- Twitter card -->
- <meta name="twitter:card" content="summary">
- <meta name="twitter:site" content="@rustlang">
- <meta name="twitter:creator" content="@rustlang">
- <meta name="twitter:title" content="{{title}}">
- <meta name="twitter:description" content="{{blog.description}}">
+<!-- Twitter card -->
+<meta name="twitter:card" content="summary">
+<meta name="twitter:site" content="@rustlang">
+<meta name="twitter:creator" content="@rustlang">
+<meta name="twitter:title" content="{{title}}">
+<meta name="twitter:description" content="{{blog.description}}">
 <meta name="twitter:image" content="https://www.rust-lang.org/static/images/rust-social.jpg">
 
 <!-- Facebook OpenGraph -->
@@ -19,6 +19,11 @@
 <link rel="stylesheet" href="{{root}}styles/app.css"/>
 <link rel="stylesheet" href="{{root}}styles/highlight.css"/>
 
+<!-- stylesheet for user agents without js -->
+<noscript>
+    <link rel="stylesheet" href="{{root}}styles/noscript.css">
+</noscript>
+
 <!-- favicon -->
 <link rel="apple-touch-icon" sizes="180x180" href="{{root}}images/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="16x16" href="{{root}}images/favicon-16x16.png">
@@ -29,5 +34,5 @@
 <meta name="msapplication-TileColor" content="#00aba9">
 <meta name="theme-color" content="#ffffff">
 
- <!-- atom -->
- <link type="application/atom+xml" rel="alternate" href="https://blog.rust-lang.org/{{blog.prefix}}feed.xml" title="{{blog.title}}" />
+<!-- atom -->
+<link type="application/atom+xml" rel="alternate" href="https://blog.rust-lang.org/{{blog.prefix}}feed.xml" title="{{blog.title}}" />
diff --git a/templates/nav.hbs b/templates/nav.hbs
index d63976122..67fb224a5 100644
--- a/templates/nav.hbs
+++ b/templates/nav.hbs
@@ -13,5 +13,11 @@
     <li class="tc pv2 ph2 ph4-ns flex-20-s"><a href="https://www.rust-lang.org/tools">Tools</a></li>
     <li class="tc pv2 ph2 ph4-ns flex-20-s"><a href="https://www.rust-lang.org/governance">Governance</a></li>
     <li class="tc pv2 ph2 ph4-ns flex-20-s"><a href="https://www.rust-lang.org/community">Community</a></li>
+    <button class="theme-icon" onclick="dropdown();">🖌
+      <ul id="theme-choice">
+        <li class="theme-item" onclick="changeThemeTo('light');">Light</li>
+        <li class="theme-item" onclick="changeThemeTo('dark');">Dark</li>
+      </ul>
+    </button>
   </ul>
 </nav>

From 614b18bf92e8fe7f281df20d4da00c553d5fa10c Mon Sep 17 00:00:00 2001
From: apiraino <apiraino@users.noreply.github.com>
Date: Mon, 26 Aug 2024 17:34:38 +0200
Subject: [PATCH 4/4] Style Rust logo

---
 src/styles/app.scss      | 12 +++++++++---
 src/styles/noscript.scss |  2 ++
 templates/headers.hbs    | 16 ++++++++--------
 templates/nav.hbs        |  2 +-
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/styles/app.scss b/src/styles/app.scss
index 227e7821b..2d53046af 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -30,6 +30,7 @@ $header-font: 'Alfa Slab One', serif;
   --theme-popup-bg: white;
   --theme-hover: #cacaca;
   --theme-choice-color: black;
+  --rust-logo-filter: initial;
 }
 
 // Dark theme
@@ -57,6 +58,7 @@ $header-font: 'Alfa Slab One', serif;
   --theme-popup-bg: #141617;
   --theme-hover: #474c51;
   --theme-choice-color: #d5cbc6;
+  --rust-logo-filter: drop-shadow(1px 0 0px #fff) drop-shadow(0 1px 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 -1px 0 #fff);
 }
 
 html {
@@ -79,7 +81,7 @@ body {
   display: flex;
   flex-direction: column;
   & > #main-content {
-    flex: 1;
+      flex: 1;
   }
 }
 
@@ -192,7 +194,7 @@ div.brand {
 }
 
 .white {
-  color: var(--white-elem-color);
+   color: var(--white-elem-color);
   .highlight {
     background-color: var(--yellow);
   }
@@ -334,7 +336,7 @@ h3, .post h2, header h2 {
   h2 {
     font-size: 2em;
   }
-
+  
   h3 {
     display: block;
   }
@@ -418,3 +420,7 @@ header h1 {
 li.theme-item:hover {
   background-color: var(--theme-hover);
 }
+
+.rust-logo {
+    filter: var(--rust-logo-filter);
+}
diff --git a/src/styles/noscript.scss b/src/styles/noscript.scss
index ced45fe5e..94a877e0c 100644
--- a/src/styles/noscript.scss
+++ b/src/styles/noscript.scss
@@ -21,6 +21,7 @@
   --nav-links-a: #2a3439;
   --publish-date-author: #2a3439;
   --section-header-h2-color: black;
+  --rust-logo-filter: initial;
 }
 
 // Dark theme (probed from user prefs)
@@ -44,6 +45,7 @@
     --nav-links-a: #d5cbc6;
     --publish-date-author: #d5cbc6;
     --section-header-h2-color: white;
+    --rust-logo-filter: drop-shadow(1px 0 0px #fff) drop-shadow(0 1px 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 -1px 0 #fff);
   }
 }
 
diff --git a/templates/headers.hbs b/templates/headers.hbs
index f94e6eea0..fb4b824ae 100644
--- a/templates/headers.hbs
+++ b/templates/headers.hbs
@@ -1,9 +1,9 @@
-<!-- Twitter card -->
-<meta name="twitter:card" content="summary">
-<meta name="twitter:site" content="@rustlang">
-<meta name="twitter:creator" content="@rustlang">
-<meta name="twitter:title" content="{{title}}">
-<meta name="twitter:description" content="{{blog.description}}">
+ <!-- Twitter card -->
+ <meta name="twitter:card" content="summary">
+ <meta name="twitter:site" content="@rustlang">
+ <meta name="twitter:creator" content="@rustlang">
+ <meta name="twitter:title" content="{{title}}">
+ <meta name="twitter:description" content="{{blog.description}}">
 <meta name="twitter:image" content="https://www.rust-lang.org/static/images/rust-social.jpg">
 
 <!-- Facebook OpenGraph -->
@@ -34,5 +34,5 @@
 <meta name="msapplication-TileColor" content="#00aba9">
 <meta name="theme-color" content="#ffffff">
 
-<!-- atom -->
-<link type="application/atom+xml" rel="alternate" href="https://blog.rust-lang.org/{{blog.prefix}}feed.xml" title="{{blog.title}}" />
+ <!-- atom -->
+ <link type="application/atom+xml" rel="alternate" href="https://blog.rust-lang.org/{{blog.prefix}}feed.xml" title="{{blog.title}}" />
diff --git a/templates/nav.hbs b/templates/nav.hbs
index 67fb224a5..36d1da5ed 100644
--- a/templates/nav.hbs
+++ b/templates/nav.hbs
@@ -1,7 +1,7 @@
 <nav class="flex flex-row justify-center justify-end-l items-center flex-wrap ph2 pl3-ns pr4-ns">
   <div class="brand flex-auto w-100 w-auto-l self-start tc tl-l">
     <a href="{{root}}{{blog.prefix}}">
-      <img class="v-mid ml0-l" alt="Rust Logo" src="{{root}}images/rust-logo-blk.svg">
+      <img class="v-mid ml0-l rust-logo" alt="Rust Logo" src="{{root}}images/rust-logo-blk.svg">
       <span class="dib ml1 ml0-l">{{blog.title}}</span>
     </a>
   </div>