Browse Source

shift asset processing to webpack (#424)

also migrated SASS to latest syntax (via dart-sass) and vastly simplified light/dark theme logic
pull/434/head
Jake Jarvis 6 months ago
committed by GitHub
parent
commit
363b4edf1c
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      .eslintrc.json
  2. 4
      .github/workflows/ci.yml
  3. 1
      .github/workflows/post-deploy.yml
  4. 4
      .gitignore
  5. 1
      .lighthouserc.json
  6. 3
      .prettierignore
  7. 1
      .stylelintrc
  8. 7
      Dockerfile
  9. 0
      assets/fonts/comic-neue-bold-subset.woff
  10. 0
      assets/fonts/comic-neue-bold-subset.woff2
  11. 0
      assets/fonts/comic-neue-regular-subset.woff
  12. 0
      assets/fonts/comic-neue-regular-subset.woff2
  13. 0
      assets/fonts/inter-bold-italic-subset.woff
  14. 0
      assets/fonts/inter-bold-italic-subset.woff2
  15. 0
      assets/fonts/inter-bold-subset.woff
  16. 0
      assets/fonts/inter-bold-subset.woff2
  17. 0
      assets/fonts/inter-italic-subset.var.woff2
  18. 0
      assets/fonts/inter-medium-italic-subset.woff
  19. 0
      assets/fonts/inter-medium-italic-subset.woff2
  20. 0
      assets/fonts/inter-medium-subset.woff
  21. 0
      assets/fonts/inter-medium-subset.woff2
  22. 0
      assets/fonts/inter-regular-italic-subset.woff
  23. 0
      assets/fonts/inter-regular-italic-subset.woff2
  24. 0
      assets/fonts/inter-regular-subset.woff
  25. 0
      assets/fonts/inter-regular-subset.woff2
  26. 0
      assets/fonts/inter-subset.var.woff2
  27. 0
      assets/fonts/roboto-mono-italic-subset.var.woff2
  28. 0
      assets/fonts/roboto-mono-italic-subset.woff
  29. 0
      assets/fonts/roboto-mono-italic-subset.woff2
  30. 0
      assets/fonts/roboto-mono-regular-subset.woff
  31. 0
      assets/fonts/roboto-mono-regular-subset.woff2
  32. 0
      assets/fonts/roboto-mono-subset.var.woff2
  33. 0
      assets/images/android-chrome-192x192.png
  34. 0
      assets/images/android-chrome-512x512.png
  35. 0
      assets/images/apple-touch-icon.png
  36. 0
      assets/images/favicon-128.png
  37. 0
      assets/images/favicon-16.png
  38. 0
      assets/images/favicon-192.png
  39. 0
      assets/images/favicon-32.png
  40. 0
      assets/images/favicon-48.png
  41. 0
      assets/images/favicon-64.png
  42. 0
      assets/images/favicon.ico
  43. 0
      assets/images/favicon.svg
  44. 0
      assets/images/logo.png
  45. 0
      assets/images/logo.svg
  46. 0
      assets/images/maskable-192x192.png
  47. 0
      assets/images/maskable-512x512.png
  48. 0
      assets/images/me.jpg
  49. 0
      assets/images/mstile-150x150.png
  50. 0
      assets/images/mstile-310x310.png
  51. 0
      assets/images/safari-pinned-tab.svg
  52. BIN
      assets/images/tiny-selfie.jpg
  53. 6
      assets/js/vendor/twemoji.js
  54. 61
      assets/sass/abstracts/_functions.scss
  55. 3
      assets/sass/abstracts/_reset.scss
  56. 36
      assets/sass/abstracts/_responsive.scss
  57. 6
      assets/sass/abstracts/_settings.scss
  58. 12
      assets/sass/abstracts/_themes.scss
  59. 10
      assets/sass/components/_animation.scss
  60. 12
      assets/sass/components/_content.scss
  61. 2
      assets/sass/components/_embeds.scss
  62. 21
      assets/sass/components/_footer.scss
  63. 99
      assets/sass/components/_global.scss
  64. 33
      assets/sass/components/_header.scss
  65. 185
      assets/sass/components/_reset.scss
  66. 2
      assets/sass/components/_syntax.scss
  67. 66
      assets/sass/components/_typography.scss
  68. 51
      assets/sass/main.scss
  69. 4
      assets/sass/pages/_etc.scss
  70. 19
      assets/sass/pages/_home.scss
  71. 8
      assets/sass/pages/_list.scss
  72. 14
      assets/sass/pages/_projects.scss
  73. 12
      assets/sass/pages/_single.scss
  74. 8
      assets/sass/pages/_videos.scss
  75. 10
      babel.config.json
  76. 19
      config.toml
  77. 22
      content/previously/index.md
  78. 92
      gulpfile.js
  79. 2
      layouts/_default/baseof.html
  80. 14
      layouts/index.atom
  81. 28
      layouts/index.webmanifest
  82. 67
      layouts/partials/functions/init.html
  83. 3
      layouts/partials/head/_head.html
  84. 8
      layouts/partials/head/canonical.html
  85. 17
      layouts/partials/head/favicons.html
  86. 6
      layouts/partials/head/open-graph.html
  87. 5
      layouts/partials/head/preload.html
  88. 12
      layouts/partials/head/schema/article.html
  89. 8
      layouts/partials/head/schema/person.html
  90. 12
      layouts/partials/head/styles.html
  91. 4
      layouts/partials/head/webmention.html
  92. 6
      layouts/partials/page/header.html
  93. 13
      layouts/partials/scripts/_bundle.html
  94. 2
      layouts/robots.txt
  95. 12
      layouts/rss.xml
  96. 2
      layouts/shortcodes/image.rss.xml
  97. 2
      layouts/shortcodes/video.rss.xml
  98. 2
      layouts/sitemap.xml
  99. 58
      package.json
  100. 2
      postcss.config.js

2
.eslintrc.json

@ -46,5 +46,5 @@
"es6": true
}
}],
"ignorePatterns": ["public/**", "postcss.config.js"]
"ignorePatterns": ["public/**", "postcss.config.js", "gulpfile.js", "webpack.config.js"]
}

