split up css style files

styles/sections/introduction.css

@@ -0,0 +1,14 @@
+#introduction {
+    margin-top: var(--margin-top);
+    margin-left: var(--margin-main-content);
+    margin-bottom: 60px;
+    margin-right: var(--margin-main-content);
+}
+
+#introduction p {
+    color: var(--text);
+}
+
+.text-link.introduction {
+    margin-top: 20px;
+}

styles/sections/project_blocks.css

@@ -0,0 +1,66 @@
+.content-block {
+    height: 600px;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    overflow: hidden;
+    margin-top: -1px;
+}
+
+.block-image {
+    overflow: hidden;
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+    display: flex;
+}
+
+.block-image.right {
+    margin-right: var(--margin-main-content);
+    border-left: 1px solid var(--border);
+    justify-content: left;
+    margin-left: -0.5px;
+}
+
+.block-image.left {
+    margin-left: var(--margin-main-content);
+    border-right: 1px solid var(--border);
+    justify-content: right;
+    margin-right: -0.5px;
+}
+
+.block-image img {
+    height: 100%;
+    width: 100%;
+    max-width: 700px;
+    max-height: 700px;
+    object-fit: cover;
+}
+
+.block-image img.left {
+    object-position: left;
+}
+
+.block-image img.center {
+    object-position: center;
+}
+
+.block-image img.right {
+    object-position: right;
+}
+
+.block-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+    margin-right: var(--margin-main-content);
+    padding-left: var(--margin-main-content);
+}
+
+.text-content {
+    display: inline;
+}
+
+.link-row {
+    margin: var(--margin-main-content);
+    margin-top: 30px;
+}

styles/sections/section_header.css

@@ -0,0 +1,9 @@
+.project-section {
+    border-top: 1px solid var(--border);
+}
+
+.section-header {
+    margin: 80px;
+    margin-left: var(--margin-main-content);
+    margin-right: var(--margin-main-content);
+}

styles/sections/work.css

@@ -0,0 +1,60 @@
+/* Work / career sections.
+   DOM (see scripts/sections/work.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);
+}