Style Rust logo

Author: apiraino

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);
+}

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);
   }
 }
 

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}}" />

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>