mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-27 20:10:31 -04:00
Jake Jarvis
b13da8e05b
* prepare dark mode stuffs * themed all global colors * store preference in local storage * toggle styling * lightbulb position * minify bundled script with uglify-js instead of hugo * detect whether user has an OS-wide dark mode preference and use that by default * two different colors for each homepage link * inline bulb SVGs into stylesheet * fingerprint and cache styles for a year * fix lightbulb positioning with weird magic numbers, will come back to that * themed syntax highlighting * use terser instead of uglify-js (b/c of ES6)
32 lines
1.1 KiB
SCSS
32 lines
1.1 KiB
SCSS
@charset "UTF-8";
|
|
|
|
// Gradient hack to get our custom underline to wrap:
|
|
// https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
|
|
@function underline-hack($color) {
|
|
// 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.
|
|
$color-opaque-alpha: rgba($color, $link-underline-opacity / 100%);
|
|
|
|
// Return non-gradient linear-gradient():
|
|
@return linear-gradient($color-opaque-alpha, $color-opaque-alpha);
|
|
}
|
|
|
|
// Web fonts (see components/_fonts.scss)
|
|
@mixin font-face($family, $src, $weight: normal, $style: normal, $display: swap) {
|
|
@font-face {
|
|
font-family: $family;
|
|
font-style: $style;
|
|
font-weight: $weight;
|
|
font-display: $display;
|
|
src: url($base-url + $src + ".woff2") format("woff2"),
|
|
url($base-url + $src + ".woff") format("woff"); // stylelint-disable-line indentation
|
|
|
|
// Allow additional declarations to be passed in:
|
|
@content;
|
|
}
|
|
}
|