Add asset pipeline and professionalize theme

Introduce a Node build system for minified CSS/JS with content hashes,
add PWA support, i18n helpers, accessibility improvements, and more
translatable strings. Move theme configuration from bookmarks to
localStorage, add Playwright tests, and set up CI workflows.

shaarli-pro/css/custom_views.css

@@ -1777,4 +1777,15 @@ color: var(--note-card-fg, var(--tile-text));
 .note-card[class*="note-color-"] .todo-checklist-preview-item,
 .note-card[class*="note-color-"] .todo-checklist-preview-text {
 color: var(--note-card-fg, var(--special-view-strong));
-}
+}
+/* ===== Reduced motion ===== */
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}

shaarli-pro/css/style.css

@@ -1,11 +1,31 @@
-/* Google Font */
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
-
 /**
  * Shaarli Professional Theme - Bookmarkify Style
  * Modern Sidebar Layout + Light/Dark Mode
+ *
+ * Google Fonts are loaded via <link> in includes.html for better performance.
  */
 
+/* ===== Skip link ===== */
+.skip-link {
+    position: absolute;
+    top: -100%;
+    left: 1rem;
+    z-index: 10000;
+    padding: 0.5rem 1rem;
+    background: var(--primary);
+    color: #fff;
+    border-radius: 0.375rem;
+    text-decoration: none;
+    font-weight: 500;
+    transition: top 0.2s ease;
+}
+
+.skip-link:focus {
+    top: 1rem;
+    outline: 2px solid #fff;
+    outline-offset: 2px;
+}
+
 /* ===== CSS Variables ===== */
 :root {
     /* Light Mode */
@@ -35,7 +55,7 @@
     --tag-bg: #e0e7ff;
     --tag-text: #4338ca;
     --tag-green-bg: #d1fae5;
-    --tag-green-text: #065f46;
+    --tag-green-text: #064e3b;
     --tag-red-bg: #fee2e2;
     --tag-red-text: #991b1b;
     --tag-yellow-bg: #fef3c7;
@@ -4693,4 +4713,48 @@ body.view-archive {
     background: color-mix(in srgb, var(--tile-bg) 70%, var(--primary) 30%);
     border-bottom: 1px solid var(--tile-border);
     color: var(--on-primary, var(--text-main));
+}
+
+/* ===== Reduced motion ===== */
+@media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        transition-duration: 0.01ms !important;
+        scroll-behavior: auto !important;
+    }
+}
+
+/* ===== High contrast mode ===== */
+@media (prefers-contrast: more) {
+    :root {
+        --text-main: #000000;
+        --text-secondary: #000000;
+        --text-muted: #000000;
+        --border: #000000;
+        --primary: #0000ee;
+        --primary-hover: #0000cc;
+    }
+
+    [data-theme="dark"] {
+        --text-main: #ffffff;
+        --text-secondary: #ffffff;
+        --text-muted: #ffffff;
+        --border: #ffffff;
+        --primary: #ffff00;
+        --primary-hover: #ffff00;
+    }
+
+    a {
+        text-decoration: underline;
+    }
+
+    .link-outer,
+    .card,
+    .btn,
+    .form-control {
+        border-width: 2px;
+    }
 }