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;

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

@ -20,6 +20,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-top); padding-top: var(--running-top);
@ -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));
@ -50,15 +52,17 @@
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);
@ -94,6 +98,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-top); padding-top: var(--running-top);
@ -108,15 +113,17 @@
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-family: var(--sign-family);
font-size: var(--font-size); font-size: var(--font-size);
color: var(--sign-color); 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);
@ -149,12 +156,15 @@
@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,16 +195,17 @@
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);
font-family: var(--sign-family);
line-height: var(--sign-baseline); line-height: var(--sign-baseline);
padding-left: 1ch; padding-left: 1ch;
width: calc(var(--unit) + var(--sub-unit)); width: calc(var(--unit) + var(--sub-unit));
@ -202,10 +213,10 @@
top: var(--symbol-top); 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;
} } */