added draft mode to drafts and added new model preview card

package.json

@@ -15,7 +15,7 @@
   },
   "keywords": [],
   "author": "Luca Junge",
-  "license": "GPL-3.0-or-later",
+  "license": "MIT",
   "devDependencies": {
     "@11ty/eleventy": "^1.0.2",
     "autoprefixer": "^10.4.13",

src/_includes/card.njk

@@ -0,0 +1,9 @@
+<a href="{{ post.url }}" class="group rounded-lg flex flex-col items-center text-gray-100  lg:flex-row lg:max-w-xl">
+  <div class="bg-gray-700 group-hover:bg-gray-300 transition ease-in-out rounded-t-lg lg:rounded-none lg:rounded-l-lg overflow-hidden self-stretch">
+    <img class="object-contain object-center group-hover:scale-110 transition ease-in-out" src="{{ post.url }}thumbnail.png" alt="{{post.data.alt}}">
+  </div>
+  <div class="w-full h-full self-center py-3 px-4 leading-normal bg-gray-600 rounded-b-lg lg:rounded-b-none lg:rounded-r-lg">
+    <h5 class="text-2xl font-bold tracking-tight text-gray-100">{{post.data.title}}</h5>
+    <p class="mb-3 font-normal text-gray-200">{{post.data.alt}}</p>
+  </div>
+</a>

src/_includes/model-preview.njk

@@ -0,0 +1,13 @@
+<a href="{{ post.url }}"class="group relative rounded-lg text-gray-100">
+
+  <!-- A container for the preview -->
+  <div class="model-image-container flex bg-gray-700 rounded-lg overflow-hidden">
+    <img class="m-2 border-t-3 object-contain w-full h-full group-hover:scale-110 transition ease-in-out" src="{{ post.url }}thumbnail.png" alt="{{post.data.alt}}">
+  </div>
+
+  <!-- The model title and description -->
+  <div class="model-info text-gray-100 backdrop-blur-sm p-5 pb-16 absolute bottom-0 left-0 right-0 bg-black/40 group-hover:bg-black/50 transition ease-in-out rounded-b-lg">
+    <h5 class="text-2xl font-bold">{{post.data.title}}</h5>
+    <p>{{post.data.alt}}</p>
+  </div>
+</a>

src/css/tailwind.css

@@ -4,10 +4,14 @@
 
 @layer base {
   h1 {
-    @apply text-2xl;
-    @apply font-bold;
+    @apply mb-2 text-2xl font-bold;
   }
+
   h2 {
-    @apply text-xl;
+    @apply mb-1 text-xl;
+  }
+
+  ul {
+    @apply ml-4 list-inside list-disc;
   }
 }

src/index.njk

@@ -26,14 +26,8 @@ title: luca-junge.de
     <i class="fa fa-angle-down mr-1"></i>MODELS</span>
 </div>
 
-<ul class="grid gap-5 grid-cols-2 grid-rows-2 lg:grid-cols-3 lg:grid-rows-3">
+<ul class="grid gap-5 grid-cols-1 grid-rows-1 md:grid-cols-2 md:grid-rows-2 lg:grid-cols-3 lg:grid-rows-3">
   {% for post in collections.model %}
-    <a href="{{ post.url }}" class="flex flex-col items-center text-gray-100 bg-gray-700  rounded-lg lg:flex-row lg:max-w-xl hover:bg-gray-300 transition ease-in-out">
-      <img class="object-cover w-full rounded-t-lg lg:h-auto lg:w-48 lg:rounded-none lg:rounded-l-lg" src="{{ post.url }}thumbnail.png" alt="{{post.data.alt}}">
-      <div class="w-full h-full self-center py-3 px-4 leading-normal bg-gray-600 rounded-b-lg lg:rounded-b-none lg:rounded-r-lg">
-        <h5 class="text-2xl font-bold tracking-tight text-gray-100">{{post.data.title}}</h5>
-        <p class="mb-3 font-normal text-gray-200">{{post.data.alt}}</p>
-      </div>
-    </a>
+    {% include "model-preview.njk" %}
   {% endfor %}
 </ul>

src/models/models.njk

@@ -3,14 +3,8 @@ layout: post.njk
 title: Alle 3D-Modelle
 eleventyExcludeFromCollections: true
 ---
-<ul class="grid gap-5 grid-cols-2 grid-rows-2 lg:grid-cols-3 lg:grid-rows-3">
+<ul class="grid gap-5 ml-0 grid-cols-1 grid-rows-1 md:grid-cols-2 md:grid-rows-2 lg:grid-cols-3 lg:grid-rows-3">
   {% for post in collections.model %}
-    <a href="{{ post.url }}" class="flex flex-col items-center text-gray-100 bg-gray-700  rounded-lg lg:flex-row lg:max-w-xl hover:bg-gray-300 transition ease-in-out">
-      <img class="object-cover w-full rounded-t-lg lg:h-auto lg:w-48 lg:rounded-none lg:rounded-l-lg" src="{{ post.url }}thumbnail.png" alt="{{post.data.alt}}">
-      <div class="w-full h-full self-center py-3 px-4 leading-normal bg-gray-600 rounded-b-lg lg:rounded-b-none lg:rounded-r-lg">
-        <h5 class="text-2xl font-bold tracking-tight text-gray-100">{{post.data.title}}</h5>
-        <p class="mb-3 font-normal text-gray-200">{{post.data.alt}}</p>
-      </div>
-    </a>
+    {% include "model-preview.njk" %}
   {% endfor %}
 </ul>

src/posts/awesome-open-source-tools/index.md

@@ -0,0 +1,32 @@
+---
+title: Awesome Open Source tools
+---
+
+Here's a list of open source tools that are almost too good to be true.
+
+## Design
+
+### Penpot
+
+Penpot can be found [here](https://github.com/penpot/penpot)
+
+## GameDev
+
+- Godot
+- Aseprite
+
+## Modelling
+
+- Blender
+
+## Texturing
+
+- Material Maker
+- Blender
+- Aseprite
+
+## Editing and Typing
+
+- Typst
+
+## Other notable mentions

src/posts/configuring-eleventy/index.md

@@ -1,5 +1,6 @@
 ---
 title: Configuring Eleventy
+draft: true
 ---
 
 # Was ist Eleventy?

src/posts/godot-debugger/index.md

@@ -1,7 +1,8 @@
 ---
-title: My Godot Debugger Plugin
+title: Godot 4.0 Debugger Plugin
+draft: true
 ---
 
-# Todo
+# Why I created this plugin
 
-Todo
+ToDo

src/posts/meshlab-blender-decimation-workflow/index.md

@@ -1,5 +1,6 @@
 ---
 title: How to automate decimating meshes with MeshLab and Blender
+draft: true
 ---
 
 # ToDo