diff --git a/index.html b/index.html index 7296f41..f4cb5f7 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ Fws Web - + @@ -70,14 +70,14 @@

© 2026 Fws Linux

-

Dernière release : non affichée

-

Dernier commit : non affiché

+
+ \ No newline at end of file diff --git a/p/assets/main-styles/main.css b/p/assets/main-styles/main.css deleted file mode 100644 index 7904585..0000000 --- a/p/assets/main-styles/main.css +++ /dev/null @@ -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; - } -} diff --git a/p/assets/styles/main.css b/p/assets/styles/main.css new file mode 100644 index 0000000..46ead47 --- /dev/null +++ b/p/assets/styles/main.css @@ -0,0 +1,156 @@ +@import "./var.css"; + +/* MAIN PAGE STYLES - focused on the hero and features */ + +:root { + --main-max: 1200px; +} + +/* Layout container for injected page content */ +main[data-page-content] { + margin: 0 auto; + max-width: var(--main-max); + padding: 2rem 1.25rem; + box-sizing: border-box; +} + +/* HERO */ +.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); + display: block; +} + +.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 { /* previously .hero h1 */ + 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 - refined layout */ +.features { + margin-top: 1.5rem; + display: grid; + grid-template-columns: 1fr 420px; + grid-auto-rows: minmax(120px, auto); + gap: 1rem; +} + +.features .card { + background: rgba(255,255,255,0.02); + padding: 1.25rem; + border-radius: 0.75rem; + box-shadow: 0 8px 22px rgba(2,6,23,0.45); + transition: transform 180ms ease, box-shadow 180ms ease; +} + +.features .card:first-child { + grid-column: 1 / 2; + grid-row: 1 / span 2; + min-height: 220px; +} + +.features .card + .card { /* second item */ + grid-column: 2 / 3; +} + +.features .card:nth-child(3) { grid-column: 2 / 3; } +.features .card:nth-child(4) { grid-column: 1 / 3; } + +.features .card h2 { margin: 0 0 0.5rem; font-family: "Georgia", serif; } +.features .card p { margin: 0; color: var(--muted); } + +.features .card:hover { transform: translateY(-6px); box-shadow: 0 22px 60px rgba(2,6,23,0.55); } + +@media (max-width: 980px) { + .hero-title { font-size: clamp(2.2rem, 7vw, 4rem); } + .features { grid-template-columns: 1fr; } + .features .card { grid-column: auto; grid-row: auto; } +} + +/* Focus states controlled by JS: when a card is focused it expands (spans both columns) + and others collapse slightly so the focused card shows full content. */ +.features[class*="focus-"] .card { transition: all 220ms ease; } +.features.focus-1 .card:nth-child(1), +.features.focus-2 .card:nth-child(2), +.features.focus-3 .card:nth-child(3), +.features.focus-4 .card:nth-child(4) { + grid-column: 1 / 3; + transform: none; + box-shadow: 0 28px 80px rgba(2,6,23,0.7); + z-index: 3; +} + +.features.focus-1 .card:not(:nth-child(1)), +.features.focus-2 .card:not(:nth-child(2)), +.features.focus-3 .card:not(:nth-child(3)), +.features.focus-4 .card:not(:nth-child(4)) { + opacity: 0.95; + transform: translateY(0) scale(0.98); +} + +@media (max-width: 980px) { + .features[class*="focus-"] .card { transform: none; box-shadow: none; opacity: 1; } + .features[class*="focus-"] .card { grid-column: auto; } +} + +/* small helper spacing */ +.grid { display: block; } + diff --git a/p/assets/main-styles/styles.css b/p/assets/styles/styles.css similarity index 98% rename from p/assets/main-styles/styles.css rename to p/assets/styles/styles.css index 8f9e7ae..e7116a0 100644 --- a/p/assets/main-styles/styles.css +++ b/p/assets/styles/styles.css @@ -104,15 +104,16 @@ body::after { } .brand-mark { - width: 2.75rem; - height: 2.75rem; + width: 3.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 { diff --git a/p/assets/main-styles/var.css b/p/assets/styles/var.css similarity index 100% rename from p/assets/main-styles/var.css rename to p/assets/styles/var.css diff --git a/p/dl/index.html b/p/dl/index.html index 48a4643..a2ad17c 100644 --- a/p/dl/index.html +++ b/p/dl/index.html @@ -4,7 +4,6 @@ DL -
@@ -21,20 +20,7 @@ -
-
-

Vrai fichier

-

Le HTML est bien stocké dans le dossier p/, pas dans le fichier principal.

-
-
-

Injection

-

Le script lit ce fichier puis injecte uniquement le bloc portant data-page-content.

-
-
-

Extensible

-

Tu peux créer d'autres dossiers comme p/contact/ ou p/about/.

-
-
+
\ No newline at end of file