Merge branch 'main' of https://github.com/joeacarstairs/personal-website

2 files changed, 100 insertions, 1 deletions

diff --git a/website/public/css/base.css b/website/public/css/base.css
index db6c1dc..b38c934 100644
--- a/website/public/css/base.css
+++ b/website/public/css/base.css
@@ -24,6 +24,7 @@
   --colour-hyperlink-95: #e0f1ff;
 
   --colour-primary-fg: var(--colour-primary-90);
+  --colour-primary-fg-accent: var(--colour-primary-80);
   --colour-primary-bg: var(--colour-primary-10);
   --colour-hyperlink: var(--colour-hyperlink-80);
 
@@ -47,6 +48,7 @@
 @media (prefers-color-scheme: light) {
   :root {
     --colour-primary-fg: var(--colour-primary-20);
+    --colour-primary-fg-accent: var(--colour-primary-40);
     --colour-primary-bg: var(--colour-primary-95);
     --colour-hyperlink: var(--colour-hyperlink-40);
   }
@@ -91,7 +93,12 @@ body {
 @media (min-width: 36rem) {
   body {
     display: grid;
-    grid-template-columns: [media-start] 6rem [content-start] 1fr [content-end];
+    grid-template-columns:
+      [media-start]
+      6rem
+      [content-start]
+      minmax(calc(36rem - var(--spacing-block-lg) - 6rem - var(--spacing-block-sm) - 6rem), auto)
+      [content-end];
     margin-inline-end: 6rem;
 		column-gap: var(--spacing-block-sm);
     max-width: calc(6rem + var(--spacing-block-sm) + 30rem);
diff --git a/website/public/css/cv.css b/website/public/css/cv.css
new file mode 100644
index 0000000..cdee5b1
--- /dev/null
+++ b/website/public/css/cv.css
@@ -0,0 +1,92 @@
+div:has(img) {
+	width: 6rem;
+	height: 6rem;
+	margin-inline: auto;
+
+	img {
+		width: 6rem;
+		height: 6rem;
+		border-radius: 1rem;
+		filter: contrast(1.25);
+	}
+
+	&::after {
+		/* Colour overlay */
+		background-color: var(--colour-primary-80);
+		opacity: 0.3;
+
+		/* Same size and shape as the img */
+		border-radius: 1rem;
+		width: 6rem;
+		height: 6rem;
+
+		/* Positioned on top of the img */
+		display: block;
+		position: relative;
+		top: -6rem;
+
+		/* A content value is needed to get the ::after to render */
+		content: '';
+	}
+}
+
+header {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	text-align: center;
+
+	h1 {
+		grid-column: 1 / 3;
+		text-align: center;
+	}
+
+	border-block-end: 1px solid var(--colour-primary-fg);
+}
+
+.technical-skills {
+	h3 {
+		text-align: start;
+	}
+
+	ul {
+		color: var(--colour-primary-fg-accent);
+		margin-inline-start: var(--spacing-inline-md);
+	}
+
+	@media (min-width: 46rem) {
+		section {
+			display: flex;
+			gap: var(--spacing-inline-sm);
+			align-items: baseline;
+
+			h3 {
+				&::after {
+					content: '/';
+					margin-inline: var(--spacing-inline-sm);
+				}
+			}
+
+			ul {
+				display: flex;
+				gap: var(--spacing-inline-sm);
+				list-style: none;
+				margin-inline-start: 0;
+
+				li + li::before {
+					content: '•';
+					margin-inline-end: var(--spacing-inline-sm);
+				}
+			}
+		}
+	}
+}
+
+:is(.experience, .passions) {
+	:is(ol, ul) {
+		list-style: none;
+
+		li {
+			margin-block-start: var(--spacing-block-sm);
+		}
+	}
+}