feat: Make prettier

layout/templates/no_screenshot.html

@@ -1,9 +1,7 @@
-<div class="no-screenshot clickable">
-  <a href="https://{{ item.source_url }}">
-    <div class="vertical-center">
-      <div class="horizontal-center">
-	<span class="no-screenshot-pound">#</span>
-      </div>
+<div class="flex justify-center md:w-48 md:h-48 w-24 h-24 rounded-lg clickable bg-indigo-950">
+  <a class="prose text-white text-5xl" href="https://{{ item.source_url }}">
+    <div class="md:w-48 md:h-48 w-24 h-24 flex flex-col justify-center">
+      <span class="text-center">#</span>
     </div>
   </a>
-</div>
+</div>

layout/templates/project.html

@@ -1,12 +1,14 @@
-<div class="horizontal project-row">
+<div class="flex flex-row self-start pt-8">
   {{ template_if_empty item.screenshot layout/templates/no_screenshot.html layout/templates/screenshot.html }}
-  <div class="vertical">
-    <h2>{{ item.title }}</h2>
-    <p>{{ item.description }}</p>
+  <div class="flex flex-col pl-8">
+    <h2 class="prose text-indigo-400 text-2xl">{{ item.title }}</h2>
+    <p class="prose text-white text-justify">{{ item.description }}</p>
 
-    <ul>
-      {{ template_if_empty item.website layout/templates/empty.html layout/templates/project_website.html }}
-      <li><a href="https://{{ item.source_url }}">Code</a></li>
-    </ul>
+    <div class="pt-4">
+      <ul>
+        {{ template_if_empty item.website layout/templates/empty.html layout/templates/project_website.html }}
+        <li><a class="prose text-indigo-400" href="https://{{ item.source_url }}">Code</a></li>
+      </ul>
+    </div>
   </div>
-</div>
+</div>

layout/templates/project_website.html

@@ -1 +1 @@
-<li><a href="https://{{ item.website }}">Website</a></li>
+<li><a class="text-indigo-400" href="https://{{ item.website }}">Website</a></li>

layout/templates/screenshot.html

@@ -1,5 +1,5 @@
 <div>
   <a href="https://{{ item.source_url }}" target="_blank">
-    <img class="screenshot clickable" src="{{ item.screenshot }}" alt="Screenshot of {{ item.title }}" />
+    <img class="w-24 md:w-48 max-w-none rounded-lg clickable" src="{{ item.screenshot }}" alt="Screenshot of {{ item.title }}" />
   </a>
 </div>