fixing some layout stuff on the sections

static/css/main.css

@@ -310,6 +310,9 @@
   .m-300 {
     margin: calc(var(--spacing) * 300);
   }
+  .mx-5 {
+    margin-inline: calc(var(--spacing) * 5);
+  }
   .mx-8 {
     margin-inline: calc(var(--spacing) * 8);
   }
@@ -361,6 +364,9 @@
   .mr-4 {
     margin-right: calc(var(--spacing) * 4);
   }
+  .mr-5 {
+    margin-right: calc(var(--spacing) * 5);
+  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -388,6 +394,9 @@
   .ml-4 {
     margin-left: calc(var(--spacing) * 4);
   }
+  .ml-5 {
+    margin-left: calc(var(--spacing) * 5);
+  }
   .ml-\[-0\.2em\] {
     margin-left: -0.2em;
   }
@@ -467,6 +476,9 @@
   .h-64 {
     height: calc(var(--spacing) * 64);
   }
+  .h-96 {
+    height: calc(var(--spacing) * 96);
+  }
   .h-full {
     height: 100%;
   }
@@ -530,6 +542,9 @@
   .flex-1 {
     flex: 1;
   }
+  .flex-2 {
+    flex: 2;
+  }
   .flex-3 {
     flex: 3;
   }
@@ -774,6 +789,9 @@
   .object-cover {
     object-fit: cover;
   }
+  .object-top {
+    object-position: top;
+  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -801,6 +819,9 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
+  .px-5 {
+    padding-inline: calc(var(--spacing) * 5);
+  }
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
@@ -1506,11 +1527,36 @@
       margin-top: calc(var(--spacing) * 0);
     }
   }
+  .md\:h-72 {
+    @media (width >= 48rem) {
+      height: calc(var(--spacing) * 72);
+    }
+  }
+  .md\:w-1\/3 {
+    @media (width >= 48rem) {
+      width: calc(1/3 * 100%);
+    }
+  }
+  .md\:w-full {
+    @media (width >= 48rem) {
+      width: 100%;
+    }
+  }
   .md\:max-w-md {
     @media (width >= 48rem) {
       max-width: var(--container-md);
     }
   }
+  .md\:flex-1 {
+    @media (width >= 48rem) {
+      flex: 1;
+    }
+  }
+  .md\:flex-2 {
+    @media (width >= 48rem) {
+      flex: 2;
+    }
+  }
   .md\:basis-1\/4 {
     @media (width >= 48rem) {
       flex-basis: calc(1/4 * 100%);
@@ -1521,6 +1567,11 @@
       flex-basis: calc(3/4 * 100%);
     }
   }
+  .md\:basis-full {
+    @media (width >= 48rem) {
+      flex-basis: 100%;
+    }
+  }
   .md\:grid-cols-2 {
     @media (width >= 48rem) {
       grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -1531,6 +1582,20 @@
       flex-direction: row;
     }
   }
+  .md\:space-x-4 {
+    @media (width >= 48rem) {
+      :where(& > :not(:last-child)) {
+        --tw-space-x-reverse: 0;
+        margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
+        margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
+      }
+    }
+  }
+  .md\:px-0 {
+    @media (width >= 48rem) {
+      padding-inline: calc(var(--spacing) * 0);
+    }
+  }
   .lg\:block {
     @media (width >= 64rem) {
       display: block;
@@ -1541,6 +1606,11 @@
       display: none;
     }
   }
+  .lg\:h-72 {
+    @media (width >= 64rem) {
+      height: calc(var(--spacing) * 72);
+    }
+  }
   .lg\:grid-cols-4 {
     @media (width >= 64rem) {
       grid-template-columns: repeat(4, minmax(0, 1fr));

templates/page.html

@@ -1,6 +1,7 @@
 {% extends "layout.html" %}
 
 {% block content %}
+<script src="/js/zoom.js"/>
 <div class="flex px-4">
    <h1 class="text-2xl text-bold my-6 mx-auto">
       {{ page.title }}

templates/section.html

@@ -32,26 +32,28 @@
       {% set image = page.path ~ page.extra.image %}
       {% endif %}
       {% if image %}
-      {% set resized = resize_image(path="/content" ~ image, width=200, height=200, op="fit_height") %}
+      {% set resized = resize_image(path="/content" ~ image, width=500, height=500, op="fit_height") %}
       {% else %}
       {% set resized = "" %}
       {% endif %}
-      <div class="flex flex-wrap space-x-4 border border-2 border-gray-200 dark:border-black rounded-xl p-5 shadow-xl hover:shadow-xl/30 transform transition duration-500 hover:scale-105 bg-gray-200 dark:bg-gray-800 place-content-center cursor-pointer" onclick='location.href="{{ page.permalink }}";'>
+      <div class="flex flex-wrap md:space-x-4 border border-2 border-gray-200 dark:border-black rounded-xl shadow-xl hover:shadow-xl/30 transform transition duration-500 hover:scale-105 bg-gray-200 dark:bg-gray-800 place-content-center cursor-pointer" onclick='location.href="{{ page.permalink }}";'>
 
           <!-- Image -->
           {% if resized %}
-          <div class="flex-1 rounded-lg place-content-center">
+          <div class="w-full basis-full md:flex-2 rounded-lg place-content-center">
-              <img class="rounded-lg" src="{{ resized.url }}"/>
+              <img class="object-cover object-top md:w-full w-full h-96 lg:h-72 md:h-72 nozoom rounded-lg" src="{{ resized.url }}"/>
           </div>
           {% else %}
+          <div class="ml-5">
+          </div>
           {% endif %}
 
-        <div class="flex flex-col flex-3">
+        <div class="flex flex-col flex-3 mr-5 px-4 md:px-0">
             <h2 class="text-2xl text-bold"><a href='{{ page.permalink }}'>{{ page.title }}</a></h2>
             <p class="text-bold text-ellipsis">{{ page.description | linebreaksbr | safe }}</p>
 
             <!-- Summary -->
-            <div class="text-bold mt-8">
+            <div class="text-bold my-2">
                 <a class="flex py-2" href='{{ page.permalink }}'>
                     Read More
                     <svg class="w-6 h-6 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">