@alamantus/lighter
Version:
a ridiculously small css framework
135 lines (113 loc) • 1.71 kB
CSS
:root {
--font: sans-serif; /* Recommended: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif */
--primary-color: #a0c;
--light: #eee;
}
html {
font-family: var(--font);
}
html, input, select, option, text {
font-size: 12pt;
}
* {
box-sizing: border-box;
}
* + * {
margin: .5em 0;
}
a {
color: var(--primary-color);
text-decoration: none;
}
code {
font-family: monospace;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 2.2em;
}
h3 {
font-size: 2em;
}
h4 {
font-size: 1.5em;
}
h5 {
font-size: 1.2em;
}
h6 {
font-size: 1em;
}
pre {
overflow: auto;
}
td,
th {
padding: 1em;
text-align: left;
border-bottom: solid var(--light);
}
.c {
max-width: 60em;
padding: 1em;
margin: auto;
}
a:hover,
.btn:hover {
opacity: .6;
}
.card,
pre {
padding: 1em;
border: solid var(--light);
}
.card:focus,
hr {
outline: 0;
border: solid var(--primary-color);
}
.btn {
padding: 1em;
letter-spacing: .1em;
border: solid;
cursor: pointer;
font-size: 1em;
}
.btn.primary {
color: white;
background: var(--primary-color);
border: solid var(--primary-color);
}
.w-100,
.row {
width: 100%;
}
@media(min-width:35em) {
.row {
display: table;
border-spacing: 1em 0;
}
.col {
display: table-cell;
}
.\31 {
width: 5%;
}
.\32 {
width: 15%;
}
.\33 {
width: 22%;
}
.\34 {
width: 30%;
}
.\35 {
width: 40%;
}
.\36 {
width: 50%;
}
}