nullwert/re_capitulating_queer
1
0
Fork 0
Code Activity

mobile

Browse Source
This commit is contained in:
Philip Wagner
2024-08-31 11:39:36 +02:00
parent 45a278e264
commit 39a04ebeb5
6 changed files with 39 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
assets/style.css
View File

@@ -20,7 +20,8 @@ h5, .text-12 { font-size: 12pt; line-height: 15pt; font-weight: normal }
.flex { display: flex !important }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto; gap: 22pt }
.grid > .column { grid-column: span var(--span); display: grid }
.grid > .column { grid-column: span var(--span) }
.grid > .column:has(> .align-self-center) { display: grid }
.grid img { width: 100%; max-width: 100% }
.border-top { border-top: 1px solid var(--black) }
@@ -73,6 +74,14 @@ code { font-family: Kobata !important; font-weight: normal }
.embed video { width: 100%; }
.embeded-iframe { border: none; width: 100% }
.siema { position: relative; transition: height .2s }
.siema button { position: absolute; top: 50%; background: #fff; color: var(--blue); border: none; font-size: 1rem; margin: 0; opacity: 0; transition: opacity .5s }
.siema button:hover { cursor: pointer; }
.siema:hover button { opacity: 1 }
.siema button.prev { left: 0; }
.siema button.next { right: 0; }
.siema img { width: 100%; object-fit: contain }
.calendar-entry { display: grid; grid-template-columns: 199pt 508pt }
.menu-button { display: none; width: 47px; height: 48px; flex-direction: column; justify-content: center; box-sizing: content-box }
@@ -80,7 +89,7 @@ code { font-family: Kobata !important; font-weight: normal }
.menu-button:hover { color: var(--lila) }
.menu-button:hover div { background: var(--lila) }
#menu-container { width: 498px; position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none; }
#menu-container { max-width: 498px; position: absolute; left: 0; top: 0; bottom: 0; pointer-events: none; }
#menu-container button, #menu-container a { pointer-events: initial }
nav { display: none }
nav { height: 100%; padding-top: 89pt !important; justify-content: space-between; flex-direction: column; box-sizing: border-box; }
@@ -90,6 +99,26 @@ nav > div { margin-left: -2px }
footer { background: var(--white) }
.headline { padding-left: 179pt }
.content-footer { display:flex; justify-content: space-between }
.content-footer-socials { display: flex; justify-content: space-between; align-items: center; width: 439px; }
@media (max-width: 750px) {
footer { font-size: 22pt !important; letter-spacing: 0 !important; padding: 11pt !important }
.headline { padding-left: 79pt }
.headline h4 { max-width: calc(100dvw - 22pt - 37pt - 37pt - 37pt - 22pt) }
.content-footer { flex-direction: column; }
.content-footer-socials { width: 100% }
.calendar-entry { grid-template-columns: 1fr }
.project-list { text-align: center; }
.project-list a, .project-list span { display: block }
.grid { display: block; }
.siema button { font-size: 12px; opacity: 1 }
video { width: 100%; }
}
.embed-btn { display:block; position:absolute !important; top:0; right:0; bottom:0; left:0; z-index:1; background-position:50%; background-size: 15.5% auto; background-repeat:no-repeat; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E%3Crect fill='rgba(0,0,0,.65)' width='13' height='8' rx='1' ry='1'/%3E%3Cpolygon fill='%23fff' points='5 6 9 4 5 2'/%3E%3C/svg%3E") }
.embed-btn:hover { cursor: pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 8'%3E%3Crect fill='%231AB7EA' width='13' height='8' rx='1' ry='1'/%3E%3Cpolygon fill='%23fff' points='5 6 9 4 5 2'/%3E%3C/svg%3E") }
.embed-btn.yt { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='%23212121' fill-opacity='.8' d='M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z'/%3E%3Cpath fill='%23fff' d='m45 24-18-10v20'/%3E%3C/svg%3E") }

4
site/snippets/footer.php
View File

@@ -1,8 +1,8 @@
<?php $dontShowFooter = isset($dont_show_footer) && $dont_show_footer === true ?>
<?php if (!$dontShowFooter): ?>
<div class="container <?= remember("") ?>" style="display:flex; justify-content: space-between">
<div style="display: flex; justify-content: space-between; align-items: center; width: 439px;">
<div class="container content-footer <?= remember("") ?>">
<div class="content-footer-socials">
<a href="https://www.instagram.com/thealit_fkl/" class="block link">Instagram</a>
<a href="https://www.thealit.de" class="block link">Thealit</a>
<a href="https://www.thealit.de/newsletter" class="block link">Newsletter</a>

2
site/snippets/header.php
View File

@@ -16,7 +16,7 @@
<div id="menu-container">
<div style="display: flex; height: 36pt; position: absolute; top: 22pt; left: 22pt">
<div style="width: 376pt; margin-left: 1px;">
<div style="margin-left: 1px;">
<button id="menu_open" aria-label="Menu Open" class="menu-button no-button flex" style="gap: 10px"><div></div><div></div><div></div></button>
<button id="menu_close" aria-label="Menu Close" class="menu-button no-button" style="margin-top: 4px"><div style="transform: rotate(45deg);"></div><div style="transform: translate(0,-6px) rotate(135deg);"></div></button>
</div>

2
site/templates/calendar.php
View File

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

2
site/templates/default.php
View File

@@ -1,6 +1,6 @@
<?php snippet('header') ?>
<div class="<?= randomBg() ?> container" style="padding-left: 179pt; padding-bottom: 79pt">
<div class="<?= randomBg() ?> container headline" style="padding-bottom: 79pt">
<h4 class="uppercase font-kobata leading-none"><?= $page->title() ?></h4>
</div>

6
site/templates/projects.php
View File

@@ -3,11 +3,11 @@
/** @var Kirby\Cms\Site $site */
/** @var Kirby\Cms\Page $page */ ?>
<div class="bg-orange-white container" style="padding-left: 179pt">
<div class="bg-orange-white container headline">
<h4 class="uppercase font-kobata leading-none"><?= $page->title() ?></h4>
</div>
<div class="bg-orange-white container">
<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">
<span class="font-kobata"><?= $project->start_date()->toDate('d.m.') ?>-<?= $project->end_date()->toDate('d.m.') ?></span>
@@ -16,7 +16,7 @@
<?php endforeach ?>
</div>
<div class="container bg-white-lila" style="padding-left: 179pt">
<div class="container bg-white-lila headline">
<h4 class="uppercase font-kobata leading-none">ART RESIDENCIES + INTERMISSIONS</h4>
</div>