Created
May 18, 2020 23:39
-
-
Save sirodoht/c2d8c63468c408a6c12d0ea39ee07d90 to your computer and use it in GitHub Desktop.
new.css lite version without fonts and minification https://newcss.net/
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
:root { | |
--text-color: #1a1a1a; | |
--light-grey-color: #f6f8fa; | |
--grey-color: #e5e7eb; | |
--link-color: #0070f3; | |
--link-accent-color: #0366d6; | |
--light-cyan-color: #79ffe1; | |
--dark-cyan-color: #0c4047; | |
} | |
* { | |
margin: 0; | |
padding: 0; | |
} | |
address, | |
area, | |
article, | |
aside, | |
audio, | |
blockquote, | |
datalist, | |
details, | |
dl, | |
fieldset, | |
figure, | |
form, | |
input, | |
iframe, | |
img, | |
meter, | |
nav, | |
ol, | |
optgroup, | |
option, | |
output, | |
p, | |
pre, | |
progress, | |
ruby, | |
section, | |
table, | |
textarea, | |
ul, | |
video { | |
margin-bottom: 1rem; | |
} | |
html, | |
input, | |
select, | |
button { | |
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; | |
} | |
body { | |
margin: 0 auto; | |
max-width: 750px; | |
padding: 2rem; | |
border-radius: 6px; | |
overflow-x: hidden; | |
color: var(--text-color); | |
font-size: 1.03rem; | |
line-height: 1.5; | |
} | |
::selection { | |
background: var(--light-cyan-color); | |
color: var(--dark-cyan-color); | |
} | |
p { | |
margin-bottom: 1rem; | |
} | |
h1, | |
h2, | |
h3, | |
h4, | |
h5, | |
h6 { | |
line-height: 1; | |
color: var(--nc-tx-1); | |
padding-top: .875rem; | |
} | |
h1, | |
h2, | |
h3 { | |
color: var(--nc-tx-1); | |
padding-bottom: 2px; | |
margin-bottom: 8px; | |
border-bottom: 1px solid var(--light-grey-color); | |
} | |
h4, | |
h5, | |
h6 { | |
margin-bottom: .3rem; | |
} | |
h1 { | |
font-size: 2.25rem; | |
} | |
h2 { | |
font-size: 1.85rem; | |
} | |
h3 { | |
font-size: 1.55rem; | |
} | |
h4 { | |
font-size: 1.25rem; | |
} | |
h5 { | |
font-size: 1rem; | |
} | |
h6 { | |
font-size: .875rem; | |
} | |
a { | |
color: var(--link-color); | |
} | |
a:hover { | |
color: var(--link-accent-color); | |
} | |
abbr:hover { | |
cursor: help; | |
} | |
blockquote { | |
padding: 1.5rem; | |
background: var(--light-grey-color); | |
border-left: 5px solid var(--grey-color); | |
} | |
abbr { | |
cursor: help; | |
} | |
blockquote :last-child { | |
padding-bottom: 0; | |
margin-bottom: 0; | |
} | |
header { | |
background: var(--light-grey-color); | |
border-bottom: 1px solid var(--grey-color); | |
padding: 2rem 1.5rem; | |
margin: -2rem calc(0px - (50vw - 50%)) 2rem; | |
padding-left: calc(50vw - 50%); | |
padding-right: calc(50vw - 50%); | |
} | |
header h1, | |
header h2, | |
header h3 { | |
padding-bottom: 0; | |
border-bottom: 0; | |
} | |
header> :first-child { | |
margin-top: 0; | |
padding-top: 0; | |
} | |
header> :last-child { | |
margin-bottom: 0; | |
} | |
a button, | |
button, | |
input[type="submit"], | |
input[type="reset"], | |
input[type="button"] { | |
font-size: 1rem; | |
display: inline-block; | |
padding: 6px 12px; | |
text-align: center; | |
text-decoration: none; | |
white-space: nowrap; | |
background: var(--link-color); | |
border: 0; | |
border-radius: 4px; | |
box-sizing: border-box; | |
cursor: pointer; | |
} | |
a button[disabled], | |
button[disabled], | |
input[type="submit"][disabled], | |
input[type="reset"][disabled], | |
input[type="button"][disabled] { | |
cursor: default; | |
opacity: .5; | |
cursor: not-allowed; | |
} | |
a button:focus, | |
a button:hover, | |
button:focus, | |
button:hover, | |
input[type="submit"]:focus, | |
input[type="submit"]:hover, | |
input[type="reset"]:focus, | |
input[type="reset"]:hover, | |
input[type="button"]:focus, | |
input[type="button"]:hover { | |
background: var(--link-accent-color); | |
} | |
code, | |
pre, | |
kbd, | |
samp { | |
font-family: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace; | |
} | |
code, | |
samp, | |
kbd, | |
pre { | |
background: var(--light-grey-color); | |
border: 1px solid var(--grey-color); | |
border-radius: 4px; | |
padding: 3px 6px; | |
font-size: .9rem; | |
} | |
kbd { | |
border-bottom: 3px solid var(--grey-color); | |
} | |
pre { | |
padding: 1rem 1.4rem; | |
max-width: 100%; | |
overflow: auto; | |
} | |
pre code { | |
background: inherit; | |
font-size: inherit; | |
color: inherit; | |
border: 0; | |
padding: 0; | |
margin: 0; | |
} | |
code pre { | |
display: inline; | |
background: inherit; | |
font-size: inherit; | |
color: inherit; | |
border: 0; | |
padding: 0; | |
margin: 0; | |
} | |
details { | |
padding: .6rem 1rem; | |
background: var(--light-grey-color); | |
border: 1px solid var(--grey-color); | |
border-radius: 4px; | |
} | |
summary { | |
cursor: pointer; | |
font-weight: 700; | |
} | |
details[open] { | |
padding-bottom: .75rem; | |
} | |
details[open] summary { | |
margin-bottom: 6px; | |
} | |
details[open]>:last-child { | |
margin-bottom: 0; | |
} | |
dt { | |
font-weight: 700; | |
} | |
dd::before { | |
content: '→ '; | |
} | |
hr { | |
border: 0; | |
border-bottom: 1px solid var(--grey-color); | |
margin: 1rem auto; | |
} | |
fieldset { | |
margin-top: 1rem; | |
padding: 2rem; | |
border: 1px solid var(--grey-color); | |
border-radius: 4px; | |
} | |
legend { | |
padding: auto .5rem; | |
} | |
table { | |
border-collapse: collapse; | |
width: 100%; | |
} | |
td, | |
th { | |
border: 1px solid var(--grey-color); | |
text-align: left; | |
padding: .5rem; | |
} | |
th { | |
background: var(--light-grey-color); | |
} | |
tr:nth-child(even) { | |
background: var(--light-grey-color); | |
} | |
table caption { | |
font-weight: 700; | |
margin-bottom: .5rem; | |
} | |
textarea { | |
max-width: 100%; | |
} | |
ol, | |
ul { | |
padding-left: 2rem; | |
} | |
li { | |
margin-top: .4rem; | |
} | |
ul ul, | |
ol ul, | |
ul ol, | |
ol ol { | |
margin-bottom: 0; | |
} | |
mark { | |
padding: 3px 6px; | |
background: var(--light-cyan-color); | |
color: var(--dark-cyan-color); | |
} | |
textarea, | |
select, | |
input { | |
padding: 6px 12px; | |
margin-bottom: .5rem; | |
background: var(--light-grey-color); | |
color: var(--text-color); | |
border: 1px solid var(--light-grey-color); | |
border-radius: 4px; | |
box-shadow: none; | |
box-sizing: border-box; | |
} | |
textarea:focus, | |
select:focus, | |
input[type]:focus { | |
border: 1px solid var(--grey-color); | |
outline: 0; | |
} | |
img { | |
max-width: 100%; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment