fix(typography): embed official Achemine fonts in src/fonts, calibrate font weights and sizes to strictly match SNCF display img 1
This commit is contained in:
1 parent
a084f699ac
commit
75d0a05f21
13 files changed
+66
-17
No files matched your search
+25
@@ -11,6 +11,31 @@
|
|||||||
|
|
||||||
/* Styles responsive pour les pages de guidage & sélection */
|
/* Styles responsive pour les pages de guidage & sélection */
|
||||||
@import "./styles/Launcher.css";
|
@import "./styles/Launcher.css";
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Achemine';
|
||||||
|
src: url('./fonts/achemine_regular.ttf') format('truetype');
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Achemine';
|
||||||
|
src: url('./fonts/achemine_bold.ttf') format('truetype');
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Achemine';
|
||||||
|
src: url('./fonts/achemine_italic.ttf') format('truetype');
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: italic;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: Avenir;
|
font-family: Avenir;
|
||||||
src: url("/public/fonts/avenir-lighter.woff");
|
src: url("/public/fonts/avenir-lighter.woff");
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
+25
-1
@@ -1,6 +1,30 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'Achemine';
|
||||||
|
src: url('./fonts/achemine_regular.ttf') format('truetype');
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Achemine';
|
||||||
|
src: url('./fonts/achemine_bold.ttf') format('truetype');
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Achemine';
|
||||||
|
src: url('./fonts/achemine_italic.ttf') format('truetype');
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: italic;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
font-family: 'Achemine', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||||
sans-serif;
|
sans-serif;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
|
|||||||
@@ -262,8 +262,8 @@
|
|||||||
|
|
||||||
/* Colonne 3 : Heure (Grande, jaune vif) */
|
/* Colonne 3 : Heure (Grande, jaune vif) */
|
||||||
.aff-classiques-arrivees__col-time {
|
.aff-classiques-arrivees__col-time {
|
||||||
width: 250px;
|
width: 260px;
|
||||||
min-width: 250px;
|
min-width: 260px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
@@ -276,7 +276,7 @@
|
|||||||
|
|
||||||
.aff-classiques-arrivees__time {
|
.aff-classiques-arrivees__time {
|
||||||
color: var(--yellow);
|
color: var(--yellow);
|
||||||
font-size: 68px;
|
font-size: 74px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
@@ -302,8 +302,8 @@
|
|||||||
|
|
||||||
.aff-classiques-arrivees__destination {
|
.aff-classiques-arrivees__destination {
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
font-size: 62px;
|
font-size: 68px;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -325,8 +325,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.aff-classiques-arrivees__platform-box {
|
.aff-classiques-arrivees__platform-box {
|
||||||
width: 88px;
|
width: 90px;
|
||||||
height: 84px;
|
height: 86px;
|
||||||
border: 3.5px solid var(--white);
|
border: 3.5px solid var(--white);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -338,7 +338,7 @@
|
|||||||
|
|
||||||
.aff-classiques-arrivees__platform-text {
|
.aff-classiques-arrivees__platform-text {
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
font-size: 60px;
|
font-size: 62px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
font-family: "Achemine", sans-serif;
|
font-family: "Achemine", sans-serif;
|
||||||
|
|||||||
@@ -262,8 +262,8 @@
|
|||||||
|
|
||||||
/* Colonne 3 : Heure (Grande, jaune vif) */
|
/* Colonne 3 : Heure (Grande, jaune vif) */
|
||||||
.aff-classiques-departs__col-time {
|
.aff-classiques-departs__col-time {
|
||||||
width: 250px;
|
width: 260px;
|
||||||
min-width: 250px;
|
min-width: 260px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
@@ -276,7 +276,7 @@
|
|||||||
|
|
||||||
.aff-classiques-departs__time {
|
.aff-classiques-departs__time {
|
||||||
color: var(--yellow);
|
color: var(--yellow);
|
||||||
font-size: 68px;
|
font-size: 74px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
letter-spacing: -0.5px;
|
letter-spacing: -0.5px;
|
||||||
@@ -302,8 +302,8 @@
|
|||||||
|
|
||||||
.aff-classiques-departs__destination {
|
.aff-classiques-departs__destination {
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
font-size: 62px;
|
font-size: 68px;
|
||||||
font-weight: 600;
|
font-weight: 700;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -325,8 +325,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.aff-classiques-departs__platform-box {
|
.aff-classiques-departs__platform-box {
|
||||||
width: 88px;
|
width: 90px;
|
||||||
height: 84px;
|
height: 86px;
|
||||||
border: 3.5px solid var(--white);
|
border: 3.5px solid var(--white);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -338,7 +338,7 @@
|
|||||||
|
|
||||||
.aff-classiques-departs__platform-text {
|
.aff-classiques-departs__platform-text {
|
||||||
color: var(--white);
|
color: var(--white);
|
||||||
font-size: 60px;
|
font-size: 62px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
font-family: "Achemine", sans-serif;
|
font-family: "Achemine", sans-serif;
|
||||||
|
|||||||
Reference in new issue
Block a user