tired of this font sheiad

axum_server/justfile

@@ -8,7 +8,7 @@ tailwind:
 # TODO change route on svetle project deletion 
 # TODO #directory-swap
 svgstore:
-   npx svgstore -o ../static/svg/icons-sprite.svg ../src/svg/**.svg
+   npx svgstore -o templates/icons/sprite.svg ../src/svg/**.svg
 
 server_dev: 
 	cargo watch -x run
@@ -33,7 +33,7 @@ test_watch:
 	cargo watch -x test
 
 # Run server in production mode
-prod:
+prod $TARGET="PROD":
     cargo run --release
 
 # Wait for port to listen to connections
@@ -55,7 +55,6 @@ clean:
 # SSG
 ssg:
 	- wget --no-convert-links -r -p -E -P dist --no-host-directories 127.0.0.1:{{port}}
-	- wget -P dist/svg 127.0.0.1:{{port}}/svg/icons-sprite.svg
   
 # Preview server
 preview:

axum_server/src/pages/project_list.rs

@@ -18,6 +18,7 @@ pub struct ProjectListTemplate {
 pub async fn render_projects_list() -> Result<ProjectListTemplate, StatusCode> {
     let mut project_list = get_post_list::<ProjectMetadata>("../_projects").await?;
 
+    project_list.sort_by_key(|post| post.slug.to_string());
     project_list.retain(|project| project.metadata.displayed);
     project_list.reverse();
 

axum_server/styles/input.css

@@ -3,68 +3,46 @@
 @tailwind utilities;
 
 @layer base {
-  @font-face {
-    font-family: 'Comfortaa';
-    font-style: normal;
-    font-display: swap;
-    font-weight: 300;
-    src:
-      local('Comfortaa Light'),
-      local('Comfortaa'),
-      url(/fonts/comfortaa/Comfortaa-Light.woff2) format('woff2'),
-      url(/fonts/comfortaa/Comfortaa-Light.ttf) format('truetype');
-  }
-  @font-face {
-    font-family: 'Comfortaa';
-    font-style: normal;
-    font-display: swap;
-    font-weight: 400;
-    src:
-      local('Comfortaa Regular'),
-      local('Comfortaa'),
-      url(/fonts/comfortaa/Comfortaa-Regular.woff2) format('woff2'),
-      url(/fonts/comfortaa/Comfortaa-Regular.ttf) format('truetype');
-  }
-  @font-face {
-    font-family: 'Comfortaa';
-    font-style: normal;
-    font-display: swap;
-    font-weight: 500;
-    src:
-      local('Comfortaa Medium'),
-      local('Comfortaa'),
-      url(/fonts/comfortaa/Comfortaa-Medium.woff2) format('woff2'),
-      url(/fonts/comfortaa/Comfortaa-Medium.ttf) format('truetype');
-  }
-  @font-face {
-    font-family: 'Comfortaa';
-    font-style: normal;
-    font-display: swap;
-    font-weight: 600;
-    src:
-      local('Comfortaa SemiBold'),
-      local('Comfortaa'),
-      url(/fonts/comfortaa/Comfortaa-SemiBold.woff2) format('woff2'),
-      url(/fonts/comfortaa/Comfortaa-SemiBold.ttf) format('truetype');
-  }
-  @font-face {
-    font-family: 'Comfortaa';
-    font-style: normal;
-    font-display: swap;
-    font-weight: 700;
-    src:
-      local('Comfortaa Bold'),
-      local('Comfortaa'),
-      url(/fonts/comfortaa/Comfortaa-Bold.woff2) format('woff2'),
-      url(/fonts/comfortaa/Comfortaa-Bold.ttf) format('truetype');
-  }
   @font-face {
     font-family: 'Baloo2';
     font-style: normal;
     font-display: swap;
     src:
       local('Baloo2'),
-      url(/fonts/baloo2/Baloo2-VariableFont_wght.ttf) format('truetype');
+      url(/fonts/baloo2/Baloo2-Latin-Variable-wght.woff2) format('woff2');
+  }
+  /* latin-ext */
+  @font-face {
+    font-family: 'Baloo 2';
+    font-style: normal;
+    font-weight: 400 800;
+    font-display: swap;
+    src: url(/fonts/baloo2/Baloo2-Latin-Variable-ext-wght.woff2) format('woff2');
+    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
+      U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  }
+
+  @font-face {
+    font-family: 'Baloo2 Fallback';
+    font-style: normal;
+    font-weight: 400;
+    src: local('BlinkMacSystemFont'), local('Segoe UI'), local('Helvetica Neue'),
+      local('Arial');
+    ascent-override: 111.2%;
+    descent-override: 54.05%;
+    line-gap-override: 0%;
+    size-adjust: 96.95%;
+  }
+
+  @font-face {
+    font-family: 'Baloo2 Noto Fallback';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Noto Sans');
+    ascent-override: 88%;
+    descent-override: none;
+    line-gap-override: 0%;
+    size-adjust: 92%;
   }
 }
 

