sass → css

This commit is contained in:
Julie Blanc 2026-03-04 10:52:07 +01:00
parent 68a0dcb88b
commit 72a6378c73
19 changed files with 689 additions and 1057 deletions

View file

@ -2,19 +2,21 @@
--font: 'Routed Gothic', sans-serif;
--font: 'Wagram Slab', serif;
--font: 'Bilzig', serif;
// --font: 'HAL Timezone', serif;
--font: 'Bilzig', serif;
/* --font: 'HAL Timezone', serif; */
--mono: 'Selectric Mono', monospace;
--mono: 'Ivory Mono', monospace;
--mono: 'Baskemo Sans', monospace;
--mono: 'HAL Timezone Mono', monospace;
--mono: 'Routed Gothic Wide', sans-serif;
--font-decor: 'Decor Round Random';
// --mono: 'HAL Timezone Mono', monospace;
/* --mono: 'HAL Timezone Mono', monospace; */
--font-sans: 'Routed Gothic', serif;
// --font-sans: 'Routed Gothic Wide', serif;
// --note: 'Wagram Slab', serif;
/* --font-sans: 'Routed Gothic Wide', serif; */
/* --note: 'Wagram Slab', serif; */
--title: 'HNoailles Times Triplex', sans-serif;
--red: #9B0000;
@ -22,6 +24,8 @@
--green-light:#009b0025;
--blue: #00009B;
--grey: #e4e4e4;
--border-grey: 2px solid var(--grey);
--indent: 7mm;
@ -29,4 +33,10 @@
--font-size: 18px;
--baseline: 24px;
--fs-nav: 12px;
--unit: 20px;
--gap: 8px;
}

View file

