78 lines
2.9 KiB
Markdown
78 lines
2.9 KiB
Markdown
# 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)
|