Julie/walter-boente_book-collection
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

starting layout-2

Browse source
This commit is contained in:
Julie Blanc 2026-01-19 23:14:58 +01:00
parent abbd549428
commit e055fc96ee
9 changed files with 142 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

122
css/style.css
View file

@ -1,9 +1,10 @@
@charset "UTF-8";
:root {
--font: "Edgar", sans-serif;
--font-title: "Heliotrope 3 Caps", sans-serif;
--font-sans: "Heliotrope 4", sans-serif;
--font-size: 12px;
--font-title: "Allium Rounded", sans-serif;
--font-sans: "Allium Rounded", sans-serif;
--font-size: 11px;
--fs-num: 14px;
--baseline: 16px;
--indent: 26px;
}
@ -31,30 +32,32 @@ body {
@media print {
@page {
size: 134mm 205mm;
margin-top: 67px;
margin-bottom: 10mm;
margin-left: 10mm;
margin-right: 10mm;
bleed: 6mm;
marks: crop;
margin-top: 36px;
margin-bottom: 20mm;
}
@page :left {
margin-left: 12mm;
margin-right: 32mm;
@top-left {
margin-left: 22mm;
margin-right: 22mm;
@bottom-left {
content: counter(page);
font-family: var(--font-title);
font-weight: 500;
font-size: var(--fs-num);
}
}
@page :right {
margin-left: 32mm;
margin-right: 12mm;
@top-right {
margin-right: 22mm;
@bottom-right {
content: counter(page);
font-family: var(--font-title);
font-weight: 500;
font-size: var(--fs-num);
}
@top-left {
@bottom-left {
content: "Höchstpersönlichkeit";
font-variant-caps: small-caps;
letter-spacing: 0.05em;
font-family: var(--font-title);
font-weight: normal;
}
}
@page :first {
@ -224,21 +227,8 @@ ol[type="1"] + p {
}
blockquote {
padding-left: var(--indent);
margin-top: calc(var(--baseline) * 1);
margin-bottom: calc(var(--baseline) * 1);
padding-left: calc(var(--indent) * 2);
}
blockquote p {
font-style: italic;
}
blockquote p em {
font-style: normal;
}
blockquote u {
font-variant: small-caps;
text-decoration: none;
}
blockquote + ol + p {
text-indent: 0px;
}
@ -316,73 +306,76 @@ blockquote + ol + p {
}
#section__content h1 {
font-family: var(--font-title);
font-weight: normal;
font-size: 1.5rem;
font-size: 1.6rem;
font-weight: 500;
text-transform: uppercase;
line-height: calc(var(--baseline) * 1.4);
text-align: center;
position: relative;
margin-top: calc(var(--baseline) * 3 - 3px);
margin-top: calc(var(--baseline) * 2 - 3px);
padding-bottom: calc(var(--baseline) * 1);
padding-left: 1ch;
padding-right: 1ch;
}
#section__content h1::before {
display: block;
font-size: 1rem;
font-size: var(--fs-num);
}
#section__content h1:first-of-type {
margin-top: 3px !important;
}
#section__content h2 {
font-family: var(--font-title);
font-weight: normal;
font-size: 1.3rem;
font-size: 1.1rem;
font-weight: 500;
text-transform: uppercase;
line-height: calc(var(--baseline) * 1.2);
text-align: right;
padding-left: 3ch;
text-align: center;
position: relative;
margin-top: calc(var(--baseline) * 1 + 9px);
margin-top: calc(var(--baseline) * 1 + 6px);
padding-bottom: calc(var(--baseline) * 1);
padding-left: 2ch;
padding-right: 2ch;
}
#section__content h2::before {
position: absolute;
left: 0;
display: block;
font-size: var(--fs-num);
}
#section__content h3 {
font-family: var(--font-sans);
font-weight: normal;
font-family: var(--font-title);
font-weight: 500;
font-size: 1rem;
line-height: calc(var(--baseline) * 1);
text-align: right;
padding-left: 3ch;
padding-left: var(--indent);
padding-right: calc(var(--indent) * 2);
position: relative;
margin-top: calc(var(--baseline) * 1 + 9px);
padding-bottom: calc(var(--baseline) * 1);
margin-top: calc(var(--baseline) * 1 + 4px);
padding-bottom: calc(var(--baseline) * 0.75);
}
#section__content h3::before {
position: absolute;
left: 0;
}
#section__content h4 {
font-family: var(--font-sans);
font-weight: normal;
font-size: 0.8rem;
line-height: calc(var(--baseline) * 1);
text-align: right;
padding-left: 3ch;
position: relative;
margin-top: calc(var(--baseline) * 0.5);
margin-bottom: calc(var(--baseline) * 0.5);
font-family: var(--font-title);
font-weight: 500;
font-size: 0.9rem;
line-height: calc(var(--baseline) * 1);
padding-left: calc(var(--indent) * 1);
padding-right: calc(var(--indent) * 2);
position: relative;
margin-top: calc(var(--baseline) * 1 + 4px);
padding-bottom: calc(var(--baseline) * 0.75);
}
#section__content h5 {
font-family: var(--font-sans);
font-weight: normal;
font-size: 0.7rem;
font-family: var(--font-title);
font-weight: 500;
font-size: 0.8rem;
line-height: calc(var(--baseline) * 1);
padding-left: calc(var(--indent) * 1);
position: relative;
margin-top: calc(var(--baseline) * 0.75);
margin-bottom: calc(var(--baseline) * 0.25);
margin-top: calc(var(--baseline) * 1 + 4px);
padding-bottom: calc(var(--baseline) * 0.25);
}
[data-id=section__content][data-split-from] > :first-child {
@ -392,6 +385,7 @@ blockquote + ol + p {
@page {
@footnote {
float: bottom;
footnote-policy: auto;
}
}
.pagedjs_footnote_content {
@ -400,11 +394,11 @@ blockquote + ol + p {
.inline-note {
float: footnote;
footnote-policy: auto;
font-size: 9px;
line-height: calc(var(--baseline) * 0.9);
line-height: calc(var(--baseline) * 0.8);
padding-left: var(--indent);
position: relative;
font-weight: 100;
}
.inline-note::marker {
display: none;