layout-3 w/ Akkurat

This commit is contained in:
Julie Blanc 2026-01-20 22:37:15 +01:00
parent a4c3390b99
commit 8255f08762
10 changed files with 197 additions and 259 deletions

View file

@ -37,12 +37,14 @@ ol[type="1"] + p{
blockquote{
font-family: var(--font-serif);
padding-left: calc(var(--indent)*1);
font-size: var(--fs-small);
// line-height: calc(var(--baseline)*0.75);
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;
}
@ -55,8 +57,12 @@ blockquote + ol + p{
.these{
font-family: var(--font-title);
// color: red;
// font-family: var(--font-title);
margin-bottom: calc(var(--baseline)*1);
border-left: 4px solid #efefef;
box-decoration-break: clone;
padding-left: calc(var(--indent)*0.5);
}
@ -66,20 +72,31 @@ ol[type="1"]{
break-after: avoid;
position: absolute;
left: calc(var(--indent)*-1.5 - 0.5ch);
left: 0px;
&::before{
display: flex;
gap: 0.25ch;
&::after{
content: attr(start);
// font-family: var(--font-title);
// font-weight: 500;
font-size: 0.6rem;
font-size: var(--fs-small);
color: #999;
display: block;
height: var(--baseline);
// display: block;
// height: var(--baseline);
padding-right: 1ch;
border-right: 1px solid #efefef;
// padding-right: 1ch;
// border-right: 1px solid #efefef;
}
li::before{
font-size: var(--fs-small);
content: "";
color: #d7d7d7;
position: relative;
top: -1px;
}
@ -87,48 +104,3 @@ ol[type="1"]{
}
// GRADATIONS
/*
ol[type="1"]{
list-style-type: none;
position: relative;
break-after: avoid;
position: absolute;
left: calc(var(--indent)*-1.5 - 0.5ch);
&::before{
content: attr(start);
font-family: var(--font-title);
font-weight: 500;
font-size: 0.6rem;
color: #999;
display: block;
padding: 0px 2px;
// border: 1px solid #efefef;
min-width: 20px;
justify-content: center;
}
}
.pagedjs_page_content::before{
--color: #efefef;
--size: 20px;
content: "";
display: block;
height: 100%;
width: var(--size);
position: absolute;
left: calc(var(--indent)*-1 - var(--size));
background: linear-gradient(transparent 0%, transparent calc(var(--baseline) - 1px), var(--color) calc(var(--baseline) - 1px), var(--color) var(--baseline)), transparent;
background-size: 100% var(--baseline);
background-repeat: repeat-y;
}
*/