tailwind field separator.

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;

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;

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}}

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>

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}}

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>