Skip to content

Instantly share code, notes, and snippets.

@rzvl
Last active April 26, 2022 16:27
Show Gist options
  • Save rzvl/9f17be801e784489f01104dd2902d1e7 to your computer and use it in GitHub Desktop.
Save rzvl/9f17be801e784489f01104dd2902d1e7 to your computer and use it in GitHub Desktop.
My preferred reset settings for CSS
/* variables declared here - these are the colors for our pages, as well as the font stacks and sizes. */
:root {
--black: #171321;
--dkblue: #0d314b;
--plum: #4b0d49;
--hotmag: #ff17e4;
--magenta: #e310cb;
--aqua: #86fbfb;
--white: #f7f8fa;
--font-size: 1.3rem;
--mono: "Oxygen mono", monospace;
--sans: Oxygen, sans-serif;
}
/* border box model: https://css-tricks.com/box-sizing/ */
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/* generic styles for the page */
body {
padding: 0;
margin: 0;
font-family: var(--sans);
background-color: var(--black);
color: var(--white);
font-size: var(--font-size);
}
h1,
h2,
h3 {
margin: 0;
}
a {
color: var(--magenta);
}
a:hover {
color: var(--hotmag);
text-decoration: none;
}
/* make all images responsive */
img {
width: 100%;
}
/* Reset form elements */
button,
input,
select,
textarea {
width: 150px;
font-family: inherit;
font-size: 100%;
box-sizing: border-box;
padding: 0;
margin: 0;
}
textarea {
overflow: auto;
}
@rzvl
Copy link
Author

rzvl commented Jun 25, 2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment