Skip to content

Instantly share code, notes, and snippets.

@dannysmith
Created March 17, 2020 03:20
Show Gist options
  • Save dannysmith/980e1f6b4c9e44ae39c563a15a5a84a9 to your computer and use it in GitHub Desktop.
Save dannysmith/980e1f6b4c9e44ae39c563a15a5a84a9 to your computer and use it in GitHub Desktop.
// ==========================================================================
// Base styles: Global Basics and resets
// ==========================================================================
//Remove default fieldset styles.
fieldset {
margin: 0;
padding: 0;
border: 0;
}
// Allow only vertical resizing of textareas.
textarea {
resize: vertical;
}
// Universal heading rendering
// Remove all margins from Headings
h1,
h2,
h3,
h4,
h5 {
-webkit-font-feature-settings: 'kern' 1;
font-feature-settings: 'kern' 1;
margin: 0;
}
// Base styles for HTML
html {
box-sizing: border-box;
font-variant-ligatures: common-ligatures discretionary-ligatures;
text-rendering: optimizeLegibility;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: greyscale;
}
// Inherit box-sizing
*,
*::before,
*::after {
box-sizing: inherit;
}
// Body default styles
body {
font-family: var(--font-ui);
background-color: var(--color-white);
overflow-x: hidden;
min-height: 100vh;
}
// Remove list styles on ul, ol elements with a class attribute
ul[class],
ol[class] {
list-style: none;
padding-left: 0;
}
// Remove color and text-decoration from links
a[class] {
text-decoration: inherit;
color: inherit;
}
// A elements that don't have a class get default styles
a:not([class]) {
text-decoration-skip-ink: auto;
text-decoration-color: var(--light-gray);
text-decoration-thickness: 1px;
&:hover {
color: red;
text-decoration-color: red;
}
}
// Make images easier to work with
img {
max-width: 100%;
display: block;
}
// Natural flow and rhythm in articles by default
article > * + * {
margin-top: 1em;
}
// Inherit fonts for inputs and buttons
input,
button,
textarea,
select {
font: inherit;
}
// Remove all animations and transitions for people that prefer not to see them
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
// ==========================================================================
// Base styles: Inline Text Treatments
// ==========================================================================
// Marked Text
mark {
background: var(--color-yellow);
}
// Highlighting & Selection
::-moz-selection {
background: var(--color-yellow);
text-shadow: none;
}
::selection {
background: var(--color-yellow);
text-shadow: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment