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

title chapter

Browse source
This commit is contained in:
Julie Blanc 2026-04-09 19:37:52 +02:00
parent 5cb765701a
commit 9ed0fb0d1d
9 changed files with 302 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

126
css/modules/_layout.scss
View file

@ -1,52 +1,62 @@
$width: 176mm;
$height: 240mm;
$top: 10mm;
$bottom: 12mm;
$inside: 20mm;
$outside: 14mm;
$content-h: calc($height - $top - $bottom - 1mm);
@media print {
@page {
size: 176mm 240mm;
// size: 150mm 220mm;
margin-top: 36px;
margin-bottom: 20mm;
size: $width $height;
margin-top: $top;
margin-bottom: $bottom;
bleed: 6mm;
marks: crop;
// bleed: 6mm;
// marks: crop;
}
@page:left {
margin-left: 18mm;
margin-right: 26mm;
margin-left: $outside;
margin-right: $inside;
@bottom-left {
content: counter(page);
font-family: var(--font-title);
font-weight: 500;
font-family: var(--font-sans);
font-size: var(--fs-num);
text-align: left;
}
// @top-right {
// content: "Höchstpersönlichkeit";
// font-variant-caps: small-caps;
// letter-spacing: 0.01em;
// }
@bottom-center {
content: "Höchstpersönlichkeit";
font-family: var(--font-sans);
font-size: var(--fs-num);
text-align: left;
}
}
@page:right {
margin-left: 26mm;
margin-right: 18mm;
margin-left: $inside;
margin-right: $outside;
@bottom-right {
content: counter(page);
font-family: var(--font-title);
font-weight: 500;
font-family: var(--font-sans);
font-size: var(--fs-num);
text-align: right;
}
@right-top {
content: "Höchstpersönlichkeit";
font-family: var(--font-title);
font-weight: normal;
// background-color: red;
transform-origin: top left;
height: calc(var(--baseline)*2);
word-spacing: nowrap;
width: 52ch;
transform: rotate(90deg);
text-align: left;
position: relative;
left: 14mm;
padding-left: 5px;
@bottom-left {
content: string(chapterCount);
font-family: var(--font-sans);
font-size: var(--fs-num);
text-align: left;
}
@bottom-center {
content: string(chapter);
font-family: var(--font-sans);
font-size: var(--fs-num);
text-align: left;
}
}
@page:first {
@ -85,10 +95,58 @@
@bottom-right { content: none; }
@bottom-right-corner { content: none; }
}
@page chapter {
@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-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);
}

5
css/modules/_text.scss
View file

@ -1,3 +1,6 @@
sup{
line-height: 0;
}
@ -48,8 +51,6 @@ blockquote{
margin-bottom: calc(var(--baseline)*0.5);
font-size: 12px;
color: #343434;
}
.these + ol + p,

97
css/modules/_titles.scss
View file

@ -1,8 +1,20 @@
#section__content{
margin-left: 28mm;
// margin-left: 28mm;
h1, h2, h3 {
h1{
column-span: all;
height: $content-h;
}
// h1 + ol{
// break-before: page;
// }
h2, h3 {
&::before{
content: attr(data-counter);
}
@ -15,7 +27,7 @@
}
h1, h2, h3 , h4{
h2, h3 , h4{
break-inside: avoid;
break-after: avoid;
text-wrap: balance;
@ -57,6 +69,29 @@
h1{
font-weight: 200;
font-size: 98px;
line-height: 1;
hyphens: auto;
break-inside: avoid;
display: flex;
flex-direction: column;
justify-content: space-between;
text-align: center;
span{
display: block;
}
}
@ -152,36 +187,36 @@
margin-top: 0;
}
h1{
font-family: var(--font-title);
font-size: 1.6rem;
font-weight: 500;
text-transform: uppercase;
line-height: calc(var(--baseline)*1.6);
// text-align: center;
position: relative;
margin-top: calc(var(--baseline)*2 - 3px);
padding-bottom: calc(var(--baseline)*1);
padding-left: calc(var(--indent)*2);
padding-right: 1ch;
// h1{
// font-family: var(--font-title);
// font-size: 1.6rem;
// font-weight: 500;
// text-transform: uppercase;
// line-height: calc(var(--baseline)*1.6);
// // text-align: center;
// position: relative;
// margin-top: calc(var(--baseline)*2 - 3px);
// padding-bottom: calc(var(--baseline)*1);
// padding-left: calc(var(--indent)*2);
// padding-right: 1ch;
&::before{
// font-size: var(--fs-num);
// width: 2ch;
// height: 2ch;
// border: 1px solid currentColor;
// border-radius: 50%;
// display: flex;
// align-items: center;
// justify-content: center;
position: absolute;
left: 0;
width: calc(var(--indent)*2 - 0.5ch);
// border-bottom: 2px solid #cfcfcf;
// top: 3px;
}
}
// &::before{
// // font-size: var(--fs-num);
// // width: 2ch;
// // height: 2ch;
// // border: 1px solid currentColor;
// // border-radius: 50%;
// // display: flex;
// // align-items: center;
// // justify-content: center;
// position: absolute;
// left: 0;
// width: calc(var(--indent)*2 - 0.5ch);
// // border-bottom: 2px solid #cfcfcf;
// // top: 3px;
// }
// }
section h1:first-of-type{
margin-top: 3px!important;

5
css/modules/_var.scss
View file

@ -5,10 +5,13 @@
--font-sans: 'Basis Grotesque Pro', sans-serif;
--font-size: 11px;
--fs-small: 8.5px;
--fs-num: 14px;
--baseline: 16px;
--indent: 26px;
--fs-num: 10px;
}