adding release tag

shadow depends on light/dark, media query added
change darkest black to #121212
2026-05-14 15:42:13 +02:00 · 2026-05-14 15:29:04 +02:00 · 2026-05-14 13:39:56 +02:00 · 2026-05-13 15:55:50 +02:00 · 2026-05-13 12:20:53 +02:00 · 2026-05-08 11:06:26 +02:00
6 changed files with 105 additions and 339 deletions
@@ -1,4 +1,5 @@
 Copyright (c) HTML5 Boilerplate
+Copyright (c) 2026 Lars Winter

 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in
@@ -16,4 +17,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.
@@ -2,19 +2,10 @@

 This is the portfolio website and blog of Lars Winter.

-## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Structure](#structure)
+## License

-## Installation
-```bash
-git clone <repo>
-cd project
-npm install  # if applicable
-```
+Code in this repository is licensed under the MIT License. See the `LICENSE` file.

-## Usage
-Quick start example.
+## Asset notice

-## Structure
+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.
@@ -65,7 +65,7 @@
  --color-neutral-600: #5B5B5B;
  --color-neutral-700: #3D3D3D;
  --color-neutral-800: #292929;
-  --color-neutral-900: #0F0F0F;
+  --color-neutral-900: #121212;
  
  --color-orange-red-100: #FFE7CC;
  --color-orange-red-200: #FFC999;
@@ -126,9 +126,8 @@
  --radius-xl: 2rem;
  --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);
+  --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));
@@ -158,6 +157,11 @@
  --color-text-button: var(--color-neutral-900);
  --color-text-button-active: 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;
  --overlay: rgb(12 12 12 / 0.24);
  --panel: rgb(255 255 255 / 0.76);
@@ -187,6 +191,10 @@ body {
  font-size: 100%;
  line-height: var(--line-relaxed);
  letter-spacing: 0.025em;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh; 
+  min-height: 100dvh; /* better on modern mobile browsers */
 }

 h1,
@@ -346,12 +354,11 @@ button, .link-button {
  line-height: var(--line-normal);
  letter-spacing: 0.025rem;
  padding: 0.875rem 1rem;
-  min-height: 44px;
  background: var(--color-primary-button);
  font-size: var(--text-button);
  color: var(--color-text-button);
  border: none;
-  border-radius: var(--radius-lg);
+  border-radius: var(--radius-xxl);
  box-shadow: var(--shadow-button);
  text-decoration: none;
 }
@@ -376,193 +383,11 @@ button:visited, .link-button:visited {
  margin-right: 0.3em;
 }

