[Documentation] Update theme color and improve some pages

docs/changelog.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 3.24.3+dev (XXXX-XX-XX)
+
+**Documentation**
+
+- Update theme color and improve customization section(#1364)
+
 ## 3.24.3 (2025-02-03)
 
 **🔧 Maintenance**

docs/customization/customization-introduction.md

@@ -9,37 +9,73 @@ After each customization changes, you'll have to restart the Docker container by
 
 ## Main sections
 
-[**Introduction to customization**](./customization-introduction.md)
+<div class="grid cards" markdown>
 
-General introduction with instructions to restart the Docker container after each customization change.
+-   :material-brush-outline:{ .lg .middle } __Introduction__
 
-[**Customization of settings**](./customization-settings.md)
+    ---
 
-Detailed explanations for configuration files (`global.json`, `header.json`, `home.json`, etc.) with examples of overriding default values.
+    General introduction with instructions to restart the Docker container after each customization change.
 
-[**Themes and styles**](./customization-themestyles.md)
+    [:octicons-arrow-right-24: Getting started](./customization-introduction.md)
 
-Detailed instructions on modifying colors, CSS, and menu structure, including specific classes (`custo-*`).
+-   :material-palette-swatch:{ .lg .middle } __Customization of settings__
 
-[**Icons customization**](./customization-icons.md)
+    ---
 
-Detailed instructions on modifying icons.
+    Detailed explanations for configuration files (`global.json`, `header.json`, `home.json`, etc.) with examples of overriding default values.
 
-[**Translation customization**](./customization-translation.md)
+    [:octicons-arrow-right-24: Customization of settings](./customization-settings.md)
 
-Explanation of translation files, overriding texts, and managing languages.
+-   :material-palette-outline:{ .lg .middle } __Themes and styles__
 
-[**HTML pages and scripts customization**](./customization-htmlscripts.md)
+    ---
 
-Detailed instructions on using HTML templates and custom scripts.
+    Detailed instructions on modifying colors, CSS, and menu structure, including specific classes (`custo-*`).
 
-[**GDPR**](./customization-gdpr.md)
+    [:octicons-arrow-right-24: Themes and styles](./customization-themestyles.md)
 
-Specific documentation on setting up Google Analytics, including alerts and data privacy management.
+-   :material-walk:{ .lg .middle } __Icons__
 
-[**Media and manifest.json management**](./customization-mediamanagement.md)
+    ---
 
-Explanation on managing images, favicons, splash screens, and configuring the `manifest.json` file.
+    Detailed instructions on modifying icons.
+
+    [:octicons-arrow-right-24: Icons](./customization-icons.md)
+
+-   :material-web:{ .lg .middle } __Translation__
+
+    ---
+
+    Explanation of translation files, overriding texts, and managing languages.
+
+    [:octicons-arrow-right-24: Translation](./customization-translation.md)
+
+-   :material-file-code-outline:{ .lg .middle } __HTML pages and scripts__
+
+    ---
+
+    Detailed instructions on using HTML templates and custom scripts.
+
+    [:octicons-arrow-right-24: HTML pages and scripts](./customization-htmlscripts.md)
+
+-   :material-google-analytics:{ .lg .middle } __GDPR__
+
+    ---
+
+    Specific documentation on setting up Google Analytics, including alerts and data privacy management.
+
+    [:octicons-arrow-right-24: GDPR](./customization-gdpr.md)
+
+-   :material-image:{ .lg .middle } __Media and manifest management__
+
+    ---
+
+    Explanation on managing images, favicons, splash screens, and configuring the `manifest.json` file.
+
+    [:octicons-arrow-right-24: Media and manifest management](./customization-mediamanagement.md)
+
+</div>
 
 ## Apply changes
 

docs/index.md

@@ -3,9 +3,9 @@
 ![Search](img/home_ecrins.png)
 
 Geotrek-rando is the public web application displaying the interface you can use to value your territory treks and tourism products! 
-Demo available at [https://gtr3demo.ecrins-parcnational.fr](https://gtr3demo.ecrins-parcnational.fr).
+Demo available at [gtr3demo.ecrins-parcnational.fr](https://gtr3demo.ecrins-parcnational.fr).
 
 The third version is a full redesign and rewriting of Geotrek-rando with React, and NextJS for Server side rendering (SSR) and SEO.
 
-Geotrek-rando is directly connected to Geotrek-admin v2 API.
+Geotrek-rando is directly connected to [Geotrek-admin](https://github.com/GeotrekCE/Geotrek-admin) v2 API.
 

docs/installation.md

@@ -1,12 +1,13 @@
 # Installation
 
-Install Geotrek-rando on your own computer or server.
+!!! note "Install Geotrek-rando on your own computer or server."
 
 ## Environnements variables
 
-Whichever installation you choose below, you can set some environment variables related to your project.  
-If you follow the [Install with Docker (recommended)](#install-with-docker-recommended) section you can create the optional `.env` file based on the example (`cp .env.example .env`),
-If you follow the [Install without Docker (not recommended)](#install-without-docker-not-recommended) section you can modify `.env.production` file.
+Whichever installation you choose below, you can set some environment variables related to your project. 
+
+- If you follow the [Install with Docker (recommended)](#install-with-docker-recommended) section, you can create the optional `.env` file based on the example (`cp .env.example .env`).
+- If you follow the [Install without Docker (not recommended)](#install-without-docker-not-recommended) section, you can modify `.env.production` file.
 
 ### Sentry
 

docs/presentation-fr.md

@@ -1,6 +1,6 @@
 # Présentation
 
-Geotrek-rando est une PWA (Progressive Web App) permettant de mettre en ligne un portail web adapté aux différentes tailles d'écran, dont ceux des appareils mobiles (responsive design).
+Geotrek-rando est une PWA (`Progressive Web App`) permettant de mettre en ligne un portail web adapté aux différentes tailles d'écran, dont ceux des appareils mobiles (responsive design).
 Une PWA est aussi installable sur un appareil mobile directement depuis le navigateur (sans passer par les magasins d'applications Android, Apple et autres) et permet alors une expérience mobile enrichie, avec notamment du contenu disponible hors-ligne.
 
 Cliquer sur [ce lien](https://fr.wikipedia.org/wiki/Progressive_web_app) pour en savoir plus sur les PWA.

mkdocs/mkdocs.yml

@@ -42,16 +42,16 @@ theme:
       toggle:
         icon: material/weather-sunny
         name: Dark mode
-      primary: green
-      accent: light green
+      primary: blue
+      accent: light blue
   # Light Mode
     - media: "(prefers-color-scheme: light)"
       scheme: default
       toggle:
         icon: material/weather-night
         name: Light mode
-      primary: green
-      accent: light green
+      primary: blue
+      accent: light blue
   font:
     text: Roboto
     code: Roboto Mono
@@ -92,6 +92,9 @@ markdown_extensions:
   - def_list
   - footnotes
   - md_in_html
+  - pymdownx.emoji:
+      emoji_index: !!python/name:material.extensions.emoji.twemoji
+      emoji_generator: !!python/name:material.extensions.emoji.to_svg
   - toc:
       permalink: true
   - pymdownx.highlight:
@@ -131,6 +134,10 @@ markdown_extensions:
   #     custom_checkbox: true
   # - pymdownx.tilde
 
+plugins:
+  - git-revision-date-localized:
+      enable_creation_date: true
+
 # Page tree
 nav:
   - Home: index.md

mkdocs/requirements.txt

@@ -33,3 +33,4 @@ colorama~=0.4
 paginate~=0.5
 regex>=2022.4
 requests~=2.26
+mkdocs-git-revision-date-localized-plugin~=1.3.0