From da50b1d37b5fc0d6511481548e58a958caa195b5 Mon Sep 17 00:00:00 2001 From: Max Charrier Date: Sat, 19 Apr 2025 20:51:23 +0200 Subject: [PATCH] Implement in-place header with modern CSS Flexbox are very usefull to center things and make it smarter. I removed style linking with class and use element directly. BREAKING-CHANGES: Use new color based on Pantone Color of the Year 2025 Signed-off-by: Max Charrier --- en.html | 19 +++++++++++++++---- index.html | 15 +++++++++++++-- stylesheet.css | 41 +++++++++++++++++++++++++++++++---------- 3 files changed, 59 insertions(+), 16 deletions(-) diff --git a/en.html b/en.html index cae9291..b28af1b 100644 --- a/en.html +++ b/en.html @@ -5,7 +5,7 @@ - + @@ -14,8 +14,19 @@ -

Max

Welcome to Deez Nuts!

- Go back to La France! <- +

Max

+ +

Welcome to Deez Nuts!

diff --git a/index.html b/index.html index 54e2317..20d0065 100644 --- a/index.html +++ b/index.html @@ -14,8 +14,19 @@ -

Max

+ +

Pain, beurre et confiture

- -> For the English document diff --git a/stylesheet.css b/stylesheet.css index 269ad1c..2ee2f51 100644 --- a/stylesheet.css +++ b/stylesheet.css @@ -1,23 +1,44 @@ body { - background-color: #4e3246; - color: #9b8816; + background-color: #f1e9df; + color: #89a06b; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; font-family: 'comic_monobold', ui-monospace, monospace; font-size: 1.4rem; } +header { + margin: 30px; + padding: 0 18%; + border-bottom: 1px solid #a89a8e; +} h1 { - font-size: 4rem; + text-align: center; + font-size: 3.2rem; + letter-spacing: 0.5rem; +} +nav { + margin: 10px; } -.button { - position: absolute; - top: 20px; - right: 40px; +nav aside { + zoom: 60%; +} +nav aside a { + text-align: center; font-family: 'comic_monobold', ui-monospace, monospace; font-size: 1.2rem; display: inline-block; padding: 10px 20px; - background-color: #5d3a00; - color: #f9ea9a; + background-color: #a89a8e; + color: black; text-decoration: none; - border: 1px solid #f98948; + border: none; border-radius: 5px; } +nav ul { + margin-top: 10px; + display: flex; + justify-content: space-around; + font-size: 1rem; +} -- 2.39.5