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

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;
}