4
.github/workflows/ci.yml

@ -34,8 +34,8 @@ jobs:
node-version: 14.x
- name: Install dependencies
run: yarn install --frozen-lockfile
- name: Build preview
run: yarn build:hugo --environment=development --baseURL=/ --buildDrafts --buildFuture
- name: Build site
run: yarn build
- name: Percy snapshots
uses: percy/snapshot-action@v0.1.2
env:

1
.github/workflows/post-deploy.yml

@ -16,6 +16,7 @@ jobs:
with:
fetch-depth: 0
- uses: getsentry/action-release@v1
if: github.event.deployment_status.environment == 'production'
env:
SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
SENTRY_ORG: jakejarvis

4
.gitignore

@ -4,6 +4,10 @@ builds/
_vendor/
hugo_stats.json
# webpack artifacts
data/manifest.json
static/assets/
# node/npm/yarn
node_modules/
package-lock.json

1
.lighthouserc.json

@ -20,6 +20,7 @@
"unused-javascript": "warn",
"uses-optimized-images": "warn",
"uses-rel-preconnect": "warn",
"canonical": "off",
"is-crawlable": "off",
"modern-image-formats": "off",
"offscreen-images": "off",

3
.prettierignore

@ -3,6 +3,7 @@ assets/**/vendor/
layouts/
static/
hugo_stats.json
data/manifest.json
# output from Hugo
public/
@ -13,6 +14,8 @@ _vendor/
# dotfiles/config
.*
postcss.config.js
webpack.config.js
gulpfile.js
babel.config.json
tsconfig.json

1
.stylelintrc

