Skip to content

Instantly share code, notes, and snippets.

@midkiffaries

midkiffaries/tedillize.css

Last active Oct 22, 2020
Embed
What would you like to do?
tedillize.css - My own personal CSS normalization stylesheet. It combines a lot of different styles and stylesheets found throughout the web.
/********************************************
Tedilize 2.0 - Normalization and Base Styling
*********************************************/
:root {
-moz-tab-size: 4;
tab-size: 4;
}
*,
*::before,
*::after {
box-sizing: border-box;
vertical-align: inherit;
}
*::before,
*::after {
text-decoration: inherit;
white-space: pre;
speak: none;
}
/* Default system sans-serif font */
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
line-height: 1.5;
text-rendering: auto;
font-size: 100%;
font-family:
system-ui,
-apple-system,
'Segoe UI',
Roboto,
'Oxygen-Sans',
'Noto Sans',
sans-serif,
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Noto Color Emoji';
}
/*********************
Document
*********************/
body {
background-color: #fdfdfd;
color: #111;
font-weight: 400;
min-height: 100%;
font-size: 1rem;
margin: 0;
scroll-behavior: smooth;
}
main {
display: block;
}
header,
footer {
clear: both;
display: table;
width: 100%;
}
hr {
margin: 1rem 0;
background-color: #999;
border: 0;
height: 1px;
clear: both;
}
blockquote {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}
address {
font-style: normal;
line-height: inherit;
}
template,
[hidden],
caption:empty,
figcaption:empty {
display: none;
}
/*********************
Inline elements
*********************/
b,
strong {
font-weight: bolder;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
mark {
background-color: #ff3;
border-radius: 0.2em;
padding: 0.2em;
}
small {
font-size: 0.875em;
}
ins {
-webkit-text-decoration: underline dashed #aaa;
text-decoration: underline dashed #aaa;
}
u {
-webkit-text-decoration: underline solid #ccc;
text-decoration: underline solid #ccc;
}
abbr[title],
abbr[aria-label] {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
cursor: help;
border-bottom: none;
}
/*********************
Headings
*********************/
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.25;
margin-bottom: 0.5rem;
font-weight: 400;
}
h1 {
font-size: 2.4rem;
margin: 0.67em 0;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.7rem;
font-weight: 600;
}
h4 {
font-size: 1.5rem;
}
h5 {
font-size: 1.2rem;
font-weight: 500;
}
h6 {
font-size: 1rem;
font-weight: 600;
}
/*********************
Tables
*********************/
table {
border-collapse: collapse;
border-spacing: 0;
width: 100%;
}
td,
th {
padding: 0.125em 0.5em 0.25em;
line-height: 1.15;
text-align: left;
text-overflow: ellipsis;
vertical-align: top;
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
caption {
padding: 0.75rem;
caption-side: top;
}
/*********************
List elements
*********************/
ul,
ol {
padding-left: 2rem;
}
dd {
margin-left: 2em;
}
dt {
font-weight: 700;
}
menu {
padding: 0;
}
nav ol,
nav ul,
menu ol,
menu ul {
list-style: none;
padding: 0;
}
/*********************
Monospace elements
*********************/
code,
kbd,
samp,
pre {
font-size: 1em;
white-space: pre-wrap;
font-family:
ui-monospace,
SFMono-Regular,
Menlo,
Consolas,
'Roboto Mono',
'Noto Mono',
'Liberation Mono',
monospace;
}
code {
background: #ddd;
padding: 0.1rem 0.2rem;
border-radius: 0.3rem;
}
kbd {
background: #ddd;
padding: 0.2rem 0.4rem;
border-radius: 0.2rem;
border-bottom: 1px solid #aaa;
white-space: nowrap;
}
pre {
display: block;
word-break: break-all;
line-height: 140%;
font-size: 0.9rem;
}
pre code {
font-size: inherit;
color: inherit;
word-break: normal;
display: inline-block;
padding: 0.8rem;
}
a > code {
color: inherit;
}
/*********************
Images and figures
*********************/
img,
video,
audio,
iframe {
height: auto;
max-width: 100%;
vertical-align: middle;
border: none;
object-fit: cover;
image-rendering: auto;
}
img[src$='.gif'],
img[src$='.svg'],
canvas,
svg {
image-rendering: -webkit-optimize-contrast;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
a img {
object-fit: contain;
}
figure {
margin: 0 0 1rem;
}
figure img,
figure video,
figure iframe {
width: 100%;
}
figure a img {
cursor: -webkit-zoom-in;
cursor: zoom-in;
}
figure > a::after {
opacity: 0.6;
pointer-events: none;
position: absolute;
transform: translate(-1.5em, 0.5em);
content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17'%3E%3Cpath d='M15.6 15.6a1.5 1.5 0 01-2.2 0l-2.6-2.7a7 7 0 112.1-2.1l2.7 2.6a1.5 1.5 0 010 2.2zM7 2a5 5 0 100 10A5 5 0 007 2zm1 8H6V8H4V6h2V4h2v2h2v2H8z' fill='white'/%3E%3C/svg%3E");
filter: drop-shadow(0 0 1px #111);
}
figcaption {
text-align: center;
padding: 0.6em 0.2em;
line-height: 1.2em;
}
svg:not(:root) {
overflow: hidden;
vertical-align: middle;
}
/*********************
Interactive elements
*********************/
:focus-visible {
outline: 5px auto -webkit-focus-ring-color
}
:focus:not(:focus-visible),
[tabindex='-1']:focus:not(:focus-visible) {
outline: none;
}
a[href],
button,
input,
label,
select,
textarea,
[role='button'],
[tabindex] {
touch-action: manipulation;
}
a[href] {
color: #000;
background-color: transparent;
-webkit-tap-highlight-color: rgba(220,220,220,0.4);
-webkit-text-decoration-skip: ink;
text-decoration-skip: ink;
}
a[href] {
color: #000;
background-color: transparent;
-webkit-tap-highlight-color: rgba(220,220,220,0.4);
-webkit-text-decoration-skip: ink;
text-decoration-skip: ink;
}
a[href]::before,
a[href]::after {
display: inline-block;
text-decoration: none;
}
a:not([href]),
a[href=''],
a[href='#'] {
pointer-events: none;
text-decoration: none;
font-weight: inherit;
color: inherit;
touch-action: none;
}
/* Details Element */
summary {
cursor: pointer;
display: list-item;
}
details {
display: block;
}
/* Dialog Element */
dialog {
position: fixed;
left: 0;
right: 0;
top: 0;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
margin: auto;
display: block;
z-index: 9999;
border: solid;
padding: 1em;
background: #fff;
will-change: auto;
}
dialog:not([open]) {
display: none;
}
/*********************
Form elements
*********************/
input:not(:focus):invalid {
color: #d00;
}
/* Input Placeholder Color */
:-ms-input-placeholder {
color: #888;
}
::-webkit-input-placeholder {
color: #888;
}
::-moz-placeholder {
color: #888;
opacity: 1;
}
::placeholder {
color: #888;
}
[disabled],
[disabled] + label[for],
[aria-disabled] {
opacity: 0.4;
pointer-events: none;
}
[readonly],
button > *,
[type='button'] > *,
[role='button'] > * {
pointer-events: none;
}
button,
input,
optgroup,
select,
label,
textarea,
[list] {
font-family: inherit;
font-size: inherit;
line-height: inherit;
margin: 0;
border-radius: 0;
box-shadow: none;
background-color: inherit;
}
[role='button'],
[role='textbox'],
[role='listbox'],
button,
input,
select,
textarea {
display: inline-block;
border: 1px solid #999;
color: inherit;
letter-spacing: inherit;
padding: 0.25em 0.375em;
max-width: 100%;
text-transform: none;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
text-overflow: ellipsis;
cursor: pointer;
overflow: hidden;
word-wrap: normal;
}
select:not([multiple]):not([size]) {
padding-right: 1.4em;
background: no-repeat 100% 50% / 1em;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M6.6 18l4.5-4.6 2 2L6.6 22 0 15.4l2-2zm0-14L2 8.6l-2-2L6.6 0 13 6.6l-2 2z' fill='dimgray'/%3E%3C/svg%3E");
}
button,
[role='button'],
[type='button'],
[type='reset'],
[type='submit'] {
background-color: #eee;
overflow: visible;
cursor: pointer;
white-space: nowrap;
-webkit-appearance: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
[type='checkbox'],
[type='radio'] {
cursor: pointer;
font-size: inherit;
margin: 0;
}
textarea {
overflow: auto;
resize: vertical;
vertical-align: middle;
}
label {
display: inline-block;
}
label[for] {
cursor: pointer;
}
output {
display: inline-block;
font-weight: bold;
margin: auto 0.3em;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
border: 1px solid #bbb;
}
legend {
padding: 0 0.3rem;
max-width: 100%;
white-space: normal;
margin-bottom: 0.2rem;
}
/* Special Fields */
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field,
::-webkit-color-swatch-wrapper {
padding: 0;
}
/* Input Number */
[type='number'] {
-moz-appearance: textfield;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
-webkit-appearance: none;
}
[type='number']:out-of-range {
color: #d00;
}
/* Input Search */
[type='search'] {
-webkit-appearance: textfield;
appearance: textfield;
}
[type='search']::-webkit-search-decoration,
[type='search']::-webkit-search-results-button,
[type='search']::-webkit-search-results-decoration {
-webkit-appearance: none;
}
/* Input Range */
[type='range'] {
-webkit-appearance: none;
height: 1.8em;
width: 9em;
vertical-align: middle;
background: transparent;
font: 1.1em/1 arial, sans-serif;
border: none;
}
[type='range']::-webkit-slider-runnable-track {
border-radius: 0.3em;
height: 0.5em;
background: #ccc;
}
[type='range']::-moz-range-track {
border-radius: 0.3em;
height: 0.5em;
background: #ccc;
}
[type='range']::-ms-track {
border-radius: 0.3em;
height: 0.55em;
background: #ccc;
}
[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
margin-top: -0.3em;
width: 1.15em;
height: 1.15em;
border-radius: 50%;
background: #eee;
border: 2px solid #aaa;
}
[type='range']::-moz-range-thumb {
-moz-appearance: none;
width: 1em;
height: 1em;
border-radius: 50%;
background: #eee;
border: 2px solid #aaa;
}
[type='range']::-ms-thumb {
appearance: none;
margin-top: 0;
width: 1em;
height: 1em;
border-radius: 50%;
background: #eee;
border: 2px solid #aaa;
overflow: visible;
}
[type='range']::-ms-tooltip {
display: none;
}
/* Meter */
meter {
height: 1.5em;
border: 1px solid #bbb;
background: #eee;
}
::-webkit-meter-bar {
background: #eee;
border-radius: 0;
height: 1.4em;
}
::-webkit-meter-optimum-value {
background: green;
}
:-moz-meter-optimum::-moz-meter-bar {
background: green;
}
::-webkit-meter-suboptimum-value {
background: gold;
}
:-moz-meter-sub-optimum::-moz-meter-bar {
background: gold;
}
::-webkit-meter-even-less-good-value {
background: red;
}
:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: red;
}
/* Progress */
progress {
display: inline-block;
border: 1px solid #bbb;
vertical-align: baseline;
height: 1.2em;
}
progress[value] {
background-color: #eee;
}
progress[value]::-webkit-progress-bar {
background-color: #eee;
}
progress[value]::-webkit-progress-value {
background-color: #777;
}
progress[value]::-moz-progress-bar {
background-color: #777;
}
/*********************
Accessibility
********************/
abbr {
speak: spell-out;
}
[aria-busy='true'] {
cursor: progress;
}
[aria-controls] {
cursor: pointer;
}
[aria-disabled='true'],
[disabled] {
cursor: not-allowed;
}
[aria-hidden='false'][hidden] {
display: initial;
}
[aria-hidden='false'][hidden]:not(:focus) {
clip: rect(0,0,0,0);
position: absolute;
}
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-delay: -1ms !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
background-attachment: initial !important;
transition-delay: 0s !important;
transition-duration: 0s !important;
scroll-behavior: auto !important;
}
}
/*********************
Browser Hacks
*********************/
::-ms-expand {
display: none;
}
::-moz-focus-inner {
border-style: none;
padding: 0;
}
:-moz-ui-invalid {
box-shadow: none;
}
/* MS Edge 12-18 hack (Poor text-decoration support) */
@supports (-ms-accelerator:true) or (-ms-ime-align:auto) {
abbr[title] {
text-decoration: none;
border-bottom: 1px dotted #999;
}
ins {
text-decoration: none;
}
}
/*********************
Responsive elements
*********************/
/* Mobile Devices */
@media only screen and (min-device-width: 320px) and (max-device-height: 1080px) and (-webkit-min-device-pixel-ratio: 2) {
body {
min-height: 100vh;
min-height: -webkit-fill-available;
}
a img {
cursor: pointer;
}
[aria-label]:hover::after {
visibility: hidden;
}
}
/* Phone (Portrait) and narrow screen */
@media only screen and (min-width: 320px) and (max-width: 812px) {
body {
font-size: 0.96em;
}
nav,
header,
main,
footer,
aside,
section,
article,
iframe,
table {
width: 100%;
float: none;
position: relative;
}
fieldset {
width: auto;
}
}
/* Printing */
@media print {
@page {
size: a3;
}
*,
*::before,
*::after {
text-shadow: none !important;
box-shadow: none !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
page-break-after: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
table,
tr,
li,
img,
pre,
menu,
nav,
blockquote,
fieldset,
figure,
video,
picture,
address,
select,
textarea {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
max-width: 100%;
}
hr {
border-bottom: 1px solid #666;
}
thead {
display: table-header-group;
}
pre {
overflow-x: auto;
white-space: pre-wrap !important;
word-wrap: break-word;
}
abbr {
border: none;
text-decoration: none !important;
}
abbr[title]::after {
content: " (" attr(title) ")";
font-size: 80%;
color: grey;
}
[href] {
text-decoration: underline !important;
}
main [href]::after {
content: " (" attr(href) ")";
font-size: 70%;
color: grey;
}
[type='range'],
meter,
progress {
border: 1px solid #666;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.