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);
color: var(--main-text-color);
margin: 1.5rem;
margin: 3rem;
margin-top: 0;
}
@ -84,7 +84,7 @@ header {
"logo . nav nav"
"logo . . ." 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;
#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 {
grid-template:
"logo space-image" minmax(0, 20vh)
@ -124,13 +135,13 @@ header {
}
}
@media screen and (device-width < 340px) {
@media screen and (device-width < 400px) {
header {
grid-template:
"logo" minmax(5cm, 20vh)
"space-image" min-content
"nav" /
1fr;
". logo ." minmax(3cm, 10vh)
"space-text space-text space-image" min-content
"nav nav nav" /
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"
/></a>
<nav>
<a href="{{ get_url(path='/') }}">Home</a>
<a href="{{ get_url(path='/#termine') }}">Termine</a>
<a href="{{ get_url(path='/#kontakt') }}">Kontakt</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
><br /><span id="space-last-update"></span>
</p>
<!-- TODO: explainer page for the spaceapi and how we implement it -->
<a
class="image-container"
id="space-image-container"
href="https://spaceapi.ctbk.de"
href=""
><img
id="space-image"
src="{{ get_url(path='/img/unknown.png') }}"