jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-27 16:16:21 -04:00
Code Issues

a bit more SCSS cleanup

Browse Source
This commit is contained in:
Jake Jarvis 2021-11-01 11:43:12 -04:00
parent 37add71ffb
commit 5911c0081e
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
6 changed files with 39 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
assets/sass/abstracts/_settings.scss
View File

@ -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;

8
assets/sass/abstracts/_themes.scss
View File

@ -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;
}
// ----------------

2
assets/sass/components/_footer.scss
View File

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

10
assets/sass/components/_global.scss
View File

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

16
assets/sass/components/_header.scss
View File

@ -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");
@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;
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");
@include themes.themed($color: "links") {
// TODO: overriding transition-property from themed() -- very hacky
transition-property: color, transform;
transition-timing-function: linear, ease-in-out;
transition-duration: #{settings.$theme-transition-duration};
transition-timing-function: #{settings.$theme-transition-function}, ease-in-out;
}
}
span {

6
assets/sass/pages/_home.scss
View File

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