pixivision index rework wip

assets/css/bootstrap-style.css

@@ -12994,6 +12994,10 @@ textarea.form-control-lg {
   color: white;
 }
 
+.custom-card-body a:hover {
+  text-decoration: underline !important;
+}
+
 .custom-novel-nav {
   max-height: 40vh;
 }

assets/css/bootstrap-style.scss

@@ -166,6 +166,13 @@ $utilities: map-merge(
   @extend .card-body;
   @extend .border-0;
   @extend .rounded-5;
+
+  a {
+    &:hover {
+      text-decoration: underline !important;
+    }
+  }
+
 }
 
 .custom-novel-card {

assets/views/layout/default.jet.html

@@ -131,6 +131,9 @@
               <li class="nav-item">
                 <a class="nav-link" href="/newest"><i class="bi bi-stars me-2" title="sparkling"></i>Newest</a>
               </li>
+              <li class="nav-item">
+                <a class="nav-link" href="/pixivision"><i class="bi bi-palette me-2"></i>pixivision</a>
+              </li>
             </div>
             <div class="mb-4">
               <h3>Your profile</h3>

assets/views/pixivisionIndex.jet.html

@@ -1,25 +1,46 @@
 {{- extends "layout/default" }}
 {{- block body() }}
 <div class="row justify-content-center g-4">
-    <div class="col-12">
-        <div class="d-flex flex-column flex-md-row justify-content-between align-items-center">
-    </div>
+  <h1 class="text-center"><i class="bi bi-palette me-2"></i>pixivision</h1>
 
-    <div class="row row-cols-2 row-cols-md-3 row-cols-lg-3 g-4 mt-0 row-gap-0">
-        {{- range _, article := .Data }}
-        <div class="card">
-            <img src="{{article.Thumbnail}}" class="card-img-top" alt="{{article.Title}}">
-            <div class="card-body">
-              <p class="card-text">
-                <a href="/pixivision/a/{{article.ID}}" class="text-reset text-decoration-none">{{article.Title}}</a>
-              </p>
-                {{- range _, tag := article.Tags }}
-                <a href="/pixivision/t/{{tag.ID}}" class="card-link">#{{tag.Name}}</a>
-                {{- end }}
-                <p class="card-text"><small class="text-body-secondary">{{parseTimeCustomFormat(article.Date, "2006-01-02")}}</small></p>
+  <div class="col-12">
+    <div class="row row-cols-1 row-cols-md-2 row-cols-md-3 g-4">
+      {{- range _, article := .Data }}
+      <div class="col">
+        <div class="custom-card bg-charcoal-surface1 thumbnail-hover-dark">
+          <a href="/pixivision/a/{{article.ID}}">
+            <div class="thumbnail-wrapper rounded-top-5 overflow-hidden">
+              <img src="{{article.Thumbnail}}" class="card-img-top rounded-top-5" alt="{{article.Title}}" />
             </div>
+          </a>
+          <div class="custom-card-body">
+            <!-- Title -->
+            <h4 class="lh-lg">
+              <a href="/pixivision/a/{{article.ID}}" class="text-body text-decoration-none">
+                {{article.Title}}
+              </a>
+            </h4>
+            <div class="d-flex align-items-start justify-content-between">
+              <div>
+                <!-- Tags -->
+                {{- range _, tag := article.Tags }}
+                  <span class="badge fw-normal me-2 mb-2 p-0 text-wrap text-break text-start">
+                    <a href="/pixivision/t/{{tag.ID}}" class="text-decoration-none text-wrap text-break">#{{ tag.Name }}</a>
+                  </span>
+                {{- end }}
+              </div>
+              <div>
+                <!-- Publication date  -->
+                <p class="text-body-secondary small mb-0">
+                  {{parseTimeCustomFormat(article.Date, "2006-01-02")}}
+                </p>
+              </div>
+            </div>
+          </div>
         </div>
-        {{- end }}
+      </div>
+      {{- end }}
     </div>
+  </div>
 </div>
 {{- end }}