blogng/css/theme.css
2019-08-03 23:15:42 +02:00

133 lines
1.9 KiB
CSS

@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono|IBM+Plex+Sans:400,500,500i,600,600i,700|IBM+Plex+Serif:400,400i,500,600,700&display=swap&subset=latin-ext');
html {
background-color:#fefefe
}
.header {
display: grid;
grid-template-columns: 70% 30%;
grid-template-rows: auto;
font-family: 'IBM Plex Sans', sans-serif;
font-weight: 500;
font-size: 10pt;
}
#title {
grid-column-start: 1;
font-size: 12pt;
text-align: left;
}
#nav {
grid-column-start: 2;
text-align: right;
font-variant: small-caps;
word-spacing: 110%;
}
body {
font-family: 'IBM Plex Serif', serif;
font-weight: 400;
color: #454545;
font-size: 12pt;
margin: 2em auto;
max-width: 800px;
padding: 1em;
line-height: 1.4;
text-align: left;
}
video, code {
font-weight: 500;
max-width: 100%;
font-family: 'IBM Plex Mono', monospace;
}
img {
max-width: 100%;
margin: 0px;
}
figure {
margin: 2em;
}
figcaption {
font-size: 8pt;
text-align: center;
font-family: serif;
}
.postmeta {
display: inline-grid;
grid-template-columns: auto auto;
grid-template-rows: auto;
font-size: 10pt;
}
#date {
font-weight: bold;
}
#tags:before {
content: "—";
margin: 1px;
}
h1 {
font-size: 22pt;
font-weight: normal;
}
h2 {
font-size: 16pt;
margin-top: 1.5em;
font-weight: bold;
}
h3 {
font-size: 14pt;
}
article > ul {
padding-left: 0;
}
ul > li {
list-style: none;
}
ul > li:before {
content: "—";
}
#footerdiv {
margin-top: 50px;
}
footer {
margin-top: 10px;
text-align: center;
}
a {
color: #454545;
font-weight: 430;
text-decoration-color: #808080;
}
sup > a {
color: #454545;
font-weight: 430;
text-decoration-color: #808080;
vertical-align: super;
}
code {
background-color: #ddd;
}