From 29c5d778e2dc791d53e30fffbb5ac9894b1fcbc8 Mon Sep 17 00:00:00 2001
From: perennial <mail@perennialte.ch>
Date: Wed, 4 Dec 2024 18:29:07 +1100
Subject: [PATCH] some artwork page restyling

---
 assets/views/fragments/artwork.jet.html | 80 ++++++++++++++-----------
 1 file changed, 44 insertions(+), 36 deletions(-)

diff --git a/assets/views/fragments/artwork.jet.html b/assets/views/fragments/artwork.jet.html
index 06ada9d..9d52808 100644
--- a/assets/views/fragments/artwork.jet.html
+++ b/assets/views/fragments/artwork.jet.html
@@ -104,14 +104,16 @@
       <div class="row mb-3">
         {* Artist avatar, artwork name, and artist name *}
         <div class="col-12 col-xl-8 mb-3 mb-xl-0">
+          <h1 class="mb-2">{{ .Title }}</h1>
           <div class="d-flex align-items-center">
-            <a href="/users/{{ .User.ID }}" class="me-3">
-              <img src="{{ .User.Avatar }}" alt="{{ .User.Name }}" class="rounded-circle object-fit-cover" style="width: 64px; height: 64px;"/>
+            <a href="/users/{{ .User.ID }}" class="me-2">
+              <img src="{{ .User.Avatar }}" alt="{{ .User.Name }}" class="rounded-circle object-fit-cover" style="width: 24px; height: 24px;"/>
             </a>
-            <div>
-              <h1 class="mb-2">{{ .Title }}</h1>
-              <h3 class="mb-0"><a href="/users/{{ .User.ID }}" class="text-muted text-decoration-none">{{ .User.Name }}</a></h3>
-            </div>
+            <h3 class="mb-0">
+              <a href="/users/{{ .User.ID }}" class="text-body-secondary text-decoration-none">
+                {{ .User.Name }}
+              </a>
+            </h3>
           </div>
         </div>
 
@@ -201,32 +203,24 @@
         </div>
       </div>
 
-      {* View Pixiv original button *}
-      <div class="d-inline-flex border border-neutral-700 rounded py-1 px-2 mb-3">
-        <small class="text-center">
-          <i class="bi bi-box-arrow-up-right me-1"></i>
-          <a href="https://pixiv.net/i/{{ .ID }}" class="text-body-secondary fw-semibold">
-            View on pixiv.net
-          </a>
-        </small>
-      </div>
+      <hr class="border-neutral-700 opacity-100 rounded">
 
       {* Artwork description *}
       {* Rendered conditionally to avoid a weird empty p element that messes with spacing *}
       {{- if .Description }}
-      <p class="mb-3">{{- raw: parsePixivRedirect(.Description) }}</p>
+      <p class="text-body mb-3">{{- raw: parsePixivRedirect(.Description) }}</p>
       {{- end }}
 
       {* Tag information *}
       {* text-start ensures that the content within non-emphasized tags is left-aligned while still maintaining proper wrapping behavior *}
-      <div class="d-flex flex-wrap align-items-baseline mb-3">
+      <div class="d-flex flex-wrap align-items-baseline">
         {{- if .AiType == 2 }}
-        <span class="badge bg-warning text-dark mb-2 me-2">AI-generated</span>
+        <span class="badge bg-warning text-dark mb-1 me-2">AI-generated</span>
         {{- end }}
         {{- range .Tags }}
           {* NOTE: early block to catch the R-18 tag *}
           {{- if isEmphasize(.Name) }}
-          <span class="badge bg-danger mb-2 me-2">{{ .Name }}</span>
+          <span class="badge bg-danger mb-1 me-2">{{ .Name }}</span>
           {{- end }}
         {{- end }}
         {{- range .Tags }}
@@ -234,7 +228,7 @@
           {* Intentionally empty to not render anything to avoid duplication *}
           {{- else }}
           {* NOTE: tried styling these tags similarly to the "View on pixiv.net" button, but even then they still draw too much attention and break visual hierarchy *}
-          <div class="d-inline-block mb-2 me-2">
+          <div class="d-inline-block mb-1 me-2">
             <small>
             <a href="/tags/{{ escapeString(.Name) }}" class="text-primary-emphasis fw-semibold text-decoration-none text-wrap p-0 mb-0">#{{ .Name }}</a>
             {{- if .TranslatedName }}
@@ -247,25 +241,39 @@
         {{- end }}
       </div>
 
+      <hr class="border-neutral-700 opacity-100 rounded">
+
       {* Other artwork information (views, bookmarks, likes, creation date) *}
-      <div class="d-flex flex-wrap text-muted small me-2">
-        <div class="me-3 mb-2 mb-lg-0">
-            <i class="bi bi-eye me-2"></i>{{- .Views }}
+      <div class="d-flex-column d-lg-flex align-items-center justify-content-between pb-lg-2">
+        <div class="d-flex flex-wrap text-body small mb-2 mb-lg-0 me-2">
+          <div class="me-3 mb-2 mb-lg-0">
+              <i class="bi bi-eye me-2"></i>{{- .Views }}
+          </div>
+          <div class="me-3 mb-2 mb-lg-0">
+              <i class="bi bi-heart me-2"></i>{{- .Bookmarks }}
+          </div>
+          <div class="me-3 mb-2 mb-lg-0">
+              <i class="bi bi-hand-thumbs-up me-2"></i>{{- .Likes }}
+          </div>
+          <div class="me-3 mb-2 mb-lg-0">
+              <i class="bi bi-calendar me-2"></i>{{- parseTime: .Date }}
+          </div>
+          {{- if .Images[0].Width != 0 && .Images[0].Height != 0 }}
+          <div>
+              <i class="bi bi-arrows-angle-expand me-2"></i>{{ .Images[0].Width }}x{{ .Images[0].Height }}
+          </div>
+          {{- end }}
         </div>
-        <div class="me-3 mb-2 mb-lg-0">
-            <i class="bi bi-heart me-2"></i>{{- .Bookmarks }}
+
+        {* View Pixiv original button *}
+        <div class="d-inline-flex border border-neutral-700 rounded py-1 px-2">
+          <small class="text-center">
+            <i class="bi bi-box-arrow-up-right me-1"></i>
+            <a href="https://pixiv.net/i/{{ .ID }}" class="text-body-secondary fw-semibold">
+              View on pixiv.net
+            </a>
+          </small>
         </div>
-        <div class="me-3 mb-2 mb-lg-0">
-            <i class="bi bi-hand-thumbs-up me-2"></i>{{- .Likes }}
-        </div>
-        <div class="me-3 mb-2 mb-lg-0">
-            <i class="bi bi-calendar me-2"></i>{{- parseTime: .Date }}
-        </div>
-        {{- if .Images[0].Width != 0 && .Images[0].Height != 0 }}
-        <div>
-            <i class="bi bi-arrows-angle-expand me-2"></i>{{ .Images[0].Width }}x{{ .Images[0].Height }}
-        </div>
-        {{- end }}
       </div>
           {{- if .SeriesNavData }}
             <div class="custom-card mt-4">