docs: documentation fonctionnelle, technique et installation

2026-07-05 10:58:29 +02:00
parent 61fb56fa14
commit 64c53f412d
12 changed files with 1452 additions and 0 deletions
@@ -0,0 +1,77 @@
+# Interface
+
+L'interface de Pena se compose de deux vues principales — l'**accueil** et le **lecteur** —
+surmontées d'une **barre de titre personnalisée** toujours visible.
+
+## Barre de titre personnalisée
+
+La décoration native de la fenêtre est désactivée ; Pena fournit sa propre barre de titre
+en haut de la fenêtre (hauteur 36 px, fond sombre).
+
+| Élément | Comportement |
+|---|---|
+| Titre | Affiche « Pena — Markdown Viewer » sur l'accueil, ou le titre du document ouvert dans le lecteur. |
+| Zone de titre | Glisser-déposer pour déplacer la fenêtre. |
+| Bouton **─** | Réduit la fenêtre. |
+| Bouton **▢** | Agrandit la fenêtre, ou la restaure si elle est déjà agrandie. |
+| Bouton **✕** | Ferme l'application (devient rouge au survol). |
+
+## Vue d'accueil
+
+C'est l'écran affiché au démarrage et quand on revient via « ← Accueil ».
+
+Elle contient :
+
+- Le **titre « Pena »** en grand.
+- Deux boutons d'action :
+  - **« Ouvrir un fichier Markdown »**
+  - **« Ouvrir un dossier wiki »**
+- Une section **« Récents »** (visible uniquement s'il y a des documents récents) listant les
+  derniers fichiers et dossiers ouverts, cliquables pour les rouvrir.
+
+## Vue lecteur
+
+Affichée dès qu'un document est ouvert. Elle est composée de deux zones :
+
+### Barre latérale (gauche)
+- Largeur fixe (264 px), fond sombre.
+- En haut : le **nom du dossier** ouvert.
+- Au centre : l'**arborescence des fichiers** `.md` (voir
+  [Navigation](1.2-Fonctionnalites.md#3-navigation-dans-la-documentation)).
+- En bas (pied de barre) : deux boutons —
+  - **« Personnaliser CSS »** (ouvre la modale de thèmes / CSS) ;
+  - **« ← Accueil »** (revient à l'écran d'accueil).
+
+### Zone de contenu (droite)
+- Affiche le document Markdown rendu en HTML.
+- Fond clair, typographie soignée, largeur de lecture limitée pour le confort.
+- Chaque bloc de code possède un bouton **« Copier »**.
+
+### Comportement responsive
+- Sur les fenêtres larges, la barre latérale est visible en permanence à gauche.
+- Sous ~1020 px de large, la barre latérale se rétracte et le contenu occupe toute la largeur.
+- Sous ~540 px, les marges du contenu sont réduites.
+
+## Modale de personnalisation CSS
+
+Ouverte via le bouton « Personnaliser CSS » de la barre latérale. Voir la page dédiée
+[Thèmes et personnalisation](1.4-Themes-et-personnalisation.md) pour le détail.
+
+Elle se ferme via la croix, le bouton « Fermer », ou un clic en dehors de la modale.
+
+## Palette visuelle
+
+| Rôle | Usage |
+|---|---|
+| Fond sombre | Barre de titre, barre latérale |
+| Fond clair | Zone de contenu |
+| Accent rose/corail | Boutons, survols, liens d'action, bordures de tableaux |
+| Accent indigo | Élément actif dans la barre latérale |
+
+> L'ensemble de ces couleurs peut être surchargé par l'utilisateur via les thèmes rapides ou
+> le CSS personnalisé.
+
+## Voir aussi
+
+- [Fonctionnalités](1.2-Fonctionnalites.md)
+- [Thèmes et personnalisation](1.4-Themes-et-personnalisation.md)