From b60aaacc163b1a9fc3ed09453701683ec8fdfe39 Mon Sep 17 00:00:00 2001 From: Martin Braun Date: Tue, 21 Apr 2026 09:45:01 +0200 Subject: [PATCH] Flatten edges --- en/imprint.html | 2 +- en/index.html | 2 +- en/join.html | 2 +- en/program.html | 2 +- en/recap.html | 2 +- en/venue.html | 2 +- imprint.html | 2 +- index.html | 2 +- program.html | 2 +- recap.html | 2 +- styles-5.2.css => styles-5.3.css | 75 +++++++++++++++++++------------- venue.html | 2 +- 12 files changed, 55 insertions(+), 42 deletions(-) rename styles-5.2.css => styles-5.3.css (91%) diff --git a/en/imprint.html b/en/imprint.html index 18a83d3..550761f 100644 --- a/en/imprint.html +++ b/en/imprint.html @@ -8,7 +8,7 @@ - + 5th Tübingen Digital Freedom Days diff --git a/en/index.html b/en/index.html index e7c48f9..66a7d92 100644 --- a/en/index.html +++ b/en/index.html @@ -8,7 +8,7 @@ - + 5th Tübingen Digital Freedom Days diff --git a/en/join.html b/en/join.html index fc20c0c..ae0dbf2 100644 --- a/en/join.html +++ b/en/join.html @@ -8,7 +8,7 @@ - + 5th Tübingen Digital Freedom Days diff --git a/en/program.html b/en/program.html index 71b3715..158b595 100644 --- a/en/program.html +++ b/en/program.html @@ -8,7 +8,7 @@ - + 5th Tübingen Digital Freedom Days diff --git a/en/recap.html b/en/recap.html index 34cdd5d..7ecd6c4 100644 --- a/en/recap.html +++ b/en/recap.html @@ -8,7 +8,7 @@ - + 5th Tübingen Digital Freedom Days diff --git a/en/venue.html b/en/venue.html index 817112e..40d85aa 100644 --- a/en/venue.html +++ b/en/venue.html @@ -8,7 +8,7 @@ - + 5th Tübingen Digital Freedom Days diff --git a/imprint.html b/imprint.html index 2a80f84..be5e1f0 100644 --- a/imprint.html +++ b/imprint.html @@ -8,7 +8,7 @@ - + 5. Tübinger Tage der digitalen Freiheit diff --git a/index.html b/index.html index 1fff3a9..c0e5ce2 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - + 5. Tübinger Tage der digitalen Freiheit diff --git a/program.html b/program.html index dbabd1b..2677140 100644 --- a/program.html +++ b/program.html @@ -8,7 +8,7 @@ - + 5. Tübinger Tage der digitalen Freiheit diff --git a/recap.html b/recap.html index d28e0fb..de8319e 100644 --- a/recap.html +++ b/recap.html @@ -8,7 +8,7 @@ - + 5. Tübinger Tage der digitalen Freiheit diff --git a/styles-5.2.css b/styles-5.3.css similarity index 91% rename from styles-5.2.css rename to styles-5.3.css index 476d6be..9a05fce 100644 --- a/styles-5.2.css +++ b/styles-5.3.css @@ -3,6 +3,36 @@ * Handcrafted with ♥ by x~alotl */ + +/** + * Variables + **/ + +:root { + + /* Colors */ + --plum: #26175e; + --sage: #f0fff1; + + --box: #f0fff1; + --text: #26175e; + --button: #52ffdc; + --active: #2b8b8d; + --link: #3203dd; + --shadowRgb: 125, 112, 122; + --boxShadow: 0 0 12px rgba(var(--shadowRgb), 0.3); + + /* Animated Title */ + --weightMin: 200; + --weightMax: 900; + --duration: 2200ms; + --step: 70ms; + + /* Box Clipping */ + --boxEdge: 40px; +} + + /** * Font Faces */ @@ -36,29 +66,6 @@ -/** - * Global Variables - **/ - -:root { - --plum: #26175e; - --sage: #f0fff1; - - --box: #f0fff1; - --text: #26175e; - --button: #52ffdc; - --active: #2b8b8d ; - --link: #3203dd; - --shadow-rgb: 125, 112, 122; - --box-shadow: 0 0 12px rgba(var(--shadow-rgb), 0.3); - - /* Animated Title Variables */ - --wght-min: 200; - --wght-max: 900; - --dur: 2200ms; - --step: 70ms; -} - /** * Base @@ -217,7 +224,13 @@ b { margin-bottom: 2em; padding: 0.5em 2em 1.4em 2em; border: none; - box-shadow: var(--box-shadow); + box-shadow: var(--boxShadow); + clip-path: polygon(var(--boxEdge) 0%, + 100% 0%, + 100% calc(100% - var(--boxEdge)), + calc(100% - var(--boxEdge)) 100%, + 0% 100%, + 0% var(--boxEdge)); } .box-grid { @@ -278,7 +291,7 @@ b { transition: background-color 0.3s ease; border-radius: 0; margin: 0 auto; - box-shadow: var(--box-shadow); + box-shadow: var(--boxShadow); } .button:hover { @@ -374,12 +387,12 @@ b { transition: background-color 0.3s ease, color 0.3s ease; text-align: center; margin: 0 5px; - box-shadow: var(--box-shadow); + box-shadow: var(--boxShadow); } .navigationbar a:hover { transform: scale(1.1); - box-shadow: 0 0 16px rgba(var(--shadow-rgb), 0.5); + box-shadow: 0 0 16px rgba(var(--shadowRgb), 0.5); } .navigationbar a.active { @@ -427,8 +440,8 @@ b { .title .ch { display: inline-block; will-change: font-variation-settings; - font-variation-settings: "wght" var(--wght-min); - animation: wghtWave var(--dur) cubic-bezier(.45, 0, .1, 1) infinite alternate; + font-variation-settings: "wght" var(--weightMin); + animation: wghtWave var(--duration) cubic-bezier(.45, 0, .1, 1) infinite alternate; animation-delay: calc(var(--i) * var(--step)); } @@ -439,11 +452,11 @@ b { @keyframes wghtWave { from { - font-variation-settings: "wght" var(--wght-min); + font-variation-settings: "wght" var(--weightMin); } to { - font-variation-settings: "wght" var(--wght-max); + font-variation-settings: "wght" var(--weightMax); } } diff --git a/venue.html b/venue.html index aa531a9..0670b0c 100644 --- a/venue.html +++ b/venue.html @@ -8,7 +8,7 @@ - + 5. Tübinger Tage der digitalen Freiheit