@ -4,16 +4,14 @@
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased
-o-font-smoothing: antialiased;
}
a {
color: currentColor;
}
// .inline-note{
// color: red;
// }
body {

View file

@ -0,0 +1,175 @@
@media print {
@page {
size: 165mm 240mm;
margin-top: 16mm;
margin-bottom: 20mm;
bleed: 6mm;
marks: crop;
}
@page:left {
margin-left: 26mm;
margin-right: 18mm;
@top-left{
content: element(navDecor);
}
@bottom-center {
content: counter(page);
font-family: var(--mono);
font-size: 20px;
vertical-align: bottom;
padding-bottom: 8mm;
}
}
@page:right {
margin-left: 18mm;
margin-right: 26mm;
@top-left{
content: element(nav);
}
@bottom-center {
content: counter(page);
font-family: var(--mono);
font-size: 20px;
vertical-align: bottom;
padding-bottom: 8mm;
}
}
.chapter {
break-before: right;
page: chapter;
}
@page chapter:first {
@top-left {
content: none;
}
}
@page:blank {
@top-left {
content: none;
}
@bottom-center {
content: none;
}
}
}
.chapter-header h2 {
string-set: title content(text);
}
.chapter-header .author {
string-set: author content(text);
}
.chapter-header .type {
string-set: type content(text);
}
.running-nav{
position: running(nav);
width: 100%;
}
.running-nav-decor{
position: running(navDecor);
width: 100%;
}
.running-nav-decor ul,
.running-nav ul{
display: flex;
gap: var(--gap);
list-style: none;
}
.running-nav-decor li,
.running-nav li{
font-family: var(--mono);
font-size: var(--fs-nav);
border: var(--border-grey);
font-size: var(--fs-nav);
line-height: 1;
padding: 4px 1ch;
min-height: var(--unit);
font-weight: normal;
}
.running-nav-decor ul li.nav-title,
.running-nav ul li.nav-title{
flex-grow: 2;
}
.running-nav ul li.nav-author{
flex-shrink: 0;
}
.running-nav ul li.nav-title{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.running-nav ul li.nav-title{
flex: 1 1 auto;
min-width: 0;
}
.running-nav ul li.nav-author{
flex: 0 0 auto; /* taille fixe */
}
.running-nav-decor ul li.nav-chevron{
padding: 0;
width: var(--unit);
display: flex;
align-items: center;
justify-content: center;
}
/* .pagedjs_left_page .pagedjs_pagebox{
background: linear-gradient(180deg, transparent 82%, #00009B 100%)!important;
} */
/* .pagedjs_right_page .pagedjs_pagebox{
background: linear-gradient(180deg, transparent 82%, #00009B 100%)!important;
} */

View file

@ -1,95 +0,0 @@
@mixin running(){
font-family: var(--mono);
font-size: 12px;
// vertical-align: bottom;
// padding-bottom: 5mm;
}
@mixin numPage(){
font-family: var(--sans);
font-size: 20px;
vertical-align: bottom;
padding-bottom: 5mm;
width: 10mm;
}
@media print{
@page {
size: 165mm 240mm;
margin-top: 16mm;
margin-bottom: 20mm;
bleed: 6mm;
marks: crop;
}
@page:left{
margin-left: 26mm;
margin-right: 18mm;
@bottom-center{
content: counter(page);
@include numPage();
}
@top-left {
content: string(author);
@include running();
// text-align: left;
// padding-left: 3ch;
}
@top-center {
content: string(type);
@include running();
}
}
@page:right{
margin-left: 18mm;
margin-right: 26mm;
@bottom-center{
content: counter(page);
@include numPage();
text-align: right;
}
@top-left {
content: string(title);
@include running();
}
}
/*p{
background: salmon;
}*/
.chapter{
break-before: right;
page: chapter;
}
@page chapter:first{
@top-left{ content: none; }
}
}
// .pagedjs_left_page .pagedjs_pagebox{
// background: linear-gradient(180deg, transparent 82%, #00009B 100%)!important;
// }
// .pagedjs_right_page .pagedjs_pagebox{
// background: linear-gradient(180deg, transparent 82%, #00009B 100%)!important;
// }

View file

@ -1,135 +0,0 @@
#type-specimen{
background-color: #cfcfcf;
.type{
font-family: sans-serif;
grid-column: span 2;
font-weight: bold;
}
.specimen{
width: 1200px;
height: 680px;
border: 1px solid #999;
background-color: white;
margin: 30px;
padding: 30px;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
p:first-of-type{
text-align: justify;
hyphens: auto;
margin-bottom: 1em;
}
p{
font-size: 16px;
}
.title{
font-size: 32px;
line-height: 1.1;
max-width: 22ch;
margin-bottom: 30px;
}
.content{
line-height: 1.3;
}
.title-bold{
font-weight: bold;
}
.title-normal{
font-weight: normal;
}
.title-italic{
font-weight: normal;
font-style: italic;
}
.title-light{
font-weight: 300!important;
font-style: normal;
}
.title-uppercase{
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.01rem;
}
}
[data-type="ovo"]{
.title{
font-weight: normal;
line-height: 1.1;
}
}
[data-type="literata"]{
p{
// line-height: 1.2;
}
}
[data-type="selectric"],
[data-type="selectric-mono"],
[data-type="timezone"],
[data-type="timezone-mono"]{
.title-bold{
font-weight: normal!important;
}
}
[data-type="selectric-mono"] .content p{
letter-spacing: -0.01
rem;
white-space: 0.2ch;
}
[data-type="es-face"]{
.title-bold{
font-weight: normal!important;
font-style: italic;
}
}
[data-type="redaction"]{
.title-bold{
font-family: 'Redaction 50';
font-weight: normal!important;
font-style: italic;
}
}
[data-type="routed-gothic"],
[data-type="routed-gothic-narrow"],
[data-type="routed-gothic-wide"]{
.title-bold{
font-weight: normal!important;
}
}
[data-type="cheltenham-light"]{
.title, p{
font-weight: 200!important;
}
}

View file

@ -0,0 +1,156 @@
.chapter-nav ul{
display: flex;
font-family: var(--mono);
list-style: none;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-gap: var(--gap);
margin-bottom: var(--gap);
}
.chapter-nav ul li{
background-color: var(--grey);
font-size: var(--fs-nav);
line-height: 1;
padding: 4px 1ch;
}
.chapter-nav ul li.selected{
border: var(--border-grey);
background: none;
}
.chapter-header {
/* break-after: page; */
position: relative;
}
.chapter-header p {
text-indent: 0px !important;
}
.chapter-header .h2-pattern {
display: none;
/* 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 .type {
font-family: var(--mono);
font-size: var(--fs-nav);
background-color: var(--grey);
font-size: var(--fs-nav);
line-height: 1;
padding: 4px 1ch;
height: var(--unit);
margin-left: calc(var(--unit) + var(--gap));
}
.chapter-header .type::before{
content: ">";
display: block;
width: var(--unit);
height: var(--unit);
background-color: var(--grey);
position: absolute;
top: 0;
left: calc((var(--unit) + var(--gap))*-1);
display: flex;
align-items: center;
justify-content: center;
}
.chapter-header .hgroup{
margin-top: var(--gap);
border-left: var(--unit) solid var(--grey);
border-left: var(--unit) solid var(--grey);
padding-left: var(--gap);
display: flex;
flex-direction: column;
}
.chapter-header h2 {
font-family: 'Routed Gothic Wide';
line-height: 1.2;
font-size: 36px;
font-weight: normal;
text-align: center;
padding-top: calc(var(--baseline)*1);
padding-bottom: calc(var(--baseline)*1);
}
.chapter-header .author {
background-color: black;
color: white;
font-family: var(--mono);
font-size: var(--fs-nav);
text-align: center;
font-size: var(--fs-nav);
line-height: 1;
padding: 4px 1ch;
font-weight: normal;
height: var(--unit);
margin-bottom: 0;
/* display: inline-block;
margin-inline: auto;
margin-top: calc(var(--baseline)*1); */
}
.chapter-header .bio{
display: none;
}
.chapter-header{
margin-bottom: calc(var(--baseline)*1);
}
.chapter-header:after{
/* content: "";
display: block;
margin-top: var(--gap);
border-top: 2px dashed var(--grey);
margin-bottom: calc(var(--baseline)*1); */
}

View file

@ -1,4 +1,3 @@
.item-decor{
font-family: var(--sans);
font-weight: 400;

View file

@ -1,88 +0,0 @@
.chapter-header{
// break-after: page;
position:relative;
margin-top: calc(var(--baseline)*2);
margin-bottom: calc(var(--baseline)*3);
--color: black;
p{ text-indent: 0px!important; }
}
.chapter-header h2 {
string-set: title content(text);
}
.chapter-header .author {
string-set: author content(text);
}
.chapter-header .type {
string-set: type content(text);
}
.chapter-header .h2-pattern{
font-size: 58px;
line-height: 0.8;
// font-family: var(--font);
// font-family: var(--mono);
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;
span{
background-color: white;
border: 1px solid red;
box-shadow: 0px 1px 23px 8px rgba(255,0,0,1);
border-radius:10px;
padding-inline: 0.5ch;
box-decoration-break: clone;
-webkit-box-decoration-break: clone; /* pour Safari */
}
z-index: 10;
}
.chapter-header .type{
margin-bottom: calc(var(--baseline)*1);
display: none;
// text-align: center;
}
.chapter-header .type{
}
.chapter-header .author{
font-family: 'Routed Gothic Wide';
margin-top: calc(var(--baseline)*1);
text-align: center;
font-size: 28px;
font-weight: normal;
// margin-top: calc(var(--baseline)*2)
}

View file

@ -1,138 +0,0 @@
.chapter{
p{
text-align: justify;
hyphens: auto;
hyphenate-limit-chars: 8 3;
position: relative;
// color: var(--blue);
orphans: 2;
hyphens: 2;
// letter-spacing: 0.01rem;
// &::before{
// content: '';
// display: inline-block;
// width: 8px;
// height: 8px;
// background-color: var(--blue);
// border-radius: 50%;
// margin-right: 1ch;
// }
}
.container-following-note + p,
p + p{
text-indent: 30%;
}
h3, h4{
break-after: avoid;
}
h3{
margin-top: calc(var(--baseline)*1.5);
margin-bottom: calc(var(--baseline)*0.5);
text-align: center;
font-weight: normal;
// text-decoration: underline;
font-family: var(--font-sans);
// text-transform: lowercase;
color: var(--blue);
max-width: 18ch;
// margin-inline: auto;
letter-spacing: 0.05rem;
color: black;
// text-decoration: underline 1px;
// text-underline-offset: 2px;
// &::before{
// content: '';
// display: block;
// width: 8px;
// height: 8px;
// border: 1px solid var(--blue);
// border-radius: 50%;
// margin-right: 1ch;
// position: relative;
// left: -2ch;
// }
}
blockquote p{
// font-family: var(--mono);
}
blockquote{
font-family: 'Routed Gothic Wide';
font-size: 14px;
line-height: 17px;
// position: relative;
// left: 14mm;
// p{
// font-size: 16px;
// line-height: calc(var(--baseline)*1.25);
// font-weight: 300;
// }
padding-left: 15%;
margin-top: calc(var(--baseline)*1);
margin-bottom: calc(var(--baseline)*1);
}
& > :first-child{
// background-color: red;
margin-top: 0px;
}
}
// .inline-note{
// background-color: #e5e5f7;
// opacity: 0.8;
// background-image: linear-gradient(0deg, white 50%, var(--green-light) 50%);
// background-size: 16px 16px;
// .body_note{
// display: inline;
// padding-right: 1ch;
// background-color: white;
// -webkit-box-decoration-break: clone;
// box-decoration-break: clone;
// position: relative;
// top: -4px;
// }
// }
// p + p .inline-note::after{
// left: -19mm!important;
// }
// p + p + p .inline-note::after{
// left: -12mm!important;
// }
.pagedjs_area{
position: relative;
}

View file

@ -1,36 +1,34 @@
.following-note{
.following-note {
font-family: var(--font-sans);
font-size: 12px;
line-height: 14px;
font-weight: 500;
display: block;
// position: relative;
margin-top: calc(var(--baseline)*0.5);
margin-top: calc(var(--baseline)*0.5);
margin-bottom: calc(var(--baseline)*0.5);
}
.container-following-note{
.container-following-note {
margin-left: 30%;
// margin-top: calc(var(--baseline)*0.5);
// margin-bottom: calc(var(--baseline)*0.5);
}
.wrapper__note-call{
.wrapper__note-call {
break-inside: avoid;
}
.following-note_call,
.following-note_marker{
.following-note_call,
.following-note_marker {
&::before{
&::before {
content: "{"
}
&::after{
&::after {
content: "}"
}
@ -39,19 +37,14 @@
font-size: 12px;
}
.following-note_call{
.following-note_call {
padding-left: 0.25ch;
position: relative;
top: -4px;
}
.following-note_marker{
.following-note_marker {
position: absolute;
left: 0;
}
}

View file

@ -1,503 +0,0 @@
@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;
--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: 18px;
--baseline: 24px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
}
a {
color: currentColor;
}
body {
font-family: var(--font);
font-size: var(--font-size);
line-height: var(--baseline);
}
@media print {
@page {
size: 165mm 240mm;
margin-top: 16mm;
margin-bottom: 20mm;
bleed: 6mm;
marks: crop;
}
@page :left {
margin-left: 26mm;
margin-right: 18mm;
@bottom-center {
content: counter(page);
font-family: var(--sans);
font-size: 20px;
vertical-align: bottom;
padding-bottom: 5mm;
width: 10mm;
}
@top-left {
content: string(author);
font-family: var(--mono);
font-size: 12px;
}
@top-center {
content: string(type);
font-family: var(--mono);
font-size: 12px;
}
}
@page :right {
margin-left: 18mm;
margin-right: 26mm;
@bottom-center {
content: counter(page);
font-family: var(--sans);
font-size: 20px;
vertical-align: bottom;
padding-bottom: 5mm;
width: 10mm;
text-align: right;
}
@top-left {
content: string(title);
font-family: var(--mono);
font-size: 12px;
}
}
/*p{
background: salmon;
}*/
.chapter {
-moz-column-break-before: right;
break-before: right;
page: chapter;
}
@page chapter:first {
@top-left {
content: none;
}
}
}
[data-type=ovo] {
font-family: "Ovo", serif;
}
[data-type=literata] {
font-family: "Literata", serif;
}
[data-type=vollkorn] {
font-family: "Vollkorn", serif;
}
[data-type=timezone] {
font-family: "HAL Timezone", serif;
}
[data-type=timezone-mono] {
font-family: "HAL Timezone Mono", monospace;
}
[data-type=selectric] {
font-family: "Selectric", serif;
}
[data-type=selectric-mono] {
font-family: "Selectric Mono", monospace;
}
[data-type=es-face] {
font-family: "ESFace", serif;
}
[data-type=ivory] {
font-family: "Ivory", serif;
}
[data-type=ivory-mono] {
font-family: "Ivory Mono", serif;
}
[data-type=necto-mono] {
font-family: "NectoMono", monospace;
}
[data-type=old-round] {
font-family: "OldRound", serif;
}
[data-type=old-round-hover] {
font-family: "OldRound Hover", serif;
}
[data-type=satoshi] {
font-family: "Satoshi", sans-serif;
}
[data-type=redaction] {
font-family: "Redaction", monospace;
}
[data-type=h-noailles-futura-simplex] {
font-family: "HNoailles Futura Simplex", sans-serif;
}
[data-type=h-noailles-futura-duplex] {
font-family: "HNoailles Futura Duplex", sans-serif;
}
[data-type=h-noailles-futura-triplex] {
font-family: "HNoailles Futura Triplex", sans-serif;
}
[data-type=h-noailles-times-simplex] {
font-family: "HNoailles Times Simplex", serif;
}
[data-type=h-noailles-times-duplex] {
font-family: "HNoailles Times Duplex", serif;
}
[data-type=h-noailles-times-triplex] {
font-family: "HNoailles Times Triplex", serif;
}
[data-type=adelphe-floreal] {
font-family: "Adelphe Floreal", serif;
}
[data-type=Adelphe-fructidor] {
font-family: "Adelphe Fructidor", serif;
}
[data-type=wagram] {
font-family: "Wagram", serif;
}
[data-type=wagram-slab] {
font-family: "Wagram Slab", serif;
}
[data-type=wagram-mono-slab] {
font-family: "Wagram Mono Slab", monospace;
}
[data-type=routed-gothic-wide] {
font-family: "Routed Gothic Wide", sans-serif;
}
[data-type=routed-gothic] {
font-family: "Routed Gothic", sans-serif;
}
[data-type=routed-gothic-narrow] {
font-family: "Routed Gothic Narrow", sans-serif;
}
[data-type=cheltenham] {
font-family: "ITC Cheltenham", serif;
}
[data-type=cheltenham-light] {
font-family: "ITC Cheltenham", serif;
font-weight: 200;
}
[data-type=baskemo-sans] {
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;
}
#type-specimen .type {
font-family: sans-serif;
grid-column: span 2;
font-weight: bold;
}
#type-specimen .specimen {
width: 1200px;
height: 680px;
border: 1px solid #999;
background-color: white;
margin: 30px;
padding: 30px;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
#type-specimen p:first-of-type {
text-align: justify;
hyphens: auto;
margin-bottom: 1em;
}
#type-specimen p {
font-size: 16px;
}
#type-specimen .title {
font-size: 32px;
line-height: 1.1;
max-width: 22ch;
margin-bottom: 30px;
}
#type-specimen .content {
line-height: 1.3;
}
#type-specimen .title-bold {
font-weight: bold;
}
#type-specimen .title-normal {
font-weight: normal;
}
#type-specimen .title-italic {
font-weight: normal;
font-style: italic;
}
#type-specimen .title-light {
font-weight: 300 !important;
font-style: normal;
}
#type-specimen .title-uppercase {
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.01rem;
}
[data-type=ovo] .title {
font-weight: normal;
line-height: 1.1;
}
[data-type=selectric] .title-bold,
[data-type=selectric-mono] .title-bold,
[data-type=timezone] .title-bold,
[data-type=timezone-mono] .title-bold {
font-weight: normal !important;
}
[data-type=selectric-mono] .content p {
letter-spacing: -0.01 rem;
white-space: 0.2ch;
}
[data-type=es-face] .title-bold {
font-weight: normal !important;
font-style: italic;
}
[data-type=redaction] .title-bold {
font-family: "Redaction 50";
font-weight: normal !important;
font-style: italic;
}
[data-type=routed-gothic] .title-bold,
[data-type=routed-gothic-narrow] .title-bold,
[data-type=routed-gothic-wide] .title-bold {
font-weight: normal !important;
}
[data-type=cheltenham-light] .title, [data-type=cheltenham-light] p {
font-weight: 200 !important;
}
.chapter p {
text-align: justify;
hyphens: auto;
hyphenate-limit-chars: 8 3;
position: relative;
orphans: 2;
hyphens: 2;
}
.chapter .container-following-note + p,
.chapter p + p {
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(--font-sans);
color: var(--blue);
max-width: 18ch;
letter-spacing: 0.05rem;
color: black;
}
.chapter blockquote {
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);
}
.chapter > :first-child {
margin-top: 0px;
}
.pagedjs_area {
position: relative;
}
.following-note {
font-family: var(--font-sans);
font-size: 12px;
line-height: 14px;
font-weight: 500;
display: block;
margin-top: calc(var(--baseline) * 0.5);
margin-bottom: calc(var(--baseline) * 0.5);
}
.container-following-note {
margin-left: 30%;
}
.wrapper__note-call {
-moz-column-break-inside: avoid;
break-inside: avoid;
}
.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;
}
.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);
}
.chapter-header .author {
string-set: author content(text);
}
.chapter-header .type {
string-set: type content(text);
}
.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 {
margin-bottom: calc(var(--baseline) * 1);
display: none;
}
.chapter-header .author {
font-family: "Routed Gothic Wide";
margin-top: calc(var(--baseline) * 1);
text-align: center;
font-size: 28px;
font-weight: normal;
}/*# sourceMappingURL=style.css.map */

