Ajout logo Alpinux, page communication, typographie A[l]p[inux] Segoe UI

This commit is contained in:
Wiki Alpinux 2026-05-02 22:39:54 +02:00
parent 8e6345aaba
commit 2fa0fe0da9
5 changed files with 121 additions and 1 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

View file

@ -0,0 +1,91 @@
# Communication & Identité visuelle
Cette page réunit les éléments de l'identité visuelle d'<span class="alpinux-brand">A<strong>l</strong>p<strong>inux</strong></span> pour faciliter la création de supports de communication cohérents.
---
## Logo
<div style="text-align:center; margin: 2rem 0;">
<img src="../assets/alpinux-logo.png" alt="Logo Alpinux" style="max-width:200px; border-radius:8px;">
</div>
Le logo d'<span class="alpinux-brand">A<strong>l</strong>p<strong>inux</strong></span> représente Tux, la mascotte de Linux, devant une silhouette de montagne évoquant les **Alpes de Savoie**.
[Télécharger le logo (PNG 200×200)](../assets/alpinux-logo.png){ .md-button }
---
## Nom de marque
Le nom s'écrit : <span class="alpinux-brand" style="font-size:1.4rem;">A<strong>l</strong>p<strong>inux</strong></span>
- Police : **Segoe UI** (ou équivalent système)
- Les lettres **l** et **inux** sont en gras
- Les lettres **A** et **p** sont en poids normal
!!! warning "À éviter"
- Écrire "ALPINUX" tout en majuscules seul (sans le logo)
- Modifier les couleurs du logo
- Déformer les proportions du logo
---
## Palette de couleurs
<div style="display:flex; gap:1rem; flex-wrap:wrap; margin:1.5rem 0;">
<div style="background:#1a6bbf; color:#fff; padding:1rem 1.5rem; border-radius:8px; min-width:140px; text-align:center;">
<strong>#1a6bbf</strong><br><small>Bleu principal</small>
</div>
<div style="background:#0f4e8f; color:#fff; padding:1rem 1.5rem; border-radius:8px; min-width:140px; text-align:center;">
<strong>#0f4e8f</strong><br><small>Bleu foncé</small>
</div>
<div style="background:#e8f1fb; color:#0f4e8f; padding:1rem 1.5rem; border-radius:8px; min-width:140px; text-align:center;">
<strong>#e8f1fb</strong><br><small>Bleu clair</small>
</div>
<div style="background:#e8820c; color:#fff; padding:1rem 1.5rem; border-radius:8px; min-width:140px; text-align:center;">
<strong>#e8820c</strong><br><small>Orange accent</small>
</div>
<div style="background:#1a1a2e; color:#fff; padding:1rem 1.5rem; border-radius:8px; min-width:140px; text-align:center;">
<strong>#1a1a2e</strong><br><small>Texte sombre</small>
</div>
</div>
---
## Typographie
| Usage | Police | Grammage |
|---|---|---|
| Titres & navigation | Segoe UI | 600700 |
| Corps de texte | Segoe UI | 400 |
| Code & commandes | Roboto Mono | 400 |
---
## Slogan
> **Le LUG de Savoie**
---
## Présence en ligne
| Plateforme | Lien |
|---|---|
| Site principal | [alpinux.org](https://alpinux.org) |
| Portail membres | [portail.alpinux.org](https://portail.alpinux.org) |
| Wiki | [wiki.alpinux.org](https://wiki.alpinux.org) |
| Gitea (code) | [gitea.alpinux.org](https://gitea.alpinux.org) |
| Mastodon | [@alpinux@mamot.fr](https://mamot.fr/@alpinux) |
---
## Modèles de présentation
Pour créer une présentation aux couleurs d'<span class="alpinux-brand">A<strong>l</strong>p<strong>inux</strong></span> :
- Fond : `#f3f6fb` (bleu très clair) ou blanc `#ffffff`
- Titre principal : `#0f4e8f` en **Segoe UI Bold**
- Accent / mots-clés : `#1a6bbf`
- Code : fond `#1e293b`, texte clair en **Roboto Mono**

View file

@ -16,8 +16,28 @@
/* Brand text */ /* Brand text */
.md-header__title { .md-header__title {
font-family: 'Segoe UI', system-ui, sans-serif;
letter-spacing: .02em;
}
/* A[l]p[inux] brand typography */
.alpinux-brand-header {
font-weight: 400;
font-size: 1.1rem;
}
.alpinux-brand-header strong {
font-weight: 700;
}
/* Brand in page content */
.alpinux-brand {
font-family: 'Segoe UI', system-ui, sans-serif;
font-weight: 400;
}
.alpinux-brand strong {
font-weight: 700; font-weight: 700;
letter-spacing: .04em;
} }
/* Tabs bar */ /* Tabs bar */

View file

@ -23,6 +23,7 @@ theme:
- search.suggest - search.suggest
- content.code.copy - content.code.copy
- content.code.select - content.code.select
logo: assets/alpinux-logo.png
font: font:
text: Roboto text: Roboto
code: Roboto Mono code: Roboto Mono
@ -89,3 +90,4 @@ nav:
- technique/serveur-debian.md - technique/serveur-debian.md
- technique/bigbluebutton.md - technique/bigbluebutton.md
- technique/ateliers.md - technique/ateliers.md
- Communication: communication/index.md

7
overrides/main.html Normal file
View file

@ -0,0 +1,7 @@
{% extends "base.html" %}
{% block site_name %}
<span class="md-ellipsis alpinux-brand-header">
A<strong>l</strong>p<strong>inux</strong>
</span>
{% endblock %}