1178 lines
20 KiB
CSS
1178 lines
20 KiB
CSS
/* ==========================================================================
|
|
Fernweh — minimalistisches Reiseblog-Theme
|
|
Schwarz auf Weiß, Serifenschrift, kräftige Linien als Gliederung.
|
|
========================================================================== */
|
|
|
|
/* Grundwerte
|
|
-------------------------------------------------------------------------- */
|
|
:root {
|
|
--bg: #ffffff;
|
|
--text: #111111;
|
|
--muted: #6b6b6b;
|
|
--line: #dcdcdc;
|
|
--soft: #f1f1f1;
|
|
--inverse-bg: #111111;
|
|
--inverse-text: #ffffff;
|
|
|
|
/* Die Schriften lassen sich in Ghost unter Design → Typografie austauschen */
|
|
--font-heading: var(--gh-font-heading, Rockwell, "Rockwell Nova", "Roboto Slab", "Sitka Heading", Georgia, serif);
|
|
--font-body: var(--gh-font-body, "Libre Baskerville", Baskerville, "Baskerville Old Face", "Iowan Old Style", "Palatino Linotype", Georgia, serif);
|
|
|
|
--rule: 5px solid var(--text);
|
|
--container: 1240px;
|
|
--gutter: 20px;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--bg: #121212;
|
|
--text: #f0f0f0;
|
|
--muted: #a3a3a3;
|
|
--line: #333333;
|
|
--soft: #1e1e1e;
|
|
--inverse-bg: #f0f0f0;
|
|
--inverse-text: #121212;
|
|
}
|
|
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: var(--font-body);
|
|
font-size: 17px;
|
|
line-height: 1.55;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
img {
|
|
display: block;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 0;
|
|
font-family: var(--font-heading);
|
|
font-weight: 800;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
|
|
button {
|
|
font: inherit;
|
|
color: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--text);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
max-width: var(--container);
|
|
margin: 0 auto;
|
|
padding: 0 var(--gutter);
|
|
}
|
|
|
|
.container--narrow {
|
|
max-width: 760px;
|
|
}
|
|
|
|
/* Kleine Auszeichnungen: Themenname und Datumszeile
|
|
-------------------------------------------------------------------------- */
|
|
.label {
|
|
display: inline-block;
|
|
font-family: var(--font-heading);
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.14em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.label--boxed {
|
|
padding: 5px 10px;
|
|
border: 1px solid var(--text);
|
|
}
|
|
|
|
.label--boxed:hover {
|
|
background: var(--inverse-bg);
|
|
color: var(--inverse-text);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.meta {
|
|
color: var(--muted);
|
|
font-size: 11px;
|
|
letter-spacing: 0.18em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 6px 14px;
|
|
border: 0;
|
|
background: var(--inverse-bg);
|
|
color: var(--inverse-text);
|
|
font-family: var(--font-heading);
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.btn:hover {
|
|
text-decoration: none;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Kopfbereich
|
|
-------------------------------------------------------------------------- */
|
|
.topbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 18px;
|
|
min-height: 46px;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.nav-toggle {
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 50%;
|
|
background: var(--inverse-bg);
|
|
color: var(--inverse-text);
|
|
}
|
|
|
|
.site-nav ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.site-nav > ul {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0 22px;
|
|
}
|
|
|
|
.site-nav li {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.site-nav a {
|
|
padding: 14px 0;
|
|
font-size: 11px;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.site-nav .nav-current > a,
|
|
.site-nav .nav-current-parent > a {
|
|
text-decoration: underline;
|
|
text-underline-offset: 4px;
|
|
}
|
|
|
|
.nav-submenu-toggle {
|
|
display: inline-flex;
|
|
padding: 4px;
|
|
border: 0;
|
|
background: none;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.nav-submenu {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: -16px;
|
|
z-index: 50;
|
|
display: none;
|
|
min-width: 200px;
|
|
padding: 6px 0;
|
|
border: 1px solid var(--text);
|
|
background: var(--bg);
|
|
}
|
|
|
|
.nav-submenu li {
|
|
justify-content: space-between;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.nav-submenu a {
|
|
flex: 1;
|
|
padding: 9px 0;
|
|
}
|
|
|
|
.nav-submenu .nav-submenu {
|
|
top: -7px;
|
|
left: 100%;
|
|
}
|
|
|
|
.nav-submenu .nav-submenu-toggle svg {
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
.nav-has-children.is-open > .nav-submenu {
|
|
display: block;
|
|
}
|
|
|
|
@media (hover: hover) and (min-width: 901px) {
|
|
.nav-has-children:hover > .nav-submenu {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.topbar__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.theme-toggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 5px 12px;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
background: var(--soft);
|
|
font-size: 10px;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.theme-toggle__moon,
|
|
.theme-toggle__dark,
|
|
[data-theme="dark"] .theme-toggle__sun,
|
|
[data-theme="dark"] .theme-toggle__light {
|
|
display: none;
|
|
}
|
|
|
|
[data-theme="dark"] .theme-toggle__moon,
|
|
[data-theme="dark"] .theme-toggle__dark {
|
|
display: inline;
|
|
}
|
|
|
|
.topbar__icons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.icon-link {
|
|
display: inline-flex;
|
|
padding: 0;
|
|
border: 0;
|
|
background: none;
|
|
}
|
|
|
|
.icon-link:hover {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.masthead {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 40px;
|
|
padding: 18px 0 16px;
|
|
border-bottom: var(--rule);
|
|
}
|
|
|
|
.site-brand:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.site-brand__logo {
|
|
max-height: 84px;
|
|
width: auto;
|
|
}
|
|
|
|
/* Ein dunkles Logo bleibt im dunklen Farbschema lesbar */
|
|
[data-theme="dark"] .site-brand__logo {
|
|
filter: invert(1) hue-rotate(180deg);
|
|
}
|
|
|
|
.site-brand__title {
|
|
font-family: var(--font-heading);
|
|
font-size: clamp(38px, 7vw, 68px);
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
letter-spacing: -0.02em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.masthead__tagline {
|
|
max-width: 440px;
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Seitenaufbau mit Seitenleiste
|
|
-------------------------------------------------------------------------- */
|
|
.site-main {
|
|
padding-top: 18px;
|
|
padding-bottom: 60px;
|
|
}
|
|
|
|
.with-sidebar {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 232px;
|
|
gap: 0 16px;
|
|
}
|
|
|
|
.sidebar {
|
|
padding-left: 16px;
|
|
border-left: 1px solid var(--line);
|
|
}
|
|
|
|
/* Aufmacher: großer Beitrag in der Mitte, je ein schmaler links und rechts
|
|
-------------------------------------------------------------------------- */
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: 1fr 3.25fr 1fr;
|
|
gap: 20px;
|
|
padding-bottom: 36px;
|
|
}
|
|
|
|
.hero__lead {
|
|
grid-column: 2;
|
|
grid-row: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero__side {
|
|
grid-row: 1;
|
|
}
|
|
|
|
.hero__side:last-child {
|
|
grid-column: 3;
|
|
}
|
|
|
|
.hero .card__date {
|
|
display: none;
|
|
}
|
|
|
|
.hero .card__excerpt {
|
|
display: block;
|
|
}
|
|
|
|
.hero__lead .card__image img {
|
|
aspect-ratio: 3 / 2;
|
|
}
|
|
|
|
.hero__lead .card__title {
|
|
margin-top: 6px;
|
|
font-family: var(--font-heading);
|
|
font-size: clamp(26px, 3vw, 34px);
|
|
font-weight: 800;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.hero__lead .card__excerpt {
|
|
max-width: 30em;
|
|
margin: 12px auto 0;
|
|
font-size: 20px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.hero__lead .card__author {
|
|
display: block;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.hero__side .card__image img {
|
|
aspect-ratio: 3 / 4;
|
|
}
|
|
|
|
.hero__side .card__excerpt {
|
|
font-size: 14px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* Beitragskarte
|
|
-------------------------------------------------------------------------- */
|
|
.card__image {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
background: var(--soft);
|
|
}
|
|
|
|
.card__image img {
|
|
width: 100%;
|
|
aspect-ratio: 3 / 2;
|
|
object-fit: cover;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.card__image:hover img {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.card__tag {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.card__title {
|
|
font-family: var(--font-body);
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.card__title em,
|
|
.card__title i {
|
|
font-style: italic;
|
|
}
|
|
|
|
.card__excerpt {
|
|
display: none;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.card__author {
|
|
display: none;
|
|
}
|
|
|
|
.card__date {
|
|
display: block;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* Abschnitte der Startseite und Beitragsraster
|
|
-------------------------------------------------------------------------- */
|
|
.section {
|
|
padding: 4px 0 40px;
|
|
border-top: var(--rule);
|
|
}
|
|
|
|
.section--first {
|
|
padding-top: 0;
|
|
border-top: 0;
|
|
}
|
|
|
|
.section__header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.section__title {
|
|
font-size: 22px;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.section__more {
|
|
font-size: 14px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.post-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 36px 24px;
|
|
}
|
|
|
|
.tag-section .card__tag {
|
|
display: none;
|
|
}
|
|
|
|
/* Seitenleiste
|
|
-------------------------------------------------------------------------- */
|
|
.widget {
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.widget__title {
|
|
margin-bottom: 12px;
|
|
padding: 3px 8px;
|
|
background: var(--inverse-bg);
|
|
color: var(--inverse-text);
|
|
font-size: 11px;
|
|
letter-spacing: 0.16em;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.widget__portrait {
|
|
width: 100%;
|
|
max-width: 200px;
|
|
margin: 0 auto 16px;
|
|
aspect-ratio: 1;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.widget__text {
|
|
font-size: 14px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.banner {
|
|
position: relative;
|
|
display: block;
|
|
}
|
|
|
|
.banner img {
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.banner::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 9px;
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.banner__title {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
color: #ffffff;
|
|
font-family: var(--font-heading);
|
|
font-size: 13px;
|
|
letter-spacing: 0.22em;
|
|
text-align: center;
|
|
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.mini-list,
|
|
.tag-index {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.mini-post {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: space-between;
|
|
padding: 10px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.mini-post:first-child {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.mini-post:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.mini-post__title {
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
font-size: 14px;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.mini-post__image {
|
|
flex: 0 0 68px;
|
|
}
|
|
|
|
.mini-post__image img {
|
|
width: 68px;
|
|
height: 68px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.tag-index li {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
padding: 6px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.tag-index li:last-child {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
/* Kopf der Themen- und Autorenübersicht
|
|
-------------------------------------------------------------------------- */
|
|
.archive-header {
|
|
max-width: 720px;
|
|
margin: 0 auto 36px;
|
|
padding: 24px 0 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.archive-header__portrait {
|
|
width: 96px;
|
|
height: 96px;
|
|
margin: 0 auto 16px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.archive-header__title {
|
|
margin-top: 6px;
|
|
font-size: clamp(32px, 5vw, 52px);
|
|
}
|
|
|
|
.archive-header__text {
|
|
margin-top: 14px;
|
|
font-size: 19px;
|
|
}
|
|
|
|
/* Seitenwechsel
|
|
-------------------------------------------------------------------------- */
|
|
.pagination {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto 1fr;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-top: 12px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--line);
|
|
font-size: 15px;
|
|
}
|
|
|
|
.pagination__link--older {
|
|
text-align: right;
|
|
}
|
|
|
|
/* Beitrag und Seite
|
|
-------------------------------------------------------------------------- */
|
|
.article__header {
|
|
padding-top: 28px;
|
|
padding-bottom: 28px;
|
|
text-align: center;
|
|
}
|
|
|
|
.article__title {
|
|
margin-top: 10px;
|
|
font-size: clamp(32px, 5.2vw, 54px);
|
|
line-height: 1.08;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
.article__excerpt {
|
|
margin-top: 18px;
|
|
font-size: 21px;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.article__meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 4px 10px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.article__meta a {
|
|
color: inherit;
|
|
}
|
|
|
|
.article__image {
|
|
margin: 0 auto 36px;
|
|
}
|
|
|
|
.article__image img {
|
|
width: 100%;
|
|
}
|
|
|
|
.article__image figcaption,
|
|
.gh-content figcaption {
|
|
margin-top: 8px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* Inhalt: drei Breiten — Text, breit und volle Breite (Karten des Ghost-Editors) */
|
|
.gh-content {
|
|
display: grid;
|
|
grid-template-columns:
|
|
[full-start] minmax(var(--gutter), 1fr)
|
|
[wide-start] minmax(0, 220px)
|
|
[main-start] min(720px, calc(100% - 2 * var(--gutter)))
|
|
[main-end] minmax(0, 220px)
|
|
[wide-end] minmax(var(--gutter), 1fr)
|
|
[full-end];
|
|
font-size: 19px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.gh-content > * {
|
|
grid-column: main;
|
|
min-width: 0;
|
|
margin: 0 0 1.4em;
|
|
}
|
|
|
|
.gh-content > .kg-width-wide {
|
|
grid-column: wide;
|
|
}
|
|
|
|
.gh-content > .kg-width-full {
|
|
grid-column: full;
|
|
}
|
|
|
|
.gh-content > .kg-width-full img {
|
|
width: 100%;
|
|
}
|
|
|
|
.gh-content h2,
|
|
.gh-content h3,
|
|
.gh-content h4 {
|
|
margin-top: 1em;
|
|
margin-bottom: 0.6em;
|
|
}
|
|
|
|
.gh-content h2 {
|
|
font-size: 30px;
|
|
}
|
|
|
|
.gh-content h3 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.gh-content h4 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.gh-content a {
|
|
text-decoration: underline;
|
|
text-decoration-thickness: 1px;
|
|
text-underline-offset: 3px;
|
|
}
|
|
|
|
.gh-content a:hover {
|
|
color: var(--ghost-accent-color, var(--muted));
|
|
}
|
|
|
|
.gh-content ul,
|
|
.gh-content ol {
|
|
padding-left: 1.3em;
|
|
}
|
|
|
|
.gh-content li + li {
|
|
margin-top: 0.35em;
|
|
}
|
|
|
|
.gh-content blockquote {
|
|
padding-left: 22px;
|
|
border-left: var(--rule);
|
|
font-size: 22px;
|
|
font-style: italic;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.gh-content blockquote.kg-blockquote-alt {
|
|
padding: 0;
|
|
border: 0;
|
|
font-size: 26px;
|
|
text-align: center;
|
|
}
|
|
|
|
.gh-content hr {
|
|
width: 100%;
|
|
height: 0;
|
|
border: 0;
|
|
border-top: var(--rule);
|
|
}
|
|
|
|
.gh-content figure img {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.gh-content pre {
|
|
padding: 18px;
|
|
overflow-x: auto;
|
|
background: var(--soft);
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.gh-content code {
|
|
padding: 2px 5px;
|
|
background: var(--soft);
|
|
font-family: Consolas, Menlo, Monaco, monospace;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.gh-content pre code {
|
|
padding: 0;
|
|
background: none;
|
|
}
|
|
|
|
.gh-content table {
|
|
display: block;
|
|
width: 100%;
|
|
overflow-x: auto;
|
|
border-collapse: collapse;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.gh-content th,
|
|
.gh-content td {
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid var(--line);
|
|
text-align: left;
|
|
}
|
|
|
|
.gh-content th {
|
|
border-bottom: 2px solid var(--text);
|
|
font-family: var(--font-heading);
|
|
}
|
|
|
|
.gh-content iframe,
|
|
.gh-content video {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.gh-content .kg-embed-card iframe[src*="youtube"],
|
|
.gh-content .kg-embed-card iframe[src*="vimeo"] {
|
|
width: 100%;
|
|
height: auto;
|
|
aspect-ratio: 16 / 9;
|
|
}
|
|
|
|
.gh-content .kg-image-card img,
|
|
.gh-content .kg-gallery-image img {
|
|
cursor: zoom-in;
|
|
}
|
|
|
|
.gh-content .kg-image-card a img,
|
|
.gh-content .kg-gallery-image a img {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.article__tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.post-nav {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 24px;
|
|
margin-top: 40px;
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.post-nav__link {
|
|
display: block;
|
|
padding-top: 12px;
|
|
border-top: 1px solid var(--text);
|
|
}
|
|
|
|
.post-nav__link--older {
|
|
grid-column: 2;
|
|
text-align: right;
|
|
}
|
|
|
|
.post-nav__title {
|
|
display: block;
|
|
margin-top: 6px;
|
|
font-size: 18px;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.related {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.article__comments {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
/* Bildanzeige
|
|
-------------------------------------------------------------------------- */
|
|
.lightbox {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
background: rgba(0, 0, 0, 0.92);
|
|
cursor: zoom-out;
|
|
}
|
|
|
|
.lightbox[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.lightbox img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.lightbox__close {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 16px;
|
|
padding: 4px 10px;
|
|
border: 0;
|
|
background: none;
|
|
color: #ffffff;
|
|
font-size: 34px;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* Fehlerseite
|
|
-------------------------------------------------------------------------- */
|
|
.error-page {
|
|
padding: 80px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.error-page__code {
|
|
font-family: var(--font-heading);
|
|
font-size: clamp(80px, 18vw, 180px);
|
|
font-weight: 800;
|
|
line-height: 1;
|
|
}
|
|
|
|
.error-page__message {
|
|
margin: 10px 0 28px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
/* Fußzeile
|
|
-------------------------------------------------------------------------- */
|
|
.site-footer__inner {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 12px 30px;
|
|
padding: 20px 0 40px;
|
|
border-top: var(--rule);
|
|
}
|
|
|
|
.site-footer__title {
|
|
font-family: var(--font-heading);
|
|
font-size: 22px;
|
|
font-weight: 800;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.site-footer__nav ul {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px 20px;
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
font-size: 11px;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.site-footer__copy {
|
|
flex-basis: 100%;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* Kleinere Bildschirme
|
|
-------------------------------------------------------------------------- */
|
|
@media (max-width: 1000px) {
|
|
.with-sidebar {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.sidebar {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
|
gap: 0 28px;
|
|
margin-top: 40px;
|
|
padding: 24px 0 0;
|
|
border-top: var(--rule);
|
|
border-left: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.topbar {
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.nav-toggle {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.site-nav {
|
|
display: none;
|
|
order: 10;
|
|
flex-basis: 100%;
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.site-nav.is-open {
|
|
display: block;
|
|
}
|
|
|
|
.site-nav > ul {
|
|
display: block;
|
|
}
|
|
|
|
.site-nav li {
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
padding: 0;
|
|
}
|
|
|
|
.site-nav a,
|
|
.nav-submenu a {
|
|
flex: 1;
|
|
padding: 11px 0;
|
|
}
|
|
|
|
.nav-submenu-toggle {
|
|
padding: 10px;
|
|
}
|
|
|
|
.nav-submenu,
|
|
.nav-submenu .nav-submenu {
|
|
position: static;
|
|
flex-basis: 100%;
|
|
min-width: 0;
|
|
padding: 0 0 0 16px;
|
|
border: 0;
|
|
}
|
|
|
|
.nav-submenu .nav-submenu-toggle svg {
|
|
transform: none;
|
|
}
|
|
|
|
.hero {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.hero__lead {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.hero__side,
|
|
.hero__side:last-child {
|
|
grid-column: auto;
|
|
grid-row: 2;
|
|
}
|
|
|
|
.hero__side .card__image img {
|
|
aspect-ratio: 3 / 2;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
body {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.masthead {
|
|
display: block;
|
|
}
|
|
|
|
.masthead__tagline {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.site-brand__logo {
|
|
max-height: 60px;
|
|
}
|
|
|
|
.theme-toggle__light,
|
|
.theme-toggle__dark {
|
|
display: none !important;
|
|
}
|
|
|
|
.theme-toggle {
|
|
padding: 7px;
|
|
}
|
|
|
|
.post-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 28px 16px;
|
|
}
|
|
|
|
.card__title {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.hero__lead .card__excerpt {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.gh-content {
|
|
font-size: 17px;
|
|
}
|
|
|
|
.post-nav {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.post-nav__link--older {
|
|
grid-column: auto;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 340px) {
|
|
.post-grid,
|
|
.hero {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
|
|
.hero__side,
|
|
.hero__side:last-child {
|
|
grid-row: auto;
|
|
}
|
|
}
|