From 5911c0081e133d2606388b6e2c82629bcac1e66b Mon Sep 17 00:00:00 2001 From: Jake Jarvis Date: Mon, 1 Nov 2021 11:43:12 -0400 Subject: [PATCH] a bit more SCSS cleanup --- assets/sass/abstracts/_settings.scss | 15 ++++++++------- assets/sass/abstracts/_themes.scss | 8 +++++--- assets/sass/components/_footer.scss | 2 +- assets/sass/components/_global.scss | 16 ++++++++-------- assets/sass/components/_header.scss | 24 ++++++++++++++---------- assets/sass/pages/_home.scss | 6 +++--- 6 files changed, 39 insertions(+), 32 deletions(-) diff --git a/assets/sass/abstracts/_settings.scss b/assets/sass/abstracts/_settings.scss index f1e156b6..bd94e1c3 100644 --- a/assets/sass/abstracts/_settings.scss +++ b/assets/sass/abstracts/_settings.scss @@ -1,5 +1,11 @@ @use "sass:list"; +// The maximum width of the content area: +$max-width: 865px; + +// Width at which to switch to mobile styles: +$responsive-width: 800px; + // Web fonts: $webfont-sans: "Inter"; $webfont-sans-variable: "Inter var"; @@ -18,16 +24,11 @@ $font-stack-variable: list.join($webfont-sans-variable, $system-fonts-sans); $font-stack-mono: list.join($webfont-mono, $system-fonts-monospace); $font-stack-mono-variable: list.join($webfont-mono-variable, $system-fonts-monospace); -// The maximum width of the content area: -$max-width: 865px; - -// Width at which to switch to mobile styles: -$responsive-width: 800px; - // Fancy link underline settings: $link-underline-opacity: 40%; $link-underline-size: 2px; $link-opacity-color: #ffffff; -// Elements to fade on dark/light theme toggle: +// Default fading style when switching between light/dark themes: $theme-transition-duration: 0.15s; +$theme-transition-function: linear; diff --git a/assets/sass/abstracts/_themes.scss b/assets/sass/abstracts/_themes.scss index 43041c8e..445328eb 100644 --- a/assets/sass/abstracts/_themes.scss +++ b/assets/sass/abstracts/_themes.scss @@ -1,9 +1,8 @@ -@use "sass:map"; @use "sass:list"; +@use "sass:map"; @use "sass:meta"; @use "settings"; -@use "functions" as *; // Takes a map of CSS properties and theme keys (see below) and set both body.light and body.dark selectors. // ex. @include themes.themed($color: "text", $background-color: "background-inner"); @@ -19,7 +18,7 @@ // list themed properties under CSS transitions for fancy fading transition-property: list.join($properties, (), $separator: comma); transition-duration: #{settings.$theme-transition-duration}; - transition-timing-function: linear; + transition-timing-function: #{settings.$theme-transition-function}; // add corresponding body.light and body.dark root selectors @each $theme, $map in $themes { @@ -38,6 +37,9 @@ } } } + + // allow anything above to be overridden manually by passing in a content block + @content; } // ---------------- diff --git a/assets/sass/components/_footer.scss b/assets/sass/components/_footer.scss index f98f7e66..2243dcd1 100644 --- a/assets/sass/components/_footer.scss +++ b/assets/sass/components/_footer.scss @@ -29,7 +29,7 @@ footer { padding-bottom: 2px; border-bottom: 1px solid; - @include themes.themed($border-color: "light"); + @include themes.themed($color: "medium-dark", $border-color: "light"); } } diff --git a/assets/sass/components/_global.scss b/assets/sass/components/_global.scss index 83977e4c..b701aa6a 100644 --- a/assets/sass/components/_global.scss +++ b/assets/sass/components/_global.scss @@ -2,7 +2,7 @@ @use "../abstracts/settings"; @use "../abstracts/themes"; -@use "../abstracts/functions" as *; +@use "../abstracts/functions"; // Global Styles body { @@ -77,18 +77,18 @@ main { background-size: 0% settings.$link-underline-size; padding-bottom: settings.$link-underline-size; - @include themes.themed($color: "links"); - - // TODO: overriding transition-property from themed() -- very hacky - transition-property: color, background-size; - transition-duration: #{settings.$theme-transition-duration}, 0.25s; - transition-timing-function: linear, ease-in-out; + @include themes.themed($color: "links") { + // TODO: overriding transition-property from themed() -- very hacky + transition-property: color, background-size; + transition-duration: #{settings.$theme-transition-duration}, 0.25s; + transition-timing-function: #{settings.$theme-transition-function}, ease-in-out; + } // cool link underlines (via messy SCSS hacking): // https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/ @each $theme, $map in themes.$themes { @at-root body.#{$theme} #{&} { - background-image: underline-hack(map.get($map, "links")); + background-image: functions.underline-hack(map.get($map, "links")); } } diff --git a/assets/sass/components/_header.scss b/assets/sass/components/_header.scss index b2f35cf8..3edd6c55 100644 --- a/assets/sass/components/_header.scss +++ b/assets/sass/components/_header.scss @@ -62,22 +62,26 @@ header { a { display: inline-flex; + + // hovers are super choppy without this in some browsers will-change: transform; - @include themes.themed($color: "medium-dark"); - - // TODO: overriding transition-property from themed() -- very hacky - transition-property: color, transform; - transition-timing-function: linear, ease-in-out; + @include themes.themed($color: "medium-dark") { + // TODO: overriding transition-property from themed() -- very hacky + transition-property: color, transform; + transition-duration: #{settings.$theme-transition-duration}; + transition-timing-function: #{settings.$theme-transition-function}, ease-in-out; + } &:hover { transform: scale(1.1); - @include themes.themed($color: "links"); - - // TODO: overriding transition-property from themed() -- very hacky - transition-property: color, transform; - transition-timing-function: linear, ease-in-out; + @include themes.themed($color: "links") { + // TODO: overriding transition-property from themed() -- very hacky + transition-property: color, transform; + transition-duration: #{settings.$theme-transition-duration}; + transition-timing-function: #{settings.$theme-transition-function}, ease-in-out; + } } span { diff --git a/assets/sass/pages/_home.scss b/assets/sass/pages/_home.scss index 8ee09dae..5dd21b55 100644 --- a/assets/sass/pages/_home.scss +++ b/assets/sass/pages/_home.scss @@ -1,5 +1,5 @@ @use "../abstracts/themes"; -@use "../abstracts/functions" as *; +@use "../abstracts/functions"; // Colorful Homepage $colors-home: ( @@ -193,12 +193,12 @@ div.layout-home { } } -// Loop through $colors-home (see abstracts/_variables) +// Loop through $colors-home (see above) @each $id, $colors in $colors-home { @each $theme, $color in $colors { @at-root body.#{$theme} div.layout-home a##{$id} { color: $color; - background-image: underline-hack($color); + background-image: functions.underline-hack($color); } } }