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

completely overhaul SCSS theming logic

Browse Source
This commit is contained in:
Jake Jarvis 2021-11-01 10:23:24 -04:00
parent c7fdda36af
commit 37add71ffb
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
21 changed files with 112 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
assets/sass/abstracts/_functions.scss
View File

@ -1,47 +1,15 @@
@use "sass:math"; @use "sass:math";
@use "sass:list";
@use "sass:string";
@use "settings"; @use "settings";
// Gradient hack to get our custom underline to wrap: // Gradient hack to get our custom underline to wrap:
// https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/ // https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
@function underline-hack($color) { @function underline-hack($color) {
// [deprecated] Calculate lighter underline color compared to text color by mix()'ing with background (#fff) to give
// the impression of opacity but with MUCH better compatibility.
// $color-opaque-hex: mix($color, $link-opacity-color, $link-underline-opacity);
// Less compatible but better for light/dark mode switching. We fall back to non-alpha hex colors with // Less compatible but better for light/dark mode switching. We fall back to non-alpha hex colors with
// postcss-color-rgba-fallback to mitigate this. // postcss-color-rgba-fallback to mitigate this.
// stylelint-disable-next-line color-function-notation // stylelint-disable-next-line color-function-notation
$color-opaque-alpha: rgba($color, math.div(settings.$link-underline-opacity, 100%)); $color-opaque-alpha: rgba($color, math.div(settings.$link-underline-opacity, 100%));
// Return non-gradient linear-gradient(): // Return non-gradient linear-gradient():
@return linear-gradient($color-opaque-alpha, $color-opaque-alpha); @return linear-gradient($color-opaque-alpha, $color-opaque-alpha);
} }
// Returns a list of strings from a given string separated by a given separator (defaults to comma).
// https://stackoverflow.com/a/65853667/1438024
@function str-split($str, $separator: ",") {
// return immediately if this function isn't necessary
@if not string.index("#{$str}", "#{$separator}") {
@return $str;
}
$str-list: ();
@while string.index("#{$str}", "#{$separator}") != null {
@if string.index("#{$str}", "#{$separator}") > 1 {
$str-list: list.append($str-list, string.slice("#{$str}", 1, string.index("#{$str}", "#{$separator}") - 1));
}
$str: string.slice("#{$str}", string.index("#{$str}", "#{$separator}") + 1, string.length("#{$str}"));
}
@if string.slice("#{$str}", 1, string.length("#{$str}")) != "" {
$str-list: list.append($str-list, string.slice("#{$str}", 1, string.length("#{$str}")));
}
@return $str-list;
}

2
assets/sass/vendor/_reset.scss → assets/sass/abstracts/_reset.scss
View File

@ -1,3 +1,3 @@
// Browser reset: // Browser reset:
// https://github.com/sindresorhus/modern-normalize // https://github.com/sindresorhus/modern-normalize
@import "modern-normalize/modern-normalize.css"; @import "~modern-normalize/modern-normalize.css";

32
assets/sass/abstracts/_responsive.scss
View File

@ -1,32 +0,0 @@
@use "../abstracts/settings";
@use "../components/global";
@use "../components/header";
@use "../components/footer";
@use "../components/content";
@use "../pages/home";
@use "../pages/list";
@use "../pages/single";
@use "../pages/videos";
@use "../pages/etc";
@use "../pages/projects";
@use "../pages/contact";
@use "../pages/fourOhFour";
// Responsive Awesomeness
@media screen and (max-width: settings.$responsive-width) {
@include global.responsive;
@include header.responsive;
@include footer.responsive;
@include content.responsive;
@include home.responsive;
@include list.responsive;
@include single.responsive;
@include videos.responsive;
@include etc.responsive;
@include projects.responsive;
@include contact.responsive;
@include fourOhFour.responsive;
}

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

