diff --git a/website/archetypes/default.md b/website/archetypes/default.md deleted file mode 100644 index c1debbe52..000000000 --- a/website/archetypes/default.md +++ /dev/null @@ -1,10 +0,0 @@ - diff --git a/website/assets/styles/01-mixins/backdrop.scss b/website/assets/custom-theme/01-mixins/backdrop.scss similarity index 100% rename from website/assets/styles/01-mixins/backdrop.scss rename to website/assets/custom-theme/01-mixins/backdrop.scss diff --git a/website/assets/styles/01-mixins/grid-assign.scss b/website/assets/custom-theme/01-mixins/grid-assign.scss similarity index 100% rename from website/assets/styles/01-mixins/grid-assign.scss rename to website/assets/custom-theme/01-mixins/grid-assign.scss diff --git a/website/assets/styles/01-mixins/grid-breakout.scss b/website/assets/custom-theme/01-mixins/grid-breakout.scss similarity index 100% rename from website/assets/styles/01-mixins/grid-breakout.scss rename to website/assets/custom-theme/01-mixins/grid-breakout.scss diff --git a/website/assets/styles/01-mixins/grid-default.scss b/website/assets/custom-theme/01-mixins/grid-default.scss similarity index 100% rename from website/assets/styles/01-mixins/grid-default.scss rename to website/assets/custom-theme/01-mixins/grid-default.scss diff --git a/website/assets/styles/01-mixins/offscreen.scss b/website/assets/custom-theme/01-mixins/offscreen.scss similarity index 100% rename from website/assets/styles/01-mixins/offscreen.scss rename to website/assets/custom-theme/01-mixins/offscreen.scss diff --git a/website/assets/styles/01-mixins/offset.scss b/website/assets/custom-theme/01-mixins/offset.scss similarity index 100% rename from website/assets/styles/01-mixins/offset.scss rename to website/assets/custom-theme/01-mixins/offset.scss diff --git a/website/assets/styles/01-mixins/on-event.scss b/website/assets/custom-theme/01-mixins/on-event.scss similarity index 100% rename from website/assets/styles/01-mixins/on-event.scss rename to website/assets/custom-theme/01-mixins/on-event.scss diff --git a/website/assets/styles/01-mixins/patterns.scss b/website/assets/custom-theme/01-mixins/patterns.scss similarity index 100% rename from website/assets/styles/01-mixins/patterns.scss rename to website/assets/custom-theme/01-mixins/patterns.scss diff --git a/website/assets/styles/01-mixins/pin.scss b/website/assets/custom-theme/01-mixins/pin.scss similarity index 100% rename from website/assets/styles/01-mixins/pin.scss rename to website/assets/custom-theme/01-mixins/pin.scss diff --git a/website/assets/styles/01-mixins/screen.scss b/website/assets/custom-theme/01-mixins/screen.scss similarity index 100% rename from website/assets/styles/01-mixins/screen.scss rename to website/assets/custom-theme/01-mixins/screen.scss diff --git a/website/assets/styles/02-variables/borders.scss b/website/assets/custom-theme/02-variables/borders.scss similarity index 100% rename from website/assets/styles/02-variables/borders.scss rename to website/assets/custom-theme/02-variables/borders.scss diff --git a/website/assets/styles/02-variables/colors.scss b/website/assets/custom-theme/02-variables/colors.scss similarity index 100% rename from website/assets/styles/02-variables/colors.scss rename to website/assets/custom-theme/02-variables/colors.scss diff --git a/website/assets/styles/02-variables/fonts.scss b/website/assets/custom-theme/02-variables/fonts.scss similarity index 100% rename from website/assets/styles/02-variables/fonts.scss rename to website/assets/custom-theme/02-variables/fonts.scss diff --git a/website/assets/styles/02-variables/spacing.scss b/website/assets/custom-theme/02-variables/spacing.scss similarity index 100% rename from website/assets/styles/02-variables/spacing.scss rename to website/assets/custom-theme/02-variables/spacing.scss diff --git a/website/assets/styles/02-variables/type-scale.scss b/website/assets/custom-theme/02-variables/type-scale.scss similarity index 100% rename from website/assets/styles/02-variables/type-scale.scss rename to website/assets/custom-theme/02-variables/type-scale.scss diff --git a/website/assets/styles/03-elements/base.scss b/website/assets/custom-theme/03-elements/base.scss similarity index 75% rename from website/assets/styles/03-elements/base.scss rename to website/assets/custom-theme/03-elements/base.scss index 957aeef92..636cd6673 100644 --- a/website/assets/styles/03-elements/base.scss +++ b/website/assets/custom-theme/03-elements/base.scss @@ -1,11 +1,5 @@ -* { - box-sizing: border-box; -} body, html { - font-family: var(--theme-font--copy); - font-size: 100%; - background-color: var(--theme-color--paper); background-image: url("./pictures/svgs/neons/nnneon-hex.svg"), url("./pictures/svgs/quads/qqquad-02.svg"), radial-gradient( @@ -19,7 +13,7 @@ html { margin: 0; padding: 0; height: 100%; - animation: fade-in 0.2s; + animation: fade-in 0.6s; } html { diff --git a/website/assets/styles/03-elements/buttons.scss b/website/assets/custom-theme/03-elements/buttons.scss similarity index 91% rename from website/assets/styles/03-elements/buttons.scss rename to website/assets/custom-theme/03-elements/buttons.scss index 8674b435c..d25fc6f3a 100644 --- a/website/assets/styles/03-elements/buttons.scss +++ b/website/assets/custom-theme/03-elements/buttons.scss @@ -29,7 +29,8 @@ #{$rule}: var(--button-#{$rule}); } - transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), + transition: + all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); @include on-event { @@ -52,9 +53,10 @@ // sometimes buttons have an icon or are only visibly an icon &__icon, + &__icon svg, &--icon { // enforce tap sizing - $taps: height, width, min-width, max-width; + $taps: height, width, min-width, max-width, font-size; @each $rule in $taps { #{$rule}: var(--theme-spacing--touchtarget); } @@ -64,6 +66,7 @@ box-shadow: none; color: currentColor; place-content: center; + border-radius: 0; @include on-event { background: transparent; diff --git a/website/assets/styles/03-elements/headings.scss b/website/assets/custom-theme/03-elements/headings.scss similarity index 90% rename from website/assets/styles/03-elements/headings.scss rename to website/assets/custom-theme/03-elements/headings.scss index 7d823504c..5ffbd2d84 100644 --- a/website/assets/styles/03-elements/headings.scss +++ b/website/assets/custom-theme/03-elements/headings.scss @@ -13,9 +13,16 @@ $heading__levels: 1, 2, 3, 4, 5, 6; } } +h1, +.e-heading__1, h4, .e-heading__4 { text-transform: uppercase; + background-color: transparent; +} + +h4, +.e-heading__4 { color: var(--theme-color--accent); } diff --git a/website/assets/styles/04-components/contributor.scss b/website/assets/custom-theme/04-components/contributor.scss similarity index 100% rename from website/assets/styles/04-components/contributor.scss rename to website/assets/custom-theme/04-components/contributor.scss diff --git a/website/assets/styles/04-components/copy.scss b/website/assets/custom-theme/04-components/copy.scss similarity index 79% rename from website/assets/styles/04-components/copy.scss rename to website/assets/custom-theme/04-components/copy.scss index f67390809..af337b617 100644 --- a/website/assets/styles/04-components/copy.scss +++ b/website/assets/custom-theme/04-components/copy.scss @@ -8,3 +8,11 @@ padding: var(--theme-spacing--6); max-width: var(--theme-spacing--linelength); } + +span { + toggle-root: check self; +} + +span:toggle(check) { + text-decoration: line-through; +} \ No newline at end of file diff --git a/website/assets/styles/04-components/page-footer.scss b/website/assets/custom-theme/04-components/page-footer.scss similarity index 100% rename from website/assets/styles/04-components/page-footer.scss rename to website/assets/custom-theme/04-components/page-footer.scss diff --git a/website/assets/custom-theme/04-components/page-header.scss b/website/assets/custom-theme/04-components/page-header.scss new file mode 100644 index 000000000..5b4e5d3fd --- /dev/null +++ b/website/assets/custom-theme/04-components/page-header.scss @@ -0,0 +1,42 @@ +.c-page-header { + &__breadcrumbs { + padding: 0; //no emojis on this layout so no need for extra padding + } + &__container { + .c-page-header--toc:not(.c-page-header--solo) & { + @media (min-width: $c-max) { + grid-template: + ". " var(--gap) + "breadcrumbs " min-content + "toc " auto + ". " var(--gap) + "title " min-content + "subtitle " min-content + "description " min-content + / 1fr; + margin-bottom: calc(-1 * var(--theme-spacing--2)); + } + } + } + + &__toc { + position: sticky; + top: 0; + .c-toc { + max-height: none; + } + } + .p-home & { + position: absolute; + bottom: 0; + margin-bottom: calc(-1 * var(--theme-spacing--6)); + .c-page-header__title { + max-width: 16ch; + font: var(--theme-font--brand); + font-size: var(--theme-type-size--1); + text-shadow: initial; + color: var(--theme-color--brand); + mix-blend-mode: saturation; + } + } +} diff --git a/website/assets/styles/04-components/person-profile.scss b/website/assets/custom-theme/04-components/person-profile.scss similarity index 100% rename from website/assets/styles/04-components/person-profile.scss rename to website/assets/custom-theme/04-components/person-profile.scss diff --git a/website/assets/custom-theme/04-components/search.scss b/website/assets/custom-theme/04-components/search.scss new file mode 100644 index 000000000..95bc0a635 --- /dev/null +++ b/website/assets/custom-theme/04-components/search.scss @@ -0,0 +1,3 @@ +#search .pagefind-ui__search-input { + background: var(--theme-color--backdrop-to) !important; +} diff --git a/website/assets/styles/04-components/splash.scss b/website/assets/custom-theme/04-components/splash.scss similarity index 71% rename from website/assets/styles/04-components/splash.scss rename to website/assets/custom-theme/04-components/splash.scss index 25fe3628d..ee55e99ef 100644 --- a/website/assets/styles/04-components/splash.scss +++ b/website/assets/custom-theme/04-components/splash.scss @@ -1,14 +1,17 @@ .c-splash { - // background: var(--theme-color--ink); - // color: var(--theme-color--paper); - + margin-top: var(--theme-spacing--6); + transform: rotate(-3.5deg); @include backdrop(true, true, 0.6); border-top: var(--theme-spacing--gutter) solid var(--theme-color--pop); border-radius: 8px 8px 2px 2px; + box-shadow: var(--theme-box-shadow); padding: var(--theme-spacing--gutter); max-width: var(--theme-spacing--linelength); + text-wrap: balance; font: var(--theme-font--system); + animation: float 6s infinite alternate ease-in-out; + strong, a { font-size: var(--theme-type-size--4); diff --git a/website/assets/styles/04-components/timeline.scss b/website/assets/custom-theme/04-components/timeline.scss similarity index 100% rename from website/assets/styles/04-components/timeline.scss rename to website/assets/custom-theme/04-components/timeline.scss diff --git a/website/assets/styles/04-components/toc.scss b/website/assets/custom-theme/04-components/toc.scss similarity index 78% rename from website/assets/styles/04-components/toc.scss rename to website/assets/custom-theme/04-components/toc.scss index 6a64e59d6..0498e652f 100644 --- a/website/assets/styles/04-components/toc.scss +++ b/website/assets/custom-theme/04-components/toc.scss @@ -3,17 +3,21 @@ .c-toc { color: var(--theme-color--accent); - max-width: var(--theme-spacing--container); border: var(--theme-border--thick); + padding: var(--gap); ol { color: var(--theme-color--ink); - padding-right: var(--theme-spacing--gutter); + text-transform: uppercase; + ol { + padding-left: var(--theme-spacing--gutter); + } } ol li { text-transform: uppercase; font-family: var(--theme-font--display); + font-weight: 500; a, a:link { diff --git a/website/assets/custom-theme/layout/header.scss b/website/assets/custom-theme/layout/header.scss new file mode 100644 index 000000000..0b3145fc9 --- /dev/null +++ b/website/assets/custom-theme/layout/header.scss @@ -0,0 +1,44 @@ +.l-header { + grid-template: + " . ......... . " var(--theme-spacing--2) + " . container ." minmax(0, 1fr) + " . ......... ." var(--theme-spacing--3) / minmax( + var(--theme-spacing--gutter), + 1fr + ) + var(--theme-spacing--container) minmax(var(--theme-spacing--gutter), 1fr); + @include pattern(dots, var(--theme-color--pop), null, false, 0.5); + background: initial; + border: initial; + box-shadow: initial; + backdrop-filter: initial; + + &__container { + grid-template: + "heading . search . action" min-content/max-content var( + --theme-spacing--4 + ) + 1fr var(--theme-spacing--4) min-content; + } + + &__action { + background: var(--theme-color--brand); + height: 100vh; + position: fixed; + right: 0; + top: 0; + align-items: flex-start; + padding: var(--theme-spacing--2) var(--theme-spacing--3) 0 + var(--theme-spacing--2); + + @include on-event() { + background-color: var(--theme-color--accent); + color: var(--theme-color--paper); + } + + svg { + height: fit-content; + align-items: flex-start; + } + } +} diff --git a/website/assets/custom-theme/layout/layout.scss b/website/assets/custom-theme/layout/layout.scss new file mode 100644 index 000000000..d98984ab9 --- /dev/null +++ b/website/assets/custom-theme/layout/layout.scss @@ -0,0 +1,10 @@ + .l-layout { + grid-template: + " header header header header" auto + " ...... main ...... ......" 1fr + " ...... footer ...... ......" auto / + minmax(var(--theme-spacing--gutter), 1fr) + var(--theme-spacing--container) + var(--theme-spacing--gutter) + minmax(var(--theme-spacing--touchtarget), 1fr); + } \ No newline at end of file diff --git a/website/assets/custom-theme/layout/menu.scss b/website/assets/custom-theme/layout/menu.scss new file mode 100644 index 000000000..fbb4f6fea --- /dev/null +++ b/website/assets/custom-theme/layout/menu.scss @@ -0,0 +1,29 @@ +.l-menu { + @include pattern(graph, currentColor, b, false, 0.2); + @include backdrop(true, true, 0.6); + z-index: 5; + width: fit-content; + --box-shadow: var(--theme-color--ink-fade); + box-shadow: -20px -2px 30px var(--box-shadow); + text-transform: lowercase; + + .is-dark-mode & { + --box-shadow: var(--theme-color--contrast-max); + } + + &__container { + max-height: calc(100vh - 2 * var(--theme-spacing--4)); + grid-template: + ". ....... ......... ......... ." var(--gap) + ". heading ......... action ." min-content + ". ....... ......... ......... ." var(--gap) + ". primary primary primary ." 1fr + ". secondary secondary secondary ." var(--theme-spacing--touchtarget) + ". ....... ......... ......... ." var(--gap) / var(--gap) + 1fr 1fr var(--theme-spacing--touchtarget) var(--gap); + } + &__secondary { + background: transparent; + width: auto; + } +} diff --git a/website/assets/styles/states/dark.scss b/website/assets/custom-theme/states/dark.scss similarity index 100% rename from website/assets/styles/states/dark.scss rename to website/assets/custom-theme/states/dark.scss diff --git a/website/assets/custom-theme/states/inert.scss b/website/assets/custom-theme/states/inert.scss new file mode 100644 index 000000000..2b7c4d4db --- /dev/null +++ b/website/assets/custom-theme/states/inert.scss @@ -0,0 +1,3 @@ +[inert] > * { + opacity: 0.5; +} \ No newline at end of file diff --git a/website/assets/styles/states/light.scss b/website/assets/custom-theme/states/light.scss similarity index 100% rename from website/assets/styles/states/light.scss rename to website/assets/custom-theme/states/light.scss diff --git a/website/assets/scripts/app.js b/website/assets/scripts/app.js deleted file mode 100644 index 73a293b99..000000000 --- a/website/assets/scripts/app.js +++ /dev/null @@ -1,50 +0,0 @@ -// I haven't written anything fancy here, just a few things to make the site work -document.addEventListener("DOMContentLoaded", () => { - // menu toggle - const menuToggles = document.querySelectorAll(".js-menu-toggle"); - const menu = document.getElementById("site-menu"); - const skipLink = document.getElementById("skip-link"); - function toggleMenu() { - menu.classList.toggle("is-active"); - menu.toggleAttribute("hidden"); - if (menu.getAttribute("hidden") == null) { - menu.focus(); - } else { - skipLink.focus(); - } - } - // listeners - we allow anything to toggle Menu if nominated with the class - menuToggles.forEach((toggle) => toggle.addEventListener("click", toggleMenu)); - - // if the menu is open listen for escape key to close it - window.addEventListener("keydown", (e) => { - if (e.key === "Escape" && menu.classList.contains("is-active")) { - toggleMenu(); - } - // if meta plus slash key combination is pressed toggle the menu - if (e.key === "/" && e.metaKey) { - toggleMenu(); - } - }); - - // dark mode toggle - const darkModeToggle = document.getElementById("mode-toggle"); - darkModeToggle.addEventListener("click", () => { - document.body.classList.toggle("is-dark-mode"); - document.body.classList.toggle("is-light-mode"); - }); - - //details toggle - const toggleDetails = document.getElementById("toggle-details"); - - if (toggleDetails) { - toggleDetails.addEventListener("click", () => { - document.querySelectorAll("details").forEach((detail) => { - detail.open = !detail.open; - }); - }); - if (window.location.hash === "#toggle-details") { - toggleDetails.click(); // send people straight to the toggled details - } - } -}); diff --git a/website/assets/styles/03-elements/images.scss b/website/assets/styles/03-elements/images.scss deleted file mode 100644 index d5decfb52..000000000 --- a/website/assets/styles/03-elements/images.scss +++ /dev/null @@ -1,17 +0,0 @@ -svg { - height: 100%; - width: auto; - min-width: var(--theme-spacing--touchtarget); -} - -img { - width: 100%; - height: 100%; - max-width: 100%; - object-fit: cover; -} - -picture { - height: auto; - overflow: hidden; -} diff --git a/website/assets/styles/03-elements/links.scss b/website/assets/styles/03-elements/links.scss deleted file mode 100644 index 9b822f62f..000000000 --- a/website/assets/styles/03-elements/links.scss +++ /dev/null @@ -1,22 +0,0 @@ -a { - color: currentColor; - text-decoration: none; - transition: all 0.3s; -} - -a:not([class]), -a:link:not([class]), -a:visited:not([class]), -.e-link { - color: currentColor; - text-decoration: underline; - text-decoration-style: dotted; - - @include on-event { - text-decoration: underline; - outline: none; - } - &:focus { - outline: 2px dotted; - } -} diff --git a/website/assets/styles/03-elements/misc-phrasing.scss b/website/assets/styles/03-elements/misc-phrasing.scss deleted file mode 100644 index f7e795267..000000000 --- a/website/assets/styles/03-elements/misc-phrasing.scss +++ /dev/null @@ -1,79 +0,0 @@ -// if it has a class we presume it's styled -// just a bunch of small phrasing elements that markdown might generate -// hugo has code highlighting built in so I've tweaked that here too - -p { - line-height: 1.5; -} -ul[class], -ol[class], -li[class] { - padding: 0; - margin: 0; - list-style: none; -} - -// markdown checklist -ul:has(input), -li:has(input) { - padding: 0; - margin: var(--theme-spacing--1) 0 auto 0; - list-style: none; - &::marker { - content: "✶ "; - color: var(--theme-color--accent); - } -} -ul:has(input) { - margin: var(--theme-spacing--1) 0 var(--theme-spacing--3); -} - -blockquote { - font-size: var(--theme-type-size--4); - margin: var(--theme-spacing--4) 0 var(--theme-spacing--6); - @include pattern(dots, var(--theme-color--pop), b, false, 0.2); - border-bottom: var(--theme-border--thick); - border-image: var(--theme-border-image); -} - -code, -.code, -pre code .highlight pre, -time { - font: var(--theme-font--system); -} -code:not([class]) { - color: var(--theme-color--pop); -} -//this .highlight is goldmark -.highlight pre { - display: block; - padding: var(--theme-spacing--gutter); - overflow-x: auto; - margin: 0; -} - -.highlight { - border: var(--theme-border); - padding: var(--theme-spacing--1); - max-width: var(--theme-spacing--linelength); - @include pattern(dots, currentColor, c, false); - margin-bottom: var(--theme-spacing--4); -} - -// details could show up in github flavoured markdown so we put a basic style on here -summary > * { - display: inline-block; -} -summary::marker { - color: var(--theme-color--accent); - font-size: var(--theme-type-size--3); -} -hr { - border: 0; - border-bottom: var(--theme-border--thick); - border-image: var(--theme-border-image); - margin: var(--theme-spacing--6) - calc(3 * calc(-1 * var(--theme-spacing--gutter))); - max-width: 50%; -} diff --git a/website/assets/styles/03-elements/table.scss b/website/assets/styles/03-elements/table.scss deleted file mode 100644 index 51567bbe8..000000000 --- a/website/assets/styles/03-elements/table.scss +++ /dev/null @@ -1,19 +0,0 @@ -table { - display: block; - width: 100%; - width: max-content; - max-width: 100%; - overflow: auto; - border-bottom: var(--theme-border--thick); - border-image: var(--theme-border-image); -} - -thead th { - font: var(--theme-font--system); - background-color: var(--theme-color--block); -} - -td { - padding: var(--theme-spacing--1); - background-color: var(--theme-color--block); -} diff --git a/website/assets/styles/04-components/breadcrumbs.scss b/website/assets/styles/04-components/breadcrumbs.scss deleted file mode 100644 index b0690ab21..000000000 --- a/website/assets/styles/04-components/breadcrumbs.scss +++ /dev/null @@ -1,29 +0,0 @@ -.c-breadcrumbs { - &__list { - display: flex; - font: var(--theme-font--system); - font-size: var(--theme-type-size--6); - } - - &__link { - display: inline-flex; - align-items: center; - @include on-event { - text-decoration: overline 3px solid var(--theme-color--accent); - outline: none; - .c-breadcrumbs__icon { - color: var(--theme-color--pop); - } - } - } - - &__icon { - height: 1em; - min-width: 6px; - } - - .is-current { - color: var(--theme-color--accent); - font-weight: 900; - } -} diff --git a/website/assets/styles/04-components/card.scss b/website/assets/styles/04-components/card.scss deleted file mode 100644 index c35f56d98..000000000 --- a/website/assets/styles/04-components/card.scss +++ /dev/null @@ -1,31 +0,0 @@ -.c-card { - @include grid-assign(image, date, byline, title); - - display: grid; - grid-template: - "image image image" 100px - ". . ." var(--theme-spacing--1) - ". title ." auto - ". . ." var(--theme-spacing--1) / var(--theme-spacing--1) 1fr var(--theme-spacing--1); - - background-color: var(--theme-color--paper); - box-shadow: 2px 3px 0 var(--theme-color--pop), - 4px 5px 0 var(--theme-color--accent); - height: 100%; - - @include on-event { - transform: translate(0.5px, 1px); - box-shadow: 0px 0px 0 var(--theme-color--pop), - 0px 0px 0 var(--theme-color--accent); - } - - &__image { - background: var(--theme-color--ink); - overflow: hidden; - filter: grayscale(0.4); - transition: filter 10s cubic-bezier(0.175, 0.885, 0.32, 1.275); - @include on-event(false, ".c-card") { - filter: grayscale(0) hue-rotate(360deg); - } - } -} diff --git a/website/assets/styles/04-components/cells.scss b/website/assets/styles/04-components/cells.scss deleted file mode 100644 index 0d1ebcfb4..000000000 --- a/website/assets/styles/04-components/cells.scss +++ /dev/null @@ -1,10 +0,0 @@ -.c-cells { - display: flex; - flex-flow: row wrap; - gap: var(--theme-spacing--gutter); - @include backdrop(); - - &__cell { - flex: 1 0 var(--theme-spacing--container-min); - } -} diff --git a/website/assets/styles/04-components/page-header.scss b/website/assets/styles/04-components/page-header.scss deleted file mode 100644 index f89f24a5d..000000000 --- a/website/assets/styles/04-components/page-header.scss +++ /dev/null @@ -1,78 +0,0 @@ -.c-page-header { - --gap: var(--theme-spacing--gutter); - --arrow: polygon( - 20px 0%, - 20px 20%, - 100% 20%, - 100% 80%, - 20px 80%, - 20px 100%, - 0% 50% - ); - - @include grid-assign( - container, - picture, - title, - summary, - breadcrumbs, - lastmod, - toc, - edit, - action - ); - @include grid-breakout(); - grid-template: - " . ... . " var(--gap) - " . container ." minmax(0, 1fr) - " . ... ." 0 / minmax(var(--gap), 1fr) - calc(var(--theme-spacing--container) - var(--theme-spacing--menu)) minmax(var(--gap), 1fr); - - pointer-events: none; // just make sure we retain the option of breakout hero headers without interfering with the weirdy menu button - - &__container { - pointer-events: all; - display: grid; - grid-template: - ". . . " var(--gap) - "breadcrumbs . edit " min-content - "title . . " min-content - "toc toc toc " auto - "action . . " auto - ". . lastmod " min-content / 1fr var(--gap) minmax(0, 1fr); - } - &__title { - line-height: 1; - text-transform: uppercase; - text-shadow: -2px 1px 0 var(--theme-color--pop); - } - &__lastmod, - &__edit { - background: var(--theme-color--accent); - color: var(--theme-color--contrast-max); - font-size: var(--theme-type-size--6); - padding: calc(var(--theme-spacing--1) / 2); - text-align: right; - } - &__edit { - background: var(--theme-color--ink-fade); - color: var(--theme-color--ink); - clip-path: var(--arrow); - } - - // small tweaks for list view - &--list { - position: sticky; - top: 0; - .c-page-header__container { - position: relative; - } - .c-page-header__toc { - position: absolute; - width: fit-content; - max-width: var(--theme-spacing--container-min); - box-sizing: content-box; - right: 0; - } - } -} diff --git a/website/assets/styles/04-components/skip-link.scss b/website/assets/styles/04-components/skip-link.scss deleted file mode 100644 index b6190d00e..000000000 --- a/website/assets/styles/04-components/skip-link.scss +++ /dev/null @@ -1,6 +0,0 @@ -.c-skip-link { - @include offscreen(hide); - @include on-event { - @include offscreen(show); - } -} diff --git a/website/assets/styles/layout/footer.scss b/website/assets/styles/layout/footer.scss deleted file mode 100644 index cda0d36cf..000000000 --- a/website/assets/styles/layout/footer.scss +++ /dev/null @@ -1,10 +0,0 @@ -.l-footer { - @include grid-assign(github, impressum, mode); - - grid-template: - "...... . ......... ." var(--theme-spacing--6) - "github . impressum mode" minmax(0, 1fr) - "github . ......... mode" var(--theme-spacing--touchtarget) - "...... . ......... ." var(--theme-spacing--gutter) / - var(--theme-spacing--touchtarget) var(--theme-spacing--1) 1fr var(--theme-spacing--touchtarget); -} diff --git a/website/assets/styles/layout/header.scss b/website/assets/styles/layout/header.scss deleted file mode 100644 index 017dc5444..000000000 --- a/website/assets/styles/layout/header.scss +++ /dev/null @@ -1,48 +0,0 @@ -.l-header { - @include grid-assign(nav); - @include pattern(dots, var(--theme-color--pop), null, true, 0.5); - grid-template: - " . ... . " var(--theme-spacing--gutter) - " . nav ." minmax(0, 1fr) - " . ... ." var(--theme-spacing--gutter) / minmax( - var(--theme-spacing--gutter), - 1fr - ) - calc(var(--theme-spacing--container) - var(--theme-spacing--menu)) minmax(var(--theme-spacing--gutter), 1fr); - - &__heading { - font: var(--theme-font--brand); - color: var(--theme-color--brand); - } - &__home { - @include on-event { - color: var(--theme-color--accent); - outline: none; - } - } - - &__icon { - grid-area: icon; - } - - &__action { - display: flex; - flex-flow: column; - justify-content: flex-start; - position: fixed; - right: 0; - top: 0; - height: 100vh; - padding-top: var(--theme-spacing--gutter); - background-color: var(--theme-color--pop); - border-color: var(--theme-color--pop); - &.is-fixed { - min-width: var(--theme-spacing--menu); - width: var(--theme-spacing--menu); - } - @include on-event { - background-color: var(--theme-color--accent); - color: var(--theme-color--contrast-max); - } - } -} diff --git a/website/assets/styles/layout/layout.scss b/website/assets/styles/layout/layout.scss deleted file mode 100644 index 0e7fb2dee..000000000 --- a/website/assets/styles/layout/layout.scss +++ /dev/null @@ -1,13 +0,0 @@ -.l-layout { - @include grid-assign(header, main, footer); - grid-template: - " header header header menu" auto - " ...... main ...... menu" 1fr - " ...... footer ...... menu" auto / - minmax(var(--theme-spacing--gutter), 1fr) - calc(var(--theme-spacing--container) - var(--theme-spacing--menu)) - minmax(var(--theme-spacing--gutter), 1fr) - var(--theme-spacing--menu); - - min-height: 100vh; -} diff --git a/website/assets/styles/layout/main.scss b/website/assets/styles/layout/main.scss deleted file mode 100644 index f0c480747..000000000 --- a/website/assets/styles/layout/main.scss +++ /dev/null @@ -1,5 +0,0 @@ -.l-main { - @include on-event { - outline: none; - } -} diff --git a/website/assets/styles/layout/menu.scss b/website/assets/styles/layout/menu.scss deleted file mode 100644 index 8fc247cc7..000000000 --- a/website/assets/styles/layout/menu.scss +++ /dev/null @@ -1,90 +0,0 @@ -.l-menu { - --gap: var(--theme-spacing--gutter); - @include grid-assign(heading, action, primary, secondary, container); - @include pattern(graph, currentColor, b, false, 0.2); - overflow: hidden; - position: fixed; - top: 0; - right: -100%; - visibility: hidden; - background-color: var(--theme-color--paper); - border-right: 1px solid var(--theme-color--contrast-max); - min-height: calc(100vh - calc(100vh - 100%)); - min-width: var(--theme-spacing--container-min); - max-width: calc(2 * var(--theme-spacing--container-min)); - z-index: 1; - - --box-shadow: var(--theme-color--ink-fade); - box-shadow: -20px -2px 30px var(--box-shadow); - - .is-dark-mode & { - --box-shadow: var(--theme-color--contrast-max); - } - - &.is-active { - visibility: visible; - right: var(--theme-spacing--menu); - outline: none; - animation: slide-menu 0.8s ease-out forwards; - } - - grid-template: "container"; - - &__container { - display: grid; - grid-template: - ". ....... ......... ......... ." var(--gap) - ". heading ......... action ." min-content - ". ....... ......... ......... ." var(--gap) - ". primary primary primary ." 1fr - ". ....... secondary secondary ." var(--theme-spacing--touchtarget) - ". ....... ......... ......... ." var(--gap) / var(--gap) - 1fr 1fr var(--theme-spacing--touchtarget) var(--gap); - align-items: center; - } - - &__link { - text-transform: lowercase; - text-decoration: none; - } - - &__heading { - font: var(--theme-font--brand); - } - &__home { - @include on-event { - outline: 1px dotted; - color: var(--theme-color--accent); - } - } - - &__secondary { - display: flex; - justify-content: flex-end; - } - - &__bg { - grid-area: container; - object-fit: cover; - z-index: -1; - mix-blend-mode: darken; // might remove this, not v performant - @media (prefers-color-scheme: dark) { - mix-blend-mode: overlay; - } - } -} - -@keyframes slide-menu { - 0% { - transform: translateX(100vw); - } - 40% { - transform: translateX(100vw); - } - 50% { - transform: translateX(100vw); - } - 100% { - transform: translateX(0); - } -} diff --git a/website/assets/styles/states/invisible.scss b/website/assets/styles/states/invisible.scss deleted file mode 100644 index 597d33a2e..000000000 --- a/website/assets/styles/states/invisible.scss +++ /dev/null @@ -1,4 +0,0 @@ -// this makes text invisible but accessible to screenreaders, unlike display:none -.is-invisible { - @include screen(hide); -} diff --git a/website/assets/styles/states/none.scss b/website/assets/styles/states/none.scss deleted file mode 100644 index 5da7761dd..000000000 --- a/website/assets/styles/states/none.scss +++ /dev/null @@ -1,17 +0,0 @@ -@use "02-variables/spacing" as *; - -// this removes the node -// see is-visible / is-invisible for most use cases - -.is-none { - &--gt-container { - @media (min-width: $c-max) { - display: none; - } - } - &--lt-container { - @media (max-width: $c-max) { - display: none; - } - } -} diff --git a/website/assets/styles/states/visible.scss b/website/assets/styles/states/visible.scss deleted file mode 100644 index 4d49f89d2..000000000 --- a/website/assets/styles/states/visible.scss +++ /dev/null @@ -1,5 +0,0 @@ -// this makes text invisible but accessible to screenreaders, unlike display:none - -.is-visible { - @include screen(show); -} diff --git a/website/layouts/_default/_markup/render-codeblock-mermaid.html b/website/layouts/_default/_markup/render-codeblock-mermaid.html deleted file mode 100644 index 440f81a13..000000000 --- a/website/layouts/_default/_markup/render-codeblock-mermaid.html +++ /dev/null @@ -1,2 +0,0 @@ -
{{- .Inner | safeHTML }}
-{{ .Page.Store.Set "hasMermaid" true }} diff --git a/website/layouts/_default/baseof.html b/website/layouts/_default/baseof.html deleted file mode 100644 index f0c4a1a50..000000000 --- a/website/layouts/_default/baseof.html +++ /dev/null @@ -1,12 +0,0 @@ -{{- partial "head.html" . -}} - - -
- {{ partialCached "header.html" . }} {{ partialCached "menu.html" . }} -
- {{ block "main" . }} {{ end }} -
- - {{- partialCached "foot.html" . -}} -
- diff --git a/website/layouts/_default/list.html b/website/layouts/_default/list.html deleted file mode 100644 index 701932786..000000000 --- a/website/layouts/_default/list.html +++ /dev/null @@ -1,23 +0,0 @@ -{{ define "main" }} -
- - -
-

{{.Title}}

- - {{ if .Pages }} - - {{ end }} -
-
-{{ with .Content }} -
{{.}}
-{{ end}} {{ partial "cells.html" .}} {{ end}} diff --git a/website/layouts/_default/single.html b/website/layouts/_default/single.html deleted file mode 100644 index 65757db97..000000000 --- a/website/layouts/_default/single.html +++ /dev/null @@ -1,37 +0,0 @@ -{{ define "main" }} - -
-
-
-
- {{ partial "breadcrumbs.html" . }} -
-

- {{.Title}} -

- {{with .Params.showTitle }}{{ else }} {{ if or (eq .Section "projects") - (eq .Section "primers")}} {{$pathAsString := print $.Site.Params.tree - .Path }} {{$changeIndexToReadMe := replace $pathAsString "index.md" - "README.md"}} - Edit on Github - {{ end}} {{ partial "lastmod.html" . }} {{ end}} {{ if and (gt .WordCount - 400 ) (.TableOfContents) }} -
- {{ .TableOfContents }} -
- {{ end }} -
-
- -
{{.Content}}
- - {{ partial "page-footer.html" .}} -
- -{{ end }} diff --git a/website/layouts/partials/breadcrumbs.html b/website/layouts/partials/breadcrumbs.html deleted file mode 100644 index a3692c75d..000000000 --- a/website/layouts/partials/breadcrumbs.html +++ /dev/null @@ -1,31 +0,0 @@ -{{ with .Parent }} - -{{end}} diff --git a/website/layouts/partials/foot.html b/website/layouts/partials/foot.html deleted file mode 100644 index d3a97acae..000000000 --- a/website/layouts/partials/foot.html +++ /dev/null @@ -1,69 +0,0 @@ - - -{{ $scripts := resources.Get "scripts/app.js" | resources.Minify }} {{ partial -"random-bg" .}} - - - -{{ if .Page.Store.Get "hasMermaid" }} - - -{{ end }} diff --git a/website/layouts/partials/head.html b/website/layouts/partials/head.html deleted file mode 100644 index b79b376a5..000000000 --- a/website/layouts/partials/head.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - - - - {{.Site.Title}} - - - - - {{ $sass := resources.Match "styles/**.scss" | resources.Concat - "bundled.css" }} {{ $style := $sass | toCSS | minify | fingerprint "md5" }} - - - - - - - - - - - - - - - - - - diff --git a/website/layouts/partials/header.html b/website/layouts/partials/header.html deleted file mode 100644 index 0bdc1b119..000000000 --- a/website/layouts/partials/header.html +++ /dev/null @@ -1,28 +0,0 @@ -
-
-

- {{.Site.Title}} -

- - -
-
diff --git a/website/layouts/partials/lastmod.html b/website/layouts/partials/lastmod.html deleted file mode 100644 index 1cd5bf70e..000000000 --- a/website/layouts/partials/lastmod.html +++ /dev/null @@ -1,17 +0,0 @@ -{{$p := path.Base (path.Split .Path).Dir }} - -{{$fallBackDate := dict "date" "1970"}} {{$fallBackAuthor := dict "author" -$fallBackDate}} {{$commitObject := slice (dict "commit" $fallBackAuthor )}} - -{{ -$api:="https://api.github.com/repos/CodeYourFuture/immersive-go-course/commits" -}} {{ $url := print $api "?path=" $p }} {{ $commitObject := getJSON $url }} - -{{ range first 1 $commitObject }} -

- .Lastmod - - - -

-{{ end}} diff --git a/website/layouts/partials/menu.html b/website/layouts/partials/menu.html deleted file mode 100644 index f2f9917ae..000000000 --- a/website/layouts/partials/menu.html +++ /dev/null @@ -1,101 +0,0 @@ - diff --git a/website/layouts/partials/page-footer.html b/website/layouts/partials/page-footer.html deleted file mode 100644 index ab72e20e8..000000000 --- a/website/layouts/partials/page-footer.html +++ /dev/null @@ -1,47 +0,0 @@ -{{ if or (eq .Section "primers") (eq .Section "projects")}} - -{{ end }} diff --git a/website/layouts/partials/timeline.html b/website/layouts/partials/timeline.html deleted file mode 100644 index 37456f530..000000000 --- a/website/layouts/partials/timeline.html +++ /dev/null @@ -1,6 +0,0 @@ - -

{{.Title}}

- - diff --git a/website/layouts/shortcodes/contributors.html b/website/layouts/shortcodes/contributors.html deleted file mode 100644 index c2e18bc04..000000000 --- a/website/layouts/shortcodes/contributors.html +++ /dev/null @@ -1,14 +0,0 @@ -{{ $contributors := getJSON -"https://api.github.com/repos/CodeYourFuture/immersive-go-course/contributors"}} - -
    - {{ range sort $contributors ".contributions" "desc"}} -
  1. -

    - {{.login}} -

    - {{.contributions}} - -
    2. - {{ end }} -
diff --git a/website/layouts/shortcodes/details.html b/website/layouts/shortcodes/details.html deleted file mode 100644 index 2ffd470ef..000000000 --- a/website/layouts/shortcodes/details.html +++ /dev/null @@ -1,4 +0,0 @@ -
-

{{$.Params.summary}}

 - {{.Inner | markdownify }} -
diff --git a/website/layouts/versions/list.html b/website/layouts/versions/list.html index c6433d5d6..0a1d04400 100644 --- a/website/layouts/versions/list.html +++ b/website/layouts/versions/list.html @@ -32,7 +32,13 @@

Run {{.Title}}

    {{ range .Pages }}
  1. - {{ partial "timeline.html" . }} {{ if $hasDetails}} + +

    {{.Title}}

    + +     + {{ if $hasDetails}}

    Details

    @@ -47,3 +53,15 @@

    Details

{{ partial "breadcrumbs.html" . }} {{end}} + diff --git a/website/layouts/workbooks/single.html b/website/layouts/workbooks/single.html new file mode 100644 index 000000000..b6b87857d --- /dev/null +++ b/website/layouts/workbooks/single.html @@ -0,0 +1,16 @@ +{{ define "main" }} +
+ {{ partial "page-header.html" . }} {{ with .Content }} +
{{ . }}
+ {{ end }} {{ range $index, $block := .Params.blocks }} +
+ + {{ $block.name }} 🔗 + +
+ {{ partial "block/block.html" (dict "block" $block "Page" $.Page "Site" + $.Site) }} +
+
+
+{{ end }} {{ end}} diff --git a/website/package.json b/website/package.json new file mode 100644 index 000000000..a89361f4f --- /dev/null +++ b/website/package.json @@ -0,0 +1,24 @@ +{ + "name": "curriculum", + "version": "1.0.0", + "description": "The curriculum platform", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1", + "start:dev": "dotenv -e ../.env -- hugo server --environment development", + "build:dev": "hugo mod vendor && dotenv -e ../.env -- hugo --environment development" + }, + "keywords": [], + "author": "", + "license": "ISC", + "bugs": { + "url": "https://github.com/CodeYourFuture/curriculum/issues" + }, + "homepage": "https://github.com/CodeYourFuture/curriculum#readme", + "dependencies": { + "dotenv-cli": "^7.3.0", + "dotenv": "^16.3.1", + "prettier": "^2.8.8", + "prettier-plugin-go-template": "^0.0.13" + } +}