diff --git a/themes/rusted/static/css/_base.scss b/themes/rusted/static/css/_base.scss index 2b845ea08..b88ed7e7d 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 { @@ -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/_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/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..1466b5bbd 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,55 @@ $base-line-height: 1.5; $spacing-unit: 30px; -$text-color: #444; -$background-color: #fdfdfd; -$brand-color: #2a7ae2; +// Our variables +$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; -$grey-colour: #828282; -$grey-colour-light: lighten($grey-colour, 40%); -$grey-colour-dark: darken($grey-colour, 25%); +:root { + --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) { + :root { + --text-color: #{$text-color-dt}; + --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}; + } +} $on-palm: 600px; $on-laptop: 800px; 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 @@
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.