7 Commits

Author SHA1 Message Date
sefaria be9491f1e8 updated og image assets 2026-05-16 15:16:52 +02:00
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
8 changed files with 28 additions and 79 deletions
+2 -1
View File
@@ -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
@@ -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 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 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 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. SOFTWARE.
+4 -13
View File
@@ -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.
+15 -6
View File
@@ -65,7 +65,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;
@@ -126,9 +126,8 @@
--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-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 */ /* 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));
@@ -158,6 +157,11 @@
--color-text-button: var(--color-neutral-900); --color-text-button: var(--color-neutral-900);
--color-text-button-active: var(--color-neutral-100); --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; --border: #d8d8d8;
--overlay: rgb(12 12 12 / 0.24); --overlay: rgb(12 12 12 / 0.24);
--panel: rgb(255 255 255 / 0.76); --panel: rgb(255 255 255 / 0.76);
@@ -350,12 +354,11 @@ 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;
background: var(--color-primary-button); background: var(--color-primary-button);
font-size: var(--text-button); font-size: var(--text-button);
color: var(--color-text-button); color: var(--color-text-button);
border: none; border: none;
border-radius: var(--radius-lg); border-radius: var(--radius-xxl);
box-shadow: var(--shadow-button); box-shadow: var(--shadow-button);
text-decoration: none; text-decoration: none;
} }
@@ -651,6 +654,12 @@ 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) {
main { main {
Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
View File
Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.1 KiB

After

Width:  |  Height:  |  Size: 9.6 KiB

+5 -57
View File
@@ -25,61 +25,9 @@
<body> <body>
<header class="site-header"> <main>
<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">
<!-- target="_blank" rel="noopener noreferrer" --> <!-- target="_blank" rel="noopener noreferrer" -->
<header class="content-box content-intro"> <header class="content-box content-intro">
<h1 class="headline size-h2"> <h1 class="headline size-h2">
@@ -87,11 +35,11 @@
</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">
@@ -123,7 +71,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"></script> -->
</body> </body>
+1 -1
View File
@@ -110,7 +110,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"></script> -->
</body> </body>
+1 -1
View File
@@ -144,7 +144,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"></script> -->
</body> </body>