style(css): ajustements visuels

docs(features): raccourcir texte de la carte 'Installation simplifiée'
feat(features): améliorer comportement hover et état initial des cartes
2026-05-27 22:27:33 +02:00 · 2026-05-27 22:27:20 +02:00 · 2026-05-27 22:27:13 +02:00 · 2026-05-27 21:44:47 +02:00 · 2026-05-27 21:44:33 +02:00 · 2026-05-27 21:42:41 +02:00
7 changed files with 242 additions and 171 deletions
@@ -7,7 +7,7 @@
  <meta name="description"
    content="Site statique one-page avec navigation par URL et chargement dynamique du contenu." />
  <title>Fws Web</title>
-  <link rel="stylesheet" href="p/assets/main-styles/styles.css" />
+  <link rel="stylesheet" href="p/assets/styles/styles.css" />
 </head>
 <body>
@@ -70,14 +70,14 @@
        <div class="footer-bottom">
          <p>© <span id="footer-year">2026</span> Fws Linux</p>
-          <p class="footer-release">Dernière release : non affichée</p>
+
          <p class="footer-commit">Dernier commit : non affiché</p>
        </div>
      </div>
    </footer>
  </div>
  <script src="p/assets/main-nav/app.js"></script>
  <script src="p/assets/main-nav/feature-cards.js"></script>
 </body>
 </html>
@@ -1,129 +0,0 @@
@import "./var.css";
 .hero,
 .card {
  backdrop-filter: blur(18px);
  background: var(--bg-soft);
  box-shadow: var(--shadow);
 }
 .hero {
  padding: clamp(1.5rem, 3vw, 2.75rem);
 }
 .eyebrow {
  margin: 0 0 0.75rem;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.78rem;
  font-weight: 700;
 }
 .hero h1,
 .card h2 {
  font-family: "Georgia", "Palatino Linotype", serif;
 }
 .hero h1 {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  line-height: 0.98;
  max-width: 12ch;
 }
 .lead {
  max-width: 62ch;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.7;
  margin: 1rem 0 0;
 }
 .lead span,
 .card span {
  color: var(--text);
 }
 .release-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.35rem 0 0;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 700;
 }
 .release-badge span {
  color: var(--text);
 }
 .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
 }
 .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.2rem;
  text-decoration: none;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 999px;
  font-weight: 700;
  transition:
    transform 160ms ease,
    background 160ms ease,
    color 160ms ease,
    border-color 160ms ease;
 }
 .button:hover {
  transform: translateY(-1px);
 }
 .button-primary {
  color: #08101d;
  background: linear-gradient(145deg, var(--accent), var(--accent-strong));
 }
 .button-secondary {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
 }
 .grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
 }
 .card {
  padding: 1.25rem;
 }
 .card h2 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.45rem;
 }
 .card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
 }
@media (max-width: 900px) {
  .grid {
    grid-template-columns: 1fr;
  }
 }
