Refactor css to be more readable in both normal and print contexts

Author: marc-mrt

assets/css/index.css

@@ -126,10 +126,7 @@ h1 {
     font-size: var(--text-font-size-lg);
 }
 
-main div:not(:last-child),
-main p:not(:last-child),
-main ol:not(:last-child),
-main ul:not(:last-child) {
+main > *:not(:last-child) {
     margin-bottom: 1rem;
 }
 
@@ -140,24 +137,38 @@ small {
     color: var(--text-subtle-color);
 }
 
-h1:has(a) {
-    margin-bottom: 2rem;
-}
-
 a {
     font-weight: 400;
     color: var(--text-accent-color);
     text-decoration: none;
     transition: text-decoration 300ms ease;
 }
 
+em > a {
+    color: var(--text-subtle-color) !important;
+}
+
+code {
+    background-color: var(--background-subtle-color);
+
+    font-size: var(--text-font-size-sm);
+
+    padding: 0.25rem;
+    border-radius: 0.2rem;
+
+    font-weight: 200;
+}
+
 /* Anchor link styles for headings */
-h1:has(> a[href^="#"]), h2:has(> a[href^="#"]) {
+h1:has(> a[href^="#"]),
+h2:has(> a[href^="#"]),
+h3:has(> a[href^="#"]) {
     position: relative;
 }
 
 h1:has(> a[href^="#"])::after,
-h2:has(> a[href^="#"])::after {
+h2:has(> a[href^="#"])::after,
+h3:has(> a[href^="#"])::after {
     content: "#";
     color: var(--text-accent-color);
     opacity: 0;
@@ -168,24 +179,17 @@ h2:has(> a[href^="#"])::after {
 }
 
 h1:hover:has(> a[href^="#"])::after,
-h2:hover:has(> a[href^="#"])::after {
+h2:hover:has(> a[href^="#"])::after,
+h3:hover:has(> a[href^="#"])::after {
     opacity: 1;
 }
 
-/* Pseudo-tag styles for markdown */
-p > code {
-    background-color: var(--background-subtle-color);
-
-    font-size: var(--text-font-size-sm);
-
-    padding: 0.25rem;
-    border-radius: 0.2rem;
-
-    font-weight: 200;
-}
-
 /* Printing specific styles */
 @media print {
+    .no-print {
+        display: none;
+    }
+
     :root {
         --body-padding: 2em 0;
     }
@@ -195,36 +199,45 @@ p > code {
         display: none !important;
     }
 
-    h1 {
-        font-size: 1.25em;
+    main > * {
+        line-height: 1em;
+    }
+
+    main > *:not(:last-child) {
+        margin-bottom: 0.5em;
     }
 
     h2 {
+        font-size: 1.25em;
+        line-height: 1.25em;
+    }
+
+    h3 {
+        margin-top: 1em;
         font-size: 1em;
+        line-height: 1em;
     }
 
-    p,
-    ol,
-    ul {
+    p {
         font-size: 0.75em;
-        line-height: 1em;
-        margin-bottom: 1em;
     }
 
     em,
     small {
-        font-size: 0.65em;
+        font-size: 0.5em;
     }
 
-    p > code {
+    code {
         background-color: unset;
         font-style: italic;
         font-weight: 200;
-        font-size: 0.75em;
+        font-size: 0.5em;
+        line-height: 0.5em;
         padding: 0;
+        border: none;
     }
 
-    p > code:not(:last-child):after {
+    code:not(:last-child):after {
         content: ",";
     }
 
@@ -304,9 +317,26 @@ main > :nth-child(n + 10) {
 }
 
 /* Custom classes */
-.experience-title {
+.flex {
     display: flex;
+    align-items: baseline;
+}
+
+.between {
     justify-content: space-between;
+}
+
+.items > *:not(:last-child) {
+    margin-right: 0.2rem;
+}
+
+.group-underline {
+    display: flex;
     align-items: baseline;
-    margin-bottom: 0.5rem;
-}
+}
+
+.underline {
+    flex-grow: 1;
+    border-bottom: 1px solid var(--text-subtle-color);
+    margin-left: 1rem;
+}

content/about.md

@@ -1,32 +1,26 @@
 ---
-title: About
+title: About me
 type: about
 ---
 
-# Experience
+{{< about-section-title title="Experience" >}}
 
-{{< experience-section-title job="Product engineer" company="Midlane" timeframe="Nov '23 - Jun '25" >}}
-
-`typescript` `next` `react` `sql` `aws` `lamba` `security` `product`
+{{< about-sub-section-title title="Product engineer" location="Midlane" timeframe="Nov '23 - Jun '25" skills="typescript, next, react, sql, aws, lamba, security, product" >}}
 
 An early-stage start-up which aimed to create a simple and effective product suite for HR processes in the blue-collar world,
 a market that most abandoned in the sector.
 
 The team focused on delivering bit-sized quality features to find product market fit.
 I helped shape the product and the team from the ground up, balancing speed and quality in a forever changing environment.
 
-{{< experience-section-title job="Lead engineer" company="Klarna" timeframe="Jul '23 - Oct '23" >}}
-
-`typescript` `nest` `react` `sql` `react-native` `leadership` `product`
+{{< about-sub-section-title title="Lead engineer" location="Klarna" timeframe="Jul '23 - Oct '23" skills="typescript, nest, react, sql, react-native, leadership, product" >}}
 
 In the 'Card & Banking' domain, I was poised to help better the consumer experience and the teams around it.
 Working on the Klarna app, shipping both to mobile & the web.
 
 I moved on after a once in a lifetime opportunity presented itself.
 
-{{< experience-section-title job="Staff engineer" company="Passbase" timeframe="Aug '19 - Jun '23" >}}
-
-`go` `ruby` `rails` `sql` `typescript` `react` `nextjs` `react` `webpack` `styled-components` `aws` `terraform` `ddd` `architecture` `leadership` `management` `hiring` `security`
+{{< about-sub-section-title title="Staff engineer" location="Passbase" timeframe="Aug '19 - Jun '23" skills="go, ruby, rails, sql, typescript, react, nextjs, react, webpack, styled-components, aws, terraform, ddd, architecture, leadership, management, hiring, security" >}}
 
 A VC-backed startup providing identity verification services worldwide.
 
@@ -37,9 +31,7 @@ I took part in the entire process where I had the opportunity to actively contri
 
 The company was eventually sold & I had to move on.
 
-{{< experience-section-title job="Software engineer" company="Recare" timeframe="Jun. '18 - Mar. '20" >}}
-
-`typescript` `javascript` `flow` `react` `redux` `graphql` `rest` `webpack` `babel` `e2e encryption` `cryptography`
+{{< about-sub-section-title title="Software engineer" location="Recare" timeframe="Jun. '18 - Mar. '20" skills="typescript, javascript, flow, react, redux, graphql, rest, webpack, babel, e2e encryption, cryptography" >}}
 
 A patient-transfer service for clinics in Germany.
 
@@ -51,18 +43,14 @@ We relied on our e2e integration test to validate that transition.
 
 While extending its market ambition towards France, the products required internationalization, a challenge we decided to tackle by building a new app from scratch to update and synchronize terms within all our apps & codebases.
 
-{{< experience-section-title job="Frontend developer (intern)" company="Mhirba" timeframe="Apr. '17 - Aug. '17" >}}
-
-`javascript` `flow` `react` `angular` `vue` `electron` `iot` `prototyping`
+{{< about-sub-section-title title="Frontend developer (intern)" location="Mhirba" timeframe="Apr. '17 - Aug. '17" skills="javascript, flow, react, angular, vue, electron, iot, prototyping" >}}
 
 A craft studio for hire, managed by its only founder, working with big companies to prototype IoT products.
 
 I developed a frontend for a cross-platform app, assessing various technologies for the job.
 Fast-paced iteration was essential to ensure the prototype fits the customer's needs with quick feedback loops.
 
-{{< experience-section-title job="Game developer (intern)" company="Wolcen" timeframe="Sep. '15 - Dec. '15" >}}
-
-`cpp` `actionscript 2.0` `cry engine 3` `entity-component-system` `documentation`
+{{< about-sub-section-title title="Game developer (intern)" location="Wolcen" timeframe="Sep. '15 - Dec. '15" skills="cpp, actionscript 2.0, cry engine 3, entity-component-system, documentation" >}}
 
 An indie game studio that was working on its first game's release.
 
@@ -71,34 +59,24 @@ The team was short-handed at the time and looking to expand, which required thor
 
 ---
 
-# Education
+{{< about-section-title title="Education" >}}
 
-{{< experience-section-title job="Master" company="Epitech" timeframe="Sep. '14 - Aug. '19" >}}
-
-`c` `cpp` `java` `sql` `tdd` `architecture` `management`
+{{< about-sub-section-title title="Master" location="Epitech" timeframe="Sep. '14 - Aug. '19" skills="c, cpp, java, sql, tdd, architecture, management" >}}
 
 During this 5-year program, I've learned to love programming, embrace new technologies, and navigate a lot of different angles to software engineering.
 
 In the final years, most of the program focused on entrepreneurship and innovation within the sector, learnings I carry with me to this day when working on tech products.
 
 ---
 
-# Projects
-
-## Molecule
-
-_https://github.com/marc-mrt/atom-molecule-dev-environment_
+{{< about-section-title title="Projects" >}}
 
-`javascript` `flow` `react` `redux` `css` `styled-components` `babel` `rx` `lsp`
+{{< about-sub-section-title title="Molecule" timeframe="'18 - '19" skills="javascript, flow, react, redux, css, styled-components, babel, rx, lsp" url="https://github.com/marc-mrt/atom-molecule-dev-environment" >}}
 
 A plugin meant to turn the text editor Atom into a full-fledged IDE. I was one of 6 engineers working on this project, all of which were in different parts of the world, thus requiring a lot of effort to manage effectively.
 The project was discontinued.
 
-## Eniverse
-
-_https://github.com/marc-mrt/Eniverse-Showcase_
-
-`javascript` `flow` `react` `css` `styled-components` `webpack` `babel`
+{{< about-sub-section-title title="Eniverse" timeframe="'18" skills="javascript, flow, react, css, styled-components, webpack, babel" url="https://github.com/marc-mrt/Eniverse-Showcase" >}}
 
 An e-sports agency, being the only engineer part of this initiative, I developed its showcase website and hosted it on Digital Ocean.
 The project was discontinued.

layouts/_shortcodes/about-section-title.html

@@ -0,0 +1,7 @@
+{{ .Store.Set "href" (print .Params.title | lower) }}
+{{ .Store.Set "link" (replace (.Store.Get "href") " " "-") }}
+
+<h2 id="{{ .Store.Get "link" }}" class="group-underline">
+    <a href="#{{ .Store.Get "link" }}">{{ .Params.title }}</a>
+    <span class="underline"></span>
+</h2>

layouts/_shortcodes/about-sub-section-title.html

@@ -0,0 +1,31 @@
+{{ if .Params.company }}
+{{ .Store.Set "href" (print .Params.title " " .Params.location | lower) }}
+{{ else }}
+{{ .Store.Set "href" (.Params.title | lower) }}
+{{ end }}
+
+{{ .Store.Set "link" (replace (.Store.Get "href") " " "-") }}
+{{ .Store.Set "skills" (split .Params.skills ",") }}
+
+<div>
+    <span class="flex between">
+        <span class="flex">
+            <h3 id="{{ .Store.Get "link" }}">
+                <a href="#{{ .Store.Get "link" }}">{{ .Params.title }}{{ if .Params.location }} <i>at</i> {{ .Params.location }}{{ end }}</a>
+            </h3>
+            {{ if .Params.url }}
+                &nbsp;
+                <em class="no-print">
+                    <a href="{{ .Params.url }}">{{ .Params.url }}</a>
+                </em>
+            {{ end }}
+            </span>
+        <em>{{ .Params.timeframe }}</em>
+    </span>
+
+    {{ if .Params.skills }}
+        <div class="items">
+            {{ range $i, $v := .Store.Get "skills" }}<code>{{ trim $v " " }}</code>{{ end }}
+        </div>
+    {{ end }}
+</div>