Fix mobile styles
This commit is contained in:
parent
6087db4a29
commit
b73e906aa2
|
|
@ -1,4 +1,4 @@
|
|||
<details open class="event-day">
|
||||
<details class="event-day">
|
||||
<summary class="event-day-heading">
|
||||
{{ eventDay.heading }}
|
||||
</summary>
|
||||
|
|
|
|||
|
|
@ -11,11 +11,16 @@ article: null
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>{{ title | title | safe }}</title>
|
||||
<meta name="theme-color" content="{{ themeColor }}" id="theme-color" />
|
||||
|
||||
<meta name="description" content="">
|
||||
<meta name="Keywords" content="">
|
||||
<link rel="shortcut icon" href="/favicon.png" />
|
||||
|
||||
<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="/navigation.css" media="all" />
|
||||
{% if extraStylesheets %}
|
||||
{% for extraStylesheet in extraStylesheets %}
|
||||
<link rel="stylesheet" type="text/css" href="{{ extraStylesheet }}" media="all" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
<nav class="navigation">
|
||||
<nav
|
||||
id="navigation"
|
||||
class="navigation"
|
||||
>
|
||||
<a href="/" class="logo navigation-link">
|
||||
<img
|
||||
class="logo-image"
|
||||
|
|
@ -6,6 +9,26 @@
|
|||
alt="Unser Logo"
|
||||
/>
|
||||
</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">
|
||||
{#
|
||||
<li class="menu-item">
|
||||
|
|
|
|||
|
|
@ -53,8 +53,8 @@
|
|||
color: var(--primary-font);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.3em;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
.event-day {
|
||||
border-top: 7px solid var(--border);
|
||||
margin-top: 4rem;
|
||||
}
|
||||
|
||||
.event-day[open] {
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.event-day-heading {
|
||||
|
|
|
|||
BIN
favicon.png
Normal file
BIN
favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
130
navigation.css
Normal file
130
navigation.css
Normal 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;
|
||||
}
|
||||
}
|
||||
107
styles.css
107
styles.css
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
.page {
|
||||
font-family: sans-serif;
|
||||
font-size: 24px;
|
||||
font-size: 18px;
|
||||
line-height: 2em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
margin: 0;
|
||||
--primary: #D02424;
|
||||
--primary-font: #ffffff;
|
||||
--side-padding: 3vw;
|
||||
--side-padding: 8vw;
|
||||
--max-content-width: 925px;
|
||||
--border: #707070;
|
||||
background-image: url(/img/bg-pattern.svg);
|
||||
|
|
@ -23,6 +23,7 @@
|
|||
|
||||
@media screen and (min-width: 768px) {
|
||||
.page {
|
||||
font-size: 24px;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
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 {
|
||||
height: 100vh;
|
||||
justify-content: center;
|
||||
|
|
@ -129,13 +84,41 @@
|
|||
}
|
||||
|
||||
.page-header-headline {
|
||||
font-size: 4rem;
|
||||
line-height: 5rem;
|
||||
font-size: 2rem;
|
||||
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: 3rem;
|
||||
line-height: 4rem;
|
||||
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 {
|
||||
font-size: 3rem;
|
||||
line-height: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header-cta {
|
||||
|
|
@ -175,13 +158,27 @@
|
|||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 5rem;
|
||||
line-height: 6rem;
|
||||
padding-top: 10vh;
|
||||
font-size: 2rem;
|
||||
line-height: 3rem;
|
||||
padding-left: 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,
|
||||
.page-header + .page-main {
|
||||
margin-top: 20vh;
|
||||
|
|
|
|||
Loading…
Reference in a new issue