@@ -0,0 +1,205 @@
@import "./var.css";
 :root {
  --main-max: 1200px;
 }
 main[data-page-content] {
  margin: 0 auto;
  max-width: var(--main-max);
  padding: 2rem 1.25rem;
  box-sizing: border-box;
 }
 .grid { display: block; }
 .hero {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: var(--shadow);
  border-radius: 1rem;
  padding: clamp(2rem, 4.5vw, 3.5rem);
  color: var(--text);
 }
 .hero-inner { width: 100%; }
 .eyebrow {
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
 }
 .hero-title {
  font-family: "Georgia", "Palatino Linotype", serif;
  font-size: clamp(3rem, 8vw, 5rem);
  line-height: 0.95;
  margin: 0 0 0.25rem;
  color: var(--text);
 }
 .hero-subtitle {
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  color: var(--muted);
  margin: 0 0 1rem;
  font-weight: 600;
 }
 .lead {
  color: var(--muted);
  max-width: 68ch;
  margin: 0 0 1.25rem;
 }
 .hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
 }
 .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid transparent;
 }
 .button-primary {
  background: linear-gradient(145deg, var(--accent), var(--accent-strong));
  color: #08101d;
 }
 .button-secondary {
  background: rgba(255,255,255,0.03);
  color: var(--text);
 }
 .features {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: stretch;
 }
 .features .card {
  flex: 1 1 0;
  min-width: 0;
  min-height: 11rem;
  background: rgba(255,255,255,0.02);
  padding: 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 8px 22px rgba(2,6,23,0.45);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 220ms ease, box-shadow 220ms ease, opacity 220ms ease;
 }
 .features .card h2 {
  margin: 0;
  font-family: "Georgia", serif;
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  line-height: 1.1;
  transition: transform 220ms ease;
 }
 .features .card p {
  margin: 0;
  font-size: clamp(0.95rem, 1.05vw, 1.08rem);
  line-height: 1.6;
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 1.35rem;
  padding: 0.85rem 1rem;
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 180ms ease, transform 220ms ease;
  pointer-events: none;
 }
 .features:not(:hover) .card:first-child,
 .features .card:first-child:hover,
 .features .card:first-child:focus {
  flex-grow: 2.6;
  justify-content: flex-start;
 }
 .features:not(:hover) .card:first-child p,
 .features .card:first-child:hover p,
 .features .card:first-child:focus p {
  opacity: 1;
  transform: translateY(0);
 }
 .features:hover .card:first-child:not(:hover):not(:focus) {
  flex-grow: 1;
  justify-content: center;
 }
 .features:hover .card:first-child:not(:hover):not(:focus) p {
  opacity: 0;
  transform: translateY(0.5rem);
 }
 .features .card:hover,
 .features .card:focus {
  flex-grow: 2.6;
  justify-content: flex-start;
  transform: translateY(-6px);
  box-shadow: 0 22px 60px rgba(2,6,23,0.55);
  z-index: 2;
 }
 .features .card:hover p,
 .features .card:focus p {
  opacity: 1;
  transform: translateY(0);
 }
 .features .card:focus {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
 }
@media (max-width: 980px) {
  .hero-title { font-size: clamp(2.2rem, 7vw, 4rem); }
  .features {
    flex-direction: column;
  }
  .features .card {
    cursor: default;
  }
  .features .card:hover,
  .features .card:focus {
    transform: none;
  }
  .features .card p {
    position: static;
    margin-top: 0.85rem;
    opacity: 1;
    transform: none;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: auto;
  }
 }
