change font

phineas-pta · Sep 11, 2023 · 2384321 · 2384321
1 parent eec94a0
commit 2384321
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -36,6 +36,7 @@ src/
 │  ├─ book-1/
 │  │  ├─ chapter-1.html
 │  │  ├─ chapter-2.html
+│ ...
 │  ├─ book-2/
 │  │  ├─ chapter-1.html
 │  │  ├─ chapter-2.html
@@ -55,12 +56,10 @@ using 11ty:
 docker ?? no option to change host
 
 additional setup:
-
- - Favicon: https://www.iconarchive.com/download/i75808/martz90/circle/books.ico
- - AR PL (Arphic Public Licensed) UKaiHK font: https://github.com/SilentByte/fonts-arphic-ukai/blob/master/fonts-arphic-ukai/ukai.ttc, under the [Arphic public license](assets/fonts/ARPHICPL.txt)
- - Grenze Gotisch font: https://github.com/Omnibus-Type/Grenze-Gotisch/blob/master/fonts/ttf/GrenzeGotisch-ExtraBold.ttf, under the [SIL OFL v1.1](assets/fonts/OFL.txt)
-
-convert `.ttf` → `.woff2` using https://github.com/google/woff2
+- Favicon: https://www.iconarchive.com/download/i75808/martz90/circle/books.ico
+- AR PL (Arphic Public Licensed) UKaiHK font: https://github.com/SilentByte/fonts-arphic-ukai/blob/master/fonts-arphic-ukai/ukai.ttc, under the [Arphic public license](assets/fonts/ARPHICPL.txt)
+- Grenze Gotisch font: https://github.com/Omnibus-Type/Grenze-Gotisch, under the [SIL OFL v1.1](assets/fonts/OFL.txt)
+- Font Awesome v6 solid: https://github.com/FortAwesome/Font-Awesome/tree/6.4.2/webfonts, under the [SIL OFL v1.1](assets/fonts/OFL.txt)
 
 UKaiHK font: originally `.ttc` → use FontForge to extract `.ttf` № 2 (HK)
 

diff --git a/_includes/lay-chap.njk b/_includes/lay-chap.njk
@@ -21,14 +21,14 @@
 	{% set prev_next = eleventyNavigation.key | findNextPrev(navPages) %}
 	<nav class="pagination is-large" role="navigation" aria-label="pagination">
 		{% if prev_next.prev_url -%}
-			<a class="MUC-LUC pagination-previous button is-link" href="{{ prev_next.prev_url | url }}">&#9198;</a><!-- ⏮ without modifier -->
+			<a class="MUC-LUC FA-ICON pagination-previous button is-link" href="{{ prev_next.prev_url | url }}">&#9198;</a><!-- ⏮ without modifier -->
 		{%- else -%}
-			<a class="pagination-previous is-disabled">&#128683;</a><!-- 🚫 -->
+			<a class="FA-ICON pagination-previous is-disabled">&#128683;</a><!-- 🚫 -->
 		{%- endif %}
 		{% if prev_next.next_url -%}
-			<a class="MUC-LUC pagination-next button is-link" href="{{ prev_next.next_url | url }}">&#9197;</a><!-- ⏭ without modifier -->
+			<a class="MUC-LUC FA-ICON pagination-next button is-link" href="{{ prev_next.next_url | url }}">&#9197;</a><!-- ⏭ without modifier -->
 		{%- else -%}
-			<a class="pagination-next is-disabled">&#128683;</a><!-- 🚫 -->
+			<a class="FA-ICON pagination-next is-disabled">&#128683;</a><!-- 🚫 -->
 		{%- endif %}
 	</nav>
 

diff --git a/_includes/navbar.njk b/_includes/navbar.njk
@@ -3,10 +3,10 @@
 	<div class="navbar-brand" style="flex-grow: 1; justify-content: center;">
 	{# center navbar ref: https://github.com/jgthms/bulma/issues/1604#issuecomment-422407761 #}
 		<div class="navbar-item">
-			<a id="home-button" rel="prev" role="button" class="button is-link" href="{{ '/' | url }}">&#127968;</a><!-- 🏠 -->
+			<a id="home-button" rel="prev" role="button" class="FA-ICON button is-link" href="{{ '/' | url }}">&#127968;</a><!-- 🏠 -->
 		</div>
 		<div class="navbar-item">
-			<label class="checkbox button is-link" title="dark mode toggle"><input type="checkbox" id="themeSwitch" />&#8987;</label><!-- ⌛ -->
+			<label class="FA-ICON checkbox button is-link" title="dark mode toggle"><input type="checkbox" id="themeSwitch" />&#8987;</label><!-- ⌛ -->
 		</div>
 		{# hamburger menu only appears on touch devices, must be last child, and dont add class button #}
 		<a id="hamburger" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">

diff --git a/_includes/wait-sign.html b/_includes/wait-sign.html
@@ -1 +1 @@
-<h5 style="text-align: center;">&#128679;<!-- 🚧 -->in construction...&#127959;&#65039;<!-- 🏗 with modifier --></h5>
+<h5 style="text-align: center;" class="FA-ICON">&#128679;<!-- 🚧 --> not yet … &#127959;&#65039;<!-- 🏗 with modifier --></h5>
diff --git a/assets/fonts/GrenzeGotisch-ExtraBold.woff2 b/assets/fonts/GrenzeGotisch-ExtraBold.woff2
diff --git a/assets/fonts/fa-solid-900.ttf b/assets/fonts/fa-solid-900.ttf
diff --git a/assets/fonts/fa-solid-900.woff2 b/assets/fonts/fa-solid-900.woff2
diff --git a/assets/style.sass b/assets/style.sass
@@ -12,10 +12,7 @@ a.MY-REF
 	word-break: break-all
 	word-wrap: break-word
 
-	&::before
-		content: "\1F517" // 🔗
-		font-size: 70%
-
+// https://github.com/Omnibus-Type/Grenze-Gotisch/blob/master/fonts/webfonts/GrenzeGotisch-ExtraBold.woff2
 // https://github.com/Omnibus-Type/Grenze-Gotisch/blob/master/fonts/ttf/GrenzeGotisch-ExtraBold.ttf
 @font-face
 	font-family: "SinoViet-font"
@@ -26,13 +23,21 @@ a.MY-REF
 	font-family: "ChineseFont"
 	src: url("fonts/UKaiHK-02.woff2") format("woff2"), url("fonts/UKaiHK-02.ttf") format("truetype")
 
+// https://github.com/FortAwesome/Font-Awesome/tree/6.4.2/webfonts
+@font-face
+	font-family: "FoAw-icon"
+	src: url("fonts/fa-solid-900.woff2") format("woff2"), url("fonts/fa-solid-900.ttf") format("truetype")
+
 // instead of bulma class `has-text-centered` (dont use `is-centered`)
 header
 	text-align: center
 
 .multi-lang > :lang(vi)
 	color: #3A8098
 
+.FA-ICON
+	font-family: "FoAw-icon"
+
 /* **************************** ruby annotations **************************** */
 
 // see how it was improved https://codereview.stackexchange.com/q/260732/242219