From f7e58040fa93ebc42ac30766fc8e195e9a81d60d Mon Sep 17 00:00:00 2001 From: sefaria Date: Sat, 2 May 2026 13:03:51 +0200 Subject: [PATCH 01/56] feat: add menu html code --- index.html | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 54 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index f08c36a..dbed98f 100644 --- a/index.html +++ b/index.html @@ -25,7 +25,59 @@ -
+
+ + + + + +
+ + + + + +
@@ -69,7 +121,7 @@
- + From 43e9fbc5aa92a2e6f72d45bbd446004a7479bd31 Mon Sep 17 00:00:00 2001 From: sefaria Date: Sat, 2 May 2026 13:13:36 +0200 Subject: [PATCH 02/56] add app.js to subpages --- legal-notice.html | 2 +- privacy.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/legal-notice.html b/legal-notice.html index 7dfaf0c..92cad26 100644 --- a/legal-notice.html +++ b/legal-notice.html @@ -109,7 +109,7 @@
- + diff --git a/privacy.html b/privacy.html index 1aa8457..f6c1b47 100644 --- a/privacy.html +++ b/privacy.html @@ -142,7 +142,7 @@ - + From 13ccaa8658fd217b50b4703b5a2d12f3cba9722b Mon Sep 17 00:00:00 2001 From: sefaria Date: Fri, 8 May 2026 11:05:04 +0200 Subject: [PATCH 03/56] Changing license type adding license to README --- LICENSE.txt | 3 ++- README.md | 17 ++++------------- 2 files changed, 6 insertions(+), 14 deletions(-) diff --git a/LICENSE.txt b/LICENSE.txt index 294e91d..f844e62 100644 --- a/LICENSE.txt +++ b/LICENSE.txt @@ -1,4 +1,5 @@ Copyright (c) HTML5 Boilerplate +Copyright (c) 2026 Lars Winter Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in @@ -16,4 +17,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. +SOFTWARE. \ No newline at end of file diff --git a/README.md b/README.md index 9f55d7e..fc8ea62 100644 --- a/README.md +++ b/README.md @@ -2,19 +2,10 @@ This is the portfolio website and blog of Lars Winter. -## Table of Contents -- [Installation](#installation) -- [Usage](#usage) -- [Structure](#structure) +## License -## Installation -```bash -git clone -cd project -npm install # if applicable -``` +Code in this repository is licensed under the MIT License. See the `LICENSE` file. -## Usage -Quick start example. +## Asset notice -## Structure \ No newline at end of file +All images, screenshots, logos, trademarks, and project visuals in this repository are excluded from the code license unless explicitly stated otherwise. Such materials are the property of their respective copyright owners and may not be reused, redistributed, or modified without permission. \ No newline at end of file From 8dd4e034ee9f9b6ff36054b92cf165bfb5ce485e Mon Sep 17 00:00:00 2001 From: sefaria Date: Wed, 13 May 2026 12:20:08 +0200 Subject: [PATCH 04/56] change div to section --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index f6519e4..ad86eb9 100644 --- a/index.html +++ b/index.html @@ -87,11 +87,11 @@ -
+

As usual, my portfolio is a work in progress and currently only available on request. Please feel free to contact me via email for work collaborations and other requests. You can also find me on one of those fancy social networks, like Mastodon, LinkedIn (if really necessary), Instagram, and Twitter.

