b12f/abkommen60jahre.de
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Fix mobile styles

Browse source
This commit is contained in:
Benjamin Bädorf 2021-09-27 01:37:59 +02:00
parent 6087db4a29
commit b73e906aa2
No known key found for this signature in database
GPG key ID: 4406E80E13CD656C
8 changed files with 221 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
_includes/event-day.njk
View file

@ -1,4 +1,4 @@
<details open class="event-day"> <details class="event-day">
<summary class="event-day-heading"> <summary class="event-day-heading">
{{ eventDay.heading }} {{ eventDay.heading }}
</summary> </summary>

11
_includes/layouts/default.njk
View file

@ -11,11 +11,16 @@ article: null
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>{{ title | title | safe }}</title> <title>{{ title | title | safe }}</title>
<meta name="theme-color" content="{{ themeColor }}" id="theme-color" />
<meta name="description" content=""> <link rel="shortcut icon" href="/favicon.png" />
<meta name="Keywords" content="">
<meta name="theme-color" content="{{ themeColor }}" id="theme-color" />
<meta name="description" content="60 Jahre deutsche-türkisches Anwerbeabkommen, eine Seite der Stadt Köln">
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
<link rel="stylesheet" type="text/css" href="/styles.css" media="all" /> <link rel="stylesheet" type="text/css" href="/styles.css" media="all" />
<link rel="stylesheet" type="text/css" href="/navigation.css" media="all" />
{% if extraStylesheets %} {% if extraStylesheets %}
{% for extraStylesheet in extraStylesheets %} {% for extraStylesheet in extraStylesheets %}
<link rel="stylesheet" type="text/css" href="{{ extraStylesheet }}" media="all" /> <link rel="stylesheet" type="text/css" href="{{ extraStylesheet }}" media="all" />

25
_includes/navigation.njk
View file

