This commit is contained in:
Yarmo Mackenbach 2020-09-25 15:28:34 +02:00
parent 150e90381a
commit c6aa20ce3f

View File

@ -24,31 +24,31 @@
} }
:root { :root {
--clr-bg: hsl(0,0%,95%); --clr-bg: hsl(0,0%,95%);
--clr-bg-alt: hsl(0,0%,85%); --clr-bg-alt: hsl(0,0%,85%);
--clr-border: hsl(0,0%,80%); --clr-border: hsl(0,0%,80%);
--clr-text: hsl(0,0%,15%); --clr-text: hsl(0,0%,15%);
--clr-text-long: hsl(0,0%,10%); --clr-text-long: hsl(0,0%,10%);
--clr-text-highlight: hsl(0,50%,40%); --clr-text-highlight: hsl(0,50%,40%);
--clr-header: hsl(0,0%,15%); --clr-header: hsl(0,0%,15%);
--clr-subheader: hsl(0,0%,15%); --clr-subheader: hsl(0,0%,15%);
--clr-link: hsl(175,50%,40%); --clr-link: hsl(175,50%,40%);
--clr-link-alt: hsl(175,38%,60%); --clr-link-alt: hsl(175,38%,60%);
--clr-code: hsl(0,0%,15%); --clr-code: hsl(0,0%,15%);
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
font-family: 'dm', 'Courier New', Courier, monospace; font-family: 'dm', 'Courier New', Courier, monospace;
color: var(--clr-text); color: var(--clr-text);
line-height: 1.4em; line-height: 1.4em;
font-size: 1.1em; font-size: 1.1em;
background-color: var(--clr-bg); background-color: var(--clr-bg);
margin: 24px; margin: 24px;
} }
header { header {
margin: 0 0 48px; margin: 0 0 48px;
@ -56,32 +56,32 @@ header {
border-bottom: 3px dashed rgba(0,0,0,0.5); border-bottom: 3px dashed rgba(0,0,0,0.5);
} }
footer { footer {
margin: 64px 0 0; margin: 64px 0 0;
text-align: center; text-align: center;
border-top: 3px dashed rgba(0,0,0,0.5); border-top: 3px dashed rgba(0,0,0,0.5);
} }
.container { .container {
width: 100%; width: 100%;
max-width: 720px; max-width: 720px;
margin: 64px auto 128px; margin: 64px auto 128px;
overflow: hidden; overflow: hidden;
} }
.select-all { .select-all {
user-select: all; user-select: all;
-ms-user-select: all; -ms-user-select: all;
-moz-user-select: all; -moz-user-select: all;
-webkit-user-select: all; -webkit-user-select: all;
} }
a { a {
color: var(--clr-link); color: var(--clr-link);
font-weight: bold; font-weight: bold;
text-decoration: underline; text-decoration: underline;
} }
a:hover { a:hover {
color: var(--clr-text); color: var(--clr-text);
background-color: var(--clr-link-alt); background-color: var(--clr-link-alt);
text-decoration: none; text-decoration: none;
} }
a.header-anchor { a.header-anchor {
text-decoration: none; text-decoration: none;
@ -91,57 +91,57 @@ h2:hover a.header-anchor {
opacity: 1; opacity: 1;
} }
h1 { h1 {
line-height: 1.2em; line-height: 1.2em;
margin: 8px 0 12px 0; margin: 8px 0 12px 0;
} }
h2 { h2 {
color: var(--clr-header); color: var(--clr-header);
font-weight: bold; font-weight: bold;
margin: 64px 0 0; margin: 64px 0 0;
line-height: 1.2em; line-height: 1.2em;
} }
h3 { h3 {
margin: 32px 0 0; margin: 32px 0 0;
color: var(--clr-subheader); color: var(--clr-subheader);
line-height: 1.2em; line-height: 1.2em;
} }
.small { .small {
font-size: 0.75em !important; font-size: 0.75em !important;
} }
pre { pre {
padding: 0 4px; padding: 0 4px;
background-color: var(--clr-bg-alt); background-color: var(--clr-bg-alt);
border: 2px solid var(--clr-border); border: 2px solid var(--clr-border);
overflow-x: auto; overflow-x: auto;
} }
code { code {
font-family: 'dm', 'Courier New', Courier, monospace; font-family: 'dm', 'Courier New', Courier, monospace;
color: var(--clr-code); color: var(--clr-code);
background-color: var(--clr-bg-alt); background-color: var(--clr-bg-alt);
border: 2px solid var(--clr-border); border: 2px solid var(--clr-border);
font-size: 1rem !important; font-size: 1rem !important;
line-height: 1.5rem; line-height: 1.5rem;
} }
pre > code { pre > code {
border: 0; border: 0;
} }
p > code, li > code { p > code, li > code {
padding: 0 2px; padding: 0 2px;
} }
ul li { ul li {
list-style-type: "|> "; list-style-type: "|> ";
} }
blockquote { blockquote {
margin-left: 0; margin-left: 0;
padding-left: 32px; padding-left: 32px;
border-left: 2px solid #4ab4ab; border-left: 2px solid #4ab4ab;
} }
blockquote strong em { blockquote strong em {
color: var(--clr-text-highlight); color: var(--clr-text-highlight);
} }
.id-card { .id-card {
margin: 0 0 64px 0; margin: 0 0 64px 0;
} }
.ellipsis { .ellipsis {
width: 100%; width: 100%;
@ -150,25 +150,25 @@ blockquote strong em {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.id-card { .id-card {
/* display: flex; /* display: flex;
align-items: top; align-items: top;
flex-wrap: wrap; */ flex-wrap: wrap; */
position: relative; position: relative;
padding: 24px 24px 0px; padding: 24px 24px 0px;
background: #f9f9f9; background: #f9f9f9;
border: 2px solid rgba(0,0,0,0.5); border: 2px solid rgba(0,0,0,0.5);
} }
.id-card .header-image { .id-card .header-image {
/* flex: 1; /* flex: 1;
flex-basis: auto; */ flex-basis: auto; */
/* margin: 8px 32px 8px 0; */ /* margin: 8px 32px 8px 0; */
text-align: center; text-align: center;
} }
.id-card .header-description { .id-card .header-description {
width: 100%; width: 100%;
/* flex: 100; /* flex: 100;
flex-basis: auto; */ flex-basis: auto; */
/* margin: 8px 0; */ /* margin: 8px 0; */
/* border-left: 2px solid var(--clr-border); /* border-left: 2px solid var(--clr-border);
border-right: 2px solid var(--clr-border); */ border-right: 2px solid var(--clr-border); */
} }
@ -182,145 +182,144 @@ blockquote strong em {
.id-card .profile-picture { .id-card .profile-picture {
/* position: absolute; */ /* position: absolute; */
float: right; float: right;
width: 128px; width: 128px;
margin: 0 0 12px 12px; margin: 0 0 12px 12px;
/* margin: 8px 0; */ /* margin: 8px 0; */
/* margin: 0 1em 0 0; */ /* margin: 0 1em 0 0; */
border-radius: 100%; border-radius: 100%;
} }
.id-card h1 { .id-card h1 {
font-size: 1.6em; font-size: 1.6em;
/* margin: 0; */ /* margin: 0; */
margin: 0 0 1em; margin: 0 0 1em;
/* margin: 0 0 16px; */ /* margin: 0 0 16px; */
} }
.id-card p { .id-card p {
width: 100%; width: 100%;
font-size: 1.1em; font-size: 1.1em;
margin: 0 0 1em 0; margin: 0 0 1em 0;
} }
.id-card .social a { .id-card .social a {
display: inline-block; display: inline-block;
width: 20px; width: 20px;
height: 20px; height: 20px;
padding: 8px; padding: 8px;
margin: 0 4px; margin: 0 4px;
border: 0; border: 0;
} }
.wrapper-table { .wrapper-table {
display: block; display: block;
margin: 24px 0 48px; margin: 24px 0 48px;
overflow-x: auto; overflow-x: auto;
} }
table { table {
width: 100%; width: 100%;
min-width: 640px; min-width: 640px;
border-top: 1px var(--clr-text) solid; border-top: 1px var(--clr-text) solid;
border-bottom: 1px var(--clr-text) solid; border-bottom: 1px var(--clr-text) solid;
border-collapse: collapse; border-collapse: collapse;
line-height: 1.4em; line-height: 1.4em;
} }
table thead { table thead {
border-bottom: 1px var(--clr-text) solid; border-bottom: 1px var(--clr-text) solid;
} }
table th { table th {
padding: 8px 12px; padding: 8px 12px;
} }
table td { table td {
padding: 10px 12px; padding: 10px 12px;
} }
table.academic-record th:nth-child(1) { table.academic-record th:nth-child(1) {
width: 15%; width: 15%;
} }
table.academic-record th:nth-child(2) { table.academic-record th:nth-child(2) {
width: 35%; width: 35%;
} }
table.academic-record th:nth-child(3) { table.academic-record th:nth-child(3) {
width: auto; width: auto;
} }
table.work-experience th:nth-child(1) { table.work-experience th:nth-child(1) {
width: 15%; width: 15%;
} }
table.work-experience th:nth-child(2) { table.work-experience th:nth-child(2) {
width: 35%; width: 35%;
} }
table.work-experience th:nth-child(3) { table.work-experience th:nth-child(3) {
width: auto; width: auto;
} }
table.publications th:nth-child(1) { table.publications th:nth-child(1) {
width: 15%; width: 15%;
} }
table.publications th:nth-child(2) { table.publications th:nth-child(2) {
width: 35%; width: 35%;
} }
table.publications th:nth-child(3) { table.publications th:nth-child(3) {
width: auto; width: auto;
} }
table.music th:nth-child(1) { table.music th:nth-child(1) {
width: 15%; width: 15%;
} }
table.music th:nth-child(2) { table.music th:nth-child(2) {
width: 35%; width: 35%;
} }
table.music th:nth-child(3) { table.music th:nth-child(3) {
width: auto; width: auto;
} }
/* Longform */ /* Longform */
.longform_list { .longform_list {
margin: 2em 0 0; margin: 2em 0 0;
} }
.longform_list__item { .longform_list__item {
margin: 2em 0 0; margin: 2em 0 0;
font-family: 'Lora', Georgia, Times, serif; font-family: 'Lora', Georgia, Times, serif;
} }
.longform_list__item a { .longform_list__item a {
display: inline-block; display: inline-block;
margin: 4px 0; margin: 4px 0;
font-size: 1.3em; font-size: 1.3em;
} }
.longform__header { .longform__header {
font-size: 0.9em; font-size: 0.9em;
color: var(--clr-subheader); color: var(--clr-subheader);
} }
.longform__content { .longform__content {
margin: 64px 0 0; margin: 64px 0 0;
font-family: 'Lora', Georgia, Times, serif; font-family: 'Lora', Georgia, Times, serif;
font-size: 1.1em; font-size: 1.1em;
line-height: 1.8em; line-height: 1.8em;
color: var(--clr-text-long); color: var(--clr-text-long);
} }
.longform__content p { .longform__content p {
margin: 1.5em 0; margin: 1.5em 0;
} }
.longform__content code { .longform__content code {
font-size: 0.8em; font-size: 0.8em;
} }
.longform__content ul li { .longform__content ul li {
list-style-type: "- "; list-style-type: "- ";
} }
.longform__content img { .longform__content img {
display: block; display: block;
max-width: 100%; max-width: 100%;
max-height: 480px; max-height: 480px;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
} }
.longform__content img + br { .longform__content img + br {
display: none; display: none;
} }
.longform__content img + br + em { .longform__content img + br + em {
display: block; display: block;
text-align: center; text-align: center;
font-style: normal; font-style: normal;
font-size: 90%; font-size: 90%;
} }
.comment { .comment {
padding: 12px; padding: 12px;
@ -344,10 +343,10 @@ table.music th:nth-child(3) {
/* Lists */ /* Lists */
.list { .list {
margin: 64px 0 0; margin: 64px 0 0;
} }
.list__item p { .list__item p {
margin: 0 0 8px; margin: 0 0 8px;
} }
@media screen and (max-width: 560px) { @media screen and (max-width: 560px) {