layout terminal
This commit is contained in:
Julie Blanc
parent
aed4b9eb92
commit
68a0dcb88b
80 changed files with 2234 additions and 349 deletions
|
|
@ -1,21 +1,24 @@
|
|||
@charset "UTF-8";
|
||||
@import url("https://fonts.googleapis.com/css2?family=Ovo&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,200..900;1,7..72,200..900&display=swap");
|
||||
@import url("https://fonts.googleapis.com/css2?family=Vollkorn:ital,wght@0,400..900;1,400..900&display=swap");
|
||||
:root {
|
||||
--font: 'Routed Gothic', sans-serif;
|
||||
--font: 'Wagram Slab', serif;
|
||||
--font: 'Bilzig', serif;
|
||||
--mono: 'Selectric Mono', monospace;
|
||||
--mono: 'Ivory Mono', monospace;
|
||||
--mono: 'Baskemo Sans', monospace;
|
||||
--sans: 'Routed Gothic', serif;
|
||||
--font-decor: 'Decor Round Random';
|
||||
--font-sans: 'Routed Gothic', serif;
|
||||
--title: 'HNoailles Times Triplex', sans-serif;
|
||||
--red: #9B0000;
|
||||
--green:#009B00;
|
||||
--green-light:#009b0025;
|
||||
--blue: #00009B;
|
||||
--indent: 7mm;
|
||||
--font-size: 12px;
|
||||
--baseline: 18px;
|
||||
--font-size: 18px;
|
||||
--baseline: 24px;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -46,8 +49,8 @@ body {
|
|||
marks: crop;
|
||||
}
|
||||
@page :left {
|
||||
margin-left: 18mm;
|
||||
margin-right: 26mm;
|
||||
margin-left: 26mm;
|
||||
margin-right: 18mm;
|
||||
@bottom-center {
|
||||
content: counter(page);
|
||||
font-family: var(--sans);
|
||||
|
|
@ -68,8 +71,8 @@ body {
|
|||
}
|
||||
}
|
||||
@page :right {
|
||||
margin-left: 26mm;
|
||||
margin-right: 18mm;
|
||||
margin-left: 18mm;
|
||||
margin-right: 26mm;
|
||||
@bottom-center {
|
||||
content: counter(page);
|
||||
font-family: var(--sans);
|
||||
|
|
@ -228,6 +231,22 @@ body {
|
|||
font-family: "Baskemo Sans", serif;
|
||||
}
|
||||
|
||||
[data-type=Velvetyne] {
|
||||
font-family: "Velvetyne";
|
||||
}
|
||||
|
||||
[data-type="Garabosse Perle"] {
|
||||
font-family: "Garabosse Perle";
|
||||
}
|
||||
|
||||
[data-type="Adelphe Trouble Germinal"] {
|
||||
font-family: "Adelphe Trouble Germinal";
|
||||
}
|
||||
|
||||
[data-type=Bilzig] {
|
||||
font-family: "Bilzig";
|
||||
}
|
||||
|
||||
#type-specimen {
|
||||
background-color: #cfcfcf;
|
||||
}
|
||||
|
|
@ -328,29 +347,33 @@ body {
|
|||
hyphens: auto;
|
||||
hyphenate-limit-chars: 8 3;
|
||||
position: relative;
|
||||
letter-spacing: 0.01rem;
|
||||
orphans: 2;
|
||||
hyphens: 2;
|
||||
}
|
||||
.chapter .container-following-note + p,
|
||||
.chapter p + p {
|
||||
text-indent: var(--indent);
|
||||
text-indent: 30%;
|
||||
}
|
||||
.chapter h3, .chapter h4 {
|
||||
-moz-column-break-after: avoid;
|
||||
break-after: avoid;
|
||||
}
|
||||
.chapter h3 {
|
||||
margin-top: calc(var(--baseline) * 1.5);
|
||||
margin-bottom: calc(var(--baseline) * 0.5);
|
||||
text-align: center;
|
||||
font-weight: normal;
|
||||
font-family: var(--mono);
|
||||
text-transform: uppercase;
|
||||
font-family: var(--font-sans);
|
||||
color: var(--blue);
|
||||
max-width: 18ch;
|
||||
letter-spacing: 0.05rem;
|
||||
color: black;
|
||||
-webkit-text-decoration: underline 1px;
|
||||
text-decoration: underline 1px;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.chapter blockquote {
|
||||
font-family: var(--mono);
|
||||
padding-left: var(--indent);
|
||||
font-family: "Routed Gothic Wide";
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
padding-left: 15%;
|
||||
margin-top: calc(var(--baseline) * 1);
|
||||
margin-bottom: calc(var(--baseline) * 1);
|
||||
}
|
||||
|
|
@ -362,54 +385,60 @@ body {
|
|||
position: relative;
|
||||
}
|
||||
|
||||
.pagedjs_footnote {
|
||||
font-family: var(--sans);
|
||||
line-height: 1.3;
|
||||
.following-note {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 12px;
|
||||
font-weight: 200;
|
||||
text-indent: -14mm;
|
||||
padding-left: 14mm;
|
||||
line-height: 14px;
|
||||
font-weight: 500;
|
||||
display: block;
|
||||
margin-top: calc(var(--baseline) * 0.5);
|
||||
margin-bottom: calc(var(--baseline) * 0.5);
|
||||
}
|
||||
|
||||
.note-container {
|
||||
grid-column: center;
|
||||
grid-row: footer;
|
||||
width: 100%;
|
||||
height: calc(100% - 12mm);
|
||||
-moz-columns: 2;
|
||||
columns: 2;
|
||||
-moz-column-fill: auto;
|
||||
column-fill: auto;
|
||||
padding-top: 20px;
|
||||
.container-following-note {
|
||||
margin-left: 30%;
|
||||
}
|
||||
|
||||
.pagedjs_footnotes::marker {
|
||||
color: red;
|
||||
.wrapper__note-call {
|
||||
-moz-column-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
.pagedjs_footnote[data-footnote-call] {
|
||||
font-size: 12px;
|
||||
font-family: var(--sans);
|
||||
text-indent: 0px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
.pagedjs_footnote[data-footnote-call]::after {
|
||||
font-variant-position: normal;
|
||||
content: attr(data-counter-footnote-increment) "}";
|
||||
}
|
||||
.pagedjs_footnote[data-footnote-call]::before {
|
||||
.following-note_call::before,
|
||||
.following-note_marker::before {
|
||||
content: "{";
|
||||
}
|
||||
.following-note_call::after,
|
||||
.following-note_marker::after {
|
||||
content: "}";
|
||||
}
|
||||
.following-note_call,
|
||||
.following-note_marker {
|
||||
font-family: var(--font-sans);
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
[data-footnote-marker]::marker {
|
||||
content: "{" counter(footnote-marker) "} ";
|
||||
.following-note_call {
|
||||
padding-left: 0.25ch;
|
||||
position: relative;
|
||||
top: -4px;
|
||||
}
|
||||
|
||||
.following-note_marker {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.chapter-header {
|
||||
position: relative;
|
||||
margin-top: calc(var(--baseline) * 2);
|
||||
margin-bottom: calc(var(--baseline) * 3);
|
||||
--color: black;
|
||||
}
|
||||
.chapter-header p {
|
||||
text-indent: 0px !important;
|
||||
}
|
||||
|
||||
.chapter-header h2 {
|
||||
string-set: title content(text);
|
||||
|
|
@ -423,17 +452,41 @@ body {
|
|||
string-set: type content(text);
|
||||
}
|
||||
|
||||
.chapter-header h2 {
|
||||
font-size: 46px;
|
||||
line-height: 1.1;
|
||||
font-family: var(--font);
|
||||
font-family: var(--mono);
|
||||
.chapter-header .h2-pattern {
|
||||
font-size: 58px;
|
||||
line-height: 0.8;
|
||||
color: var(--blue);
|
||||
margin-bottom: calc(var(--baseline) * 1);
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
color: var(--color);
|
||||
text-align: center;
|
||||
font-family: var(--font-decor);
|
||||
transform: scale(2);
|
||||
z-index: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.chapter-header h2 {
|
||||
font-family: "Routed Gothic Wide";
|
||||
margin-top: calc(var(--baseline) * 4);
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
font-size: 36px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.chapter-header h2 span {
|
||||
background-color: white;
|
||||
border: 1px solid red;
|
||||
box-shadow: 0px 1px 23px 8px rgb(255, 0, 0);
|
||||
border-radius: 10px;
|
||||
padding-inline: 0.5ch;
|
||||
box-decoration-break: clone;
|
||||
-webkit-box-decoration-break: clone; /* pour Safari */
|
||||
}
|
||||
.chapter-header h2 {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.chapter-header .type {
|
||||
|
|
@ -441,55 +494,10 @@ body {
|
|||
display: none;
|
||||
}
|
||||
|
||||
.chapter-header .bio {
|
||||
margin-top: calc(var(--baseline) * 3);
|
||||
font-family: var(--sans);
|
||||
hyphens: none;
|
||||
line-height: 1.3;
|
||||
font-size: 12px;
|
||||
}
|
||||
.chapter-header .bio .name {
|
||||
text-indent: 0;
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
color: var(--color);
|
||||
}
|
||||
.chapter-header .bio .description {
|
||||
text-indent: -14mm;
|
||||
padding-left: 14mm;
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
color: var(--color);
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
.chapter-header .author {
|
||||
left: 0px !important;
|
||||
font-size: 26px;
|
||||
line-height: 0.9;
|
||||
font-weight: normal;
|
||||
line-height: 1;
|
||||
font-family: var(--mono);
|
||||
font-family: "Routed Gothic Wide";
|
||||
margin-top: calc(var(--baseline) * 1);
|
||||
text-align: center;
|
||||
text-indent: 0;
|
||||
color: var(--color);
|
||||
margin-top: calc(var(--baseline) * 3);
|
||||
-webkit-text-decoration: underline 1px;
|
||||
text-decoration: underline 1px;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
|
||||
.item-decor {
|
||||
font-family: var(--sans);
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.pagedjs_left_page .item-decor {
|
||||
left: -12mm;
|
||||
}
|
||||
|
||||
.pagedjs_right_page .item-decor {
|
||||
right: -12mm;
|
||||
font-size: 28px;
|
||||
font-weight: normal;
|
||||
}/*# sourceMappingURL=style.css.map */
|
||||
Loading…
Add table
Add a link
Reference in a new issue