mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-07-03 18:06:38 -04: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,4 @@
|
||||
@charset "UTF-8";
|
||||
@use "../abstracts/themes";
|
||||
|
||||
/*! Magic Waving Hand Emoji™: https://jrvs.io/wave */
|
||||
.wave {
|
||||
@ -6,14 +6,14 @@
|
||||
animation: wave 5s infinite;
|
||||
animation-delay: 1s;
|
||||
transform-origin: 65% 80%;
|
||||
will-change: transform; // stylelint-disable-line plugin/no-unsupported-browser-features
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.beat {
|
||||
display: inline-block;
|
||||
animation: beat 10s infinite; // 6 bpm, call 911 if you see this please.
|
||||
animation-delay: 7.5s; // offset from wave animation
|
||||
will-change: transform; // stylelint-disable-line plugin/no-unsupported-browser-features
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
// modified from https://tobiasahlin.com/spinkit/
|
||||
@ -28,9 +28,7 @@
|
||||
display: inline-block;
|
||||
animation: loader 1.4s infinite ease-in-out both;
|
||||
|
||||
@include colors() {
|
||||
background-color: c(medium-light);
|
||||
}
|
||||
@include themes.themed(background-color, "medium-light");
|
||||
}
|
||||
|
||||
.spin-bounce1 {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
@use "../abstracts/themes";
|
||||
|
||||
div#content {
|
||||
font-size: 0.925em;
|
||||
@ -19,9 +19,7 @@ div#content {
|
||||
padding-bottom: 0.25em;
|
||||
border-bottom: 1px solid;
|
||||
|
||||
@include colors() {
|
||||
border-color: c(kinda-light);
|
||||
}
|
||||
@include themes.themed(border-color, "kinda-light");
|
||||
}
|
||||
|
||||
p.center {
|
||||
@ -43,9 +41,7 @@ div#content {
|
||||
line-height: 1.5;
|
||||
margin-top: 0.5em;
|
||||
|
||||
@include colors() {
|
||||
color: c(medium);
|
||||
}
|
||||
@include themes.themed(color, "medium");
|
||||
}
|
||||
}
|
||||
|
||||
@ -61,6 +57,6 @@ div#content {
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--content() {
|
||||
@mixin responsive() {
|
||||
// stylelint-disable-block block-no-empty
|
||||
}
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
div.embed {
|
||||
&.tweet {
|
||||
.twitter-tweet-rendered iframe {
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@charset "UTF-8";
|
||||
@use "../abstracts/settings";
|
||||
@use "../abstracts/themes";
|
||||
|
||||
// Global Footer Styles
|
||||
footer {
|
||||
@ -7,21 +8,17 @@ footer {
|
||||
padding: 1.25em 1.5em;
|
||||
border-top: 1px solid;
|
||||
|
||||
@include colors() {
|
||||
color: c(medium-dark);
|
||||
border-color: c(kinda-light);
|
||||
}
|
||||
@include themes.themed(color, "medium-dark");
|
||||
@include themes.themed(border-color, "kinda-light");
|
||||
|
||||
a {
|
||||
@include colors() {
|
||||
color: c(medium-dark);
|
||||
}
|
||||
@include themes.themed(color, "medium-dark");
|
||||
}
|
||||
|
||||
div.row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
max-width: $max-width;
|
||||
max-width: settings.$max-width;
|
||||
margin: 0 auto;
|
||||
justify-content: space-between;
|
||||
font-size: 0.85em;
|
||||
@ -33,14 +30,12 @@ footer {
|
||||
padding-bottom: 2px;
|
||||
border-bottom: 1px solid;
|
||||
|
||||
@include colors() {
|
||||
border-color: c(light);
|
||||
}
|
||||
@include themes.themed(border-color, "light");
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--footer() {
|
||||
@mixin responsive() {
|
||||
footer {
|
||||
padding: 1em 1.25em 0 1.25em;
|
||||
|
||||
|
||||
@ -1,4 +1,8 @@
|
||||
@charset "UTF-8";
|
||||
@use "sass:map";
|
||||
|
||||
@use "../abstracts/functions";
|
||||
@use "../abstracts/settings";
|
||||
@use "../abstracts/themes";
|
||||
|
||||
// Global Styles
|
||||
body {
|
||||
@ -7,27 +11,47 @@ body {
|
||||
margin: 0 auto;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
font-family: settings.$font-stack-sans;
|
||||
font-kerning: normal;
|
||||
font-variant-ligatures: normal;
|
||||
font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
|
||||
|
||||
// global base font size:
|
||||
font-size: 0.975em;
|
||||
}
|
||||
line-height: 1.5;
|
||||
|
||||
// manually setting light/dark mode backgrounds and bulb icon
|
||||
// really just the color of header & footer
|
||||
body {
|
||||
&.light {
|
||||
background-color: map-get(map-get($themes, "light"), "background-outer");
|
||||
|
||||
button.dark-mode-toggle {
|
||||
background-image: url($icon-bulb-on);
|
||||
}
|
||||
// set themed lightbulb icons manually
|
||||
&.light button.dark-mode-toggle {
|
||||
background-image: url(themes.$icon-bulb-on);
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background-color: map-get(map-get($themes, "dark"), "background-outer");
|
||||
&.dark button.dark-mode-toggle {
|
||||
background-image: url(themes.$icon-bulb-off);
|
||||
}
|
||||
}
|
||||
|
||||
button.dark-mode-toggle {
|
||||
background-image: url($icon-bulb-off);
|
||||
}
|
||||
code,
|
||||
pre,
|
||||
.monospace {
|
||||
font-family: settings.$font-stack-mono;
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
// need to set light/dark mode backgrounds outside of the body selector
|
||||
@include themes.themed(background-color, "background-outer");
|
||||
|
||||
// override above font-family if browser supports variable fonts
|
||||
// https://caniuse.com/#feat=variable-fonts
|
||||
@supports (font-variation-settings: normal) {
|
||||
body {
|
||||
font-family: settings.$font-stack-variable;
|
||||
font-optical-sizing: auto;
|
||||
}
|
||||
|
||||
code,
|
||||
pre,
|
||||
.monospace {
|
||||
font-family: settings.$font-stack-mono-variable;
|
||||
}
|
||||
}
|
||||
|
||||
@ -36,36 +60,37 @@ main {
|
||||
width: 100%;
|
||||
padding: 0 1.5em;
|
||||
|
||||
@include colors() {
|
||||
background-color: c(background-inner);
|
||||
color: c(text);
|
||||
}
|
||||
@include themes.themed(color, "text");
|
||||
@include themes.themed(background-color, "background-inner");
|
||||
}
|
||||
|
||||
// this is what's extended by different layouts (in ../pages)
|
||||
div.layout {
|
||||
max-width: $max-width;
|
||||
max-width: settings.$max-width;
|
||||
margin: 0 auto;
|
||||
display: block; // https://stackoverflow.com/questions/28794718/max-width-not-working-for-ie-11
|
||||
}
|
||||
|
||||
// cool link underlines:
|
||||
// https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
|
||||
a {
|
||||
text-decoration: none;
|
||||
background-position: 0% 100%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 0% $link-underline-size;
|
||||
padding-bottom: $link-underline-size;
|
||||
background-size: 0% settings.$link-underline-size;
|
||||
padding-bottom: settings.$link-underline-size;
|
||||
transition: background-size 0.25s ease-in-out;
|
||||
|
||||
@include colors() {
|
||||
color: c(links);
|
||||
background-image: underline-hack(c(links));
|
||||
@include themes.themed(color, "links");
|
||||
|
||||
// cool link underlines (via messy SCSS hacking):
|
||||
// https://www.dannyguo.com/blog/animated-multiline-link-underlines-with-css/
|
||||
@each $theme, $map in themes.$themes {
|
||||
@at-root body.#{$theme} #{&} {
|
||||
background-image: functions.underline-hack(map-get($map, "links"));
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-size: 100% $link-underline-size;
|
||||
background-size: 100% settings.$link-underline-size;
|
||||
}
|
||||
|
||||
&.no-underline {
|
||||
@ -79,21 +104,13 @@ strong {
|
||||
letter-spacing: 0.008em; // not sure why the discrepancy between weights
|
||||
}
|
||||
|
||||
code,
|
||||
pre,
|
||||
.monospace {
|
||||
letter-spacing: normal;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin-left: 0;
|
||||
padding-left: 1.5em;
|
||||
border-left: 3px solid;
|
||||
|
||||
@include colors() {
|
||||
color: c(medium-dark);
|
||||
border-color: c(links);
|
||||
}
|
||||
@include themes.themed(color, "medium-dark");
|
||||
@include themes.themed(border-color, "links");
|
||||
}
|
||||
|
||||
hr {
|
||||
@ -101,9 +118,7 @@ hr {
|
||||
height: 2px;
|
||||
border: 0;
|
||||
|
||||
@include colors() {
|
||||
background-color: c(light);
|
||||
}
|
||||
@include themes.themed(background-color, "light");
|
||||
}
|
||||
|
||||
// make SVG twemojis relative to surrounding text
|
||||
@ -126,7 +141,7 @@ a img.emoji {
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--global() {
|
||||
@mixin responsive() {
|
||||
body {
|
||||
// Safari iOS menu bar reappears below 44px:
|
||||
// https://www.eventbrite.com/engineering/mobile-safari-why/
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@charset "UTF-8";
|
||||
@use "../abstracts/settings";
|
||||
@use "../abstracts/themes";
|
||||
|
||||
// Global Header Styles
|
||||
header {
|
||||
@ -6,13 +7,11 @@ header {
|
||||
padding: 0.7em 1.5em;
|
||||
border-bottom: 1px solid;
|
||||
|
||||
@include colors() {
|
||||
border-color: c(kinda-light);
|
||||
}
|
||||
@include themes.themed(border-color, "kinda-light");
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
max-width: $max-width;
|
||||
max-width: settings.$max-width;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -22,9 +21,7 @@ header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@include colors() {
|
||||
color: c(medium-dark);
|
||||
}
|
||||
@include themes.themed(color, "medium-dark");
|
||||
|
||||
img#selfie {
|
||||
width: 50px;
|
||||
@ -32,9 +29,7 @@ header {
|
||||
border: 1px solid;
|
||||
border-radius: 50%;
|
||||
|
||||
@include colors() {
|
||||
border-color: c(light);
|
||||
}
|
||||
@include themes.themed(border-color, "light");
|
||||
}
|
||||
|
||||
span#name {
|
||||
@ -45,9 +40,7 @@ header {
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@include colors() {
|
||||
color: c(links);
|
||||
}
|
||||
@include themes.themed(color, "links");
|
||||
|
||||
img#selfie {
|
||||
opacity: 0.9;
|
||||
@ -70,18 +63,14 @@ header {
|
||||
a {
|
||||
display: inline-block;
|
||||
transition: transform 0.15s ease-in-out;
|
||||
will-change: transform; // stylelint-disable-line plugin/no-unsupported-browser-features
|
||||
will-change: transform;
|
||||
|
||||
@include colors() {
|
||||
color: c(medium-dark);
|
||||
}
|
||||
@include themes.themed(color, "medium-dark");
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
|
||||
@include colors() {
|
||||
color: c(links);
|
||||
}
|
||||
@include themes.themed(color, "links");
|
||||
}
|
||||
|
||||
span.icon {
|
||||
@ -128,7 +117,7 @@ header {
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--header() {
|
||||
@mixin responsive() {
|
||||
header {
|
||||
padding: 0.5em 1.25em;
|
||||
|
||||
|
||||
185
assets/sass/components/_reset.scss
Normal file
185
assets/sass/components/_reset.scss
Normal file
@ -0,0 +1,185 @@
|
||||
// stylelint-disable
|
||||
|
||||
/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
|
||||
|
||||
/*
|
||||
Document
|
||||
========
|
||||
*/
|
||||
|
||||
/**
|
||||
Use a better box model (opinionated).
|
||||
*/
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/**
|
||||
1. Correct the line height in all browsers.
|
||||
2. Use a more readable tab size (opinionated).
|
||||
3. Prevent adjustments of font size after orientation changes in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
tab-size: 4; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
Sections
|
||||
========
|
||||
*/
|
||||
|
||||
/*
|
||||
Grouping content
|
||||
================
|
||||
*/
|
||||
|
||||
/**
|
||||
1. Add the correct height in Firefox.
|
||||
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
|
||||
*/
|
||||
|
||||
hr {
|
||||
height: 0; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Text-level semantics
|
||||
====================
|
||||
*/
|
||||
|
||||
/**
|
||||
Add the correct text decoration in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
Add the correct font weight in Edge and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
Correct the odd 'em' font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/**
|
||||
Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
Tabular data
|
||||
============
|
||||
*/
|
||||
|
||||
/**
|
||||
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
|
||||
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
||||
*/
|
||||
|
||||
table {
|
||||
text-indent: 0; /* 1 */
|
||||
border-color: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Forms
|
||||
=====
|
||||
*/
|
||||
|
||||
/**
|
||||
1. Change the font styles in all browsers.
|
||||
2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
Remove the inheritance of text transform in Edge and Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
Add the correct vertical alignment in Chrome and Firefox.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/*
|
||||
Interactive
|
||||
===========
|
||||
*/
|
||||
|
||||
/*
|
||||
Add the correct display in Chrome and Safari.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
@ -1,5 +1,3 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// all code
|
||||
code {
|
||||
font-size: 0.925em;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@charset "UTF-8";
|
||||
@use "../abstracts/functions";
|
||||
@use "../abstracts/settings";
|
||||
|
||||
// Note to self: got this list after subsetting Inter with glyphhanger or pyftsubset:
|
||||
// https://github.com/filamentgroup/glyphhanger
|
||||
@ -16,30 +17,30 @@ $unicode-subset: U+0000-00FF, U+2000-206F, U+2200-22FF, U+2122;
|
||||
*/
|
||||
|
||||
// Variable
|
||||
@include font-face("Inter var", "vendor/fonts/inter-subset.var", 100 900, $variable: true) {
|
||||
@include functions.font-face("Inter var", "inter-subset.var", 100 900, $variable: true) {
|
||||
unicode-range: $unicode-subset;
|
||||
}
|
||||
@include font-face("Inter var", "vendor/fonts/inter-italic-subset.var", 100 900, italic, $variable: true) {
|
||||
@include functions.font-face("Inter var", "inter-italic-subset.var", 100 900, italic, $variable: true) {
|
||||
unicode-range: $unicode-subset;
|
||||
}
|
||||
|
||||
// Legacy
|
||||
@include font-face("Inter", "vendor/fonts/inter-regular-subset", 400) {
|
||||
@include functions.font-face("Inter", "inter-regular-subset", 400) {
|
||||
unicode-range: $unicode-subset;
|
||||
}
|
||||
@include font-face("Inter", "vendor/fonts/inter-regular-italic-subset", 400, italic) {
|
||||
@include functions.font-face("Inter", "inter-regular-italic-subset", 400, italic) {
|
||||
unicode-range: $unicode-subset;
|
||||
}
|
||||
@include font-face("Inter", "vendor/fonts/inter-medium-subset", 500) {
|
||||
@include functions.font-face("Inter", "inter-medium-subset", 500) {
|
||||
unicode-range: $unicode-subset;
|
||||
}
|
||||
@include font-face("Inter", "vendor/fonts/inter-medium-italic-subset", 500, italic) {
|
||||
@include functions.font-face("Inter", "inter-medium-italic-subset", 500, italic) {
|
||||
unicode-range: $unicode-subset;
|
||||
}
|
||||
@include font-face("Inter", "vendor/fonts/inter-bold-subset", 700) {
|
||||
@include functions.font-face("Inter", "inter-bold-subset", 700) {
|
||||
unicode-range: $unicode-subset;
|
||||
}
|
||||
@include font-face("Inter", "vendor/fonts/inter-bold-italic-subset", 700, italic) {
|
||||
@include functions.font-face("Inter", "inter-bold-italic-subset", 700, italic) {
|
||||
unicode-range: $unicode-subset;
|
||||
}
|
||||
|
||||
@ -52,40 +53,23 @@ $unicode-subset: U+0000-00FF, U+2000-206F, U+2200-22FF, U+2122;
|
||||
*/
|
||||
|
||||
// Variable
|
||||
@include font-face("Roboto Mono var", "vendor/fonts/roboto-mono-subset.var", 100 700, $variable: true);
|
||||
@include font-face("Roboto Mono var", "vendor/fonts/roboto-mono-italic-subset.var", 100 700, italic, $variable: true);
|
||||
@include functions.font-face("Roboto Mono var", "roboto-mono-subset.var", 100 700, $variable: true);
|
||||
@include functions.font-face("Roboto Mono var", "roboto-mono-italic-subset.var", 100 700, italic, $variable: true);
|
||||
|
||||
// Legacy
|
||||
@include font-face("Roboto Mono", "vendor/fonts/roboto-mono-regular-subset", 400);
|
||||
@include font-face("Roboto Mono", "vendor/fonts/roboto-mono-italic-subset", 400, italic);
|
||||
@include functions.font-face("Roboto Mono", "roboto-mono-regular-subset", 400);
|
||||
@include functions.font-face("Roboto Mono", "roboto-mono-italic-subset", 400, italic);
|
||||
|
||||
/* --------- */
|
||||
|
||||
body {
|
||||
font-family: $font-stack-sans;
|
||||
font-kerning: normal;
|
||||
font-variant-ligatures: normal;
|
||||
font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
|
||||
line-height: 1.5;
|
||||
/*!
|
||||
* Comic Neue typeface v2.5 - http://comicneue.com/
|
||||
*
|
||||
* Copyright (c) 2014 The Comic Neue Project Authors.
|
||||
* Licensed under the SIL Open Font License, Version 1.1:
|
||||
* https://github.com/crozynski/comicneue/blob/v2.5/OFL.txt
|
||||
*/
|
||||
@include functions.font-face("Comic Neue", "comic-neue-regular-subset", 400) {
|
||||
unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2200-22FF, U+2122;
|
||||
}
|
||||
|
||||
code,
|
||||
pre,
|
||||
.monospace {
|
||||
font-family: $font-stack-mono;
|
||||
}
|
||||
|
||||
// override above font-family if browser supports variable fonts
|
||||
// https://caniuse.com/#feat=variable-fonts
|
||||
@supports (font-variation-settings: normal) {
|
||||
body {
|
||||
font-family: $font-stack-variable;
|
||||
font-optical-sizing: auto;
|
||||
}
|
||||
|
||||
code,
|
||||
pre,
|
||||
.monospace {
|
||||
font-family: $font-stack-mono-variable;
|
||||
}
|
||||
@include functions.font-face("Comic Neue", "comic-neue-bold-subset", 700) {
|
||||
unicode-range: U+0000-00FF, U+2000-206F, U+20A0-20CF, U+2190-21FF, U+2200-22FF, U+2122;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user