mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2026-05-18 15:04:27 -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
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 4.3 KiB After Width: | Height: | Size: 4.3 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 904 B After Width: | Height: | Size: 904 B |
|
Before Width: | Height: | Size: 299 B After Width: | Height: | Size: 299 B |
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.5 KiB |
|
Before Width: | Height: | Size: 393 B After Width: | Height: | Size: 393 B |
|
Before Width: | Height: | Size: 513 B After Width: | Height: | Size: 513 B |
|
Before Width: | Height: | Size: 611 B After Width: | Height: | Size: 611 B |
|
Before Width: | Height: | Size: 5.3 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 455 B After Width: | Height: | Size: 455 B |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 945 B After Width: | Height: | Size: 945 B |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 8.9 KiB |
|
Before Width: | Height: | Size: 128 KiB After Width: | Height: | Size: 128 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 665 B After Width: | Height: | Size: 665 B |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Vendored
+3
-3
@@ -1,4 +1,4 @@
|
||||
/*! Copyright Twitter Inc. and other contributors. Licensed under MIT *//*
|
||||
/* Copyright Twitter Inc. and other contributors. Licensed under MIT *//*
|
||||
https://github.com/twitter/twemoji/blob/gh-pages/LICENSE
|
||||
*/
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
/////////////////////////
|
||||
|
||||
// default assets url, by default will be Twitter Inc. CDN
|
||||
base: '/vendor/emoji/',
|
||||
base: '/assets/emoji/',
|
||||
|
||||
// default assets file extensions, by default '.png'
|
||||
ext: '.svg',
|
||||
@@ -265,7 +265,7 @@
|
||||
* @return string the image source to use
|
||||
*/
|
||||
function defaultImageSrcGenerator(icon, options) {
|
||||
return ''.concat(options.base, options.size, '/', icon, options.ext);
|
||||
return ''.concat(options.base, icon, options.ext);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
+18
-33
@@ -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