feat(theme): add local custom CSS and logos

Add organisation-specific theming support with local static assets
instead of remote CDN.

* Add custom CSS files for aoste, fictive, global, and highlands
  organisations
* Add corresponding logo SVG files for each organisation
* Configure RERO_ILS_THEME_ORGANISATION_CSS_ENDPOINT to use local
  /static/themes/css/ endpoint

Each organisation CSS customizes header background colors, logo
display, and responsive layouts for mobile devices.

Co-Authored-by: Peter Weber <[email protected]>

Author: rerowep

pyproject.toml

@@ -91,7 +91,7 @@ dependencies = [
     "flask-admin (>=1.6.1,<2.0.0)",
     # needed for name unique in invenio-accounts
     "wtforms (<3.2.0)",
-    "invenio-sip2[sip2]>0.6.25",
+    "invenio-sip2>0.6.25",
 ]
 
 [project.optional-dependencies]

rero_ils/config.py

@@ -275,9 +275,9 @@ def _(x):
 THEME_SETTINGS_TEMPLATE = SETTINGS_TEMPLATE
 #: Template for error pages.
 THEME_ERROR_TEMPLATE = "rero_ils/page_error.html"
-# External CSS for each organisation customization
-# For production: change "test" with "prod" on url
-RERO_ILS_THEME_ORGANISATION_CSS_ENDPOINT = "https://resources.rero.ch/bib/test/css/"
+#: Local path for organisation-specific CSS customization files.
+#: CSS files are served from static assets (e.g., aoste.css, global.css).
+RERO_ILS_THEME_ORGANISATION_CSS_ENDPOINT = "/static/themes/css/"
 #: Template for including a tracking code for web analytics.
 THEME_TRACKINGCODE_TEMPLATE = "rero_ils/trackingcode.html"
 THEME_JAVASCRIPT_TEMPLATE = "rero_ils/javascript.html"

rero_ils/theme/static/themes/css/aoste.css

@@ -0,0 +1,38 @@
+@layer bootstrap {
+  body#view-aoste nav.rero-ils-header {
+    background-color: #ffd7d7 !important;
+  }
+
+  body#view-aoste nav.rero-ils-header img.rero-ils-logo {
+    display: none;
+  }
+
+  div#aoste-logo::before {
+    content: url('/static/themes/images/logo-aoste.svg');
+    max-height: 44px;
+    display: block;
+  }
+
+  #view-aoste .rero-slogan {
+      margin-bottom: 4em;
+  }
+
+
+  @media (max-width: 576px) {
+      .h1, h1 {
+          font-size: 1.5rem;
+      }
+
+      .h2, h2 {
+          font-size: 1.2rem;
+      }
+
+      #view-aoste .rero-ils-frontpage {
+          height: 20vh;
+      }
+
+      #view-aoste .rero-slogan {
+          margin-bottom: 1em;
+      }
+  }
+}

rero_ils/theme/static/themes/css/fictive.css

@@ -0,0 +1,38 @@
+@layer bootstrap {
+  body#view-fictive nav.rero-ils-header {
+    background-color: #4f009e !important;
+  }
+
+  body#view-fictive nav.rero-ils-header img.rero-ils-logo {
+    display: none;
+  }
+
+  div#fictive-logo::before {
+    content: url('/static/themes/images/logo-fictive.svg');
+    max-height: 44px;
+    display: block;
+  }
+
+  #view-fictive .rero-slogan {
+      margin-bottom: 4em;
+  }
+
+
+  @media (max-width: 576px) {
+      .h1, h1 {
+          font-size: 1.5rem;
+      }
+
+      .h2, h2 {
+          font-size: 1.2rem;
+      }
+
+      #view-fictive .rero-ils-frontpage {
+          height: 20vh;
+      }
+
+      #view-fictive .rero-slogan {
+          margin-bottom: 1em;
+      }
+  }
+}

rero_ils/theme/static/themes/css/global.css

@@ -0,0 +1,39 @@
+@layer bootstrap {
+  body#view-global nav.rero-ils-header {
+    background-color: #1b4464 !important;
+  }
+
+  body#view-global nav.rero-ils-header img.rero-ils-logo {
+    display: none;
+  }
+
+  div#global-logo::before {
+    content: url('/static/themes/images/logo-global.svg');
+    min-height: 44px;
+    max-height: 44px;
+    min-width: 58px;
+    display: block;
+  }
+
+  #view-global .rero-slogan {
+      margin-bottom: 4em;
+  }
+
+  @media (max-width: 576px) {
+      .h1, h1 {
+          font-size: 1.5rem;
+      }
+
+      .h2, h2 {
+          font-size: 1.2rem;
+      }
+
+      #view-global .rero-ils-frontpage {
+          height: 20vh;
+      }
+
+      #view-global .rero-slogan {
+          margin-bottom: 1em;
+      }
+  }
+}

rero_ils/theme/static/themes/css/highlands.css

@@ -0,0 +1,38 @@
+@layer bootstrap {
+  body#view-highlands nav.rero-ils-header {
+    background-color: #333333 !important;
+  }
+
+  body#view-highlands nav.rero-ils-header img.rero-ils-logo {
+    display: none;
+  }
+
+  div#highlands-logo::before {
+    content: url('/static/themes/images/logo-highlands.svg');
+    max-height: 44px;
+    display: block;
+  }
+
+  #view-highlands .rero-slogan {
+      margin-bottom: 4em;
+  }
+
+
+  @media (max-width: 576px) {
+      .h1, h1 {
+          font-size: 1.5rem;
+      }
+
+      .h2, h2 {
+          font-size: 1.2rem;
+      }
+
+      #view-highlands .rero-ils-frontpage {
+          height: 20vh;
+      }
+
+      #view-highlands .rero-slogan {
+          margin-bottom: 1em;
+      }
+  }
+}