From ceb95139ac1bc0b006d3b65d24bad1c25490f367 Mon Sep 17 00:00:00 2001
From: Philip Wagner <philip@think-jeckel.de>
Date: Mon, 30 Sep 2024 15:49:49 +0200
Subject: [PATCH] style changes

---
 assets/style.css            | 14 +++++++++-----
 site/snippets/footer.php    |  2 +-
 site/templates/calendar.php |  4 ++--
 site/templates/default.php  |  2 +-
 site/templates/home.php     |  8 ++++----
 site/templates/projects.php |  8 ++++----
 6 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index 7c9d55a..fde2d9d 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -55,7 +55,7 @@ code { font-family: Kobata !important; font-weight: normal }
 .bg-white-orange, .bg-pink-orange, .bg-green-orange, .bg-lila-orange, .bg-orange-orange, .bg-black-orange { background-image: url("grid/orange.png") }
 .bg-white-black, .bg-pink-black, .bg-green-black, .bg-lila-black, .bg-orange-black, .bg-black-black { background-image: url("grid/black.png") }
 
-@media (min-resolution: 2x) {
+@media only screen and (min-resolution: 192dpi) {
   .bg-white-white, .bg-pink-white, .bg-green-white, .bg-lila-white, .bg-orange-white, .bg-black-white { background-image: url("grid/white@2x.png"); background-size: 105px 78px }
   .bg-white-pink, .bg-pink-pink, .bg-green-pink, .bg-lila-pink, .bg-orange-pink, .bg-black-pink { background-image: url("grid/pink@2x.png"); background-size: 105px 78px }
   .bg-white-green, .bg-pink-green, .bg-green-green, .bg-lila-green, .bg-orange-green, .bg-black-green { background-image: url("grid/green@2x.png"); background-size: 105px 78px }
@@ -100,13 +100,17 @@ nav { display: none }
 nav { height: 100%; padding-top: 89pt !important; justify-content: space-between; flex-direction: column; box-sizing: border-box; }
 nav > div { margin-left: -2px }
 
-#lang-switch { position: absolute; top: -3px; right: 0 }
+#lang-switch { position: absolute; top: -7px; right: 0 }
+#lang-switch a { line-height: 1rem !important }
 
 #content { position: relative; padding-bottom: calc(22pt + 40pt + 22pt) }
-footer { background: var(--white); padding: 22pt; line-height: 1 !important; letter-spacing: 1.5rem; position: fixed; left: 0; right: 0; bottom: 0  }
+footer { background: var(--white); padding: 22pt; position: fixed; left: 0; right: 0; bottom: 0; line-height: 1 !important; }
+footer a { line-height: 1 !important; text-align-last: justify; display: block; white-space: nowrap; letter-spacing: 2.8vw } 
+@media (max-width: 1700px) { footer a { letter-spacing: 2vw } }
+@media (max-width: 1200px) { footer a { letter-spacing: 1vw } }
 
-.headline { padding-left: 179pt }
-.content-footer { display:flex; justify-content: space-between }
+.headline { padding: 22pt; padding-left: 179pt }
+.content-footer { display:flex; justify-content: space-between; align-items: baseline }
 .content-footer-socials { display: flex; justify-content: space-between; align-items: center; width: 439px; }
 
 @media (max-width: 750px) {
diff --git a/site/snippets/footer.php b/site/snippets/footer.php
index ee40ff1..6fd3816 100644
--- a/site/snippets/footer.php
+++ b/site/snippets/footer.php
@@ -8,7 +8,7 @@
 		<a href="https://www.thealit.de/newsletter" class="block link">Newsletter</a>
 	</div>
 	
-	<div class="text-12">
+	<div class="text-12" style="word-spacing: 1rem">
 		<?php $impressum = $pages->findBy('uid', 'impressum') ?>
 		<a href="<?= $impressum->url() ?>" class="link"><?= $impressum->title() ?></a>
 		<?php $datenschutz = $pages->findBy('uid', 'datenschutzerklaerung') ?>
diff --git a/site/templates/calendar.php b/site/templates/calendar.php
index 0d65482..a08c345 100644
--- a/site/templates/calendar.php
+++ b/site/templates/calendar.php
@@ -1,7 +1,7 @@
 <?php snippet('header') ?>
 
-<div class="bg-white-green container headline" style="padding-bottom: 79pt">
-    <h4 class="uppercase font-kobata leading-none"><?= $page->title() ?></h4>
+<div class="bg-white-green headline" style="padding-bottom: 79pt">
+    <h3 class="uppercase font-kobata leading-none"><?= $page->title() ?></h4>
 </div>
 
 <?php $colors = [
diff --git a/site/templates/default.php b/site/templates/default.php
index 7e8e779..cf650c0 100644
--- a/site/templates/default.php
+++ b/site/templates/default.php
@@ -1,6 +1,6 @@
 <?php snippet('header') ?>
 
-<div class="<?= randomBg() ?> container headline" style="padding-bottom: 79pt">
+<div class="<?= randomBg() ?> headline" style="padding-bottom: 79pt">
     <h4 class="uppercase font-kobata leading-none"><?= $page->title() ?></h4>
 </div>
 
diff --git a/site/templates/home.php b/site/templates/home.php
index d20ac39..3efdd45 100644
--- a/site/templates/home.php
+++ b/site/templates/home.php
@@ -173,19 +173,19 @@ start()
 </script>
 
 <style>
-#info { display: none; position: absolute; left: 498px; top: 0; bottom: 0 }
-#info-button { padding-left: calc(498px + 22pt) }
+#info { display: none; position: absolute; left: 498px; top: 0; bottom: 0; padding: 22pt }
+#info-button { padding-left: calc(498px + 22pt); padding-top: 22pt }
 @media (max-width: 750px) {
 	#info { left: 0; overflow-y: scroll; }
 	#info-button { padding-left: 79pt }
 }
 </style>
 
-<div id="info-button" class="container">
+<div id="info-button">
     <button id="info_open" aria-label="Info Open" class="menu-button no-button flex font-kobata text-40 uppercase">Info</button>
 </div>
 
-<div id="info" class="bg-white-green container">
+<div id="info" class="bg-white-green">
 	<button id="info_close" aria-label="Info Close" class="menu-button no-button flex" style="margin-top: 4px"><div style="transform: rotate(45deg); "></div><div style="transform: translate(0,-6px) rotate(135deg);"></div></button>
 	<div class="text-22" style="margin-top: 34pt">
 	<?= $page->text() ?>
diff --git a/site/templates/projects.php b/site/templates/projects.php
index f6c6829..0944c73 100644
--- a/site/templates/projects.php
+++ b/site/templates/projects.php
@@ -3,13 +3,13 @@
 /** @var Kirby\Cms\Site $site */
 /** @var Kirby\Cms\Page $page */ ?>
 
-<div class="bg-orange-white container headline">
-    <h4 class="uppercase font-kobata leading-none"><?= $page->title() ?></h4>
+<div class="bg-orange-white headline">
+    <h3 class="uppercase font-kobata leading-none"><?= $page->title() ?></h4>
 </div>
 
 <div class="bg-orange-white container project-list">
     <?php foreach ($page->children()->listed() as $project): ?>
-        <a href="<?= $project->url() ?>" class="link" style="line-height: 57pt">
+        <a href="<?= $project->url() ?>" class="link" style="line-height: 57pt; padding-right: 1rem;">
             <span class="font-kobata"><?= $project->start_date()->toDate('d.m.') ?>-<?= $project->end_date()->toDate('d.m.') ?></span>
             <span class="text-40 leading-none"><?= $project->title() ?></span>
         </a>
@@ -17,7 +17,7 @@
 </div>
 
 <div class="container bg-white-lila headline">
-    <h4 class="uppercase font-kobata leading-none">ART RESIDENCIES + INTERMISSIONS</h4>
+    <h3 class="uppercase font-kobata leading-none">ART RESIDENCIES + INTERMISSIONS</h4>
 </div>
 
 <?php snippet('layouts', ['layouts' => $page->layout()->toLayouts()]) ?>