-
+
From 90a0f397907c25dcdecb325e01bb38eb00823d09 Mon Sep 17 00:00:00 2001 From: sefaria Date: Wed, 13 May 2026 15:48:54 +0200 Subject: [PATCH 05/56] Adding skipLink for better screen reader mode --- css/style.css | 14 ++++++++++++++ index.html | 4 ++++ 2 files changed, 18 insertions(+) diff --git a/css/style.css b/css/style.css index a78d350..6d61bfb 100644 --- a/css/style.css +++ b/css/style.css @@ -384,6 +384,20 @@ button:visited, .link-button:visited { Layout styles ======================= */ +#skipLink a { + display: block; + position: absolute; + left: -999px; + top: -999px; +} + +#skipLink a:focus { + left: 0; + top: 0; + padding: var(--spacing-2); + background: var(--color-background-content-box); +} + main, footer { max-width: 900px; border: none; diff --git a/index.html b/index.html index ad86eb9..75075ed 100644 --- a/index.html +++ b/index.html @@ -25,6 +25,10 @@ + +
From aa1f270c59a3644f1ccb7b062c9adff036f7b340 Mon Sep 17 00:00:00 2001 From: sefaria Date: Wed, 13 May 2026 15:59:19 +0200 Subject: [PATCH 06/56] change border radius button --- css/style.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 6d61bfb..a47757d 100644 --- a/css/style.css +++ b/css/style.css @@ -350,12 +350,11 @@ button, .link-button { line-height: var(--line-normal); letter-spacing: 0.025rem; padding: 0.875rem 1rem; - min-height: 44px; background: var(--color-primary-button); font-size: var(--text-button); color: var(--color-text-button); border: none; - border-radius: var(--radius-lg); + border-radius: var(--radius-xxl); box-shadow: var(--shadow-button); text-decoration: none; } From ec54a1f3a22c4ad283e72df21e46ed05c1d6fa1e Mon Sep 17 00:00:00 2001 From: sefaria Date: Thu, 14 May 2026 18:25:26 +0200 Subject: [PATCH 07/56] add skiplink to all sites --- 404.html | 6 ++++++ legal-notice.html | 6 ++++++ privacy.html | 5 +++++ 3 files changed, 17 insertions(+) diff --git a/404.html b/404.html index 260cc4c..7ebda92 100644 --- a/404.html +++ b/404.html @@ -54,6 +54,12 @@ + + + +

Page Not Found

Sorry, but the page you were trying to view does not exist.

diff --git a/legal-notice.html b/legal-notice.html index 606a3fa..8dd6f99 100644 --- a/legal-notice.html +++ b/legal-notice.html @@ -24,6 +24,12 @@ + + + +
diff --git a/privacy.html b/privacy.html index cfba1fd..1a18c16 100644 --- a/privacy.html +++ b/privacy.html @@ -24,6 +24,11 @@ + + +
From 2b131f2b1fa3c9dd4df62a455f7be038f8f4ca74 Mon Sep 17 00:00:00 2001 From: sefaria Date: Fri, 22 May 2026 22:00:08 +0200 Subject: [PATCH 08/56] Adding menu css, styling logo --- css/style.css | 202 +++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 18 ++--- 2 files changed, 207 insertions(+), 13 deletions(-) diff --git a/css/style.css b/css/style.css index 10852c8..0281f64 100644 --- a/css/style.css +++ b/css/style.css @@ -346,7 +346,7 @@ a:visited { text-decoration-thickness: 0.175rem; } -button, .link-button { +button, .link-button, .logo { min-height: 44px; font-family: "MD IO", monospace; font-style: normal; @@ -361,20 +361,39 @@ button, .link-button { border-radius: var(--radius-xxl); box-shadow: var(--shadow-button); text-decoration: none; + display: inline-flex; + align-items: center; + justify-content: center; } -button:hover, .link-button:hover { +.logo { + padding: 1rem; + aspect-ratio: 1/1; +} + +.logo svg { + height: 1.75em; + width: 1.75em; + flex: none; + display: block; +} + +.logo svg path { + fill: currentColor; +} + +button:hover, .link-button:hover, .logo:hover { background: var(--color-primary-button-hover); color: var(--color-text-button); } -button:active, .link-button:active { +button:active, .link-button:active, .logo:active { background: var(--color-primary-button-active); box-shadow: var(--shadow-button-active); color: var(--color-text-button-active); } -button:visited, .link-button:visited { +button:visited, .link-button:visited, .logo:visited { color: var(--color-text-button); text-decoration: none; } @@ -401,6 +420,181 @@ button:visited, .link-button:visited { background: var(--color-background-content-box); } +.site-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 1rem 1.25rem; + border-bottom: 1px solid var(--border); + position: sticky; + top: 0; + background: rgb(255 255 255 / 0.88); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + z-index: 100; +} + +.desktop-nav ul, +.mobile-menu ul { + list-style: none; + margin: 0; + padding: 0; +} + +.desktop-nav ul { + display: flex; + gap: 1.25rem; +} + +.desktop-nav a, +.mobile-menu a { + color: inherit; + text-decoration: none; +} + +.menu-toggle, +.menu-close { + width: 44px; + height: 44px; + border: 1px solid var(--border); + border-radius: 0.75rem; + background: #fff; + color: inherit; + cursor: pointer; +} + +.menu-toggle { + display: none; + position: relative; +} + +.menu-toggle span { + position: absolute; + left: 50%; + width: 20px; + height: 2px; + background: currentColor; + border-radius: 999px; + transform-origin: center; + transition: transform 0.25s ease, opacity 0.25s ease; +} + +.menu-toggle span:nth-child(1) { + top: 14px; + transform: translateX(-50%); +} + +.menu-toggle span:nth-child(2) { + top: 21px; + transform: translateX(-50%); +} + +.menu-toggle span:nth-child(3) { + top: 28px; + transform: translateX(-50%); +} + +.menu-toggle.is-open span:nth-child(1) { + top: 21px; + transform: translateX(-50%) rotate(45deg); +} + +.menu-toggle.is-open span:nth-child(2) { + opacity: 0; +} + +.menu-toggle.is-open span:nth-child(3) { + top: 21px; + transform: translateX(-50%) rotate(-45deg); +} + +.menu-overlay { + position: fixed; + inset: 0; + background: var(--overlay); + backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); + opacity: 0; + pointer-events: none; + transition: opacity 0.25s ease; + z-index: 200; +} + +.mobile-menu { + position: fixed; + inset: auto 1rem 1rem 1rem; + width: auto; + max-width: 24rem; + margin-inline: auto; + background: var(--panel); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border: 1px solid rgb(255 255 255 / 0.45); + border-radius: 1rem; + box-shadow: 0 20px 50px rgb(0 0 0 / 0.16); + padding: 1rem; + opacity: 0; + transform: translateY(1rem) scale(0.98); + pointer-events: none; + transition: opacity 0.25s ease, transform 0.25s ease; + z-index: 300; +} + +.mobile-menu__header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 1rem; +} + +.mobile-menu ul { + display: grid; + gap: 0.5rem; +} + +.mobile-menu a { + display: block; + padding: 0.95rem 1rem; + border-radius: 0.75rem; + background: rgb(255 255 255 / 0.56); +} + +/* .page-content { + padding: 3rem 1.25rem; +} */ + +.menu-open .menu-overlay { + opacity: 1; + pointer-events: auto; +} + +.menu-open .mobile-menu { + opacity: 1; + transform: translateY(0) scale(1); + pointer-events: auto; +} + +@media (max-width: 679px) { + .desktop-nav { + display: none; + } + + .menu-toggle { + display: inline-block; + } +} + +@media (min-width: 680px) { + .menu-overlay, + .mobile-menu { + display: none; + } +} + + + + main, footer { max-width: 900px; border: none; diff --git a/index.html b/index.html index 7ad9b70..e9dde2c 100644 --- a/index.html +++ b/index.html @@ -30,14 +30,15 @@
- + @@ -73,10 +74,9 @@ From 362fa4ef5846d5de0e4672ba4983ad853daac91b Mon Sep 17 00:00:00 2001 From: sefaria Date: Sat, 23 May 2026 00:17:02 +0200 Subject: [PATCH 09/56] create left aligned menu styling --- css/style.css | 21 +++++++++++++-------- index.html | 24 +++++++++++++----------- 2 files changed, 26 insertions(+), 19 deletions(-) diff --git a/css/style.css b/css/style.css index 0281f64..df47dc9 100644 --- a/css/style.css +++ b/css/style.css @@ -361,9 +361,6 @@ button, .link-button, .logo { border-radius: var(--radius-xxl); box-shadow: var(--shadow-button); text-decoration: none; - display: inline-flex; - align-items: center; - justify-content: center; } .logo { @@ -425,16 +422,24 @@ button:visited, .link-button:visited, .logo:visited { align-items: center; justify-content: space-between; gap: 1rem; - padding: 1rem 1.25rem; - border-bottom: 1px solid var(--border); + padding: ; position: sticky; top: 0; + max-width: 900px; background: rgb(255 255 255 / 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 100; } +.site-header .menu-bar { + max-width: 900px; + display: flex; + align-items: center; + justify-content: flex-start; + gap: 1rem; +} + .desktop-nav ul, .mobile-menu ul { list-style: none; @@ -444,7 +449,7 @@ button:visited, .link-button:visited, .logo:visited { .desktop-nav ul { display: flex; - gap: 1.25rem; + gap: 1rem; } .desktop-nav a, @@ -575,7 +580,7 @@ button:visited, .link-button:visited, .logo:visited { pointer-events: auto; } -@media (max-width: 679px) { +@media (max-width: 579px) { .desktop-nav { display: none; } @@ -585,7 +590,7 @@ button:visited, .link-button:visited, .logo:visited { } } -@media (min-width: 680px) { +@media (min-width: 580px) { .menu-overlay, .mobile-menu { display: none; diff --git a/index.html b/index.html index e9dde2c..43fa5bb 100644 --- a/index.html +++ b/index.html @@ -30,17 +30,19 @@
- - - +
+ + + +
+
From 4e287c0e857d08efd062424e209939ba2d278b7b Mon Sep 17 00:00:00 2001 From: sefaria Date: Sat, 23 May 2026 15:35:42 +0200 Subject: [PATCH 13/56] change menu styling --- css/style.css | 9 +++++++++ index.html | 28 ++++++++++++++-------------- 2 files changed, 23 insertions(+), 14 deletions(-) diff --git a/css/style.css b/css/style.css index aeab855..c23f1b8 100644 --- a/css/style.css +++ b/css/style.css @@ -448,6 +448,7 @@ button:visited, .link-button:visited, .logo:visited { align-items: center; justify-content: center; gap: 1rem; + min-height: 44px; } /* .desktop-nav { @@ -455,6 +456,14 @@ button:visited, .link-button:visited, .logo:visited { align-self: stretch; } */ +.desktop-nav { + flex: 1; + background: var(--color-neutral-200); + border-radius: var(--radius-xxl); + box-shadow: var(--shadow-button); + padding: var(--spacing-1); +} + .desktop-nav ul, .mobile-menu ul { list-style: none; diff --git a/index.html b/index.html index 77e941a..3b4695b 100644 --- a/index.html +++ b/index.html @@ -43,21 +43,21 @@
  • About
    • - + - +
    From 9a92ed4489e0d08dce97ba5bcff79dcada03ff14 Mon Sep 17 00:00:00 2001 From: sefaria Date: Sun, 24 May 2026 00:32:41 +0200 Subject: [PATCH 14/56] menu styling and active page state --- css/style.css | 62 ++++++++++++++++++++++++++++++++------------------- index.html | 12 +++++----- 2 files changed, 45 insertions(+), 29 deletions(-) diff --git a/css/style.css b/css/style.css index c23f1b8..b249ea3 100644 --- a/css/style.css +++ b/css/style.css @@ -154,8 +154,14 @@ --color-primary-button-hover: var(--color-orange-500); --color-primary-button-active: var(--color-orange-red-600); + --color-menu-button: none; + --color-menu-button-hover: light-dark(var(--color-neutral-400), var(--color-neutral-600)); + --color-text-button: var(--color-neutral-900); - --color-text-button-active: var(--color-neutral-100); + --color-text-button-hover: var(--color-neutral-100); + + --color-menu-text-button: light-dark(var(--color-neutral-800), var(--color-neutral-200)); + --color-menu-text-button-hover: light-dark(var(--color-neutral-900), var(--color-neutral-100)); --shadow-box: var(--shadow-light); @@ -346,7 +352,7 @@ a:visited { text-decoration-thickness: 0.175rem; } -button, .link-button, .logo { +button, .link-button, .menu-button, .logo { appearance: none; -webkit-appearance: none; display: inline-flex; @@ -359,15 +365,24 @@ button, .link-button, .logo { line-height: var(--line-normal); letter-spacing: 0.025rem; padding: 0.875rem 1rem; - background: var(--color-primary-button); font-size: var(--text-button); - color: var(--color-text-button); border: none; border-radius: var(--radius-xxl); - box-shadow: var(--shadow-button); text-decoration: none; } +button, .link-button, .logo, .desktop-nav a[aria-current="page"], +.mobile-menu a[aria-current="page"] { + background: var(--color-primary-button); + color: var(--color-text-button); + box-shadow: var(--shadow-button); +} + +.menu-button { + background: var(--color-menu-button); + color: var(--color-menu-text-button); +} + .logo { padding: 1rem; aspect-ratio: 1/1; @@ -384,18 +399,23 @@ button, .link-button, .logo { fill: currentColor; } -button:hover, .link-button:hover, .logo:hover { +button:hover, .link-button:hover, .logo:hover, .desktop-nav a[aria-current="page"]:hover, .mobile-menu a[aria-current="page"]:hover { background: var(--color-primary-button-hover); color: var(--color-text-button); } -button:active, .link-button:active, .logo:active { +.menu-button:hover { + background: var(--color-menu-button-hover); + color: var(--color-menu-text-button-hover); +} + +button:active, .link-button:active, .logo:active, .desktop-nav a[aria-current="page"]:active, .mobile-menu a[aria-current="page"]:active { background: var(--color-primary-button-active); box-shadow: var(--shadow-button-active); color: var(--color-text-button-active); } -button:visited, .link-button:visited, .logo:visited { +button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current="page"]:hover, .mobile-menu a[aria-current="page"]:hover { color: var(--color-text-button); text-decoration: none; } @@ -438,9 +458,9 @@ button:visited, .link-button:visited, .logo:visited { align-items: center; justify-content: space-between; gap: 1rem; - background: rgb(255 255 255 / 0.88); + /* background: rgb(255 255 255 / 0.88); backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); + -webkit-backdrop-filter: blur(10px); */ } .menu-bar .menu-left { @@ -458,10 +478,11 @@ button:visited, .link-button:visited, .logo:visited { .desktop-nav { flex: 1; - background: var(--color-neutral-200); + background: light-dark(var(--color-neutral-200), var(--color-neutral-800)); border-radius: var(--radius-xxl); box-shadow: var(--shadow-button); - padding: var(--spacing-1); + padding: var(--spacing-2); + height: 100%; } .desktop-nav ul, @@ -473,21 +494,16 @@ button:visited, .link-button:visited, .logo:visited { .desktop-nav ul { display: flex; - gap: 1rem; + gap: var(--spacing-2); } -.desktop-nav ul li { +/* .desktop-nav ul li { margin: 0; -} +} */ -.desktop-nav ul li a { - align-self: stretch; -} - -.desktop-nav a, -.mobile-menu a { - color: inherit; - text-decoration: none; +.desktop-nav a[aria-current="page"], +.mobile-menu a[aria-current="page"] { + } .menu-toggle, diff --git a/index.html b/index.html index 3b4695b..56d8fda 100644 --- a/index.html +++ b/index.html @@ -38,9 +38,9 @@ @@ -78,9 +78,9 @@ From 992233f4cbe259fdf9da4825eeb4903a65256418 Mon Sep 17 00:00:00 2001 From: sefaria Date: Mon, 25 May 2026 00:23:45 +0200 Subject: [PATCH 15/56] Fixing desktop menu appereance --- css/style.css | 52 +++++++++++++++++++++++++++------------------------ 1 file changed, 28 insertions(+), 24 deletions(-) diff --git a/css/style.css b/css/style.css index b249ea3..6de6a62 100644 --- a/css/style.css +++ b/css/style.css @@ -209,8 +209,7 @@ h3, h4, h5, h6, -p, -li { +p { scroll-margin-top: 80px; width: clamp(min(100%, 40ch), 50ch, min(100%, 60ch)); } @@ -415,7 +414,7 @@ button:active, .link-button:active, .logo:active, .desktop-nav a[aria-current="p color: var(--color-text-button-active); } -button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current="page"]:hover, .mobile-menu a[aria-current="page"]:hover { +button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current="page"]:visited, .mobile-menu a[aria-current="page"]:visited { color: var(--color-text-button); text-decoration: none; } @@ -465,41 +464,46 @@ button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current .menu-bar .menu-left { display: flex; - align-items: center; - justify-content: center; - gap: 1rem; - min-height: 44px; + align-items: stretch; + gap: var(--spacing-4); } -/* .desktop-nav { - height: 100%; - align-self: stretch; -} */ - .desktop-nav { - flex: 1; + flex: 1 1 auto; + display: flex; + align-self: stretch; background: light-dark(var(--color-neutral-200), var(--color-neutral-800)); border-radius: var(--radius-xxl); box-shadow: var(--shadow-button); - padding: var(--spacing-2); - height: 100%; -} - -.desktop-nav ul, -.mobile-menu ul { - list-style: none; - margin: 0; - padding: 0; } .desktop-nav ul { display: flex; + align-items: stretch; + width: 100%; + margin: 0; + padding: var(--spacing-2); + list-style: none; gap: var(--spacing-2); } -/* .desktop-nav ul li { +.desktop-nav li { + flex: 1 1 0; + display: flex; + align-items: stretch; margin: 0; -} */ + padding: 0; + list-style: none; +} + +.desktop-nav .menu-button { + flex: 1 1 auto; + display: flex; + align-items: center; + justify-content: center; + width: 100%; + white-space: nowrap; +} .desktop-nav a[aria-current="page"], .mobile-menu a[aria-current="page"] { From 3b5d826ce028f3077d845942b6768e2244b71796 Mon Sep 17 00:00:00 2001 From: sefaria Date: Mon, 25 May 2026 00:27:40 +0200 Subject: [PATCH 16/56] creating about page for menu testing --- about.html | 138 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 2 +- 2 files changed, 139 insertions(+), 1 deletion(-) create mode 100644 about.html diff --git a/about.html b/about.html new file mode 100644 index 0000000..c01cc41 --- /dev/null +++ b/about.html @@ -0,0 +1,138 @@ + + + + + + + About – Lars Winter + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    + + + +
    + + +
    +
    + + + + + +
    + + + +
    +

    + About text +

    +
    + +
    +

    + As usual, my portfolio is a work in progress and currently only available on request. Please feel free to contact me via email for work collaborations and other requests. You can also find me on one of those fancy social networks, like Mastodon, LinkedIn (if really necessary), Instagram, and Twitter. +

    +
    + +
    + +
    + + + +
    + + + + + + + + + + diff --git a/index.html b/index.html index 56d8fda..a110e70 100644 --- a/index.html +++ b/index.html @@ -39,7 +39,7 @@ From be60619353dbe5600ac5b9800554cf43d172bd38 Mon Sep 17 00:00:00 2001 From: sefaria Date: Mon, 25 May 2026 00:30:02 +0200 Subject: [PATCH 17/56] changing nav shadow from button to box --- css/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 6de6a62..4610d90 100644 --- a/css/style.css +++ b/css/style.css @@ -474,7 +474,7 @@ button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current align-self: stretch; background: light-dark(var(--color-neutral-200), var(--color-neutral-800)); border-radius: var(--radius-xxl); - box-shadow: var(--shadow-button); + box-shadow: var(--shadow-box); } .desktop-nav ul { From 9365d7c6f9b7b02ab81c2cf1f74d6696c4c387d5 Mon Sep 17 00:00:00 2001 From: sefaria Date: Mon, 25 May 2026 20:22:02 +0200 Subject: [PATCH 18/56] adding icon secondary nav with buttons --- css/style.css | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++- index.html | 15 +++++++++++++- 2 files changed, 69 insertions(+), 2 deletions(-) diff --git a/css/style.css b/css/style.css index 4610d90..5383732 100644 --- a/css/style.css +++ b/css/style.css @@ -351,7 +351,7 @@ a:visited { text-decoration-thickness: 0.175rem; } -button, .link-button, .menu-button, .logo { +button, .link-button, .menu-button, .menu-button-secondary, .logo { appearance: none; -webkit-appearance: none; display: inline-flex; @@ -382,6 +382,12 @@ button, .link-button, .logo, .desktop-nav a[aria-current="page"], color: var(--color-menu-text-button); } +.menu-button-secondary { + background: var(--color-secondary); + color: var(--color-text-button); + box-shadow: var(--shadow-button); +} + .logo { padding: 1rem; aspect-ratio: 1/1; @@ -426,6 +432,19 @@ button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current /* ======================= Layout styles ======================= */ + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + clip: rect(0, 0, 0, 0); + clip-path: inset(50%); + white-space: nowrap; + border: 0; +} #skipLink a { display: block; @@ -510,6 +529,41 @@ button:visited, .link-button:visited, .logo:visited, .desktop-nav a[aria-current } +.desktop-nav-secondary ul { + display: flex; + align-items: stretch; + gap: var(--spacing-4); + margin: 0; + padding: 0; + list-style: none; +} + +.desktop-nav-secondary li { + display: flex; + margin: 0; + padding: 0; +} + +.desktop-nav-secondary svg { + color: var(--color-secondary); + height: 1.5em; + width: 1.5em; + flex: none; + display: block; +} + +.desktop-nav-secondary svg:hover { + color: var(--color-secondary-hover); +} + +.desktop-nav-secondary svg:active { + color: var(--color-secondary-active); +} + +.desktop-nav-secondary svg path { + fill: currentColor; +} + .menu-toggle, .menu-close { width: 44px; diff --git a/index.html b/index.html index a110e70..22f4cb6 100644 --- a/index.html +++ b/index.html @@ -33,7 +33,8 @@
    + + +
    • + @@ -144,7 +148,7 @@ - + diff --git a/js/app.js b/js/app.js index 2aa8b89..9bb9ef2 100644 --- a/js/app.js +++ b/js/app.js @@ -1,3 +1,5 @@ +// Menu system + const body = document.body; const menuToggle = document.getElementById('menuToggle'); const menuClose = document.getElementById('menuClose'); @@ -54,4 +56,76 @@ if (window.innerWidth >= 768 && body.classList.contains('menu-open')) { closeMenu(); } - }); \ No newline at end of file + }); + + // light-dark toggle + +const STORAGE_KEY = 'theme-preference'; + const root = document.documentElement; + const mq = window.matchMedia('(prefers-color-scheme: dark)'); + + function getSystemTheme() { + return mq.matches ? 'dark' : 'light'; + } + + function getSavedTheme() { + try { + return localStorage.getItem(STORAGE_KEY) || 'system'; + } catch { + return 'system'; + } + } + + function setSavedTheme(value) { + try { + localStorage.setItem(STORAGE_KEY, value); + } catch {} + } + + function applyTheme(theme = getSavedTheme()) { + root.style.colorScheme = theme === 'system' ? 'light dark' : theme; + } + + function getNextTheme() { + return getSavedTheme() === 'system' + ? (getSystemTheme() === 'dark' ? 'light' : 'dark') + : 'system'; + } + + function updateButton() { + const btn = document.getElementById('theme-toggle'); + if (!btn) return; + + const theme = getSavedTheme(); + // btn.textContent = + // theme === 'system' + // ? `Use ${getSystemTheme() === 'dark' ? 'light' : 'dark'} theme` + // : 'Use browser/OS theme'; + } + + function toggleTheme() { + setSavedTheme(getNextTheme()); + applyTheme(); + updateButton(); + } + + function initThemeToggle() { + applyTheme(); + updateButton(); + + const btn = document.getElementById('theme-toggle'); + if (btn) btn.addEventListener('click', toggleTheme); + + mq.addEventListener('change', () => { + if (getSavedTheme() === 'system') { + applyTheme('system'); + updateButton(); + } + }); + } + + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initThemeToggle); + } else { + initThemeToggle(); + } \ No newline at end of file diff --git a/legal-notice.html b/legal-notice.html index de16791..a4c2664 100644 --- a/legal-notice.html +++ b/legal-notice.html @@ -21,6 +21,9 @@ + + + @@ -116,7 +119,7 @@ - + diff --git a/privacy.html b/privacy.html index e7d9421..61d5de1 100644 --- a/privacy.html +++ b/privacy.html @@ -21,6 +21,9 @@ + + + @@ -149,7 +152,7 @@ - + From 48de33f495ca184cd6543511c8e9d926dd389e0c Mon Sep 17 00:00:00 2001 From: sefaria Date: Tue, 26 May 2026 23:33:19 +0200 Subject: [PATCH 25/56] commenting out js in body --- 404.html | 2 +- legal-notice.html | 2 +- privacy.html | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/404.html b/404.html index f209c70..9a0aed3 100644 --- a/404.html +++ b/404.html @@ -58,7 +58,7 @@ - + diff --git a/legal-notice.html b/legal-notice.html index a4c2664..6a1e64f 100644 --- a/legal-notice.html +++ b/legal-notice.html @@ -119,7 +119,7 @@ - + diff --git a/privacy.html b/privacy.html index 61d5de1..be595f9 100644 --- a/privacy.html +++ b/privacy.html @@ -152,7 +152,7 @@ - + From 430602caa3065d2bca462e3ed59db643454ec38c Mon Sep 17 00:00:00 2001 From: sefaria Date: Tue, 26 May 2026 23:37:28 +0200 Subject: [PATCH 26/56] js code for a11y toggle --- js/app.js | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/js/app.js b/js/app.js index 9bb9ef2..dd22d27 100644 --- a/js/app.js +++ b/js/app.js @@ -58,9 +58,31 @@ } }); - // light-dark toggle +// accessibility toggle -const STORAGE_KEY = 'theme-preference'; + const STORAGE_KEY = 'extra-css-enabled'; + + function applyOverrideState(enabled) { + const link = document.getElementById('a11y-css'); + const button = document.getElementById('a11y-toggle'); + if (!link) return; + + link.disabled = !enabled; + button?.setAttribute('aria-pressed', String(enabled)); + } + + const enabled = localStorage.getItem(STORAGE_KEY) === 'true'; + applyOverrideState(enabled); + + document.getElementById('a11y-toggle')?.addEventListener('click', () => { + const nextState = localStorage.getItem(STORAGE_KEY) !== 'true'; + localStorage.setItem(STORAGE_KEY, String(nextState)); + applyOverrideState(nextState); + }); + +// light-dark toggle + + const STORAGE_KEY = 'theme-preference'; const root = document.documentElement; const mq = window.matchMedia('(prefers-color-scheme: dark)'); From 13632637a9bf0fc313b11a5f132b9c446e7a2e52 Mon Sep 17 00:00:00 2001 From: sefaria Date: Tue, 26 May 2026 23:46:05 +0200 Subject: [PATCH 27/56] functional a11y toggle and css --- 404.html | 1 + about.html | 1 + css/a11y.css | 3 +++ js/app.js | 10 ++++++++-- legal-notice.html | 1 + privacy.html | 1 + 6 files changed, 15 insertions(+), 2 deletions(-) create mode 100644 css/a11y.css diff --git a/404.html b/404.html index 9a0aed3..12746e6 100644 --- a/404.html +++ b/404.html @@ -6,6 +6,7 @@ Page Not Found + diff --git a/about.html b/about.html index 8300570..72eadfe 100644 --- a/about.html +++ b/about.html @@ -6,6 +6,7 @@ About – Lars Winter + diff --git a/css/a11y.css b/css/a11y.css new file mode 100644 index 0000000..a247d75 --- /dev/null +++ b/css/a11y.css @@ -0,0 +1,3 @@ +body { + background: red; +} \ No newline at end of file diff --git a/js/app.js b/js/app.js index dd22d27..6b59143 100644 --- a/js/app.js +++ b/js/app.js @@ -58,8 +58,10 @@ } }); -// accessibility toggle +// accessibility toggle + +{ const STORAGE_KEY = 'extra-css-enabled'; function applyOverrideState(enabled) { @@ -79,9 +81,12 @@ localStorage.setItem(STORAGE_KEY, String(nextState)); applyOverrideState(nextState); }); +} + // light-dark toggle +{ const STORAGE_KEY = 'theme-preference'; const root = document.documentElement; const mq = window.matchMedia('(prefers-color-scheme: dark)'); @@ -150,4 +155,5 @@ document.addEventListener('DOMContentLoaded', initThemeToggle); } else { initThemeToggle(); - } \ No newline at end of file + } +} \ No newline at end of file diff --git a/legal-notice.html b/legal-notice.html index 6a1e64f..40d011d 100644 --- a/legal-notice.html +++ b/legal-notice.html @@ -6,6 +6,7 @@ Lars Winter + diff --git a/privacy.html b/privacy.html index be595f9..dcf6175 100644 --- a/privacy.html +++ b/privacy.html @@ -6,6 +6,7 @@ Lars Winter + From de4698e6fd7c5ca505396fe0b899d63b99c05bf4 Mon Sep 17 00:00:00 2001 From: sefaria Date: Wed, 27 May 2026 09:04:45 +0200 Subject: [PATCH 28/56] a11y styles, background gradient for header --- css/a11y.css | 9 ++++++--- css/style.css | 12 +++++++++--- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/css/a11y.css b/css/a11y.css index a247d75..8a427b2 100644 --- a/css/a11y.css +++ b/css/a11y.css @@ -1,3 +1,6 @@ -body { - background: red; -} \ No newline at end of file +*, a, span { + line-height: 1.5; + letter-spacing: 0.12em; + word-spacing: 0.16em; +} + diff --git a/css/style.css b/css/style.css index 6b09662..294fd3b 100644 --- a/css/style.css +++ b/css/style.css @@ -481,6 +481,8 @@ button:visited, .button-primary:visited, .logo:visited { background: var(--color-background-content-box); } +/* Site header */ + .site-header { display: flex; align-items: center; @@ -488,11 +490,13 @@ button:visited, .button-primary:visited, .logo:visited { position: sticky; top: 0; z-index: 100; + background: linear-gradient(180deg, var(--color-neutral-900) 80%, rgba(115, 115, 115, 0.00) 100%); + /* backdrop-filter: blur(6px); */ } .site-header .menu-bar { width: 900px; - padding: var(--spacing-5) var(--spacing-6) 0 var(--spacing-5); + padding: var(--spacing-5) var(--spacing-6) var(--spacing-4) var(--spacing-5); display: flex; align-items: center; justify-content: space-between; @@ -739,14 +743,14 @@ button:visited, .button-primary:visited, .logo:visited { } - +/* Maint content */ main, footer { max-width: 900px; border: none; margin-left:auto; margin-right:auto; - padding: var(--spacing-4) var(--spacing-6); + padding: 0 var(--spacing-6) var(--spacing-4) var(--spacing-6); display: flex; flex-direction: column; align-items: center; @@ -886,6 +890,8 @@ footer a:visited { color: var(--color-neutral-900); } +/* Footer */ + .footer-content { display: flex; flex-direction: row; From 710702b4ed87abdc0e1c781e57a3d16cbf8bf208 Mon Sep 17 00:00:00 2001 From: sefaria Date: Wed, 27 May 2026 09:15:00 +0200 Subject: [PATCH 29/56] add menu to all pages --- 404.html | 69 ++++++++++++++++++++++++++++++++++++++++++++ about.html | 21 +++++++++++--- css/a11y.css | 13 ++++++++- legal-notice.html | 72 ++++++++++++++++++++++++++++++++++++++++++++-- privacy.html | 73 +++++++++++++++++++++++++++++++++++++++++++++-- 5 files changed, 237 insertions(+), 11 deletions(-) diff --git a/404.html b/404.html index 12746e6..74a724a 100644 --- a/404.html +++ b/404.html @@ -51,6 +51,75 @@ Skip to content
    +
    +
    +
    + + + +
    + + + + +
    +
    + + + + +

    4💀4

    diff --git a/about.html b/about.html index 72eadfe..df8294b 100644 --- a/about.html +++ b/about.html @@ -37,7 +37,8 @@
    + +
    +
    +
    +
    + + + +
    + + + + +
    +
    + + + +
    - ←Home - - +

    English Deutsch diff --git a/privacy.html b/privacy.html index dcf6175..9778ba4 100644 --- a/privacy.html +++ b/privacy.html @@ -32,14 +32,81 @@

    + +
    +
    +
    + + + +
    + + + + +
    +
    + + + +
    - ←Home - - +

    English Deutsch From 069e5346f1d2a93df3f4e59ffff70e50cb46b7a3 Mon Sep 17 00:00:00 2001 From: sefaria Date: Wed, 27 May 2026 09:27:39 +0200 Subject: [PATCH 30/56] adding blur to site-header, fixing mobile padding --- css/style.css | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/css/style.css b/css/style.css index 294fd3b..8c73dbb 100644 --- a/css/style.css +++ b/css/style.css @@ -490,8 +490,8 @@ button:visited, .button-primary:visited, .logo:visited { position: sticky; top: 0; z-index: 100; - background: linear-gradient(180deg, var(--color-neutral-900) 80%, rgba(115, 115, 115, 0.00) 100%); - /* backdrop-filter: blur(6px); */ + background: linear-gradient(180deg, var(--color-neutral-900) 15%, rgba(115, 115, 115, 0.00) 100%); + backdrop-filter: blur(6px); } .site-header .menu-bar { @@ -1023,7 +1023,7 @@ footer a:visited { @media screen and (max-width:768px) { main { - padding: var(--spacing-4) var(--spacing-5); + padding: 0 var(--spacing-5) var(--spacing-4) var(--spacing-5); } .footer-content { flex-direction: column; @@ -1053,8 +1053,10 @@ footer a:visited { @media screen and (max-width:375px) { main { - padding: var(--spacing-4); + padding: 0 var(--spacing-4) var(--spacing-4) var(--spacing-4); } + .site-header .menu-bar { + padding: var(--spacing-5) var(--spacing-4) var(--spacing-4) var(--spacing-4); } @media print, From b7b2861ed18858979280bc547fb8745fe931a4fb Mon Sep 17 00:00:00 2001 From: sefaria Date: Wed, 27 May 2026 09:33:01 +0200 Subject: [PATCH 31/56] deleting double styles for visually-hidden --- css/style.css | 48 ++++++++++++++++++------------------------------ 1 file changed, 18 insertions(+), 30 deletions(-) diff --git a/css/style.css b/css/style.css index 8c73dbb..2606ca2 100644 --- a/css/style.css +++ b/css/style.css @@ -453,33 +453,6 @@ button:visited, .button-primary:visited, .logo:visited { /* ======================= Layout styles ======================= */ - -.visually-hidden { - position: absolute; - width: 1px; - height: 1px; - margin: -1px; - padding: 0; - overflow: hidden; - clip: rect(0, 0, 0, 0); - clip-path: inset(50%); - white-space: nowrap; - border: 0; -} - -#skipLink a { - display: block; - position: absolute; - left: -999px; - top: -999px; -} - -#skipLink a:focus { - left: 0; - top: 0; - padding: var(--spacing-2); - background: var(--color-background-content-box); -} /* Site header */ @@ -501,9 +474,6 @@ button:visited, .button-primary:visited, .logo:visited { align-items: center; justify-content: space-between; gap: 1rem; - /* background: rgb(255 255 255 / 0.88); - backdrop-filter: blur(10px); - -webkit-backdrop-filter: blur(10px); */ } .menu-bar .menu-left { @@ -938,6 +908,24 @@ footer a:visited { Helper classes ======================= */ +/* + * Adding skipLink styling for screen readers + */ + +#skipLink a { + display: block; + position: absolute; + left: -999px; + top: -999px; +} + +#skipLink a:focus { + left: 0; + top: 0; + padding: var(--spacing-2); + background: var(--color-background-content-box); +} + /* * Hide visually and from screen readers */ From 6bd94c8e19a9ca1ee0eeae8eca5cb8dc70869780 Mon Sep 17 00:00:00 2001 From: sefaria Date: Wed, 27 May 2026 09:39:45 +0200 Subject: [PATCH 32/56] a11y: more paragraph spacing --- css/a11y.css | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/css/a11y.css b/css/a11y.css index f6d65d5..0b5d4e8 100644 --- a/css/a11y.css +++ b/css/a11y.css @@ -1,17 +1,21 @@ *, a, span, li { - line-height: 1.5; + line-height: var(--line-loose); letter-spacing: 0.12em; word-spacing: 0.16em; } a { - line-height: 1.5; + line-height: var(--line-loose); letter-spacing: 0.12em; word-spacing: 0.16em; } +p, ul, ol, li { + margin: 1.6em 0 3.2em 0; +} + button, .button-primary, .button-secondary, .menu-button, .logo { - line-height: 1.5; + line-height: var(--line-loose); letter-spacing: 0.12em; word-spacing: 0.16em; } \ No newline at end of file From c22c747e4f425f468e35b8d8bd3ff514ac2ae0bb Mon Sep 17 00:00:00 2001 From: sefaria Date: Wed, 27 May 2026 09:45:58 +0200 Subject: [PATCH 33/56] a11y: underline on hover/active links and buttons --- css/a11y.css | 51 ++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 50 insertions(+), 1 deletion(-) diff --git a/css/a11y.css b/css/a11y.css index 0b5d4e8..5d89da5 100644 --- a/css/a11y.css +++ b/css/a11y.css @@ -18,4 +18,53 @@ button, .button-primary, .button-secondary, .menu-button, .logo { line-height: var(--line-loose); letter-spacing: 0.12em; word-spacing: 0.16em; -} \ No newline at end of file + text-decoration: underline; + text-underline-offset: 0.175rem; + text-decoration-thickness: 0.075rem; + transition: 0.2s; +} + +button:hover, .button-primary:hover, .button-secondary:hover, .logo:hover { + text-decoration: underline; + text-underline-offset: 0.175rem; + text-decoration-thickness: 0.075rem; + transition: 0.2s; +} + +button:active, .button-primary:active, .button-secondary:active, .logo:active { + text-decoration: underline; + text-underline-offset: 0.175rem; + text-decoration-thickness: 0.075rem; + transition: 0.2s; +} + +.menu-button:hover, +.desktop-nav a[aria-current="page"]:hover, +.mobile-menu a[aria-current="page"]:hover { + text-decoration: underline; + text-underline-offset: 0.175rem; + text-decoration-thickness: 0.075rem; + transition: 0.2s; +} + +.menu-button:active, +.desktop-nav a[aria-current="page"]:active, +.mobile-menu a[aria-current="page"]:active, +.desktop-nav a[aria-current="page"], +.mobile-menu a[aria-current="page"] { + text-decoration: underline; + text-underline-offset: 0.175rem; + text-decoration-thickness: 0.075rem; + transition: 0.2s; +} + + +.menu-button:active, +.desktop-nav a[aria-current="page"]:active, +.mobile-menu a[aria-current="page"]:active { + text-decoration: underline; + text-underline-offset: 0.175rem; + text-decoration-thickness: 0.075rem; + transition: 0.2s; +} + From 0f34535ba4b5bc5efdc26b2a7f82c028a0af8c9a Mon Sep 17 00:00:00 2001 From: sefaria Date: Wed, 27 May 2026 09:58:09 +0200 Subject: [PATCH 34/56] fix header background blur in light theme --- css/a11y.css | 1 - css/style.css | 5 ++++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/css/a11y.css b/css/a11y.css index 5d89da5..40a4dc8 100644 --- a/css/a11y.css +++ b/css/a11y.css @@ -58,7 +58,6 @@ button:active, .button-primary:active, .button-secondary:active, .logo:active { transition: 0.2s; } - .menu-button:active, .desktop-nav a[aria-current="page"]:active, .mobile-menu a[aria-current="page"]:active { diff --git a/css/style.css b/css/style.css index 2606ca2..fdd4d72 100644 --- a/css/style.css +++ b/css/style.css @@ -463,7 +463,10 @@ button:visited, .button-primary:visited, .logo:visited { position: sticky; top: 0; z-index: 100; - background: linear-gradient(180deg, var(--color-neutral-900) 15%, rgba(115, 115, 115, 0.00) 100%); + background: light-dark( + linear-gradient(180deg, var(--color-neutral-100) 15%, rgba(247,247,247,0) 100%), + linear-gradient(180deg, var(--color-neutral-900) 15%, rgba(18,18,18,0) 100%) + ); backdrop-filter: blur(6px); } From ce85432804657cf77f8ec063ebc5c12140c2938c Mon Sep 17 00:00:00 2001 From: sefaria Date: Wed, 27 May 2026 11:24:20 +0200 Subject: [PATCH 35/56] implementing css round() for all font-sizes --- css/style.css | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/css/style.css b/css/style.css index fdd4d72..c5dcb0d 100644 --- a/css/style.css +++ b/css/style.css @@ -94,6 +94,8 @@ --text-h5: clamp(1.25rem, 1.15rem + 0.25vw, 1.5rem); --text-h6: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem); + --round-interval: 2px; + --text-body: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem); --text-small: 0.875rem; --text-button: clamp(1.25rem, 1.15rem + 0.25vw, 1.5rem); @@ -305,27 +307,27 @@ h1, h2, h3, h4, h5, h6 { } h1, .size-h1 { - font-size: var(--text-h1); + font-size: round(down, var(--text-h1), var(--round-interval)); } h2, .size-h2 { - font-size: var(--text-h2); + font-size: round(down, var(--text-h2), var(--round-interval)); } h3, .size-h3 { - font-size: var(--text-h3); + font-size: round(down, var(--text-h3), var(--round-interval)); } h4, .size-h4 { - font-size: var(--text-h4); + font-size: round(down, var(--text-h4), var(--round-interval)); } h5, .size-h5 { - font-size: var(--text-h5); + font-size: round(down, var(--text-h5), var(--round-interval)); } h6, .size-h6 { - font-size: var(--text-h6); + font-size: round(down, var(--text-h6), var(--round-interval)); } p, ul, ol, li { @@ -333,7 +335,7 @@ p, ul, ol, li { font-style: normal; font-weight: 400; font-feature-settings: "ss01" 1, "ss02" 1; - font-size: var(--text-body); + font-size: round(down, var(--text-body), var(--round-interval)); line-height: var(--line-relaxed); margin: var(--spacing-3) 0 var(--spacing-6) 0; text-align: left; @@ -370,7 +372,7 @@ button, .button-primary, .button-secondary, .menu-button, .logo { line-height: var(--line-normal); letter-spacing: 0.025rem; padding: 0.875rem 1rem; - font-size: var(--text-button); + font-size: round(down, var(--text-button), var(--round-interval)); border: none; border-radius: var(--radius-xxl); text-decoration: none; @@ -746,7 +748,7 @@ footer { font-family: "MD IO", monospace; font-style: normal; font-weight: 400; - font-size: var(--text-small); + font-size: round(down, var(--text-small), var(--round-interval)); line-height: var(--line-relaxed); color: var(--color-text-secondary); } From f4718451a8573fe6d0e6ddedd347505ef4407e4b Mon Sep 17 00:00:00 2001 From: sefaria Date: Wed, 27 May 2026 13:16:40 +0200 Subject: [PATCH 36/56] set mobile menu toggle to button design --- css/style.css | 43 ++++--------------------------------------- index.html | 4 +--- 2 files changed, 5 insertions(+), 42 deletions(-) diff --git a/css/style.css b/css/style.css index c5dcb0d..f7614f8 100644 --- a/css/style.css +++ b/css/style.css @@ -377,6 +377,7 @@ button, .button-primary, .button-secondary, .menu-button, .logo { border-radius: var(--radius-xxl); text-decoration: none; transition: transform 0.2s ease; + cursor: pointer; } button, .button-primary, .logo { @@ -548,7 +549,6 @@ button:visited, .button-primary:visited, .logo:visited { color: var(--color-text-button-seconary-active); } - .menu-button:active, .desktop-nav a[aria-current="page"]:active, .mobile-menu a[aria-current="page"]:active { @@ -580,60 +580,25 @@ button:visited, .button-primary:visited, .logo:visited { .menu-toggle, .menu-close { - width: 44px; + /* width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 0.75rem; background: #fff; color: inherit; - cursor: pointer; + cursor: pointer; */ } .menu-toggle { display: none; position: relative; -} - -.menu-toggle span { - position: absolute; - left: 50%; - width: 20px; - height: 2px; - background: currentColor; - border-radius: 999px; - transform-origin: center; transition: transform 0.25s ease, opacity 0.25s ease; } -.menu-toggle span:nth-child(1) { - top: 14px; - transform: translateX(-50%); -} - -.menu-toggle span:nth-child(2) { - top: 21px; - transform: translateX(-50%); -} - -.menu-toggle span:nth-child(3) { - top: 28px; - transform: translateX(-50%); -} - -.menu-toggle.is-open span:nth-child(1) { - top: 21px; - transform: translateX(-50%) rotate(45deg); -} - -.menu-toggle.is-open span:nth-child(2) { +.menu-toggle.is-open { opacity: 0; } -.menu-toggle.is-open span:nth-child(3) { - top: 21px; - transform: translateX(-50%) rotate(-45deg); -} - .menu-overlay { position: fixed; inset: 0; diff --git a/index.html b/index.html index 4743188..392eb25 100644 --- a/index.html +++ b/index.html @@ -71,9 +71,7 @@ aria-haspopup="true" aria-label="Open menu" > - - - + Menu From 48f6410a7600640ff46008d1fd6f44605627246a Mon Sep 17 00:00:00 2001 From: sefaria Date: Wed, 27 May 2026 13:31:33 +0200 Subject: [PATCH 37/56] new menu-bar styling, merge buttons and toggle right --- css/style.css | 18 ++++++++++++++---- index.html | 4 +++- 2 files changed, 17 insertions(+), 5 deletions(-) diff --git a/css/style.css b/css/style.css index f7614f8..4d3e709 100644 --- a/css/style.css +++ b/css/style.css @@ -473,16 +473,16 @@ button:visited, .button-primary:visited, .logo:visited { backdrop-filter: blur(6px); } -.site-header .menu-bar { +.menu-bar { width: 900px; padding: var(--spacing-5) var(--spacing-6) var(--spacing-4) var(--spacing-5); display: flex; align-items: center; justify-content: space-between; - gap: 1rem; + gap: var(--spacing-4); } -.menu-bar .menu-left { +.menu-left, .menu-right { display: flex; align-items: stretch; gap: var(--spacing-4); @@ -558,7 +558,7 @@ button:visited, .button-primary:visited, .logo:visited { .desktop-nav-secondary ul { display: flex; align-items: stretch; - gap: var(--spacing-3); + gap: var(--spacing-4); margin: 0; padding: 0; list-style: none; @@ -1015,6 +1015,16 @@ footer a:visited { } .site-header .menu-bar { padding: var(--spacing-5) var(--spacing-4) var(--spacing-4) var(--spacing-4); + } + .menu-left, .menu-right { + gap: var(--spacing-3); + } + .desktop-nav-secondary ul { + gap: var(--spacing-3); + } + .menu-bar { + gap: var(--spacing-3); + } } @media print, diff --git a/index.html b/index.html index 392eb25..cad9bcc 100644 --- a/index.html +++ b/index.html @@ -50,6 +50,7 @@ +

    @@ -87,7 +89,7 @@
    Menu
    From 703670c93261bca26a1c0b549707473990576e13 Mon Sep 17 00:00:00 2001 From: sefaria Date: Wed, 27 May 2026 13:34:37 +0200 Subject: [PATCH 38/56] removing old unused layout styles --- css/style.css | 48 ------------------------------------------------ 1 file changed, 48 deletions(-) diff --git a/css/style.css b/css/style.css index 4d3e709..b9b16df 100644 --- a/css/style.css +++ b/css/style.css @@ -578,17 +578,6 @@ button:visited, .button-primary:visited, .logo:visited { display: block; } -.menu-toggle, -.menu-close { - /* width: 44px; - height: 44px; - border: 1px solid var(--border); - border-radius: 0.75rem; - background: #fff; - color: inherit; - cursor: pointer; */ -} - .menu-toggle { display: none; position: relative; @@ -844,36 +833,6 @@ footer a:visited { column-gap: var(--spacing-4); } -/* .footer-fade { - position: fixed; - left: 0; - right: 0; - bottom: 0; - height: 320px; - background: linear-gradient( - to bottom, - hsla(0, 0%, 6%, 0) 0%, - hsla(0, 0%, 6%, 0.1) 13.6%, - hsla(0, 0%, 6%, 0.199) 24.8%, - hsla(0, 0%, 6%, 0.296) 33.8%, - hsla(0, 0%, 6%, 0.391) 41%, - hsla(0, 0%, 6%, 0.481) 46.8%, - hsla(0, 0%, 6%, 0.568) 51.5%, - hsla(0, 0%, 6%, 0.649) 55.4%, - hsla(0, 0%, 6%, 0.724) 58.8%, - hsla(0, 0%, 6%, 0.792) 62.2%, - hsla(0, 0%, 6%, 0.852) 65.9%, - hsla(0, 0%, 6%, 0.903) 70.1%, - hsla(0, 0%, 6%, 0.944) 75.3%, - hsla(0, 0%, 6%, 0.975) 81.8%, - hsla(0, 0%, 6%, 0.993) 89.9%, - hsl(0, 0%, 6%) 100% - ); - pointer-events: none; - z-index: 10; -} */ - - /* ======================= Helper classes ======================= */ @@ -993,13 +952,6 @@ footer a:visited { } @media screen and (max-width:440px) { - /* .footer-fixed { - position: unset; - left: unset; - right: unset; - bottom: unset; - z-index: unset; - } */ .footer-links { flex-direction: column; row-gap: var(--spacing-4); From a1faad0b7a514f8d3cf38d5c65725014cd121d19 Mon Sep 17 00:00:00 2001 From: sefaria Date: Wed, 27 May 2026 13:41:01 +0200 Subject: [PATCH 39/56] fixed menu bar padding in media queries --- css/style.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index b9b16df..cfa9ed7 100644 --- a/css/style.css +++ b/css/style.css @@ -475,7 +475,7 @@ button:visited, .button-primary:visited, .logo:visited { .menu-bar { width: 900px; - padding: var(--spacing-5) var(--spacing-6) var(--spacing-4) var(--spacing-5); + padding: var(--spacing-5) var(--spacing-6) var(--spacing-4) var(--spacing-6); display: flex; align-items: center; justify-content: space-between; @@ -939,6 +939,10 @@ footer a:visited { } @media screen and (max-width:768px) { + .menu-bar { + padding: var(--spacing-5) var(--spacing-5) var(--spacing-4) var(--spacing-5); + } + main { padding: 0 var(--spacing-5) var(--spacing-4) var(--spacing-5); } From 21f21aee0c4df883424b42877202ecad232bc981 Mon Sep 17 00:00:00 2001 From: sefaria Date: Wed, 27 May 2026 14:10:53 +0200 Subject: [PATCH 40/56] add fade to site-header background blur --- css/style.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/css/style.css b/css/style.css index cfa9ed7..5acce9f 100644 --- a/css/style.css +++ b/css/style.css @@ -471,6 +471,16 @@ button:visited, .button-primary:visited, .logo:visited { linear-gradient(180deg, var(--color-neutral-900) 15%, rgba(18,18,18,0) 100%) ); backdrop-filter: blur(6px); + -webkit-mask-image: linear-gradient( + to top, + rgba(18,18,18,0) 0%, + rgba(18,18,18,1.00) 16% + ); + mask-image: linear-gradient( + to top, + rgba(18,18,18,0) 0%, + rgba(18,18,18,1.00) 16% + ); } .menu-bar { From 579487db2237d027c313598c4f058ddb15013849 Mon Sep 17 00:00:00 2001 From: sefaria Date: Wed, 27 May 2026 15:24:13 +0200 Subject: [PATCH 41/56] add viewport-fit=cover to all pages --- 404.html | 2 +- about.html | 2 +- index.html | 2 +- legal-notice.html | 2 +- privacy.html | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/404.html b/404.html index 74a724a..a917851 100644 --- a/404.html +++ b/404.html @@ -3,7 +3,7 @@ - + Page Not Found diff --git a/about.html b/about.html index df8294b..fee7f23 100644 --- a/about.html +++ b/about.html @@ -3,7 +3,7 @@ - + About – Lars Winter diff --git a/index.html b/index.html index cad9bcc..1cf3d85 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + Lars Winter diff --git a/legal-notice.html b/legal-notice.html index 25b9f1a..45a328e 100644 --- a/legal-notice.html +++ b/legal-notice.html @@ -3,7 +3,7 @@ - + diff --git a/privacy.html b/privacy.html index 9778ba4..e45c9e8 100644 --- a/privacy.html +++ b/privacy.html @@ -3,7 +3,7 @@ - + Lars Winter From 740198a939469bfa883838fe4f357630d28b8595 Mon Sep 17 00:00:00 2001 From: sefaria Date: Wed, 27 May 2026 15:37:06 +0200 Subject: [PATCH 42/56] correct meta theme-color value for dark theme --- 404.html | 2 +- about.html | 2 +- css/style.css | 6 ++++-- index.html | 2 +- legal-notice.html | 2 +- privacy.html | 2 +- 6 files changed, 9 insertions(+), 7 deletions(-) diff --git a/404.html b/404.html index a917851..598d921 100644 --- a/404.html +++ b/404.html @@ -21,7 +21,7 @@ - +