1
0

style changes

This commit is contained in:
Philip Wagner
2024-09-30 15:49:49 +02:00
parent c62879cd62
commit ceb95139ac
6 changed files with 21 additions and 17 deletions

View File

@@ -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-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") } .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-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-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 } .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 { height: 100%; padding-top: 89pt !important; justify-content: space-between; flex-direction: column; box-sizing: border-box; }
nav > div { margin-left: -2px } 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) } #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 } .headline { padding: 22pt; padding-left: 179pt }
.content-footer { display:flex; justify-content: space-between } .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; } .content-footer-socials { display: flex; justify-content: space-between; align-items: center; width: 439px; }
@media (max-width: 750px) { @media (max-width: 750px) {

View File

@@ -8,7 +8,7 @@
<a href="https://www.thealit.de/newsletter" class="block link">Newsletter</a> <a href="https://www.thealit.de/newsletter" class="block link">Newsletter</a>
</div> </div>
<div class="text-12"> <div class="text-12" style="word-spacing: 1rem">
<?php $impressum = $pages->findBy('uid', 'impressum') ?> <?php $impressum = $pages->findBy('uid', 'impressum') ?>
<a href="<?= $impressum->url() ?>" class="link"><?= $impressum->title() ?></a> <a href="<?= $impressum->url() ?>" class="link"><?= $impressum->title() ?></a>
<?php $datenschutz = $pages->findBy('uid', 'datenschutzerklaerung') ?> <?php $datenschutz = $pages->findBy('uid', 'datenschutzerklaerung') ?>

View File

@@ -1,7 +1,7 @@
<?php snippet('header') ?> <?php snippet('header') ?>
<div class="bg-white-green container headline" style="padding-bottom: 79pt"> <div class="bg-white-green headline" style="padding-bottom: 79pt">
<h4 class="uppercase font-kobata leading-none"><?= $page->title() ?></h4> <h3 class="uppercase font-kobata leading-none"><?= $page->title() ?></h4>
</div> </div>
<?php $colors = [ <?php $colors = [

View File

@@ -1,6 +1,6 @@
<?php snippet('header') ?> <?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> <h4 class="uppercase font-kobata leading-none"><?= $page->title() ?></h4>
</div> </div>

View File

@@ -173,19 +173,19 @@ start()
</script> </script>
<style> <style>
#info { display: none; position: absolute; left: 498px; top: 0; bottom: 0 } #info { display: none; position: absolute; left: 498px; top: 0; bottom: 0; padding: 22pt }
#info-button { padding-left: calc(498px + 22pt) } #info-button { padding-left: calc(498px + 22pt); padding-top: 22pt }
@media (max-width: 750px) { @media (max-width: 750px) {
#info { left: 0; overflow-y: scroll; } #info { left: 0; overflow-y: scroll; }
#info-button { padding-left: 79pt } #info-button { padding-left: 79pt }
} }
</style> </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> <button id="info_open" aria-label="Info Open" class="menu-button no-button flex font-kobata text-40 uppercase">Info</button>
</div> </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> <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"> <div class="text-22" style="margin-top: 34pt">
<?= $page->text() ?> <?= $page->text() ?>

View File

@@ -3,13 +3,13 @@
/** @var Kirby\Cms\Site $site */ /** @var Kirby\Cms\Site $site */
/** @var Kirby\Cms\Page $page */ ?> /** @var Kirby\Cms\Page $page */ ?>
<div class="bg-orange-white container headline"> <div class="bg-orange-white headline">
<h4 class="uppercase font-kobata leading-none"><?= $page->title() ?></h4> <h3 class="uppercase font-kobata leading-none"><?= $page->title() ?></h4>
</div> </div>
<div class="bg-orange-white container project-list"> <div class="bg-orange-white container project-list">
<?php foreach ($page->children()->listed() as $project): ?> <?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="font-kobata"><?= $project->start_date()->toDate('d.m.') ?>-<?= $project->end_date()->toDate('d.m.') ?></span>
<span class="text-40 leading-none"><?= $project->title() ?></span> <span class="text-40 leading-none"><?= $project->title() ?></span>
</a> </a>
@@ -17,7 +17,7 @@
</div> </div>
<div class="container bg-white-lila headline"> <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> </div>
<?php snippet('layouts', ['layouts' => $page->layout()->toLayouts()]) ?> <?php snippet('layouts', ['layouts' => $page->layout()->toLayouts()]) ?>