feat: self-host fonts

src/assets/fonts/arvo/arvo.css

@@ -0,0 +1,91 @@
+/* arvo-bold-latin */
+@font-face {
+	font-family: Arvo;
+	font-style: normal;
+	font-weight: 700;
+	src: local("Arvo Bold"), local("Arvo-Bold"), url(arvo-bold-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
+	font-display: swap;
+}
+/* arvo-bold-latin-ext */
+@font-face {
+	font-family: Arvo;
+	font-style: normal;
+	font-weight: 700;
+	src: local("Arvo Bold"), local("Arvo-Bold"), url(arvo-bold-latin-ext.woff2) format("woff2");
+	unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
+	font-display: swap;
+}
+/* arvo-italic-latin */
+@font-face {
+	font-family: Arvo;
+	font-style: italic;
+	font-weight: 400;
+	src: local("Arvo-Italic"), url(arvo-italic-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
+	font-display: swap;
+}
+/* arvo-italic-latin-ext */
+@font-face {
+	font-family: Arvo;
+	font-style: italic;
+	font-weight: 400;
+	src: local("Arvo-Italic"), url(arvo-italic-latin-ext.woff2) format("woff2");
+	unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
+	font-display: swap;
+}
+/* arvo-italic-greek */
+@font-face {
+	font-family: Arvo;
+	font-style: italic;
+	font-weight: 400;
+	src: local("Arvo-Italic"), url(arvo-italic-greek.woff2) format("woff2");
+	unicode-range: U+0370-03FF;
+	font-display: swap;
+}
+/* arvo-bold-italic-latin */
+@font-face {
+	font-family: Arvo;
+	font-style: italic;
+	font-weight: 700;
+	src: local("Arvo Bold Italic"), local("Arvo-BoldItalic"), url(arvo-bold-italic-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
+	font-display: swap;
+}
+/* arvo-bold-italic-latin-ext */
+@font-face {
+	font-family: Arvo;
+	font-style: italic;
+	font-weight: 700;
+	src: local("Arvo Bold Italic"), local("Arvo-BoldItalic"), url(arvo-bold-italic-latin-ext.woff2) format("woff2");
+	unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
+	font-display: swap;
+}
+/* arvo-latin */
+@font-face {
+	font-family: Arvo;
+	font-style: normal;
+	font-weight: 400;
+	src: local("Arvo"), url(arvo-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
+	font-display: swap;
+}
+/* arvo-latin-ext */
+@font-face {
+	font-family: Arvo;
+	font-style: normal;
+	font-weight: 400;
+	src: local("Arvo"), url(arvo-latin-ext.woff2) format("woff2");
+	unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
+	font-display: swap;
+}
+/* arvo-greek */
+@font-face {
+	font-family: Arvo;
+	font-style: normal;
+	font-weight: 400;
+	src: local("Arvo"), url(arvo-greek.woff2) format("woff2");
+	unicode-range: U+0370-03FF;
+	font-display: swap;
+}
+

src/assets/fonts/secular-one/secular-one.css

@@ -0,0 +1,28 @@
+/* secularone-regular-latin */
+@font-face {
+	font-family: Secular One;
+	font-style: normal;
+	font-weight: 400;
+	src: local("SecularOne-Regular"), url(secularone-regular-latin.woff2) format("woff2");
+	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+2215;
+	font-display: swap;
+}
+/* secularone-regular-latin-ext */
+@font-face {
+	font-family: Secular One;
+	font-style: normal;
+	font-weight: 400;
+	src: local("SecularOne-Regular"), url(secularone-regular-latin-ext.woff2) format("woff2");
+	unicode-range: U+0100-024F,U+0259,U+1E00-1EFF,U+20A0-20CF,U+2C60-2C7F,U+A720-A7FF;
+	font-display: swap;
+}
+/* secularone-regular-greek */
+@font-face {
+	font-family: Secular One;
+	font-style: normal;
+	font-weight: 400;
+	src: local("SecularOne-Regular"), url(secularone-regular-greek.woff2) format("woff2");
+	unicode-range: U+0370-03FF;
+	font-display: swap;
+}
+

src/scss/base.scss

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Arvo&family=Secular+One&&display=swap");
+@import "fontfaces";
 
 /* theme colors */
 :root {
@@ -81,6 +81,7 @@
   --navigation-link-text-font-size: 1.5rem;
   --navigation-link-box-shadow: inset 0 calc(var(--navigation-size) * -1) 0 0
     var(--color-router-link);
+  --navigation-link-last-child-margin: 0;
 
   --timeline-max-width: calc(var(--timeline-circle-size) * 15);
   --timeline-circle-size: 4rem;
@@ -196,6 +197,7 @@
     --navigation-link-padding: 0 0 0 env(safe-area-inset-left);
     --navigation-link-box-shadow: inset var(--navigation-width-expanded) 0 0 0
       var(--color-router-link);
+    --navigation-link-last-child-margin: auto 0 0 0;
 
     --table-cell-padding: 0.5rem 1rem;
   }

src/scss/fontfaces.scss

@@ -0,0 +1,2 @@
+@import "@/assets/fonts/arvo/arvo";
+@import "@/assets/fonts/secular-one/secular-one";