layout-3 w/ Akkurat
This commit is contained in:
Julie Blanc
parent
a4c3390b99
commit
8255f08762
10 changed files with 197 additions and 259 deletions
168
css/style.css
168
css/style.css
|
|
@ -1,10 +1,11 @@
|
|||
@charset "UTF-8";
|
||||
: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;
|
||||
--indent: 26px;
|
||||
|
|
@ -32,7 +33,7 @@ body {
|
|||
|
||||
@media print {
|
||||
@page {
|
||||
size: 134mm 205mm;
|
||||
size: 176mm 240mm;
|
||||
margin-top: 36px;
|
||||
margin-bottom: 20mm;
|
||||
bleed: 6mm;
|
||||
|
|
@ -213,10 +214,13 @@ ol[type="1"] + p {
|
|||
}
|
||||
|
||||
blockquote {
|
||||
font-family: var(--font-serif);
|
||||
padding-left: calc(var(--indent) * 1);
|
||||
font-size: var(--fs-small);
|
||||
padding-right: calc(var(--indent) * 1);
|
||||
margin-top: calc(var(--baseline) * 0.5);
|
||||
margin-bottom: calc(var(--baseline) * 0.5);
|
||||
font-size: 12px;
|
||||
color: #343434;
|
||||
}
|
||||
|
||||
.these + ol + p,
|
||||
|
|
@ -225,8 +229,11 @@ blockquote + ol + p {
|
|||
}
|
||||
|
||||
.these {
|
||||
font-family: var(--font-title);
|
||||
margin-bottom: calc(var(--baseline) * 1);
|
||||
border-left: 4px solid #efefef;
|
||||
-webkit-box-decoration-break: clone;
|
||||
box-decoration-break: clone;
|
||||
padding-left: calc(var(--indent) * 0.5);
|
||||
}
|
||||
|
||||
ol[type="1"] {
|
||||
|
|
@ -235,59 +242,26 @@ ol[type="1"] {
|
|||
-moz-column-break-after: avoid;
|
||||
break-after: avoid;
|
||||
position: absolute;
|
||||
left: calc(var(--indent) * -1.5 - 0.5ch);
|
||||
left: 0px;
|
||||
display: flex;
|
||||
gap: 0.25ch;
|
||||
}
|
||||
ol[type="1"]::before {
|
||||
ol[type="1"]::after {
|
||||
content: attr(start);
|
||||
font-size: 0.6rem;
|
||||
font-size: var(--fs-small);
|
||||
color: #999;
|
||||
display: block;
|
||||
height: var(--baseline);
|
||||
padding-right: 1ch;
|
||||
border-right: 1px solid #efefef;
|
||||
}
|
||||
ol[type="1"] li::before {
|
||||
font-size: var(--fs-small);
|
||||
content: "¶";
|
||||
color: #d7d7d7;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
/*
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#section__content {
|
||||
margin-left: 28mm;
|
||||
}
|
||||
.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;
|
||||
|
||||
}
|
||||
|
||||
*/
|
||||
#section__content h1::before, #section__content h2::before, #section__content h3::before {
|
||||
content: attr(data-counter);
|
||||
}
|
||||
|
|
@ -340,11 +314,11 @@ ol[type="1"]{
|
|||
margin-top: calc(var(--baseline) * 1 + 6px);
|
||||
padding-bottom: calc(var(--baseline) * 1);
|
||||
padding-right: 2ch;
|
||||
padding-left: calc(var(--indent) * 2);
|
||||
}
|
||||
#section__content h2::before {
|
||||
display: block;
|
||||
font-size: var(--fs-num);
|
||||
padding-left: var(--indent);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
#section__content h3 {
|
||||
font-family: var(--font-title);
|
||||
|
|
@ -355,18 +329,17 @@ ol[type="1"]{
|
|||
position: relative;
|
||||
margin-top: calc(var(--baseline) * 1 + 4px);
|
||||
padding-bottom: calc(var(--baseline) * 0.75);
|
||||
padding-left: calc(var(--indent) * 2);
|
||||
}
|
||||
#section__content h3::before {
|
||||
display: block;
|
||||
font-size: var(--fs-num);
|
||||
padding-left: var(--indent);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
#section__content h4 {
|
||||
font-family: var(--font-title);
|
||||
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);
|
||||
|
|
@ -374,13 +347,14 @@ ol[type="1"]{
|
|||
-webkit-text-decoration: underline 1px #cfcfcf;
|
||||
text-decoration: underline 1px #cfcfcf;
|
||||
text-underline-offset: 3px;
|
||||
padding-left: calc(var(--indent) * 2);
|
||||
}
|
||||
#section__content h5 {
|
||||
font-family: var(--font-title);
|
||||
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);
|
||||
position: relative;
|
||||
margin-top: calc(var(--baseline) * 1 + 4px);
|
||||
padding-bottom: calc(var(--baseline) * 0.25);
|
||||
|
|
@ -400,61 +374,67 @@ ol[type="1"]{
|
|||
|
||||
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);
|
||||
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;
|
||||
}
|
||||
h1::before {
|
||||
display: block;
|
||||
font-size: var(--fs-num);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: calc(var(--indent) * 2 - 0.5ch);
|
||||
}
|
||||
|
||||
section h1:first-of-type {
|
||||
margin-top: 3px !important;
|
||||
}
|
||||
|
||||
.footnote-ref {
|
||||
font-family: var(--font-title);
|
||||
line-height: 0;
|
||||
font-size: var(--fs-small);
|
||||
font-weight: 500;
|
||||
@page {
|
||||
@footnote {
|
||||
float: bottom;
|
||||
footnote-policy: auto;
|
||||
}
|
||||
}
|
||||
.pagedjs_footnote_content {
|
||||
padding-top: calc(var(--baseline) * 1);
|
||||
}
|
||||
|
||||
#footnotes {
|
||||
-moz-column-break-before: right;
|
||||
break-before: right;
|
||||
}
|
||||
#footnotes .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;
|
||||
}
|
||||
#footnotes .title-part::before {
|
||||
content: attr(data-part-number) ". ";
|
||||
}
|
||||
#footnotes li {
|
||||
.inline-note {
|
||||
float: footnote;
|
||||
footnote-policy: auto;
|
||||
font-size: var(--fs-small);
|
||||
line-height: calc(var(--baseline) * 0.8);
|
||||
padding-left: var(--indent);
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
}
|
||||
#footnotes .footnote-back {
|
||||
.inline-note::marker {
|
||||
display: none;
|
||||
content: "";
|
||||
}
|
||||
|
||||
[data-id=footnotes][data-split-from] > :first-child {
|
||||
margin-top: 0;
|
||||
[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;
|
||||
}
|
||||
|
||||
blockquote .inline-note {
|
||||
font-variant-position: normal !important;
|
||||
}
|
||||
|
||||
#section__list-of-abbr {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue