mirror of
https://github.com/jgthms/minireset.css.git
synced 2024-10-22 22:31:05 +08:00
424 lines
7.3 KiB
CSS
424 lines
7.3 KiB
CSS
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
|
|
html,
|
|
body,
|
|
p,
|
|
ol,
|
|
ul,
|
|
li,
|
|
dl,
|
|
dt,
|
|
dd,
|
|
blockquote,
|
|
figure,
|
|
fieldset,
|
|
legend,
|
|
textarea,
|
|
pre,
|
|
iframe,
|
|
hr,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
margin: 0;
|
|
padding: 0; }
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6 {
|
|
font-size: 100%;
|
|
font-weight: normal; }
|
|
|
|
ul {
|
|
list-style: none; }
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
margin: 0; }
|
|
|
|
html {
|
|
box-sizing: border-box; }
|
|
|
|
*, *::before, *::after {
|
|
box-sizing: inherit; }
|
|
|
|
img,
|
|
video {
|
|
height: auto;
|
|
max-width: 100%; }
|
|
|
|
iframe {
|
|
border: 0; }
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0; }
|
|
|
|
td,
|
|
th {
|
|
padding: 0; }
|
|
td:not([align]),
|
|
th:not([align]) {
|
|
text-align: left; }
|
|
|
|
html {
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-font-smoothing: antialiased;
|
|
background: #fff;
|
|
color: #666666;
|
|
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
|
font-size: 18px;
|
|
min-width: 300px;
|
|
overflow-x: hidden;
|
|
text-rendering: optimizeLegibility; }
|
|
|
|
body {
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
line-height: 1.4;
|
|
padding-bottom: calc((6.2rem * 3) - 2px); }
|
|
|
|
.header, .snippets, .nav, .main {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: 29rem; }
|
|
|
|
.snippets {
|
|
max-width: 58rem; }
|
|
|
|
.snippet {
|
|
position: relative; }
|
|
.snippet button {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
right: 0.5em;
|
|
top: 0.5em; }
|
|
|
|
a {
|
|
color: #fc0c18;
|
|
text-decoration: none; }
|
|
|
|
strong {
|
|
color: #333333;
|
|
font-weight: 700; }
|
|
|
|
.content {
|
|
background: white;
|
|
padding: 3rem 1rem;
|
|
position: relative;
|
|
z-index: 1; }
|
|
|
|
.header {
|
|
text-align: center; }
|
|
.header figure {
|
|
display: block;
|
|
height: 160px;
|
|
margin: 0 auto 1rem;
|
|
width: 160px; }
|
|
.header figure img {
|
|
display: block;
|
|
height: 160px;
|
|
width: 160px; }
|
|
.header h1 {
|
|
color: #333333;
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
margin: 0; }
|
|
.header p {
|
|
margin: 0; }
|
|
|
|
.ghbtns {
|
|
height: 30px;
|
|
margin-bottom: 3rem;
|
|
margin-top: 1rem;
|
|
overflow: hidden;
|
|
text-align: center; }
|
|
.ghbtns iframe {
|
|
display: inline-block;
|
|
vertical-align: top; }
|
|
|
|
.nav {
|
|
margin-bottom: 3rem;
|
|
margin-top: 1rem;
|
|
text-align: center; }
|
|
|
|
.button, .or {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none; }
|
|
|
|
.html, .css, .button, .npm {
|
|
border-radius: 3px;
|
|
line-height: 1.2;
|
|
padding: 1.5rem;
|
|
transition: background 86ms ease-out; }
|
|
|
|
.html, .css {
|
|
background-color: #333333;
|
|
font-family: monospace;
|
|
font-size: 0.8rem;
|
|
text-align: left; }
|
|
|
|
.button, .npm {
|
|
align-items: center;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
text-align: center; }
|
|
|
|
.button {
|
|
background: #fc0c18;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
text-decoration: none; }
|
|
.button strong {
|
|
color: #fff;
|
|
font-size: 1.1em; }
|
|
.button span {
|
|
display: block; }
|
|
.button small {
|
|
display: block;
|
|
opacity: 0.7; }
|
|
.button em {
|
|
color: rgba(255, 255, 255, 0.5);
|
|
display: block;
|
|
font-size: 0.8em;
|
|
font-style: normal;
|
|
margin-top: 0.5em; }
|
|
.button:hover {
|
|
background: #a0020a; }
|
|
|
|
.or {
|
|
margin: 1rem;
|
|
text-align: center; }
|
|
|
|
.npm {
|
|
background: #eee;
|
|
color: #333333;
|
|
font-family: monospace;
|
|
font-size: 0.8rem; }
|
|
|
|
.main p {
|
|
margin-bottom: 1em; }
|
|
.main a:hover {
|
|
text-decoration: underline; }
|
|
.main ul {
|
|
list-style: disc outside; }
|
|
.main li + li {
|
|
margin-top: 1em; }
|
|
.main li strong {
|
|
display: block;
|
|
font-size: 1.1em; }
|
|
.main li strong em {
|
|
color: #fd3f49;
|
|
font-style: normal; }
|
|
.main li strong em.preserves {
|
|
color: #02d461; }
|
|
.main li strong em.sets {
|
|
color: #0d91fd; }
|
|
|
|
.footer {
|
|
background: #1a1a1a;
|
|
bottom: 0;
|
|
box-shadow: inset 0 2rem 3rem black;
|
|
color: #b3b3b3;
|
|
left: 0;
|
|
padding-top: 2rem;
|
|
position: fixed;
|
|
right: 0; }
|
|
.footer a {
|
|
color: #4d4d4d;
|
|
display: block;
|
|
line-height: 1;
|
|
padding: 2rem;
|
|
transition: background 29ms ease-out; }
|
|
.footer a span {
|
|
display: block;
|
|
font-size: 0.8rem;
|
|
margin-bottom: 0.4rem; }
|
|
.footer a strong {
|
|
color: gray;
|
|
display: block;
|
|
font-weight: normal;
|
|
transition: background 29ms ease-out; }
|
|
.footer a:hover {
|
|
background: #fd3f49;
|
|
color: rgba(0, 0, 0, 0.3); }
|
|
.footer a:hover strong {
|
|
color: rgba(0, 0, 0, 0.5); }
|
|
.footer a:nth-child(2):hover {
|
|
background: #0d91fd; }
|
|
.footer a:nth-child(3):hover {
|
|
background: #02d461; }
|
|
|
|
.fork-me {
|
|
display: block;
|
|
height: 140px;
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
width: 140px; }
|
|
.fork-me img {
|
|
display: block;
|
|
height: 140px;
|
|
width: 140px; }
|
|
|
|
@media (max-width: 699px) {
|
|
.main {
|
|
padding: 0 1rem 0 2rem; }
|
|
|
|
.fork-me {
|
|
position: absolute; } }
|
|
@media (min-width: 700px) {
|
|
body {
|
|
padding-bottom: calc(6.2rem - 2px); }
|
|
|
|
.content {
|
|
padding: 5rem; }
|
|
|
|
.footer {
|
|
display: flex; }
|
|
.footer a {
|
|
flex-grow: 1; } }
|
|
.native-js {
|
|
border-radius: 3px;
|
|
display: none;
|
|
font-size: 1rem;
|
|
opacity: 0;
|
|
margin-bottom: 3rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
max-width: 50rem;
|
|
visibility: hidden; }
|
|
|
|
.native-show {
|
|
display: block;
|
|
opacity: 1;
|
|
visibility: visible; }
|
|
|
|
.native-flex {
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 2em;
|
|
text-decoration: none; }
|
|
|
|
.native-img {
|
|
border-radius: 3px;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
height: 50px;
|
|
width: 125px; }
|
|
|
|
.native-details {
|
|
flex-grow: 1;
|
|
flex-shrink: 1; }
|
|
|
|
.native-main {
|
|
align-items: center;
|
|
flex-grow: 0;
|
|
flex-shrink: 1;
|
|
max-width: 640px; }
|
|
|
|
.native-company {
|
|
display: block;
|
|
font-size: 0.625em;
|
|
letter-spacing: 2px;
|
|
margin-bottom: 4px;
|
|
text-transform: uppercase; }
|
|
|
|
.native-desc {
|
|
display: block; }
|
|
|
|
.native-cta {
|
|
border: none;
|
|
border-radius: 3px;
|
|
box-shadow: 0 6px 13px 0 rgba(0, 0, 0, 0.15);
|
|
display: inline-block;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
font-size: 0.75em;
|
|
font-weight: 400;
|
|
padding: 0.75em 1em;
|
|
text-transform: uppercase;
|
|
transform: translateY(-1px);
|
|
transition: transform 0.3s ease-in-out;
|
|
vertical-align: top;
|
|
white-space: nowrap; }
|
|
.native-cta:hover {
|
|
box-shadow: none;
|
|
transform: translateY(1px); }
|
|
|
|
@media screen and (max-width: 599px) {
|
|
.native-flex {
|
|
display: block;
|
|
text-align: center; }
|
|
|
|
.native-main {
|
|
margin-bottom: 2em; }
|
|
|
|
.native-details {
|
|
margin: 1em; } }
|
|
@media screen and (min-width: 600px) {
|
|
.native-flex {
|
|
display: flex;
|
|
text-align: left; }
|
|
|
|
.native-main {
|
|
display: flex;
|
|
margin-right: 2em; }
|
|
|
|
.native-details {
|
|
margin-left: 2em; } }
|
|
@media screen and (min-width: 1200px) {
|
|
.native-js {
|
|
font-size: 1.25rem; } }
|
|
.hljs {
|
|
background-color: #282a36;
|
|
color: #f8f8f2;
|
|
white-space: pre-wrap;
|
|
word-break: break-word; }
|
|
|
|
.hljs-comment {
|
|
color: #6272a4; }
|
|
|
|
.hljs-tag {
|
|
color: #8be9fd; }
|
|
|
|
.hljs-name {
|
|
color: #ffb86c; }
|
|
|
|
.hljs-attr {
|
|
color: #bd93f9; }
|
|
|
|
.hljs-string {
|
|
color: #ff5555; }
|
|
|
|
.hljs-keyword {
|
|
color: #8be9fd; }
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
html, .content {
|
|
background-color: #1a1a1a;
|
|
color: #888; }
|
|
|
|
.header h1, strong {
|
|
color: #fff; }
|
|
|
|
.npm {
|
|
background: #333333;
|
|
color: #888; }
|
|
|
|
.footer {
|
|
background: #0d0d0d; } }
|