From ec9063564d95ef0977c9a1b83b138eff8cb1be70 Mon Sep 17 00:00:00 2001
From: fiatjaf <fiatjaf@gmail.com>
Date: Mon, 23 Oct 2023 23:45:54 -0300
Subject: [PATCH] tailwind field separator.

---
 static/styles.css      | 19 -------------------
 static/styles.scss     | 14 --------------
 templates/note.html    | 12 +++++++++---
 templates/other.html   |  8 ++++++--
 templates/profile.html | 16 ++++++++++++----
 templates/relay.html   | 12 +++++++++---
 6 files changed, 36 insertions(+), 45 deletions(-)

diff --git a/static/styles.css b/static/styles.css
index dabc648..76a55b0 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -187,25 +187,6 @@ body {
   flex-shrink: 0;
   word-wrap: break-word;
 }
-.column_content .separator {
-  height: 6px;
-  width: 30%;
-  margin-left: -0.6rem;
-}
-.theme--default .column_content .separator {
-  background: #f3f3f3;
-}
-.theme--dark .column_content .separator {
-  background: #2d2d2d;
-}
-.column_content .separator.long {
-  width: 50%;
-}
-@media (max-width: 580px) {
-  .column_content .separator {
-    margin-left: -1rem;
-  }
-}
 .column_content .field {
   margin-bottom: 1.5rem;
   line-height: 1.3rem;
diff --git a/static/styles.scss b/static/styles.scss
index 329aad2..34202ea 100644
--- a/static/styles.scss
+++ b/static/styles.scss
@@ -241,20 +241,6 @@ body {
   flex-shrink: 0;
   word-wrap: break-word;
 
-  .separator {
-    height: 6px;
-    width: 30%;
-    margin-left: -0.6rem;
-    @include themed() {
-      background: t($over-bg);
-    }
-    &.long {
-      width: 50%;
-    }
-    @media (max-width: 580px) {
-      margin-left: -1rem;
-    }
-  }
   .field {
     margin-bottom: 1.5rem;
     line-height: 1.3rem;
diff --git a/templates/note.html b/templates/note.html
index e366085..5b643db 100644
--- a/templates/note.html
+++ b/templates/note.html
@@ -93,7 +93,9 @@
             end }}
           </div>
 
-          <div class="field separator"></div>
+          <div
+            class="h-1.5 mb-6 -ml-4 sm:-ml-2.5 bg-zinc-100 dark:bg-stone-800 w-1/3"
+          ></div>
 
           <article
             class="field | prose dark:prose-invert sm:prose-a:text-justify prose-headings:font-light;"
@@ -109,7 +111,9 @@
             {{ .Content }}
           </article>
 
-          <div class="field separator"></div>
+          <div
+            class="h-1.5 mb-6 -ml-4 sm:-ml-2.5 bg-zinc-100 dark:bg-stone-800 w-1/3"
+          ></div>
 
           <div class="field">
             <div class="label">Author Public key</div>
@@ -128,7 +132,9 @@
 
           {{template "details" .}}
 
-          <div class="field separator"></div>
+          <div
+            class="h-1.5 mb-6 -ml-4 sm:-ml-2.5 bg-zinc-100 dark:bg-stone-800 w-1/3"
+          ></div>
         </div>
 
         {{template "clients" .ClientsPartial}}
diff --git a/templates/other.html b/templates/other.html
index 19aec44..c279a4f 100644
--- a/templates/other.html
+++ b/templates/other.html
@@ -26,7 +26,9 @@
             <div class="text-2xl mb-4">{{.KindDescription}}</div>
           </header>
 
-          <div class="field separator"></div>
+          <div
+            class="h-1.5 mb-6 -ml-4 sm:-ml-2.5 bg-zinc-100 dark:bg-stone-800 w-1/3"
+          ></div>
 
           <div class="field">
             <div class="label">Author Public key</div>
@@ -35,7 +37,9 @@
 
           {{template "details" .DetailsPartial}}
 
-          <div class="field separator"></div>
+          <div
+            class="h-1.5 mb-6 -ml-4 sm:-ml-2.5 bg-zinc-100 dark:bg-stone-800 w-1/3"
+          ></div>
         </div>
       </div>
     </div>
diff --git a/templates/profile.html b/templates/profile.html
index 3b43407..0347cbe 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -67,12 +67,16 @@
               {{end}}
             </h1>
           </header>
-          <div class="field separator long"></div>
+          <div
+            class="h-1.5 mb-6 -ml-4 sm:-ml-2.5 bg-zinc-100 dark:bg-stone-800 w-1/2"
+          ></div>
           <div class="field">
             <a href="{{.NormalizedAuthorWebsiteURL}}">{{.Metadata.Website}}</a>
           </div>
           <div class="field about">{{.RenderedAuthorAboutText}}</div>
-          <div class="field separator"></div>
+          <div
+            class="h-1.5 mb-6 -ml-4 sm:-ml-2.5 bg-zinc-100 dark:bg-stone-800 w-1/3"
+          ></div>
           <div class="field">
             <div class="label">Public key</div>
             {{.Npub}}
@@ -105,7 +109,9 @@
           </div>
 
           {{if not (eq 0 (len .LastNotes))}}
-          <div class="field separator"></div>
+          <div
+            class="h-1.5 mb-6 -ml-4 sm:-ml-2.5 bg-zinc-100 dark:bg-stone-800 w-1/3"
+          ></div>
           <nav class="field last_notes">
             <h2 class="text-strongpink text-2xl">Last Notes</h2>
             {{range $i, $ee := .LastNotes}}
@@ -127,7 +133,9 @@
           </nav>
           {{end}}
 
-          <div class="field separator"></div>
+          <div
+            class="h-1.5 mb-6 -ml-4 sm:-ml-2.5 bg-zinc-100 dark:bg-stone-800 w-1/3"
+          ></div>
         </div>
 
         {{template "clients" .ClientsPartial}}
diff --git a/templates/relay.html b/templates/relay.html
index d129917..9a4229e 100644
--- a/templates/relay.html
+++ b/templates/relay.html
@@ -53,10 +53,14 @@
             </h1>
           </header>
 
-          <div class="field separator long"></div>
+          <div
+            class="h-1.5 mb-6 -ml-4 sm:-ml-2.5 bg-zinc-100 dark:bg-stone-800 w-1/2"
+          ></div>
           <div class="field">wss://{{.Hostname}}</div>
           <div class="field about">{{.Info.Description}}</div>
-          <div class="field separator long"></div>
+          <div
+            class="h-1.5 mb-6 -ml-4 sm:-ml-2.5 bg-zinc-100 dark:bg-stone-800 w-1/2"
+          ></div>
 
           {{ if not (eq "" .Info.PubKey) }}
           <div class="field">
@@ -72,7 +76,9 @@
           </div>
           {{ end }}
 
-          <div class="field separator"></div>
+          <div
+            class="h-1.5 mb-6 -ml-4 sm:-ml-2.5 bg-zinc-100 dark:bg-stone-800 w-1/3"
+          ></div>
 
           <div class="field last_notes">
             <h2 class="text-strongpink text-2xl">Last Notes</h2>