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

layout + font size

Browse source
This commit is contained in:
Julie Blanc 2026-04-09 21:52:21 +02:00
parent 9ed0fb0d1d
commit dcdd26de82
11 changed files with 270 additions and 276 deletions
Download patch file Download diff file Expand all files Collapse all files

25
css/modules/_followingNotes.scss
View file

@ -1,24 +1,31 @@
.container-following-note{
font-family: var(--font-sans);
font-size: var(--fs-small);
line-height: calc(var(--baseline)*0.8);
// padding-left: var(--indent);
line-height: calc(var(--baseline)*0.75);
position: relative;
margin-top: calc(var(--baseline)*0.25);
hyphens: auto;
hyphenate-limit-chars: 7 3 4;
hyphenate-limit-lines: 2;
hyphenate-limit-zone: 8%;
word-spacing: -0.004em;
text-align: justify;
// color: #999;
// columns: 2;
}
.body_note{
padding-left: calc(var(--indent)*1);
position: relative;
// padding-left: calc(var(--indent)*1);
// position: relative;
}
.following-note_marker{
position: absolute;
// left: calc(var(--indent)*2);
left: 0;
.following-note_marker::after{
content: ". "
}
.following-note_call{
font-family: var(--font-sans);
font-size: var(--fs-small);
line-height: 1;
position: relative;

3
css/modules/_footnotes.scss
View file

@ -1,3 +1,6 @@
// INUTILE
@page {
@footnote {
float: bottom;

33
css/modules/_layout.scss
View file

@ -1,10 +1,12 @@
$width: 176mm;
$height: 240mm;
$top: 10mm;
$bottom: 12mm;
$inside: 20mm;
$outside: 14mm;
$top: 6mm;
$bottom: 18mm;
$inside: 12mm;
$outside: 6mm;
$content-h: calc($height - $top - $bottom - 1mm);
$gap: 4mm;
$indent: 10mm;
@media print {
@ -19,11 +21,17 @@ $content-h: calc($height - $top - $bottom - 1mm);
@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";
@ -36,18 +44,13 @@ $content-h: calc($height - $top - $bottom - 1mm);
@page:right {
margin-left: $inside;
margin-right: $outside;
@bottom-right {
content: counter(page);
font-family: var(--font-sans);
font-size: var(--fs-num);
text-align: right;
}
@bottom-left {
content: string(chapterCount);
font-family: var(--font-sans);
font-size: var(--fs-num);
text-align: left;
width: $indent;
}
@bottom-center {
@ -57,6 +60,13 @@ $content-h: calc($height - $top - $bottom - 1mm);
text-align: left;
}
@bottom-right {
content: counter(page);
font-family: var(--font-sans);
font-size: var(--fs-num);
text-align: right;
}
}
@page:first {
@ -97,6 +107,8 @@ $content-h: calc($height - $top - $bottom - 1mm);
}
@page chapter {
margin-left: $outside;
margin-right: $outside;
@top-left-corner { content: none; }
@top-left { content: none; }
@top-center { content: none; }
@ -130,6 +142,7 @@ $content-h: calc($height - $top - $bottom - 1mm);
#section__content{
columns: 2;
column-gap: $gap;
column-fill: auto;
}

69
css/modules/_text.scss
View file

@ -22,6 +22,8 @@ p{
text-align: justify;
orphans: 2;
widows: 2;
margin-left: $indent*0.8;
padding-left: $indent*0.2;
}
p, li{
@ -35,34 +37,36 @@ p, li{
p + p,
ol[type="1"] + p{
text-indent: calc(var(--indent)*0.5);
}
// p + p{
// text-indent: calc(var(--indent)*0.5);
// }
blockquote{
font-family: var(--font-serif);
padding-left: calc(var(--indent)*1);
padding-right: calc(var(--indent)*1);
// font-size: var(--fs-small);
margin-top: calc(var(--baseline)*0.5);
margin-bottom: calc(var(--baseline)*0.5);
font-size: 12px;
color: #343434;
font-family: var(--font-quote);
p{
border-left: 1px solid #cfcfcf;
}
}
.these + ol + p,
blockquote + ol + p{
text-indent: 0px;
blockquote u{
text-decoration: none;
text-transform: uppercase;
font-size: var(--fs-small);
}
// .these + ol + p,
// blockquote + ol + p{
// text-indent: 0px;
// }
.these{
// color: red;
// font-family: var(--font-title);
margin-bottom: calc(var(--baseline)*1);
border-left: 4px solid #efefef;
box-decoration-break: clone;
@ -75,32 +79,17 @@ ol[type="1"]{
position: relative;
break-after: avoid;
position: absolute;
left: 0px;
display: flex;
gap: 0.25ch;
&::after{
&::after{
content: attr(start);
// font-family: var(--font-title);
// font-weight: 500;
display: block;
position: absolute;
font-size: var(--fs-small);
color: #999;
// display: block;
// height: var(--baseline);
// padding-right: 1ch;
// border-right: 1px solid #efefef;
}
li::before{
font-size: var(--fs-small);
content: "";
color: #d7d7d7;
position: relative;
top: -1px;
opacity: 0.5;
// color: #d7d7 d7;
// position: relative;
// top: -1px;
}

165
css/modules/_titles.scss
View file

@ -10,22 +10,14 @@
height: $content-h;
}
// h1 + ol{
// break-before: page;
// }
h2, h3 {
h2, h3, h4, h5, h6 {
&::before{
content: attr(data-counter);
}
}
h4, h5, h6{
&::before{
content: attr(data-counter) ". ";
}
}
h2, h3 , h4{
break-inside: avoid;
@ -72,8 +64,8 @@
h1{
font-weight: 200;
font-size: 98px;
line-height: 1;
font-size: 115px;
line-height: 0.9;
hyphens: auto;
break-inside: avoid;
@ -83,6 +75,8 @@
flex-direction: column;
justify-content: space-between;
text-align: center;
span{
@ -96,86 +90,97 @@
h2{
font-family: var(--font-title);
font-size: 1.1rem;
font-weight: 500;
font-size: 22px;
font-weight: 200;
text-transform: uppercase;
line-height: calc(var(--baseline)*1.2);
position: relative;
margin-top: calc(var(--baseline)*1 + 6px);
padding-bottom: calc(var(--baseline)*1);
padding-right: 2ch;
padding-left: calc(var(--indent)*2);
text-align: center;
line-height: calc(var(--baseline)*1.4);
margin-top: 4mm;
padding-bottom: 4mm;
hyphens: auto;
&::before{
position: absolute;
left: 0;
// display: block;
// font-size: var(--fs-num);
// padding-left: var(--indent);
display: block;
}
// &::after{
// content: '';
// display: block;
// width: 100%;
// border-bottom: 1px solid currentColor;
// position: relative;
// top: calc(var(--baseline)*-2.5);
// opacity: 0.2;
// }
}
h3{
font-family: var(--font-title);
font-weight: 500;
font-size: 1rem;
line-height: calc(var(--baseline)*1);
// padding-left: var(--indent);
padding-right: calc(var(--indent)*2);
font-size: 1em;
line-height: calc(var(--baseline)*0.75);
position: relative;
margin-top: calc(var(--baseline)*1 + 4px);
padding-bottom: calc(var(--baseline)*0.75);
padding-left: calc(var(--indent)*2);
margin-top: 4mm;
padding-bottom: 4mm;
padding-left: $indent;
text-align: center;
&::before{
position: absolute;
left: 0;
display: block;
}
}
h4{
font-family: var(--font-title);
font-weight: 500;
font-size: 0.9rem;
line-height: calc(var(--baseline)*1);
padding-right: calc(var(--indent)*2);
font-size: 1em;
line-height: calc(var(--baseline)*0.75);
position: relative;
margin-top: calc(var(--baseline)*1 + 4px);
padding-bottom: calc(var(--baseline)*0.75);
text-decoration: underline 1px #cfcfcf;
text-underline-offset: 3px;
padding-left: calc(var(--indent)*2);
margin-top: calc(var(--baseline)*1);
padding-bottom: calc(var(--baseline)*0.5);
padding-left: $indent*2;
&::before{
// position: absolute;
// left: 0;
display: block;
position: absolute;
left: $indent;
}
}
h5{
font-family: var(--font-title);
font-weight: 500;
font-size: 0.8rem;
font-weight: normal;
font-size: 1em;
line-height: calc(var(--baseline)*1);
padding-left: calc(var(--indent)*2);
// padding-right: calc(var(--indent)*2);
position: relative;
margin-top: calc(var(--baseline)*1 + 4px);
margin-top: calc(var(--baseline)*1);
padding-bottom: calc(var(--baseline)*0.25);
padding-left: $indent;
text-indent: $indent;
&::before{
display: block;
position: absolute;
left: 0;
}
}
h6{
font-family: var(--font-title);
font-weight: 500;
font-size: 0.8rem;
margin-top: calc(var(--baseline)*0.5);
padding-bottom: calc(var(--baseline)*0.25);
color: #666;
font-weight: normal;
font-size: 1em;
line-height: calc(var(--baseline)*1);
position: relative;
margin-top: calc(var(--baseline)*1);
padding-left: $indent;
text-indent: $indent;
&::before{
display: block;
position: absolute;
left: 0;
}
}
@ -187,37 +192,3 @@
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;
// &::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;
}

10
css/modules/_var.scss
View file

@ -1,17 +1,17 @@
:root{
--font: 'Moulin', sans-serif;
--font-serif: 'Moulin', sans-serif;
--font-title: 'Louize', sans-serif;
--font-quote: 'Louize', sans-serif;
--font-sans: 'Basis Grotesque Pro', sans-serif;
--font-size: 11px;
--fs-small: 8.5px;
--font-size: 12px;
--fs-small: 9.8px;
--baseline: 16px;
--baseline: 18px;
--indent: 26px;
--fs-num: 10px;
--fs-num: 12px;
}