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