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/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 {

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/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>