@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) { // [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, $link-underline-opacity / 100%); // Return non-gradient linear-gradient(): @return linear-gradient($color-opaque-alpha, $color-opaque-alpha); } // Web fonts (see components/_typography.scss) @mixin font-face($family, $src, $weight: normal, $style: normal, $display: swap, $variable: false) { @font-face { font-family: $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-url + $src + ".woff2") format("woff2-variations"), url($base-url + $src + ".woff2") format("woff2"); } @else { src: url($base-url + $src + ".woff2") format("woff2"), url($base-url + $src + ".woff") format("woff"); } // Allow additional rules to be passed in: @content; } } // Simple dark/light theme switching via class and $themes map in abstracts/_themes.scss // https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995 // // Note: ONLY color rules should go in here (eg: just `border-color`, not the whole `border` rule) @mixin colors() { @each $theme, $map in $themes { body.#{$theme} & { $theme-map: () !global; @each $key, $submap in $map { $value: map-get(map-get($themes, $theme), "#{$key}"); $theme-map: map-merge( $theme-map, ( $key: $value, ) ) !global; } @content; $theme-map: null !global; } } } // Just @include colors() and call c() when a rule depends on which theme is active. // The argument is a key in the $themes array in abstracts/_themes. // // img { // border: 1px solid; // // @include colors() { // border-color: c(medium-dark); // ONLY the color rules here. // } // } // @function c($key) { @return map-get($theme-map, $key); }