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>
<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">
<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>
<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>
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;
+}
projects / max / www.git / commitdiff