61 lines
1.3 KiB
CSS
61 lines
1.3 KiB
CSS
/* Work / career sections.
|
|
DOM (see loadData in main_page.js):
|
|
.section-header > h1 + p.section-desc (role) + p.section-desc (dates, company) + .tags
|
|
.tasks-div > .task-div > span.task-title + span.task-content */
|
|
|
|
/* Header: tighter than the project headers, since the tasks follow directly */
|
|
|
|
.section-header:has(+ .tasks-div) {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.section-header:has(+ .tasks-div) .section-desc {
|
|
margin: 0;
|
|
}
|
|
|
|
.section-header:has(+ .tasks-div) .section-desc:first-of-type {
|
|
margin-top: 12px;
|
|
color: var(--text);
|
|
font-size: calc(var(--font-size) + 0.1rem);
|
|
}
|
|
|
|
.section-header:has(+ .tasks-div) .section-desc + .section-desc {
|
|
margin-top: 4px;
|
|
font-size: calc(var(--font-size) - 0.05rem);
|
|
}
|
|
|
|
.section-header:has(+ .tasks-div) .tags {
|
|
margin-top: 24px;
|
|
}
|
|
|
|
/* Tasks */
|
|
|
|
.tasks-div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 28px;
|
|
max-width: 75ch;
|
|
margin: 0 var(--margin-main-content) 100px;
|
|
}
|
|
|
|
.task-div {
|
|
padding-left: 20px;
|
|
border-left: 2px solid var(--border);
|
|
transition: border-color 0.18s;
|
|
}
|
|
|
|
@media (hover: hover) and (pointer: fine) {
|
|
.task-div:hover {
|
|
border-color: var(--text);
|
|
}
|
|
}
|
|
|
|
.task-title {
|
|
color: var(--text);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.task-content {
|
|
color: var(--muted);
|
|
}
|