From 97bef9138748114183358110884ab33d28d60148 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yannik=20R=C3=B6del?= Date: Sun, 12 Jun 2022 19:19:30 +0200 Subject: [PATCH 1/4] Scroll the title element in the tab widget into view after switching --- assets/main.js | 20 ++++++++++++++++++++ includes/layouts/base.njk | 2 ++ 2 files changed, 22 insertions(+) create mode 100644 assets/main.js 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..dc67760 100644 --- a/includes/layouts/base.njk +++ b/includes/layouts/base.njk @@ -100,5 +100,7 @@ + + From 7ce08acaeaae97aa8c96e9e7e1055c580d13e648 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yannik=20R=C3=B6del?= Date: Sun, 12 Jun 2022 19:45:17 +0200 Subject: [PATCH 2/4] Add individual base templates for each site --- includes/layouts/base.njk | 113 ++---------------------- includes/layouts/base/angestoepselt.njk | 12 +++ includes/layouts/base/coderdojo.njk | 3 + includes/layouts/base/main.njk | 108 ++++++++++++++++++++++ sites/angestoepselt/_data/site.json | 3 + 5 files changed, 133 insertions(+), 106 deletions(-) create mode 100644 includes/layouts/base/angestoepselt.njk create mode 100644 includes/layouts/base/coderdojo.njk create mode 100644 includes/layouts/base/main.njk create mode 100644 sites/angestoepselt/_data/site.json diff --git a/includes/layouts/base.njk b/includes/layouts/base.njk index dc67760..668d2a6 100644 --- a/includes/layouts/base.njk +++ b/includes/layouts/base.njk @@ -1,106 +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 %} -
- -
-
-
-

- {{ metadata.author.name }} - {% for line in (metadata.author.address or []) %} -
- {{ line }} - {% endfor %} -

-

- {{ metadata.author.email }} -

-
- -
- -
-
-
- - - - +{% 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 %} +
+ +
+
+
+

+ {{ metadata.author.name }} + {% for line in (metadata.author.address or []) %} +
+ {{ line }} + {% endfor %} +

+

+ {{ metadata.author.email }} +

+
+ +
+ +
+
+
+ + + + 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" +} From fd15c34948a3c40f1a9b50c6c35a75bf8694a302 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yannik=20R=C3=B6del?= Date: Sun, 12 Jun 2022 19:45:25 +0200 Subject: [PATCH 3/4] Add site logo animation --- styles/components/_site.scss | 43 ++++++++++++++++++++++++++++++++++++ styles/lib/_motion.scss | 4 +++- 2 files changed, 46 insertions(+), 1 deletion(-) 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); From 6eba9d3c377c72e0ee586c84203d1e21ff721e4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Yannik=20R=C3=B6del?= Date: Sun, 12 Jun 2022 19:47:18 +0200 Subject: [PATCH 4/4] Add margin to pre blocks --- styles/components/_markup.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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; }