View file

@ -1 +0,0 @@
{"version":3,"sources":["style.css","base/_type.scss","base/_var.scss","base/_body.scss","base/_layout.scss","base/_type-specimen.scss","modules/_text.scss","modules/_notes.scss","modules/_chapter-header.scss"],"names":[],"mappings":"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","file":"style.css"}

View file

@ -1,12 +0,0 @@
@use "base/var";
@use "base/body";
@use "base/layout";
@use "base/type";
@use "base/type-specimen";
@use "modules/text";
@use "modules/notes";
// @use "modules/footnotes";
@use "modules/chapter-header";
// @use "modules/item-decor";

View file

@ -0,0 +1,99 @@
.chapter p{
text-align: justify;
hyphens: auto;
hyphenate-limit-chars: 8 3;
position: relative;
orphans: 2;
hyphens: 2;
}
.container-following-note + p,
p + p{
text-indent: 30%;
position: relative;
}
p::before{
/* content: ">";
position: absolute;
left: 0;
font-family: var(--mono);
font-weight: normal;
font-size: var(--fs-nav); */
/* display: block;
width: var(--unit);
height: var(--unit);
background-color: var(--grey);
top: 2px;
display: flex;
align-items: center; */
/* justify-content: center; */
}
h3, h4{
break-after: avoid;
}
h3, h4{
font-family: var(--mono);
font-size: var(--fs-nav);
background-color: var(--grey);
font-size: var(--fs-nav);
line-height: 1;
padding: 4px 1ch;
min-height: var(--unit);
margin-top: calc(var(--baseline)*1.5);
margin-bottom: calc(var(--baseline)*0.5);
font-weight: normal;
}
h4{
border: var(--border-grey);
background: none;
}
blockquote p{
/* font-family: var(--mono); */
}
blockquote{
padding-left: 3ch;
/* font-style: italic; */
margin-top: calc(var(--baseline)*0..5);
margin-bottom: calc(var(--baseline)*0.5);
}
blockquote::before{
content: "> > > > > > > > > >";
display: block;
width: 1ch;
position: absolute;
left: 0;
font-family: var(--mono);
font-size: var(--fs-nav);
font-style: normal;
}
.chapter > :first-child{
margin-top: 0px;
}
.pagedjs_area{
position: relative;
}

