vlw.se/public/assets/css/pages/work.css

/* # Overrides */

:root {
	--primer-color-accent: 3, 255, 219;
	--color-accent: rgb(var(--primer-color-accent));

	--color-reflect: 220, 26, 0;
	--color-vegvisir: 0, 128, 255;
}

vv-shell {
	display: flex;
	flex-direction: column;
	gap: var(--padding);
	width: 100%;
	max-width: 1200px;
	overflow-x: initial;
}

/* # Sections */

/* ## Git */

section.git {
	display: flex;
	flex-direction: column;
	gap: var(--padding);
	background-color: rgba(var(--primer-color-accent), .1);
	padding: calc(var(--padding) * 1.5);
	border-radius: 6px;
}

section.git svg {
	fill: white;
	width: 60px;
}

section.git .buttons {
	display: flex;
	flex-direction: column;
	gap: var(--padding);
}

/* ## Hero */

section.hero {
	--color-accent: rgba(255, 255, 255);

	display: grid;
	gap: var(--padding);
	grid-template-columns: repeat(2, 1fr);
}

section.hero .item {
	width: 100%;
	height: 300px;
	position: relative;
	border-radius: 6px;
}

section.hero .wrapper {
	z-index: 1;
	height: 100%;
	display: flex;
	position: relative;
	align-items: baseline;
	flex-direction: column;
	padding: calc(var(--padding) * 1.5);
}

section.hero p {
	width: 50%;
}

section.hero button {
	margin-top: auto;
}

/* ### Vegivisr */

section.hero .item.vegvisir {
	--color-accent: var(--color-vegvisir);

	color: rgb(var(--color-vegvisir));
	background-color: rgba(var(--color-vegvisir), .1);
}

section.hero .item.vegvisir .bg {
	opacity: .2;
}

/* ### Reflect */

section.hero .item.reflect {
	--color-accent: var(--color-reflect);

	color: rgb(var(--color-reflect));
	background-color: rgba(var(--color-reflect), .2);
}

/* ### Background */

section.hero .item .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	pointer-events: none;
	border-radius: 6px;
}

section.hero .item video {
	position: absolute;
	width: 100%;
	bottom: 0;
}

/* ## Heading */

section.heading {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

section.heading svg {
	fill: white;
	height: 2em;
}

/* ## Featured */

section.featured {
	display: grid;
	gap: var(--padding);
	grid-template-columns: repeat(3, 1fr);
}

section.featured featured-item {
	display: flex;
	fill: white;
	color: white;
	border-radius: 8px;
	flex-direction: column;
	padding: var(--padding);
	background-color: rgba(255, 255, 255, .1);
}

section.featured featured-item > svg {
	width: 2em;
}

/* ### Languages */

section.featured featured-item .langs {
	gap: 5px;
	display: flex;
	margin: 5px 0;
}

section.featured featured-item .langs button {
	border-radius: 4px;
	background-color: rgba(255, 255, 255, .1);
}

section.featured featured-item .langs button p::before {
	content: "● ";
}

/* ### Actions */

section.featured featured-item .actions {
	gap: 5px;
	display: flex;
	padding-top: var(--padding);
	margin-top: auto;
}

/* # Size queries */

@media (min-width: 460px) {
	section.git .buttons {
		flex-direction: row;
	}
}

@media (min-width: 900px) {
	section.git {
		display: grid;
		grid-template-columns: 70px 1fr 400px;
		align-items: center;
		gap: calc(var(--padding) * 1.5);
	}

	section.git svg {
		width: 100%;
	}

	section.git .buttons {
		justify-content: end;
	}
}