Compare commits
79 Commits
539b9a36fc
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
 sefaria
|
9267fece60 | ||
|
sefaria
|
b9c5316dd4 | ||
|
sefaria
|
2af76dc992 | ||
|
sefaria
|
1c7f7d9642 | ||
|
sefaria
|
a6c7b063ca | ||
|
sefaria
|
85edb8ae02 | ||
|
sefaria
|
25ec79a4ae | ||
|
sefaria
|
dc93f8c6cc | ||
|
sefaria
|
7f7357a835 | ||
|
sefaria
|
9e1233ce7a | ||
|
sefaria
|
d663e33c87 | ||
|
sefaria
|
4811d687a0 | ||
|
sefaria
|
ac65e19f57 | ||
|
sefaria
|
6e58ef2df5 | ||
|
sefaria
|
bc7972b997 | ||
|
sefaria
|
13def608ed | ||
|
sefaria
|
43b3defae6 | ||
|
sefaria
|
6ed8664089 | ||
|
sefaria
|
455f9c355f | ||
|
sefaria
|
a4a9b28cb1 | ||
|
sefaria
|
60fa21881f | ||
|
sefaria
|
e133278724 | ||
|
sefaria
|
a1d9d3b9d8 | ||
|
sefaria
|
88f3140357 | ||
|
sefaria
|
0d7beb1dac | ||
|
sefaria
|
28735f1163 | ||
|
sefaria
|
938b15b741 | ||
|
sefaria
|
740198a939 | ||
|
sefaria
|
579487db22 | ||
|
sefaria
|
21f21aee0c | ||
|
sefaria
|
a1faad0b7a | ||
|
sefaria
|
703670c932 | ||
|
sefaria
|
48f6410a76 | ||
|
sefaria
|
f4718451a8 | ||
|
sefaria
|
ce85432804 | ||
|
sefaria
|
0f34535ba4 | ||
|
sefaria
|
c22c747e4f | ||
|
sefaria
|
6bd94c8e19 | ||
|
sefaria
|
b7b2861ed1 | ||
|
sefaria
|
069e5346f1 | ||
|
sefaria
|
710702b4ed | ||
|
sefaria
|
de4698e6fd | ||
|
sefaria
|
13632637a9 | ||
|
sefaria
|
430602caa3 | ||
|
sefaria
|
48de33f495 | ||
|
sefaria
|
96a3470419 | ||
|
sefaria
|
96ec270ed4 | ||
|
sefaria
|
0521d33193 | ||
|
sefaria
|
93a5a13e3e | ||
|
sefaria
|
db5fe419ce | ||
|
sefaria
|
4dcd811381 | ||
|
sefaria
|
9365d7c6f9 | ||
|
sefaria
|
be60619353 | ||
|
sefaria
|
3b5d826ce0 | ||
|
sefaria
|
992233f4cb | ||
|
sefaria
|
9a92ed4489 | ||
|
sefaria
|
4e287c0e85 | ||
|
sefaria
|
a49bc03fff | ||
|
sefaria
|
017ade069d | ||
|
sefaria
|
164fae3263 | ||
|
sefaria
|
013e125f37 | ||
|
sefaria
|
362fa4ef58 | ||
|
sefaria
|
2b131f2b1f | ||
|
sefaria
|
d799b3ce1c | ||
|
sefaria
|
42324ff42c | ||
|
sefaria
|
5b7cdf9e84 | ||
|
sefaria
|
be9491f1e8 | ||
|
sefaria
|
276b8eb510 | ||
|
sefaria
|
ec54a1f3a2 | ||
|
sefaria
|
524afd03ea | ||
|
sefaria
|
cc6fa17247 | ||
|
sefaria
|
4737b78b8a | ||
|
sefaria
|
aa1f270c59 | ||
|
sefaria
|
2a590a0310 | ||
|
sefaria
|
90a0f39790 | ||
|
sefaria
|
43d23aacab | ||
|
sefaria
|
8dd4e034ee | ||
|
sefaria
|
5d888daa1d | ||
|
sefaria
|
13ccaa8658 |
@@ -3,59 +3,91 @@
|
|||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||||
<title>Page Not Found</title>
|
<title>Page Not Found</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
<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">
|
||||||
|
<meta property="og:description" content="Portfolio of Lars Winter">
|
||||||
|
<meta property="og:url" content="https://larswinter.me">
|
||||||
|
<meta property="og:image" content="https://larswinter.me/img/lw-og_image.png">
|
||||||
|
<meta property="og:image:alt" content="">
|
||||||
|
<meta name="fediverse:creator" content="@larswinter@mastodon.social">
|
||||||
|
|
||||||
|
<link rel="icon" href="img/favicon.ico" sizes="any">
|
||||||
|
<!-- <link rel="icon" href="img/icon.svg" type="image/svg+xml"> -->
|
||||||
|
<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)">
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
* {
|
main {
|
||||||
line-height: 1.2;
|
justify-content: center
|
||||||
margin: 0;
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: clamp(7.25rem, 4.5rem + 1.1vw, 8rem);
|
||||||
|
color: light-dark(var(--color-orange-red-600), var(--color-orange-red-500));
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
h2 {
|
||||||
color: #888;
|
font-size: clamp(2.75rem, 2.5rem + 1.1vw, 4rem);
|
||||||
display: table;
|
}
|
||||||
font-family: sans-serif;
|
|
||||||
height: 100%;
|
h1, h2, p {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
display: table-cell;
|
|
||||||
vertical-align: middle;
|
|
||||||
margin: 2em auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
color: #555;
|
|
||||||
font-size: 2em;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 280px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 280px) {
|
|
||||||
|
|
||||||
body,
|
|
||||||
p {
|
|
||||||
width: 95%;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 1.5em;
|
|
||||||
margin: 0 0 0.3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<script src="js/app.js" defer></script>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<h1>Page Not Found</h1>
|
|
||||||
|
<div id="skipLink">
|
||||||
|
<a href="#siteContent">Skip to content</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="menu-bar">
|
||||||
|
<div class="menu-left">
|
||||||
|
<a class="logo" href="/">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" aria-hidden="true" focusable="false" viewBox="0 0 1080 1080"><path d="M1000.022 50H499.59c-20.565 0-34.827 20.502-27.676 39.783l146.561 395.171c8.419 22.699 40.635 22.382 48.605-.478l61.821-177.315c6.903-19.8 34.906-19.8 41.809 0l61.821 177.315c7.97 22.861 40.187 23.178 48.605.478l146.561-395.171c7.151-19.281-7.112-39.783-27.676-39.783Z"/><path d="M360 538V106c0-30.928-25.072-56-56-56H106c-30.928 0-56 25.072-56 56v868c0 30.928 25.072 56 56 56h868c30.928 0 56-25.072 56-56V650c0-30.928-25.072-56-56-56H416c-30.928 0-56-25.072-56-56"/></svg>
|
||||||
|
<span class="visually-hidden">Home page</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</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">
|
||||||
|
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" d="M21 10h-6v12h-2v-6h-2v6H9V10H3V8h18zm-9-8a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5"/>
|
||||||
|
</svg><span class="visually-hidden">Make the website more visually accessible</span></button></li>
|
||||||
|
<li><button type="button" id="theme-toggle" class="button-secondary"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" fill-rule="evenodd" d="M5.302 4.574a9.96 9.96 0 0 1 6.697-2.57L12 2l.134.002a10.1 10.1 0 0 1 3.015.507l.223.076q.12.043.24.091.102.038.203.08.117.047.232.1.107.045.213.095.105.05.21.104.116.056.23.117l.153.084q.135.074.27.154.105.064.21.132.091.056.183.115.131.088.261.182l.154.109.21.162q.092.071.185.146l.123.105q.32.268.622.568l.355.373q.51.565.917 1.182l.06.095q.104.16.202.323l.082.145q.076.134.15.27l.085.166q.067.13.13.264.042.09.081.182.063.138.122.279l.049.127q.063.16.12.32.027.075.05.15.051.145.096.292l.058.206a10 10 0 0 1 .173.716l.037.201.044.254a10 10 0 0 1 .081.695 10.3 10.3 0 0 1-.084 2.374 10 10 0 0 1-.13.678 10 10 0 0 1-.184.694 10 10 0 0 1-.148.448q-.046.13-.098.26l-.075.192-.1.233q-.046.106-.095.213l-.104.21-.117.229-.095.171q-.07.127-.143.252-.065.106-.132.21-.058.096-.12.19-.087.128-.178.255l-.108.154q-.08.105-.163.209-.071.094-.145.186l-.105.123a10 10 0 0 1-.94.976q-.375.337-.773.63l-.098.07q-.147.105-.295.205l-.148.095q-.128.083-.258.162l-.163.093q-.127.075-.257.143-.087.046-.175.09-.12.062-.242.12-.102.048-.205.094-.117.052-.236.102l-.175.072a10 10 0 0 1-1.147.372q-.108.03-.218.056a10 10 0 0 1-.293.064l-.146.03a10 10 0 0 1-.294.05l-.187.029q-.135.018-.27.032l-.189.022q-.157.013-.316.022l-.15.01a9.97 9.97 0 0 1-7.162-2.563l-.373-.355c-3.905-3.905-3.905-10.237 0-14.142zm1.041 1.77A8 8 0 0 0 12 20V4a7.98 7.98 0 0 0-5.657 2.343"/>
|
||||||
|
</svg><span class="visually-hidden">Change light/dark mode</span></button></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<h1>4💀4</h1>
|
||||||
|
<h2>Page Not Found</h2>
|
||||||
<p>Sorry, but the page you were trying to view does not exist.</p>
|
<p>Sorry, but the page you were trying to view does not exist.</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- <script src="js/app.js" defer></script> -->
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
Copyright (c) HTML5 Boilerplate
|
Copyright (c) HTML5 Boilerplate
|
||||||
|
Copyright (c) 2026 Lars Winter
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy of
|
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
|
this software and associated documentation files (the "Software"), to deal in
|
||||||
|
|||||||
@@ -2,19 +2,10 @@
|
|||||||
|
|
||||||
This is the portfolio website and blog of Lars Winter.
|
This is the portfolio website and blog of Lars Winter.
|
||||||
|
|
||||||
## Table of Contents
|
## License
|
||||||
- [Installation](#installation)
|
|
||||||
- [Usage](#usage)
|
|
||||||
- [Structure](#structure)
|
|
||||||
|
|
||||||
## Installation
|
Code in this repository is licensed under the MIT License. See the `LICENSE` file.
|
||||||
```bash
|
|
||||||
git clone <repo>
|
|
||||||
cd project
|
|
||||||
npm install # if applicable
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage
|
## Asset notice
|
||||||
Quick start example.
|
|
||||||
|
|
||||||
## Structure
|
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.
|
||||||
@@ -0,0 +1,69 @@
|
|||||||
|
*, a, span, li {
|
||||||
|
line-height: var(--line-loose);
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
word-spacing: 0.16em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
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: var(--line-loose);
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
word-spacing: 0.16em;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
+313
-79
@@ -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;
|
||||||
@@ -65,7 +66,7 @@
|
|||||||
--color-neutral-600: #5B5B5B;
|
--color-neutral-600: #5B5B5B;
|
||||||
--color-neutral-700: #3D3D3D;
|
--color-neutral-700: #3D3D3D;
|
||||||
--color-neutral-800: #292929;
|
--color-neutral-800: #292929;
|
||||||
--color-neutral-900: #0F0F0F;
|
--color-neutral-900: #121212;
|
||||||
|
|
||||||
--color-orange-red-100: #FFE7CC;
|
--color-orange-red-100: #FFE7CC;
|
||||||
--color-orange-red-200: #FFC999;
|
--color-orange-red-200: #FFC999;
|
||||||
@@ -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);
|
||||||
@@ -94,6 +110,8 @@
|
|||||||
--text-h5: clamp(1.25rem, 1.15rem + 0.25vw, 1.5rem);
|
--text-h5: clamp(1.25rem, 1.15rem + 0.25vw, 1.5rem);
|
||||||
--text-h6: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
|
--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-body: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
|
||||||
--text-small: 0.875rem;
|
--text-small: 0.875rem;
|
||||||
--text-button: clamp(1.25rem, 1.15rem + 0.25vw, 1.5rem);
|
--text-button: clamp(1.25rem, 1.15rem + 0.25vw, 1.5rem);
|
||||||
@@ -126,9 +144,6 @@
|
|||||||
--radius-xl: 2rem;
|
--radius-xl: 2rem;
|
||||||
--radius-xxl: 2.5rem;
|
--radius-xxl: 2.5rem;
|
||||||
|
|
||||||
--shadow-box: 0px 2px 8px rgba(0, 0, 0, 0.4), 0px 1px 4px rgba(0, 0, 0, 0.12);
|
|
||||||
--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);
|
|
||||||
|
|
||||||
/* 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));
|
||||||
@@ -150,13 +165,29 @@
|
|||||||
|
|
||||||
--color-text-primary: light-dark(var(--color-neutral-900), var(--color-neutral-100));
|
--color-text-primary: light-dark(var(--color-neutral-900), var(--color-neutral-100));
|
||||||
--color-text-secondary: light-dark(var(--color-neutral-700), var(--color-neutral-400));
|
--color-text-secondary: light-dark(var(--color-neutral-700), var(--color-neutral-400));
|
||||||
|
--color-text-primary-inverted: light-dark(var(--color-neutral-100), var(--color-neutral-900));
|
||||||
|
--color-text-secondary-inverted: light-dark(var(--color-neutral-400), var(--color-neutral-700));
|
||||||
|
|
||||||
--color-primary-button: var(--color-orange-red-500);
|
--color-button-primary: var(--color-orange-red-500);
|
||||||
--color-primary-button-hover: var(--color-orange-500);
|
--color-button-primary-hover: var(--color-orange-500);
|
||||||
--color-primary-button-active: var(--color-orange-red-600);
|
--color-button-primary-active: var(--color-orange-red-600);
|
||||||
|
|
||||||
--color-text-button: var(--color-neutral-900);
|
--color-button-secondary: light-dark(var(--color-neutral-200), var(--color-neutral-700));
|
||||||
--color-text-button-active: var(--color-neutral-100);
|
--color-button-secondary-hover: light-dark(var(--color-neutral-100), var(--color-neutral-600));
|
||||||
|
--color-button-secondary-active: light-dark(var(--color-neutral-300), var(--color-neutral-800));
|
||||||
|
|
||||||
|
--color-text-button-primary: var(--color-neutral-900);
|
||||||
|
--color-text-button-primary-hover: var(--color-neutral-100);
|
||||||
|
--color-text-button-primary-active: var(--color-neutral-900);
|
||||||
|
|
||||||
|
--color-text-button-secondary: light-dark(var(--color-neutral-800), var(--color-neutral-200));
|
||||||
|
--color-text-button-seconary-hover: light-dark(var(--color-neutral-900), var(--color-neutral-100));
|
||||||
|
--color-text-button-seconary-active: light-dark(var(--color-neutral-900), var(--color-neutral-100));
|
||||||
|
|
||||||
|
--shadow-box: var(--shadow-light);
|
||||||
|
|
||||||
|
--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;
|
--border: #d8d8d8;
|
||||||
--overlay: rgb(12 12 12 / 0.24);
|
--overlay: rgb(12 12 12 / 0.24);
|
||||||
@@ -173,14 +204,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;
|
||||||
@@ -199,9 +235,7 @@ h3,
|
|||||||
h4,
|
h4,
|
||||||
h5,
|
h5,
|
||||||
h6,
|
h6,
|
||||||
p,
|
p {
|
||||||
li {
|
|
||||||
scroll-margin-top: 80px;
|
|
||||||
width: clamp(min(100%, 40ch), 50ch, min(100%, 60ch));
|
width: clamp(min(100%, 40ch), 50ch, min(100%, 60ch));
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -290,27 +324,27 @@ h1, h2, h3, h4, h5, h6 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
h1, .size-h1 {
|
h1, .size-h1 {
|
||||||
font-size: var(--text-h1);
|
font-size: round(down, var(--text-h1), var(--round-interval));
|
||||||
}
|
}
|
||||||
|
|
||||||
h2, .size-h2 {
|
h2, .size-h2 {
|
||||||
font-size: var(--text-h2);
|
font-size: round(down, var(--text-h2), var(--round-interval));
|
||||||
}
|
}
|
||||||
|
|
||||||
h3, .size-h3 {
|
h3, .size-h3 {
|
||||||
font-size: var(--text-h3);
|
font-size: round(down, var(--text-h3), var(--round-interval));
|
||||||
}
|
}
|
||||||
|
|
||||||
h4, .size-h4 {
|
h4, .size-h4 {
|
||||||
font-size: var(--text-h4);
|
font-size: round(down, var(--text-h4), var(--round-interval));
|
||||||
}
|
}
|
||||||
|
|
||||||
h5, .size-h5 {
|
h5, .size-h5 {
|
||||||
font-size: var(--text-h5);
|
font-size: round(down, var(--text-h5), var(--round-interval));
|
||||||
}
|
}
|
||||||
|
|
||||||
h6, .size-h6 {
|
h6, .size-h6 {
|
||||||
font-size: var(--text-h6);
|
font-size: round(down, var(--text-h6), var(--round-interval));
|
||||||
}
|
}
|
||||||
|
|
||||||
p, ul, ol, li {
|
p, ul, ol, li {
|
||||||
@@ -318,7 +352,7 @@ p, ul, ol, li {
|
|||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-feature-settings: "ss01" 1, "ss02" 1;
|
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);
|
line-height: var(--line-relaxed);
|
||||||
margin: var(--spacing-3) 0 var(--spacing-6) 0;
|
margin: var(--spacing-3) 0 var(--spacing-6) 0;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
@@ -337,12 +371,17 @@ 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, .link-button {
|
button, .button-primary, .button-secondary, .menu-button, .logo {
|
||||||
|
appearance: none;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
min-height: 44px;
|
min-height: 44px;
|
||||||
font-family: "MD IO", monospace;
|
font-family: "MD IO", monospace;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@@ -350,33 +389,88 @@ button, .link-button {
|
|||||||
line-height: var(--line-normal);
|
line-height: var(--line-normal);
|
||||||
letter-spacing: 0.025rem;
|
letter-spacing: 0.025rem;
|
||||||
padding: 0.875rem 1rem;
|
padding: 0.875rem 1rem;
|
||||||
min-height: 44px;
|
font-size: round(down, var(--text-button), var(--round-interval));
|
||||||
background: var(--color-primary-button);
|
|
||||||
font-size: var(--text-button);
|
|
||||||
color: var(--color-text-button);
|
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: var(--radius-lg);
|
border-radius: var(--radius-xxl);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, .button-primary, .logo {
|
||||||
|
background: var(--color-button-primary);
|
||||||
|
color: var(--color-text-button-primary);
|
||||||
box-shadow: var(--shadow-button);
|
box-shadow: var(--shadow-button);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-secondary {
|
||||||
|
background: var(--color-button-secondary);
|
||||||
|
color: var(--color-text-button-secondary);
|
||||||
|
box-shadow: var(--shadow-button);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo, .button-secondary {
|
||||||
|
padding: 1rem;
|
||||||
|
aspect-ratio: 1/1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo svg {
|
||||||
|
height: 2em;
|
||||||
|
width: 2em;
|
||||||
|
flex: none;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo svg path {
|
||||||
|
fill: currentColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (hover: hover) {
|
||||||
|
button:hover, .button-primary:hover, .button-secondary:hover, .logo:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
transform: scale(1.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover, .link-button:hover {
|
button:hover, .button-primary:hover, .logo:hover {
|
||||||
background: var(--color-primary-button-hover);
|
background: var(--color-button-primary-hover);
|
||||||
color: var(--color-text-button);
|
color: var(--color-text-button-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
button:active, .link-button:active {
|
.button-secondary:hover {
|
||||||
background: var(--color-primary-button-active);
|
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);
|
box-shadow: var(--shadow-button-active);
|
||||||
color: var(--color-text-button-active);
|
text-decoration: none;
|
||||||
|
transform: scale(1.00);
|
||||||
}
|
}
|
||||||
|
|
||||||
button:visited, .link-button:visited {
|
button:active, .button-primary:active, .logo:active {
|
||||||
color: var(--color-text-button);
|
background: var(--color-button-primary-active);
|
||||||
|
color: var(--color-text-button-primary-active);
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-secondary:active {
|
||||||
|
background: var(--color-button-secondary-active);
|
||||||
|
color: var(--color-text-button-secondary-active);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* button:visited, .button-primary:visited, .logo:visited {
|
||||||
|
background: var(--color-button-primary);
|
||||||
|
color: var(--color-text-button-primary);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.link-button span {
|
.button-secondary:visited {
|
||||||
|
background: var(--color-button-secondary);
|
||||||
|
color: var(--color-text-button-secondary);
|
||||||
|
text-decoration: none;
|
||||||
|
} */
|
||||||
|
|
||||||
|
.button-primary span {
|
||||||
margin-right: 0.3em;
|
margin-right: 0.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -384,12 +478,144 @@ button:visited, .link-button:visited {
|
|||||||
Layout styles
|
Layout styles
|
||||||
======================= */
|
======================= */
|
||||||
|
|
||||||
|
/* Site header */
|
||||||
|
|
||||||
|
.site-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
padding-top: max(1px, env(safe-area-inset-top));
|
||||||
|
z-index: 100;
|
||||||
|
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 {
|
||||||
|
width: 900px;
|
||||||
|
padding: var(--spacing-5) var(--spacing-6) var(--spacing-4) var(--spacing-6);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-left, .menu-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: stretch;
|
||||||
|
gap: var(--spacing-4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.desktop-nav {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
display: flex;
|
||||||
|
align-self: stretch;
|
||||||
|
background: var(--color-button-secondary);
|
||||||
|
border-radius: var(--radius-xxl);
|
||||||
|
box-shadow: var(--shadow-button);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-button {
|
||||||
|
background: none;
|
||||||
|
color: var(--color-text-button-secondary);
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-button:hover,
|
||||||
|
.desktop-nav a[aria-current="page"]:hover,
|
||||||
|
.mobile-menu a[aria-current="page"]:hover {
|
||||||
|
background: var(--color-button-secondary-hover);
|
||||||
|
color: var(--color-text-button-seconary-hover);
|
||||||
|
text-decoration: none;
|
||||||
|
transform: scale(1.03);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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"] {
|
||||||
|
background: light-dark(var(--color-neutral-400), var(--color-neutral-800));
|
||||||
|
color: var(--color-text-button-seconary-active);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-button:active,
|
||||||
|
.desktop-nav a[aria-current="page"]:active,
|
||||||
|
.mobile-menu a[aria-current="page"]:active {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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: currentcolor;
|
||||||
|
height: 1em;
|
||||||
|
width: 1em;
|
||||||
|
flex: none;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Maint content */
|
||||||
|
|
||||||
main, footer {
|
main, footer {
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
border: none;
|
border: none;
|
||||||
margin-left:auto;
|
margin-left:auto;
|
||||||
margin-right:auto;
|
margin-right:auto;
|
||||||
padding: var(--spacing-4) var(--spacing-6);
|
padding: 0 var(--spacing-6) var(--spacing-4) var(--spacing-6);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@@ -412,7 +638,7 @@ footer {
|
|||||||
font-family: "MD IO", monospace;
|
font-family: "MD IO", monospace;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: var(--text-small);
|
font-size: round(down, var(--text-small), var(--round-interval));
|
||||||
line-height: var(--line-relaxed);
|
line-height: var(--line-relaxed);
|
||||||
color: var(--color-text-secondary);
|
color: var(--color-text-secondary);
|
||||||
}
|
}
|
||||||
@@ -529,6 +755,8 @@ footer a:visited {
|
|||||||
color: var(--color-neutral-900);
|
color: var(--color-neutral-900);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
|
||||||
.footer-content {
|
.footer-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
@@ -541,40 +769,28 @@ 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
|
||||||
======================= */
|
======================= */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 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
|
* Hide visually and from screen readers
|
||||||
*/
|
*/
|
||||||
@@ -652,9 +868,19 @@ footer a:visited {
|
|||||||
Media Queries for Responsive Design.
|
Media Queries for Responsive Design.
|
||||||
======================= */
|
======================= */
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--shadow-box: var(--shadow-dark);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@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: var(--spacing-4) var(--spacing-5);
|
padding: 0 var(--spacing-5) var(--spacing-4) var(--spacing-5);
|
||||||
}
|
}
|
||||||
.footer-content {
|
.footer-content {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -666,13 +892,9 @@ footer a:visited {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@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);
|
||||||
@@ -684,8 +906,20 @@ footer a:visited {
|
|||||||
|
|
||||||
@media screen and (max-width:375px) {
|
@media screen and (max-width:375px) {
|
||||||
main {
|
main {
|
||||||
|
padding: 0 var(--spacing-4) var(--spacing-4) var(--spacing-4);
|
||||||
|
}
|
||||||
|
.menu-bar {
|
||||||
padding: 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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media print,
|
@media print,
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 21 KiB |
BIN
Binary file not shown.
|
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 9.6 KiB |
+33
-54
@@ -3,9 +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>
|
||||||
<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">
|
||||||
@@ -20,62 +21,42 @@
|
|||||||
<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>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header class="site-header">
|
<div id="skipLink">
|
||||||
<a class="logo" href="/">Logo</a>
|
<a href="#siteContent">Skip to content</a>
|
||||||
|
|
||||||
<nav class="desktop-nav" aria-label="Primary navigation">
|
|
||||||
<ul>
|
|
||||||
<li><a href="#">Home</a></li>
|
|
||||||
<li><a href="#">Work</a></li>
|
|
||||||
<li><a href="#">About</a></li>
|
|
||||||
<li><a href="#">Contact</a></li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="menu-toggle"
|
|
||||||
id="menuToggle"
|
|
||||||
type="button"
|
|
||||||
aria-expanded="false"
|
|
||||||
aria-controls="mobileMenu"
|
|
||||||
aria-haspopup="true"
|
|
||||||
aria-label="Open menu"
|
|
||||||
>
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
</button>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="menu-overlay" id="menuOverlay" hidden></div>
|
|
||||||
|
|
||||||
<aside
|
|
||||||
class="mobile-menu"
|
|
||||||
id="mobileMenu"
|
|
||||||
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">
|
|
||||||
✕
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nav aria-label="Mobile navigation">
|
<header class="site-header">
|
||||||
|
<div class="menu-bar">
|
||||||
|
<div class="menu-left">
|
||||||
|
<a class="logo" href="/">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" aria-hidden="true" focusable="false" viewBox="0 0 1080 1080"><path d="M1000.022 50H499.59c-20.565 0-34.827 20.502-27.676 39.783l146.561 395.171c8.419 22.699 40.635 22.382 48.605-.478l61.821-177.315c6.903-19.8 34.906-19.8 41.809 0l61.821 177.315c7.97 22.861 40.187 23.178 48.605.478l146.561-395.171c7.151-19.281-7.112-39.783-27.676-39.783Z"/><path d="M360 538V106c0-30.928-25.072-56-56-56H106c-30.928 0-56 25.072-56 56v868c0 30.928 25.072 56 56 56h868c30.928 0 56-25.072 56-56V650c0-30.928-25.072-56-56-56H416c-30.928 0-56-25.072-56-56"/></svg>
|
||||||
|
<span class="visually-hidden">Home page</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="menu-right">
|
||||||
|
<nav class="desktop-nav-secondary" aria-label="Secondary navigation">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="#">Home</a></li>
|
<li><button type="button" id="a11y-toggle" aria-pressed="false" class="button-secondary">
|
||||||
<li><a href="#">Work</a></li>
|
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
|
||||||
<li><a href="#">About</a></li>
|
<path fill="currentColor" d="M21 10h-6v12h-2v-6h-2v6H9V10H3V8h18zm-9-8a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5"/>
|
||||||
<li><a href="#">Contact</a></li>
|
</svg><span class="visually-hidden">Make the website more visually accessible</span></button></li>
|
||||||
|
<li><button type="button" id="theme-toggle" class="button-secondary"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" fill-rule="evenodd" d="M5.302 4.574a9.96 9.96 0 0 1 6.697-2.57L12 2l.134.002a10.1 10.1 0 0 1 3.015.507l.223.076q.12.043.24.091.102.038.203.08.117.047.232.1.107.045.213.095.105.05.21.104.116.056.23.117l.153.084q.135.074.27.154.105.064.21.132.091.056.183.115.131.088.261.182l.154.109.21.162q.092.071.185.146l.123.105q.32.268.622.568l.355.373q.51.565.917 1.182l.06.095q.104.16.202.323l.082.145q.076.134.15.27l.085.166q.067.13.13.264.042.09.081.182.063.138.122.279l.049.127q.063.16.12.32.027.075.05.15.051.145.096.292l.058.206a10 10 0 0 1 .173.716l.037.201.044.254a10 10 0 0 1 .081.695 10.3 10.3 0 0 1-.084 2.374 10 10 0 0 1-.13.678 10 10 0 0 1-.184.694 10 10 0 0 1-.148.448q-.046.13-.098.26l-.075.192-.1.233q-.046.106-.095.213l-.104.21-.117.229-.095.171q-.07.127-.143.252-.065.106-.132.21-.058.096-.12.19-.087.128-.178.255l-.108.154q-.08.105-.163.209-.071.094-.145.186l-.105.123a10 10 0 0 1-.94.976q-.375.337-.773.63l-.098.07q-.147.105-.295.205l-.148.095q-.128.083-.258.162l-.163.093q-.127.075-.257.143-.087.046-.175.09-.12.062-.242.12-.102.048-.205.094-.117.052-.236.102l-.175.072a10 10 0 0 1-1.147.372q-.108.03-.218.056a10 10 0 0 1-.293.064l-.146.03a10 10 0 0 1-.294.05l-.187.029q-.135.018-.27.032l-.189.022q-.157.013-.316.022l-.15.01a9.97 9.97 0 0 1-7.162-2.563l-.373-.355c-3.905-3.905-3.905-10.237 0-14.142zm1.041 1.77A8 8 0 0 0 12 20V4a7.98 7.98 0 0 0-5.657 2.343"/>
|
||||||
|
</svg><span class="visually-hidden">Change light/dark mode</span></button></li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</aside>
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
<main id="siteContent" class="page-content">
|
<main id="siteContent" class="page-content">
|
||||||
|
|
||||||
@@ -83,22 +64,20 @@
|
|||||||
|
|
||||||
<header class="content-box content-intro">
|
<header class="content-box content-intro">
|
||||||
<h1 class="headline size-h2">
|
<h1 class="headline size-h2">
|
||||||
Hey, I am Lars Winter, a graphic designer from Hamburg. I conceptualize and design projects with a focus on corporate design, design systems, icon design, web design, and editorial design.
|
Hey, I am Lars Winter, a graphic designer from Hamburg. I conceptualize and design projects focused on UX/UI design, design systems, icon design, corporate design, and editorial design.
|
||||||
</h1>
|
</h1>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="content-box content-text">
|
<section class="content-box content-text">
|
||||||
<p class="text">
|
<p class="text">
|
||||||
As usual, my portfolio is a work in progress and currently only available on request. Please feel free to contact me <a href="mailto:contact@larswinter.me">via email</a> for work collaborations and other requests. You can also find me on one of those fancy social networks, like <a rel="me" href="https://mastodon.social/@larswinter">Mastodon</a>, <a href="https://www.linkedin.com/in/larswinter">LinkedIn</a> (if really necessary), <del>Instagram</del>, and <del>Twitter</del>.
|
As usual, my portfolio is a work in progress and currently only available on request. Please feel free to contact me <a href="mailto:contact@larswinter.me">via email</a> for work collaborations and other requests. You can also find me on one of those fancy social networks, like <a rel="me" href="https://mastodon.social/@larswinter">Mastodon</a>, <a href="https://www.linkedin.com/in/larswinter">LinkedIn</a> (if really necessary), <del>Instagram</del>, and <del>Twitter</del>.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</section>
|
||||||
|
|
||||||
<div class="content-box placeholder">
|
<div class="content-box placeholder">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <div class="footer-fade"></div> -->
|
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
@@ -123,7 +102,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<!-- Add your site or application content here -->
|
<!-- Add your site or application content here -->
|
||||||
<script src="js/app.js"></script>
|
<!-- <script src="js/app.js" defer></script> -->
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
@@ -1,57 +1,98 @@
|
|||||||
const body = document.body;
|
// accessibility toggle
|
||||||
const menuToggle = document.getElementById('menuToggle');
|
|
||||||
const menuClose = document.getElementById('menuClose');
|
|
||||||
const menuOverlay = document.getElementById('menuOverlay');
|
|
||||||
const mobileMenu = document.getElementById('mobileMenu');
|
|
||||||
const siteContent = document.getElementById('siteContent');
|
|
||||||
|
|
||||||
function openMenu() {
|
{
|
||||||
body.classList.add('menu-open');
|
const STORAGE_KEY = 'extra-css-enabled';
|
||||||
menuOverlay.hidden = false;
|
|
||||||
menuToggle.classList.add('is-open');
|
function applyOverrideState(enabled) {
|
||||||
menuToggle.setAttribute('aria-expanded', 'true');
|
const link = document.getElementById('a11y-css');
|
||||||
menuToggle.setAttribute('aria-label', 'Close menu');
|
const button = document.getElementById('a11y-toggle');
|
||||||
mobileMenu.setAttribute('aria-hidden', 'false');
|
if (!link) return;
|
||||||
siteContent.setAttribute('inert', '');
|
|
||||||
menuClose.focus();
|
link.disabled = !enabled;
|
||||||
|
button?.setAttribute('aria-pressed', String(enabled));
|
||||||
}
|
}
|
||||||
|
|
||||||
function closeMenu() {
|
const enabled = localStorage.getItem(STORAGE_KEY) === 'true';
|
||||||
body.classList.remove('menu-open');
|
applyOverrideState(enabled);
|
||||||
menuToggle.classList.remove('is-open');
|
|
||||||
menuToggle.setAttribute('aria-expanded', 'false');
|
|
||||||
menuToggle.setAttribute('aria-label', 'Open menu');
|
|
||||||
mobileMenu.setAttribute('aria-hidden', 'true');
|
|
||||||
siteContent.removeAttribute('inert');
|
|
||||||
menuToggle.focus();
|
|
||||||
|
|
||||||
window.setTimeout(() => {
|
document.getElementById('a11y-toggle')?.addEventListener('click', () => {
|
||||||
if (!body.classList.contains('menu-open')) {
|
const nextState = localStorage.getItem(STORAGE_KEY) !== 'true';
|
||||||
menuOverlay.hidden = true;
|
localStorage.setItem(STORAGE_KEY, String(nextState));
|
||||||
}
|
applyOverrideState(nextState);
|
||||||
}, 250);
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 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 toggleMenu() {
|
function getSavedTheme() {
|
||||||
if (body.classList.contains('menu-open')) {
|
try {
|
||||||
closeMenu();
|
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 {
|
} else {
|
||||||
openMenu();
|
initThemeToggle();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
menuToggle.addEventListener('click', toggleMenu);
|
|
||||||
menuClose.addEventListener('click', closeMenu);
|
|
||||||
menuOverlay.addEventListener('click', closeMenu);
|
|
||||||
|
|
||||||
document.addEventListener('keydown', (event) => {
|
|
||||||
if (event.key === 'Escape' && body.classList.contains('menu-open')) {
|
|
||||||
closeMenu();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
if (window.innerWidth >= 768 && body.classList.contains('menu-open')) {
|
|
||||||
closeMenu();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
+41
-7
@@ -3,9 +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>
|
||||||
<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">
|
||||||
@@ -20,17 +21,50 @@
|
|||||||
<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>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
<div id="skipLink">
|
||||||
|
<a href="#siteContent">Skip to content</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="menu-bar">
|
||||||
|
<div class="menu-left">
|
||||||
|
<a class="logo" href="/">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" aria-hidden="true" focusable="false" viewBox="0 0 1080 1080"><path d="M1000.022 50H499.59c-20.565 0-34.827 20.502-27.676 39.783l146.561 395.171c8.419 22.699 40.635 22.382 48.605-.478l61.821-177.315c6.903-19.8 34.906-19.8 41.809 0l61.821 177.315c7.97 22.861 40.187 23.178 48.605.478l146.561-395.171c7.151-19.281-7.112-39.783-27.676-39.783Z"/><path d="M360 538V106c0-30.928-25.072-56-56-56H106c-30.928 0-56 25.072-56 56v868c0 30.928 25.072 56 56 56h868c30.928 0 56-25.072 56-56V650c0-30.928-25.072-56-56-56H416c-30.928 0-56-25.072-56-56"/></svg>
|
||||||
|
<span class="visually-hidden">Home page</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</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">
|
||||||
|
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" d="M21 10h-6v12h-2v-6h-2v6H9V10H3V8h18zm-9-8a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5"/>
|
||||||
|
</svg><span class="visually-hidden">Make the website more visually accessible</span></button></li>
|
||||||
|
<li><button type="button" id="theme-toggle" class="button-secondary"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" fill-rule="evenodd" d="M5.302 4.574a9.96 9.96 0 0 1 6.697-2.57L12 2l.134.002a10.1 10.1 0 0 1 3.015.507l.223.076q.12.043.24.091.102.038.203.08.117.047.232.1.107.045.213.095.105.05.21.104.116.056.23.117l.153.084q.135.074.27.154.105.064.21.132.091.056.183.115.131.088.261.182l.154.109.21.162q.092.071.185.146l.123.105q.32.268.622.568l.355.373q.51.565.917 1.182l.06.095q.104.16.202.323l.082.145q.076.134.15.27l.085.166q.067.13.13.264.042.09.081.182.063.138.122.279l.049.127q.063.16.12.32.027.075.05.15.051.145.096.292l.058.206a10 10 0 0 1 .173.716l.037.201.044.254a10 10 0 0 1 .081.695 10.3 10.3 0 0 1-.084 2.374 10 10 0 0 1-.13.678 10 10 0 0 1-.184.694 10 10 0 0 1-.148.448q-.046.13-.098.26l-.075.192-.1.233q-.046.106-.095.213l-.104.21-.117.229-.095.171q-.07.127-.143.252-.065.106-.132.21-.058.096-.12.19-.087.128-.178.255l-.108.154q-.08.105-.163.209-.071.094-.145.186l-.105.123a10 10 0 0 1-.94.976q-.375.337-.773.63l-.098.07q-.147.105-.295.205l-.148.095q-.128.083-.258.162l-.163.093q-.127.075-.257.143-.087.046-.175.09-.12.062-.242.12-.102.048-.205.094-.117.052-.236.102l-.175.072a10 10 0 0 1-1.147.372q-.108.03-.218.056a10 10 0 0 1-.293.064l-.146.03a10 10 0 0 1-.294.05l-.187.029q-.135.018-.27.032l-.189.022q-.157.013-.316.022l-.15.01a9.97 9.97 0 0 1-7.162-2.563l-.373-.355c-3.905-3.905-3.905-10.237 0-14.142zm1.041 1.77A8 8 0 0 0 12 20V4a7.98 7.98 0 0 0-5.657 2.343"/>
|
||||||
|
</svg><span class="visually-hidden">Change light/dark mode</span></button></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
|
||||||
<section class="align-left">
|
<section class="align-left">
|
||||||
|
|
||||||
<a class="link-button" href="/"><span>←</span>Home</a>
|
<!-- <div class="spacer-xl" aria-hidden="true"></div> -->
|
||||||
|
|
||||||
<div class="spacer-xl" aria-hidden="true"></div>
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<a href="#en-text">English</a> <a href="#de-text">Deutsch</a>
|
<a href="#en-text">English</a> <a href="#de-text">Deutsch</a>
|
||||||
@@ -110,7 +144,7 @@
|
|||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<!-- Add your site or application content here -->
|
<!-- Add your site or application content here -->
|
||||||
<script src="js/app.js"></script>
|
<!-- <script src="js/app.js" defer></script> -->
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
+41
-7
@@ -3,9 +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>
|
||||||
<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">
|
||||||
@@ -20,17 +21,50 @@
|
|||||||
<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>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
<div id="skipLink">
|
||||||
|
<a href="#siteContent">Skip to content</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<header class="site-header">
|
||||||
|
<div class="menu-bar">
|
||||||
|
<div class="menu-left">
|
||||||
|
<a class="logo" href="/">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" aria-hidden="true" focusable="false" viewBox="0 0 1080 1080"><path d="M1000.022 50H499.59c-20.565 0-34.827 20.502-27.676 39.783l146.561 395.171c8.419 22.699 40.635 22.382 48.605-.478l61.821-177.315c6.903-19.8 34.906-19.8 41.809 0l61.821 177.315c7.97 22.861 40.187 23.178 48.605.478l146.561-395.171c7.151-19.281-7.112-39.783-27.676-39.783Z"/><path d="M360 538V106c0-30.928-25.072-56-56-56H106c-30.928 0-56 25.072-56 56v868c0 30.928 25.072 56 56 56h868c30.928 0 56-25.072 56-56V650c0-30.928-25.072-56-56-56H416c-30.928 0-56-25.072-56-56"/></svg>
|
||||||
|
<span class="visually-hidden">Home page</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
</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">
|
||||||
|
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" d="M21 10h-6v12h-2v-6h-2v6H9V10H3V8h18zm-9-8a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5"/>
|
||||||
|
</svg><span class="visually-hidden">Make the website more visually accessible</span></button></li>
|
||||||
|
<li><button type="button" id="theme-toggle" class="button-secondary"><svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">
|
||||||
|
<path fill="currentColor" fill-rule="evenodd" d="M5.302 4.574a9.96 9.96 0 0 1 6.697-2.57L12 2l.134.002a10.1 10.1 0 0 1 3.015.507l.223.076q.12.043.24.091.102.038.203.08.117.047.232.1.107.045.213.095.105.05.21.104.116.056.23.117l.153.084q.135.074.27.154.105.064.21.132.091.056.183.115.131.088.261.182l.154.109.21.162q.092.071.185.146l.123.105q.32.268.622.568l.355.373q.51.565.917 1.182l.06.095q.104.16.202.323l.082.145q.076.134.15.27l.085.166q.067.13.13.264.042.09.081.182.063.138.122.279l.049.127q.063.16.12.32.027.075.05.15.051.145.096.292l.058.206a10 10 0 0 1 .173.716l.037.201.044.254a10 10 0 0 1 .081.695 10.3 10.3 0 0 1-.084 2.374 10 10 0 0 1-.13.678 10 10 0 0 1-.184.694 10 10 0 0 1-.148.448q-.046.13-.098.26l-.075.192-.1.233q-.046.106-.095.213l-.104.21-.117.229-.095.171q-.07.127-.143.252-.065.106-.132.21-.058.096-.12.19-.087.128-.178.255l-.108.154q-.08.105-.163.209-.071.094-.145.186l-.105.123a10 10 0 0 1-.94.976q-.375.337-.773.63l-.098.07q-.147.105-.295.205l-.148.095q-.128.083-.258.162l-.163.093q-.127.075-.257.143-.087.046-.175.09-.12.062-.242.12-.102.048-.205.094-.117.052-.236.102l-.175.072a10 10 0 0 1-1.147.372q-.108.03-.218.056a10 10 0 0 1-.293.064l-.146.03a10 10 0 0 1-.294.05l-.187.029q-.135.018-.27.032l-.189.022q-.157.013-.316.022l-.15.01a9.97 9.97 0 0 1-7.162-2.563l-.373-.355c-3.905-3.905-3.905-10.237 0-14.142zm1.041 1.77A8 8 0 0 0 12 20V4a7.98 7.98 0 0 0-5.657 2.343"/>
|
||||||
|
</svg><span class="visually-hidden">Change light/dark mode</span></button></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
|
|
||||||
<section class="align-left">
|
<section class="align-left">
|
||||||
|
|
||||||
<a class="link-button" href="/"><span>←</span>Home</a>
|
<!-- <div class="spacer-xl" aria-hidden="true"></div> -->
|
||||||
|
|
||||||
<div class="spacer-xl" aria-hidden="true"></div>
|
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
<a href="#en-text">English</a> <a href="#de-text">Deutsch</a>
|
<a href="#en-text">English</a> <a href="#de-text">Deutsch</a>
|
||||||
@@ -144,7 +178,7 @@
|
|||||||
|
|
||||||
|
|
||||||
<!-- Add your site or application content here -->
|
<!-- Add your site or application content here -->
|
||||||
<script src="js/app.js"></script>
|
<!-- <script src="js/app.js" defer></script> -->
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user