near/arnes.space-bagatto
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Fix font loading (with flash of unstyled content)

Browse source
This commit is contained in:
heyarne 2021-07-30 01:52:10 +02:00
commit a48f9c282d
3 changed files with 88 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

61
assets/ibm-plex/css/ibm-plex.css Normal file
View file

@ -0,0 +1,61 @@
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 700;
src: local("IBM Plex Mono Bold"), local("IBMPlexMono-Bold"), url("../IBM-Plex-Mono/fonts/complete/woff2/IBMPlexMono-Bold.woff2") format("woff2"), url("../IBM-Plex-Mono/fonts/complete/woff/IBMPlexMono-Bold.woff") format("woff"); }
@font-face {
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 700;
src: local("IBM Plex Mono Bold Italic"), local("IBMPlexMono-BoldItalic"), url("../IBM-Plex-Mono/fonts/complete/woff2/IBMPlexMono-BoldItalic.woff2") format("woff2"), url("../IBM-Plex-Mono/fonts/complete/woff/IBMPlexMono-BoldItalic.woff") format("woff"); }
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 200;
src: local("IBM Plex Mono ExtraLight"), local("IBMPlexMono-ExtraLight"), url("../IBM-Plex-Mono/fonts/complete/woff2/IBMPlexMono-ExtraLight.woff2") format("woff2"), url("../IBM-Plex-Mono/fonts/complete/woff/IBMPlexMono-ExtraLight.woff") format("woff"); }
@font-face {
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 200;
src: local("IBM Plex Mono ExtraLight Italic"), local("IBMPlexMono-ExtraLightItalic"), url("../IBM-Plex-Mono/fonts/complete/woff2/IBMPlexMono-ExtraLightItalic.woff2") format("woff2"), url("../IBM-Plex-Mono/fonts/complete/woff/IBMPlexMono-ExtraLightItalic.woff") format("woff"); }
@font-face {
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 400;
src: local("IBM Plex Mono Italic"), local("IBMPlexMono-Italic"), url("../IBM-Plex-Mono/fonts/complete/woff2/IBMPlexMono-Italic.woff2") format("woff2"), url("../IBM-Plex-Mono/fonts/complete/woff/IBMPlexMono-Italic.woff") format("woff"); }
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 300;
src: local("IBM Plex Mono Light"), local("IBMPlexMono-Light"), url("../IBM-Plex-Mono/fonts/complete/woff2/IBMPlexMono-Light.woff2") format("woff2"), url("../IBM-Plex-Mono/fonts/complete/woff/IBMPlexMono-Light.woff") format("woff"); }
@font-face {
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 300;
src: local("IBM Plex Mono Light Italic"), local("IBMPlexMono-LightItalic"), url("../IBM-Plex-Mono/fonts/complete/woff2/IBMPlexMono-LightItalic.woff2") format("woff2"), url("../IBM-Plex-Mono/fonts/complete/woff/IBMPlexMono-LightItalic.woff") format("woff"); }
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 500;
src: local("IBM Plex Mono Medium"), local("IBMPlexMono-Medium"), url("../IBM-Plex-Mono/fonts/complete/woff2/IBMPlexMono-Medium.woff2") format("woff2"), url("../IBM-Plex-Mono/fonts/complete/woff/IBMPlexMono-Medium.woff") format("woff"); }
@font-face {
font-family: 'IBM Plex Mono';
font-style: italic;
font-weight: 500;
src: local("IBM Plex Mono Medium Italic"), local("IBMPlexMono-MediumItalic"), url("../IBM-Plex-Mono/fonts/complete/woff2/IBMPlexMono-MediumItalic.woff2") format("woff2"), url("../IBM-Plex-Mono/fonts/complete/woff/IBMPlexMono-MediumItalic.woff") format("woff"); }
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 400;
src: local("IBM Plex Mono"), local("IBMPlexMono"), url("../IBM-Plex-Mono/fonts/complete/woff2/IBMPlexMono-Regular.woff2") format("woff2"), url("../IBM-Plex-Mono/fonts/complete/woff/IBMPlexMono-Regular.woff") format("woff"); }
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 600;
src: local("IBM Plex Mono SemiBold"), local("IBMPlexMono-SemiBold"), url("../IBM-Plex-Mono/fonts/complete/woff2/IBMPlexMono-SemiBold.woff2") format("woff2"), url("../IBM-Plex-Mono/fonts/complete/woff/IBMPlexMono-SemiBold.woff") format("woff"); }
@font-face {
font-family: 'IBM Plex Mono';
font-style: normal;
font-weight: 450;
src: local("IBM Plex Mono Text"), local("IBMPlexMono-Text"), url("../IBM-Plex-Mono/fonts/complete/woff2/IBMPlexMono-Text.woff2") format("woff2"), url("../IBM-Plex-Mono/fonts/complete/woff/IBMPlexMono-Text.woff") format("woff"); }

27
assets/style.scss
View file

@ -1,4 +1,4 @@
@import 'ibm-plex/css/ibm-plex';
@import 'ibm-plex/css/ibm-plex.css';
*, *:before, *:after {
box-sizing: border-box;
@ -20,34 +20,37 @@ h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
// the base size of the header svg is 500 * 500, strokes will need to be
// adjusted for exact pixel sizes
$logo-size: 216;
$factor: 1 / ($logo-size / 500);
.ten-print {
/*
* the base size of the header svg is 500 * 500, strokes
* will need to be divided by 196 / 500 = 0.352
*/
width: 196px;
height: 196px;
width: $logo-size;
height: $logo-size;
}
.ten-print path {
stroke: #ff005f;
fill: transparent;
stroke-width: 3.83px; /* = 1.5px */
stroke-width: 1.5px * $factor;
stroke-linecap: round;
}
main {
display: grid;
max-width: 960px;
margin: 48px auto;
margin: 48px auto 48px 48px;
grid-gap: 32px;
grid-auto-rows: 1fr;
grid-template-columns: repeat(30, 1fr);
grid-template-columns: repeat(16, 1fr);
grid-auto-flow: dense;
}
aside {
grid-column: span 10;
grid-column: span 4;
}
nav ul {
@ -57,5 +60,5 @@ nav ul {
}
article {
grid-column: span 20;
grid-column: span 12;
}