axum_server/styles/output.css

@@ -154,7 +154,7 @@ html,
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: Baloo2, Comfortaa, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  font-family: Baloo2, Baloo2 Noto Fallback, Baloo2 Fallback, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
@@ -554,86 +554,6 @@ video {
   display: none;
 }
 
-@font-face {
-  font-family: 'Comfortaa';
-
-  font-style: normal;
-
-  font-display: swap;
-
-  font-weight: 300;
-
-  src:
-      local('Comfortaa Light'),
-      local('Comfortaa'),
-      url(/fonts/comfortaa/Comfortaa-Light.woff2) format('woff2'),
-      url(/fonts/comfortaa/Comfortaa-Light.ttf) format('truetype');
-}
-
-@font-face {
-  font-family: 'Comfortaa';
-
-  font-style: normal;
-
-  font-display: swap;
-
-  font-weight: 400;
-
-  src:
-      local('Comfortaa Regular'),
-      local('Comfortaa'),
-      url(/fonts/comfortaa/Comfortaa-Regular.woff2) format('woff2'),
-      url(/fonts/comfortaa/Comfortaa-Regular.ttf) format('truetype');
-}
-
-@font-face {
-  font-family: 'Comfortaa';
-
-  font-style: normal;
-
-  font-display: swap;
-
-  font-weight: 500;
-
-  src:
-      local('Comfortaa Medium'),
-      local('Comfortaa'),
-      url(/fonts/comfortaa/Comfortaa-Medium.woff2) format('woff2'),
-      url(/fonts/comfortaa/Comfortaa-Medium.ttf) format('truetype');
-}
-
-@font-face {
-  font-family: 'Comfortaa';
-
-  font-style: normal;
-
-  font-display: swap;
-
-  font-weight: 600;
-
-  src:
-      local('Comfortaa SemiBold'),
-      local('Comfortaa'),
-      url(/fonts/comfortaa/Comfortaa-SemiBold.woff2) format('woff2'),
-      url(/fonts/comfortaa/Comfortaa-SemiBold.ttf) format('truetype');
-}
-
-@font-face {
-  font-family: 'Comfortaa';
-
-  font-style: normal;
-
-  font-display: swap;
-
-  font-weight: 700;
-
-  src:
-      local('Comfortaa Bold'),
-      local('Comfortaa'),
-      url(/fonts/comfortaa/Comfortaa-Bold.woff2) format('woff2'),
-      url(/fonts/comfortaa/Comfortaa-Bold.ttf) format('truetype');
-}
-
 @font-face {
   font-family: 'Baloo2';
 
@@ -643,7 +563,61 @@ video {
 
   src:
       local('Baloo2'),
-      url(/fonts/baloo2/Baloo2-VariableFont_wght.ttf) format('truetype');
+      url(/fonts/baloo2/Baloo2-Latin-Variable-wght.woff2) format('woff2');
+}
+
+/* latin-ext */
+
+@font-face {
+  font-family: 'Baloo 2';
+
+  font-style: normal;
+
+  font-weight: 400 800;
+
+  font-display: swap;
+
+  src: url(/fonts/baloo2/Baloo2-Latin-Variable-ext-wght.woff2) format('woff2');
+
+  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
+      U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: 'Baloo2 Fallback';
+
+  font-style: normal;
+
+  font-weight: 400;
+
+  src: local('BlinkMacSystemFont'), local('Segoe UI'), local('Helvetica Neue'),
+      local('Arial');
+
+  ascent-override: 111.2%;
+
+  descent-override: 54.05%;
+
+  line-gap-override: 0%;
+
+  size-adjust: 96.95%;
+}
+
+@font-face {
+  font-family: 'Baloo2 Noto Fallback';
+
+  font-style: normal;
+
+  font-weight: 400;
+
+  src: local('Noto Sans');
+
+  ascent-override: 88%;
+
+  descent-override: none;
+
+  line-gap-override: 0%;
+
+  size-adjust: 92%;
 }
 
 .col-span-2 {
@@ -728,11 +702,6 @@ video {
   margin-bottom: 1.25rem;
 }
 
-.my-6 {
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }

axum_server/tailwind.config.js

@@ -6,7 +6,8 @@ module.exports = {
 			fontFamily: {
 				sans: [
 					"Baloo2",
-					"Comfortaa",
+					"Baloo2 Noto Fallback",
+					"Baloo2 Fallback",
 					"ui-sans-serif",
 					"system-ui",
 					"sans-serif",

axum_server/templates/base.html

@@ -25,6 +25,9 @@
     <link rel="icon" type="image/png" href="/images/m-logo-192.png" />
   </head>
   <body class="bg-blue-50">
+    <div class="preload-assets" style="display: none">
+        {% include "icons/sprite.svg" %}
+    </div>
     {% include "site_header.html" %}
     {% block content %} Placeholder {% endblock %}
     {% include "site_footer.html" %}

axum_server/templates/components/blog_post_preview.html

@@ -15,7 +15,7 @@
 		</h3>
 	</header>
 	<section class="text-base leading-5 text-slate-800 md:text-xl text-justify">{{post.body|description_filter|safe}}</section>
-	<footer class="text-sm md:text-base lg:text-lg mt-3 sm:mt-0">
+	<footer class="text-sm md:text-base lg:text-lg mt-3 sm:mt-0 clear-both sm:clear-none">
     <ul class="inline-block">
      {% for tag in post.metadata.tags %}
       <li class="inline-block">

axum_server/templates/components/social_card.html

@@ -3,7 +3,7 @@
 <a href="{{url}}" class="block no-underline border rounded-md bg-pink-200 m-4 p-4 max-w-[392px] {{class}}">
 	<header class="flex text-center justify-center items-center gap-2 mb-2">
 		 <svg aria-hidden="true" class="h-7 w-7 fill-blue-950">
-	    <use xlink:href="/svg/icons-sprite.svg#{{svg}}" />
+	    <use href="#{{svg}}" />
 	  </svg>
 		<h3 class="text-lg font-medium mb-1 text-blue-950 visited:text-blue-950">{{heading|safe}}</h3>
 	</header>

axum_server/templates/components/talent_card.html

@@ -3,7 +3,7 @@
 <section class="flex border rounded bg-white m-4 p-3 max-w-[32rem]">
 	<aside class="flex justify-center items-center pr-3">
 	  <svg aria-hidden="true" class="fill-blue-950 h-12 w-12 md:h-16 md:w-16">
-	    <use xlink:href="/svg/icons-sprite.svg#{{svg}}" />
+	    <use href="#{{svg}}" />
 	  </svg>
 	</aside>
 	<section>

axum_server/templates/site_footer.html

@@ -27,16 +27,24 @@
       >CC BY-NC-ND 4.0<img
         src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"
         alt="cc"
-        class="inline-block h-6 mx-0.5" /><img
+        class="inline-block h-6 mx-0.5"
+        height="24"
+        width="24" /><img
         src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"
         alt="by"         
-        class="inline-block h-6 mx-0.5" /><img
+        class="inline-block h-6 mx-0.5"
+        height="24"
+        width="24" /><img
         src="https://mirrors.creativecommons.org/presskit/icons/nc.svg?ref=chooser-v1"
         alt="nc"
-        class="inline-block h-6 mx-0.5" /><img
+        class="inline-block h-6 mx-0.5"
+        height="24"
+        width="24" /><img
         src="https://mirrors.creativecommons.org/presskit/icons/nd.svg?ref=chooser-v1"
         alt="nd"
         class="inline-block h-6 mx-0.5"
+        height="24"
+        width="24"
       /></a>
       <!-- TODO Display link to feed with icon -->
       <a href="/feed.xml" class="hidden">RSS feed</a>