From 5549ebc8e196083b9fd22e3d223ca793f1d912c2 Mon Sep 17 00:00:00 2001 From: Nathan Do Date: Tue, 6 Dec 2022 00:58:53 -0500 Subject: [PATCH 1/3] add dark mode --- themes/rusted/static/css/_base.scss | 2 +- themes/rusted/static/css/_layout.scss | 4 +-- themes/rusted/static/css/main.scss | 42 ++++++++++++++++++++++----- 3 files changed, 38 insertions(+), 10 deletions(-) diff --git a/themes/rusted/static/css/_base.scss b/themes/rusted/static/css/_base.scss index 2b845ea08..632ad18a4 100644 --- a/themes/rusted/static/css/_base.scss +++ b/themes/rusted/static/css/_base.scss @@ -92,7 +92,7 @@ a { text-decoration: none; &:visited { - color: darken($brand-color, 15%); + color: $brand-color-visited; } &:hover { diff --git a/themes/rusted/static/css/_layout.scss b/themes/rusted/static/css/_layout.scss index fe89e8ac2..198f6b8ac 100644 --- a/themes/rusted/static/css/_layout.scss +++ b/themes/rusted/static/css/_layout.scss @@ -17,9 +17,9 @@ letter-spacing: -1px; margin-bottom: 0; - &, + color: $text-color; &:visited { - color: $grey-colour-dark; + color: $text-color; } } diff --git a/themes/rusted/static/css/main.scss b/themes/rusted/static/css/main.scss index b0c48cbca..d73eae830 100644 --- a/themes/rusted/static/css/main.scss +++ b/themes/rusted/static/css/main.scss @@ -3,7 +3,6 @@ // Bootstrap variables $screen-xs-max: 768px !default; -// Our variables $base-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; $base-font-size: 16px; $small-font-size: $base-font-size * 0.875; @@ -11,13 +10,42 @@ $base-line-height: 1.5; $spacing-unit: 30px; -$text-color: #444; -$background-color: #fdfdfd; -$brand-color: #2a7ae2; - -$grey-colour: #828282; +// Our variables +$text-color: var(--text-color); +$background-color: var(--background-color); +$brand-color: var(--brand-color); +$brand-color-visited: var(--brand-color-visited); +$grey-colour: #828282; $grey-colour-light: lighten($grey-colour, 40%); -$grey-colour-dark: darken($grey-colour, 25%); +$grey-colour-dark: darken($grey-colour, 25%); + +// Light theme colors +$text-color-lt: #444; +$background-color-lt: #fdfdfd; +$brand-color-lt: #2a7ae2; +$brand-color-visited-lt: #1756a9; + +// Dark theme colors +$text-color-dt: #f0f0f0; +$background-color-dt: #353535; +$brand-color-dt: #d2991d; +$brand-color-visited-dt: #9a7015; + +:root { + --text-color: #{$text-color-lt}; + --background-color: #{$background-color-lt}; + --brand-color: #{$brand-color-lt}; + --brand-color-visited: #{$brand-color-visited-lt}; +} + +@media(prefers-color-scheme: dark) { + :root { + --text-color: #{$text-color-dt}; + --background-color: #{$background-color-dt}; + --brand-color: #{$brand-color-dt}; + --brand-color-visited: #{$brand-color-visited-dt}; + } +} $on-palm: 600px; $on-laptop: 800px; From c465db5de5c8bab253d97e4d3d6475f3d9387c6c Mon Sep 17 00:00:00 2001 From: Nathan Do Date: Thu, 8 Dec 2022 10:47:37 -0500 Subject: [PATCH 2/3] fix and 
 for dark theme

makes code blocks have light text on dark background and made it so that pre blocks (seen in quote of the week at https://this-week-in-rust.org/blog/2017/06/20/this-week-in-rust-187/) also have text colors that correspond to their theme (instead of boostrap defaults)
---
 themes/rusted/static/css/_base.scss |  5 +++--
 themes/rusted/static/css/main.scss  | 33 ++++++++++++++++++++---------
 2 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/themes/rusted/static/css/_base.scss b/themes/rusted/static/css/_base.scss
index 632ad18a4..b88ed7e7d 100644
--- a/themes/rusted/static/css/_base.scss
+++ b/themes/rusted/static/css/_base.scss
@@ -126,9 +126,9 @@ blockquote {
 pre,
 code {
     font-size: 15px;
-    border: 1px solid $grey-colour-light;
+    border: 1px solid $code-border-color;
     border-radius: 3px;
-    background-color: #eef;
+    background-color: $code-bg-color;
 }
 
 code {
@@ -138,6 +138,7 @@ code {
 pre {
     padding: 8px 12px;
     overflow-x: scroll;
+    color: $pre-color;
 
     > code {
         border: 0;
diff --git a/themes/rusted/static/css/main.scss b/themes/rusted/static/css/main.scss
index d73eae830..1466b5bbd 100644
--- a/themes/rusted/static/css/main.scss
+++ b/themes/rusted/static/css/main.scss
@@ -11,31 +11,41 @@ $base-line-height: 1.5;
 $spacing-unit:     30px;
 
 // Our variables
-$text-color: var(--text-color);
-$background-color: var(--background-color);
-$brand-color: var(--brand-color);
-$brand-color-visited: var(--brand-color-visited);
-$grey-colour: #828282;
-$grey-colour-light: lighten($grey-colour, 40%);
-$grey-colour-dark: darken($grey-colour, 25%);
+$text-color:            var(--text-color);
+$background-color:      var(--background-color);
+$brand-color:           var(--brand-color);
+$brand-color-visited:   var(--brand-color-visited);
+$pre-color:             var(--pre-color);
+$code-bg-color:         var(--code-bg-color);
+$code-border-color:     var(--code-border-color);
+$grey-colour:           #828282;
+$grey-colour-light:     lighten($grey-colour, 40%);
+$grey-colour-dark:      darken($grey-colour, 25%);
 
 // Light theme colors
 $text-color-lt:          #444;
 $background-color-lt:    #fdfdfd;
 $brand-color-lt:         #2a7ae2;
 $brand-color-visited-lt: #1756a9;
+$pre-color-lt:           #333;
+$code-bg-color-lt:       #eef;
 
 // Dark theme colors
 $text-color-dt:          #f0f0f0;
 $background-color-dt:    #353535;
 $brand-color-dt:         #d2991d;
 $brand-color-visited-dt: #9a7015;
+$pre-color-dt:           #aeaeae;
+$code-bg-color-dt:       #2a2a2a;
 
 :root {
-    --text-color:       #{$text-color-lt};
-    --background-color: #{$background-color-lt};
-    --brand-color:      #{$brand-color-lt};
+    --text-color:           #{$text-color-lt};
+    --background-color:     #{$background-color-lt};
+    --brand-color:          #{$brand-color-lt};
     --brand-color-visited:  #{$brand-color-visited-lt};
+    --pre-color:            #{$pre-color-lt};
+    --code-bg-color:        #{$code-bg-color-lt};
+    --code-border-color:    #{$grey-colour-light};
 }
 
 @media(prefers-color-scheme: dark) {
@@ -44,6 +54,9 @@ $brand-color-visited-dt: #9a7015;
         --background-color:     #{$background-color-dt};
         --brand-color:          #{$brand-color-dt};
         --brand-color-visited:  #{$brand-color-visited-dt};
+        --pre-color:            #{$pre-color-dt};
+        --code-bg-color:        #{$code-bg-color-dt};
+        --code-border-color:    #{$code-bg-color-dt};
     }
 }
 

From f9f75a243805cc609b51e0d78defffd5b7f73410 Mon Sep 17 00:00:00 2001
From: Nathan Do 
Date: Tue, 6 Dec 2022 00:59:46 -0500
Subject: [PATCH 3/3] fix typo and modify margins to make it look nicer

---
 themes/rusted/static/css/_homepage.scss | 3 ++-
 themes/rusted/templates/index.html      | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/themes/rusted/static/css/_homepage.scss b/themes/rusted/static/css/_homepage.scss
index 5fa0deb29..a8e023cd3 100644
--- a/themes/rusted/static/css/_homepage.scss
+++ b/themes/rusted/static/css/_homepage.scss
@@ -8,5 +8,6 @@
 }
 
 .subtext {
-    
+    margin-left: 50px;
+    margin-right: 50px;
 }
diff --git a/themes/rusted/templates/index.html b/themes/rusted/templates/index.html
index 43fa4609a..1a30b20de 100644
--- a/themes/rusted/templates/index.html
+++ b/themes/rusted/templates/index.html
@@ -4,7 +4,7 @@
 

   

     
Handpicked Rust updates, 
 delivered to your inbox.

-    
Stay up to date with events, learning resources, and recent developments in Rust community.

+    
Stay up to date with events, learning resources, and recent developments in the Rust community.

   

 

 {% include "_subscribe-form.html" %}