From 693698d6e74b0ae4f984b85d12bafc62dde9ad1c Mon Sep 17 00:00:00 2001 From: Arnaud Bailly Date: Fri, 29 May 2026 15:34:43 +0200 Subject: site: premiere version statique du site web --- site/style.css | 385 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 385 insertions(+) create mode 100644 site/style.css (limited to 'site/style.css') diff --git a/site/style.css b/site/style.css new file mode 100644 index 0000000..5ed68e2 --- /dev/null +++ b/site/style.css @@ -0,0 +1,385 @@ +/* === Reset & Base === */ +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --sky: #8ecae6; + --sky-light: #d4edf8; + --sand: #f5deb3; + --sand-light: #fdf3e0; + --ink: #2b2d42; + --ink-light: #555b6e; + --white: #fefefe; + --radius: 12px; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: "Inter", "Helvetica Neue", Arial, sans-serif; + color: var(--ink); + background: var(--white); + line-height: 1.7; + font-size: 17px; +} + +a { + color: var(--ink); + text-decoration-color: var(--sky); + text-underline-offset: 3px; + transition: color 0.2s; +} + +a:hover { + color: #1a6fa0; +} + +/* === Layout === */ +.container { + max-width: 960px; + margin: 0 auto; + padding: 0 24px; +} + +/* === Header / Hero === */ +.hero { + background: linear-gradient(135deg, var(--sand-light) 0%, var(--sky-light) 100%); + padding: 80px 0 60px; + text-align: center; +} + +.hero__logo { + width: 160px; + height: 160px; + border-radius: 50%; + object-fit: cover; + border: 4px solid var(--white); + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); + margin-bottom: 24px; +} + +.hero h1 { + font-family: "JetBrains Mono", "Fira Code", monospace; + font-size: 2.8rem; + font-weight: 700; + letter-spacing: -1px; + margin-bottom: 8px; +} + +.hero h1 .lambda { + color: #3a9fbf; +} + +.hero__tagline { + font-size: 1.15rem; + color: var(--ink-light); + max-width: 560px; + margin: 0 auto 32px; +} + +.hero__cta { + display: inline-block; + background: var(--sky); + color: var(--ink); + font-weight: 600; + padding: 12px 28px; + border-radius: 8px; + text-decoration: none; + transition: background 0.2s, transform 0.15s; +} + +.hero__cta:hover { + background: #6fb8d9; + color: var(--ink); + transform: translateY(-1px); +} + +/* === Nav === */ +.nav { + background: var(--white); + border-bottom: 1px solid #e8e8e8; + position: sticky; + top: 0; + z-index: 10; +} + +.nav__inner { + display: flex; + align-items: center; + justify-content: space-between; + padding: 12px 0; +} + +.nav__brand { + font-family: "JetBrains Mono", "Fira Code", monospace; + font-weight: 700; + font-size: 1.2rem; + text-decoration: none; +} + +.nav__links { + display: flex; + gap: 24px; + list-style: none; +} + +.nav__links a { + text-decoration: none; + font-size: 0.95rem; + font-weight: 500; + color: var(--ink-light); + transition: color 0.2s; +} + +.nav__links a:hover { + color: var(--ink); +} + +/* === Sections === */ +section { + padding: 64px 0; +} + +section:nth-child(even) { + background: var(--sand-light); +} + +.section__title { + font-family: "JetBrains Mono", "Fira Code", monospace; + font-size: 1.6rem; + margin-bottom: 12px; +} + +.section__subtitle { + color: var(--ink-light); + margin-bottom: 40px; + max-width: 600px; +} + +/* === About === */ +.about__grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 32px; + margin-top: 32px; +} + +.about__card { + background: var(--white); + border: 1px solid #e8e8e8; + border-radius: var(--radius); + padding: 28px; + transition: box-shadow 0.2s; +} + +.about__card:hover { + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); +} + +.about__card h3 { + font-family: "JetBrains Mono", "Fira Code", monospace; + font-size: 1.1rem; + margin-bottom: 8px; +} + +.about__card .icon { + font-size: 1.8rem; + margin-bottom: 12px; + display: block; +} + +/* === Topics === */ +.topics__list { + display: flex; + flex-wrap: wrap; + gap: 12px; + margin-top: 24px; +} + +.topic-tag { + background: var(--sky-light); + border: 1px solid var(--sky); + border-radius: 24px; + padding: 8px 20px; + font-size: 0.9rem; + font-weight: 500; + white-space: nowrap; +} + +/* === Workshops / Events === */ +.events__list { + display: flex; + flex-direction: column; + gap: 20px; + margin-top: 24px; +} + +.event-card { + background: var(--white); + border: 1px solid #e8e8e8; + border-radius: var(--radius); + padding: 24px 28px; + display: flex; + align-items: flex-start; + gap: 20px; + transition: box-shadow 0.2s, border-color 0.2s; + text-decoration: none; + color: var(--ink); +} + +.event-card:hover { + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); + border-color: var(--sky); + color: var(--ink); +} + +.event-card__date { + font-family: "JetBrains Mono", "Fira Code", monospace; + font-size: 0.85rem; + color: var(--ink-light); + background: var(--sand-light); + border-radius: 8px; + padding: 8px 12px; + white-space: nowrap; + text-align: center; + min-width: 90px; +} + +.event-card__content h3 { + font-size: 1.05rem; + margin-bottom: 4px; +} + +.event-card__content p { + color: var(--ink-light); + font-size: 0.92rem; +} + +/* === Join / CTA === */ +.join { + text-align: center; + background: linear-gradient(135deg, var(--sky-light) 0%, var(--sand-light) 100%); +} + +.join__links { + display: flex; + justify-content: center; + gap: 16px; + margin-top: 28px; + flex-wrap: wrap; +} + +.join__link { + display: inline-flex; + align-items: center; + gap: 8px; + background: var(--white); + border: 1px solid #e0e0e0; + border-radius: 8px; + padding: 12px 24px; + text-decoration: none; + font-weight: 500; + transition: border-color 0.2s, box-shadow 0.2s; +} + +.join__link:hover { + border-color: var(--sky); + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); + color: var(--ink); +} + +/* === Footer === */ +.footer { + background: var(--ink); + color: #c0c0c0; + padding: 32px 0; + text-align: center; + font-size: 0.88rem; +} + +.footer a { + color: var(--sky); +} + +/* === Code decoration === */ +.code-bg { + position: relative; + overflow: hidden; +} + +.code-bg > * { + position: relative; + z-index: 1; +} + +.code-snippets { + position: absolute; + inset: 0; + z-index: 0; + pointer-events: none; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr; + gap: 16px; + padding: 20px; + opacity: 0.45; + mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 75%); + -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, black 30%, transparent 75%); +} + +.code-snippets pre { + font-family: "JetBrains Mono", monospace; + font-size: 0.65rem; + line-height: 1.5; + white-space: pre; + overflow: hidden; + margin: 0; + text-align: left; +} + +/* Syntax highlighting colors */ +.code-snippets .kw { color: #7c3aed; } /* keywords - purple */ +.code-snippets .fn { color: #2563eb; } /* functions - blue */ +.code-snippets .ty { color: #0891b2; } /* types - teal */ +.code-snippets .str { color: #16a34a; } /* strings - green */ +.code-snippets .num { color: #dc2626; } /* numbers - red */ +.code-snippets .op { color: #9333ea; } /* operators - violet */ +.code-snippets .cm { color: #6b7280; font-style: italic; } /* comments - gray */ +.code-snippets .var { color: #1e3a5f; } /* variables - dark blue */ + +@media (max-width: 700px) { + .code-snippets { + grid-template-columns: 1fr 1fr; + font-size: 0.5rem; + } +} + +/* === Responsive === */ +@media (max-width: 700px) { + .hero h1 { + font-size: 2rem; + } + + .hero__logo { + width: 120px; + height: 120px; + } + + .about__grid { + grid-template-columns: 1fr; + } + + .event-card { + flex-direction: column; + } + + .nav__links { + gap: 16px; + } +} -- cgit v1.3.1