diff --git a/image/head.png b/image/head.png index 6bd5cfa..21749ff 100644 Binary files a/image/head.png and b/image/head.png differ diff --git a/index.html b/index.html index 814f6f8..011c686 100644 --- a/index.html +++ b/index.html @@ -33,7 +33,8 @@ -
Die fünften Tübinger Tage der digitalen Freiheit (#TDF5) stehen unter dem Motto „Freiräume verschlüsseln". Zu diesem diff --git a/styles-5.0.css b/styles-5.0.css index 6c9b771..06d9ebd 100644 --- a/styles-5.0.css +++ b/styles-5.0.css @@ -41,11 +41,14 @@ **/ :root { - --light: #ecf2eb; - --shadow: #7d707a; - --electric: #d9fbff; - --highlight: #8ae6e1; - --link: #cc30a8; + --plum: #483f6b; + --sage: #d6f3d8; + + --box: #f2fff3; + --text: #4f4577; + --button: #bcf8db; + --active: #6fd4a3; + --link: #7761cd; --shadow-rgb: 125, 112, 122; --box-shadow: 0 0 12px rgba(var(--shadow-rgb), 0.3); @@ -79,12 +82,19 @@ body { } /* Enhance background size for very large screens */ -@media (min-width: 1921px) { +@media (min-width: 1920px) { .background { background-size: 100% auto; } } +/* Scale background proportionally on smaller screens */ +@media (max-width: 1150px) { + .background { + background-size: 167% auto; + } +} + /* The main content area is 1000px wide, unless the screen is smaller than 1150px */ #content { max-width: 1000px; @@ -108,7 +118,7 @@ a, li { font-family: "TitilliumWeb-Regular"; font-size: 1.2em; - color: var(--shadow); + color: var(--text); } h2 { @@ -152,7 +162,7 @@ ul li:before { content: ""; width: 8px; height: 8px; - background-color: var(--shadow); + background-color: var(--text); position: absolute; left: 0; top: 50%; @@ -170,7 +180,7 @@ b { **/ .box { - background: var(--light); + background: var(--box); margin-bottom: 2em; padding: 0.5em 2em 1.4em 2em; border: none; @@ -229,7 +239,7 @@ b { font-weight: bold; text-decoration: none; color: #000; - background-color: var(--electric); + background-color: var(--button); border: none; cursor: pointer; transition: background-color 0.3s ease; @@ -239,7 +249,7 @@ b { } .button:hover { - background-color: var(--highlight); + background-color: var(--active); text-decoration: none; } @@ -251,11 +261,11 @@ b { } .buttons-wrapper { - display: flex; - justify-content: center; - align-items: center; - gap: 20px; - margin: 20px auto; + display: flex; + justify-content: center; + align-items: center; + gap: 20px; + margin: 20px auto; } @@ -327,7 +337,7 @@ b { font-weight: bold; text-decoration: none; color: #000; - background-color: var(--electric); + background-color: var(--button); cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; text-align: center; @@ -341,7 +351,7 @@ b { } .navigationbar a.active { - background-color: var(--highlight); + background-color: var(--active); cursor: not-allowed; pointer-events: none; } @@ -369,13 +379,13 @@ b { font-size: 6cqw; text-align: center; white-space: nowrap; - color: var(--light); - text-shadow: 0 0 8px rgba(var(--shadow-rgb), 1); + color: var(--plum); width: 100%; - margin-top: 410px; + margin-top: calc(45cqw + 50px); margin-bottom: 1cqw; } + .title.en { font-size: 7cqw; }