From da1cfeceb97e8d62b3d81017a0afdccfac5bc61a Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Wed, 4 Mar 2026 11:22:26 -0600 Subject: [PATCH 1/7] Status update --- config/webAwesomeBundle.css | 1 + config/webAwesomeBundle.js | 6 ++++++ eleventy.config.js | 1 + src/_includes/components/header.css | 12 ++++++++++++ src/_includes/header.njk | 26 ++++++++++++++++++++++++++ src/_includes/index.css | 5 +++++ 6 files changed, 51 insertions(+) create mode 100644 config/webAwesomeBundle.css diff --git a/config/webAwesomeBundle.css b/config/webAwesomeBundle.css new file mode 100644 index 0000000000..37cb07913f --- /dev/null +++ b/config/webAwesomeBundle.css @@ -0,0 +1 @@ +@import "../node_modules/@awesome.me/webawesome/dist/styles/webawesome.css"; diff --git a/config/webAwesomeBundle.js b/config/webAwesomeBundle.js index 4ae5d78bd4..44cb217575 100644 --- a/config/webAwesomeBundle.js +++ b/config/webAwesomeBundle.js @@ -2,3 +2,9 @@ import "@awesome.me/webawesome/dist/components/copy-button/copy-button.js"; // import "@awesome.me/webawesome/dist/components/comparison/comparison.js"; + +// +import "@awesome.me/webawesome/dist/components/dialog/dialog.js"; +import "@awesome.me/webawesome/dist/components/button/button.js"; +import "@awesome.me/webawesome/dist/components/icon/icon.js"; +import "@awesome.me/webawesome/dist/components/spinner/spinner.js"; diff --git a/eleventy.config.js b/eleventy.config.js index 62670eef08..f4dac6cbf2 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -408,6 +408,7 @@ export default async function (eleventyConfig) { await minifyJavaScriptFile(resolveModule("@11ty/client/md"), path.join(eleventyConfig.directories.output, "js/eleventy.engine-md.browser.js")); await minifyJavaScriptFile(resolveModule("@11ty/client/liquid"), path.join(eleventyConfig.directories.output, "js/eleventy.engine-liquid.browser.js")); await bundleModulePath("@awesome.me/webawesome/dist/components/copy-button/copy-button.js", path.join(eleventyConfig.directories.output, "js/copy-button.js")); + await bundle(["./config/webAwesomeBundle.css"], path.join(eleventyConfig.directories.output, "css/web-awesome.css")); await bundle(["./config/webAwesomeBundle.js"], path.join(eleventyConfig.directories.output, "js/web-awesome.js")); eleventyConfig.addPassthroughCopy("src/img"); diff --git a/src/_includes/components/header.css b/src/_includes/components/header.css index 750e713689..8be3ad2701 100644 --- a/src/_includes/components/header.css +++ b/src/_includes/components/header.css @@ -298,3 +298,15 @@ main h1.elv-hed { height: auto; filter: drop-shadow(3px 3px #0006); } + + +.promo-dialog { + --width: 40em; + display: block; + margin-block: auto; +} +.promo-dialog wa-button::part(base) { + background: #00a877; + color: #fff; + font-weight: 700; +} diff --git a/src/_includes/header.njk b/src/_includes/header.njk index 8a16e820dd..2d4aceba3c 100644 --- a/src/_includes/header.njk +++ b/src/_includes/header.njk @@ -80,4 +80,30 @@ + + + + + + {# #} + + {# #} + +

The same static site generator you know and love, now with endless Pro 'possum-bilities. But just like other parts of the Awesomeverse, Build Awesome will continue to be free and open source.

