yeah

assets/css/app.css

@@ -73,7 +73,7 @@
   /* === PAGE HEADER === */
 
   header.page-header { 
-    @apply border-b border-slate-300;
+    @apply border-b border-slate-300 mb-6;
   }
 
   header.page-header h1 {
@@ -83,6 +83,20 @@
   header.page-header p {
     @apply mb-3;
   }
+
+  /* === PAGE GRID === */
+
+  section.page-grid {
+    @apply grid grid-cols-1 md:grid-cols-3 gap-3;
+
+    > section {
+      @apply col-span-1 md:col-span-2;
+    }
+
+    > aside {
+      @apply print:hidden;
+    }
+  }
 }
 
 /* 

lib/chiya_web/controllers/page_html/bookmarks.html.heex

@@ -2,13 +2,13 @@
   <h1><%= Enum.count(@notes) %> Bookmarks</h1>
 </header>
 
-<section class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-3">
+<section class="page-grid">
-  <section class="col-span-1 md:col-span-2">
+  <section>
     <.note_list notes={@notes} layout={@channel.layout} />
   </section>
 
-  <section>
+  <aside>
     <.tag_list notes={@notes} />
-  </section>
+  </aside>
 </section>
 

lib/chiya_web/controllers/page_html/channel.html.heex

@@ -3,6 +3,12 @@
   <p><%= Markdown.render(@channel.content) |> raw %></p>
 </header>
 
-<div class="w-full mt-6 sm:w-auto flex flex-col gap-1.5">
+<section class="page-grid">
-  <.note_list notes={@channel.notes}/>
+  <section>
-</div>
+    <.note_list notes={@channel.notes} layout={@channel.layout} />
+  </section>
+
+  <aside>
+    <.tag_list notes={@channel.notes} />
+  </aside>
+</section>

lib/chiya_web/controllers/page_html/note.html.heex

@@ -1,3 +1,5 @@
+<section class="page-grid">
+  <section>
     <article class="h-entry hentry | stack container">
       <header>
         <h1 class="p-name | text-3xl leading-10 font-bold text-theme-base1">
@@ -5,33 +7,10 @@
         </h1>
       </header>
 
-  <section class="print:hidden">
-    <ul class="flex gap-3">
-      <li>
-        <a href={~p"/admin/notes/#{@note}/edit"} class="button">
-          Edit
-        </a>
-      </li>
-      <li>
-        <a href={~p"/admin/notes/#{@note}"} class="button">
-          Show in Admin
-        </a>
-      </li>
-    </ul>
-  </section>
-
       <aside>
         <.featured_images note={@note} />
       </aside>
 
-  <%= if has_outline?(@note) do %>
-    <aside class="prose max-w-none print:hidden">
-      <div class="bg-theme-background1 rounded p-2">
-        <%= raw(render_outline(@note)) %>
-      </div>
-    </aside>
-  <% end %>
-
       <section class="p-summary e-content | prose max-w-none">
         <%= Markdown.render(@note.content) |> raw %>
       </section>
@@ -97,3 +76,36 @@
         <% end %>
       </section>
     </article>
+
+  </section>
+
+  <aside class="prose max-w-none">
+    <h3>Admin</h3>
+
+    <section>
+      <ul>
+        <li>
+          <a href={~p"/admin/notes/#{@note}/edit"} class="button">
+            Edit
+          </a>
+        </li>
+        <li>
+          <a href={~p"/admin/notes/#{@note}"} class="button">
+            Show in Admin
+          </a>
+        </li>
+      </ul>
+    </section>
+
+    <h3>Outline</h3>
+
+    <%= if has_outline?(@note) do %>
+      <aside>
+        <div class="bg-theme-background1 rounded p-2">
+          <%= raw(render_outline(@note)) %>
+        </div>
+      </aside>
+    <% end %>
+  </aside>
+</section>
+

lib/chiya_web/controllers/page_html/wiki.html.heex

@@ -3,12 +3,12 @@
   <p><%= Markdown.render(@channel.content) |> raw %></p>
 </header>
 
-<section class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-3">
+<section class="page-grid">
-  <section class="col-span-1 md:col-span-2">
+  <section>
     <.note_list notes={@notes} />
   </section>
 
-  <section>
+  <aside>
     <.tag_list notes={@notes} />
-  </section>
+  </aside>
 </section>