228 lines
3.1 KiB
CSS
228 lines
3.1 KiB
CSS
:root {
|
|
/* Colors */
|
|
--primaryColor: #212529;
|
|
--secondaryColor: #95a5a6;
|
|
--accentColor: #f1c40f;
|
|
--linkColor: #2ecc71;
|
|
--mutedColor: #f4f6f6;
|
|
|
|
/* Typography */
|
|
--ratio: 1.25;
|
|
--scale0: 1rem;
|
|
--scale1: calc(var(--scale0) * var(--ratio));
|
|
--scale2: calc(var(--scale1) * var(--ratio));
|
|
--scale3: calc(var(--scale2) * var(--ratio));
|
|
--scale4: calc(var(--scale3) * var(--ratio));
|
|
--scale5: calc(var(--scale4) * var(--ratio));
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
font-size: 14px;
|
|
}
|
|
|
|
body {
|
|
color: var(--primaryColor);
|
|
display: grid;
|
|
font: 1em/1.5 Lato, sans-serif;
|
|
gap: 2em;
|
|
grid-template-columns:
|
|
[full-start]
|
|
1fr
|
|
[main-start side-start]
|
|
minmax(min-content, 12em)
|
|
[side-end content-start]
|
|
minmax(min-content, 36em)
|
|
[main-end content-end]
|
|
1fr
|
|
[full-end];
|
|
grid-template-rows: auto [content] 0;
|
|
margin-bottom: 4em;
|
|
}
|
|
|
|
body::before {
|
|
content: '';
|
|
grid-column: full;
|
|
grid-row: content;
|
|
}
|
|
|
|
ol,
|
|
ul {
|
|
padding-left: 1em;
|
|
}
|
|
|
|
li + li {
|
|
margin-top: 0.4em;
|
|
}
|
|
|
|
li::marker,
|
|
.network {
|
|
color: var(--secondaryColor);
|
|
}
|
|
|
|
a {
|
|
color: var(--linkColor);
|
|
text-decoration: none;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
a:focus,
|
|
a:hover {
|
|
color: var(--accentColor);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h5 {
|
|
font-weight: normal;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
line-height: 1.2;
|
|
}
|
|
|
|
h1 {
|
|
font-size: var(--scale5);
|
|
}
|
|
|
|
h2 {
|
|
color: var(--secondaryColor);
|
|
font-size: var(--scale4);
|
|
}
|
|
|
|
h3 {
|
|
color: var(--accentColor);
|
|
font-size: var(--scale3);
|
|
grid-column: side;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
h4 {
|
|
font-size: var(--scale2);
|
|
}
|
|
|
|
h5 {
|
|
font-size: var(--scale1);
|
|
}
|
|
|
|
h6 {
|
|
font-size: var(--scale0);
|
|
}
|
|
|
|
blockquote {
|
|
border-left: 0.2em solid var(--mutedColor);
|
|
padding-left: 1em;
|
|
}
|
|
|
|
cite {
|
|
color: var(--secondaryColor);
|
|
font-style: inherit;
|
|
}
|
|
|
|
cite::before {
|
|
content: '— ';
|
|
}
|
|
|
|
svg {
|
|
fill: none;
|
|
margin-right: 0.2em;
|
|
stroke: currentColor;
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
stroke-width: 2;
|
|
vertical-align: -0.2em;
|
|
}
|
|
|
|
.masthead {
|
|
background: var(--mutedColor);
|
|
display: inherit;
|
|
gap: inherit;
|
|
grid-column: full;
|
|
grid-template-columns: inherit;
|
|
padding: 4em 0;
|
|
}
|
|
|
|
.masthead > *,
|
|
section {
|
|
grid-column: main;
|
|
}
|
|
|
|
article > * + *,
|
|
blockquote > * + * {
|
|
margin-top: 0.6em;
|
|
}
|
|
|
|
.stack {
|
|
display: grid;
|
|
gap: 1.5em;
|
|
}
|
|
|
|
.icon-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.grid-list {
|
|
display: grid;
|
|
gap: 1em;
|
|
}
|
|
|
|
.spaced-list {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.spaced-list:first-child::before {
|
|
border-bottom: 1px solid var(--mutedColor);
|
|
content: '';
|
|
flex-grow: 1;
|
|
margin: 0 1em;
|
|
order: 1;
|
|
}
|
|
|
|
.spaced-list > :nth-child(2) {
|
|
order: 2;
|
|
}
|
|
|
|
.tag-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.tag-list > li {
|
|
background: var(--mutedColor);
|
|
margin: 0 0.2em 0.2em 0;
|
|
padding: 0.2em 0.6em;
|
|
}
|
|
|
|
@media print, (min-width: 48em) {
|
|
h3 {
|
|
text-align: right;
|
|
margin-bottom: inherit;
|
|
}
|
|
|
|
.masthead > *,
|
|
section {
|
|
grid-column: content;
|
|
}
|
|
|
|
section {
|
|
display: contents;
|
|
}
|
|
|
|
.grid-list {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|