axum_server/justfile

@@ -8,7 +8,7 @@ tailwind:
 # TODO change route on svetle project deletion 
 # TODO #directory-swap
 svgstore:
-   npx svgstore -o templates/icons/sprite.svg ../src/svg/**.svg
+   npx svgstore -o ../static/svg/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 $TARGET="PROD":
+prod:
     cargo run --release
 
 # Wait for port to listen to connections
@@ -55,6 +55,7 @@ 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,7 +18,6 @@ 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,46 +3,68 @@
 @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-Latin-Variable-wght.woff2) format('woff2');
+      url(/fonts/baloo2/Baloo2-VariableFont_wght.ttf) format('truetype');
-  }
-  /* 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, Baloo2 Noto Fallback, Baloo2 Fallback, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  font-family: Baloo2, Comfortaa, 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,6 +554,86 @@ 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';
 
@@ -563,61 +643,7 @@ video {
 
   src:
       local('Baloo2'),
-      url(/fonts/baloo2/Baloo2-Latin-Variable-wght.woff2) format('woff2');
+      url(/fonts/baloo2/Baloo2-VariableFont_wght.ttf) format('truetype');
-}
-
-/* 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 {
@@ -702,6 +728,11 @@ 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,8 +6,7 @@ module.exports = {
 			fontFamily: {
 				sans: [
 					"Baloo2",
-					"Baloo2 Noto Fallback",
+					"Comfortaa",
-					"Baloo2 Fallback",
 					"ui-sans-serif",
 					"system-ui",
 					"sans-serif",

axum_server/templates/base.html

@@ -25,9 +25,6 @@
     <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 clear-both sm:clear-none">
+	<footer class="text-sm md:text-base lg:text-lg mt-3 sm:mt-0">
     <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 href="#{{svg}}" />
+	    <use xlink:href="/svg/icons-sprite.svg#{{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 href="#{{svg}}" />
+	    <use xlink:href="/svg/icons-sprite.svg#{{svg}}" />
 	  </svg>
 	</aside>
 	<section>

axum_server/templates/site_footer.html

@@ -27,24 +27,16 @@
       >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"
+        class="inline-block h-6 mx-0.5" /><img
-        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"
+        class="inline-block h-6 mx-0.5" /><img
-        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"
+        class="inline-block h-6 mx-0.5" /><img
-        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>