infra/website
2
0
Fork 0
Code Issues Pull requests Activity Actions

improvements to header layout

Browse source
This commit is contained in:
kleines Filmröllchen 2024-11-23 20:18:12 +01:00
parent 89e35a0fcd
commit 1de0c63a97
Signed by: filmroellchen
SSH key fingerprint: SHA256:NarU6J/XgCfEae4rbei0YIdN2pYaYDccarK6R53dnc8
2 changed files with 21 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
static/main.css
View file

@ -23,7 +23,7 @@ body {
background-color: var(--main-bg-color); background-color: var(--main-bg-color);
color: var(--main-text-color); color: var(--main-text-color);
margin: 1.5rem; margin: 3rem;
margin-top: 0; margin-top: 0;
} }
@ -84,7 +84,7 @@ header {
"logo . nav nav" "logo . nav nav"
"logo . . ." min-content "logo . . ." min-content
"logo . space-text space-image" min-content / "logo . space-text space-image" min-content /
minmax(min-content, 30vw) 1fr auto minmax(0, min-content); minmax(min-content, 25vw) 1fr auto minmax(0, min-content);
overflow: hidden; overflow: hidden;
#logo { #logo {
@ -105,7 +105,18 @@ header {
} }
} }
@media screen and (device-width < 600px) { @media screen and (device-width > 1700px) {
header {
position: fixed;
width: calc(100vw - 2 * 3em);
}
}
@media screen and (device-width < 650px) {
body {
margin: 1.5rem;
margin-top: 0;
}
header { header {
grid-template: grid-template:
"logo space-image" minmax(0, 20vh) "logo space-image" minmax(0, 20vh)
@ -124,13 +135,13 @@ header {
} }
} }
@media screen and (device-width < 340px) { @media screen and (device-width < 400px) {
header { header {
grid-template: grid-template:
"logo" minmax(5cm, 20vh) ". logo ." minmax(3cm, 10vh)
"space-image" min-content "space-text space-text space-image" min-content
"nav" / "nav nav nav" /
1fr; 1fr minmax(min-content, 30vh) 1fr;
} }
} }

4
templates/page.html
View file

@ -62,7 +62,6 @@ truncate(length=150) %} {% else %} {% set description = "" %} {% endif %}
alt="Chaostreff Backnang Logo" alt="Chaostreff Backnang Logo"
/></a> /></a>
<nav> <nav>
<a href="{{ get_url(path='/') }}">Home</a>
<a href="{{ get_url(path='/#termine') }}">Termine</a> <a href="{{ get_url(path='/#termine') }}">Termine</a>
<a href="{{ get_url(path='/#kontakt') }}">Kontakt</a> <a href="{{ get_url(path='/#kontakt') }}">Kontakt</a>
<a href="{{ get_url(path='/#dienste') }}">Dienste</a> <a href="{{ get_url(path='/#dienste') }}">Dienste</a>
@ -74,10 +73,11 @@ truncate(length=150) %} {% else %} {% set description = "" %} {% endif %}
>Nächstes Treffen: siehe <a href="/#termine">Termine</a></span >Nächstes Treffen: siehe <a href="/#termine">Termine</a></span
><br /><span id="space-last-update"></span> ><br /><span id="space-last-update"></span>
</p> </p>
<!-- TODO: explainer page for the spaceapi and how we implement it -->
<a <a
class="image-container" class="image-container"
id="space-image-container" id="space-image-container"
href="https://spaceapi.ctbk.de" href=""
><img ><img
id="space-image" id="space-image"
src="{{ get_url(path='/img/unknown.png') }}" src="{{ get_url(path='/img/unknown.png') }}"