From ca4f849ddadc6492c7198c989ba60365b9ff1ac5 Mon Sep 17 00:00:00 2001 From: BlackAngelTVdev Date: Wed, 27 May 2026 21:20:03 +0200 Subject: [PATCH] feat(layout): shared shell and page styles --- index.html | 93 ++++++++---- p/assets/main-styles/main.css | 129 +++++++++++++++++ p/assets/main-styles/styles.css | 247 +++++++++++++++++--------------- p/contact/index.html | 39 +++++ p/dl/index.html | 1 + p/index/index.html | 2 + 6 files changed, 375 insertions(+), 136 deletions(-) create mode 100644 p/assets/main-styles/main.css create mode 100644 p/contact/index.html diff --git a/index.html b/index.html index 533017b..7296f41 100644 --- a/index.html +++ b/index.html @@ -1,38 +1,83 @@ - - - - - Fws Web - - - -
-
+ + + + + + Fws Web + + + + +
+
+
- F + Logo Fws Linux - Fws - Site statique + Fws Linux -
+
+
-
- -
+
+ +
-
-

Un seul index, un header, un footer, et du contenu injecté dans le main selon l'URL.

-
-
+ + + + + - - \ No newline at end of file diff --git a/p/assets/main-styles/main.css b/p/assets/main-styles/main.css new file mode 100644 index 0000000..7904585 --- /dev/null +++ b/p/assets/main-styles/main.css @@ -0,0 +1,129 @@ +@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; + } +} diff --git a/p/assets/main-styles/styles.css b/p/assets/main-styles/styles.css index 7a91665..8f9e7ae 100644 --- a/p/assets/main-styles/styles.css +++ b/p/assets/main-styles/styles.css @@ -37,7 +37,6 @@ body::after { content: ""; position: fixed; inset: auto; - border-radius: 999px; pointer-events: none; filter: blur(18px); opacity: 0.6; @@ -62,32 +61,34 @@ body::after { .page-shell { position: relative; z-index: 1; - width: min(1120px, calc(100% - 2rem)); + width: 100%; margin: 0 auto; min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; gap: 1.25rem; - padding: 1rem 0 1.25rem; -} - -.site-header, -.site-footer, -.hero, -.card { - backdrop-filter: blur(18px); - background: var(--bg-soft); - border: 1px solid var(--panel-border); - box-shadow: var(--shadow); } .site-header, .site-footer { - border-radius: 1.5rem; + backdrop-filter: blur(18px); + background: var(--bg-soft); + box-shadow: var(--shadow); +} + +.header-brand-block{ + width: 100%; + margin: 0 auto; + max-width: 1200px; + display: flex; + /* align-items: center; */ + gap: 0.85rem; + justify-content: space-between; } .site-header { display: flex; + width: 100%; align-items: center; justify-content: space-between; gap: 1rem; @@ -103,14 +104,10 @@ body::after { } .brand-mark { - display: grid; - place-items: center; width: 2.75rem; height: 2.75rem; - border-radius: 0.95rem; - background: linear-gradient(145deg, rgba(125, 211, 252, 0.95), rgba(56, 189, 248, 0.45)); - color: #08101d; - font-weight: 800; + object-fit: cover; + display: block; } .brand-text { @@ -118,9 +115,7 @@ body::after { line-height: 1.05; } -.brand-text strong, -.hero h1, -.card h2 { +.brand-text strong { font-family: "Georgia", "Palatino Linotype", serif; } @@ -134,8 +129,7 @@ body::after { gap: 0.6rem; } -.site-nav a, -.button { +.site-nav a { border-radius: 999px; transition: transform 160ms ease, @@ -159,113 +153,133 @@ body::after { } .site-main { + margin: 0 auto; + max-width: 1200px; display: grid; gap: 1.25rem; align-content: start; } -.hero { - border-radius: 2rem; - 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 { - 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); -} - -.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); - font-weight: 700; -} - -.button:hover, .site-nav a: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 { - border-radius: 1.4rem; - 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; -} - .site-footer { - padding: 1rem 1.25rem; - color: var(--muted); + padding: 1.5rem 1.25rem; + background: rgb(50, 54, 66); } .site-footer p { margin: 0; } +.footer-brand-row { + display: flex; + align-items: start; + justify-content: space-between; + gap: 1rem; + padding-bottom: 1rem; + border-bottom: 1px solid rgba(148, 163, 184, 0.16); +} +.footer-content { + margin: 0 auto; + max-width: 1200px; + display: flex; + flex-direction: column; + gap: 0.5rem; +} +.footer-brand-block { + display: flex; + align-items: center; + gap: 0.85rem; + max-width: 42rem; +} + +.footer-brand-mark { + width: 3rem; + height: 3rem; + border-radius: 0.95rem; + object-fit: cover; + display: block; + flex: none; +} + +.footer-brand-block strong { + display: block; + color: var(--text); + font-family: "Georgia", "Palatino Linotype", serif; + font-size: 1.05rem; +} + +.footer-brand-block p, +.footer-note, +.footer-bottom p { + color: var(--muted); + line-height: 1.6; +} + +.footer-note { + max-width: 20rem; +} + +.footer-links-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 1rem; + padding: 1.25rem 0; +} + +.footer-links-grid section { + display: grid; + gap: 0.6rem; + align-content: start; +} + +.footer-links-grid h2 { + margin: 0 0 0.15rem; + color: var(--text); + font-size: 0.98rem; +} + +.footer-links-grid a { + color: var(--muted); + text-decoration: none; + width: fit-content; + transition: color 160ms ease, transform 160ms ease; +} + +.footer-links-grid a:hover { + color: var(--text); + transform: translateX(2px); +} + +.footer-bottom { + display: flex; + justify-content: space-between; + gap: 1rem; + padding-top: 1rem; + border-top: 1px solid rgba(148, 163, 184, 0.16); + font-size: 0.95rem; +} + +.footer-release, +.footer-commit { + text-align: right; +} + +.footer-release span, +.footer-commit span { + color: var(--text); +} + @media (max-width: 900px) { .grid { grid-template-columns: 1fr; } + + .footer-links-grid { + grid-template-columns: 1fr; + } } @media (max-width: 700px) { @@ -288,4 +302,13 @@ body::after { .button { width: 100%; } + + .footer-brand-row, + .footer-bottom { + flex-direction: column; + } + + .footer-brand-block { + align-items: flex-start; + } } \ No newline at end of file diff --git a/p/contact/index.html b/p/contact/index.html new file mode 100644 index 0000000..bf5ce52 --- /dev/null +++ b/p/contact/index.html @@ -0,0 +1,39 @@ + + + + + + Contact + + + +
+
+

Contact

+

Tu veux nous joindre ?

+

+ Cette page centralise les moyens de contact et les liens utiles pour écrire, appeler, ou retrouver le projet ailleurs. +

+
+ Envoyer un mail + Retour à l'accueil +
+
+ +
+
+

Email

+

contact@fwslinux.fr pour les demandes générales et les retours rapides.

+
+
+

Téléphone

+

+33 0 00 00 00 00 pour les appels ou le support direct.

+
+
+

Réseaux

+

Le footer te donne aussi les liens vers GitHub, Instagram et LinkedIn.

+
+
+
+ + diff --git a/p/dl/index.html b/p/dl/index.html index 3417dca..48a4643 100644 --- a/p/dl/index.html +++ b/p/dl/index.html @@ -4,6 +4,7 @@ DL +
diff --git a/p/index/index.html b/p/index/index.html index 0fe4b72..14e6468 100644 --- a/p/index/index.html +++ b/p/index/index.html @@ -4,6 +4,7 @@ Accueil +
@@ -14,6 +15,7 @@ La page principale vit dans p/index/index.html et le script l'injecte dans le main quand l'URL pointe vers /?p/index/.

+

Download FWS

Aller vers DL Rester sur l'accueil