Update styles and templates for improved layout and design

- Updated Tailwind CSS to version 4.0.17, introducing new color variables and adjustments to existing styles.
- Added a new section template for displaying project sections with a consistent design.
- Enhanced card shortcodes to include list styles for better readability.
- Modified sidebar links to ensure correct image paths and improved accessibility with added links for projects.

zola/templates/section.html

@@ -0,0 +1,29 @@
+{% extends "base.html" %} {% block content %}
+<article
+  class="aero-gradient-glass rounded-lg p-4 flex flex-col border-midnight-light border w-full"
+>
+  <section
+    class="aero-gradient-dark p-2 rounded-lg border-midnight border prose-sm prose-p:m-1 w-full text-white flex flex-col"
+  >
+    <h6
+      class="aero-gradient text-white p-2 border border-midnight rounded-lg w-full items-center flex justify-center"
+    >
+      {{ section.title | default(value="Projects") }}
+    </h6>
+
+    <section>
+      <p>{{ section.description | safe }}</p>
+
+      <ul class="list-none p-0">
+        {% for page in section.pages %}
+        <li class="mb-2">
+          <a href="{{ page.permalink }}" class="text-blue-400 hover:underline"
+            >{{ page.title }}</a
+          >
+        </li>
+        {% endfor %}
+      </ul>
+    </section>
+  </section>
+</article>
+{% endblock %}

zola/templates/shortcodes/card.html

@@ -2,7 +2,7 @@
   class="aero-gradient-glass rounded-lg p-4 flex flex-col border-midnight-light border"
 >
   <section
-    class="aero-gradient-dark p-2 rounded-lg border-midnight border prose-sm prose-a:text-blue-500 text-white flex flex-col"
+    class="aero-gradient-dark p-2 rounded-lg border-midnight border prose-sm prose-a:text-blue-500 text-white flex flex-col prose-ul:list-disc overflow-auto"
   >
     <h6
       class="aero-gradient text-white p-2 border border-midnight rounded-lg w-full items-center flex justify-center"

zola/templates/sidebar.html

@@ -6,33 +6,36 @@
     <ul class="flex flex-col gap-1 justify-center">
       <li class="border-b border-midnight">
         <a href="/" class="flex items-center gap-2">
-          <img class="w-6 h-6" src="img/icons/home.png" alt="home-icon" />
+          <img class="w-6 h-6" src="/img/icons/home.png" alt="home-icon" />
           Home
         </a>
       </li>
       <li class="border-b border-midnight flex items-center">
         <a href="/cv" class="flex items-center gap-2">
-          <img class="w-6 h-6" src="img/icons/cv.png" alt="cv-icon" />
+          <img class="w-6 h-6" src="/img/icons/cv.png" alt="cv-icon" />
           CV
         </a>
       </li>
       <li class="border-b border-midnight flex items-center gap-2">
         <a href="/about" class="flex items-center gap-2">
-          <img class="w-6 h-6" src="img/icons/about.png" alt="about-icon" />
+          <img class="w-6 h-6" src="/img/icons/about.png" alt="about-icon" />
           About
         </a>
       </li>
     </ul>
   </section>
   <section class="aero-gradient-dark text-white p-1 rounded-sm">
-    <p
+    <a
       class="aero-gradient p-2 border-b border-midnight text-lg flex items-center gap-2"
+      href="/projects"
     >
-      <img src="img/icons/folder.png" alt="folder-icon" class="w-6 h-6" />
+      <img src="/img/icons/folder.png" alt="folder-icon" class="w-6 h-6" />
       Projects
-    </p>
+    </a>
     <ul class="flex flex-col gap-1 justify-center">
-      <li class="border-b border-midnight">Project 1</li>
+      <li class="border-b border-midnight">
+        <a href="/projects/tiny-packer">Tiny packer</a>
+      </li>
       <li class="border-b border-midnight">Project 2</li>
       <li class="border-b border-midnight">Project 3</li>
     </ul>
@@ -41,7 +44,7 @@
     <p
       class="aero-gradient p-2 border-b border-midnight text-lg flex items-center gap-2"
     >
-      <img class="w-6 h-6" src="img/icons/games.png" alt="games-icon" />
+      <img class="w-6 h-6" src="/img/icons/games.png" alt="games-icon" />
       Games
     </p>
     <ul class="flex flex-col gap-1 justify-center">
@@ -54,13 +57,17 @@
     <p
       class="aero-gradient p-2 border-b border-midnight text-lg flex items-center gap-2"
     >
-      <img src="img/icons/disc.png" alt="disc-icon" class="w-6 h-6" />
+      <img src="/img/icons/disc.png" alt="disc-icon" class="w-6 h-6" />
       Multimedia
     </p>
     <ul class="flex flex-col gap-1 justify-center">
       <li class="border-b border-midnight flex items-center gap-2">
         <a href="/podcasts" class="flex items-center gap-2">
-          <img class="w-6 h-6" src="img/icons/podcast.png" alt="podcast-icon" />
+          <img
+            class="w-6 h-6"
+            src="/img/icons/podcast.png"
+            alt="podcast-icon"
+          />
           Podcasts
         </a>
       </li>