Skip to content

Instantly share code, notes, and snippets.

@sirodoht
Created May 18, 2020 23:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sirodoht/c2d8c63468c408a6c12d0ea39ee07d90 to your computer and use it in GitHub Desktop.
Save sirodoht/c2d8c63468c408a6c12d0ea39ee07d90 to your computer and use it in GitHub Desktop.
new.css lite version without fonts and minification https://newcss.net/
: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