-/* =======================
- Menu styles
- ======================= */
-
-.site-header {
-   display: flex;
-   align-items: center;
-   justify-content: space-between;
-   gap: 1rem;
-   padding: 1rem 1.25rem;
-   border-bottom: 1px solid var(--border);
-   position: sticky;
-   top: 0;
-   background: rgb(255 255 255 / 0.88);
-   backdrop-filter: blur(10px);
-   -webkit-backdrop-filter: blur(10px);
-   z-index: 100;
- }
- 
- .logo {
-   color: inherit;
-   text-decoration: none;
-   font-weight: 700;
- }
- 
- .desktop-nav ul,
- .mobile-menu ul {
-   list-style: none;
-   margin: 0;
-   padding: 0;
- }
- 
- .desktop-nav ul {
-   display: flex;
-   gap: 1.25rem;
- }
- 
- .desktop-nav a,
- .mobile-menu a {
-   color: inherit;
-   text-decoration: none;
- }
- 
- .menu-toggle,
- .menu-close {
-   width: 44px;
-   height: 44px;
-   border: 1px solid var(--border);
-   border-radius: 0.75rem;
-   background: #fff;
-   color: inherit;
-   cursor: pointer;
- }
- 
- .menu-toggle {
-   display: none;
-   position: relative;
- }
- 
- .menu-toggle span {
-   position: absolute;
-   left: 50%;
-   width: 20px;
-   height: 2px;
-   background: currentColor;
-   border-radius: 999px;
-   transform-origin: center;
-   transition: transform 0.25s ease, opacity 0.25s ease;
- }
- 
- .menu-toggle span:nth-child(1) {
-   top: 14px;
-   transform: translateX(-50%);
- }
- 
- .menu-toggle span:nth-child(2) {
-   top: 21px;
-   transform: translateX(-50%);
- }
- 
- .menu-toggle span:nth-child(3) {
-   top: 28px;
-   transform: translateX(-50%);
- }
- 
- .menu-toggle.is-open span:nth-child(1) {
-   top: 21px;
-   transform: translateX(-50%) rotate(45deg);
- }
- 
- .menu-toggle.is-open span:nth-child(2) {
-   opacity: 0;
- }
- 
- .menu-toggle.is-open span:nth-child(3) {
-   top: 21px;
-   transform: translateX(-50%) rotate(-45deg);
- }
- 
- .menu-overlay {
-   position: fixed;
-   inset: 0;
-   background: var(--overlay);
-   backdrop-filter: blur(10px);
-   -webkit-backdrop-filter: blur(10px);
-   opacity: 0;
-   pointer-events: none;
-   transition: opacity 0.25s ease;
-   z-index: 200;
- }
- 
- .mobile-menu {
-   position: fixed;
-   inset: auto 1rem 1rem 1rem;
-   width: auto;
-   max-width: 24rem;
-   margin-inline: auto;
-   background: var(--panel);
-   backdrop-filter: blur(16px);
-   -webkit-backdrop-filter: blur(16px);
-   border: 1px solid rgb(255 255 255 / 0.45);
-   border-radius: 1rem;
-   box-shadow: 0 20px 50px rgb(0 0 0 / 0.16);
-   padding: 1rem;
-   opacity: 0;
-   transform: translateY(1rem) scale(0.98);
-   pointer-events: none;
-   transition: opacity 0.25s ease, transform 0.25s ease;
-   z-index: 300;
- }
- 
- .mobile-menu__header {
-   display: flex;
-   align-items: center;
-   justify-content: space-between;
-   margin-bottom: 1rem;
- }
- 
- .mobile-menu ul {
-   display: grid;
-   gap: 0.5rem;
- }
- 
- .mobile-menu a {
-   display: block;
-   padding: 0.95rem 1rem;
-   border-radius: 0.75rem;
-   background: rgb(255 255 255 / 0.56);
- }
- 
- .page-content {
-   padding: 3rem 1.25rem;
- }
- 
- .menu-open .menu-overlay {
-   opacity: 1;
-   pointer-events: auto;
- }
- 
- .menu-open .mobile-menu {
-   opacity: 1;
-   transform: translateY(0) scale(1);
-   pointer-events: auto;
- }
- 
- @media (max-width: 767px) {
-   .desktop-nav {
-     display: none;
-   }
- 
-   .menu-toggle {
-     display: inline-block;
-   }
- }
- 
- @media (min-width: 768px) {
-   .menu-overlay,
-   .mobile-menu {
-     display: none;
-   }
- }
-
 /* =======================
 Layout styles
 ======================= */

