Add Josh Comeau's CSS reset and fix body width.

This commit is contained in:
Christian Galo 2025-03-20 01:38:56 -05:00
parent 9ccb9e8c99
commit 0937a83905

View File

@ -1,23 +1,77 @@
/*
Josh's Custom CSS Reset
https://www.joshwcomeau.com/css/custom-css-reset/
*/
*, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
img, picture, video, canvas, svg {
:root {
/* Consider dark mode implementation later */
color-scheme: light;
}
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
p {
text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}
#root, #__next {
isolation: isolate;
}
/* Custom CSS for the Wikidarity theme */
:root {
/* Consider dark mode implementation later */
color-scheme: light;
}
html {
display: flex;
justify-content: center;
}
body {
color: oklch(0.145 0 0);
line-height: 1.5;
font-family: "RecVar", Helvetica, Arial, sans-serif;
max-width: 64rem;
width: 100%;
min-height: 100vh;
padding: 2rem;
background-color: oklch(0.97 0 0);
transition: background-color 0.2s ease;
display: flex;
flex-direction: column;
gap: 2rem; /* gap replaces margin between sections */
gap: 2rem;
}
h1, h2, h3, h4, h5, h6 {
padding-bottom: 0.5rem; /* padding replaces margin-bottom */
padding-bottom: 0.5rem;
}
h1 {
@ -121,10 +175,9 @@ footer {
padding-top: 1rem;
}
/* Responsive adjustments using padding */
@media (max-width: 768px) {
body {
padding: 1rem;
gap: 1rem; /* Adjust gap accordingly */
gap: 1rem;
}
}