walter-boente_book-collection/css/modules/_layout.scss
2026-04-09 21:52:21 +02:00

165 lines
4.1 KiB
SCSS

$width: 176mm;
$height: 240mm;
$top: 6mm;
$bottom: 18mm;
$inside: 12mm;
$outside: 6mm;
$content-h: calc($height - $top - $bottom - 1mm);
$gap: 4mm;
$indent: 10mm;
@media print {
@page {
size: $width $height;
margin-top: $top;
margin-bottom: $bottom;
// bleed: 6mm;
// marks: crop;
}
@page:left {
margin-left: $outside;
margin-right: $inside;
// background-image: url("/images/layout-2_3.png");
// background-size: 100% 100%;
@bottom-left {
content: counter(page);
font-family: var(--font-sans);
font-size: var(--fs-num);
text-align: left;
width: $indent;
}
@bottom-center {
content: "Höchstpersönlichkeit";
font-family: var(--font-sans);
font-size: var(--fs-num);
text-align: left;
}
}
@page:right {
margin-left: $inside;
margin-right: $outside;
@bottom-left {
content: string(chapterCount);
font-family: var(--font-sans);
font-size: var(--fs-num);
text-align: left;
width: $indent;
}
@bottom-center {
content: string(chapter);
font-family: var(--font-sans);
font-size: var(--fs-num);
text-align: left;
}
@bottom-right {
content: counter(page);
font-family: var(--font-sans);
font-size: var(--fs-num);
text-align: right;
}
}
@page:first {
@top-left-corner { content: none; }
@top-left { content: none; }
@top-center { content: none; }
@top-right { content: none; }
@top-right-corner { content: none; }
@left-top { content: none; }
@left-middle { content: none; }
@left-bottom { content: none; }
@right-top { content: none; }
@right-middle { content: none; }
@right-bottom { content: none; }
@bottom-left-corner { content: none; }
@bottom-left { content: none; }
@bottom-center { content: none; }
@bottom-right { content: none; }
@bottom-right-corner { content: none; }
}
@page:blank {
@top-left-corner { content: none; }
@top-left { content: none; }
@top-center { content: none; }
@top-right { content: none; }
@top-right-corner { content: none; }
@left-top { content: none; }
@left-middle { content: none; }
@left-bottom { content: none; }
@right-top { content: none; }
@right-middle { content: none; }
@right-bottom { content: none; }
@bottom-left-corner { content: none; }
@bottom-left { content: none; }
@bottom-center { content: none; }
@bottom-right { content: none; }
@bottom-right-corner { content: none; }
}
@page chapter {
margin-left: $outside;
margin-right: $outside;
@top-left-corner { content: none; }
@top-left { content: none; }
@top-center { content: none; }
@top-right { content: none; }
@top-right-corner { content: none; }
@left-top { content: none; }
@left-middle { content: none; }
@left-bottom { content: none; }
@right-top { content: none; }
@right-middle { content: none; }
@right-bottom { content: none; }
@bottom-left-corner { content: none; }
@bottom-left { content: none; }
@bottom-center { content: none; }
@bottom-right { content: none; }
@bottom-right-corner { content: none; }
}
}
#section__content{
break-before: right;
}
.page-break{
break-before: page;
}
#section__content{
columns: 2;
column-gap: $gap;
column-fill: auto;
}
// Title chapter
#section__content h1{
break-before: left;
break-after: page;
page: chapter;
}
#section__content h1 .h1-count{
string-set: chapterCount content(text);
}
#section__content h1 .h1-text{
string-set: chapter content(text);
}