mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-07-03 15:16:40 -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,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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -1,40 +1,25 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// NOTE: all variables set by Hugo's config.toml MUST go here:
|
||||
// prettier-ignore
|
||||
$max-width: "{{ printf "%d%s" .Site.Params.Theme.maxWidth "px" }}";
|
||||
$base-url: "{{ strings.TrimRight "/" .Site.BaseURL }}" + "/";
|
||||
|
||||
// those values need quotes because, even though prettier & stylelint are correct
|
||||
// in that it's insanely invalid SCSS, they refuse to ignore it. but $max-width is
|
||||
// a numerical value that can't have quotes, so let's remove them...
|
||||
$max-width: unquote($max-width);
|
||||
|
||||
// Variables & Functions
|
||||
@import "abstracts/functions";
|
||||
@import "abstracts/settings";
|
||||
@import "abstracts/themes";
|
||||
@import "abstracts/reset";
|
||||
|
||||
// Global Styles
|
||||
@import "components/typography";
|
||||
@import "components/global";
|
||||
@import "components/header";
|
||||
@import "components/footer";
|
||||
@import "components/content";
|
||||
@import "components/embeds";
|
||||
@use "components/typography";
|
||||
@use "components/reset";
|
||||
@use "components/global";
|
||||
@use "components/header";
|
||||
@use "components/footer";
|
||||
@use "components/content";
|
||||
@use "components/embeds";
|
||||
|
||||
// Pages
|
||||
@import "pages/home";
|
||||
@import "pages/list";
|
||||
@import "pages/single";
|
||||
@import "pages/videos";
|
||||
@import "pages/etc";
|
||||
@import "pages/projects";
|
||||
|
||||
// Responsive Mixins
|
||||
@import "abstracts/responsive";
|
||||
@use "pages/home";
|
||||
@use "pages/list";
|
||||
@use "pages/single";
|
||||
@use "pages/videos";
|
||||
@use "pages/etc";
|
||||
@use "pages/projects";
|
||||
|
||||
// Miscellaneous
|
||||
@import "components/syntax";
|
||||
@import "components/animation";
|
||||
@use "components/syntax";
|
||||
@use "components/animation";
|
||||
|
||||
// Responsive Mixins
|
||||
@use "abstracts/responsive";
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Video Styles
|
||||
div.layout-etc {
|
||||
padding-top: 1.5em;
|
||||
@ -17,7 +15,7 @@ div.layout-etc {
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--etc() {
|
||||
@mixin responsive() {
|
||||
div.layout-etc {
|
||||
h1 {
|
||||
font-size: 1.6em;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@charset "UTF-8";
|
||||
@use "../abstracts/functions";
|
||||
@use "../abstracts/themes";
|
||||
|
||||
// Home Styles
|
||||
div.layout-home {
|
||||
@ -52,20 +53,18 @@ div.layout-home {
|
||||
// easter egg emoji cursor
|
||||
a#birthday {
|
||||
&:hover {
|
||||
cursor: url($icon-wand) 0 0, auto;
|
||||
cursor: url(themes.$icon-wand) 0 0, auto;
|
||||
}
|
||||
}
|
||||
|
||||
// non-link colors
|
||||
span {
|
||||
&#serverless {
|
||||
color: $color-serverless;
|
||||
color: themes.$color-serverless;
|
||||
}
|
||||
|
||||
&#shh {
|
||||
@include colors() {
|
||||
color: c(medium-light);
|
||||
}
|
||||
@include themes.themed(color, "medium-light");
|
||||
}
|
||||
|
||||
&.wave {
|
||||
@ -75,17 +74,17 @@ div.layout-home {
|
||||
}
|
||||
|
||||
// Loop through $colors-home (see abstracts/_variables)
|
||||
@each $id, $colors in $colors-home {
|
||||
@each $id, $colors in themes.$colors-home {
|
||||
@each $theme, $color in $colors {
|
||||
body.#{$theme} div.layout-home a##{$id} {
|
||||
@at-root body.#{$theme} div.layout-home a##{$id} {
|
||||
color: $color;
|
||||
background-image: underline-hack($color);
|
||||
background-image: functions.underline-hack($color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--home() {
|
||||
@mixin responsive() {
|
||||
div.layout-home {
|
||||
font-size: 0.975em;
|
||||
padding-top: 1em;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
@use "../abstracts/themes";
|
||||
|
||||
// Archive/List Styles
|
||||
div.layout-list {
|
||||
@ -32,9 +32,7 @@ div.layout-list {
|
||||
width: 5.25em;
|
||||
flex-shrink: 0;
|
||||
|
||||
@include colors() {
|
||||
color: c(medium);
|
||||
}
|
||||
@include themes.themed(color, "medium");
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@ -45,7 +43,7 @@ div.layout-list {
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--list() {
|
||||
@mixin responsive() {
|
||||
div.layout-list {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 0;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
@use "../abstracts/themes";
|
||||
|
||||
// Video Styles
|
||||
div.layout-projects {
|
||||
@ -38,10 +38,8 @@ div.layout-projects {
|
||||
border-radius: 6px;
|
||||
font-size: 0.9em;
|
||||
|
||||
@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.repo-name {
|
||||
font-size: 1.2em;
|
||||
@ -57,9 +55,7 @@ div.layout-projects {
|
||||
margin-right: 12px;
|
||||
font-size: 0.925em;
|
||||
|
||||
@include colors() {
|
||||
color: c(medium);
|
||||
}
|
||||
@include themes.themed(color, "medium");
|
||||
|
||||
svg {
|
||||
display: inline-block;
|
||||
@ -84,7 +80,7 @@ div.layout-projects {
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--projects() {
|
||||
@mixin responsive() {
|
||||
div.layout-projects {
|
||||
// stylelint-disable-block block-no-empty
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
@use "../abstracts/themes";
|
||||
|
||||
// Post Styles
|
||||
div.layout-single {
|
||||
@ -11,9 +11,7 @@ div.layout-single {
|
||||
letter-spacing: 0.04em;
|
||||
margin-top: 0.3em;
|
||||
|
||||
@include colors() {
|
||||
color: c(medium);
|
||||
}
|
||||
@include themes.themed(color, "medium");
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
@ -47,9 +45,7 @@ div.layout-single {
|
||||
content: "#"; // cosmetically hashtagify tags
|
||||
padding-right: 0.125em;
|
||||
|
||||
@include colors() {
|
||||
color: c(light);
|
||||
}
|
||||
@include themes.themed(color, "light");
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
@ -75,7 +71,7 @@ div.layout-single {
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--single() {
|
||||
@mixin responsive() {
|
||||
div.layout-single {
|
||||
padding-top: 0.8em;
|
||||
padding-bottom: 0.4em;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
@use "../abstracts/themes";
|
||||
|
||||
// Video Styles
|
||||
div.layout-video {
|
||||
@ -20,9 +20,7 @@ div.layout-video {
|
||||
line-height: 1.5;
|
||||
margin: 1.25em 1em 0.5em 1em;
|
||||
|
||||
@include colors() {
|
||||
color: c(medium-light);
|
||||
}
|
||||
@include themes.themed(color, "medium-light");
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
@ -37,7 +35,7 @@ div.layout-video {
|
||||
}
|
||||
|
||||
// Responsive
|
||||
@mixin responsive--videos() {
|
||||
@mixin responsive() {
|
||||
div.layout-video {
|
||||
padding: 1em 0;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user