mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-04-27 20:10:31 -04:00
75 lines
2.4 KiB
SCSS
75 lines
2.4 KiB
SCSS
@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.
|
|
$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);
|
|
}
|
|
|
|
// https://stackoverflow.com/a/65853667/1438024
|
|
@function str-split($str, $substr: ",") {
|
|
// return immediately if this function isn't necessary
|
|
@if (string.index("#{$str}", "#{$substr}") == null) {
|
|
@return $str;
|
|
}
|
|
|
|
$list: ();
|
|
|
|
@while string.index("#{$str}", "#{$substr}") != null {
|
|
@if (string.index("#{$str}", "#{$substr}") > 1) {
|
|
$list: list.append($list, string.slice("#{$str}", 1, string.index("#{$str}", "#{$substr}") - 1));
|
|
}
|
|
$str: string.slice("#{$str}", string.index("#{$str}", "#{$substr}") + 1, string.length("#{$str}"));
|
|
}
|
|
|
|
@if (string.slice("#{$str}", 1, string.length("#{$str}")) != "") {
|
|
$list: list.append($list, string.slice("#{$str}", 1, string.length("#{$str}")));
|
|
}
|
|
|
|
@return $list;
|
|
}
|
|
|
|
// Web fonts (see components/_typography.scss)
|
|
@mixin font-face(
|
|
$family,
|
|
$src,
|
|
$weight: normal,
|
|
$style: normal,
|
|
$display: swap,
|
|
$variable: false,
|
|
$base-path: "../fonts/"
|
|
) {
|
|
@font-face {
|
|
font-family: string.quote($family);
|
|
font-style: $style;
|
|
font-weight: $weight;
|
|
font-display: $display;
|
|
|
|
@if $variable {
|
|
// all browsers that support variable fonts also support woff2, so a woff file is unncessary
|
|
// draft spec for formats: https://www.w3.org/TR/css-fonts-4/#src-desc
|
|
src: url($base-path + $src + ".woff2") format("woff2-variations"),
|
|
url($base-path + $src + ".woff2") format("woff2");
|
|
} @else {
|
|
src: url($base-path + $src + ".woff2") format("woff2"), url($base-path + $src + ".woff") format("woff");
|
|
}
|
|
|
|
// Allow additional rules to be passed in:
|
|
@content;
|
|
}
|
|
}
|