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).
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 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é.

2.9 KiB Raw Permalink Blame History