Last active
November 3, 2023 16:28
-
-
Save midkiffaries/596799b14e6904ef3bea272902b41dee to your computer and use it in GitHub Desktop.
tedillize.css - My own personal CSS normalization stylesheet. It combines a lot of different styles and stylesheets found throughout the web.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@charset "UTF-8"; | |
/******************************************** | |
Tedilize 2.0 - Normalization and Base Styling | |
*********************************************/ | |
*, | |
*::before, | |
*::after { | |
box-sizing: border-box; | |
vertical-align: inherit; | |
} | |
*::before, | |
*::after { | |
text-decoration: inherit; | |
white-space: pre; | |
line-height: 1; | |
} | |
html { | |
-webkit-text-size-adjust: 100%; | |
-webkit-tap-highlight-color: rgba(0,0,0,0); | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
touch-action: manipulation; | |
-moz-tab-size: 4; | |
tab-size: 4; | |
font-family: | |
system-ui, | |
-apple-system, | |
'Segoe UI', | |
Roboto, | |
'Liberation Sans', | |
sans-serif, | |
'Apple Color Emoji', | |
'Segoe UI Emoji', | |
'Noto Color Emoji'; | |
} | |
html:focus-within { | |
scroll-behavior: smooth; | |
} | |
/********************* | |
Document | |
*********************/ | |
body { | |
background-color: #fefefe; | |
color: #111; | |
font-size: 1rem; | |
line-height: 1.5; | |
margin: 0; | |
min-height: 100%; | |
} | |
hr { | |
margin: 1rem 0; | |
color: inherit; | |
background-color: currentColor; | |
border: 0; | |
clear: both; | |
} | |
hr:not([size]) { | |
height: 1px; | |
} | |
blockquote { | |
-webkit-hyphens: auto; | |
hyphens: auto; | |
margin: 0 0 1rem; | |
} | |
address { | |
font-style: normal; | |
line-height: inherit; | |
} | |
p { | |
orphans: 3; | |
widows: 3; | |
} | |
/* Clearfix */ | |
header::after, | |
main::after, | |
footer::after, | |
figure::after { | |
content: ""; | |
clear: both; | |
display: table; | |
} | |
/********************* | |
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; | |
padding: 0.1em; | |
} | |
small { | |
font-size: 80%; | |
} | |
ins { | |
-webkit-text-decoration: underline dashed currentColor; | |
text-decoration: underline dashed currentColor; | |
} | |
abbr[title] { | |
-webkit-text-decoration: underline dotted currentColor; | |
text-decoration: underline dotted currentColor; | |
cursor: help; | |
border-bottom: none; | |
} | |
/********************* | |
Headings | |
*********************/ | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6 { | |
line-height: 1; | |
margin: 1.2rem auto 0.5rem; | |
font-weight: 400; | |
page-break-after: avoid; | |
page-break-inside: avoid; | |
} | |
h1 { | |
font-size: 2.5rem; | |
} | |
h2 { | |
font-size: 2.1rem; | |
} | |
h3 { | |
font-size: 1.75rem; | |
font-weight: bolder; | |
} | |
h4 { | |
font-size: 1.5rem; | |
} | |
h5 { | |
font-size: 1.25rem; | |
font-weight: bold; | |
} | |
h6 { | |
font-size: 1.1rem; | |
font-weight: bolder; | |
} | |
/********************* | |
Tables | |
*********************/ | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
text-indent: 0; | |
width: 100%; | |
} | |
td, | |
th { | |
padding: 0.15em 0.5em; | |
line-height: 1.15; | |
text-align: inherit; | |
text-align: -webkit-match-parent; | |
text-overflow: ellipsis; | |
vertical-align: text-top; | |
font-variant-numeric: tabular-nums; | |
} | |
caption { | |
padding: 0.5rem; | |
} | |
/********************* | |
List elements | |
*********************/ | |
ul, | |
ol { | |
padding-left: 2rem; | |
page-break-before: avoid; | |
} | |
dt { | |
font-weight: bolder; | |
} | |
dd { | |
margin-left: 2rem; | |
} | |
nav ol, | |
nav ul, | |
menu { | |
list-style: none; | |
padding: 0; | |
} | |
/********************* | |
Monospace elements | |
*********************/ | |
code, | |
kbd, | |
samp, | |
pre { | |
direction: ltr; | |
unicode-bidi: bidi-override; | |
white-space: pre-wrap; | |
font-size: 1em; | |
font-family: | |
SFMono-Regular, | |
Menlo, | |
Monaco, | |
Consolas, | |
'Roboto Mono', | |
'Liberation Mono', | |
monospace; | |
} | |
kbd { | |
background-color: #ddd; | |
padding: 0.1rem 0.4rem; | |
border-radius: 0.2rem; | |
border-bottom: 1px solid #aaa; | |
white-space: nowrap; | |
} | |
pre { | |
display: block; | |
word-break: break-all; | |
line-height: 1.4; | |
font-size: 0.9rem; | |
} | |
pre code { | |
font-size: inherit; | |
color: inherit; | |
word-break: normal; | |
display: inline-block; | |
} | |
a > code { | |
color: inherit; | |
} | |
/********************* | |
Images and figures | |
*********************/ | |
img, | |
video, | |
audio, | |
iframe { | |
height: auto; | |
max-width: 100%; | |
vertical-align: middle; | |
border: none; | |
object-fit: cover; | |
margin: 0; | |
} | |
img[src$='.gif'] { | |
image-rendering: crisp-edges; | |
image-rendering: pixelated; | |
} | |
a img { | |
object-fit: contain; | |
} | |
figure { | |
margin: 0 0 0.1rem; | |
display: inline-block; | |
} | |
figcaption { | |
text-align: center; | |
padding: 0.6em 0.2em; | |
line-height: 1.2; | |
} | |
svg:not(:root) { | |
height: auto; | |
max-width: 100%; | |
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 { | |
color: inherit; | |
-webkit-tap-highlight-color: rgba(220,220,220,0.4); | |
} | |
a::before, | |
a::after { | |
display: inline-block; | |
text-decoration: none; | |
} | |
a:not([href]) { | |
pointer-events: none; | |
text-decoration: none; | |
} | |
/* Details/Summary Element */ | |
summary { | |
cursor: pointer; | |
display: list-item; | |
} | |
/* 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-color: #fff; | |
color: inherit; | |
} | |
dialog:not([open]) { | |
display: none; | |
} | |
/********************* | |
Form elements | |
*********************/ | |
::placeholder { | |
color: #888; | |
} | |
input:not(:focus):invalid { | |
color: #d00; | |
} | |
[hidden] { | |
display: none !important; | |
} | |
[disabled], | |
[disabled] + label[for] { | |
opacity: 0.4; | |
pointer-events: none; | |
} | |
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; | |
background: inherit; | |
} | |
[role='listbox'], | |
button, | |
input, | |
select, | |
textarea { | |
background-color: #fff; | |
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; | |
overflow: hidden; | |
cursor: pointer; | |
} | |
select:not([multiple]):not([size]) { | |
padding-right: 1.4em; | |
background-position: 100% 50%; | |
background-size: 1em; | |
background-repeat: no-repeat; | |
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><path 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'/></svg>"); | |
} | |
button, | |
[type='button'], | |
[type='reset'], | |
[type='submit'] { | |
background-color: #eee; | |
overflow: visible; | |
cursor: pointer; | |
-webkit-appearance: none; | |
-webkit-touch-callout: none; | |
-webkit-user-select: none; | |
user-select: none; | |
text-wrap: balance; | |
} | |
[type='checkbox'], | |
[type='radio'] { | |
cursor: pointer; | |
font-size: inherit; | |
margin: 0; | |
accent-color: currentColor; | |
width: 1rem; | |
height: 1rem; | |
} | |
textarea { | |
overflow: auto; | |
resize: vertical; | |
vertical-align: middle; | |
-webkit-appearance: none; | |
overscroll-behavior-y: contain; | |
} | |
label { | |
display: inline-block; | |
} | |
label[for] { | |
cursor: pointer; | |
} | |
output { | |
display: inline-block; | |
font-weight: bold; | |
margin: auto 0.2em; | |
} | |
fieldset { | |
width: auto; | |
padding: 0 0.5em 0.5em; | |
border: 1px solid currentColor; | |
} | |
legend { | |
padding: 0 0.3rem; | |
max-width: 100%; | |
white-space: normal; | |
margin-bottom: 0.2rem; | |
line-height: inherit; | |
font-size: 1.1rem; | |
} | |
legend + * { | |
clear: left; | |
} | |
/* 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; | |
} | |
:out-of-range { | |
color: #d00; | |
} | |
::-webkit-inner-spin-button { | |
-webkit-appearance: none; | |
} | |
/* Input Search */ | |
[type='search'] { | |
-webkit-appearance: textfield; | |
} | |
::-webkit-search-decoration { | |
-webkit-appearance: none; | |
} | |
/* Input File Upload */ | |
::file-selector-button { | |
font: inherit; | |
} | |
::-webkit-file-upload-button { | |
-webkit-appearance: button; | |
font: inherit; | |
} | |
/* Input Range */ | |
[type='range'] { | |
-webkit-appearance: none; | |
height: 1.8em; | |
width: 9em; | |
vertical-align: middle; | |
background-color: transparent !important; | |
font: 1.1em/1 arial, sans-serif; | |
border: none; | |
cursor: pointer; | |
} | |
::-webkit-slider-runnable-track { | |
border-radius: 0.3em; | |
height: 0.5rem; | |
background: #ccc; | |
} | |
::-moz-range-track { | |
border-radius: 0.3em; | |
height: 0.5em; | |
background: #ccc; | |
} | |
::-webkit-slider-thumb { | |
-webkit-appearance: none; | |
margin-top: -0.35em; | |
width: 1.15em; | |
height: 1.15em; | |
border-radius: 50%; | |
background: #eee; | |
border: 2px solid #aaa; | |
} | |
::-moz-range-thumb { | |
-moz-appearance: none; | |
width: 1em; | |
height: 1em; | |
border-radius: 50%; | |
background: #eee; | |
border: 2px solid #aaa; | |
} | |
/* Meter */ | |
meter { | |
height: 1.5em; | |
border: 1px solid #bbb; | |
} | |
::-webkit-meter-bar { | |
border-radius: 0; | |
height: 1.35em; | |
} | |
::-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; | |
} | |
::-webkit-progress-bar { | |
background-color: #eee; | |
} | |
::-webkit-progress-value { | |
background-color: #777; | |
} | |
::-moz-progress-bar { | |
background-color: #777; | |
} | |
/********************* | |
Firefox Hacks | |
*********************/ | |
::-moz-focus-inner { | |
border-style: none; | |
padding: 0; | |
} | |
:-moz-ui-invalid { | |
box-shadow: none; | |
} | |
/********************* | |
Responsive elements | |
*********************/ | |
/* Work around for Phones with a notch */ | |
@supports (padding:max(0px)) { | |
body { | |
padding-left: min(0vmin, env(safe-area-inset-left)); | |
padding-right: min(0vmin, env(safe-area-inset-right)); | |
} | |
} | |
/* Remove all animations and transitions for people that prefer not to see them */ | |
@media (prefers-reduced-motion: reduce) { | |
*, | |
*::before, | |
*::after { | |
animation-duration: 0.01ms !important; | |
animation-iteration-count: 1 !important; | |
transition-duration: 0.01ms !important; | |
scroll-behavior: auto !important; | |
} | |
html:focus-within { | |
scroll-behavior: auto !important; | |
} | |
} | |
/* Mobile Devices */ | |
@media (-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 (max-width: 812px) { | |
body { | |
font-size: 0.96em; | |
} | |
header, | |
main, | |
footer, | |
aside, | |
iframe, | |
table { | |
width: 100% !important; | |
float: none !important; | |
position: relative; | |
} | |
} | |
/* Print Friendly */ | |
@media print { | |
@page { margin: 2cm; } | |
*, | |
*::before, | |
*::after { | |
color: #111; | |
text-shadow: none; | |
} | |
hr, | |
mark { | |
-webkit-print-color-adjust: exact; | |
print-color-adjust: exact; | |
} | |
table, | |
img, | |
pre, | |
nav, | |
svg, | |
iframe, | |
blockquote, | |
figure, | |
video, | |
picture, | |
address, | |
select, | |
textarea { | |
-webkit-column-break-inside: avoid; | |
page-break-inside: avoid; | |
break-inside: avoid; | |
max-width: 100%; | |
} | |
thead { | |
display: table-header-group; | |
} | |
pre { | |
overflow-x: auto; | |
white-space: pre-wrap !important; | |
} | |
abbr[title]::after { | |
content: " (" attr(title) ")"; | |
} | |
a[href] { | |
background: transparent; | |
text-decoration: underline; | |
page-break-inside: avoid; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment