Compare commits
38 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 sefaria
|
1db03ad4b3 | ||
|
sefaria
|
59182e2715 | ||
|
sefaria
|
af5075afec | ||
|
sefaria
|
564df534bf | ||
|
sefaria
|
e189c16149 | ||
|
sefaria
|
66126653ee | ||
|
sefaria
|
80d57f5f41 | ||
|
sefaria
|
792e08ad03 | ||
|
sefaria
|
cb1c21a305 | ||
|
sefaria
|
62c9e4b801 | ||
|
sefaria
|
7576e8b9ee | ||
|
sefaria
|
4aae167054 | ||
|
sefaria
|
a3fc18ddef | ||
|
sefaria
|
c588ee102c | ||
|
sefaria
|
94b0f34f46 | ||
|
sefaria
|
bb0220c166 | ||
|
sefaria
|
3583df44ac | ||
|
sefaria
|
72d8e7587a | ||
|
sefaria
|
bfb8fa3b66 | ||
|
sefaria
|
f945b360d1 | ||
|
sefaria
|
3b1d8ad199 | ||
|
sefaria
|
b45480d073 | ||
|
sefaria
|
42e08bdb7e | ||
|
sefaria
|
1ee89a9b1e | ||
|
sefaria
|
09772ff1a5 | ||
|
sefaria
|
4323fd87c6 | ||
|
sefaria
|
be51d9da8c | ||
|
sefaria
|
455f9c355f | ||
|
sefaria
|
a4a9b28cb1 | ||
|
sefaria
|
60fa21881f | ||
|
sefaria
|
e133278724 | ||
|
sefaria
|
a1d9d3b9d8 | ||
|
sefaria
|
88f3140357 | ||
|
sefaria
|
0d7beb1dac | ||
|
sefaria
|
28735f1163 | ||
|
sefaria
|
938b15b741 | ||
|
sefaria
|
740198a939 | ||
|
sefaria
|
579487db22 |
@@ -3,7 +3,7 @@
|
||||
|
||||
<head>
|
||||
<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>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
<link rel="stylesheet" href="/css/a11y.css" id="a11y-css" disabled>
|
||||
@@ -21,7 +21,7 @@
|
||||
<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="0f0f0f" media="(prefers-color-scheme: dark)">
|
||||
<meta name="theme-color" content="#0f0f0f" media="(prefers-color-scheme: dark)">
|
||||
|
||||
<style>
|
||||
main {
|
||||
@@ -68,6 +68,7 @@
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="menu-right">
|
||||
<nav class="desktop-nav-secondary" aria-label="Secondary navigation">
|
||||
<ul>
|
||||
<li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
|
||||
@@ -89,11 +90,10 @@
|
||||
aria-haspopup="true"
|
||||
aria-label="Open menu"
|
||||
>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
Menu
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="menu-overlay" id="menuOverlay" hidden></div>
|
||||
@@ -107,7 +107,7 @@
|
||||
<div class="mobile-menu__header">
|
||||
<strong>Menu</strong>
|
||||
<button class="menu-close" id="menuClose" type="button" aria-label="Close menu">
|
||||
✕
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
+7
-7
@@ -3,10 +3,10 @@
|
||||
|
||||
<head>
|
||||
<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>
|
||||
<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 property="og:title" content="Lars Winter">
|
||||
@@ -21,7 +21,7 @@
|
||||
<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="0f0f0f" media="(prefers-color-scheme: dark)">
|
||||
<meta name="theme-color" content="#0f0f0f" media="(prefers-color-scheme: dark)">
|
||||
|
||||
<script src="js/app.js" defer></script>
|
||||
|
||||
@@ -50,6 +50,7 @@
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="menu-right">
|
||||
<nav class="desktop-nav-secondary" aria-label="Secondary navigation">
|
||||
<ul>
|
||||
<li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
|
||||
@@ -71,11 +72,10 @@
|
||||
aria-haspopup="true"
|
||||
aria-label="Open menu"
|
||||
>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
Menu
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="menu-overlay" id="menuOverlay" hidden></div>
|
||||
@@ -89,7 +89,7 @@
|
||||
<div class="mobile-menu__header">
|
||||
<strong>Menu</strong>
|
||||
<button class="menu-close" id="menuClose" type="button" aria-label="Close menu">
|
||||
✕
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
+134
-81
@@ -55,6 +55,7 @@
|
||||
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
background-color: light-dark(#F7F7F7, #121212);
|
||||
|
||||
/* Primitive tokens: raw design values */
|
||||
--color-neutral-100: #F7F7F7;
|
||||
@@ -87,6 +88,21 @@
|
||||
--color-orange-800: #933D00;
|
||||
--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-h2: clamp(1.875rem, 1.6rem + 0.9vw, 2.5rem);
|
||||
--text-h3: clamp(1.625rem, 1.4rem + 0.7vw, 2rem);
|
||||
@@ -128,9 +144,6 @@
|
||||
--radius-xl: 2rem;
|
||||
--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 */
|
||||
--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-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;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--color-background);
|
||||
scroll-padding-top: 8rem; /* https://tetralogical.com/blog/2023/06/08/focus-in-view/ */
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
color: var(--color-text-primary);
|
||||
font-family: "MD UI", Helvetica, sans;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
@@ -218,7 +232,6 @@ h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
scroll-margin-top: 80px;
|
||||
width: clamp(min(100%, 40ch), 50ch, min(100%, 60ch));
|
||||
}
|
||||
|
||||
@@ -354,10 +367,10 @@ a:hover {
|
||||
text-decoration-thickness: 0.175rem;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
/* a:visited {
|
||||
color: var(--color-primary);
|
||||
text-decoration-thickness: 0.175rem;
|
||||
}
|
||||
} */
|
||||
|
||||
button, .button-primary, .button-secondary, .menu-button, .logo {
|
||||
appearance: none;
|
||||
@@ -408,9 +421,10 @@ button, .button-primary, .logo {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
button:hover, .button-primary:hover, .button-secondary:hover, .logo:hover {
|
||||
text-decoration: none;
|
||||
transform: scale(1.03);
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
button:hover, .button-primary:hover, .logo:hover {
|
||||
@@ -422,11 +436,12 @@ button:hover, .button-primary:hover, .logo:hover {
|
||||
background: var(--color-button-secondary-hover);
|
||||
color: var(--color-text-button-secondary-hover);
|
||||
}
|
||||
}
|
||||
|
||||
button:active, .button-primary:active, .button-secondary:active, .logo:active {
|
||||
box-shadow: var(--shadow-button-active);
|
||||
text-decoration: none;
|
||||
transform: scale(1.03);
|
||||
transform: scale(1.00);
|
||||
}
|
||||
|
||||
button:active, .button-primary:active, .logo:active {
|
||||
@@ -439,15 +454,17 @@ button:active, .button-primary:active, .logo: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);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button-secondary:visited {
|
||||
background: var(--color-button-secondary);
|
||||
color: var(--color-text-button-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
} */
|
||||
|
||||
.button-primary span {
|
||||
margin-right: 0.3em;
|
||||
@@ -465,22 +482,21 @@ button:visited, .button-primary:visited, .logo:visited {
|
||||
justify-content: center;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 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);
|
||||
-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%
|
||||
padding-top: max(1px, env(safe-area-inset-top));
|
||||
z-index: 400;
|
||||
background-image: linear-gradient(
|
||||
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%
|
||||
);
|
||||
/* background: rgb(255 255 255 / 0.88); */
|
||||
/* backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px); */
|
||||
}
|
||||
|
||||
.menu-bar {
|
||||
@@ -589,21 +605,21 @@ button:visited, .button-primary:visited, .logo:visited {
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
position: relative;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-self: end;
|
||||
align-self: stretch;
|
||||
transition: transform 0.25s ease, opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.menu-toggle.is-open {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.menu-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: var(--overlay);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
background: light-dark(rgb(247 247 247 / 0.4), rgb(18 18 18 / 0.4));
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.25s ease;
|
||||
@@ -612,17 +628,18 @@ button:visited, .button-primary:visited, .logo:visited {
|
||||
|
||||
.mobile-menu {
|
||||
position: fixed;
|
||||
inset: auto 1rem 1rem 1rem;
|
||||
top: 7rem;
|
||||
right: var(--spacing-5);
|
||||
left: var(--spacing-5);
|
||||
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;
|
||||
max-width: none;
|
||||
max-height: calc(100dvh - 7.5rem);
|
||||
overflow-y: auto;
|
||||
margin-inline: 0;
|
||||
background: var(--color-button-secondary);
|
||||
border-radius: calc(36px + var(--spacing-2));
|
||||
box-shadow: var(--shadow-button);
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
transform: translateY(1rem) scale(0.98);
|
||||
pointer-events: none;
|
||||
@@ -630,23 +647,28 @@ button:visited, .button-primary:visited, .logo:visited {
|
||||
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;
|
||||
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 {
|
||||
display: block;
|
||||
padding: 0.95rem 1rem;
|
||||
border-radius: 0.75rem;
|
||||
background: rgb(255 255 255 / 0.56);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
min-height: 72px;
|
||||
border-radius: 36px;
|
||||
}
|
||||
|
||||
/* .page-content {
|
||||
@@ -664,23 +686,6 @@ button:visited, .button-primary:visited, .logo:visited {
|
||||
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 */
|
||||
|
||||
@@ -965,7 +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) {
|
||||
.menu-bar {
|
||||
padding: var(--spacing-4) var(--spacing-5) var(--spacing-4) var(--spacing-5);
|
||||
}
|
||||
.footer-links {
|
||||
flex-direction: column;
|
||||
row-gap: var(--spacing-4);
|
||||
@@ -979,8 +1028,8 @@ footer a:visited {
|
||||
main {
|
||||
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);
|
||||
.menu-bar {
|
||||
padding: var(--spacing-4);
|
||||
}
|
||||
.menu-left, .menu-right {
|
||||
gap: var(--spacing-3);
|
||||
@@ -991,6 +1040,10 @@ footer a:visited {
|
||||
.menu-bar {
|
||||
gap: var(--spacing-3);
|
||||
}
|
||||
.mobile-menu {
|
||||
right: var(--spacing-4);
|
||||
left: var(--spacing-4);
|
||||
}
|
||||
}
|
||||
|
||||
@media print,
|
||||
|
||||
+7
-13
@@ -3,10 +3,10 @@
|
||||
|
||||
<head>
|
||||
<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>
|
||||
<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 property="og:title" content="Lars Winter">
|
||||
@@ -21,7 +21,7 @@
|
||||
<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="0f0f0f" media="(prefers-color-scheme: dark)">
|
||||
<meta name="theme-color" content="#0f0f0f" media="(prefers-color-scheme: dark)">
|
||||
|
||||
<script src="js/app.js" defer></script>
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
aria-haspopup="true"
|
||||
aria-label="Open menu"
|
||||
>
|
||||
Menu
|
||||
<span class="menu-toggle__label">Menu</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -86,18 +86,12 @@
|
||||
aria-label="Mobile navigation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="mobile-menu__header">
|
||||
<strong>Menu</strong>
|
||||
<button class="menu-close" id="menuClose" type="button" aria-label="Close menu">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav aria-label="Mobile navigation">
|
||||
<ul>
|
||||
<li><a href="/" class="button-primary" aria-current="page">Work</a></li>
|
||||
<li><a href="/legal-notice.html" class="button-primary">About</a></li>
|
||||
<li><a href="/privacy.html" class="button-primary">Blog</a></li>
|
||||
<li><a href="/" class="menu-button" aria-current="page">Work</a></li>
|
||||
<li><a href="/legal-notice.html" class="menu-button">About</a></li>
|
||||
<li><a href="/privacy.html" class="menu-button">Blog</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
const body = document.body;
|
||||
const menuToggle = document.getElementById('menuToggle');
|
||||
const menuClose = document.getElementById('menuClose');
|
||||
const menuToggleLabel = menuToggle?.querySelector('.menu-toggle__label');
|
||||
const menuOverlay = document.getElementById('menuOverlay');
|
||||
const mobileMenu = document.getElementById('mobileMenu');
|
||||
const siteContent = document.getElementById('siteContent');
|
||||
@@ -13,9 +13,10 @@
|
||||
menuToggle.classList.add('is-open');
|
||||
menuToggle.setAttribute('aria-expanded', 'true');
|
||||
menuToggle.setAttribute('aria-label', 'Close menu');
|
||||
if (menuToggleLabel) menuToggleLabel.textContent = 'Close';
|
||||
mobileMenu.setAttribute('aria-hidden', 'false');
|
||||
siteContent.setAttribute('inert', '');
|
||||
menuClose.focus();
|
||||
menuToggle.focus({ preventScroll: true });
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
@@ -23,9 +24,10 @@
|
||||
menuToggle.classList.remove('is-open');
|
||||
menuToggle.setAttribute('aria-expanded', 'false');
|
||||
menuToggle.setAttribute('aria-label', 'Open menu');
|
||||
if (menuToggleLabel) menuToggleLabel.textContent = 'Menu';
|
||||
mobileMenu.setAttribute('aria-hidden', 'true');
|
||||
siteContent.removeAttribute('inert');
|
||||
menuToggle.focus();
|
||||
menuToggle.focus({ preventScroll: true });
|
||||
|
||||
window.setTimeout(() => {
|
||||
if (!body.classList.contains('menu-open')) {
|
||||
@@ -43,7 +45,6 @@
|
||||
}
|
||||
|
||||
menuToggle.addEventListener('click', toggleMenu);
|
||||
menuClose.addEventListener('click', closeMenu);
|
||||
menuOverlay.addEventListener('click', closeMenu);
|
||||
|
||||
document.addEventListener('keydown', (event) => {
|
||||
|
||||
+9
-9
@@ -3,10 +3,10 @@
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Lars Winter</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>Legal notice – Lars Winter</title>
|
||||
<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 property="og:title" content="Lars Winter">
|
||||
@@ -21,7 +21,7 @@
|
||||
<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="0f0f0f" media="(prefers-color-scheme: dark)">
|
||||
<meta name="theme-color" content="#0f0f0f" media="(prefers-color-scheme: dark)">
|
||||
|
||||
<script src="js/app.js" defer></script>
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
<a href="#siteContent">Skip to content</a>
|
||||
</div>
|
||||
|
||||
<header class="site-header">
|
||||
<header class="site-header">
|
||||
<div class="menu-bar">
|
||||
<div class="menu-left">
|
||||
<a class="logo" href="/">
|
||||
@@ -50,6 +50,7 @@
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="menu-right">
|
||||
<nav class="desktop-nav-secondary" aria-label="Secondary navigation">
|
||||
<ul>
|
||||
<li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
|
||||
@@ -71,11 +72,10 @@
|
||||
aria-haspopup="true"
|
||||
aria-label="Open menu"
|
||||
>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
Menu
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="menu-overlay" id="menuOverlay" hidden></div>
|
||||
@@ -89,7 +89,7 @@
|
||||
<div class="mobile-menu__header">
|
||||
<strong>Menu</strong>
|
||||
<button class="menu-close" id="menuClose" type="button" aria-label="Close menu">
|
||||
✕
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
+8
-8
@@ -3,10 +3,10 @@
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Lars Winter</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>Privacy – Lars Winter</title>
|
||||
<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 property="og:title" content="Lars Winter">
|
||||
@@ -21,7 +21,7 @@
|
||||
<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="0f0f0f" media="(prefers-color-scheme: dark)">
|
||||
<meta name="theme-color" content="#0f0f0f" media="(prefers-color-scheme: dark)">
|
||||
|
||||
<script src="js/app.js" defer></script>
|
||||
|
||||
@@ -50,6 +50,7 @@
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="menu-right">
|
||||
<nav class="desktop-nav-secondary" aria-label="Secondary navigation">
|
||||
<ul>
|
||||
<li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
|
||||
@@ -71,11 +72,10 @@
|
||||
aria-haspopup="true"
|
||||
aria-label="Open menu"
|
||||
>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
Menu
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="menu-overlay" id="menuOverlay" hidden></div>
|
||||
@@ -89,7 +89,7 @@
|
||||
<div class="mobile-menu__header">
|
||||
<strong>Menu</strong>
|
||||
<button class="menu-close" id="menuClose" type="button" aria-label="Close menu">
|
||||
✕
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user