lars/Portfolio-2026
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: lars/Portfolio-2026:ce85432804657cf77f8ec063ebc5c12140c2938c
Branches Tags
lars/Portfolio-2026:main lars/Portfolio-2026:feature/add-menu-bar
lars/Portfolio-2026:v1.0.1 lars/Portfolio-2026:v1.0 lars/Portfolio-2026:v0.92 lars/Portfolio-2026:v0.91 lars/Portfolio-2026:v0.9
...
compare: lars/Portfolio-2026:feature/add-menu-bar
Branches Tags
lars/Portfolio-2026:feature/add-menu-bar lars/Portfolio-2026:main
lars/Portfolio-2026:v1.0.1 lars/Portfolio-2026:v1.0 lars/Portfolio-2026:v0.92 lars/Portfolio-2026:v0.91 lars/Portfolio-2026:v0.9

43 Commits
ce85432804 ... feature/add-menu-bar

Author SHA1 Message Date
sefaria 1db03ad4b3 center text inside .mobile-menu vertically 2026-06-30 00:28:31 +02:00
sefaria 59182e2715 reduze button scale on hover 2026-06-30 00:23:34 +02:00
sefaria af5075afec change mobile-menu list item height 2026-06-30 00:21:42 +02:00
sefaria 564df534bf change menu-toggle height to logo height 2026-06-30 00:15:57 +02:00
sefaria e189c16149 center desktop-nav-secondary at viewport width 579px 2026-06-29 23:54:24 +02:00
sefaria 66126653ee clean up media queries 2026-06-29 23:36:49 +02:00
sefaria 80d57f5f41 change mobile-menu button styling 2026-06-29 23:27:23 +02:00
sefaria 792e08ad03 prevent scroll on menu toggle 2026-06-29 23:01:41 +02:00
sefaria cb1c21a305 add menu-button class to mobile-menu items 2026-06-29 22:59:56 +02:00
sefaria 62c9e4b801 change overlay blur variable 2026-06-29 22:52:49 +02:00
sefaria 7576e8b9ee add close label to menu toggle 2026-06-29 22:50:40 +02:00
sefaria 4aae167054 change mobile menu styling to figma layout 2026-06-29 22:46:01 +02:00
sefaria a3fc18ddef set mobile menu width and height 2026-06-29 22:19:41 +02:00
sefaria c588ee102c make overlay blur to adhere to light-dark 2026-06-29 17:22:58 +02:00
sefaria 94b0f34f46 change mobile menu close behaviour to menu toggle 2026-06-29 17:17:36 +02:00
sefaria bb0220c166 change mobile menu styling 2026-06-29 17:16:58 +02:00
sefaria 3583df44ac revert recent changes 2026-06-29 17:10:57 +02:00
sefaria 72d8e7587a Merge branch 'origin/feature/add-menu-bar' 2026-06-29 16:56:35 +02:00
sefaria bfb8fa3b66 change .menu-overlay inset 2026-06-29 16:53:12 +02:00
sefaria f945b360d1 adding --header-offset variable 2026-06-29 16:52:33 +02:00
sefaria 3b1d8ad199 adding --header-offset variable 2026-06-29 16:50:59 +02:00
sefaria b45480d073 removing .mobile-menu__header 2026-06-29 16:49:42 +02:00
sefaria 42e08bdb7e changing mobile menu background blur 2026-06-29 16:42:17 +02:00
sefaria 1ee89a9b1e add latest main css changes 2026-06-15 23:10:53 +02:00
sefaria 09772ff1a5 comment out a:visited style 2026-06-12 12:51:27 +02:00
sefaria 4323fd87c6 change visited style for all buttons 2026-06-12 12:46:19 +02:00
sefaria be51d9da8c More scroll margin for new menu bar 2026-06-12 12:40:14 +02:00
sefaria 455f9c355f improved button hover size 2026-05-30 17:37:40 +02:00
sefaria a4a9b28cb1 larger button scale on hover 2026-05-30 17:36:34 +02:00
sefaria 60fa21881f add site header to all subpages 2026-05-30 17:32:51 +02:00
sefaria e133278724 fixed button visited appereance 2026-05-28 23:54:42 +02:00
sefaria a1d9d3b9d8 fixed typo 2026-05-28 23:35:26 +02:00
sefaria 88f3140357 background gradient for site-header 2026-05-28 22:41:00 +02:00
sefaria 0d7beb1dac less top padding for screen width 440px 2026-05-27 19:31:25 +02:00
sefaria 28735f1163 first draft site-header gradient 2026-05-27 19:18:55 +02:00
sefaria 938b15b741 html, body css fix 2026-05-27 19:14:43 +02:00
sefaria 740198a939 correct meta theme-color value for dark theme 2026-05-27 15:37:06 +02:00
sefaria 579487db22 add viewport-fit=cover to all pages 2026-05-27 15:24:13 +02:00
sefaria 21f21aee0c add fade to site-header background blur 2026-05-27 14:10:53 +02:00
sefaria a1faad0b7a fixed menu bar padding in media queries 2026-05-27 13:41:01 +02:00
sefaria 703670c932 removing old unused layout styles 2026-05-27 13:34:37 +02:00
sefaria 48f6410a76 new menu-bar styling, merge buttons and toggle right 2026-05-27 13:31:33 +02:00
sefaria f4718451a8 set mobile menu toggle to button design 2026-05-27 13:16:40 +02:00
7 changed files with 201 additions and 212 deletions
Expand all files Collapse all files
404.html
+6 -6
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Page Not Found</title> <title>Page Not Found</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="/css/a11y.css" id="a11y-css" disabled> <link rel="stylesheet" href="/css/a11y.css" id="a11y-css" disabled>
@@ -21,7 +21,7 @@
<link rel="apple-touch-icon" href="img/lw.png"> <link rel="apple-touch-icon" href="img/lw.png">
<meta name="theme-color" content="#F7F7F7" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#F7F7F7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="0f0f0f" media="(prefers-color-scheme: dark)"> <meta name="theme-color" content="#0f0f0f" media="(prefers-color-scheme: dark)">
<style> <style>
main { main {
@@ -68,6 +68,7 @@
</nav> </nav>
</div> </div>
<div class="menu-right">
<nav class="desktop-nav-secondary" aria-label="Secondary navigation"> <nav class="desktop-nav-secondary" aria-label="Secondary navigation">
<ul> <ul>
<li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary"> <li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
@@ -89,11 +90,10 @@
aria-haspopup="true" aria-haspopup="true"
aria-label="Open menu" aria-label="Open menu"
> >
<span></span> Menu
<span></span>
<span></span>
</button> </button>
</div> </div>
</div>
</header> </header>
<div class="menu-overlay" id="menuOverlay" hidden></div> <div class="menu-overlay" id="menuOverlay" hidden></div>
@@ -107,7 +107,7 @@
<div class="mobile-menu__header"> <div class="mobile-menu__header">
<strong>Menu</strong> <strong>Menu</strong>
<button class="menu-close" id="menuClose" type="button" aria-label="Close menu"> <button class="menu-close" id="menuClose" type="button" aria-label="Close menu">
✕ Close
</button> </button>
</div> </div>
about.html
+7 -7
View File
@@ -3,10 +3,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>About – Lars Winter</title> <title>About – Lars Winter</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="/css/a11y.css" id="a11y-css" disabled> <link rel="stylesheet" href="css/a11y.css" id="a11y-css" disabled>
<meta name="description" content="Creator of visual identities and digital interfaces"> <meta name="description" content="Creator of visual identities and digital interfaces">
<meta property="og:title" content="Lars Winter"> <meta property="og:title" content="Lars Winter">
@@ -21,7 +21,7 @@
<link rel="apple-touch-icon" href="img/lw.png"> <link rel="apple-touch-icon" href="img/lw.png">
<meta name="theme-color" content="#F7F7F7" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#F7F7F7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="0f0f0f" media="(prefers-color-scheme: dark)"> <meta name="theme-color" content="#0f0f0f" media="(prefers-color-scheme: dark)">
<script src="js/app.js" defer></script> <script src="js/app.js" defer></script>
@@ -50,6 +50,7 @@
</nav> </nav>
</div> </div>
<div class="menu-right">
<nav class="desktop-nav-secondary" aria-label="Secondary navigation"> <nav class="desktop-nav-secondary" aria-label="Secondary navigation">
<ul> <ul>
<li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary"> <li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
@@ -71,11 +72,10 @@
aria-haspopup="true" aria-haspopup="true"
aria-label="Open menu" aria-label="Open menu"
> >
<span></span> Menu
<span></span>
<span></span>
</button> </button>
</div> </div>
</div>
</header> </header>
<div class="menu-overlay" id="menuOverlay" hidden></div> <div class="menu-overlay" id="menuOverlay" hidden></div>
@@ -89,7 +89,7 @@
<div class="mobile-menu__header"> <div class="mobile-menu__header">
<strong>Menu</strong> <strong>Menu</strong>
<button class="menu-close" id="menuClose" type="button" aria-label="Close menu"> <button class="menu-close" id="menuClose" type="button" aria-label="Close menu">
✕ Close
</button> </button>
</div> </div>
css/style.css
+154 -160
View File
@@ -55,6 +55,7 @@
:root { :root {
color-scheme: light dark; color-scheme: light dark;
background-color: light-dark(#F7F7F7, #121212);
/* Primitive tokens: raw design values */ /* Primitive tokens: raw design values */
--color-neutral-100: #F7F7F7; --color-neutral-100: #F7F7F7;
@@ -87,6 +88,21 @@
--color-orange-800: #933D00; --color-orange-800: #933D00;
--color-orange-900: #7A2C00; --color-orange-900: #7A2C00;
--shadow-light: 0px 2px 8px rgba(0, 0, 0, 0.3), 0px 1px 4px rgba(0, 0, 0, 0.2);
--shadow-dark: 0px 2px 8px rgba(0, 0, 0, 0.5), 0px 1px 4px rgba(0, 0, 0, 0.2);
--gradient-stop-1-light: #f7f7f7;
--gradient-stop-1-dark: #121212;
--gradient-stop-2-light: #f7f7f7;
--gradient-stop-2-dark: #121212;
--gradient-stop-3-light: #f7f7f780;
--gradient-stop-3-dark: #12121280;
--gradient-stop-4-light: #f7f7f700;
--gradient-stop-4-dark: #12121200;
--text-h1: clamp(2.25rem, 1.9rem + 1.1vw, 3rem); --text-h1: clamp(2.25rem, 1.9rem + 1.1vw, 3rem);
--text-h2: clamp(1.875rem, 1.6rem + 0.9vw, 2.5rem); --text-h2: clamp(1.875rem, 1.6rem + 0.9vw, 2.5rem);
--text-h3: clamp(1.625rem, 1.4rem + 0.7vw, 2rem); --text-h3: clamp(1.625rem, 1.4rem + 0.7vw, 2rem);
@@ -128,9 +144,6 @@
--radius-xl: 2rem; --radius-xl: 2rem;
--radius-xxl: 2.5rem; --radius-xxl: 2.5rem;
--shadow-light: 0px 2px 8px rgba(0, 0, 0, 0.3), 0px 1px 4px rgba(0, 0, 0, 0.2);
--shadow-dark: 0px 2px 8px rgba(0, 0, 0, 0.5), 0px 1px 4px rgba(0, 0, 0, 0.2);
/* Semantic tokens: contextual usage */ /* Semantic tokens: contextual usage */
--color-background: light-dark(var(--color-neutral-100), var(--color-neutral-900)); --color-background: light-dark(var(--color-neutral-100), var(--color-neutral-900));
@@ -176,10 +189,6 @@
--shadow-button: inset 0px 1px 2px rgba(0, 0, 0, 0.16), inset 0px -1px 4px rgba(0, 0, 0, 0.28), var(--shadow-box); --shadow-button: inset 0px 1px 2px rgba(0, 0, 0, 0.16), inset 0px -1px 4px rgba(0, 0, 0, 0.28), var(--shadow-box);
--shadow-button-active: inset 0px -1px 2px rgba(0, 0, 0, 0.16), inset 0px 1px 4px rgba(0, 0, 0, 0.28), var(--shadow-box); --shadow-button-active: inset 0px -1px 2px rgba(0, 0, 0, 0.16), inset 0px 1px 4px rgba(0, 0, 0, 0.28), var(--shadow-box);
--border: #d8d8d8;
--overlay: rgb(12 12 12 / 0.24);
--panel: rgb(255 255 255 / 0.76);
} }
*, *,
@@ -191,14 +200,19 @@
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
html,
body {
margin: 0;
background: var(--color-background);
scroll-padding-top: 8rem; /* https://tetralogical.com/blog/2023/06/08/focus-in-view/ */
}
html { html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
body { body {
margin: 0; color: var(--color-text-primary);
background: var(--color-background);
color: var(--color-text);
font-family: "MD UI", Helvetica, sans; font-family: "MD UI", Helvetica, sans;
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
@@ -218,7 +232,6 @@ h4,
h5, h5,
h6, h6,
p { p {
scroll-margin-top: 80px;
width: clamp(min(100%, 40ch), 50ch, min(100%, 60ch)); width: clamp(min(100%, 40ch), 50ch, min(100%, 60ch));
} }
@@ -354,10 +367,10 @@ a:hover {
text-decoration-thickness: 0.175rem; text-decoration-thickness: 0.175rem;
} }
a:visited { /* a:visited {
color: var(--color-primary); color: var(--color-primary);
text-decoration-thickness: 0.175rem; text-decoration-thickness: 0.175rem;
} } */
button, .button-primary, .button-secondary, .menu-button, .logo { button, .button-primary, .button-secondary, .menu-button, .logo {
appearance: none; appearance: none;
@@ -377,6 +390,7 @@ button, .button-primary, .button-secondary, .menu-button, .logo {
border-radius: var(--radius-xxl); border-radius: var(--radius-xxl);
text-decoration: none; text-decoration: none;
transition: transform 0.2s ease; transition: transform 0.2s ease;
cursor: pointer;
} }
button, .button-primary, .logo { button, .button-primary, .logo {
@@ -407,9 +421,10 @@ button, .button-primary, .logo {
fill: currentColor; fill: currentColor;
} }
@media (hover: hover) {
button:hover, .button-primary:hover, .button-secondary:hover, .logo:hover { button:hover, .button-primary:hover, .button-secondary:hover, .logo:hover {
text-decoration: none; text-decoration: none;
transform: scale(1.03); transform: scale(1.04);
} }
button:hover, .button-primary:hover, .logo:hover { button:hover, .button-primary:hover, .logo:hover {
@@ -421,11 +436,12 @@ button:hover, .button-primary:hover, .logo:hover {
background: var(--color-button-secondary-hover); background: var(--color-button-secondary-hover);
color: var(--color-text-button-secondary-hover); color: var(--color-text-button-secondary-hover);
} }
}
button:active, .button-primary:active, .button-secondary:active, .logo:active { button:active, .button-primary:active, .button-secondary:active, .logo:active {
box-shadow: var(--shadow-button-active); box-shadow: var(--shadow-button-active);
text-decoration: none; text-decoration: none;
transform: scale(1.03); transform: scale(1.00);
} }
button:active, .button-primary:active, .logo:active { button:active, .button-primary:active, .logo:active {
@@ -438,15 +454,17 @@ button:active, .button-primary:active, .logo:active {
color: var(--color-text-button-secondary-active); color: var(--color-text-button-secondary-active);
} }
button:visited, .button-primary:visited, .logo:visited { /* button:visited, .button-primary:visited, .logo:visited {
background: var(--color-button-primary);
color: var(--color-text-button-primary); color: var(--color-text-button-primary);
text-decoration: none; text-decoration: none;
} }
.button-secondary:visited { .button-secondary:visited {
background: var(--color-button-secondary);
color: var(--color-text-button-secondary); color: var(--color-text-button-secondary);
text-decoration: none; text-decoration: none;
} } */
.button-primary span { .button-primary span {
margin-right: 0.3em; margin-right: 0.3em;
@@ -464,24 +482,33 @@ button:visited, .button-primary:visited, .logo:visited {
justify-content: center; justify-content: center;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; padding-top: max(1px, env(safe-area-inset-top));
background: light-dark( z-index: 400;
linear-gradient(180deg, var(--color-neutral-100) 15%, rgba(247,247,247,0) 100%), background-image: linear-gradient(
linear-gradient(180deg, var(--color-neutral-900) 15%, rgba(18,18,18,0) 100%) 180deg,
light-dark(var(--gradient-stop-1-light), var(--gradient-stop-1-dark)) 0%,
6%,
light-dark(var(--gradient-stop-2-light), var(--gradient-stop-2-dark)) 12%,
44%,
light-dark(var(--gradient-stop-3-light), var(--gradient-stop-3-dark)) 60%,
76%,
light-dark(var(--gradient-stop-4-light), var(--gradient-stop-4-dark)) 100%
); );
backdrop-filter: blur(6px); /* background: rgb(255 255 255 / 0.88); */
/* backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px); */
} }
.site-header .menu-bar { .menu-bar {
width: 900px; 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; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 1rem; gap: var(--spacing-4);
} }
.menu-bar .menu-left { .menu-left, .menu-right {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
gap: var(--spacing-4); gap: var(--spacing-4);
@@ -548,7 +575,6 @@ button:visited, .button-primary:visited, .logo:visited {
color: var(--color-text-button-seconary-active); color: var(--color-text-button-seconary-active);
} }
.menu-button:active, .menu-button:active,
.desktop-nav a[aria-current="page"]:active, .desktop-nav a[aria-current="page"]:active,
.mobile-menu a[aria-current="page"]:active { .mobile-menu a[aria-current="page"]:active {
@@ -558,7 +584,7 @@ button:visited, .button-primary:visited, .logo:visited {
.desktop-nav-secondary ul { .desktop-nav-secondary ul {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
gap: var(--spacing-3); gap: var(--spacing-4);
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
@@ -578,68 +604,22 @@ button:visited, .button-primary:visited, .logo:visited {
display: block; 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 { .menu-toggle {
display: none;
position: relative; position: relative;
} display: none;
align-items: center;
.menu-toggle span { justify-content: center;
position: absolute; justify-self: end;
left: 50%; align-self: stretch;
width: 20px;
height: 2px;
background: currentColor;
border-radius: 999px;
transform-origin: center;
transition: transform 0.25s ease, opacity 0.25s ease; 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 { .menu-overlay {
position: fixed; position: fixed;
inset: 0; inset: 0;
background: var(--overlay); background: light-dark(rgb(247 247 247 / 0.4), rgb(18 18 18 / 0.4));
backdrop-filter: blur(10px); backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(8px);
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transition: opacity 0.25s ease; transition: opacity 0.25s ease;
@@ -648,17 +628,18 @@ button:visited, .button-primary:visited, .logo:visited {
.mobile-menu { .mobile-menu {
position: fixed; position: fixed;
inset: auto 1rem 1rem 1rem; top: 7rem;
right: var(--spacing-5);
left: var(--spacing-5);
width: auto; width: auto;
max-width: 24rem; max-width: none;
margin-inline: auto; max-height: calc(100dvh - 7.5rem);
background: var(--panel); overflow-y: auto;
backdrop-filter: blur(16px); margin-inline: 0;
-webkit-backdrop-filter: blur(16px); background: var(--color-button-secondary);
border: 1px solid rgb(255 255 255 / 0.45); border-radius: calc(36px + var(--spacing-2));
border-radius: 1rem; box-shadow: var(--shadow-button);
box-shadow: 0 20px 50px rgb(0 0 0 / 0.16); padding: 0;
padding: 1rem;
opacity: 0; opacity: 0;
transform: translateY(1rem) scale(0.98); transform: translateY(1rem) scale(0.98);
pointer-events: none; pointer-events: none;
@@ -666,23 +647,28 @@ button:visited, .button-primary:visited, .logo:visited {
z-index: 300; z-index: 300;
} }
.mobile-menu__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.mobile-menu ul { .mobile-menu ul {
display: grid; display: grid;
gap: 0.5rem; width: 100%;
margin: 0;
padding: var(--spacing-2);
list-style: none;
gap: var(--spacing-2);
}
.mobile-menu li {
margin: 0;
padding: 0;
list-style: none;
} }
.mobile-menu a { .mobile-menu a {
display: block; display: flex;
padding: 0.95rem 1rem; align-items: center;
border-radius: 0.75rem; justify-content: center;
background: rgb(255 255 255 / 0.56); text-align: center;
min-height: 72px;
border-radius: 36px;
} }
/* .page-content { /* .page-content {
@@ -700,23 +686,6 @@ button:visited, .button-primary:visited, .logo:visited {
pointer-events: auto; pointer-events: auto;
} }
@media (max-width: 579px) {
.desktop-nav {
display: none;
}
.menu-toggle {
display: inline-block;
}
}
@media (min-width: 580px) {
.menu-overlay,
.mobile-menu {
display: none;
}
}
/* Maint content */ /* Maint content */
@@ -879,36 +848,6 @@ footer a:visited {
column-gap: var(--spacing-4); 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 Helper classes
======================= */ ======================= */
@@ -1015,6 +954,10 @@ footer a:visited {
} }
@media screen and (max-width:768px) { @media screen and (max-width:768px) {
.menu-bar {
padding: var(--spacing-5) var(--spacing-5) var(--spacing-4) var(--spacing-5);
}
main { main {
padding: 0 var(--spacing-5) var(--spacing-4) var(--spacing-5); padding: 0 var(--spacing-5) var(--spacing-4) var(--spacing-5);
} }
@@ -1027,14 +970,51 @@ footer a:visited {
} }
} }
@media (max-width: 579px) {
.desktop-nav {
display: none;
}
.menu-toggle {
display: inline-flex;
justify-self: end;
min-height: 52px;
}
.menu-bar {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
.menu-left {
justify-self: start;
}
.menu-right {
display: contents;
}
.desktop-nav-secondary {
justify-self: center;
}
.desktop-nav-secondary ul {
justify-content: center;
}
}
@media (min-width: 580px) {
.menu-overlay,
.mobile-menu {
display: none;
}
}
@media screen and (max-width:440px) { @media screen and (max-width:440px) {
/* .footer-fixed { .menu-bar {
position: unset; padding: var(--spacing-4) var(--spacing-5) var(--spacing-4) var(--spacing-5);
left: unset; }
right: unset;
bottom: unset;
z-index: unset;
} */
.footer-links { .footer-links {
flex-direction: column; flex-direction: column;
row-gap: var(--spacing-4); row-gap: var(--spacing-4);
@@ -1048,8 +1028,22 @@ footer a:visited {
main { main {
padding: 0 var(--spacing-4) var(--spacing-4) var(--spacing-4); padding: 0 var(--spacing-4) var(--spacing-4) var(--spacing-4);
} }
.site-header .menu-bar { .menu-bar {
padding: var(--spacing-5) var(--spacing-4) var(--spacing-4) var(--spacing-4); padding: 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);
}
.mobile-menu {
right: var(--spacing-4);
left: var(--spacing-4);
}
} }
@media print, @media print,
index.html
+9 -15
View File
@@ -3,10 +3,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Lars Winter</title> <title>Lars Winter</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="/css/a11y.css" id="a11y-css" disabled> <link rel="stylesheet" href="css/a11y.css" id="a11y-css" disabled>
<meta name="description" content="Creator of visual identities and digital interfaces"> <meta name="description" content="Creator of visual identities and digital interfaces">
<meta property="og:title" content="Lars Winter"> <meta property="og:title" content="Lars Winter">
@@ -21,7 +21,7 @@
<link rel="apple-touch-icon" href="img/lw.png"> <link rel="apple-touch-icon" href="img/lw.png">
<meta name="theme-color" content="#F7F7F7" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#F7F7F7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="0f0f0f" media="(prefers-color-scheme: dark)"> <meta name="theme-color" content="#0f0f0f" media="(prefers-color-scheme: dark)">
<script src="js/app.js" defer></script> <script src="js/app.js" defer></script>
@@ -50,6 +50,7 @@
</nav> </nav>
</div> </div>
<div class="menu-right">
<nav class="desktop-nav-secondary" aria-label="Secondary navigation"> <nav class="desktop-nav-secondary" aria-label="Secondary navigation">
<ul> <ul>
<li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary"> <li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
@@ -71,11 +72,10 @@
aria-haspopup="true" aria-haspopup="true"
aria-label="Open menu" aria-label="Open menu"
> >
<span></span> <span class="menu-toggle__label">Menu</span>
<span></span>
<span></span>
</button> </button>
</div> </div>
</div>
</header> </header>
<div class="menu-overlay" id="menuOverlay" hidden></div> <div class="menu-overlay" id="menuOverlay" hidden></div>
@@ -86,18 +86,12 @@
aria-label="Mobile navigation" aria-label="Mobile navigation"
aria-hidden="true" aria-hidden="true"
> >
<div class="mobile-menu__header">
<strong>Menu</strong>
<button class="menu-close" id="menuClose" type="button" aria-label="Close menu">
✕
</button>
</div>
<nav aria-label="Mobile navigation"> <nav aria-label="Mobile navigation">
<ul> <ul>
<li><a href="/" class="button-primary" aria-current="page">Work</a></li> <li><a href="/" class="menu-button" aria-current="page">Work</a></li>
<li><a href="/legal-notice.html" class="button-primary">About</a></li> <li><a href="/legal-notice.html" class="menu-button">About</a></li>
<li><a href="/privacy.html" class="button-primary">Blog</a></li> <li><a href="/privacy.html" class="menu-button">Blog</a></li>
</ul> </ul>
</nav> </nav>
</aside> </aside>
js/app.js
+5 -4
View File
@@ -2,7 +2,7 @@
const body = document.body; const body = document.body;
const menuToggle = document.getElementById('menuToggle'); const menuToggle = document.getElementById('menuToggle');
const menuClose = document.getElementById('menuClose'); const menuToggleLabel = menuToggle?.querySelector('.menu-toggle__label');
const menuOverlay = document.getElementById('menuOverlay'); const menuOverlay = document.getElementById('menuOverlay');
const mobileMenu = document.getElementById('mobileMenu'); const mobileMenu = document.getElementById('mobileMenu');
const siteContent = document.getElementById('siteContent'); const siteContent = document.getElementById('siteContent');
@@ -13,9 +13,10 @@
menuToggle.classList.add('is-open'); menuToggle.classList.add('is-open');
menuToggle.setAttribute('aria-expanded', 'true'); menuToggle.setAttribute('aria-expanded', 'true');
menuToggle.setAttribute('aria-label', 'Close menu'); menuToggle.setAttribute('aria-label', 'Close menu');
if (menuToggleLabel) menuToggleLabel.textContent = 'Close';
mobileMenu.setAttribute('aria-hidden', 'false'); mobileMenu.setAttribute('aria-hidden', 'false');
siteContent.setAttribute('inert', ''); siteContent.setAttribute('inert', '');
menuClose.focus(); menuToggle.focus({ preventScroll: true });
} }
function closeMenu() { function closeMenu() {
@@ -23,9 +24,10 @@
menuToggle.classList.remove('is-open'); menuToggle.classList.remove('is-open');
menuToggle.setAttribute('aria-expanded', 'false'); menuToggle.setAttribute('aria-expanded', 'false');
menuToggle.setAttribute('aria-label', 'Open menu'); menuToggle.setAttribute('aria-label', 'Open menu');
if (menuToggleLabel) menuToggleLabel.textContent = 'Menu';
mobileMenu.setAttribute('aria-hidden', 'true'); mobileMenu.setAttribute('aria-hidden', 'true');
siteContent.removeAttribute('inert'); siteContent.removeAttribute('inert');
menuToggle.focus(); menuToggle.focus({ preventScroll: true });
window.setTimeout(() => { window.setTimeout(() => {
if (!body.classList.contains('menu-open')) { if (!body.classList.contains('menu-open')) {
@@ -43,7 +45,6 @@
} }
menuToggle.addEventListener('click', toggleMenu); menuToggle.addEventListener('click', toggleMenu);
menuClose.addEventListener('click', closeMenu);
menuOverlay.addEventListener('click', closeMenu); menuOverlay.addEventListener('click', closeMenu);
document.addEventListener('keydown', (event) => { document.addEventListener('keydown', (event) => {
legal-notice.html
+9 -9
View File
@@ -3,10 +3,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Lars Winter</title> <title>Legal notice – Lars Winter</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="/css/a11y.css" id="a11y-css" disabled> <link rel="stylesheet" href="css/a11y.css" id="a11y-css" disabled>
<meta name="description" content="Creator of visual identities and digital interfaces"> <meta name="description" content="Creator of visual identities and digital interfaces">
<meta property="og:title" content="Lars Winter"> <meta property="og:title" content="Lars Winter">
@@ -21,7 +21,7 @@
<link rel="apple-touch-icon" href="img/lw.png"> <link rel="apple-touch-icon" href="img/lw.png">
<meta name="theme-color" content="#F7F7F7" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#F7F7F7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="0f0f0f" media="(prefers-color-scheme: dark)"> <meta name="theme-color" content="#0f0f0f" media="(prefers-color-scheme: dark)">
<script src="js/app.js" defer></script> <script src="js/app.js" defer></script>
@@ -33,7 +33,7 @@
<a href="#siteContent">Skip to content</a> <a href="#siteContent">Skip to content</a>
</div> </div>
<header class="site-header"> <header class="site-header">
<div class="menu-bar"> <div class="menu-bar">
<div class="menu-left"> <div class="menu-left">
<a class="logo" href="/"> <a class="logo" href="/">
@@ -50,6 +50,7 @@
</nav> </nav>
</div> </div>
<div class="menu-right">
<nav class="desktop-nav-secondary" aria-label="Secondary navigation"> <nav class="desktop-nav-secondary" aria-label="Secondary navigation">
<ul> <ul>
<li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary"> <li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
@@ -71,11 +72,10 @@
aria-haspopup="true" aria-haspopup="true"
aria-label="Open menu" aria-label="Open menu"
> >
<span></span> Menu
<span></span>
<span></span>
</button> </button>
</div> </div>
</div>
</header> </header>
<div class="menu-overlay" id="menuOverlay" hidden></div> <div class="menu-overlay" id="menuOverlay" hidden></div>
@@ -89,7 +89,7 @@
<div class="mobile-menu__header"> <div class="mobile-menu__header">
<strong>Menu</strong> <strong>Menu</strong>
<button class="menu-close" id="menuClose" type="button" aria-label="Close menu"> <button class="menu-close" id="menuClose" type="button" aria-label="Close menu">
✕ Close
</button> </button>
</div> </div>
privacy.html
+8 -8
View File
@@ -3,10 +3,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>Lars Winter</title> <title>Privacy – Lars Winter</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="/css/a11y.css" id="a11y-css" disabled> <link rel="stylesheet" href="css/a11y.css" id="a11y-css" disabled>
<meta name="description" content="Creator of visual identities and digital interfaces"> <meta name="description" content="Creator of visual identities and digital interfaces">
<meta property="og:title" content="Lars Winter"> <meta property="og:title" content="Lars Winter">
@@ -21,7 +21,7 @@
<link rel="apple-touch-icon" href="img/lw.png"> <link rel="apple-touch-icon" href="img/lw.png">
<meta name="theme-color" content="#F7F7F7" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#F7F7F7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="0f0f0f" media="(prefers-color-scheme: dark)"> <meta name="theme-color" content="#0f0f0f" media="(prefers-color-scheme: dark)">
<script src="js/app.js" defer></script> <script src="js/app.js" defer></script>
@@ -50,6 +50,7 @@
</nav> </nav>
</div> </div>
<div class="menu-right">
<nav class="desktop-nav-secondary" aria-label="Secondary navigation"> <nav class="desktop-nav-secondary" aria-label="Secondary navigation">
<ul> <ul>
<li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary"> <li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
@@ -71,11 +72,10 @@
aria-haspopup="true" aria-haspopup="true"
aria-label="Open menu" aria-label="Open menu"
> >
<span></span> Menu
<span></span>
<span></span>
</button> </button>
</div> </div>
</div>
</header> </header>
<div class="menu-overlay" id="menuOverlay" hidden></div> <div class="menu-overlay" id="menuOverlay" hidden></div>
@@ -89,7 +89,7 @@
<div class="mobile-menu__header"> <div class="mobile-menu__header">
<strong>Menu</strong> <strong>Menu</strong>
<button class="menu-close" id="menuClose" type="button" aria-label="Close menu"> <button class="menu-close" id="menuClose" type="button" aria-label="Close menu">
✕ Close
</button> </button>
</div> </div>