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 dark mode code from module back to here for now

Browse Source
This commit is contained in:
Jake Jarvis
2021-12-01 14:43:22 -05:00
parent a3c2bbcab0
commit 6f6de426da
9 changed files with 106 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -34,7 +34,3 @@ $font-stack-mono-variable: list.join($webfont-mono-variable, $system-fonts-mono)
// Fancy link underline settings:
$link-underline-opacity: 40%;
$link-underline-size: 2px;
// Default fading style when switching between light/dark themes:
$theme-transition-duration: 0.15s;
$theme-transition-function: linear;

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

@@ -5,18 +5,7 @@
// 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"));
// Also accepts additional transitions (in shorthand) to tack on.
@mixin themed($properties, $moreTransitions: ()) {
// generate CSS transition shorthand for each themed property w/ default duration and function
$defaults: ();
@each $property, $color in $properties {
$shorthand: $property settings.$theme-transition-duration settings.$theme-transition-function;
$defaults: list.append($defaults, $shorthand);
}
// list all transitions separated by commas (with additional shorthand(s) passed in)
transition: list.join($moreTransitions, $defaults, $separator: comma);
@mixin themed($properties) {
// keep track of the original selector(s) calling this mixin for below
$selectors: #{&};

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

@@ -99,13 +99,11 @@ main {
background-repeat: no-repeat;
background-size: 0% settings.$link-underline-size;
padding-bottom: settings.$link-underline-size;
transition: background-size 0.25s ease-in-out;
@include themes.themed(
$properties: (
(
color: "links",
),
$moreTransitions: (
background-size 0.25s ease-in-out,
)
);

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

@@ -133,9 +133,6 @@ body.light {
:not(pre) > code {
background-color: #fbfbfb;
border-color: #d5d5d5;
// TODO: apply this consistently via themed() mixin like everywhere else
transition: color 0.15s linear, background-color 0.15s linear, border-color 0.15s linear;
}
div.highlight,
@@ -224,9 +221,6 @@ body.dark {
:not(pre) > code {
background-color: #252525;
border-color: #535353;
// TODO: apply this consistently via themed() mixin like everywhere else
transition: color 0.15s linear, background-color 0.15s linear, border-color 0.15s linear;
}
div.highlight,