shadow depends on light/dark, media query added

LICENSE.txt

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

README.md

@@ -2,19 +2,10 @@
 
 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.

css/style.css

@@ -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-light: 0px 2px 8px rgba(0, 0, 0, 0.3), 0px 1px 4px rgba(0, 0, 0, 0.2);
-  --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-dark: 0px 2px 8px rgba(0, 0, 0, 0.5), 0px 1px 4px rgba(0, 0, 0, 0.2);
-  --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 */
   --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);
@@ -350,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;
 }
@@ -651,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 {

index.html

@@ -35,11 +35,11 @@
       </h1>
     </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">