design: neobrutalist_theme into main

html-router/templates/content/base.html

@@ -3,14 +3,14 @@
 {% block title %}Minne - Content{% endblock %}
 
 {% block main %}
-<main id="main_section" class="flex justify-center grow mt-2 sm:mt-4 gap-6 mb-10">
+<main id="main_section" class="flex justify-center grow mt-2 sm:mt-4 gap-6 mb-10 w-full">
   <div class="container">
-    <div class="flex items-center justify-between mb-4">
-      <h2 class="text-2xl font-bold">Content</h2>
+    <div class="nb-panel p-3 mb-4 flex items-center justify-between">
+      <h2 class="text-xl font-extrabold tracking-tight">Content</h2>
       <form hx-get="/content" hx-target="#main_section" hx-swap="outerHTML" hx-push-url="true"
         class="flex items-center gap-2 mt-2 sm:mt-0">
-        <div class="form-control">
-          <select name="category" class="select select-bordered">
+        <div>
+          <select name="category" class="nb-select">
             <option value="">All Categories</option>
             {% for category in categories %}
             <option value="{{ category }}" {% if selected_category==category %}selected{% endif %}>{{ category }}
@@ -18,13 +18,11 @@
             {% endfor %}
           </select>
         </div>
-        <button type="submit" class="btn btn-primary btn-sm">Filter</button>
+        <button type="submit" class="nb-btn btn-sm">Filter</button>
       </form>
     </div>
 
-    <div id="text_content_cards">
-      {% include "content/content_list.html" %}
-    </div>
+    {% include "content/content_list.html" %}
   </div>
 </main>
 {% endblock %}

html-router/templates/content/content_list.html

@@ -1,19 +1,19 @@
-<div class="columns-1 md:columns-2 2xl:columns-3 gap-4" id="text_content_cards">
+<div class="nb-masonry w-full" id="text_content_cards">
   {% for text_content in text_contents %}
-  <div class="card cursor-pointer mb-4 bg-base-100 shadow break-inside-avoid-column"
+  <article class="nb-card cursor-pointer mx-auto mb-4 w-full max-w-[92vw] space-y-3 sm:max-w-none"
     hx-get="/content/{{ text_content.id }}/read" hx-target="#modal" hx-swap="innerHTML">
     {% if text_content.url_info %}
-    <figure>
-      <img src="/file/{{text_content.url_info.image_id}}" alt="website screenshot" />
+    <figure class="-mx-4 -mt-4 border-b-2 border-neutral bg-base-200">
+      <img class="w-full h-auto" src="/file/{{text_content.url_info.image_id}}" alt="website screenshot" />
     </figure>
     {% endif %}
     {% if text_content.file_info.mime_type == "image/png" or text_content.file_info.mime_type == "image/jpeg" %}
-    <figure>
-      <img src="/file/{{text_content.file_info.id}}" alt="{{text_content.file_info.file_name}}" />
+    <figure class="-mx-4 -mt-4 border-b-2 border-neutral bg-base-200">
+      <img class="w-full h-auto" src="/file/{{text_content.file_info.id}}" alt="{{text_content.file_info.file_name}}" />
     </figure>
     {% endif %}
-    <div class="card-body max-w-[95vw]">
-      <h2 class="card-title truncate">
+    <div class="space-y-3 break-words">
+      <h2 class="text-lg font-extrabold tracking-tight truncate">
         {% if text_content.url_info %}
         {{text_content.url_info.title}}
         {% elif text_content.file_info %}
@@ -22,37 +22,36 @@
         {{text_content.text}}
         {% endif %}
       </h2>
-      <div class="flex items-center justify-between">
-        <p class="text-xs opacity-60">
+      <div class="flex flex-wrap items-center justify-between gap-3">
+        <p class="text-xs opacity-60 shrink-0">
           {{ text_content.created_at | datetimeformat(format="short", tz=user.timezone) }}
         </p>
-        <div class="badge badge-soft badge-secondary mr-2">{{ text_content.category }}</div>
+        <span class="nb-badge">{{ text_content.category }}</span>
         <div class="flex gap-2" hx-on:click="event.stopPropagation()">
           {% if text_content.url_info %}
-          <button class="btn-btn-square btn-ghost btn-sm">
-            <a href="{{text_content.url_info.url}}" target="_blank" rel="noopener noreferrer">
-              {% include "icons/link_icon.html" %}
-            </a>
-          </button>
+          <a href="{{text_content.url_info.url}}" target="_blank" rel="noopener noreferrer"
+            class="nb-btn btn-square btn-sm" aria-label="Open source link">
+            {% include "icons/link_icon.html" %}
+          </a>
           {% endif %}
           <button hx-get="/content/{{ text_content.id }}/read" hx-target="#modal" hx-swap="innerHTML"
-            class="btn btn-square btn-ghost btn-sm">
+            class="nb-btn btn-square btn-sm" aria-label="Read content">
             {% include "icons/read_icon.html" %}
           </button>
           <button hx-get="/content/{{ text_content.id }}" hx-target="#modal" hx-swap="innerHTML"
