From 18dd981930170be1b3db04127eedd9c9ed940b9c Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Sun, 29 Mar 2026 14:40:28 +0200 Subject: [PATCH 1/4] refactor: Replace icon font with SVG icons --- assets/js/darkmode.js | 2 +- assets/sass/content.scss | 2 +- assets/sass/contentNavigation.scss | 2 +- assets/sass/dropdown.scss | 7 ++--- assets/sass/expander.scss | 4 +-- assets/sass/fonts.scss | 35 ++++------------------ assets/sass/navigation.scss | 4 +-- assets/sass/styles.scss | 6 ++-- assets/sass/teaser.scss | 4 +-- hugo.yaml | 2 ++ layouts/_default/rss.xml | 3 +- layouts/partials/icon.html | 3 +- layouts/partials/strip-material-icons.html | 1 - layouts/partials/teaser.html | 2 +- package-lock.json | 18 +++++------ package.json | 2 +- 16 files changed, 35 insertions(+), 62 deletions(-) delete mode 100644 layouts/partials/strip-material-icons.html diff --git a/assets/js/darkmode.js b/assets/js/darkmode.js index 3c8887357..264117459 100644 --- a/assets/js/darkmode.js +++ b/assets/js/darkmode.js @@ -65,7 +65,7 @@ label = button.dataset.switchToAuto; } - const iconElement = button.querySelector(".material-symbols-rounded"); + const iconElement = button.querySelector(".a-icon"); if (iconElement) { iconElement.dataset.icon = icon; } diff --git a/assets/sass/content.scss b/assets/sass/content.scss index 3a313d9be..404403a2c 100644 --- a/assets/sass/content.scss +++ b/assets/sass/content.scss @@ -2,7 +2,7 @@ font-size: 1.3rem; } -.o-last-updated > .material-symbols-rounded::before { +.o-last-updated > .a-icon { font-size: 1.5rem; } diff --git a/assets/sass/contentNavigation.scss b/assets/sass/contentNavigation.scss index 76fcdfc34..1cc01b383 100644 --- a/assets/sass/contentNavigation.scss +++ b/assets/sass/contentNavigation.scss @@ -49,7 +49,7 @@ @include focus-indicator(0.1rem); - > .material-symbols-rounded { + > .a-icon { align-self: flex-start; margin-top: 0.1rem; } diff --git a/assets/sass/dropdown.scss b/assets/sass/dropdown.scss index 0f4bba1ca..bddf5c2c5 100644 --- a/assets/sass/dropdown.scss +++ b/assets/sass/dropdown.scss @@ -39,7 +39,7 @@ color: var(--link-hovered); transition: color 0.3s ease; - & > :not(.material-symbols-rounded) { + & > :not(.a-icon) { text-decoration: underline; } } @@ -49,7 +49,7 @@ display: grid; } - &__button[aria-expanded="true"] &__icon { + &__button[aria-expanded="true"] .o-dropdown__icon .a-icon { transform: rotate(180deg); } @@ -105,8 +105,7 @@ } } - &__icon { - font-size: 0.7rem; + .o-dropdown__icon .a-icon { transition: transform 0.2s; } diff --git a/assets/sass/expander.scss b/assets/sass/expander.scss index c1095336d..1f865b6cc 100644 --- a/assets/sass/expander.scss +++ b/assets/sass/expander.scss @@ -39,7 +39,7 @@ } } - > .material-symbols-rounded { + > .a-icon { transition: transform 0.2s; @media print { @@ -133,7 +133,7 @@ details { } } -details[open] > .o-expander__summary > .material-symbols-rounded { +details[open] > .o-expander__summary > .a-icon { transform: rotate(180deg); } diff --git a/assets/sass/fonts.scss b/assets/sass/fonts.scss index 8b5202314..7fbf7a754 100644 --- a/assets/sass/fonts.scss +++ b/assets/sass/fonts.scss @@ -104,23 +104,6 @@ U+2215, U+FEFF, U+FFFD; } -/* material-symbols-rounded-latin-400-normal */ -@font-face { - font-family: "Material Symbols Rounded"; - font-style: normal; - font-display: swap; - font-weight: 400; - src: - url(@fontsource/material-symbols-rounded/files/material-symbols-rounded-latin-400-normal.woff2) - format("woff2"), - url(@fontsource/material-symbols-rounded/files/material-symbols-rounded-latin-400-normal.woff) - format("woff"); - unicode-range: - U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, - U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, - U+2212, U+2215, U+FEFF, U+FFFD; -} - body, button { font-family: "Roboto", Arial, Helvetica, sans-serif; @@ -128,22 +111,14 @@ button { hyphens: auto; } -.material-symbols-rounded::before { - content: attr(data-icon); - font-family: "Material Symbols Rounded"; - font-weight: normal; - font-style: normal; +.a-icon { display: inline-block; - font-size: 2rem; + width: 1em; + height: 1em; line-height: 1; - text-transform: none; - letter-spacing: normal; - word-wrap: normal; - white-space: nowrap; - direction: ltr; vertical-align: text-bottom; text-decoration: none; - width: 1em; - height: 1em; user-select: none; + background-color: currentColor; + mask: var(--icon-url) no-repeat center / contain; } diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss index 142d13f4a..5b312fdc4 100644 --- a/assets/sass/navigation.scss +++ b/assets/sass/navigation.scss @@ -135,7 +135,7 @@ menu > li > menu { &:hover, &:focus { - :not(.material-symbols-rounded) { + :not(.a-icon) { text-decoration: underline; } color: var(--link-hovered); @@ -150,7 +150,7 @@ menu > li > menu { display: none; } - > .material-symbols-rounded { + > .a-icon { margin-left: 0.8rem; align-self: center; text-decoration: none; diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss index 8dad07a23..cb6f4af6c 100644 --- a/assets/sass/styles.scss +++ b/assets/sass/styles.scss @@ -79,12 +79,12 @@ a, text-decoration: none; color: var(--bs-body-color); - > .material-symbols-rounded { + > .a-icon { display: none; } } - & > .material-symbols-rounded { + & > .a-icon { margin: 0 0.2rem; } } @@ -439,7 +439,7 @@ details > summary { .o-link__mail, .o-link__tel { - & > .material-symbols-rounded { + & > .a-icon { margin-right: 0.4rem; } } diff --git a/assets/sass/teaser.scss b/assets/sass/teaser.scss index 44111eaa6..7428948b1 100644 --- a/assets/sass/teaser.scss +++ b/assets/sass/teaser.scss @@ -23,7 +23,7 @@ @include focus-indicator(0.3rem); - .material-symbols-rounded::before { + .a-icon { font-size: 2.4rem; margin-top: 1rem; } @@ -110,7 +110,7 @@ flex-direction: column; justify-content: space-between; - > .material-symbols-rounded { + > .a-icon { @media print { display: none; } diff --git a/hugo.yaml b/hugo.yaml index fe6b3d5b4..58bb8c078 100644 --- a/hugo.yaml +++ b/hugo.yaml @@ -30,6 +30,8 @@ module: target: "static" - source: "node_modules/@fontsource" target: "static/css/@fontsource" + - source: "node_modules/@material-symbols/svg-700/rounded" + target: "static/icons/material-symbols-rounded" related: includeNewer: true diff --git a/layouts/_default/rss.xml b/layouts/_default/rss.xml index 0e17f9487..028b1bcc9 100644 --- a/layouts/_default/rss.xml +++ b/layouts/_default/rss.xml @@ -10,8 +10,7 @@ {{ .Title }} {{ .Permalink }} - - {{ $cleanedHTML := partial "strip-material-icons" .Summary | transform.XMLEscape | safeHTML}} + {{ $cleanedHTML := .Summary | plainify | transform.XMLEscape | safeHTML }} {{ $cleanedHTML }} {{ .PublishDate.Format "Mon, 02 Jan 2006 15:04:05 -0700" | safeHTML }} diff --git a/layouts/partials/icon.html b/layouts/partials/icon.html index b07f74a2a..077850108 100644 --- a/layouts/partials/icon.html +++ b/layouts/partials/icon.html @@ -1,8 +1,9 @@ {{- /* Needed, otherwise links break: https://github.com/fipguide/fipguide.github.io/issues/116 */ -}} diff --git a/layouts/partials/strip-material-icons.html b/layouts/partials/strip-material-icons.html deleted file mode 100644 index 445937299..000000000 --- a/layouts/partials/strip-material-icons.html +++ /dev/null @@ -1 +0,0 @@ -{{ return replaceRE `]*class="[^"]*\bmaterial-symbols-rounded\b[^"]*"[^>]*>.*?` "" . }} diff --git a/layouts/partials/teaser.html b/layouts/partials/teaser.html index c87dce0f2..b8772fac2 100644 --- a/layouts/partials/teaser.html +++ b/layouts/partials/teaser.html @@ -23,7 +23,7 @@

{{ $page.Title }}

- {{ partial "strip-material-icons" $page.Summary | plainify | truncate 500 }} + {{ $page.Summary | plainify | truncate 500 }}
{{- partial "icon" "arrow_forward" -}} diff --git a/package-lock.json b/package-lock.json index b9ee50061..c9eda717c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,9 +9,9 @@ "version": "1.0.0", "license": "ISC", "dependencies": { - "@fontsource/material-symbols-rounded": "^5.2.33", "@fontsource/roboto": "^5.2.9", "@fontsource/sansita": "^5.2.8", + "@material-symbols/svg-700": "^0.43.0", "@panzoom/panzoom": "^4.6.1", "pagefind": "^1.4.0" }, @@ -20,15 +20,6 @@ "prettier-plugin-go-template": "^0.0.15" } }, - "node_modules/@fontsource/material-symbols-rounded": { - "version": "5.2.33", - "resolved": "https://registry.npmjs.org/@fontsource/material-symbols-rounded/-/material-symbols-rounded-5.2.33.tgz", - "integrity": "sha512-aBrTR+t41AeVoce2+EHeAFdgGWCYvVYHaT8nDuW+AFRr78Nl/AvbHKYgtHdGzim7KNXEo2pLfT2pj6U5/ACsbw==", - "license": "OFL-1.1", - "funding": { - "url": "https://github.com/sponsors/ayuhito" - } - }, "node_modules/@fontsource/roboto": { "version": "5.2.9", "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.2.9.tgz", @@ -47,6 +38,12 @@ "url": "https://github.com/sponsors/ayuhito" } }, + "node_modules/@material-symbols/svg-700": { + "version": "0.43.0", + "resolved": "https://registry.npmjs.org/@material-symbols/svg-700/-/svg-700-0.43.0.tgz", + "integrity": "sha512-apCxQvQ1eZrxvgvr+CbwnPvN6aS0hn9EgGm+vI3bzEMdE1gqZ4Tk8liDuAhEXdFyYVX6CDUzz/zt+6lCufmSVg==", + "license": "Apache-2.0" + }, "node_modules/@pagefind/darwin-arm64": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/@pagefind/darwin-arm64/-/darwin-arm64-1.4.0.tgz", @@ -154,6 +151,7 @@ "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==", "dev": true, "license": "MIT", + "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, diff --git a/package.json b/package.json index de615b9a0..b2be8a192 100644 --- a/package.json +++ b/package.json @@ -17,9 +17,9 @@ "homepage": "https://github.com/fipguide/fipguide.github.io#readme", "description": "", "dependencies": { - "@fontsource/material-symbols-rounded": "^5.2.33", "@fontsource/roboto": "^5.2.9", "@fontsource/sansita": "^5.2.8", + "@material-symbols/svg-700": "^0.43.0", "@panzoom/panzoom": "^4.6.1", "pagefind": "^1.4.0" }, From 0729ca8921e3943f6ae40e91aabeb3e99f1916a5 Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Sun, 29 Mar 2026 15:32:38 +0200 Subject: [PATCH 2/4] fix: Sizing of icons --- assets/sass/contentNavigation.scss | 21 ++++++++++++++------- assets/sass/navigation.scss | 4 ++++ assets/sass/styles.scss | 4 ---- layouts/news/single.html | 6 +++--- 4 files changed, 21 insertions(+), 14 deletions(-) diff --git a/assets/sass/contentNavigation.scss b/assets/sass/contentNavigation.scss index 1cc01b383..a94bbbd56 100644 --- a/assets/sass/contentNavigation.scss +++ b/assets/sass/contentNavigation.scss @@ -33,6 +33,10 @@ @media print { display: none; } + + .a-icon { + font-size: 1.2em; + } } .o-aside__header { @@ -51,7 +55,7 @@ > .a-icon { align-self: flex-start; - margin-top: 0.1rem; + margin-top: 0.3rem; } } @@ -108,19 +112,22 @@ padding-left: 0; } - &-date { - padding-left: 2.5rem; + &__date { + margin-left: 2.5rem; + position: relative; + top: -0.2rem; } p { margin-bottom: 0; } -} -.o-related__item figure { - border-radius: var(--border-radius-s); + &__item { + figure { + border-radius: var(--border-radius-s); + } + } } - @media (max-width: #{$breakpoint-lg}) { .o-aside { position: fixed; diff --git a/assets/sass/navigation.scss b/assets/sass/navigation.scss index 5b312fdc4..7e595eb21 100644 --- a/assets/sass/navigation.scss +++ b/assets/sass/navigation.scss @@ -233,6 +233,10 @@ menu > li > menu { &:hover { color: var(--link-hovered); } + + > .a-icon { + font-size: 1.15em; + } } body:has(.o-header__nav--open) { diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss index cb6f4af6c..ad202255a 100644 --- a/assets/sass/styles.scss +++ b/assets/sass/styles.scss @@ -205,10 +205,6 @@ figure { } } -.o-related__date { - margin-left: 2.4rem; -} - .o-list__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); diff --git a/layouts/news/single.html b/layouts/news/single.html index 14a61cb4e..46bbf9396 100644 --- a/layouts/news/single.html +++ b/layouts/news/single.html @@ -15,9 +15,9 @@

{{ T "news.further" }}

) }} {{ if eq .Page.Type "news" }} - {{ .Date | time.Format ":date_long" }} + + {{ .Date | time.Format ":date_long" }} + {{ end }} {{ end }} From 0475d95c865cd5adc6f26aa9946aec51c9ba7a30 Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Sun, 29 Mar 2026 15:39:12 +0200 Subject: [PATCH 3/4] fix: Make search icons work again --- assets/sass/search.scss | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/assets/sass/search.scss b/assets/sass/search.scss index 4c0997aa5..d86cb95d6 100644 --- a/assets/sass/search.scss +++ b/assets/sass/search.scss @@ -17,15 +17,19 @@ $search-z-index-focus: 12; position: relative; &::before { - content: "search"; + content: ""; + display: block; position: absolute; - top: 23px; + top: 22px; left: 20px; z-index: $search-z-index + 1; - font-family: "Material Symbols Rounded"; + width: 2.4rem; + height: 2.4rem; + background-color: currentColor; + mask: url("/icons/material-symbols-rounded/search.svg") no-repeat + center / contain; opacity: 0.7; pointer-events: none; - line-height: 1; } } @@ -148,8 +152,13 @@ $search-z-index-focus: 12; } .pagefind-ui__result-link::before { - content: "subdirectory_arrow_right"; - font-family: "Material Symbols Rounded"; + content: ""; + display: block; + width: 1.8rem; + height: 1.8rem; + background-color: currentColor; + mask: url("/icons/material-symbols-rounded/subdirectory_arrow_right.svg") + no-repeat center / contain; position: absolute; left: -2.4rem; } From 879c125589b42cdb88eb735f0afe143cc0405920 Mon Sep 17 00:00:00 2001 From: MoritzWeber0 Date: Sun, 29 Mar 2026 16:00:02 +0200 Subject: [PATCH 4/4] feat: Add more space for startpage teaser --- assets/sass/startpage.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/assets/sass/startpage.scss b/assets/sass/startpage.scss index d45f28edd..2c38cf6fd 100644 --- a/assets/sass/startpage.scss +++ b/assets/sass/startpage.scss @@ -45,6 +45,10 @@ gap: 2rem; margin-bottom: 2rem; + @media (max-width: #{$breakpoint-xl}) { + grid-template-columns: 1fr 1fr 1fr 1fr 2fr; + } + @media (max-width: #{$breakpoint-lg}) { display: flex; gap: 1rem;