yarmo.eu/static/style.css
Yarmo Mackenbach d3bb84446f
All checks were successful
continuous-integration/drone/push Build is passing
Initial commit
2020-06-11 15:43:41 +02:00

359 lines
6.9 KiB
CSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

:root {
/* --clr-link: #7cafc2; */
/* --clr-link: #4ab4ab; */
/* --clr-subheader: #a1b56c; */
/* --clr-bg: #181818;
--clr-bg-alt: #282828;
--clr-border: #383838;
--clr-text: #e8e8e8;
--clr-text-long: #bababa;
--clr-header: #f7ca88;
--clr-subheader: #f7ca88;
--clr-link: hsl(175, 55%, 50%);
--clr-link-alt: #4ab4ab;
--clr-code: #ba8baf; */
--clr-bg: hsl(0,0%,95%);
--clr-bg-alt: hsl(0,0%,85%);
--clr-border: hsl(0,0%,80%);
--clr-text: hsl(0,0%,15%);
--clr-text-long: hsl(0,0%,10%);
--clr-text-highlight: hsl(0,50%,40%);
--clr-header: hsl(0,0%,15%);
--clr-subheader: hsl(0,0%,15%); /* hsl(36,87%,50%) */
--clr-link: hsl(175,50%,40%); /* hsl(175,42%,50%) */
--clr-link-alt: hsl(175,38%,60%);
--clr-code: hsl(0,0%,15%);
}
body {
font-family: 'dm', 'Courier New', Courier, monospace;
color: var(--clr-text);
line-height: 1.4em;
font-size: 1.1em;
background-color: var(--clr-bg);
margin: 24px;
}
.container {
width: 100%;
max-width: 800px;
margin: 64px auto 128px;
overflow: hidden;
}
.select-all {
user-select: all;
-ms-user-select: all;
-moz-user-select: all;
-webkit-user-select: all;
}
.code {
font-family: 'Courier New', Courier, monospace;
font-size: 0.9em;
padding: 8px;
background-color: var(--clr-bg);
border: solid 1px var(--clr-border);
border-radius: 3px;
overflow-x: auto;
}
a {
color: var(--clr-link);
font-weight: bold;
text-decoration: underline;
/* border-bottom: 1px solid var(--clr-link); */
}
a:hover {
color: var(--clr-text);
background-color: var(--clr-link-alt);
text-decoration: none;
}
h1 {
line-height: 1.2em;
}
h2 {
color: var(--clr-header);
font-weight: bold;
margin: 64px 0 0;
line-height: 1.2em;
}
h3 {
margin: 32px 0 0;
/* font-weight: bold; */
color: var(--clr-subheader);
/* text-decoration: underline; */
line-height: 1.2em;
}
.small {
font-size: 0.75em !important;
}
pre {
padding: 0 4px;
background-color: var(--clr-bg-alt);
border: 2px solid var(--clr-border);
overflow-x: auto;
}
code {
font-family: 'Courier New', Courier, monospace;
color: var(--clr-code);
background-color: var(--clr-bg-alt);
border: 2px solid var(--clr-border);
font-size: 0.9em;
}
pre > code {
border: 0;
}
p > code, li > code {
padding: 0 2px;
}
ul li {
list-style-type: "|> ";
}
blockquote {
margin-left: 0;
padding-left: 32px;
border-left: 2px solid #4ab4ab;
}
blockquote strong em {
color: var(--clr-text-highlight);
}
header.h-card {
margin-bottom: 64px;
}
.h-card {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.h-card .header-image {
flex: 1;
flex-basis: auto;
margin: 8px 0;
text-align: center;
}
.h-card .header-description {
flex: 100;
flex-basis: auto;
/* min-width: 360px; */
margin: 8px 0;
text-align: center;
}
.h-card .profile-picture {
max-width: 160px;
border-radius: 100%;
}
.h-card h1 {
font-size: 1.4em;
margin: 0 0 16px;
}
.h-card p {
font-size: 1.1em;
margin: 0 0 8px;
}
.h-card .social a {
display: inline-block;
width: 20px;
height: 20px;
padding: 8px;
margin: 0 4px;
border: 0;
}
.wrapper-table {
display: block;
margin: 24px 0 48px;
overflow-x: auto;
}
table {
width: 100%;
min-width: 640px;
border-top: 1px var(--clr-text) solid;
border-bottom: 1px var(--clr-text) solid;
border-collapse: collapse;
line-height: 1.4em;
}
table thead {
/* text-align: left; */
border-bottom: 1px var(--clr-text) solid;
}
/* table tbody {
margin: 4px 0;
} */
table th {
padding: 8px 12px;
}
table td {
padding: 10px 12px;
}
table.academic-record th:nth-child(1) {
width: 15%;
}
table.academic-record th:nth-child(2) {
width: 35%;
}
table.academic-record th:nth-child(3) {
width: auto;
}
table.work-experience th:nth-child(1) {
width: 15%;
}
table.work-experience th:nth-child(2) {
width: 35%;
}
table.work-experience th:nth-child(3) {
width: auto;
}
table.publications th:nth-child(1) {
width: 15%;
}
table.publications th:nth-child(2) {
width: 35%;
}
table.publications th:nth-child(3) {
width: auto;
}
table.music th:nth-child(1) {
width: 15%;
}
table.music th:nth-child(2) {
width: 35%;
}
table.music th:nth-child(3) {
width: auto;
}
/* Blog */
.longform_list {
margin: 2em 0 0;
}
.longform_list__item {
margin: 1em 0 0;
}
/* .longform_list__item a {
font-size: 1.4em;
} */
.longform__header {
font-size: 0.9em;
color: var(--clr-subheader);
}
.longform__content {
margin: 64px 0 0;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 1.2em;
line-height: 1.8em;
color: var(--clr-text-long);
}
.longform__content p {
margin: 1.5em 0;
}
.longform__content code {
font-size: 0.8em;
}
.longform__content ul li {
list-style-type: "- ";
}
.longform__content img {
display: block;
max-width: 100%;
max-height: 480px;
margin: 0 auto;
text-align: center;
}
.longform__content img + br {
display: none;
}
.longform__content img + br + em {
display: block;
text-align: center;
font-style: normal;
font-size: 90%;
}
/* Notes */
.notes_list {
margin: 64px 0 0;
}
.notes_list__item {
margin: 16px 0 0;
}
.notes__header {
font-size: 0.9em;
color: var(--clr-subheader);
}
.notes__content {
margin: 64px 0 0;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 1.2em;
line-height: 1.8em;
color: var(--clr-text-long);
}
.notes__content p {
margin: 1.5em 0;
}
.notes__content code {
font-size: 0.8em;
}
.notes__content ul li {
list-style-type: "- ";
}
/* Projects */
.projects_list {
margin: 64px 0 0;
}
.projects_list__item {
margin: 16px 0 0;
}
.projects__header {
font-size: 0.9em;
color: var(--clr-subheader);
}
.projects__content {
margin: 64px 0 0;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: 1.2em;
line-height: 1.8em;
color: var(--clr-text-long);
}
.projects__content p {
margin: 1.5em 0;
}
.projects__content code {
font-size: 0.8em;
}
.projects__content ul li {
list-style-type: "- ";
}
/* Vinyl */
.vinyl_list {
margin: 64px 0 0;
}
.vinyl_list__item p {
margin: 0 0 8px;
}
footer {
margin: 64px 0 0;
text-align: center;
}
/* a.svg-stroke:hover path {
stroke: #fff;
fill: #fff;
}
a:hover path {
fill: #fff;
} */