fix article spacing

tireymorris · Jun 22, 2024 · 734409b · 734409b
1 parent e32ccba
commit 734409b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/public/styles/uno.css b/public/styles/uno.css
@@ -21,8 +21,8 @@
 
 /* layer: default */
 .m-0{margin:0;}
+.mb-3{margin-bottom:0.75rem;}
 .mr-4{margin-right:1rem;}
-.mt-4{margin-top:1rem;}
 .hidden{display:none;}
 .h-1\/4{height:25%;}
 .h-16{height:4rem;}
@@ -37,10 +37,11 @@
 @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
 .animate-spin{animation:spin 1s linear infinite;}
 .cursor-pointer{cursor:pointer;}
+.list-none{list-style-type:none;}
 .items-center{align-items:center;}
 .justify-center{justify-content:center;}
+.gap-2{gap:0.5rem;}
 .gap-3{gap:0.75rem;}
-.gap-4{gap:1rem;}
 .border{border-width:1px;}
 .border-b{border-bottom-width:1px;}
 .border-gray-2{--un-border-opacity:1;border-color:rgb(229 231 235 / var(--un-border-opacity));}

diff --git a/src/server.tsx b/src/server.tsx
@@ -20,7 +20,7 @@ app.get("/", async (c) => {
 
   return c.html(
     <Layout title="hyperwave">
-      <div class="flex flex-col items-center gap-4 p-4 min-h-screen text-sm">
+      <div class="flex flex-col items-center gap-2 p-4 min-h-screen text-md">
         <header class="w-full h-1/4 flex items-center justify-center bg-gradient-to-r from-blue-500 to-purple-500 text-white shadow-lg">
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -46,7 +46,7 @@ app.get("/", async (c) => {
           hx-indicator="#loading-indicator"
           class="w-full"
         ></div>
-        <div id="loading-indicator" class="mt-4 text-center hidden">
+        <div id="loading-indicator" class="text-center hidden">
           <svg
             class="animate-spin h-5 w-5 text-blue-500"
             xmlns="http://www.w3.org/2000/svg"
@@ -87,24 +87,23 @@ app.get("/articles", async (c) => {
   const nextPage = page + 1;
 
   return c.html(
-    <>
+    <ul class="list-none m-0 p-0">
       {articles.map((article) => (
-        <div key={article.id} class="article-item p-4 border-b">
+        <li key={article.id} class="p-0 m-0 border-b list-none mb-3">
           <a href={article.link} class="text-blue-500 hover:underline">
             {article.title} [{article.source}]
           </a>
-        </div>
+        </li>
       ))}
       {articles.length > 0 && (
         <div
           hx-get={`/articles?page=${nextPage}`}
           hx-trigger="intersect once"
           hx-swap="beforeend"
-          class="mt-4"
           hx-indicator="#loading-indicator"
         ></div>
       )}
-    </>,
+    </ul>,
   );
 });