jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-19 21:15:31 -04:00
Code Issues Activity

clean up styles & extend old browser support via autoprefixer/eslint 🧓🏻

Browse Source 
and stop encoding emojis like a caveman
This commit is contained in:
Jake Jarvis
2020-07-04 19:29:18 -04:00
parent e10c3a10f7
commit 426e7d91f1
27 changed files with 631 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
assets/sass/abstracts/_functions.scss
View File

@@ -9,6 +9,7 @@
// $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():
@@ -31,7 +32,9 @@
// Simple dark/light theme switching via <body> class and $themes map in abstracts/_themes.scss
// https://medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
@mixin themed() {
//
// 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;
@@ -50,13 +53,17 @@
}
}
// Just @include themed() and call t() when a rule depends on which theme is active, eg:
// a {
// text-decoration: none;
// @include themed() {
// color: t(links);
// 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 t($key) {
//
@function c($key) {
@return map-get($theme-map, $key);
}