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

1 files changed, 92 insertions, 0 deletions

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);
+		}
+	}
+}