Skip to content

Instantly share code, notes, and snippets.

@lumiobrie
Created November 21, 2024 02:04
Show Gist options
  • Save lumiobrie/8439ee0cf6407e1efd3e08719cccbe1c to your computer and use it in GitHub Desktop.
Save lumiobrie/8439ee0cf6407e1efd3e08719cccbe1c to your computer and use it in GitHub Desktop.
:root {
--font-size-base: 16px;
--line-height-base: 1.5;
--color-text: #333;
--color-background: #fff;
--color-link: #0066cc;
--color-link-visited: #663399;
--color-border: #ccc;
--spacing-unit: 1rem;
color-scheme: light dark;
}
body {
font-size: var(--font-size-base);
line-height: var(--line-height-base);
color: var(--color-text);
background-color: var(--color-background);
margin: 0;
padding: var(--spacing-unit);
}
h1, h2, h3, h4, h5, h6 {
margin-top: calc(var(--spacing-unit) * 2);
margin-bottom: var(--spacing-unit);
line-height: 1.2;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }
p {
margin-top: 0;
margin-bottom: var(--spacing-unit);
}
a {
color: var(--color-link);
text-decoration: underline;
}
a:visited {
color: var(--color-link-visited);
}
ul, ol {
margin-top: 0;
margin-bottom: var(--spacing-unit);
padding-left: calc(var(--spacing-unit) * 2);
}
img {
max-width: 100%;
height: auto;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: var(--spacing-unit);
}
th, td {
padding: calc(var(--spacing-unit) / 2);
border: 1px solid var(--color-border);
text-align: left;
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
margin: 0;
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none;
transition: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment