changed career section style

styles/work_style.css

@@ -1,34 +1,60 @@
-.work-date {
+/* Work / career sections.
-    margin-top: 30px;
+   DOM (see loadData in main_page.js):
-    color: var(--muted);
+   .section-header > h1 + p.section-desc (role) + p.section-desc (dates, company) + .tags
-    font-size: 0.95rem;
+   .tasks-div > .task-div > span.task-title + span.task-content */
-    line-height: 1.6;
+
+/* 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 {
-    margin-top: 60px;
     display: flex;
     flex-direction: column;
-    gap: 35px;
+    gap: 28px;
-    margin-bottom: 120px;
+    max-width: 75ch;
-    margin-left: var(--margin-main-content);
+    margin: 0 var(--margin-main-content) 100px;
 }
 
 .task-div {
-    display: flex;
+    padding-left: 20px;
-    flex-direction: column;
+    border-left: 2px solid var(--border);
-    gap: 0px;
+    transition: border-color 0.18s;
-    align-items: baseline;
+}
+
+@media (hover: hover) and (pointer: fine) {
+    .task-div:hover {
+        border-color: var(--text);
+    }
 }
 
 .task-title {
     color: var(--text);
     font-weight: 700;
-    font-size: 1rem;
 }
 
 .task-content {
     color: var(--muted);
-    font-size: 1rem;
-    line-height: 1.7;
 }