diff --git a/assets/main.js b/assets/main.js new file mode 100644 index 0000000..a492f21 --- /dev/null +++ b/assets/main.js @@ -0,0 +1,20 @@ +for (const tabLinkElement of document.querySelectorAll( + 'h2 + .tabs-widget > a[href]' +)) { + const titleElement = tabLinkElement.parentElement.previousElementSibling; + tabLinkElement.addEventListener('click', (event) => { + event.preventDefault(); + const hash = tabLinkElement.getAttribute('href'); + if (history.replaceState) { + // This is a weird hack to make sure that the :target selectors actually + // get updated: + // https://github.com/whatwg/html/issues/639#issuecomment-252716663 + history.replaceState(null, '', hash); + history.pushState(null, '', hash); + history.back(); + titleElement.scrollIntoView(true); + } else { + location.hash = hash; + } + }); +} diff --git a/includes/layouts/base.njk b/includes/layouts/base.njk index 926680e..668d2a6 100644 --- a/includes/layouts/base.njk +++ b/includes/layouts/base.njk @@ -1,104 +1,7 @@ - - - - - {{ title or metadata.title }} - - - {# We only bother with preloading the variable font here because chances are - that if a browser doesn't support variable fonts it won't support - preloading either: - https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#browser_compatibility - #} - - {% for name in (extraStylesheets or []) %} - - {% endfor %} - {% block headStart %}{% endblock %} - - - - - - - - - - - - {% for name in (extraStylesheets or []) %} - - {% endfor %} - - {% block headEnd %}{% endblock %} - - -
- - -
- Menü - -
- - -
- -
- {% block content %} - {{ content | safe }} - {% endblock %} -
- - - - +{% if site and site.id == "angestoepselt" %} + {% extends "layouts/base/angestoepselt.njk" %} +{% elseif site and site.id == "coderdojo" %} + {% extends "layouts/base/coderdojo.njk" %} +{% else %} + {% extends "layouts/base/main.njk" %} +{% endif %} diff --git a/includes/layouts/base/angestoepselt.njk b/includes/layouts/base/angestoepselt.njk new file mode 100644 index 0000000..171fa3b --- /dev/null +++ b/includes/layouts/base/angestoepselt.njk @@ -0,0 +1,12 @@ +{% extends "layouts/base/main.njk" %} + +{% block sitelogo %} + + Angestöpselt +{% endblock %} diff --git a/includes/layouts/base/coderdojo.njk b/includes/layouts/base/coderdojo.njk new file mode 100644 index 0000000..97cc09b --- /dev/null +++ b/includes/layouts/base/coderdojo.njk @@ -0,0 +1,3 @@ +{% extends "layouts/base/main.njk" %} + +{% block htmltag %}data-coderdojo="true"{% block %} diff --git a/includes/layouts/base/main.njk b/includes/layouts/base/main.njk new file mode 100644 index 0000000..d317d41 --- /dev/null +++ b/includes/layouts/base/main.njk @@ -0,0 +1,108 @@ + + + + + {{ title or metadata.title }} + + + {# We only bother with preloading the variable font here because chances are + that if a browser doesn't support variable fonts it won't support + preloading either: + https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#browser_compatibility + #} + + {% for name in (extraStylesheets or []) %} + + {% endfor %} + {% block headStart %}{% endblock %} + + + + + + + + + + + + {% for name in (extraStylesheets or []) %} + + {% endfor %} + + {% block headEnd %}{% endblock %} + + +
+ + +
+ Menü + +
+ + +
+ +
+ {% block content %} + {{ content | safe }} + {% endblock %} +
+ + + + + + diff --git a/sites/angestoepselt/_data/site.json b/sites/angestoepselt/_data/site.json new file mode 100644 index 0000000..fd1a22a --- /dev/null +++ b/sites/angestoepselt/_data/site.json @@ -0,0 +1,3 @@ +{ + "id": "angestoepselt" +} diff --git a/styles/components/_markup.scss b/styles/components/_markup.scss index 0dfc997..f691f48 100644 --- a/styles/components/_markup.scss +++ b/styles/components/_markup.scss @@ -57,7 +57,8 @@ h3 { @extend %subheading; } -p { +p, +pre { @extend %content-gutter; } diff --git a/styles/components/_site.scss b/styles/components/_site.scss index ff4aa44..e71624c 100644 --- a/styles/components/_site.scss +++ b/styles/components/_site.scss @@ -1,5 +1,6 @@ @use '../lib/colors'; @use '../lib/layout'; +@use '../lib/motion'; @use '../lib/typography'; @mixin header-item { @@ -12,6 +13,48 @@ .site-logo { margin: 0 layout.$large-gap; text-transform: lowercase; + + > .angestoepselt-logo { + height: 1em; + vertical-align: middle; + + fill: none; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 4px; + stroke: colors.$gray-900; + stroke-miterlimit: 10; + + .plug { + fill: colors.$teal-500; + } + + + span { + display: inline-block; + } + } + + &:hover > .angestoepselt-logo { + @keyframes angestoepselt-logo-hover { + 0% { + transform: none; + } + 50% { + transform: translateX(0.6rem); + } + 100% { + transform: translateX(-0.6rem); + } + } + + animation: angestoepselt-logo-hover motion.$prominent forwards; + + + span { + transform-origin: 100% 50%; + transition: transform #{0.5 * motion.$prominent-duration} motion.$prominent-timing #{0.5 * motion.$prominent-duration}; + transform: scale(1.1); + } + } } // The navigation is present twice on the site: once in the header and once in diff --git a/styles/lib/_motion.scss b/styles/lib/_motion.scss index e638f80..fa117f0 100644 --- a/styles/lib/_motion.scss +++ b/styles/lib/_motion.scss @@ -1,4 +1,6 @@ $subtle: 0.1s cubic-bezier(0.56, 0.03, 0.35, 0.9); $gentle: 0.2s cubic-bezier(1, 0.11, 0.41, 0.69); -$prominent: 0.7s cubic-bezier(0.45, 0.16, 0.38, 0.7); +$prominent-duration: 0.7s; +$prominent-timing: cubic-bezier(0.45, 0.16, 0.38, 0.7); +$prominent: $prominent-duration $prominent-timing; $background: 8s cubic-bezier(0.45, 0.16, 0.38, 0.7);