diff options
| author | Max Charrier <max@puffer.fish> | 2025-04-19 20:51:23 +0200 |
|---|---|---|
| committer | Max Charrier <max@puffer.fish> | 2025-04-19 20:51:23 +0200 |
| commit | da50b1d37b5fc0d6511481548e58a958caa195b5 (patch) | |
| tree | 4169a3abf111d7033e62b83256feb89c19267d18 | |
| parent | 0143c0288c9ee1be498b4faedb6a97051a0c4f07 (diff) | |
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 <max@puffer.fish>
| -rw-r--r-- | en.html | 19 | ||||
| -rw-r--r-- | index.html | 15 | ||||
| -rw-r--r-- | stylesheet.css | 41 |
3 files changed, 59 insertions, 16 deletions
@@ -5,7 +5,7 @@ <META CHARSET="utf-8"> <META NAME="viewport" CONTENT="width=device-width, initial-scale=1"> - <META NAME="theme-color" CONTENT="#4e3246"> + <META NAME="theme-color" CONTENT="#f1e9df"> <META NAME="color-scheme" CONTENT="only light"> <LINK REL="stylesheet" HREF="reset.css"> @@ -14,8 +14,19 @@ <LINK REL="author licence" HREF="#about"> </HEAD> <BODY> - <H1>Max</H1> - <P>Welcome to Deez Nuts!</P> - <A LANG="fr" CLASS="button" HREF="index.html">Go back to La France! <-</A> + <HEADER> + <H1>Max</H1> + <nav> + <aside> + <A LANG="fr" HREF="index.html">Go back to La France!</A> + </aside> + <ul> + <li>Foo + <li>Bar + <li>Baz + </ul> + </nav> + </HEADER> + <P>Welcome to Deez Nuts!</P> </BODY> </HTML> @@ -14,8 +14,19 @@ <LINK REL="author licence" HREF="#about"> </HEAD> <BODY> - <H1>Max</H1> + <HEADER> + <H1>Max</H1> + <nav> + <aside> + <A LANG="en" CLASS="button" HREF="en.html">For the English document</A> + </aside> + <ul> + <li>Foo + <li>Bar + <li>Baz + </ul> + </nav> + </HEADER> <P>Pain, beurre et confiture</P> - <A LANG="en" CLASS="button" HREF="en.html">-> For the English document</A> </BODY> </HTML> 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; +} |