From 79e9051db6f40bb1b4e720e5d975e9f812378d87 Mon Sep 17 00:00:00 2001
From: Lyn Fugmann <lyn.fugmann@ifsr.de>
Date: Fri, 27 Sep 2024 15:35:51 +0200
Subject: [PATCH 1/2] override icon shortcode to make the SVGs accessible
---
eleventy.config.js | 16 ++++++++++++++++
1 file changed, 16 insertions(+)
diff --git a/eleventy.config.js b/eleventy.config.js
index c01a892..271fd0b 100644
--- a/eleventy.config.js
+++ b/eleventy.config.js
@@ -19,6 +19,22 @@ module.exports = function(eleventyConfig) {
{ name: "solid", path: `${fontawesomePath}/solid` },
{ name: "brands", path: `${fontawesomePath}/brands` },
],
+ icon: {
+ shortcode: "rawIcon",
+ },
+ });
+
+ // override icon shortcode to make the SVGs accessible
+ eleventyConfig.addAsyncShortcode("icon", async function(input, attrs) {
+ if (!attrs || !("title" in attrs)) {
+ return eleventyConfig.nunjucksAsyncShortcodes.rawIcon(input, attrs);
+ }
+
+ const { title, ...newAttrs } = attrs;
+ newAttrs.role = "img";
+ const svgStr = await eleventyConfig.nunjucksAsyncShortcodes.rawIcon(input, newAttrs);
+ const match = svgStr.match(/(<svg.*?>)(.*$)/s);
+ return match[1] + "<title>" + title + "</title>" + match[2];
});
// process the logo files
From e376bc138987b2bcc89c706412218d6ef53a036e Mon Sep 17 00:00:00 2001
From: Lyn Fugmann <lyn.fugmann@ifsr.de>
Date: Fri, 27 Sep 2024 15:36:08 +0200
Subject: [PATCH 2/2] program styles and icons
---
_includes/header.css | 2 +-
_includes/page.css | 20 +++++++++++++++++++-
_includes/program.css | 29 +++++++++++++++++++++++++++++
_includes/program.njk | 4 +++-
4 files changed, 52 insertions(+), 3 deletions(-)
diff --git a/_includes/header.css b/_includes/header.css
index 2cdff53..a9ee6c6 100644
--- a/_includes/header.css
+++ b/_includes/header.css
@@ -90,7 +90,7 @@ header {
border-radius: 3rem;
}
.nav-item-stream:hover {
- color: var(--color-livestream-active);
+ color: var(--color-button-active);
background-color: var(--color-primary);
}
}
diff --git a/_includes/page.css b/_includes/page.css
index e0a0252..1523d32 100644
--- a/_includes/page.css
+++ b/_includes/page.css
@@ -69,6 +69,24 @@ p {
line-height: 1.8;
}
+a.btn {
+ display: block;
+ width: fit-content;
+ margin: 1em 0;
+ border: 1px solid var(--color-primary);
+ border-radius: 25px;
+ padding: .75rem 1.6rem;
+ text-decoration: none;
+ color: var(--color-primary);
+ transition: .2s ease-out;
+ transition-property: color, background-color;
+}
+
+a.btn:hover {
+ background-color: var(--color-primary);
+ color: var(--color-button-active);
+}
+
@media (width < 640px) {
h1 {
font-size: 1.8em;
@@ -90,7 +108,7 @@ p {
--page-width: 1280px;
--color-text: #495057;
--color-primary: {{ ese.color }};
- --color-livestream-active: #fff;
+ --color-button-active: #fff;
--color-background-page: #fefefe;
--color-background-header: rgba(255,255,255,.92);
}
diff --git a/_includes/program.css b/_includes/program.css
index ca515a0..6264666 100644
--- a/_includes/program.css
+++ b/_includes/program.css
@@ -13,6 +13,11 @@
font-weight: 400;
}
+.timeslot h3 .icon {
+ vertical-align: -0.125em;
+ margin-right: 2px;
+}
+
.timeslot-container {
position: relative;
padding-top: 40px;
@@ -32,6 +37,30 @@
font-size: 26px;
}
+.timeslot .icon {
+ height: 1.1em;
+ vertical-align: text-bottom;
+ fill: currentColor;
+}
+
+.annotation {
+ background-color: rgba(255, 139, 0, 0.06);
+ border: 1px solid #ff8b00;
+ border-radius: 3px;
+ width: fit-content;
+ padding: .5em 1em;
+ font-weight: 500;
+}
+
+.annotation .icon {
+ color: #ff8b00;
+ margin-right: .5em;
+}
+
+.location .icon {
+ margin-right: .2em;
+}
+
@media (width < 640px) {
.timeslot {
margin-bottom: 2.5rem;
diff --git a/_includes/program.njk b/_includes/program.njk
index 829dcae..5149e03 100644
--- a/_includes/program.njk
+++ b/_includes/program.njk
@@ -22,7 +22,7 @@
<li class="timeslot">
<div class="timeslot-container">
<h3 id="{{date}}_{{loop.index}}">
- {{ "🔴 " if event.livestream -}}
+ {% if event.livestream %}{% icon "solid:video", title="Livestream" %}{% endif %}
{{ getLocalized(event.title) }}
</h3>
@@ -38,12 +38,14 @@
{% if event.annotation %}
<p class="annotation">
+ {% icon "solid:exclamation", title=("Notice" if lang == "en" else "Hinweis") %}
{{ getLocalized(event.annotation) }}
</p>
{% endif %}
{% if event.location %}
<p class="location">
+ {% icon "solid:location-dot", title=("Location" if lang == "en" else "Veranstaltungsort") %}
{{ getLocalized(event.location) }}
</p>
{% endif %}