View file

@ -2,6 +2,23 @@
@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');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
}
a {
color: currentColor;
}
[data-type="ovo"]{
font-family: "Ovo", serif;
@ -147,4 +164,118 @@
}
[data-type="Bilzig"]{
font-family: 'Bilzig';
}
}
#type-specimen{
background-color: #cfcfcf;
}
.type{
font-family: sans-serif;
grid-column: span 2;
font-weight: bold;
}
.specimen{
width: 1200px;
height: 680px;
border: 1px solid #999;
background-color: white;
margin: 30px;
padding: 30px;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
}
p:first-of-type{
text-align: justify;
hyphens: auto;
margin-bottom: 1em;
}
p{
font-size: 16px;
}
.title{
font-size: 32px;
line-height: 1.1;
max-width: 22ch;
margin-bottom: 30px;
}
.content{
line-height: 1.3;
}
.title-bold{
font-weight: bold;
}
.title-normal{
font-weight: normal;
}
.title-italic{
font-weight: normal;
font-style: italic;
}
.title-light{
font-weight: 300!important;
font-style: normal;
}
.title-uppercase{
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.01rem;
}
[data-type="ovo"] .title {
font-weight: normal;
line-height: 1.1;
}
[data-type="selectric"] .title-bold,
[data-type="selectric-mono"] .title-bold,
[data-type="timezone"] .title-bold,
[data-type="timezone-mono"] .title-bold {
font-weight: normal!important;
}
[data-type="selectric-mono"] .content p {
letter-spacing: -0.01rem;
white-space: 0.2ch;
}
[data-type="es-face"] .title-bold {
font-weight: normal!important;
font-style: italic;
}
[data-type="redaction"] .title-bold {
font-family: 'Redaction 50';
font-weight: normal!important;
font-style: italic;
}
[data-type="routed-gothic"] .title-bold,
[data-type="routed-gothic-narrow"] .title-bold,
[data-type="routed-gothic-wide"] .title-bold {
font-weight: normal!important;
}
[data-type="cheltenham-light"] .title,
[data-type="cheltenham-light"] p {
font-weight: 200!important;
}

