mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-11-25 10:16:06 -05:00
shift asset processing to webpack (#424)
also migrated SASS to latest syntax (via dart-sass) and vastly simplified light/dark theme logic
This commit is contained in:
GitHub
@@ -1,4 +1,7 @@
|
||||
@charset "UTF-8";
|
||||
@use "sass:math";
|
||||
@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/
|
||||
@@ -10,16 +13,24 @@
|
||||
|
||||
// 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%);
|
||||
$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);
|
||||
}
|
||||
|
||||
// Web fonts (see components/_typography.scss)
|
||||
@mixin font-face($family, $src, $weight: normal, $style: normal, $display: swap, $variable: false) {
|
||||
@mixin font-face(
|
||||
$family,
|
||||
$src,
|
||||
$weight: normal,
|
||||
$style: normal,
|
||||
$display: swap,
|
||||
$variable: false,
|
||||
$base-path: "../fonts/"
|
||||
) {
|
||||
@font-face {
|
||||
font-family: $family;
|
||||
font-family: string.quote($family);
|
||||
font-style: $style;
|
||||
font-weight: $weight;
|
||||
font-display: $display;
|
||||
@@ -27,49 +38,13 @@
|
||||
@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");
|
||||
src: url($base-path + $src + ".woff2") format("woff2-variations"),
|
||||
url($base-path + $src + ".woff2") format("woff2");
|
||||
} @else {
|
||||
src: url($base-url + $src + ".woff2") format("woff2"), url($base-url + $src + ".woff") format("woff");
|
||||
src: url($base-path + $src + ".woff2") format("woff2"), url($base-path + $src + ".woff") format("woff");
|
||||
}
|
||||
|
||||
// Allow additional rules to be passed in:
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// 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
|
||||
//
|
||||
// Note: ONLY color rules should go in here (eg: just `border-color`, not the whole `border` rule)
|
||||
$theme-map: (); // now declaring global variables this way: https://sass-lang.com/documentation/variables#scope
|
||||
@mixin colors() {
|
||||
@each $theme, $map in $themes {
|
||||
body.#{$theme} & {
|
||||
@each $key, $submap in $map {
|
||||
$value: map-get(map-get($themes, $theme), "#{$key}");
|
||||
$theme-map: map-merge(
|
||||
$theme-map,
|
||||
(
|
||||
$key: $value,
|
||||
)
|
||||
) !global;
|
||||
}
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import "modern-normalize/modern-normalize.css";
|
||||
@@ -1,16 +1,28 @@
|
||||
@charset "UTF-8";
|
||||
@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";
|
||||
|
||||
// Responsive Awesomeness
|
||||
@media screen and (max-width: $responsive-width) {
|
||||
@include responsive--global();
|
||||
@include responsive--header();
|
||||
@include responsive--footer();
|
||||
@include responsive--content();
|
||||
@media screen and (max-width: settings.$responsive-width) {
|
||||
@include global.responsive();
|
||||
@include header.responsive();
|
||||
@include footer.responsive();
|
||||
@include content.responsive();
|
||||
|
||||
@include responsive--home();
|
||||
@include responsive--list();
|
||||
@include responsive--single();
|
||||
@include responsive--videos();
|
||||
@include responsive--etc();
|
||||
@include responsive--projects();
|
||||
@include home.responsive();
|
||||
@include list.responsive();
|
||||
@include single.responsive();
|
||||
@include videos.responsive();
|
||||
@include etc.responsive();
|
||||
@include projects.responsive();
|
||||
}
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Web fonts
|
||||
$webfont-sans: "Inter";
|
||||
$webfont-sans-variable: "Inter var";
|
||||
@@ -17,7 +15,9 @@ $font-stack-variable: $webfont-sans-variable, $system-fonts-sans;
|
||||
$font-stack-mono: $webfont-mono, $system-fonts-monospace;
|
||||
$font-stack-mono-variable: $webfont-mono-variable, $system-fonts-monospace;
|
||||
|
||||
// Width at which to switch to mobile styles
|
||||
// The maximum width of the content area:
|
||||
$max-width: 865px;
|
||||
// Width at which to switch to mobile styles:
|
||||
$responsive-width: 800px;
|
||||
|
||||
// Fancy link underline settings
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
@use "sass:map";
|
||||
|
||||
// Dark & Light Themes
|
||||
$themes: (
|
||||
@@ -161,3 +161,13 @@ $icon-bulb-on: 'data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 22 35" xmlns=
|
||||
$icon-bulb-off: 'data:image/svg+xml;charset=utf-8,<svg viewBox="0 0 22 35" xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><path d="M22 11.06c0 6.44-5 7.44-5 13.44 0 3.1-3.12 3.36-5.5 3.36-2.05 0-6.59-.78-6.59-3.36 0-6-4.91-7-4.91-13.44C0 5.03 5.29.14 11.08.14 16.88.14 22 5.03 22 11.06z" fill="#CCCBCB"/><path d="M15.17 32.5c0 .83-2.24 2.5-4.17 2.5-1.93 0-4.17-1.67-4.17-2.5 0-.83 2.24-.5 4.17-.5 1.93 0 4.17-.33 4.17.5z" fill="#CCD6DD"/><path d="M15.7 10.3a1 1 0 00-1.4 0L11 13.58l-3.3-3.3a1 1 0 10-1.4 1.42l3.7 3.7V26a1 1 0 102 0V15.41l3.7-3.7a1 1 0 000-1.42z" fill="#7D7A72"/><path d="M17 31a2 2 0 01-2 2H7a2 2 0 01-2-2v-6h12v6z" fill="#99AAB5"/><path d="M5 32a1 1 0 01-.16-1.99l12-2a1 1 0 11.33 1.97l-12 2A.93.93 0 015 32zm0-4a1 1 0 01-.16-1.99l12-2a1 1 0 11.33 1.97l-12 2A.93.93 0 015 28z" fill="#CCD6DD"/></g></svg>';
|
||||
|
||||
$icon-wand: 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 36 36"><g fill="none"><path fill="#292F33" d="M2.651 6.073l26.275 26.276c.391.391 2.888-2.107 2.497-2.497L5.148 3.576c-.39-.391-2.888 2.107-2.497 2.497z"/><path fill="#66757F" d="M29.442 31.23L3.146 4.934l.883-.883 26.296 26.296z"/><path fill="#E1E8ED" d="M33.546 33.483l-.412.412-.671.671a.967.967 0 01-.255.169.988.988 0 01-1.159-.169l-2.102-2.102.495-.495.883-.883 1.119-1.119 2.102 2.102a.999.999 0 010 1.414zM4.029 4.79l-.883.883-.495.495L.442 3.96a.988.988 0 01-.169-1.159.967.967 0 01.169-.255l.671-.671.412-.412a.999.999 0 011.414 0l2.208 2.208L4.029 4.79z"/><path fill="#F5F8FA" d="M30.325 30.497l2.809 2.809-.671.671a.967.967 0 01-.255.169l-2.767-2.767.884-.882zM3.146 5.084L.273 2.211a.967.967 0 01.169-.255l.671-.671 2.916 2.916-.883.883z"/><path fill="#FFAC33" d="M27.897 10.219l1.542.571.6 2.2a.667.667 0 001.287 0l.6-2.2 1.542-.571a.665.665 0 000-1.25l-1.534-.568-.605-2.415a.667.667 0 00-1.293 0l-.605 2.415-1.534.568a.665.665 0 000 1.25m-16.936 9.628l2.61.966.966 2.61a1.103 1.103 0 002.07 0l.966-2.61 2.609-.966a1.103 1.103 0 000-2.07l-2.609-.966-.966-2.61a1.105 1.105 0 00-2.07 0l-.966 2.61-2.61.966a1.104 1.104 0 000 2.07M23.13 4.36l1.383.512.512 1.382a.585.585 0 001.096 0l.512-1.382 1.382-.512a.584.584 0 000-1.096l-1.382-.512-.512-1.382a.585.585 0 00-1.096 0l-.512 1.382-1.383.512a.585.585 0 000 1.096"/></g></svg>';
|
||||
|
||||
// ----------------------------------------
|
||||
|
||||
@mixin themed($property, $key) {
|
||||
@each $theme, $map in $themes {
|
||||
@at-root body.#{$theme} #{&} {
|
||||
#{$property}: map-get($map, $key);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user