www/stylesheet.css

:root {
	--system-ui: 'comic_monobold', ui-monospace, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
}
body {
	background-color: #f1e9df;
	color: #89a06b;
	margin: 30px 20%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	font-family: var(--system-ui);
	font-size: 1.4em;
}
header {
	align-self: center;
	padding: 0 18%;
	padding-bottom: 20px;
	border-bottom: 1px solid #a89a8e;
}
h1 {
	text-align: center;
	font-size: 3.2rem;
	letter-spacing: 0.5rem;
}
nav menu {
	margin-top: 10px;
	font-size: 1rem;
	list-style-type: none;
}
footer {
	align-self: center;
	padding: 20px 18%;
	border-top: 1px solid #a89a8e;
	font-size: 0.8rem
}
Implement System Font Stack More information: https://systemfontstack.com/ CSS variables are very usefull to avoid long list of fonts each time. Also, it's easier to read and maintain. Signed-off-by: Max Charrier <max@puffer.fish> 2025-04-20 17:44:20 +02:00			`:root {`
			`--system-ui: 'comic_monobold', ui-monospace, Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;`
			`}`
Add custom own file stylesheet Lately, I will implement modern CSS flexbox/grid instead of using absolute position. Signed-off-by: Max Charrier <max@puffer.fish> 2025-04-19 13:08:19 +02:00			`body {`
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> 2025-04-19 20:51:23 +02:00			`background-color: #f1e9df;`
			`color: #89a06b;`
Add footer Signed-off-by: Max Charrier <max@puffer.fish> 2025-04-20 12:16:09 +02:00			`margin: 30px 20%;`
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> 2025-04-19 20:51:23 +02:00			`display: flex;`
			`flex-direction: column;`
			`align-items: center;`
Add footer Signed-off-by: Max Charrier <max@puffer.fish> 2025-04-20 12:16:09 +02:00			`gap: 30px;`
Implement System Font Stack More information: https://systemfontstack.com/ CSS variables are very usefull to avoid long list of fonts each time. Also, it's easier to read and maintain. Signed-off-by: Max Charrier <max@puffer.fish> 2025-04-20 17:44:20 +02:00			`font-family: var(--system-ui);`
Add footer Signed-off-by: Max Charrier <max@puffer.fish> 2025-04-20 12:16:09 +02:00			`font-size: 1.4em;`
Add custom own file stylesheet Lately, I will implement modern CSS flexbox/grid instead of using absolute position. Signed-off-by: Max Charrier <max@puffer.fish> 2025-04-19 13:08:19 +02:00			`}`
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> 2025-04-19 20:51:23 +02:00			`header {`
Add footer Signed-off-by: Max Charrier <max@puffer.fish> 2025-04-20 12:16:09 +02:00			`align-self: center;`
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> 2025-04-19 20:51:23 +02:00			`padding: 0 18%;`
Add footer Signed-off-by: Max Charrier <max@puffer.fish> 2025-04-20 12:16:09 +02:00			`padding-bottom: 20px;`
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> 2025-04-19 20:51:23 +02:00			`border-bottom: 1px solid #a89a8e;`
			`}`
Add custom own file stylesheet Lately, I will implement modern CSS flexbox/grid instead of using absolute position. Signed-off-by: Max Charrier <max@puffer.fish> 2025-04-19 13:08:19 +02:00			`h1 {`
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> 2025-04-19 20:51:23 +02:00			`text-align: center;`
			`font-size: 3.2rem;`
			`letter-spacing: 0.5rem;`
			`}`
Add hyperlinks Signed-off-by: Max Charrier <max@puffer.fish> 2025-04-21 02:22:11 +02:00			`nav menu {`
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> 2025-04-19 20:51:23 +02:00			`margin-top: 10px;`
			`font-size: 1rem;`
Add hyperlinks Signed-off-by: Max Charrier <max@puffer.fish> 2025-04-21 02:22:11 +02:00			`list-style-type: none;`
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> 2025-04-19 20:51:23 +02:00			`}`
Add footer Signed-off-by: Max Charrier <max@puffer.fish> 2025-04-20 12:16:09 +02:00			`footer {`
			`align-self: center;`
			`padding: 20px 18%;`
			`border-top: 1px solid #a89a8e;`
			`font-size: 0.8rem`
			`}`