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

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;
}