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

13
index.janet
View file

@ -44,6 +44,11 @@
(defn absolute-url [path] (defn absolute-url [path]
(string base-path path)) (string base-path path))
(defn files-in [base]
(fn []
(let [files (string/split "\n" (sh/$< find ,base -type f))]
{:each (filter |(not= "" $0) files)})))
(defn copy-and-rename [base renamer] (defn copy-and-rename [base renamer]
(fn [_data item] (path/join base (path/basename (renamer (item :path)))))) (fn [_data item] (path/join base (path/basename (renamer (item :path))))))
@ -52,7 +57,7 @@
(string/has-suffix? ".sass" (item :path)))) (string/has-suffix? ".sass" (item :path))))
(defn compile-sass [site {:path path}] (defn compile-sass [site {:path path}]
(sh/$< "sassc" ,(string path))) (sh/$< sassc ,path))
(def sass-dest (copy-and-rename "assets/" (def sass-dest (copy-and-rename "assets/"
(fn [path] (fn [path]
@ -69,6 +74,8 @@
:stylesheet (absolute-url "assets/style.css")}} :stylesheet (absolute-url "assets/style.css")}}
:assets {:src (bagatto/* "assets/*") :assets {:src (bagatto/* "assets/*")
:attrs bagatto/parse-base} :attrs bagatto/parse-base}
:font {:src (files-in "assets/ibm-plex")
:attrs bagatto/parse-base}
:posts {:src (bagatto/slurp-* "content/posts/*.md") :posts {:src (bagatto/slurp-* "content/posts/*.md")
:attrs parse-post}}) :attrs parse-post}})
@ -78,6 +85,10 @@
:dest sass-dest :dest sass-dest
:out compile-sass :out compile-sass
:filter sass?} :filter sass?}
:font {:each :font
:dest (fn [_data item]
(printf "%j" item)
(item :path))}
:posts {:each :posts :posts {:each :posts
:dest utils/slugify-content :dest utils/slugify-content
:out views/post}}) :out views/post}})