@ -1,17 +1,18 @@
@use "sass:list"; @use "sass:list";
// Web fonts // Web fonts:
$webfont-sans: "Inter"; $webfont-sans: "Inter";
$webfont-sans-variable: "Inter var"; $webfont-sans-variable: "Inter var";
$webfont-mono: "Roboto Mono"; $webfont-mono: "Roboto Mono";
$webfont-mono-variable: "Roboto Mono var"; $webfont-mono-variable: "Roboto Mono var";
// System fonts // System fonts:
// https://markdotto.com/2018/02/07/github-system-fonts/ // https://markdotto.com/2018/02/07/github-system-fonts/
// stylelint-disable-next-line value-keyword-case // stylelint-disable-next-line value-keyword-case
$system-fonts-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", $system-fonts-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica", "Arial", sans-serif;
"Segoe UI Emoji", "Segoe UI Symbol";
$system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace; $system-fonts-monospace: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
// Prefer web fonts with system fonts as backup:
$font-stack-sans: list.join($webfont-sans, $system-fonts-sans); $font-stack-sans: list.join($webfont-sans, $system-fonts-sans);
$font-stack-variable: list.join($webfont-sans-variable, $system-fonts-sans); $font-stack-variable: list.join($webfont-sans-variable, $system-fonts-sans);
$font-stack-mono: list.join($webfont-mono, $system-fonts-monospace); $font-stack-mono: list.join($webfont-mono, $system-fonts-monospace);
@ -23,12 +24,10 @@ $max-width: 865px;
// Width at which to switch to mobile styles: // Width at which to switch to mobile styles:
$responsive-width: 800px; $responsive-width: 800px;
// Fancy link underline settings // Fancy link underline settings:
$link-underline-opacity: 40%; $link-underline-opacity: 40%;
$link-underline-size: 2px; $link-underline-size: 2px;
$link-opacity-color: #ffffff; $link-opacity-color: #ffffff;
// Elements to fade on dark/light theme toggle: // Elements to fade on dark/light theme toggle:
$theme-transition-elements: ("color", "background-color", "border-color");
$theme-transition-duration: 0.15s; $theme-transition-duration: 0.15s;
$theme-transition-function: linear;

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

@ -1,43 +1,40 @@
@use "sass:map"; @use "sass:map";
@use "sass:string";
@use "sass:list"; @use "sass:list";
@use "sass:meta";
@use "settings"; @use "settings";
@use "functions" as *; @use "functions" as *;
// Takes a single CSS property and theme key (see abstracts/_themes) and sets // Takes a map of CSS properties and theme keys (see below) and set both body.light and body.dark selectors.
// both body.light and body.dark selectors. // ex. @include themes.themed($color: "text", $background-color: "background-inner");
@mixin themed($property, $key, $moreTransitions: "") { @mixin themed($colors...) {
// allow root element (body) theming $selectors: "#{&}";
$selectors: str-split("#{&}");
// fade colors on theme toggle // keep track of each property we're theming
$transitions: (); $properties: ();
@each $element in settings.$theme-transition-elements { @each $property, $color in meta.keywords($colors) {
$transitions: list.append( $properties: list.append($properties, $property);
$transitions,
string.unquote("#{$element} #{settings.$theme-transition-duration} #{settings.$theme-transition-function}")
);
}
@if $moreTransitions != "" {
// HACK: $moreTransitions is passed in and appended here because joining multiple transitions is hard :(
$transitions: list.append($transitions, string.unquote($moreTransitions));
}
@each $selector in $selectors {
@if $selector == "" {
// support root body element
$selector: "body";
}
@at-root #{$selector} {
transition: list.join($transitions, (), $separator: comma);
}
} }
// set the actual light/dark properties // 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;
// add corresponding body.light and body.dark root selectors
@each $theme, $map in $themes { @each $theme, $map in $themes {
@each $selector in $selectors { @at-root body.#{$theme} {
@at-root body.#{$theme} #{$selector} { // support root body element
#{$property}: map.get($map, $key); @if $selectors == "body" {
@each $property, $color in meta.keywords($colors) {
#{$property}: map.get($map, $color);
}
} @else {
#{$selectors} {
@each $property, $color in meta.keywords($colors) {
#{$property}: map.get($map, $color);
}
}
} }
} }
} }

6
assets/sass/components/_typography.scss → assets/sass/abstracts/_typography.scss
View File

@ -1,6 +1,6 @@
@use "@fontsource/inter/scss/mixins" as Inter; @use "~@fontsource/inter/scss/mixins" as Inter;
@use "@fontsource/roboto-mono/scss/mixins" as RobotoMono; @use "~@fontsource/roboto-mono/scss/mixins" as RobotoMono;
@use "@fontsource/comic-neue/scss/mixins" as ComicNeue; @use "~@fontsource/comic-neue/scss/mixins" as ComicNeue;
/*! /*!
* Inter typeface - https://rsms.me/inter/ * Inter typeface - https://rsms.me/inter/

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

@ -36,7 +36,7 @@
} }
// stylelint-enable rule-empty-line-before // stylelint-enable rule-empty-line-before
@include themes.themed(background-color, "medium-light"); @include themes.themed($background-color: "medium-light");
} }
} }

13
assets/sass/components/_content.scss
View File

@ -16,8 +16,7 @@ div#content {
padding-left: 1.5em; padding-left: 1.5em;
border-left: 3px solid; border-left: 3px solid;
@include themes.themed(color, "medium-dark"); @include themes.themed($color: "medium-dark", $border-color: "links");
@include themes.themed(border-color, "links");
} }
h2, h2,
@ -42,10 +41,10 @@ div#content {
content: "\0023"; // pound sign content: "\0023"; // pound sign
} }
@include themes.themed(color, "medium-light"); @include themes.themed($color: "medium-light");
&:hover { &:hover {
@include themes.themed(color, "links"); @include themes.themed($color: "links");
} }
} }
@ -59,7 +58,7 @@ div#content {
padding-bottom: 0.25em; padding-bottom: 0.25em;
border-bottom: 1px solid; border-bottom: 1px solid;
@include themes.themed(border-color, "kinda-light"); @include themes.themed($border-color: "kinda-light");
} }
p.center { p.center {
@ -81,7 +80,7 @@ div#content {
line-height: 1.5; line-height: 1.5;
margin-top: 0.5em; margin-top: 0.5em;
@include themes.themed(color, "medium"); @include themes.themed($color: "medium");
} }
} }
@ -100,7 +99,7 @@ div#content {
height: 2px; height: 2px;
border: 0; border: 0;
@include themes.themed(background-color, "light"); @include themes.themed($background-color: "light");
} }
} }

5
assets/sass/components/_embeds.scss
View File

@ -50,3 +50,8 @@ div.embed {
} }
} }
} }
// Responsive
// stylelint-disable-next-line block-no-empty
@mixin responsive() {
}

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

@ -8,11 +8,10 @@ footer {
padding: 1.25em 1.5em; padding: 1.25em 1.5em;
border-top: 1px solid; border-top: 1px solid;
@include themes.themed(color, "medium-dark"); @include themes.themed($color: "medium-dark", $border-color: "kinda-light");
@include themes.themed(border-color, "kinda-light");
a { a {
@include themes.themed(color, "medium-dark"); @include themes.themed($color: "medium-dark");
} }
div.footer-row { div.footer-row {
@ -30,7 +29,7 @@ footer {
padding-bottom: 2px; padding-bottom: 2px;
border-bottom: 1px solid; border-bottom: 1px solid;
@include themes.themed(border-color, "light"); @include themes.themed($border-color: "light");
} }
} }

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

@ -19,6 +19,8 @@ body {
font-size: 0.975em; font-size: 0.975em;
line-height: 1.5; line-height: 1.5;
@include themes.themed($background-color: "background-outer");
// set themed lightbulb icons manually // set themed lightbulb icons manually
&.light button.dark-mode-toggle { &.light button.dark-mode-toggle {
background-image: url(themes.$icon-bulb-on); background-image: url(themes.$icon-bulb-on);
@ -29,9 +31,6 @@ body {
} }
} }
// need to set light/dark mode backgrounds outside of the body selector
@include themes.themed(background-color, "background-outer");
code, code,
pre, pre,
.monospace { .monospace {
@ -70,8 +69,7 @@ main {
width: 100%; width: 100%;
padding: 0 1.5em; padding: 0 1.5em;
@include themes.themed(color, "text"); @include themes.themed($color: "text", $background-color: "background-inner");
@include themes.themed(background-color, "background-inner");
a { a {
background-position: 0% 100%; background-position: 0% 100%;
@ -79,7 +77,12 @@ main {
background-size: 0% settings.$link-underline-size; background-size: 0% settings.$link-underline-size;
padding-bottom: settings.$link-underline-size; padding-bottom: settings.$link-underline-size;
@include themes.themed(color, "links", ("background-size 0.25s 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: linear, ease-in-out;
// cool link underlines (via messy SCSS hacking): // cool link underlines (via messy SCSS hacking):
// https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/ // https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/

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

@ -7,7 +7,7 @@ header {
padding: 0.7em 1.5em; padding: 0.7em 1.5em;
border-bottom: 1px solid; border-bottom: 1px solid;
@include themes.themed(border-color, "kinda-light"); @include themes.themed($border-color: "kinda-light");
nav { nav {
width: 100%; width: 100%;
@ -21,7 +21,7 @@ header {
display: flex; display: flex;
align-items: center; align-items: center;
@include themes.themed(color, "medium-dark"); @include themes.themed($color: "medium-dark");
img#header-selfie { img#header-selfie {
width: 50px; width: 50px;
@ -30,7 +30,7 @@ header {
border-radius: 50%; border-radius: 50%;
user-select: none; user-select: none;
@include themes.themed(border-color, "light"); @include themes.themed($border-color: "light");
} }
span#header-name { span#header-name {
@ -41,7 +41,7 @@ header {
} }
&:hover { &:hover {
@include themes.themed(color, "links"); @include themes.themed($color: "links");
img#header-selfie { img#header-selfie {
opacity: 90%; opacity: 90%;
@ -64,12 +64,20 @@ header {
display: inline-flex; display: inline-flex;
will-change: transform; will-change: transform;
@include themes.themed(color, "medium-dark", ("transform 0.15s ease-in-out")); @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;
&:hover { &:hover {
transform: scale(1.1); transform: scale(1.1);
@include themes.themed(color, "links", ("transform 0.15s ease-in-out")); @include themes.themed($color: "links");
// TODO: overriding transition-property from themed() -- very hacky
transition-property: color, transform;
transition-timing-function: linear, ease-in-out;
} }
span { span {

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

@ -64,7 +64,7 @@ div.highlight-clipboard-enabled {
line-height: 1; line-height: 1;
&:hover { &:hover {
@include themes.themed(color, "links"); @include themes.themed($color: "links");
} }
} }
} }

25
assets/sass/main.scss
View File

@ -1,8 +1,10 @@
@charset "UTF-8"; @charset "UTF-8";
@use "abstracts/settings";
// Global Styles // Global Styles
@use "vendor/reset"; @use "abstracts/reset";
@use "components/typography"; @use "abstracts/typography";
@use "components/global"; @use "components/global";
@use "components/header"; @use "components/header";
@use "components/footer"; @use "components/footer";
@ -23,5 +25,20 @@
@use "components/syntax"; @use "components/syntax";
@use "components/animation"; @use "components/animation";
// Responsive Mixins // Responsive Awesomeness
@use "abstracts/responsive"; @media screen and (max-width: settings.$responsive-width) {
@include global.responsive;
@include header.responsive;
@include footer.responsive;
@include content.responsive;
@include embeds.responsive;
@include home.responsive;
@include list.responsive;
@include single.responsive;
@include videos.responsive;
@include etc.responsive;
@include projects.responsive;
@include contact.responsive;
@include fourOhFour.responsive;
}

14
assets/sass/pages/_contact.scss
View File

@ -34,9 +34,7 @@ div.layout-contact {
border-radius: 0.3em; border-radius: 0.3em;
font-size: 0.9em; font-size: 0.9em;
@include themes.themed(color, "text"); @include themes.themed($color: "text", $background-color: "super-duper-light", $border-color: "light");
@include themes.themed(background-color, "super-duper-light");
@include themes.themed(border-color, "light");
} }
textarea { textarea {
@ -60,13 +58,11 @@ div.layout-contact {
line-height: 1.5; line-height: 1.5;
user-select: none; user-select: none;
@include themes.themed(color, "text"); @include themes.themed($color: "text", $background-color: "kinda-light");
@include themes.themed(background-color, "kinda-light");
&:hover, &:hover,
&:focus { &:focus {
@include themes.themed(color, "super-duper-light"); @include themes.themed($color: "super-duper-light", $background-color: "links");
@include themes.themed(background-color, "links");
} }
img.emoji { img.emoji {
@ -80,11 +76,11 @@ div.layout-contact {
font-weight: 600; font-weight: 600;
&#contact-form-result-success { &#contact-form-result-success {
@include themes.themed(color, "success"); @include themes.themed($color: "success");
} }
&#contact-form-result-error { &#contact-form-result-error {
@include themes.themed(color, "error"); @include themes.themed($color: "error");
} }
} }
} }

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

@ -184,7 +184,7 @@ div.layout-home {
} }
&#shh { &#shh {
@include themes.themed(color, "medium-light"); @include themes.themed($color: "medium-light");
} }
&.wave { &.wave {

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

@ -32,7 +32,7 @@ div.layout-list {
width: 5.25em; width: 5.25em;
flex-shrink: 0; flex-shrink: 0;
@include themes.themed(color, "medium"); @include themes.themed($color: "medium");
} }
&:last-child { &:last-child {

5
assets/sass/pages/_projects.scss
View File

@ -42,8 +42,7 @@ div.layout-projects {
border-radius: 0.5em; border-radius: 0.5em;
font-size: 0.9em; font-size: 0.9em;
@include themes.themed(color, "medium-dark"); @include themes.themed($color: "medium-dark", $border-color: "kinda-light");
@include themes.themed(border-color, "kinda-light");
a.repo-name { a.repo-name {
font-size: 1.2em; font-size: 1.2em;
@ -64,7 +63,7 @@ div.layout-projects {
margin-right: 1.5em; margin-right: 1.5em;
font-size: 0.925em; font-size: 0.925em;
@include themes.themed(color, "medium"); @include themes.themed($color: "medium");
svg { svg {
display: inline-block; display: inline-block;

4
assets/sass/pages/_single.scss
View File

@ -13,7 +13,7 @@ div.layout-single {
line-height: 2.3; line-height: 2.3;
letter-spacing: 0.04em; letter-spacing: 0.04em;
@include themes.themed(color, "medium"); @include themes.themed($color: "medium");
a { a {
color: inherit; color: inherit;
@ -65,7 +65,7 @@ div.layout-single {
content: "#"; // cosmetically hashtagify tags content: "#"; // cosmetically hashtagify tags
padding-right: 0.125em; padding-right: 0.125em;
@include themes.themed(color, "light"); @include themes.themed($color: "light");
} }
&:last-of-type { &:last-of-type {

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

@ -11,7 +11,7 @@ div.layout-video {
line-height: 1.5; line-height: 1.5;
margin: 1.25em 1em 0.5em 1em; margin: 1.25em 1em 0.5em 1em;
@include themes.themed(color, "medium-light"); @include themes.themed($color: "medium-light");
a { a {
font-weight: bold; font-weight: bold;

6
yarn.lock
View File

@ -5932,9 +5932,9 @@ keyv@3.0.0:
json-buffer "3.0.0" json-buffer "3.0.0"
keyv@^4.0.0: keyv@^4.0.0:
version "4.0.3" version "4.0.4"
resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.0.3.tgz#4f3aa98de254803cafcd2896734108daa35e4254" resolved "https://registry.yarnpkg.com/keyv/-/keyv-4.0.4.tgz#f040b236ea2b06ed15ed86fbef8407e1a1c8e376"
integrity sha512-zdGa2TOpSZPq5mU6iowDARnMBZgtCqJ11dJROFi6tg6kTn4nuUdU09lFyLFSaHrWqpIJ+EBq4E8/Dc0Vx5vLdA== integrity sha512-vqNHbAc8BBsxk+7QBYLW0Y219rWcClspR6WSeoHYKG5mnsSoOH+BL1pWq02DDCVdvvuUny5rkBlzMRzoqc+GIg==
dependencies: dependencies:
json-buffer "3.0.1" json-buffer "3.0.1"