mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-11-25 10:16:06 -05:00
completely overhaul SCSS theming logic
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
3
assets/sass/abstracts/_reset.scss
Normal file
3
assets/sass/abstracts/_reset.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
// Browser reset:
|
||||
// https://github.com/sindresorhus/modern-normalize
|
||||
@import "~modern-normalize/modern-normalize.css";
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
46
assets/sass/abstracts/_typography.scss
Normal file
46
assets/sass/abstracts/_typography.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
@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/
|
||||
*
|
||||
* Copyright (c) 2016-2020 The Inter Project Authors.
|
||||
* Licensed under the SIL Open Font License, Version 1.1:
|
||||
* https://github.com/rsms/inter/blob/master/LICENSE.txt
|
||||
*/
|
||||
|
||||
// Variable
|
||||
@include Inter.fontFaceVariable($fontName: "Inter var", $type: "full");
|
||||
|
||||
// Legacy
|
||||
@include Inter.fontFace($fontName: "Inter", $weight: 400);
|
||||
@include Inter.fontFace($fontName: "Inter", $weight: 500);
|
||||
@include Inter.fontFace($fontName: "Inter", $weight: 700);
|
||||
|
||||
/*!
|
||||
* Roboto Mono typeface - https://fonts.google.com/specimen/Roboto+Mono
|
||||
*
|
||||
* Copyright (c) 2015 The Roboto Mono Project Authors.
|
||||
* Licensed under the Apache License, Version 2.0:
|
||||
* https://github.com/google/fonts/blob/main/apache/robotomono/LICENSE.txt
|
||||
*/
|
||||
|
||||
// Variable
|
||||
@include RobotoMono.fontFaceVariable($fontName: "Roboto Mono var");
|
||||
@include RobotoMono.fontFaceVariable($fontName: "Roboto Mono var", $style: italic);
|
||||
|
||||
// Legacy
|
||||
@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 400);
|
||||
@include RobotoMono.fontFace($fontName: "Roboto Mono", $weight: 700);
|
||||
|
||||
/*!
|
||||
* Comic Neue typeface - http://comicneue.com/
|
||||
*
|
||||
* Copyright (c) 2014 The Comic Neue Project Authors.
|
||||
* Licensed under the SIL Open Font License, Version 1.1:
|
||||
* https://github.com/crozynski/comicneue/blob/master/OFL.txt
|
||||
*/
|
||||
|
||||
@include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 400);
|
||||
@include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 700);
|
||||
Reference in New Issue
Block a user