From a48f9c282dda78b318e3cabbf7ad5cfc71f520fd Mon Sep 17 00:00:00 2001 From: heyarne Date: Fri, 30 Jul 2021 01:52:10 +0200 Subject: [PATCH] Fix font loading (with flash of unstyled content) --- assets/ibm-plex/css/ibm-plex.css | 61 ++++++++++++++++++++++++++++++++ assets/style.scss | 27 +++++++------- index.janet | 13 ++++++- 3 files changed, 88 insertions(+), 13 deletions(-) create mode 100644 assets/ibm-plex/css/ibm-plex.css diff --git a/assets/ibm-plex/css/ibm-plex.css b/assets/ibm-plex/css/ibm-plex.css new file mode 100644 index 0000000..d723d12 --- /dev/null +++ b/assets/ibm-plex/css/ibm-plex.css @@ -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"); } + diff --git a/assets/style.scss b/assets/style.scss index 28df44f..03ef8b0 100644 --- a/assets/style.scss +++ b/assets/style.scss @@ -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; } diff --git a/index.janet b/index.janet index 1577389..cc03817 100644 --- a/index.janet +++ b/index.janet @@ -44,6 +44,11 @@ (defn absolute-url [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] (fn [_data item] (path/join base (path/basename (renamer (item :path)))))) @@ -52,7 +57,7 @@ (string/has-suffix? ".sass" (item :path)))) (defn compile-sass [site {:path path}] - (sh/$< "sassc" ,(string path))) + (sh/$< sassc ,path)) (def sass-dest (copy-and-rename "assets/" (fn [path] @@ -69,6 +74,8 @@ :stylesheet (absolute-url "assets/style.css")}} :assets {:src (bagatto/* "assets/*") :attrs bagatto/parse-base} + :font {:src (files-in "assets/ibm-plex") + :attrs bagatto/parse-base} :posts {:src (bagatto/slurp-* "content/posts/*.md") :attrs parse-post}}) @@ -78,6 +85,10 @@ :dest sass-dest :out compile-sass :filter sass?} + :font {:each :font + :dest (fn [_data item] + (printf "%j" item) + (item :path))} :posts {:each :posts :dest utils/slugify-content :out views/post}})