jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-18 13:05:32 -04:00
Code Issues Activity

move light/dark class from <body> to <html> and inline restoration script to (hopefully) improve the white flashes

Browse Source
This commit is contained in:
Jake Jarvis
2021-12-15 13:49:56 -05:00
parent c2789e24d4
commit 766362a9da
14 changed files with 61 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,25 +1,18 @@
@use "sass:map";
// Takes a map of CSS properties and theme keys (see below) and set both body.light and body.dark selectors.
// Takes a map of CSS properties and theme keys (see below) and set both html.light and html.dark selectors.
// ex. @include themes.themed((color: "text", background-color: "background-inner"));
@mixin themed($properties) {
// keep track of the original selector(s) calling this mixin for below
$selectors: #{&};
// add corresponding body.light and body.dark root selectors
// add corresponding html.light and html.dark root selectors
@each $theme, $map in $themes {
@at-root body.#{$theme} {
// support theming root body element
@if $selectors == "body" {
@at-root html.#{$theme} {
#{$selectors} {
@each $property, $color in $properties {
#{$property}: map.get($map, $color);
}
} @else {
#{$selectors} {
@each $property, $color in $properties {
#{$property}: map.get($map, $color);
}
}
}
}
}

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

@@ -100,7 +100,7 @@ main {
// cool link underlines via messy SCSS hacking (see ../abstracts/_functions)
@each $theme, $map in themes.$themes {
@at-root body.#{$theme} #{&} {
@at-root html.#{$theme} #{&} {
background-image: functions.underline-hack(map.get($map, "links"), map.get($map, "background-inner"));
}
}

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

@@ -110,23 +110,25 @@ header {
}
// Dark mode toggle
&.theme-toggle button {
border: 0;
padding: 0;
background: none;
margin: 0.3em -0.3em 0 1.4em;
cursor: pointer;
&.theme-toggle {
margin-left: 1.4em;
svg {
width: 1.56em; // 24.33px, don't ask
height: 1.56em;
button {
border: 0;
padding: 0;
background: none;
margin: 0.3em -0.3em 0 0;
cursor: pointer;
svg {
width: 1.56em; // 24.33px, don't ask
height: 1.56em;
}
}
}
// no margin on the first child to make more room on narrow windows (before responsiveness kicks in).
// last child is the dark mode toggle -- margin is set directly on it in case it's hidden (if JS is disabled).
&:first-child,
&:last-child {
// no margin on the first child to make more room on narrow windows (before responsiveness kicks in)
&:first-child {
margin-left: 0;
}
}

4
assets/sass/components/_syntax.scss
View File

@@ -129,7 +129,7 @@ div.highlight {
}
// Syntax Highlighting (light) - modified from Monokai Light: https://github.com/mlgill/pygments-style-monokailight
body.light {
html.light {
div.highlight,
button.copy-button,
:not(pre) > code {
@@ -215,7 +215,7 @@ body.light {
}
// Syntax Highlighting (dark) - modified from Dracula: https://github.com/dracula/pygments
body.dark {
html.dark {
div.highlight,
button.copy-button,
:not(pre) > code {

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

@@ -200,7 +200,7 @@ div.layout-home {
// 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} {
@at-root html.#{$theme} div.layout-home a##{$id} {
color: $color;
background-image: functions.underline-hack($color, map.get(map.get(themes.$themes, $theme), "background-inner"));
}