View file

@ -23,7 +23,13 @@
},
"css": [
"assets/css/style.css"
"assets/css/01_var.css",
"assets/css/02_body.css",
"assets/css/03_layout.css",
"assets/css/chapter-header.css",
"assets/css/item-decor.css",
"assets/css/notes.css",
"assets/css/text.css"
],
"hook": [

View file

@ -5,11 +5,11 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="data:image/x-icon;" type="image/x-icon">
<title>CSS Page Weaver Example</title>
<title>D6cor</title>
<script src="/csspageweaver/main.js" type="module"></script>
<link rel="stylesheet" type="text/css" href="/assets/fonts/Timezone-HAL/stylesheet.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/Timezone-HAL/stylesheet.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/Selectric/stylesheet.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/ESface/stylesheet.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/ESface/stylesheet.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/Ivory/stylesheet.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/IvoryMono/stylesheet.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/NectoMono/stylesheet.css">
@ -38,19 +38,47 @@
</section>
<div class="running-nav-decor">
<ul>
<li class="nav-chevron">></li>
<li class="nav-title">D6cor</li>
</ul>
</div>
<section class="chapter" id="olivain-porry">
<div class="chapter-nav">
<ul>
<li>D6cor</li>
<li class="selected">Essais</li>
<li>Portfolio</li>
<li>Entretiens</li>
</ul>
</div>
<div class="running-nav">
<ul>
<li class="nav-author">Olivain Porry</li>
<li class="nav-title">Un robot-poète ne&nbsp;nous fait toujours pas peu</li>
</ul>
</div>
<div class="chapter-header">
<p class="h2-pattern">olivainporry</p>
<h2><span>Un robot-poète ne&nbsp;nous fait toujours pas peur</span></h2>
<p class="type">Essai</p>
<p class="author">Olivain Porry</p>
<!-- <div class="bio">
<p class="type">Essai</p>
<div class="hgroup">
<h2><span>Un robot-poète ne&nbsp;nous fait toujours pas peur</span></h2>
<p class="author">Olivain Porry</p>
</div>
<div class="bio">
<p class="name">Olivain Porry</p>
<p class="description">est artiste, docteur en recherche-création (SACRe) du laboratoire EnsadLab
(université PSL) et diplômé d'un DNSEP de l'École des Beaux-Arts de Nantes. Son travail plastique se
concentre sur l'émergence, dans une expérience esthétique, de modalités relationnelles entre public,
dispositif artistique et environnement. </p>
</div> -->
</div>
</div>
<p>Entouré dun cadre noir et brillant, posé sur une surface blanche et
@ -268,6 +296,7 @@
stratégie dattaque au nom évocateur : la poésie antagoniste<a href="#fn18" class="footnote-ref"
id="fnref18" role="doc-noteref"><sup>18</sup></a>.</p>
<h3>Pour une poésie antagoniste</h3>
<p>Dans un article publié en 2023, des chercheurs ont démontré quils
étaient parvenus à faire apparaître des données dentraînement brutes
utilisées par OpenAI en instruisant ChatGPT de répéter un même mot à
@ -525,16 +554,32 @@
<section class="chapter" id="outdoor-computer-club">
<div class="running-nav">
<ul>
<li class="nav-author">Outdoor computer club</li>
<li class="nav-title">E laria diventa più respirabile per&nbsp;tutti</li>
</ul>
</div>
<div class="chapter-nav">
<ul>
<li>D6cor</li>
<li class="selected">Essais</li>
<li>Portfolio</li>
<li>Entretiens</li>
</ul>
</div>
<div class="chapter-header">
<p class="h2-pattern">Outdoor computer club</p>
<h2><span>E laria diventa più respirabile per&nbsp;tutti: une&nbsp;télévision pirate pour le&nbsp;quartier</span></h2>
<p class="type">Essai</p>
<p class="author">Outdoor computer club</p>
<!-- <p class="bio">Le Outdoor Computer Club est un collectif qui explore des manières de démystifier et de se
<div class="hgroup">
<h2><span>E laria diventa più respirabile per&nbsp;tutti: une&nbsp;télévision pirate pour le&nbsp;quartier</span></h2>
<p class="author">Outdoor computer club</p>
</div>
<p class="bio">Le Outdoor Computer Club est un collectif qui explore des manières de démystifier et de se
réapproprier collectivement les technologies de réseau et de l'information. Le OCC crée des espaces de
bricolage et de réflexion collectifs ainsi que des interventions dans lespace public.</p> -->
bricolage et de réflexion collectifs ainsi que des interventions dans lespace public.</p>
</div>
<p>Le 4 mars 2022, dos arc-bouté dans nos doudounes et narines pleines
@ -676,7 +721,6 @@
favorise les échanges de savoirs, les rencontres intergénérationnelles
et la circulation des luttes entre différents secteurs sociaux.</p>
<hr>
<p>Pour le gouvernement Chávez, soutenir les télévisions communales
permet de sappuyer sur des acteurs disposant dune légitimité populaire
forte, souvent supérieure à celle de la télévision dÉtat. Plutôt que
@ -708,7 +752,6 @@
<p>C'est en riposte à ce monopole qu'un groupe d'activistes décide en
2002 de créer un réseau national de télévision pirate. </p>
<hr>
<p>A cette époque, la télévision numérique n'est pas encore démocratisée
et la télévision satellite peu accessible, la plupart des foyers
italiens reçoivent l'image sur leur poste via des ondes émises par des
@ -716,7 +759,6 @@
des collines fassent obstacle à la diffusion du signal d'une chaîne de
télévision et créent des zones grises où cette chaîne n'est pas
recevable. On appelle ça un cône d'ombre.</p>
<hr>
<p>C'est le cas à Bologne, au croisement de la via Rialto et de la via
Orfeo, où l'équipe de<em> OrfeoTV</em> installe son studio de télévision
au milieu d'un espace électromagnétique vacant : un cône d'ombre de la
@ -936,34 +978,8 @@
<p>« What is Mini FM? » Consulté le 12 janvier 2026. <a
href="http://anarchy.k2.tku.ac.jp/radio/micro/what_is_minifm/index.html">http://anarchy.k2.tku.ac.jp/radio/micro/what_is_minifm/index.html</a>.
</p>
<h2 id="images">Images : </h2>
<p><br />
Les images sont dans le dossier parent de ce document<br />
Il sagit dimages issues de notre expérience de construction dune
télévision pirate, elle nont pas de place particulière dans le récit
donc <strong>peuvent être disposées nimporte ou<br />
<br />
</strong>les legendes de ces images : </p>
<p>Image de lantenne : Antenne et émetteur sur un pylône en bois,
installé au dernier étage du bâtiment Voix Machine, à Fontenay S/ Bois.
2025</p>
<p>Image du spectateur : Réception de la première emission de OTVC. </p>
<p>Les deux autres images ne sont pas essentielles, elle peuvent être
ajoutées selon les besoins du ou de la graphiste.<br />
<br />
Zoom de lantenne : Antenne « Loop », construite pour emettre sur la
fréquance 471.25 Mhz, la chaine 21.
</p>
<p>Zoom de lemetteur : Emetteur constitué dun modulateur et dun
amplificateur achetés sur leboncoin.fr. Cables rca et coaxiaux. </p>
<h3 id="bio">Bio :</h3>
<p>Le Outdoor Computer Club est un collectif qui explore des manières de
démystifier et de se réapproprier collectivement les technologies de
réseau et de l'information. Le OCC crée des espaces de bricolage et de
réflexion collectifs ainsi que des interventions dans lespace
public.</p>
<section id="footnotes" class="footnotes footnotes-end-of-document" role="doc-endnotes">
<hr />
<ol>
<li id="fn1">
<p>Emanuelli, Massimo. « Orfeo Tv ». 2019</p>
@ -999,14 +1015,35 @@
<section class="chapter" id="jean-noel-lafague">
<div class="chapter-header">
<h2>Code créatif</h2>
<p class="author">Jean-Noël Lafargue</p>
<p class="bio">Le Outdoor Computer Club est un collectif qui explore des manières de démystifier et de se
réapproprier collectivement les technologies de réseau et de l'information. Le OCC crée des espaces de
bricolage et de réflexion collectifs ainsi que des interventions dans lespace public.</p>
<div class="running-nav">
<ul>
<li class="nav-author">Jean-Noël Lafargue</li>
<li class="nav-title">Code créatif</li>
</ul>
</div>
<div class="chapter-nav">
<ul>
<li>D6cor</li>
<li class="selected">Essais</li>
<li>Portfolio</li>
<li>Entretiens</li>
</ul>
</div>
<div class="chapter-header">
<p class="type">Essai</p>
<div class="hgroup">
<h2><span>Code créatif</span></h2>
<p class="author">Jean-Noël Lafargue</p>
</div>
</div>
<p>On peut distinguer deux types denseignements des pratiques
numériques dans le cadre des départements dart ou de design en école
dart ou à luniversité.</p>

View file

@ -4,11 +4,11 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="stylesheet" type="text/css" href="assets/type-specimen.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/Timezone-HAL/stylesheet.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/Selectric/stylesheet.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/ESface/stylesheet.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/ESface/stylesheet.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/Ivory/stylesheet.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/IvoryMono/stylesheet.css">
<link rel="stylesheet" type="text/css" href="/assets/fonts/NectoMono/stylesheet.css">