@ -1,4 +1,7 @@
<nav class="navigation"> <nav
id="navigation"
class="navigation"
>
<a href="/" class="logo navigation-link"> <a href="/" class="logo navigation-link">
<img <img
class="logo-image" class="logo-image"
@ -6,6 +9,26 @@
alt="Unser Logo" alt="Unser Logo"
/> />
</a> </a>
<button
type="button"
id="navigation-toggle"
class="navigation-toggle"
aria-label="Navigation Öffnen und Schliessen"
>
<div class="navigation-toggle-line"></div>
<div class="navigation-toggle-line"></div>
<div class="navigation-toggle-line"></div>
</button>
<script>
const navToggle = document.getElementById("navigation-toggle");
const nav = document.getElementById("navigation");
navToggle.addEventListener("click", function () {
nav.classList.toggle("navigation_open");
});
</script>
<ul class="menu"> <ul class="menu">
{# {#
<li class="menu-item"> <li class="menu-item">

4
downloads.css
View file

@ -53,8 +53,8 @@
color: var(--primary-font); color: var(--primary-font);
height: 100%; height: 100%;
width: 100%; width: 100%;
font-size: 16px; font-size: 0.8rem;
line-height: 22px; line-height: 1.3em;
display: flex; display: flex;
align-items: center; align-items: center;

5
events.css
View file

@ -1,6 +1,9 @@
.event-day { .event-day {
border-top: 7px solid var(--border); border-top: 7px solid var(--border);
margin-top: 4rem; }
.event-day[open] {
padding-bottom: 4rem;
} }
.event-day-heading { .event-day-heading {

BIN
favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 16 KiB

130
navigation.css Normal file
View file

@ -0,0 +1,130 @@
.navigation {
--mobile-side-margin: 2vw;
position: fixed;
top: 0;
left: var(--mobile-side-margin);
right: var(--mobile-side-margin);
display: flex;
flex-direction: column;
padding: 0 calc(var(--side-padding) - var(--mobile-side-margin));
z-index: 1000;
background-color: var(--primary);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
@media screen and (min-width: 1024px) {
.navigation {
background-color: transparent;
flex-direction: row;
}
}
.navigation-toggle {
background: transparent;
cursor: pointer;
border: 0;
position: absolute;
right: 6px;
top: 6px;
bottom: 0;
height: 45px;
width: 45px;
padding: 0px;
}
@media screen and (min-width: 1024px) {
.navigation-toggle {
display: none;
}
}
.navigation-toggle-line {
width: 32px;
height: 3px;
border-radius: 1.5px;
background-color: var(--primary-font);
margin: 7px;
position: relative;
transition-property: transform, opacity;
transition-duration: 0.1s;
transition-timing-function: ease;
}
.navigation_open .navigation-toggle-line:nth-child(1) {
transform: translateY(10px) rotate(45deg);
}
.navigation_open .navigation-toggle-line:nth-child(2) {
opacity: 0;
}
.navigation_open .navigation-toggle-line:nth-child(3) {
transform: translateY(-10px) rotate(-45deg);
}
.navigation-link {
color: var(--primary-font);
text-decoration: none;
display: flex;
align-items: center;
padding: 12px 0px;
}
@media screen and (min-width: 1024px) {
.navigation-link {
padding: 12px 24px;
}
}
.logo {
margin-right: auto;
background-color: var(--primary);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.logo-image {
height: 35px;
}
.menu {
list-style: none;
display: none;
margin: 0;
padding: 0;
flex-direction: column;
}
.navigation_open .menu {
display: flex;
}
@media screen and (min-width: 1024px) {
.menu {
flex-direction: row;
}
}
@media screen and (min-width: 1024px) {
.menu {
display: flex;
}
}
.menu-item {
background-color: var(--primary);
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
@media screen and (min-width: 1024px) {
.menu-item {
margin-left: 12px;
justify-content: center;
}
}

103
styles.css
View file

@ -4,7 +4,7 @@
.page { .page {
font-family: sans-serif; font-family: sans-serif;
font-size: 24px; font-size: 18px;
line-height: 2em; line-height: 2em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -12,7 +12,7 @@
margin: 0; margin: 0;
--primary: #D02424; --primary: #D02424;
--primary-font: #ffffff; --primary-font: #ffffff;
--side-padding: 3vw; --side-padding: 8vw;
--max-content-width: 925px; --max-content-width: 925px;
--border: #707070; --border: #707070;
background-image: url(/img/bg-pattern.svg); background-image: url(/img/bg-pattern.svg);
@ -23,6 +23,7 @@
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
.page { .page {
font-size: 24px;
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
grid-template-rows: auto auto auto auto; grid-template-rows: auto auto auto auto;
@ -30,52 +31,6 @@
} }
} }
.navigation {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
padding: 0 var(--side-padding);
z-index: 1000;
}
.navigation-link {
color: var(--primary-font);
text-decoration: none;
padding: 12px 24px;
display: flex;
align-items: center;
}
.logo {
margin-right: auto;
background-color: var(--primary);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.logo-image {
height: 35px;
}
.menu {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
.menu-item {
background-color: var(--primary);
display: flex;
justify-content: center;
align-items: center;
margin-left: 12px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.page-header { .page-header {
height: 100vh; height: 100vh;
justify-content: center; justify-content: center;
@ -129,14 +84,42 @@
} }
.page-header-headline { .page-header-headline {
font-size: 4rem; font-size: 2rem;
line-height: 5rem; line-height: 3rem;
}
@media screen and (min-width: 768px) {
.page-header-headline {
font-size: 3.5rem;
line-height: 4.5rem;
}
}
@media screen and (min-width: 1024) {
.page-header-headline {
font-size: 5rem;
line-height: 6rem;
}
} }
.page-header-subheadline {
font-size: 1.5rem;
line-height: 2rem;
}
@media screen and (min-width: 768px) {
.page-header-subheadline {
font-size: 2.5rem;
line-height: 3.5rem;
}
}
@media screen and (min-width: 1024) {
.page-header-subheadline { .page-header-subheadline {
font-size: 3rem; font-size: 3rem;
line-height: 4rem; line-height: 4rem;
} }
}
.page-header-cta { .page-header-cta {
color: var(--primary-font); color: var(--primary-font);
@ -175,13 +158,27 @@
} }
.page-title { .page-title {
font-size: 5rem; font-size: 2rem;
line-height: 6rem; line-height: 3rem;
padding-top: 10vh;
padding-left: var(--side-padding); padding-left: var(--side-padding);
padding-right: var(--side-padding); padding-right: var(--side-padding);
} }
@media screen and (min-width: 768px) {
.page-title {
padding-top: 10vh;
font-size: 3.5rem;
line-height: 4.5rem;
}
}
@media screen and (min-width: 1024) {
.page-title {
font-size: 5rem;
line-height: 6rem;
}
}
.navigation + .page-title, .navigation + .page-title,
.page-header + .page-main { .page-header + .page-main {
margin-top: 20vh; margin-top: 20vh;