@ -10,6 +10,7 @@
"rules": {
"color-hex-length": "long",
"max-nesting-depth": 6,
"order/order": null,
"order/properties-alphabetical-order": null,
"plugin/no-unsupported-browser-features": [true, {
"severity": "warning",

7
Dockerfile

@ -2,7 +2,12 @@
# https://github.com/jakejarvis/hugo-docker/blob/master/Dockerfile
FROM ghcr.io/jakejarvis/hugo-extended:0.83.1
ADD package.json .
ADD yarn.lock .
RUN yarn install
# expose live-refresh server (on custom port)
EXPOSE 1337
CMD ["server", "--disableFastRender", "--buildDrafts", "--buildFuture", "--port=1337", "--baseURL=/", "--appendPort=false", "--bind=0.0.0.0", "--verbose"]
ENTRYPOINT ["yarn"]
CMD ["start"]

0
static/vendor/fonts/comic-neue-bold-subset.woff → assets/fonts/comic-neue-bold-subset.woff

0
static/vendor/fonts/comic-neue-bold-subset.woff2 → assets/fonts/comic-neue-bold-subset.woff2

0
static/vendor/fonts/comic-neue-regular-subset.woff → assets/fonts/comic-neue-regular-subset.woff

0
static/vendor/fonts/comic-neue-regular-subset.woff2 → assets/fonts/comic-neue-regular-subset.woff2

0
static/vendor/fonts/inter-bold-italic-subset.woff → assets/fonts/inter-bold-italic-subset.woff

0
static/vendor/fonts/inter-bold-italic-subset.woff2 → assets/fonts/inter-bold-italic-subset.woff2

0
static/vendor/fonts/inter-bold-subset.woff → assets/fonts/inter-bold-subset.woff

0
static/vendor/fonts/inter-bold-subset.woff2 → assets/fonts/inter-bold-subset.woff2

0
static/vendor/fonts/inter-italic-subset.var.woff2 → assets/fonts/inter-italic-subset.var.woff2

0
static/vendor/fonts/inter-medium-italic-subset.woff → assets/fonts/inter-medium-italic-subset.woff

0
static/vendor/fonts/inter-medium-italic-subset.woff2 → assets/fonts/inter-medium-italic-subset.woff2

0
static/vendor/fonts/inter-medium-subset.woff → assets/fonts/inter-medium-subset.woff

0
static/vendor/fonts/inter-medium-subset.woff2 → assets/fonts/inter-medium-subset.woff2

0
static/vendor/fonts/inter-regular-italic-subset.woff → assets/fonts/inter-regular-italic-subset.woff

0
static/vendor/fonts/inter-regular-italic-subset.woff2 → assets/fonts/inter-regular-italic-subset.woff2

0
static/vendor/fonts/inter-regular-subset.woff → assets/fonts/inter-regular-subset.woff

0
static/vendor/fonts/inter-regular-subset.woff2 → assets/fonts/inter-regular-subset.woff2

0
static/vendor/fonts/inter-subset.var.woff2 → assets/fonts/inter-subset.var.woff2

0
static/vendor/fonts/roboto-mono-italic-subset.var.woff2 → assets/fonts/roboto-mono-italic-subset.var.woff2

0
static/vendor/fonts/roboto-mono-italic-subset.woff → assets/fonts/roboto-mono-italic-subset.woff

0
static/vendor/fonts/roboto-mono-italic-subset.woff2 → assets/fonts/roboto-mono-italic-subset.woff2

0
static/vendor/fonts/roboto-mono-regular-subset.woff → assets/fonts/roboto-mono-regular-subset.woff

0
static/vendor/fonts/roboto-mono-regular-subset.woff2 → assets/fonts/roboto-mono-regular-subset.woff2

0
static/vendor/fonts/roboto-mono-subset.var.woff2 → assets/fonts/roboto-mono-subset.var.woff2

0
assets/img/android-chrome-192x192.png → assets/images/android-chrome-192x192.png

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

0
assets/img/android-chrome-512x512.png → assets/images/android-chrome-512x512.png

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

0
assets/img/apple-touch-icon.png → assets/images/apple-touch-icon.png

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

0
assets/img/favicon-128.png → assets/images/favicon-128.png

Before

Width:  |  Height:  |  Size: 904 B

After

Width:  |  Height:  |  Size: 904 B

0
assets/img/favicon-16.png → assets/images/favicon-16.png

Before

Width:  |  Height:  |  Size: 299 B

After

Width:  |  Height:  |  Size: 299 B

0
assets/img/favicon-192.png → assets/images/favicon-192.png

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

0
assets/img/favicon-32.png → assets/images/favicon-32.png

Before

Width:  |  Height:  |  Size: 393 B

After

Width:  |  Height:  |  Size: 393 B

0
assets/img/favicon-48.png → assets/images/favicon-48.png

Before

Width:  |  Height:  |  Size: 513 B

After

Width:  |  Height:  |  Size: 513 B

0
assets/img/favicon-64.png → assets/images/favicon-64.png

Before

Width:  |  Height:  |  Size: 611 B

After

Width:  |  Height:  |  Size: 611 B

0
assets/img/favicon.ico → assets/images/favicon.ico

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

0
assets/img/favicon.svg → assets/images/favicon.svg

Before

Width:  |  Height:  |  Size: 455 B

After

Width:  |  Height:  |  Size: 455 B

0
assets/img/logo.png → assets/images/logo.png

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

0
assets/img/logo.svg → assets/images/logo.svg

Before

Width:  |  Height:  |  Size: 945 B

After

Width:  |  Height:  |  Size: 945 B

0
assets/img/maskable-192x192.png → assets/images/maskable-192x192.png

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

0
assets/img/maskable-512x512.png → assets/images/maskable-512x512.png

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 8.9 KiB

0
assets/img/me.jpg → assets/images/me.jpg

Before

Width:  |  Height:  |  Size: 128 KiB

After

Width:  |  Height:  |  Size: 128 KiB

0
assets/img/mstile-150x150.png → assets/images/mstile-150x150.png

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

0
assets/img/mstile-310x310.png → assets/images/mstile-310x310.png

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

0
assets/img/safari-pinned-tab.svg → assets/images/safari-pinned-tab.svg

Before

Width:  |  Height:  |  Size: 665 B

After

Width:  |  Height:  |  Size: 665 B

BIN
assets/images/tiny-selfie.jpg

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

6
assets/js/vendor/twemoji.js

@ -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);
}
/**

61
assets/sass/abstracts/_functions.scss

@ -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);
}

3
assets/sass/abstracts/_reset.scss

@ -1,3 +0,0 @@
@charset "UTF-8";
@import "modern-normalize/modern-normalize.css";

36
assets/sass/abstracts/_responsive.scss

@ -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();
}

6
assets/sass/abstracts/_settings.scss

@ -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

12
assets/sass/abstracts/_themes.scss

@ -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);
}
}
}

10
assets/sass/components/_animation.scss

@ -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 {

12
assets/sass/components/_content.scss

@ -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
}

2
assets/sass/components/_embeds.scss

@ -1,5 +1,3 @@
@charset "UTF-8";
div.embed {
&.tweet {
.twitter-tweet-rendered iframe {

21
assets/sass/components/_footer.scss

@ -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;

99
assets/sass/components/_global.scss

@ -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");
// set themed lightbulb icons manually
&.light button.dark-mode-toggle {
background-image: url(themes.$icon-bulb-on);
}
button.dark-mode-toggle {
background-image: url($icon-bulb-on);
}
&.dark button.dark-mode-toggle {
background-image: url(themes.$icon-bulb-off);
}
}
&.dark {
background-color: map-get(map-get($themes, "dark"), "background-outer");
code,
pre,
.monospace {
font-family: settings.$font-stack-mono;
letter-spacing: normal;
}
button.dark-mode-toggle {
background-image: url($icon-bulb-off);
}
// 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/

33
assets/sass/components/_header.scss

@ -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

@ -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;
}

2
assets/sass/components/_syntax.scss

@ -1,5 +1,3 @@
@charset "UTF-8";
// all code
code {
font-size: 0.925em;

66
assets/sass/components/_typography.scss

@ -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;
}
code,
pre,
.monospace {
font-family: $font-stack-mono;
/*!
* 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;
}
// 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;
}

51
assets/sass/main.scss

@ -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";

4
assets/sass/pages/_etc.scss

@ -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;

19
assets/sass/pages/_home.scss

@ -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;

8
assets/sass/pages/_list.scss

@ -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;

14
assets/sass/pages/_projects.scss

@ -1,4 +1,4 @@
@charset "UTF-8";
@use "../abstracts/themes";
// Video Styles
div.layout-projects {