+ Support the Kickstarter! + + + diff --git a/src/_includes/index.css b/src/_includes/index.css index 6c918ae8bb..769db3ad24 100644 --- a/src/_includes/index.css +++ b/src/_includes/index.css @@ -98,6 +98,11 @@ iframe { width: 100%; } +iframe.video-player { + aspect-ratio: 16/9; + border-radius: .5em; +} + /* Blockquotes */ blockquote { font-family: Georgia, serif; From 9c02ef0bb1425924e020973e25f2e3faae3d5cd2 Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Wed, 4 Mar 2026 14:51:54 -0600 Subject: [PATCH 2/7] Tweak sweatband styles --- src/_includes/components/announcement.css | 37 +++++++++++++++-------- src/_includes/components/header.css | 2 +- 2 files changed, 26 insertions(+), 13 deletions(-) diff --git a/src/_includes/components/announcement.css b/src/_includes/components/announcement.css index c75885e553..123fbc9776 100644 --- a/src/_includes/components/announcement.css +++ b/src/_includes/components/announcement.css @@ -1,19 +1,19 @@ .announcement { + --btn-bg: #f0f1f3; + --btn-color: #183153; + --btn-shadow-color: #0f1f36; display: flex; flex-wrap: wrap; justify-content: center; width: 100%; background-color: rgb(24, 49, 83); color: #fff; - font-weight: 500; + font-weight: 600; padding: 0.25em 1em; text-align: center; line-height: 1; gap: .5em; } -.elv-header-default .announcement { - background-color: #222; -} @media (min-width: 48em) { /* 768px */ .announcement { @@ -24,21 +24,34 @@ .announcement > a, .announcement > span { display: flex; - gap: .25em; - padding: 0.35em 0; + align-items: center; + gap: .5em; + padding: .5em 2em; text-decoration: none; - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; + border-radius: .5em; + margin: .25em .25em .5em .25em; + border: .125rem solid var(--btn-shadow-color); +} +.announcement > a, +.announcement > a:visited, +.announcement > a:any-link { + background-color: var(--btn-bg); + color: var(--btn-color); + box-shadow: 0 .375rem 0 var(--btn-shadow-color); } .announcement a:hover { text-decoration: underline; } -.announcement, -.announcement a, -.announcement a:visited { - color: #eee; -} .announcement a:after { display: none; } + +.elv-header-default .announcement { + --btn-bg: #f0f1f3; + --btn-color: #333; + --btn-shadow-color: #666; + background-color: #222; +} diff --git a/src/_includes/components/header.css b/src/_includes/components/header.css index 8be3ad2701..836f98350d 100644 --- a/src/_includes/components/header.css +++ b/src/_includes/components/header.css @@ -93,7 +93,7 @@ } } /* Sticky, #2col × 600px */ -@media (min-width: 41.4375em) and (min-height: 37.5em) { +@media (min-width: 41.4375em) and (min-height: 43.75em) { /* Take care with the sticky toc too */ .elv-header.elv-header-docs { position: sticky; From e449e4c26573019507b576c5f526d0eb36071bce Mon Sep 17 00:00:00 2001 From: Edward Emanuel Date: Wed, 4 Mar 2026 16:04:14 -0600 Subject: [PATCH 3/7] Update ks dialog --- src/_includes/components/header.css | 60 +++++++++++++++++------------ src/_includes/header.njk | 42 +++++++++++--------- src/_includes/layouts/base.njk | 4 ++ 3 files changed, 62 insertions(+), 44 deletions(-) diff --git a/src/_includes/components/header.css b/src/_includes/components/header.css index 836f98350d..0b9a1d5d9a 100644 --- a/src/_includes/components/header.css +++ b/src/_includes/components/header.css @@ -1,7 +1,6 @@ - /* Header */ .elv-menu { - background-color: rgba(255, 255, 255, .65); + background-color: rgba(255, 255, 255, 0.65); color: var(--color); backdrop-filter: blur(15px); } @@ -24,7 +23,7 @@ } @media (prefers-color-scheme: dark) { .elv-menu { - background-color: rgba(0,0,0,.65); + background-color: rgba(0, 0, 0, 0.65); } } .elv-header { @@ -69,8 +68,8 @@ max-height: 2em; background-color: #222; text-align: center; - border-radius: .15em; - padding: 0 .25em; + border-radius: 0.15em; + padding: 0 0.25em; } .elv-nav-menu-logo svg { width: 100%; @@ -87,7 +86,8 @@ .elv-nav-menu { padding-right: 1rem; } -@media (min-width: 34.4375em) and (max-width: 74.9375em) { /* 551px–1199px */ +@media (min-width: 34.4375em) and (max-width: 74.9375em) { + /* 551px–1199px */ .elv-header-docs .elv-nav-menu { padding-right: 4em; } @@ -110,31 +110,32 @@ } .elv-nav-menu { - --search-bg: rgba(255,255,255,.8); - --search-icon: rgba(0,0,0,.4); - --search-border: rgba(0,0,0,.2); + --search-bg: rgba(255, 255, 255, 0.8); + --search-icon: rgba(0, 0, 0, 0.4); + --search-border: rgba(0, 0, 0, 0.2); --search-text: #000; --search-radius: 1rem; } @media (prefers-color-scheme: dark) { .elv-nav-menu { - --search-bg: rgba(0,0,0,.8); - --search-icon: rgba(255,255,255,.4); - --search-border: rgba(255,255,255,.2); + --search-bg: rgba(0, 0, 0, 0.8); + --search-icon: rgba(255, 255, 255, 0.4); + --search-border: rgba(255, 255, 255, 0.2); --search-text: #fff; } } .elv-header-default .elv-nav-menu { - --search-bg: rgba(0,0,0,.8); - --search-icon: rgba(255,255,255,.4); - --search-border: rgba(255,255,255,.2); + --search-bg: rgba(0, 0, 0, 0.8); + --search-icon: rgba(255, 255, 255, 0.4); + --search-border: rgba(255, 255, 255, 0.2); --search-text: #fff; } .elv-nav-menu form { color: var(--search-text); } -@media (min-width: 67.5em) { /* 1080px */ +@media (min-width: 67.5em) { + /* 1080px */ .elv-nav-menu form { margin-inline: 2em; } @@ -151,9 +152,9 @@ background-color: var(--search-bg); } .elv-nav-menu button { - font-size: .75em; + font-size: 0.75em; margin: 0; - padding-inline: .75em; + padding-inline: 0.75em; border-radius: var(--search-radius); border: none; color: var(--search-icon); @@ -185,7 +186,13 @@ text-decoration: none; } .elv-hero:has(.elv-hero-ba) { - background-image: repeating-linear-gradient(-45deg, var(--stripe-color-1), var(--stripe-color-1) 10px, var(--stripe-color-2) 10px, var(--stripe-color-2) 20px); + background-image: repeating-linear-gradient( + -45deg, + var(--stripe-color-1), + var(--stripe-color-1) 10px, + var(--stripe-color-2) 10px, + var(--stripe-color-2) 20px + ); background-color: var(--stripe-color-1); } .elv-hero-ba { @@ -198,7 +205,7 @@ width: clamp(3vh, 10vh, 10em); height: auto; aspect-ratio: 1/1; - margin: .5em auto; + margin: 0.5em auto; color: #183153; } .elv-hero-ba svg + svg { @@ -269,7 +276,9 @@ main h1.elv-hed { } /* Comparison component */ -.elv-nav-header wa-comparison:not(:defined) :where([slot="before"], [slot="handle"]) { +.elv-nav-header + wa-comparison:not(:defined) + :where([slot="before"], [slot="handle"]) { display: none; } .elv-nav-header wa-comparison, @@ -280,7 +289,7 @@ main h1.elv-hed { --wa-color-surface-default: #111; --wa-color-neutral-on-quiet: #fff; --wa-border-radius-circle: 2.5em; - --wa-focus-ring: solid .1875rem #00a877; + --wa-focus-ring: solid 0.1875rem #00a877; --wa-focus-ring-offset: 0.0625em; height: 40vh; } @@ -299,14 +308,15 @@ main h1.elv-hed { filter: drop-shadow(3px 3px #0006); } - .promo-dialog { --width: 40em; - display: block; margin-block: auto; } -.promo-dialog wa-button::part(base) { +.promo-dialog wa-button::part(base) { background: #00a877; color: #fff; font-weight: 700; } +.promo-dialog p { + color: black; +} diff --git a/src/_includes/header.njk b/src/_includes/header.njk index 2d4aceba3c..be91cd1376 100644 --- a/src/_includes/header.njk +++ b/src/_includes/header.njk @@ -67,7 +67,6 @@ - {%- endif %} @@ -82,28 +81,33 @@ - + - {# #} +

The same static site generator you know and love, now with endless Pro 'possum-bilities. But just like other parts of the Awesomeverse, Build Awesome will continue to be free and open source.

- {# #} - -

The same static site generator you know and love, now with endless Pro 'possum-bilities. But just like other parts of the Awesomeverse, Build Awesome will continue to be free and open source.

Support the Kickstarter! - + + + diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk index 4cdfc2f838..85283d5e41 100644 --- a/src/_includes/layouts/base.njk +++ b/src/_includes/layouts/base.njk @@ -165,6 +165,10 @@ let eleventyComputed = { {%- else %} {%- endif %} + + + + {{ content | safe }} From 3cbd4723c3cdeb3d62da4635fa11ccc297835fa2 Mon Sep 17 00:00:00 2001 From: Edward Emanuel Date: Wed, 4 Mar 2026 16:24:52 -0600 Subject: [PATCH 4/7] Clean up --- src/_includes/layouts/base.njk | 1 - 1 file changed, 1 deletion(-) diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk index 85283d5e41..85359dc528 100644 --- a/src/_includes/layouts/base.njk +++ b/src/_includes/layouts/base.njk @@ -167,7 +167,6 @@ let eleventyComputed = { {%- endif %} - From 9c28c6eb6033c2110d2a19c5c75a3e59c8e554f3 Mon Sep 17 00:00:00 2001 From: Edward Emanuel Date: Wed, 4 Mar 2026 16:57:57 -0600 Subject: [PATCH 5/7] Stop video on close and reformat the dialog --- src/_includes/components/header.css | 13 ++++++++++++- src/_includes/header.njk | 30 ++++++++++++++++++++++++----- src/_includes/layouts/base.njk | 1 + 3 files changed, 38 insertions(+), 6 deletions(-) diff --git a/src/_includes/components/header.css b/src/_includes/components/header.css index 0b9a1d5d9a..0d07a8afa3 100644 --- a/src/_includes/components/header.css +++ b/src/_includes/components/header.css @@ -310,7 +310,7 @@ main h1.elv-hed { .promo-dialog { --width: 40em; - margin-block: auto; + --spacing: 0; } .promo-dialog wa-button::part(base) { background: #00a877; @@ -319,4 +319,15 @@ main h1.elv-hed { } .promo-dialog p { color: black; + padding: 1em; +} + +.promo-footer { + padding: 1em; + width: 100%; +} + +#promo-dialog wa-button[appearance="plain"]::part(base) { + background-color: white; + color: #000; } diff --git a/src/_includes/header.njk b/src/_includes/header.njk index be91cd1376..9d09faa7da 100644 --- a/src/_includes/header.njk +++ b/src/_includes/header.njk @@ -80,13 +80,26 @@ - - + -

The same static site generator you know and love, now with endless Pro 'possum-bilities. But just like other parts of the Awesomeverse, Build Awesome will continue to be free and open source.

+ - Support the Kickstarter! @@ -100,11 +113,18 @@ await customElements.whenDefined('wa-dialog'); const dialog = document.querySelector('#promo-dialog'); + const videoIframe = dialog.querySelector('.video-player'); + dialog.open = true; - // Save to localStorage when dialog is closed + // Save to localStorage and stop video when dialog is closed dialog.addEventListener('wa-hide', () => { localStorage.setItem('ba-promo-dialog', 'closed'); + + // Stop the Vimeo video by sending a pause command + if (videoIframe && videoIframe.contentWindow) { + videoIframe.contentWindow.postMessage('{"method":"pause"}', '*'); + } }, { once: true }); } catch (error) { console.error('Error loading dialog:', error); diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk index 85359dc528..85283d5e41 100644 --- a/src/_includes/layouts/base.njk +++ b/src/_includes/layouts/base.njk @@ -167,6 +167,7 @@ let eleventyComputed = { {%- endif %} + From 371d82105df21f5715a63ef927b8a086390e9951 Mon Sep 17 00:00:00 2001 From: Edward Emanuel Date: Thu, 5 Mar 2026 08:46:40 -0600 Subject: [PATCH 6/7] Remove webAwesomeBundle.css --- config/webAwesomeBundle.css | 1 - eleventy.config.js | 1 - 2 files changed, 2 deletions(-) delete mode 100644 config/webAwesomeBundle.css diff --git a/config/webAwesomeBundle.css b/config/webAwesomeBundle.css deleted file mode 100644 index 37cb07913f..0000000000 --- a/config/webAwesomeBundle.css +++ /dev/null @@ -1 +0,0 @@ -@import "../node_modules/@awesome.me/webawesome/dist/styles/webawesome.css"; diff --git a/eleventy.config.js b/eleventy.config.js index f4dac6cbf2..62670eef08 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -408,7 +408,6 @@ export default async function (eleventyConfig) { await minifyJavaScriptFile(resolveModule("@11ty/client/md"), path.join(eleventyConfig.directories.output, "js/eleventy.engine-md.browser.js")); await minifyJavaScriptFile(resolveModule("@11ty/client/liquid"), path.join(eleventyConfig.directories.output, "js/eleventy.engine-liquid.browser.js")); await bundleModulePath("@awesome.me/webawesome/dist/components/copy-button/copy-button.js", path.join(eleventyConfig.directories.output, "js/copy-button.js")); - await bundle(["./config/webAwesomeBundle.css"], path.join(eleventyConfig.directories.output, "css/web-awesome.css")); await bundle(["./config/webAwesomeBundle.js"], path.join(eleventyConfig.directories.output, "js/web-awesome.js")); eleventyConfig.addPassthroughCopy("src/img"); From 302b9b145f57ce003688aa48aabc4ef86bb03aab Mon Sep 17 00:00:00 2001 From: Edward Emanuel Date: Thu, 5 Mar 2026 09:45:51 -0600 Subject: [PATCH 7/7] Clean up and formatting --- src/_includes/components/header.css | 52 +++++++++++++++++++++++++++-- src/_includes/header.njk | 10 +++--- src/_includes/index.css | 2 +- 3 files changed, 54 insertions(+), 10 deletions(-) diff --git a/src/_includes/components/header.css b/src/_includes/components/header.css index 0d07a8afa3..25d4a16a74 100644 --- a/src/_includes/components/header.css +++ b/src/_includes/components/header.css @@ -92,7 +92,7 @@ padding-right: 4em; } } -/* Sticky, #2col × 600px */ +/* Sticky, #2col × 700px */ @media (min-width: 41.4375em) and (min-height: 43.75em) { /* Take care with the sticky toc too */ .elv-header.elv-header-docs { @@ -321,13 +321,59 @@ main h1.elv-hed { color: black; padding: 1em; } - +.promo-dialog-content { + color: #191b22; + padding: 1em; + line-height: 1.5; +} .promo-footer { padding: 1em; width: 100%; + text-align: center; } - #promo-dialog wa-button[appearance="plain"]::part(base) { background-color: white; color: #000; + padding-right: 3em; +} +.promo-dialog-ks-button { + width: 25em; } + +@media (prefers-color-scheme: dark) { + .promo-dialog::part(panel) { + background-color: #191b22; + color: #f1f2f3; + } + .promo-dialog { + --width: 40em; + --spacing: 0; + color: #f1f2f3; + background: #191b22; + } + .promo-dialog body, .promo-dialog wa-stack { + color: #f1f2f3; + background: #191b22; + } + .promo-dialog wa-button::part(base) { + background: #00a877; + color: #f1f2f3; + font-weight: 700; + } + .promo-dialog-content { + color: #f1f2f3; + background: #191b22; + padding: 1em; + line-height: 1.5; + } + .promo-footer { + padding: 1em; + background: #191b22; + width: 100%; + } + #promo-dialog wa-button[appearance="plain"]::part(base) { + background-color: #191b22; + color: #f1f2f3; + padding-right: 3em; + } +} \ No newline at end of file diff --git a/src/_includes/header.njk b/src/_includes/header.njk index 9d09faa7da..74b651845c 100644 --- a/src/_includes/header.njk +++ b/src/_includes/header.njk @@ -82,19 +82,17 @@ - -