-main {
+main, footer {
  max-width: 900px;
  border: none;
  margin-left:auto;
@@ -575,8 +400,36 @@ main {
  justify-items: stretch;
  justify-content: space-between;
  row-gap: var(--spacing-4);
-  min-height: 100vh; 
-  min-height: 100dvh; /* better on modern mobile browsers */
+}
+
+main {
+  flex: 1;
+}
+
+footer {
+  margin-top: var(--spacing-3);
+  padding-top: var(--spacing-4);
+  padding-bottom: var(--spacing-7);
+  padding-left: var(--spacing-5);
+  padding-right: var(--spacing-5);
+  font-family: "MD IO", monospace;
+  font-style: normal;
+  font-weight: 400;
+  font-size: var(--text-small);
+  line-height: var(--line-relaxed);
+  color: var(--color-text-secondary);
+}
+
+footer a {
+  color: var(--color-secondary);
+}
+
+footer a:hover {
+  color: var(--color-secondary-hover);
+}
+
+footer a:visited {
+  color: var(--color-secondary);
 }

 .align-left {
@@ -679,44 +532,6 @@ main {
  color: var(--color-neutral-900);
 }

-footer {
-  margin-top: var(--spacing-3);
-  padding: var(--spacing-4) var(--spacing-5);
-  /* background: var(--color-neutral-800);
-  border: color-mix(in srgb, var(--color-neutral-600) 25%, transparent) solid;
-  border-width: var(--border-width-sm);
-  border-radius: var(--radius-md); */
-  box-sizing: border-box;
-  /* box-shadow: 0px 2px 12px 0px #00000080, 0px 1px 4px 0px #00000066; */
-  font-family: "MD IO", monospace;
-  font-style: normal;
-  font-weight: 400;
-  font-size: var(--text-small);
-  line-height: var(--line-relaxed);
-  color: var(--color-text-secondary);
-  z-index: 20;
-}
-
-footer a {
-	color: var(--color-secondary);
-}
-
-footer a:hover {
-	color: var(--color-secondary-hover);
-}
-
-footer a:visited {
-	color: var(--color-secondary);
-}
-
-/* .footer-fixed {
-	position: fixed;
-	left: auto;
-	right: auto;
-	bottom: 32px;
-	z-index: 20;
-} */
-
 .footer-content {
  display: flex;
  flex-direction: row;
@@ -839,6 +654,12 @@ footer a:visited {
 /* =======================
   Media Queries for Responsive Design.
   ======================= */
+   
+@media (prefers-color-scheme: dark) {
+  :root {
+    --shadow-box: var(--shadow-dark);
+  }
+}

@media screen and (max-width:768px) {
  main {
@@ -25,73 +25,21 @@

 <body>
  
-  <header class="site-header">
-    <a class="logo" href="/">Logo</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>
-  
-    <nav aria-label="Mobile 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>
-  </aside>
-  
-  <main id="siteContent" class="page-content">
+  <main>
    
-    <!-- target="_blank" rel="noopener noreferrer" -->
+    <!--  target="_blank" rel="noopener noreferrer"  -->
    
-    <section class="content-box content-intro">
+    <header class="content-box content-intro">
      <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.
      </h1>
-    </section>
+    </header>
    
-    <div class="content-box content-text">
+    <section class="content-box content-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>.
      </p>
-    </div>
+    </section>
    
    <div class="content-box placeholder">
      
@@ -99,29 +47,31 @@
    
    <!-- <div class="footer-fade"></div> -->
    
-    <footer>
-      <div class="footer-content">
-        <span>© 2018–<span id="year"></span> Lars Winter</span>
-        <div class="footer-links">
-          <div>
-            <a href="/legal-notice.html">Legal notice</a>
-          </div>
-          <div>
-            <a href="/privacy.html">Privacy</a>
-          </div>
-          <div>
-            <a href="/archive">Archived Portfolio</a>
-          </div>
-        </div>
-        <script>
-          document.getElementById('year').textContent = new Date().getFullYear();
-        </script>
-      </div>
-    </footer>
-    
  </main>
+    
+  <footer>
+    <div class="footer-content">
+      <span>© 2018–<span id="year"></span> Lars Winter</span>
+      <div class="footer-links">
+        <div>
+          <a href="/legal-notice.html">Legal notice</a>
+        </div>
+        <div>
+          <a href="/privacy.html">Privacy</a>
+        </div>
+        <div>
+          <a href="/archive">Archived Portfolio</a>
+        </div>
+      </div>
+      <script>
+        document.getElementById('year').textContent = new Date().getFullYear();
+      </script>
+    </div>
+  </footer>
+    
+  
  <!-- Add your site or application content here -->
-  <script src="js/app.js"></script>
+  <!-- <script src="js/app.js"></script> -->

 </body>

@@ -26,7 +26,7 @@
 <body>
  <main>
 	
-	<div class="align-left">
+	<section class="align-left">
 		
 		<a class="link-button" href="/"><span>←</span>Home</a>
 		
@@ -85,7 +85,9 @@
 		<p>Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.</p>
 		
 		<p>Quelle: <a href="https://www.e-recht24.de">https://www.e-recht24.de</a></p>
-	</div>
+	</section>
+	
+  </main>
 	
 	<footer>
 	  <div class="footer-content">
@@ -107,9 +109,8 @@
 	  </div>
 	</footer>
    
-  </main>
  <!-- Add your site or application content here -->
-  <script src="js/app.js"></script>
+  <!-- <script src="js/app.js"></script> -->

 </body>

@@ -26,7 +26,7 @@
 <body>
  <main>
    
-	<div class="align-left">
+	<section class="align-left">
 		
 		<a class="link-button" href="/"><span>←</span>Home</a>
 		
@@ -118,31 +118,33 @@
 		<h3>Anfrage per E-Mail, Telefon oder Telefax</h3> <p>Wenn Sie uns per E-Mail, Telefon oder Telefax kontaktieren, wird Ihre Anfrage inklusive aller daraus hervorgehenden personenbezogenen Daten (Name, Anfrage) zum Zwecke der Bearbeitung Ihres Anliegens bei uns gespeichert und verarbeitet. Diese Daten geben wir nicht ohne Ihre Einwilligung weiter.</p> <p>Die Verarbeitung dieser Daten erfolgt auf Grundlage von Art. 6 Abs. 1 lit. b DSGVO, sofern Ihre Anfrage mit der Erf&uuml;llung eines Vertrags zusammenh&auml;ngt oder zur Durchf&uuml;hrung vorvertraglicher Ma&szlig;nahmen erforderlich ist. In allen &uuml;brigen F&auml;llen beruht die Verarbeitung auf unserem berechtigten Interesse an der effektiven Bearbeitung der an uns gerichteten Anfragen (Art. 6 Abs. 1 lit. f DSGVO) oder auf Ihrer Einwilligung (Art. 6 Abs. 1 lit. a DSGVO) sofern diese abgefragt wurde; die Einwilligung ist jederzeit widerrufbar.</p> <p>Die von Ihnen an uns per Kontaktanfragen &uuml;bersandten Daten verbleiben bei uns, bis Sie uns zur L&ouml;schung auffordern, Ihre Einwilligung zur Speicherung widerrufen oder der Zweck f&uuml;r die Datenspeicherung entf&auml;llt (z.&nbsp;B. nach abgeschlossener Bearbeitung Ihres Anliegens). Zwingende gesetzliche Bestimmungen &ndash; insbesondere gesetzliche Aufbewahrungsfristen &ndash; bleiben unber&uuml;hrt.</p>
 		<p>Quelle: <a href="https://www.e-recht24.de">https://www.e-recht24.de</a></p>
 		
-	</div>
+	</section>
+	
+  </main>
 	
 	<footer>
-	  <div class="footer-content">
+	<div class="footer-content">
 		<span>© 2018–<span id="year"></span> Lars Winter</span>
 		<div class="footer-links">
-		  <div>
+		<div>
 			<a href="/legal-notice.html">Legal notice</a>
-		  </div>
-		  <div>
+		</div>
+		<div>
 			<a href="/privacy.html">Privacy</a>
-		  </div>
-		  <div>
+		</div>
+		<div>
 			<a href="/archive">Archived Portfolio</a>
-		  </div>
+		</div>
 		</div>
 		<script>
-		  document.getElementById('year').textContent = new Date().getFullYear();
+		document.getElementById('year').textContent = new Date().getFullYear();
 		</script>
-	  </div>
+	</div>
 	</footer>
    
-  </main>
+  
  <!-- Add your site or application content here -->
-  <script src="js/app.js"></script>
+  <!-- <script src="js/app.js"></script> -->

 </body>
Author	SHA1	Message	Date
sefaria	524afd03ea	adding release tag	2026-05-14 15:42:13 +02:00
sefaria	cc6fa17247	shadow depends on light/dark, media query added	2026-05-14 15:29:04 +02:00
sefaria	4737b78b8a	change darkest black to #121212	2026-05-14 13:39:56 +02:00
sefaria	2a590a0310	Updated border radius button	2026-05-13 15:55:50 +02:00
sefaria	43d23aacab	change div to section	2026-05-13 12:20:53 +02:00
sefaria	5d888daa1d	Changing license type adding license to README	2026-05-08 11:06:26 +02:00
sefaria	95f0d01d60	Moving footer out of main, adding flexbox to body element, changing divs to sections	2026-05-07 15:09:15 +02:00
sefaria	7530619aef	Remove styling exclusively for feature branch	2026-05-02 13:20:21 +02:00