syoul/librodrome
1
0
Fork 0
forked from LPK/librodrome
Code Pull Requests Activity

design : accueil en trois variantes (console, parcours, établi) + couleur par axe

Browse Source 
- typo : Bricolage Grotesque (titres) + Atkinson Hyperlegible (texte),
  Syne gardée pour le logo seul ; une seule source de polices (Bunny)
- palettes : teinte propre à chaque axe dans les 4 ambiances ;
  pages d'axe en axis-scope, cartes sans bordure (canon design)
- accueil : console des trois curseurs (tablist clavier), boîte à outils,
  bloc format éditorial + événement + reproduction ; ?v=a|b|c|0
- numérique : carte LPK ; bouquet rendu avec statut et légende
- messages : sans bordure, deux colonnes en grand écran

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Yvv
2026-09-28 10:15:46 +02:00
co-authored by Claude Opus 5.5
parent c3ada04e52
commit e9fce4be8f
29 changed files with 2901 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/home/HomeMessages.vue
+29 -15
View File
@@ -1,6 +1,6 @@
<template>
<section class="section-padding">
<div class="container-content mx-auto max-w-3xl">
<section class="messages-section">
<div class="container-content messages-grid">
<!-- Formulaire -->
<UiScrollReveal>
@@ -49,8 +49,8 @@
<!-- 2 derniers messages publiés -->
<UiScrollReveal v-if="messages?.length" :delay="100">
<div class="mt-8 space-y-4">
<h3 class="font-display text-lg font-bold section-title text-center">Derniers messages</h3>
<div class="space-y-4">
<h3 class="font-display text-lg font-bold section-title">Derniers messages</h3>
<div v-for="msg in messages.slice(0, 2)" :key="msg.id" class="message-card">
<!-- En-tête auteur -->
<div class="flex items-center gap-2 mb-2">
@@ -72,7 +72,7 @@
</div>
</div>
</div>
<div class="text-center">
<div>
<NuxtLink to="/messages" class="btn-ghost text-sm">
Voir tous les messages
<div class="i-lucide-arrow-right ml-1 h-3.5 w-3.5" />
@@ -150,24 +150,39 @@ function formatDate(iso: string) {
.reply-author { color: hsl(var(--color-primary) / 0.8); }
.reply-text { color: hsl(var(--color-text) / 0.62); }
/* ── Mise en page ── */
.messages-section {
padding: clamp(3rem, 7vw, 5.5rem) 1rem 2rem;
}
.messages-grid {
display: grid;
gap: 2rem;
align-items: start;
}
@media (min-width: 1024px) {
.messages-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}
/* ── Carte formulaire ── */
.message-form-card {
background: hsl(var(--color-surface));
border: 1px solid hsl(var(--color-text) / 0.1);
border-radius: 0.75rem;
border-radius: 16px;
padding: 1.5rem;
}
.msg-input {
width: 100%;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
border: 1px solid hsl(var(--color-text) / 0.12);
min-height: 2.5rem;
padding: 0.55rem 0.85rem;
border-radius: 12px;
border: none;
background: hsl(var(--color-bg));
color: hsl(var(--color-text));
font-size: 0.875rem;
font-size: 0.95rem;
font-family: inherit;
transition: border-color 0.2s;
transition: box-shadow 0.2s;
}
.msg-input--select {
@@ -181,14 +196,13 @@ function formatDate(iso: string) {
.msg-input:focus {
outline: none;
border-color: hsl(var(--color-primary) / 0.5);
box-shadow: 0 0 0 2px hsl(var(--color-primary) / 0.5);
}
/* ── Carte message ── */
.message-card {
background: hsl(var(--color-surface));
border: 1px solid hsl(var(--color-text) / 0.1);
border-radius: 0.75rem;
border-radius: 16px;
padding: 1rem 1.25rem;
}