bum bam

.zellij/dev-layout.kdl

@@ -1,29 +1,26 @@
 layout {
-    pane split_direction="vertical" focus=true {
-        pane edit="src/main.rs"
-        pane split_direction="horizontal" size=60 {
-            just { args "server_dev"; }
-            just { args "test"; }
+    default_tab_template {
+        children
+        pane size=2 borderless=true {
+            plugin location="zellij:status-bar"
+        }
+        pane size=1 borderless=true {
+            plugin location="zellij:tab-bar"
         }
     }
     pane_template name="just" {
         command "just"
-        start_suspended true
     }
-	floating_panes {
-		pane {
-            command "just"
-            args "tailwind"
+
+    tab split_direction="vertical" focus=true {
+        pane  {
+                just { args "server_dev"; }
+                just { args "test"; }
         }
-		pane {
-            command "just"
-            args "decap_server"
+    	pane {
+             just { args "tailwind"; }
+             just { args "decap_server"; }
         }
-	}
-    pane size=2 borderless=true {
-        plugin location="zellij:status-bar"
-    }
-    pane size=1 borderless=true {
-        plugin location="zellij:tab-bar"
     }
+    tab
 }

styles/input.css

@@ -93,12 +93,14 @@
   size-adjust: 92%;
 }
 
-a {
-  @apply text-pink-800 underline underline-offset-2 hover:transition hover:text-blue-500;
-}
+@layer base {
+  a {
+    @apply text-pink-800 underline underline-offset-2 hover:transition hover:text-blue-500;
+  }
 
-strong {
-  @apply font-medium;
+  strong {
+    @apply font-medium;
+  }
 }
 
 .article-body {

styles/output.css

@@ -332,6 +332,12 @@
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
+  .mt-8 {
+    margin-top: calc(var(--spacing) * 8);
+  }
+  .mt-12 {
+    margin-top: calc(var(--spacing) * 12);
+  }
   .mr-3 {
     margin-right: calc(var(--spacing) * 3);
   }
@@ -534,6 +540,9 @@
   .border-blue-950 {
     border-color: var(--color-blue-950);
   }
+  .border-slate-200 {
+    border-color: var(--color-slate-200);
+  }
   .border-slate-300 {
     border-color: var(--color-slate-300);
   }
@@ -630,9 +639,9 @@
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
   }
-  .leading-5 {
-    --tw-leading: calc(var(--spacing) * 5);
-    line-height: calc(var(--spacing) * 5);
+  .leading-7 {
+    --tw-leading: calc(var(--spacing) * 7);
+    line-height: calc(var(--spacing) * 7);
   }
   .leading-tight {
     --tw-leading: var(--leading-tight);
@@ -932,6 +941,11 @@
       margin-top: calc(var(--spacing) * 8);
     }
   }
+  .lg\:mt-10 {
+    @media (width >= 64rem) {
+      margin-top: calc(var(--spacing) * 10);
+    }
+  }
   .lg\:mt-20 {
     @media (width >= 64rem) {
       margin-top: calc(var(--spacing) * 20);
@@ -1162,27 +1176,29 @@
   line-gap-override: 0%;
   size-adjust: 92%;
 }
-a {
-  color: var(--color-pink-800);
-  text-decoration-line: underline;
-  text-underline-offset: 2px;
-  &:hover {
-    @media (hover: hover) {
-      color: var(--color-blue-500);
+@layer base {
+  a {
+    color: var(--color-pink-800);
+    text-decoration-line: underline;
+    text-underline-offset: 2px;
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-blue-500);
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
+        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+        transition-duration: var(--tw-duration, var(--default-transition-duration));
+      }
     }
   }
-  &:hover {
-    @media (hover: hover) {
-      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
-      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-      transition-duration: var(--tw-duration, var(--default-transition-duration));
-    }
+  strong {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
   }
 }
-strong {
-  --tw-font-weight: var(--font-weight-medium);
-  font-weight: var(--font-weight-medium);
-}
 .article-body {
   h1 {
     margin-inline: auto;

templates/blog_post.html

@@ -41,7 +41,7 @@
 <section id="recommended-articles">
   <hr class="border-slate-300 m-5 md:my-8">
 
-  <h2 class="m-5 text-2xl md:text-2xl lg:text-4xl lg:mt-8 text-blue-900 lg:mb-10 font-bold">Further reading</h2>
+  <h2 class="m-5 mt-8 text-2xl md:text-2xl lg:text-4xl lg:mt-10 text-blue-900 lg:mb-10 font-bold">Further reading</h2>
   <ul class="mx-5 xl:flex xl:justify-start xl:gap-10">
     {% for post in recommended_posts %}
     <li class="flex-1">

templates/components/blog_post_preview.html

@@ -17,7 +17,7 @@
 		  <a rel="prefetch" href="/{{segment}}/{{post.slug}}" class="text-blue-950 visited:text-purple-700 no-underline">{{post.metadata.title}}</a>
 		</h3>
 	</header>
-	<section class="text-base leading-5 text-slate-800 md:text-xl text-justify">{{post.body|truncate_md(2)|parse_markdown|safe}}</section>
+	<section class="text-base leading-7 text-slate-800 md:text-xl text-justify">{{post.body|truncate_md(2)|parse_markdown|safe}}</section>
 	<footer class="text-sm md:text-base lg:text-lg mt-3 sm:mt-0 clear-both sm:clear-none">
     <ul class="inline-block" style="view-transition-name: post_tags_{{post.slug}}">
      {% for tag in post.metadata.tags %}

templates/components/education_card.html

@@ -1,18 +0,0 @@
-<section class="flex border rounded-sm bg-white p-3">
-	<aside class="flex justify-center items-center pr-3 shrink-0">
-  {% match education.thumbnail %}
-  {% when Some with (source) %}
-  {% let picture = crate::picture_generator::picture_markup_generator::generate_picture_markup(source, 64, 64, "education cover", Some("h-12 w-12 md:h-16 md:w-16")).unwrap_or("cover not found".to_string()) %}
-  <figure class="mx-4 my-2">
-     {{picture|safe}}
-  </figure>
-  {% when None %}
-  {% endmatch %}
-	</aside>
-	<section>
-		<header>
-			<h3 class="text-lg font-medium mb-1 md:text-2xl">{{education.name}}</h3>
-		</header>
-		<section class="text-sm leading-tight text-slate-800 md:text-lg md:leading-tight">{{education.description|parse_markdown|safe}}</section>
-	</section>
-</section>

templates/components/project_preview_card.html

@@ -1,4 +1,4 @@
-<section class="border rounded-md bg-white p-4 break-inside-avoid" style="view-transition-name: project_preview_{{project.slug}};">
+<section class="border border-slate-200 rounded-md bg-white p-4 break-inside-avoid" style="view-transition-name: project_preview_{{project.slug}};">
   <header class="px-4 mb-3"> 
     <h2 class="text-xl font-semibold text-blue-900 md:text-2xl">
       {% match project.metadata.link %}

templates/components/skill_card.html

@@ -1,4 +1,4 @@
-<section class="flex border rounded bg-white p-3">
+<section class="flex border border-slate-200 rounded bg-white p-3">
 	<aside class="flex justify-center items-center pr-3 shrink-0">
   {% match skill.thumbnail %}
   {% when Some with (source) %}

templates/components/social_card.html

@@ -1,6 +1,6 @@
 {% macro social_card_start(svg, url, heading, img, class) %}
 
-<a href="{{url}}" class="block no-underline border rounded-md bg-pink-200 m-4 p-4 max-w-[392px] {{class}}">
+<a href="{{url}}" class="block no-underline border border-slate-200 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 role="img" aria-label="{{svg}} icon" aria-hidden="true" class="h-7 w-7 fill-blue-950">
 	    <use href="#{{svg}}" />

templates/components/talent_card.html

@@ -1,5 +1,5 @@
 {% macro talent_card(svg, heading, description) %}
-<section class="flex border rounded-sm bg-white p-3">
+<section class="flex border border-slate-200 rounded-sm bg-white p-3">
 	<aside class="flex justify-center items-center pr-3">
 	  <svg role="img" aria-label="{{svg}} icon" aria-hidden="true" class="fill-blue-950 h-12 w-12 md:h-16 md:w-16">
 	    <use href="#{{svg}}" />

templates/components/workplace_card.html

@@ -1,18 +0,0 @@
-<section class="flex border rounded-sm bg-white p-3">
-	<aside class="flex justify-center items-center pr-3 shrink-0">
-  {% match workplace.thumbnail %}
-  {% when Some with (source) %}
-  {% let picture = crate::picture_generator::picture_markup_generator::generate_picture_markup(source, 64, 64, "Workplace cover", Some("h-12 w-12 md:h-16 md:w-16")).unwrap_or("cover not found".to_string()) %}
-  <figure class="mx-4 my-2">
-     {{picture|safe}}
-  </figure>
-  {% when None %}
-  {% endmatch %}
-	</aside>
-	<section>
-		<header>
-			<h3 class="text-lg font-medium mb-1 md:text-2xl">{{workplace.name}}</h3>
-		</header>
-		<section class="text-sm leading-tight text-slate-800 md:text-lg md:leading-tight">{{workplace.description|parse_markdown|safe}}</section>
-	</section>
-</section>