layout-3 w/ Akkurat
This commit is contained in:
Julie Blanc
parent
a4c3390b99
commit
8255f08762
10 changed files with 197 additions and 259 deletions
|
|
@ -1,88 +1,51 @@
|
|||
// @page {
|
||||
// @footnote {
|
||||
// float: bottom;
|
||||
// footnote-policy: auto;
|
||||
// }
|
||||
// }
|
||||
@page {
|
||||
@footnote {
|
||||
float: bottom;
|
||||
footnote-policy: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// .pagedjs_footnote_content{
|
||||
// padding-top: calc(var(--baseline)*1);
|
||||
// }
|
||||
.pagedjs_footnote_content{
|
||||
padding-top: calc(var(--baseline)*1);
|
||||
}
|
||||
|
||||
// .inline-note {
|
||||
// float: footnote;
|
||||
// footnote-policy: auto;
|
||||
// font-size: 9px;
|
||||
// line-height: calc(var(--baseline)*0.8);
|
||||
// padding-left: var(--indent);
|
||||
// position: relative;
|
||||
// // font-weight: 100;
|
||||
|
||||
// &::marker{
|
||||
// display: none;
|
||||
// content: "";
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
|
||||
// [data-counter-note]{
|
||||
// &::before{
|
||||
// content: attr(data-counter-note) ".";
|
||||
// position: absolute;
|
||||
// left: 0px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// [data-footnote-call]{
|
||||
// font-size: 9px;
|
||||
// }
|
||||
|
||||
|
||||
.footnote-ref{
|
||||
font-family: var(--font-title);
|
||||
line-height: 0;
|
||||
.inline-note {
|
||||
float: footnote;
|
||||
footnote-policy: auto;
|
||||
font-size: var(--fs-small);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
|
||||
#footnotes{
|
||||
break-before: right;
|
||||
|
||||
.title-part{
|
||||
font-family: var(--font-title);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
line-height: calc(var(--baseline)*1.2);
|
||||
margin-top: calc(var(--baseline)*2);
|
||||
padding-bottom: calc(var(--baseline)*1);
|
||||
padding-right: 2ch;
|
||||
padding-left: 2ch;
|
||||
text-align: center;
|
||||
text-wrap: balance;
|
||||
&::before{
|
||||
content: attr(data-part-number) ". "
|
||||
}
|
||||
}
|
||||
|
||||
li{
|
||||
font-size: var(--fs-small);
|
||||
|
||||
// &::marker{
|
||||
// font-family: var(--font-title);
|
||||
// font-weight: 500;
|
||||
// }
|
||||
}
|
||||
|
||||
.footnote-back{
|
||||
display: none;
|
||||
}
|
||||
line-height: calc(var(--baseline)*0.8);
|
||||
padding-left: var(--indent);
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
|
||||
&::marker{
|
||||
display: none;
|
||||
content: "";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
[data-counter-note]{
|
||||
&::before{
|
||||
content: attr(data-counter-note) ".";
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.inline-note::after{
|
||||
font-family: var(--font);
|
||||
font-size: var(--fs-small);
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
font-variant-position: normal!important;
|
||||
|
||||
}
|
||||
|
||||
[data-id="footnotes"][data-split-from] > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
blockquote .inline-note{
|
||||
font-variant-position: normal!important;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@media print {
|
||||
@page {
|
||||
size: 134mm 205mm;
|
||||
size: 176mm 240mm;
|
||||
// size: 150mm 220mm;
|
||||
margin-top: 36px;
|
||||
margin-bottom: 20mm;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
}
|
||||
|
||||
*/
|
||||
|
|
@ -1,13 +1,14 @@
|
|||
|
||||
#section__content{
|
||||
margin-left: 28mm;
|
||||
|
||||
h1, h2, h3 {
|
||||
h1, h2, h3 {
|
||||
&::before{
|
||||
content: attr(data-counter);
|
||||
}
|
||||
}
|
||||
|
||||
h4, h5, h6{
|
||||
h4, h5, h6{
|
||||
&::before{
|
||||
content: attr(data-counter) ". ";
|
||||
}
|
||||
|
|
@ -69,10 +70,13 @@
|
|||
margin-top: calc(var(--baseline)*1 + 6px);
|
||||
padding-bottom: calc(var(--baseline)*1);
|
||||
padding-right: 2ch;
|
||||
padding-left: calc(var(--indent)*2);
|
||||
&::before{
|
||||
display: block;
|
||||
font-size: var(--fs-num);
|
||||
padding-left: var(--indent);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
// display: block;
|
||||
// font-size: var(--fs-num);
|
||||
// padding-left: var(--indent);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -89,12 +93,11 @@
|
|||
position: relative;
|
||||
margin-top: calc(var(--baseline)*1 + 4px);
|
||||
padding-bottom: calc(var(--baseline)*0.75);
|
||||
padding-left: calc(var(--indent)*2);
|
||||
&::before{
|
||||
display: block;
|
||||
font-size: var(--fs-num);
|
||||
padding-left: var(--indent);
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -103,13 +106,19 @@
|
|||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
line-height: calc(var(--baseline)*1);
|
||||
padding-left: calc(var(--indent)*1);
|
||||
padding-right: calc(var(--indent)*2);
|
||||
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);
|
||||
&::before{
|
||||
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -118,7 +127,7 @@
|
|||
font-weight: 500;
|
||||
font-size: 0.8rem;
|
||||
line-height: calc(var(--baseline)*1);
|
||||
padding-left: calc(var(--indent)*1);
|
||||
padding-left: calc(var(--indent)*2);
|
||||
// padding-right: calc(var(--indent)*2);
|
||||
position: relative;
|
||||
margin-top: calc(var(--baseline)*1 + 4px);
|
||||
|
|
@ -145,19 +154,32 @@
|
|||
|
||||
h1{
|
||||
font-family: var(--font-title);
|
||||
font-size: 1.4rem;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
line-height: calc(var(--baseline)*1.4);
|
||||
text-align: center;
|
||||
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: 1ch;
|
||||
padding-left: calc(var(--indent)*2);
|
||||
padding-right: 1ch;
|
||||
|
||||
|
||||
&::before{
|
||||
display: block;
|
||||
font-size: var(--fs-num);
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
:root{
|
||||
--font: 'Edgar', sans-serif;
|
||||
--font: 'Akkurat Std', sans-serif;
|
||||
--font-serif: 'Edgar', sans-serif;
|
||||
--font-title: 'Allium Rounded', sans-serif;
|
||||
--font-sans: 'Allium Rounded', sans-serif;
|
||||
--font-size: 11px;
|
||||
--fs-small: 9.5px;
|
||||
--fs-small: 8.5px;
|
||||
--fs-num: 14px;
|
||||
--baseline: 16px;
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue