max/www
1
1
Fork 0
Code Pull requests Activity
www/stylesheet.css

70 lines
1.2 KiB
CSS
Raw Normal View History

Implement Transitional Modern Font Stacks More information: https://github.com/system-fonts/modern-font-stacks#transitional Signed-off-by: Max Charrier <max@puffer.fish>
2025-04-22 09:05:49 +02:00
:root {
--system-ui: ui-serif, Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
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;
Introduce new design CSS Grid are very usefull to create a layout with a left sidebar and content in the rest of the space. Footer at bottom use every width space. This design keep a simple sidebar with import hyperlinks and act as a single infinite vertical scroll page, with the power of HTML and CSS! Signed-off-by: Max Charrier <max@puffer.fish>
2025-04-21 19:30:36 +02:00
width: 960px;
margin: 0 auto;
Fix page padding Footer was stuck to the edge. Signed-off-by: Max Charrier <max@puffer.fish>
2025-04-21 19:42:13 +02:00
padding: 60px 0 60px 0;
Introduce new design CSS Grid are very usefull to create a layout with a left sidebar and content in the rest of the space. Footer at bottom use every width space. This design keep a simple sidebar with import hyperlinks and act as a single infinite vertical scroll page, with the power of HTML and CSS! Signed-off-by: Max Charrier <max@puffer.fish>
2025-04-21 19:30:36 +02:00
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 60px;
Implement Transitional Modern Font Stacks More information: https://github.com/system-fonts/modern-font-stacks#transitional Signed-off-by: Max Charrier <max@puffer.fish>
2025-04-22 09:05:49 +02:00
font-family: var(--system-ui);
font-weight: normal; /* 400 */
Introduce new design CSS Grid are very usefull to create a layout with a left sidebar and content in the rest of the space. Footer at bottom use every width space. This design keep a simple sidebar with import hyperlinks and act as a single infinite vertical scroll page, with the power of HTML and CSS! Signed-off-by: Max Charrier <max@puffer.fish>
2025-04-21 19:30:36 +02:00
font-size: 1.1rem;
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 {
Introduce new design CSS Grid are very usefull to create a layout with a left sidebar and content in the rest of the space. Footer at bottom use every width space. This design keep a simple sidebar with import hyperlinks and act as a single infinite vertical scroll page, with the power of HTML and CSS! Signed-off-by: Max Charrier <max@puffer.fish>
2025-04-21 19:30:36 +02:00
width: 160px;
margin: 0 10px;
grid-column: 1 / 2;
}
header h1 {
color: #181818;
margin-bottom: 20px;
font-size: 2.13rem;
line-height: 34px;
letter-spacing: -1px;
}
header nav menu {
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
}
Introduce new design CSS Grid are very usefull to create a layout with a left sidebar and content in the rest of the space. Footer at bottom use every width space. This design keep a simple sidebar with import hyperlinks and act as a single infinite vertical scroll page, with the power of HTML and CSS! Signed-off-by: Max Charrier <max@puffer.fish>
2025-04-21 19:30:36 +02:00
header nav menu li {
margin-bottom: 10px;
line-height: 18px;
}
header nav menu a {
color: #555;
Implement Transitional Modern Font Stacks More information: https://github.com/system-fonts/modern-font-stacks#transitional Signed-off-by: Max Charrier <max@puffer.fish>
2025-04-22 09:05:49 +02:00
font-weight: bold; /* 700 */
Introduce new design CSS Grid are very usefull to create a layout with a left sidebar and content in the rest of the space. Footer at bottom use every width space. This design keep a simple sidebar with import hyperlinks and act as a single infinite vertical scroll page, with the power of HTML and CSS! Signed-off-by: Max Charrier <max@puffer.fish>
2025-04-21 19:30:36 +02:00
font-size: 0.95rem;
text-decoration: none;
}
main {
margin: 0 10px;
grid-column: 2 / 6;
}
main h2, main a {
color: #333;
margin-bottom: 30px;
Implement Transitional Modern Font Stacks More information: https://github.com/system-fonts/modern-font-stacks#transitional Signed-off-by: Max Charrier <max@puffer.fish>
2025-04-22 09:05:49 +02:00
font-weight: bold; /* 700 */
Introduce new design CSS Grid are very usefull to create a layout with a left sidebar and content in the rest of the space. Footer at bottom use every width space. This design keep a simple sidebar with import hyperlinks and act as a single infinite vertical scroll page, with the power of HTML and CSS! Signed-off-by: Max Charrier <max@puffer.fish>
2025-04-21 19:30:36 +02:00
}
main p {
margin-bottom: 20px;
text-align: justify;
}
main p.no-margin {
margin-bottom: 0;
}
main ol {
margin: 5px 0 20px 10px;
list-style: decimal inside;
}
Add footer Signed-off-by: Max Charrier <max@puffer.fish>
2025-04-20 12:16:09 +02:00
footer {
Introduce new design CSS Grid are very usefull to create a layout with a left sidebar and content in the rest of the space. Footer at bottom use every width space. This design keep a simple sidebar with import hyperlinks and act as a single infinite vertical scroll page, with the power of HTML and CSS! Signed-off-by: Max Charrier <max@puffer.fish>
2025-04-21 19:30:36 +02:00
margin: 0 10px;
grid-column: 1 / 6;
}
footer address, footer p, footer a {
color: #555;
Add footer Signed-off-by: Max Charrier <max@puffer.fish>
2025-04-20 12:16:09 +02:00
}
Copy permalink