jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-27 05:38:26 -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:list";
@use "sass:string";
@use "settings";
// Gradient hack to get our custom underline to wrap:
// https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
@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
// postcss-color-rgba-fallback to mitigate this.
// stylelint-disable-next-line color-function-notation
$color-opaque-alpha: rgba($color, math.div(settings.$link-underline-opacity, 100%));
// Return non-gradient linear-gradient():
@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:
// 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";
// Web fonts
// Web fonts:
$webfont-sans: "Inter";
$webfont-sans-variable: "Inter var";
$webfont-mono: "Roboto Mono";
$webfont-mono-variable: "Roboto Mono var";
// System fonts
// System fonts:
// https://markdotto.com/2018/02/07/github-system-fonts/
// stylelint-disable-next-line value-keyword-case
$system-fonts-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol";
$system-fonts-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica", "Arial", sans-serif;
$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-variable: list.join($webfont-sans-variable, $system-fonts-sans);
$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:
$responsive-width: 800px;
// Fancy link underline settings
// Fancy link underline settings:
$link-underline-opacity: 40%;
$link-underline-size: 2px;
$link-opacity-color: #ffffff;
// Elements to fade on dark/light theme toggle:
$theme-transition-elements: ("color", "background-color", "border-color");
$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:string";
@use "sass:list";
@use "sass:meta";
@use "settings";
@use "functions" as *;
// Takes a single CSS property and theme key (see abstracts/_themes) and sets
// both body.light and body.dark selectors.
@mixin themed($property, $key, $moreTransitions: "") {
// allow root element (body) theming
$selectors: str-split("#{&}");
// 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");
@mixin themed($colors...) {
$selectors: "#{&}";
// fade colors on theme toggle
$transitions: ();
@each $element in settings.$theme-transition-elements {
$transitions: list.append(
$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);
}
// keep track of each property we're theming
$properties: ();
@each $property, $color in meta.keywords($colors) {
$properties: list.append($properties, $property);
}
// 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 $selector in $selectors {
@at-root body.#{$theme} #{$selector} {
#{$property}: map.get($map, $key);
@at-root body.#{$theme} {
// support root body element
@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/roboto-mono/scss/mixins" as RobotoMono;
@use "@fontsource/comic-neue/scss/mixins" as ComicNeue;
@use "~@fontsource/inter/scss/mixins" as Inter;
@use "~@fontsource/roboto-mono/scss/mixins" as RobotoMono;
@use "~@fontsource/comic-neue/scss/mixins" as ComicNeue;
/*!
* Inter typeface - https://rsms.me/inter/

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

@ -36,7 +36,7 @@
}
// 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;
border-left: 3px solid;
@include themes.themed(color, "medium-dark");
@include themes.themed(border-color, "links");
@include themes.themed($color: "medium-dark", $border-color: "links");
}
h2,
@ -42,10 +41,10 @@ div#content {
content: "\0023"; // pound sign
}
@include themes.themed(color, "medium-light");
@include themes.themed($color: "medium-light");
&:hover {
@include themes.themed(color, "links");
@include themes.themed($color: "links");
}
}
@ -59,7 +58,7 @@ div#content {
padding-bottom: 0.25em;
border-bottom: 1px solid;
@include themes.themed(border-color, "kinda-light");
@include themes.themed($border-color: "kinda-light");
}
p.center {
@ -81,7 +80,7 @@ div#content {
line-height: 1.5;
margin-top: 0.5em;
@include themes.themed(color, "medium");
@include themes.themed($color: "medium");
}
}
@ -100,7 +99,7 @@ div#content {
height: 2px;
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;
border-top: 1px solid;
@include themes.themed(color, "medium-dark");
@include themes.themed(border-color, "kinda-light");
@include themes.themed($color: "medium-dark", $border-color: "kinda-light");
a {
@include themes.themed(color, "medium-dark");
@include themes.themed($color: "medium-dark");
}
div.footer-row {
@ -30,7 +29,7 @@ footer {
padding-bottom: 2px;
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;
line-height: 1.5;
@include themes.themed($background-color: "background-outer");
// set themed lightbulb icons manually
&.light button.dark-mode-toggle {
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,
pre,
.monospace {
@ -70,8 +69,7 @@ main {
width: 100%;
padding: 0 1.5em;
@include themes.themed(color, "text");
@include themes.themed(background-color, "background-inner");
@include themes.themed($color: "text", $background-color: "background-inner");
a {
background-position: 0% 100%;
@ -79,7 +77,12 @@ main {
background-size: 0% 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):
// 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;
border-bottom: 1px solid;
@include themes.themed(border-color, "kinda-light");
@include themes.themed($border-color: "kinda-light");
nav {
width: 100%;
@ -21,7 +21,7 @@ header {
display: flex;
align-items: center;
@include themes.themed(color, "medium-dark");
@include themes.themed($color: "medium-dark");
img#header-selfie {
width: 50px;
@ -30,7 +30,7 @@ header {
border-radius: 50%;
user-select: none;
@include themes.themed(border-color, "light");
@include themes.themed($border-color: "light");
}
span#header-name {
@ -41,7 +41,7 @@ header {
}
&:hover {
@include themes.themed(color, "links");
@include themes.themed($color: "links");
img#header-selfie {
opacity: 90%;
@ -64,12 +64,20 @@ header {
display: inline-flex;
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 {
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 {

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

@ -64,7 +64,7 @@ div.highlight-clipboard-enabled {
line-height: 1;
&: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";
@use "abstracts/settings";
// Global Styles
@use "vendor/reset";
@use "components/typography";
@use "abstracts/reset";
@use "abstracts/typography";
@use "components/global";
@use "components/header";
@use "components/footer";
@ -23,5 +25,20 @@
@use "components/syntax";
@use "components/animation";
// Responsive Mixins
@use "abstracts/responsive";
// Responsive Awesomeness
@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;
font-size: 0.9em;
@include themes.themed(color, "text");
@include themes.themed(background-color, "super-duper-light");
@include themes.themed(border-color, "light");
@include themes.themed($color: "text", $background-color: "super-duper-light", $border-color: "light");
}
textarea {
@ -60,13 +58,11 @@ div.layout-contact {
line-height: 1.5;
user-select: none;
@include themes.themed(color, "text");
@include themes.themed(background-color, "kinda-light");
@include themes.themed($color: "text", $background-color: "kinda-light");
&:hover,
&:focus {
@include themes.themed(color, "super-duper-light");
@include themes.themed(background-color, "links");
@include themes.themed($color: "super-duper-light", $background-color: "links");
}
img.emoji {
@ -80,11 +76,11 @@ div.layout-contact {
font-weight: 600;
&#contact-form-result-success {
@include themes.themed(color, "success");
@include themes.themed($color: "success");
}
&#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 {
@include themes.themed(color, "medium-light");
@include themes.themed($color: "medium-light");
}
&.wave {

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

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

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

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

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

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

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

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

6
yarn.lock
View File

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