Julie/decor-6-expe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change font-family for sign → teletext

Browse source
This commit is contained in:
Julie Blanc 2026-03-16 21:43:39 +01:00
parent 9344129a9f
commit ce4d7285fe
7 changed files with 75 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

1
maquette-tests/assets/css/01_var.css
View file

@ -66,6 +66,7 @@
--gap: 8px; --gap: 8px;
--sign-family: 'Teletext';
--sign-size: 16px; --sign-size: 16px;
--sign-baseline: 18px; --sign-baseline: 18px;
--sign-spacing: 0.45rem; --sign-spacing: 0.45rem;

107
maquette-tests/assets/css/03_layout.css
View file

@ -8,7 +8,7 @@
marks: crop; marks: crop;
--symbol-top: 1px; --symbol-top: 1px;
--running-top: 8mm; --running-top: 8mm;
--running-bottom: 10mm; --running-bottom: 10mm;
} }
@page:left { @page:left {
@ -18,9 +18,10 @@
@top-left-corner { @top-left-corner {
content: var(--symbol) var(--symbol) var(--symbol); content: var(--symbol) var(--symbol) var(--symbol);
font-size: var(--sign-size); font-size: var(--sign-size);
color: var(--sign-color); color: var(--sign-color);
letter-spacing: var(--sign-spacing); letter-spacing: var(--sign-spacing);
line-height: var(--sign-baseline); font-family: var(--sign-family);
line-height: var(--sign-baseline);
vertical-align: top; vertical-align: top;
padding-top: var(--running-top); padding-top: var(--running-top);
text-align: left; text-align: left;
@ -36,11 +37,12 @@
width: calc(var(--unit)*2); width: calc(var(--unit)*2);
font-size: var(--font-size); font-size: var(--font-size);
color: var(--sign-color); color: var(--sign-color);
font-family: var(--sign-family);
} }
@top-center{ @top-center {
content: element(author); content: element(author);
vertical-align: top; vertical-align: top;
padding-top: calc(var(--running-top) - var(--symbol-top)); padding-top: calc(var(--running-top) - var(--symbol-top));
@ -48,17 +50,19 @@
white-space: nowrap; white-space: nowrap;
padding-right: 1.5ch; padding-right: 1.5ch;
padding-left: 0.5ch; padding-left: 0.5ch;
font-size: var(--font-size); font-size: var(--font-size);
color: var(--sign-color); color: var(--sign-color);
font-family: var(--sign-family);
} }
@top-right { @top-right {
content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ; content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
font-size: var(--sign-size); font-size: var(--sign-size);
color: var(--sign-color); color: var(--sign-color);
letter-spacing: var(--sign-spacing); letter-spacing: var(--sign-spacing);
font-family: var(--sign-family);
line-height: var(--sign-baseline); line-height: var(--sign-baseline);
vertical-align: top; vertical-align: top;
padding-top: var(--running-top); padding-top: var(--running-top);
@ -68,13 +72,13 @@
} }
@bottom-left { @bottom-left {
content: counter(page); content: counter(page);
vertical-align: top; vertical-align: top;
padding-top: var(--running-bottom); padding-top: var(--running-bottom);
white-space: nowrap; white-space: nowrap;
font-size: var(--font-size); font-size: var(--font-size);
color: var(--sign-color); color: var(--sign-color);
z-index: 100; z-index: 100;
} }
@ -86,15 +90,16 @@
} }
@page:right { @page:right {
margin-left: 26mm; margin-left: 26mm;
margin-right: 18mm; margin-right: 18mm;
@top-left-corner { @top-left-corner {
content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol); content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
font-size: var(--sign-size); font-size: var(--sign-size);
color: var(--sign-color); color: var(--sign-color);
letter-spacing: var(--sign-spacing); letter-spacing: var(--sign-spacing);
line-height: var(--sign-baseline); font-family: var(--sign-family);
line-height: var(--sign-baseline);
vertical-align: top; vertical-align: top;
padding-top: var(--running-top); padding-top: var(--running-top);
text-align: left; text-align: left;
@ -103,20 +108,22 @@
} }
@top-left { @top-left {
content: element(title); content: element(title);
vertical-align: top; vertical-align: top;
padding-top: var(--running-top); padding-top: var(--running-top);
white-space: nowrap; white-space: nowrap;
padding-right: 1.5ch; padding-right: 1.5ch;
font-size: var(--font-size); font-family: var(--sign-family);
color: var(--sign-color); font-size: var(--font-size);
color: var(--sign-color);
} }
@top-right { @top-right {
content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ; content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
font-size: var(--sign-size); font-size: var(--sign-size);
color: var(--sign-color); color: var(--sign-color);
letter-spacing: var(--sign-spacing); letter-spacing: var(--sign-spacing);
font-family: var(--sign-family);
line-height: var(--sign-baseline); line-height: var(--sign-baseline);
vertical-align: top; vertical-align: top;
padding-top: var(--running-top); padding-top: var(--running-top);
@ -125,15 +132,15 @@
} }
@bottom-right { @bottom-right {
content: counter(page); content: counter(page);
vertical-align: top; vertical-align: top;
padding-top: var(--running-bottom); padding-top: var(--running-bottom);
text-align: right; text-align: right;
white-space: nowrap; white-space: nowrap;
font-size: var(--font-size); font-size: var(--font-size);
color: var(--sign-color); color: var(--sign-color);
z-index: 100; z-index: 100;
} }
@ -149,13 +156,16 @@
@top-left { @top-left {
content: none; content: none;
} }
@top-left-corner { @top-left-corner {
content: none; content: none;
} }
@top-right {
@top-right {
content: none; content: none;
} }
@top-center {
@top-center {
content: none; content: none;
} }
@ -185,27 +195,28 @@
position: running(decor); position: running(decor);
} }
.pagedjs_area{ .pagedjs_area {
position: relative; position: relative;
} }
.pagedjs_margin-top-left .pagedjs_margin-content .nav-decor::after{ .pagedjs_margin-top-left .pagedjs_margin-content .nav-decor::after {
content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ; content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
font-size: var(--sign-size); font-size: var(--sign-size);
color: var(--sign-color); color: var(--sign-color);
letter-spacing: var(--sign-spacing); letter-spacing: var(--sign-spacing);
line-height: var(--sign-baseline); font-family: var(--sign-family);
padding-left: 1ch; line-height: var(--sign-baseline);
width: calc(var(--unit) + var(--sub-unit)); padding-left: 1ch;
position: relative; width: calc(var(--unit) + var(--sub-unit));
top: var(--symbol-top); position: relative;
top: var(--symbol-top);
} }
.pagedjs_left_page .pagedjs_margin-top{ .pagedjs_left_page .pagedjs_margin-top {
width: calc(100% + var(--pagedjs-margin-right)); width: calc(100% + var(--pagedjs-margin-right));
overflow: hidden; overflow: hidden;
} }
/* DELETE BEFORE PRINT */ /* DELETE BEFORE PRINT */
@ -223,7 +234,7 @@
.pagedjs_left_page .pagedjs_margin-bottom-left .pagedjs_margin-content::after{ .pagedjs_left_page .pagedjs_margin-bottom-left .pagedjs_margin-content::after {
background-color: white; background-color: white;
display: inline-block; display: inline-block;
padding-left: 10px; padding-left: 10px;
@ -234,7 +245,7 @@
.pagedjs_right_page .pagedjs_margin-bottom-right .pagedjs_margin-content::after{ .pagedjs_right_page .pagedjs_margin-bottom-right .pagedjs_margin-content::after {
background-color: white; background-color: white;
display: inline-block; display: inline-block;
padding-right: 10px; padding-right: 10px;

1
maquette-tests/assets/css/blockquote.css
View file

@ -35,6 +35,7 @@ blockquote p::before{
font-size: var(--sign-size); font-size: var(--sign-size);
color: var(--sign-color); color: var(--sign-color);
letter-spacing: var(--sign-spacing); letter-spacing: var(--sign-spacing);
font-family: var(--sign-family);
line-height: var(--sign-baseline); line-height: var(--sign-baseline);
word-break: break-all; word-break: break-all;
width: calc(var(--unit)*0.5 + 4px); width: calc(var(--unit)*0.5 + 4px);

1
maquette-tests/assets/css/running-page.css
View file

@ -3,6 +3,7 @@
font-size: var(--sign-size); font-size: var(--sign-size);
color: var(--sign-color); color: var(--sign-color);
letter-spacing: var(--sign-spacing); letter-spacing: var(--sign-spacing);
font-family: var(--sign-family);
line-height: var(--sign-baseline); line-height: var(--sign-baseline);
vertical-align: top; vertical-align: top;
padding-top: var(--running-bottom); padding-top: var(--running-bottom);

5
maquette-tests/assets/css/subtitles.css
View file

@ -2,6 +2,7 @@ h3, h4{
break-after: avoid; break-after: avoid;
} }
h3, h4{ h3, h4{
font-family: var(--sign-family);
font-weight: normal; font-weight: normal;
margin-top: calc(var(--baseline)*1.5); margin-top: calc(var(--baseline)*1.5);
margin-bottom: calc(var(--baseline)*1); margin-bottom: calc(var(--baseline)*1);
@ -29,9 +30,6 @@ h3, h4{
justify-content: flex-end; justify-content: flex-end;
} }
.subtitle-before{
padding-right: 0.75ch;
}
.subtitle-after{ .subtitle-after{
padding-left: 0.75ch; padding-left: 0.75ch;
@ -49,6 +47,7 @@ h3, h4{
font-size: var(--sign-size); font-size: var(--sign-size);
color: var(--sign-color); color: var(--sign-color);
letter-spacing: var(--sign-spacing); letter-spacing: var(--sign-spacing);
font-family: var(--sign-family);
line-height: var(--sign-baseline); line-height: var(--sign-baseline);
position: absolute; position: absolute;
} }

2
maquette-tests/assets/css/text.css
View file

@ -18,6 +18,7 @@ p::before {
font-size: var(--sign-size); font-size: var(--sign-size);
color: var(--sign-color); color: var(--sign-color);
letter-spacing: var(--sign-spacing); letter-spacing: var(--sign-spacing);
font-family: var(--sign-family);
line-height: var(--sign-baseline); line-height: var(--sign-baseline);
position: relative; position: relative;
top: -3px; top: -3px;
@ -62,5 +63,6 @@ p::before {
font-size: var(--sign-size); font-size: var(--sign-size);
color: var(--sign-color); color: var(--sign-color);
letter-spacing: var(--sign-spacing); letter-spacing: var(--sign-spacing);
font-family: var(--sign-family);
line-height: var(--sign-baseline); line-height: var(--sign-baseline);
} }

12
maquette-tests/assets/fonts/Teletext/stylesheet.css
View file

@ -2,20 +2,20 @@
@font-face { @font-face {
font-family: 'Teletext'; font-family: 'Teletext';
src: url('MODE7GX0.TTF') format('truetype'); src: url('MODE7GX0.TTF') format('truetype');
font-weight: 100; font-weight: normal;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }
@font-face { /* @font-face {
font-family: 'Teletext'; font-family: 'Teletext';
src: url('MODE7GX1.TTF') format('truetype'); src: url('MODE7GX1.TTF') format('truetype');
font-weight: 200; font-weight: normal;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} } */
@font-face { /* @font-face {
font-family: 'Teletext'; font-family: 'Teletext';
src: url('MODE7GX2.TTF') format('truetype'); src: url('MODE7GX2.TTF') format('truetype');
font-weight: 300; font-weight: 300;
@ -37,4 +37,4 @@
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} } */