-            class="btn btn-square btn-ghost btn-sm">
+            class="nb-btn btn-square btn-sm" aria-label="Edit content">
             {% include "icons/edit_icon.html" %}
           </button>
           <button hx-delete="/content/{{ text_content.id }}" hx-target="#text_content_cards" hx-swap="outerHTML"
-            class="btn btn-square btn-ghost btn-sm">
+            class="nb-btn btn-square btn-sm" aria-label="Delete content">
             {% include "icons/delete_icon.html" %}
           </button>
         </div>
       </div>
-      <p class="mt-2">
+      <p class="text-sm leading-relaxed">
         {{ text_content.instructions }}
       </p>
     </div>
-  </div>
+  </article>
   {% endfor %}
 </div>

html-router/templates/content/edit_text_content_modal.html

@@ -8,34 +8,49 @@ flex flex-col min-h-[95%] w-11/12 max-w-[90ch] max-h-[95%]
 hx-patch="/content/{{text_content.id}}"
 hx-target="#main_section"
 hx-swap="outerHTML"
-class="flex flex-col flex-1 h-full"
+class="flex flex-col flex-1 h-full min-h-0"
 {% endblock %}
 
 {% block modal_content %}
-<h3 class="text-lg font-bold">Edit Content</h3>
-<div class="form-control">
-  <label class="floating-label">
-    <span class="label-text">Context</span>
-    <input type="text" name="context" value="{{ text_content.context }}" class="w-full input input-bordered">
-  </label>
-</div>
-<div class="form-control">
-  <label class="floating-label">
-    <span class="label-text">Category</span>
-    <input type="text" name="category" value="{{ text_content.category }}" class="w-full input input-bordered">
-  </label>
-</div>
-<div class="form-control flex-1 flex flex-col min-h-0">
-  <label class="floating-label flex-1 flex flex-col min-h-0">
-    <span class="label-text">Text</span>
-    <textarea name="text" class="textarea textarea-bordered w-full flex-1 min-h-[200px] h-full resize-none">{{
-      text_content.text }}</textarea>
+<h3 class="text-xl font-extrabold tracking-tight">Edit Content</h3>
+<div class="flex flex-col gap-3 flex-1 min-h-0">
+  <label class="w-full">
+    <div class="text-xs uppercase tracking-wide opacity-70 mb-1">Context</div>
+    <input type="text" name="context" value="{{ text_content.context }}" class="nb-input w-full">
+  </label>
+  <label class="w-full">
+    <div class="text-xs uppercase tracking-wide opacity-70 mb-1">Category</div>
+    <input type="text" name="category" value="{{ text_content.category }}" class="nb-input w-full">
+  </label>
+  <label class="w-full flex-1 flex flex-col min-h-0">
+    <div class="text-xs uppercase tracking-wide opacity-70 mb-1">Text</div>
+    <textarea name="text" class="nb-input w-full flex-1 min-h-0 h-full resize-none overflow-y-auto">{{ text_content.text
+      }}</textarea>
   </label>
 </div>
+<script>
+  (function () {
+    const form = document.getElementById('modal_form');
+    if (!form) return;
+
+    if (document.getElementById('main_section')) {
+      form.setAttribute('hx-target', '#main_section');
+      form.setAttribute('hx-swap', 'outerHTML');
+      return;
+    }
+
+    if (document.getElementById('latest_content_section')) {
+      form.setAttribute('hx-target', '#latest_content_section');
+      form.setAttribute('hx-swap', 'outerHTML');
+      return;
+    }
+
+    form.removeAttribute('hx-target');
+    form.setAttribute('hx-swap', 'none');
+  })();
+</script>
 {% endblock %}
 
 {% block primary_actions %}
-<button type="submit" class="btn btn-primary">
-  Save Changes
-</button>
-{% endblock %}
+<button type="submit" class="nb-btn nb-cta">Save Changes</button>
+{% endblock %}

html-router/templates/content/read_content_modal.html

@@ -4,14 +4,14 @@
 
 {% block modal_content %}
 {% if text_content.url_info.image_id %}
-<img class="rounded-t-md overflow-clip" src="/file/{{text_content.url_info.image_id}}" alt="Screenshot of the site" />
+<img class="w-full border-b-2 border-neutral" src="/file/{{text_content.url_info.image_id}}" alt="Screenshot of the site" />
 {% endif %}
 {% if text_content.file_info.mime_type == "image/png" or text_content.file_info.mime_type == "image/jpeg" %}
 <figure>
   <img src="/file/{{text_content.file_info.id}}" alt="{{text_content.file_info.file_name}}" />
 </figure>
 {% endif %}
-<div id="reader-{{text_content.id}}" class="markdown-content prose" data-content="{{text_content.text | escape }}">
+<div id="reader-{{text_content.id}}" class="markdown-content prose-tufte" data-content="{{text_content.text | escape }}">
   {{text_content.text | escape }}
 </div>
 
@@ -39,4 +39,4 @@
 {% endblock %}
 
 {% block primary_actions %}
-{% endblock %}
+{% endblock %}