assets/css/bootstrap-style.css

@@ -14915,6 +14915,10 @@ a:not(:has(img)):not([class*=btn]):not(.nav-link):hover {
   overflow: hidden;
 }
 
+.grayscale-75 {
+  filter: grayscale(75%);
+}
+
 .thumbnail-hover-dark {
   overflow: hidden;
 }

assets/css/bootstrap-style.scss

@@ -276,6 +276,10 @@ a:not(:has(img)):not([class*="btn"]):not(.nav-link) {
   overflow: hidden;
 }
 
+.grayscale-75 {
+  filter: grayscale(75%);
+}
+
 /// TODO: need usability tests to determine whether these variables are ok; can also cause weird moire/pixel level scaling issues with novel thumbnails (especially the default cover which has intricate details)
 .thumbnail-hover-dark {
   overflow: hidden;

assets/views/blocks/comments.jet.html

@@ -49,7 +49,7 @@
                 <img class="img-fluid rounded-circle object-fit-cover" src="{{ .Avatar }}" alt="{{ .AuthorName }}" loading="lazy" style="width: 40px; height: 40px" />
               </a>
               {{- else }}
-              <img class="img-fluid rounded-circle object-fit-cover" src="{{ .Avatar }}" alt="{{ .AuthorName }}" loading="lazy" style="width: 40px; height: 40px" />
+              <img class="img-fluid rounded-circle object-fit-cover grayscale-75" src="{{ .Avatar }}" alt="{{ .AuthorName }}" loading="lazy" style="width: 40px; height: 40px" />
               {{- end }}
             </div>
 
@@ -62,7 +62,7 @@
                     {{- .AuthorName }}
                   </a>
                   {{- else }}
-                  <p class="fw-bold mb-0">Deleted user</p>
+                  <p class="fw-bold text-body-secondary mb-0">Deleted user</p>
                   {{- end }}
                 </div>
                 <small class="text-muted">{{ .Date }}</small>

assets/views/fragments/small-tn.jet.html

@@ -1,32 +1,37 @@
 {{- range . }}
-  {{- if .ID == "#" }}
   <div class="col">
     <div class="card h-100 border-0 bg-transparent">
-      <img src="/img/deleted.png" alt="{{ .Title }}" class="card-img-top img-fluid" loading="lazy" />
-      <div class="card-body py-2 px-0">
-        <p class="text-truncate mb-1">
-          <span class="fw-bold text-body text-decoration-none">{{ .Title }}</span>
-        </p>
-        <div class="d-flex align-items-center">
-          <div class="align-items-center text-decoration-none text-truncate">
+      {{- if .ID == "#" }}
+        <!-- Replicate the thumbnail-dt structure -->
+        <div class="position-relative h-100 thumbnail-hover-dark mb-2">
+          <div>
+            <div class="ratio ratio-1x1">
+              <div class="thumbnail-wrapper rounded overflow-hidden">
+                <img src="/img/deleted.png" alt="{{ .Title }}" class="img-fluid object-fit-cover w-100 h-100" loading="lazy" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="card-body p-0">
+          <!-- Replicate the thumbnail-tt structure -->
+          <p class="text-truncate mb-0">
+            <span class="fw-bold text-body-secondary text-decoration-none">{{ .Title }}</span>
+          </p>
+          <!-- Replicate the thumbnail-at structure -->
+          <div class="d-flex align-items-center mt-1">
             <img src="/img/deleted.png" class="rounded-circle me-1" style="width: 24px; height: 24px" />
             <span class="text-muted">Deleted or Private</span>
           </div>
         </div>
-      </div>
-    </div>
-  </div>
-  {{- else if .ID }}
-  <div class="col">
-    <div class="card h-100 border-0 bg-transparent">
-      {{ include "thumbnail-dt" . }}
-      <div class="card-body p-0">
-        {{ include "thumbnail-tt" . }}
-        {{- if isFirstPathPart (CurrentPath, "/users") == false }}
-          {{ include "thumbnail-at" . }}
-        {{- end }}
-      </div>
+      {{- else if .ID }}
+        {{ include "thumbnail-dt" . }}
+        <div class="card-body p-0">
+          {{ include "thumbnail-tt" . }}
+          {{- if isFirstPathPart (CurrentPath, "/users") == false || isLastPathPart (CurrentPath, "/bookmarks") == true }}
+            {{ include "thumbnail-at" . }}
+          {{- end }}
+        </div>
+      {{- end }}
     </div>
   </div>
-  {{- end }}
 {{- end }}

server/template/templateFunctions.go

@@ -321,6 +321,27 @@ func IsFirstPathPart(currentPath, pathToCheck string) bool {
 	return "/"+parts[1] == pathToCheck
 }
 
+// IsLastPathPart checks if the last part of the current path matches the given path
+func IsLastPathPart(currentPath, pathToCheck string) bool {
+	// Trim any trailing slashes from both paths
+	currentPath = strings.TrimRight(currentPath, "/")
+	pathToCheck = strings.TrimRight(pathToCheck, "/")
+
+	// Split the current path into parts
+	parts := strings.Split(currentPath, "/")
+
+	// Check if there is at least one part
+	if len(parts) < 1 {
+		return false
+	}
+
+	// Get the last part
+	lastPart := parts[len(parts)-1]
+
+	// Compare the last path part with the pathToCheck
+	return "/"+lastPart == pathToCheck
+}
+
 var (
 	furiganaPattern = regexp.MustCompile(`\[\[rb:\s*(.+?)\s*>\s*(.+?)\s*\]\]`)
 	chapterPattern  = regexp.MustCompile(`\[chapter:\s*(.+?)\s*\]`)
@@ -431,6 +452,7 @@ func GetTemplateFunctions() map[string]any {
 		"unfinishedQuery": UnfinishedQuery,
 		"replaceQuery":    ReplaceQuery,
 		"isFirstPathPart": IsFirstPathPart,
+		"isLastPathPart":  IsLastPathPart,
 		// TODO: what is AttrGen for
 		// "AttrGen": SwitchButtonAttributes,
 	}