diff --git a/package.json b/package.json index 6259c7d..6734c15 100755 --- a/package.json +++ b/package.json @@ -8,17 +8,16 @@ "@11ty/eleventy": "^3.0.0", "@11ty/eleventy-plugin-rss": "^2.0.2", "@11ty/eleventy-plugin-syntaxhighlight": "^2.0.3", - "@tbranyen/jsdom": "^13.0.0", + "jsdom": "^24.0.0", "bootstrap": "^5.1.3", "concurrently": "^7.0.0", - "html-minifier": "^4.0.0", + "html-minifier-terser": "^7.2.0", "image-size": "^0.8.3", "json-to-scss": "^1.3.1", "leaflet": "^1.7.1", "sass": "^1.26.3", "semver": "^6.3.0", - "slugify": "^1.4.0", - "stalfos": "github:hankchizljaw/stalfos#c8971d22726326cfc04089b2da4d51eeb1ebb0eb" + "slugify": "^1.4.0" }, "devDependencies": { "@erquhart/rollup-plugin-node-builtins": "^2.1.5", diff --git a/src/scss/_config.scss b/src/scss/_config.scss index 8b8636b..9448561 100644 --- a/src/scss/_config.scss +++ b/src/scss/_config.scss @@ -1,4 +1,5 @@ -@import 'tokens'; +@use 'tokens'; +@use 'sass:map'; /** * SIZE SCALE @@ -6,22 +7,14 @@ * it is relevant for (font-size, margin, padding). All items are * calcuated off these tokens. */ -$stalfos-size-scale: map-get($tokens, 'size-scale'); +$size-scale: map.get(tokens.$tokens, 'size-scale'); /** * COLORS * Colors are shared between backgrounds and text by default. * You can also use them to power borders, fills or shadows, for example. */ -$stalfos-colors: map-get($tokens, 'colors'); - -/** - * UTIL PREFIX - * All pre-built, framework utilities will have this prefix. - * Example: the wrapper utility is '.sf-wrapper' because the default - * prefix is 'sf-'. - */ -$stalfos-util-prefix: 'sf-'; +$colors: map.get(tokens.$tokens, 'colors'); /** * METRICS @@ -32,151 +25,3 @@ $metrics: ( 'wrap-inner-max-width': 47rem, 'md-breakpoint': 48rem ); - -/** - * CORE CONFIG - * This powers everything from utility class generation to breakpoints - * to enabling/disabling pre-built components/utilities. - */ -$stalfos-config: ( - 'align': ( - 'items': ( - 'start': 'flex-start', - 'center': 'center', - 'end': 'flex-end' - ), - 'output': 'responsive', - 'property': 'align-items' - ), - 'bg': ( - 'items': $stalfos-colors, - 'output': 'standard', - 'property': 'background' - ), - 'color': ( - 'items': $stalfos-colors, - 'output': 'standard', - 'property': 'color' - ), - 'box': ( - 'items': ( - 'block': 'block', - 'flex': 'flex', - 'inline-flex': 'inline-flex', - 'hide': 'none' - ), - 'output': 'responsive', - 'property': 'display' - ), - 'font': ( - 'items': map-get($tokens, 'fonts'), - 'output': 'standard', - 'property': 'font-family' - ), - 'gap-top': ( - 'items': $stalfos-size-scale, - 'output': 'standard', - 'property': 'margin-top' - ), - 'gap-bottom': ( - 'items': $stalfos-size-scale, - 'output': 'standard', - 'property': 'margin-bottom' - ), - 'leading': ( - 'items': ( - 'tight': '1.2', - 'mid': '1.5', - 'loose': '1.7' - ), - 'output': 'standard', - 'property': 'line-height' - ), - 'measure': ( - 'items': ( - 'long': '75ch', - 'short': '60ch', - 'compact': '40ch' - ), - 'output': 'standard', - 'property': 'max-width' - ), - 'pad-top': ( - 'items': $stalfos-size-scale, - 'output': 'standard', - 'property': 'padding-top' - ), - 'pad-bottom': ( - 'items': $stalfos-size-scale, - 'output': 'standard', - 'property': 'padding-bottom' - ), - 'pad-left': ( - 'items': $stalfos-size-scale, - 'output': 'standard', - 'property': 'padding-left' - ), - 'space': ( - 'items': ( - 'between': 'space-between', - 'around': 'space-around', - 'before': 'flex-end' - ), - 'output': 'responsive', - 'property': 'justify-content' - ), - 'stack': ( - 'items': ( - '300': 0, - '400': 10, - '500': 20, - '600': 30, - '700': 40 - ), - 'output': 'standard', - 'property': 'z-index' - ), - 'ta': ( - 'items': ( - 'right': 'right', - 'left': 'left', - 'center': 'center' - ), - 'output': 'responsive', - 'property': 'text-align' - ), - 'text': ( - 'items': $stalfos-size-scale, - 'output': 'responsive', - 'property': 'font-size' - ), - 'weight': ( - 'items': ( - 'light': '300', - 'regular': '400', - 'mid': '600', - 'bold': '700' - ), - 'output': 'standard', - 'property': 'font-weight' - ), - 'width': ( - 'items': ( - 'full': '100%', - 'half': percentage(.5), - 'quarter': percentage(.25), - 'third': percentage(.33) - ), - 'output': 'responsive', - 'property': 'width' - ), - 'breakpoints': ( - 'md': #{'(min-width: ' + map-get($metrics, 'md-breakpoint') + ')'} - ), - 'utilities': ( - 'reset': 'on', - 'icon': 'off', - 'flow': 'on', - 'wrapper': 'off' - ) -); diff --git a/src/scss/_functions.scss b/src/scss/_functions.scss new file mode 100644 index 0000000..a7d5aef --- /dev/null +++ b/src/scss/_functions.scss @@ -0,0 +1,28 @@ +@use 'tokens'; +@use 'sass:map'; + +/** + * CUSTOM FUNCTIONS + * Replacement functions for stalfos get-size() and get-color() functions + */ + +/** + * Get size from the size scale + * @param {string|number} $size - The size key from the scale + * @return {string} - The size value + */ +@function get-size($size) { + @if $size == 'base' { + @return map.get(tokens.$tokens, 'size-scale', 'base'); + } + @return map.get(tokens.$tokens, 'size-scale', $size); +} + +/** + * Get color from the color palette + * @param {string} $color - The color key from the palette + * @return {string} - The color value + */ +@function get-color($color) { + @return map.get(tokens.$tokens, 'colors', $color); +} diff --git a/src/scss/_theme.scss b/src/scss/_theme.scss index 379d212..3006d34 100644 --- a/src/scss/_theme.scss +++ b/src/scss/_theme.scss @@ -1,28 +1,32 @@ +@use 'config'; +@use 'functions'; +@use 'sass:list'; + :root { // Pull the tokens and generate custom props - @each $color in $stalfos-colors { - #{'--color-' + nth($color, 1)}: #{nth($color, 2)}; + @each $color in config.$colors { + #{'--color-' + list.nth($color, 1)}: #{list.nth($color, 2)}; } // Set theme aliases --color-mode: 'light'; - --color-bg: #{get-color('light')}; - --color-bg-glare: #{get-color('light')}; - --color-text: #{get-color('dark')}; - --color-text-glare: #{get-color('dark')}; - --color-selection-text: #{get-color('light')}; - --color-selection-bg: #{get-color('dark')}; - --color-stroke: #{get-color('mid')}; - --color-action-bg: #{get-color('primary')}; - --color-action-text: #{get-color('dark')}; - --color-theme-primary: #{get-color('primary')}; - --color-theme-primary-glare: #{get-color('primary-glare')}; - --color-theme-highlight: #{get-color('highlight')}; - --color-theme-highlight-block: #{get-color('highlight')}; - --color-theme-secondary: #{get-color('secondary')}; - --color-light-gray: #{get-color('light-gray')}; - --color-light-blue: #{get-color('light-blue')}; - --color-white: #{get-color('light')}; + --color-bg: #{functions.get-color('light')}; + --color-bg-glare: #{functions.get-color('light')}; + --color-text: #{functions.get-color('dark')}; + --color-text-glare: #{functions.get-color('dark')}; + --color-selection-text: #{functions.get-color('light')}; + --color-selection-bg: #{functions.get-color('dark')}; + --color-stroke: #{functions.get-color('mid')}; + --color-action-bg: #{functions.get-color('primary')}; + --color-action-text: #{functions.get-color('dark')}; + --color-theme-primary: #{functions.get-color('primary')}; + --color-theme-primary-glare: #{functions.get-color('primary-glare')}; + --color-theme-highlight: #{functions.get-color('highlight')}; + --color-theme-highlight-block: #{functions.get-color('highlight')}; + --color-theme-secondary: #{functions.get-color('secondary')}; + --color-light-gray: #{functions.get-color('light-gray')}; + --color-light-blue: #{functions.get-color('light-blue')}; + --color-white: #{functions.get-color('light')}; } body { diff --git a/src/scss/_typography.scss b/src/scss/_typography.scss index 4bccc8e..28445e1 100644 --- a/src/scss/_typography.scss +++ b/src/scss/_typography.scss @@ -1,3 +1,7 @@ +@use 'tokens'; +@use 'functions'; +@use 'sass:map'; + /* varela-round-regular - latin */ @font-face { font-family: 'Varela Round'; @@ -57,8 +61,8 @@ } body { - $line-height: get-size(600); - @include apply-utility('font', 'base'); + $line-height: functions.get-size(600); + font-family: #{map.get(tokens.$tokens, 'fonts', 'base')}; // Strip the unit off the size ratio to generate a line height line-height: calc($line-height / 1); @@ -66,7 +70,7 @@ body { h1, h2 { - @include apply-utility('font', 'brand'); + font-family: #{map.get(tokens.$tokens, 'fonts', 'brand')}; } h1 { @@ -81,7 +85,7 @@ h2 { } h3 { - font-size: get-size(500); + font-size: functions.get-size(500); } @media (max-width: 575.98px) { diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 885f6cb..c1a7fe8 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -1,10 +1,12 @@ +@use '../functions'; + .button, .btn { display: inline-block; border: 0; background-color: var(--color-action-bg); color: var(--color-action-text); - padding: get-size(300) get-size('base'); + padding: functions.get-size(300) functions.get-size('base'); line-height: 1; margin: 0; text-decoration: none; diff --git a/src/scss/components/_form.scss b/src/scss/components/_form.scss index be85e22..f968695 100644 --- a/src/scss/components/_form.scss +++ b/src/scss/components/_form.scss @@ -1,3 +1,6 @@ +@use '../tokens'; +@use 'sass:map'; + .home .form-container { svg > path:first-child { fill: #f1f0f6; @@ -40,7 +43,7 @@ label { input, textarea, select { - @include apply-utility('font', 'base'); + font-family: #{map.get(tokens.$tokens, 'fonts', 'base')}; background-color: var(--color-primary-glare); font: inherit; border: 0; diff --git a/src/scss/components/_heading-permalink.scss b/src/scss/components/_heading-permalink.scss index e9e10d7..6071d7a 100644 --- a/src/scss/components/_heading-permalink.scss +++ b/src/scss/components/_heading-permalink.scss @@ -4,7 +4,7 @@ margin-left: .3em; margin-top: .2em; - @include media-query('md') { + @media (min-width: 48rem) { font-size: .6em; margin-top: .4em; } diff --git a/src/scss/components/_intro.scss b/src/scss/components/_intro.scss index 27c4203..c851078 100644 --- a/src/scss/components/_intro.scss +++ b/src/scss/components/_intro.scss @@ -1,3 +1,5 @@ +@use '../functions'; + .intro { margin-top: 8rem; @@ -7,8 +9,8 @@ } &__summary { - --flow-space: #{get-size(500)}; - font-size: get-size(500); + --flow-space: #{functions.get-size(500)}; + font-size: functions.get-size(500); a { color: currentColor; diff --git a/src/scss/components/_member.scss b/src/scss/components/_member.scss index 3861397..a963a97 100644 --- a/src/scss/components/_member.scss +++ b/src/scss/components/_member.scss @@ -38,6 +38,12 @@ .social-links { display: flex; + li { + &::marker { + display: none; + } + } + li + li { margin-left: 1rem; } diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss index 7bf7c22..f444a7b 100644 --- a/src/scss/components/_modal.scss +++ b/src/scss/components/_modal.scss @@ -1,3 +1,6 @@ +@use '../tokens'; +@use 'sass:map'; + .modal-content { border: 0; border-radius: 1.5rem; @@ -10,7 +13,7 @@ } h3 { - @include apply-utility('font', 'brand'); + font-family: #{map.get(tokens.$tokens, 'fonts', 'brand')}; font-size: 1.5rem; } } diff --git a/src/scss/components/_nav.scss b/src/scss/components/_nav.scss index 68f9e11..e1a6417 100644 --- a/src/scss/components/_nav.scss +++ b/src/scss/components/_nav.scss @@ -1,3 +1,5 @@ +@use '../functions'; + .nav { &__list { overflow-x: auto; @@ -19,11 +21,11 @@ } &__item { - padding: get-size(300) 0; + padding: functions.get-size(300) 0; flex-shrink: 0; a { - @include apply-utility('weight', 'mid'); + font-weight: 600; color: currentColor; &:not(:hover) { diff --git a/src/scss/components/_post.scss b/src/scss/components/_post.scss index 87f90e5..14ff8af 100644 --- a/src/scss/components/_post.scss +++ b/src/scss/components/_post.scss @@ -1,3 +1,9 @@ +@use '../config'; +@use '../functions'; +@use '../tokens'; +@use '../utilities/visually-hidden'; +@use 'sass:map'; + .post { margin-bottom: 8rem; @@ -11,7 +17,7 @@ h2, h3 { - @include apply-utility('leading', 'tight'); + line-height: 1.2; position: relative; } @@ -38,23 +44,23 @@ blockquote { border-left: .4rem solid var(--color-theme-primary-glare); margin-left: 0; - padding-left: get-size(500); + padding-left: functions.get-size(500); font-style: italic; - font-size: get-size(600); + font-size: functions.get-size(600); p { opacity: .85; - padding: get-size(500) 0; + padding: functions.get-size(500) 0; } } ol:not([class]), ul:not([class]) { - margin-left: get-size(800); + margin-left: functions.get-size(800); margin-bottom: 1rem; li + li { - margin-top: get-size(300); + margin-top: functions.get-size(300); } } @@ -64,7 +70,7 @@ .video-player, .video-player + *, video { - --flow-space: #{get-size('max')}; + --flow-space: #{functions.get-size('max')}; } figure, @@ -72,7 +78,7 @@ .video-player, video { width: 100%; - max-width: map-get($metrics, 'wrap-max-width'); + max-width: map.get(config.$metrics, 'wrap-max-width'); position: relative; } @@ -84,9 +90,9 @@ figcaption { font-size: .8em; font-style: italic; - max-width: map-get($metrics, 'wrap-inner-max-width'); + max-width: map.get(config.$metrics, 'wrap-inner-max-width'); margin: .5rem auto 0; - padding: 0 get-size(500); + padding: 0 functions.get-size(500); } .post-info { @@ -103,8 +109,8 @@ pre > code { display: block; background: var(--color-dark); - padding: get-size(700); - font-size: get-size(500); + padding: functions.get-size(700); + font-size: functions.get-size(500); } // page specific @@ -288,7 +294,7 @@ } h2 { - @include apply-utility('font', 'base'); + font-family: #{map.get(tokens.$tokens, 'fonts', 'base')}; text-align: left; font-weight: 600; margin-bottom: 1rem; @@ -328,7 +334,7 @@ h2 { flex-shrink: 0; - margin-right: get-size('base'); + margin-right: functions.get-size('base'); color: var(--color-dark); } diff --git a/src/scss/components/_skip-link.scss b/src/scss/components/_skip-link.scss index 6bd377d..9869488 100644 --- a/src/scss/components/_skip-link.scss +++ b/src/scss/components/_skip-link.scss @@ -1,3 +1,6 @@ +@use '../functions'; +@use '../utilities/visually-hidden'; + .skip-link:not(:focus) { @extend %visually-hidden; } @@ -7,7 +10,7 @@ position: absolute; top: 0; left: 0; - padding: get-size(300) get-size(500) get-size('base') get-size(500); + padding: functions.get-size(300) functions.get-size(500) functions.get-size('base') functions.get-size(500); background-color: var(--color-action-bg); color: var(--color-action-text); line-height: 1; diff --git a/src/scss/components/_video-player.scss b/src/scss/components/_video-player.scss index fe3d9b1..1618b82 100644 --- a/src/scss/components/_video-player.scss +++ b/src/scss/components/_video-player.scss @@ -2,7 +2,7 @@ position: relative; padding-top: 56.25%; - @include media-query('md') { + @media (min-width: 48rem) { .post & { padding-top: 66%; } diff --git a/src/scss/global.scss b/src/scss/global.scss index d37d138..9e5e734 100644 --- a/src/scss/global.scss +++ b/src/scss/global.scss @@ -1,12 +1,38 @@ -@import 'config'; +@use 'config'; +@use 'functions'; +@use 'sass:map'; +@use 'sass:list'; +@use 'theme'; +@use 'typography'; -// Pull in the stalfos lib -@import '../../node_modules/stalfos/stalfos'; +// Utils +@use 'utilities/inner-wrapper'; +@use 'utilities/visually-hidden'; +@use 'utilities/wrapper'; -@import 'theme'; - -// Local dependencies -@import 'typography'; +// Components +@use 'components/button'; +@use 'components/faq'; +@use 'components/form'; +@use 'components/heading-permalink'; +@use 'components/intro'; +@use 'components/nav'; +@use 'components/posts'; +@use 'components/post'; +@use 'components/meeting'; +@use 'components/member'; +@use 'components/member-list'; +@use 'components/modal'; +@use 'components/posts-list'; +@use 'components/presentation'; +@use 'components/site-head'; +@use 'components/site-foot'; +@use 'components/partner'; +@use 'components/skip-link'; +@use 'components/video-player'; +@use 'components/search-bar'; +@use 'components/tags'; +@use 'utilities/responsive'; /** * GLOBAL STYLES @@ -36,12 +62,13 @@ hr { max-width: 500px; background: var(--color-stroke); border: 0; - margin: get-size(900) auto; + margin: functions.get-size(900) auto; } // For when metric attributes are added to img elements img { height: auto; + max-width: 100%; } :focus { @@ -49,35 +76,24 @@ img { outline-offset: .25rem; } -/** - * PROJECT IMPORTS - */ - -// Utils -@import 'utilities/inner-wrapper'; -@import 'utilities/visually-hidden'; -@import 'utilities/wrapper'; - -// Components -@import 'components/button'; -@import 'components/faq'; -@import 'components/form'; -@import 'components/heading-permalink'; -@import 'components/intro'; -@import 'components/nav'; -@import 'components/posts'; -@import 'components/post'; -@import 'components/meeting'; -@import 'components/member'; -@import 'components/member-list'; -@import 'components/modal'; -@import 'components/posts-list'; -@import 'components/presentation'; -@import 'components/site-head'; -@import 'components/site-foot'; -@import 'components/partner'; -@import 'components/skip-link'; -@import 'components/video-player'; -@import 'components/search-bar'; -@import 'components/tags'; -@import 'utilities/responsive'; +body, +dd, +dl, +dt, +figcaption, +figure, +h1, +h2, +h3, +h4, +li, +ol, +p, +ul { + margin: 0; + padding: 0; +} +ol[class], +ul[class] { + list-style: none; +} diff --git a/src/scss/utilities/_inner-wrapper.scss b/src/scss/utilities/_inner-wrapper.scss index 9a922f0..47e0819 100644 --- a/src/scss/utilities/_inner-wrapper.scss +++ b/src/scss/utilities/_inner-wrapper.scss @@ -1,7 +1,11 @@ +@use '../config'; +@use '../functions'; +@use 'sass:map'; + .inner-wrapper { - max-width: map-get($metrics, 'wrap-inner-max-width'); + max-width: map.get(config.$metrics, 'wrap-inner-max-width'); margin-left: auto; margin-right: auto; - padding-left: get-size(500); - padding-right: get-size(500); + padding-left: functions.get-size(500); + padding-right: functions.get-size(500); } diff --git a/src/scss/utilities/_wrapper.scss b/src/scss/utilities/_wrapper.scss index 39d53b7..77893ce 100644 --- a/src/scss/utilities/_wrapper.scss +++ b/src/scss/utilities/_wrapper.scss @@ -1,7 +1,11 @@ +@use '../config'; +@use '../functions'; +@use 'sass:map'; + .wrapper { - max-width: map-get($metrics, 'wrap-max-width'); + max-width: map.get(config.$metrics, 'wrap-max-width'); margin-left: auto; margin-right: auto; - padding-left: get-size(500); - padding-right: get-size(500); + padding-left: functions.get-size(500); + padding-right: functions.get-size(500); } diff --git a/src/transforms/html-min-transform.js b/src/transforms/html-min-transform.js index c91625e..c68e169 100644 --- a/src/transforms/html-min-transform.js +++ b/src/transforms/html-min-transform.js @@ -1,4 +1,4 @@ -import htmlmin from 'html-minifier'; +import htmlmin from 'html-minifier-terser'; export default function htmlMinTransform(value, outputPath) { if (outputPath.indexOf('.html') > -1) { diff --git a/src/transforms/parse-transform.js b/src/transforms/parse-transform.js index f301859..053c56c 100644 --- a/src/transforms/parse-transform.js +++ b/src/transforms/parse-transform.js @@ -1,4 +1,4 @@ -import {JSDOM} from '@tbranyen/jsdom'; +import {JSDOM} from 'jsdom'; import minify from '../utils/minify.js'; import slugify from 'slugify'; import getSize from 'image-size';