@@ -104,15 +104,16 @@ body::after {
 }
 .brand-mark {
-  width: 2.75rem;
+  width: 3.75rem;
-  height: 2.75rem;
+  height: 3.75rem;
  object-fit: cover;
  display: block;
 }
 .brand-text {
  display: grid;
-  line-height: 1.05;
+  /* line-height: 3.05; */
  font-size: 2.25rem;
 }
 .brand-text strong {
@@ -131,6 +132,7 @@ body::after {
 .site-nav a {
  border-radius: 999px;
  margin: auto;
  transition:
    transform 160ms ease,
    background 160ms ease,
@@ -4,7 +4,6 @@
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>DL</title>
    <link rel="stylesheet" href="../assets/main-styles/main.css" />
  </head>
  <body>
    <main data-page-content>
@@ -21,20 +20,7 @@
        </div>
      </section>
-      <section class="grid">
+
        <article class="card">
          <h2>Vrai fichier</h2>
          <p>Le HTML est bien stocké dans le dossier <span>p/</span>, pas dans le fichier principal.</p>
        </article>
        <article class="card">
          <h2>Injection</h2>
          <p>Le script lit ce fichier puis injecte uniquement le bloc portant <span>data-page-content</span>.</p>
        </article>
        <article class="card">
          <h2>Extensible</h2>
          <p>Tu peux créer d'autres dossiers comme <span>p/contact/</span> ou <span>p/about/</span>.</p>
        </article>
      </section>
    </main>
  </body>
 </html>
@@ -4,37 +4,44 @@
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Accueil</title>
-    <link rel="stylesheet" href="../assets/main-styles/main.css" />
+    <link rel="stylesheet" href="../assets/styles/main.css" />
  </head>
  <body>
    <main data-page-content>
      <section class="hero">
-        <p class="eyebrow">Navigation one-page</p>
+        <div class="hero-inner">
-        <h1>Le site change de contenu sans changer de page.</h1>
+          <h1 class="hero-title">FWS Linux</h1>
-        <p class="lead">
+          <h2 class="hero-subtitle">un système léger, libre et compatible</h2>
-          La page principale vit dans <span>p/index/index.html</span> et le script l'injecte dans le
+
-          <span>main</span> quand l'URL pointe vers <span>/?p/index/</span>.
+          <p class="lead">Open-source basé sur Arch Linux, Fws facilite la transition depuis Windows sans vous déposséder de vos données. Installation simplifiée, interface épurée, et compatibilité avec vos applications Windows grâce à Wine et Winboat — tout en restant respectueux de votre vie privée.</p>
-        </p>
+
        <p class="release-badge">Download FWS</p>
          <div class="hero-actions">
-          <a class="button button-primary" href="/?p/dl/" data-route="dl">Aller vers DL</a>
+            <a class="button button-primary" href="/?p/dl/" data-route="dl">Télécharger</a>
-          <a class="button button-secondary" href="/?p/index/" data-route="index">Rester sur l'accueil</a>
+            <a class="button button-secondary" href="/?p/contact/" data-route="contact">En savoir plus</a>
          </div>
        </div>
      </section>
-      <section class="grid">
+      <section class="features">
-        <article class="card">
+        <article class="card" tabindex="0">
-          <h2>Header commun</h2>
+          <h2>Installation simplifiée</h2>
-          <p>Le bandeau du haut reste identique sur chaque vue.</p>
+          <p>Installateur graphique pour une configuration facile et rapide.</p>
        </article>
-        <article class="card">
+        <article class="card" tabindex="0">
-          <h2>Footer commun</h2>
+          <h2>Léger et rapide</h2>
-          <p>Le pied de page reste fixe, quelle que soit la section chargée.</p>
+          <p>Conçu pour être peu gourmand en ressources : idéal pour redonner vie à d'anciens PC.</p>
        </article>
-        <article class="card">
+
-          <h2>Injection réelle</h2>
+        <article class="card" tabindex="0">
-          <p>Chaque route peut venir d'un vrai fichier <span>index.html</span> dans <span>p/</span>.</p>
+          <h2>Respect de la vie privée</h2>
          <p>Pas de télémétrie intrusive ni de collecte de données : vous gardez le contrôle.</p>
        </article>
        <article class="card" tabindex="0">
          <h2>Compatibilité Windows</h2>
          <p>Exécutez vos logiciels Windows avec Wine et Winboat sans devoir rester sous Windows.</p>
        </article>
      </section>
    </main>
  </body>
Author	SHA1	Message	Date
BlackAngelTV	4c958b448a	style(css): ajustements visuels	2026-05-27 22:27:33 +02:00
BlackAngelTV	71a5673572	docs(features): raccourcir texte de la carte 'Installation simplifiée'	2026-05-27 22:27:20 +02:00
BlackAngelTV	1303f0fbd5	feat(features): améliorer comportement hover et état initial des cartes	2026-05-27 22:27:13 +02:00
BlackAngelTV	d7e769abfd	Merge branch 'main' of https://gitea.nocode-var.tech/FWS/Web-site	2026-05-27 21:44:47 +02:00
BlackAngelTV	3c57353e25	temps	2026-05-27 21:44:33 +02:00
BlackAngelTV	1b6a961e09	feat(main): add hero content and installation copy	2026-05-27 21:42:41 +02:00