custom.css
... ...
@@ -203,15 +203,40 @@ table { width: 100% !important; border-collapse: collapse !important; }
203 203
th, td { border: 1px solid var(--border) !important; padding: .6rem .7rem !important; }
204 204
pre { background: var(--code-bg) !important; padding: 1rem 1.2rem !important; border-radius: 6px !important; overflow: auto !important; }
205 205
206
-/* ===== Corner image in nav ===== */
207
-.gollum-header nav::before {
208
- content: "";
209
- display: inline-block;
210
- width: 32px; /* shrunk version of 128x128 */
211
- height: 32px;
212
- margin-right: 0.6rem;
213
- background-image: url("/images/akret_cover.jpg");
214
- background-size: cover;
215
- background-repeat: no-repeat;
216
- border-radius: 4px; /* soften edges */
206
+/* --- Make the "Home" button a clickable image --- */
207
+#minibutton-home {
208
+ /* size the button to the image */
209
+ width: 48px;
210
+ height: 48px;
211
+ padding: 0 !important;
212
+
213
+ /* show the cover art */
214
+ background: url("/images/akret_cover.jpg") center / cover no-repeat;
215
+
216
+ /* keep Primer button look (border/radius), but minimize chrome */
217
+ border-radius: 6px;
218
+ line-height: 0; /* collapse text height */
219
+ display: inline-flex;
220
+ align-items: center;
221
+ justify-content: center;
222
+
223
+ /* visually hide text but keep it for screen readers */
224
+ color: transparent !important;
225
+ text-shadow: none !important;
226
+ overflow: hidden;
217 227
}
228
+
229
+/* Focus/hover states for keyboard + mouse */
230
+#minibutton-home:focus,
231
+#minibutton-home:hover {
232
+ outline: 2px solid rgba(155,182,255,.6);
233
+ outline-offset: 2px;
234
+}
235
+
236
+/* Optional: smaller on phones */
237
+@media (max-width: 720px) {
238
+ #minibutton-home { width: 26px; height: 26px; border-radius: 3px; }
239
+}
240
+
241
+/* If the surrounding nav compresses, keep the icon from shrinking */
242
+nav.actions #minibutton-home { flex: 0 0 auto; }