abdullahtarawneh.com/content/work/go-fed/style.scss

main.go-fed {
	$gofed-light: #F38D7F;
	$gofed-dark: #740D00;
	$gofed-bg: #EAEAEA;
	$hugo-bg: #0A1922;
	$hugo-text: #E7E8E9;
	$go-bg: #007D9C;
	$go-gopher: #79D4FD;
	overflow: hidden;

	--max-container-width: 60rem;

	.page-header {
		.container {
			display: grid;
			place-items: center;
		}
		img {
			height: 6em;
		}
		.title {
			margin-bottom: 0;
		}
	}
	.title {
		font-size: 2em;
		font-weight: 700;
		margin-bottom: 2em;
	}
	.conversation {
		display: flex;
		flex-flow: column;
		align-items: center;
		margin-bottom: 1.4em;
		iframe {
			width: 80ch;
			height: 20em;
			max-height: calc(100vh - var(--nav-height));
			max-height: calc(var(--vh) * 100 -  var(--nav-height));
		}
	}
	.quote {
		margin-top: 5em;
		background: $gofed-light;
		color: black;
		font-size: 1.8em;
		line-height: 1.2;
		text-align: center;
		padding: 1em;
		font-family: monospace;
		position: relative;
		&:before{
			content: '“';
			font-family: serif;
			font-size: 2em;
			position: absolute;
			top: -0.4em;
			left: -0.2em;
		}
		&:after {
			content: '”';
			font-family: serif;
			font-size: 2em;
			position: absolute;
			bottom: -0.8em;
			right: -0.2em;
		}
	}
	.attribution {
		margin-bottom: 5em;
		margin-top: 1em;
		display: grid;
		grid-template-columns: 1fr 3em auto;
		gap: 1em;
		justify-content: end;
		align-items: center;
		cite {
			grid-column: 3;
			text-align: right;
			em {
				font-weight: 700;
			}
		}
		picture {
			display: contents;
		}
		img {
			width: 3em;
			height: 3em;
			margin-right: 1em;
			border-radius: 100em;
			grid-column: 2;
		}
	}
	.device-gallery {
		display: grid;
		gap: 1em;
		justify-items: center;
		figcaption {
			padding: 1em;
			max-width: 320px;
			margin: 0 auto;
			text-align: center;
		}
	}
	.device-gallery.mobile {
		figure {
			max-width: 288px;
		}
		figcaption {
			max-width: 320px;
		}
		@media (min-width: 960px) {
			grid-template-columns: repeat(3,1fr);
		}
	}
	#about {
		background: #122e43;
		color: white;
	}
	#before {
		background: $gofed-bg;
	}
	#after {
		.quote {background: #90EE90}
		.quote:before, .quote:after {}
	}
	#hugo {
		background: $hugo-bg;
		color: $hugo-text;
		.quote {
			background: $go-bg;
			color: $hugo-text;
		}
		.quote:before, .quote:after {color: $go-gopher}
	}
	.smartphone {
		img {
			width: 100%;
		}
		display: block;
		position: relative;
		max-width: 320px;
		margin: auto;
		border: 16px black solid;
		border-top-width: 60px;
		border-bottom-width: 80px;
		border-radius: 36px;
		background: black;
		&:before {
			content: '';
			display: block;
			width: 60px;
			height: 5px;
			position: absolute;
			top: -30px;
			left: 50%;
			transform: translate(-50%, -50%);
			background: #333;
			border-radius: 10px;
		}
		&:after {
			content: '';
			display: block;
			width: 20%;
			aspect-ratio: 1;
			position: absolute;
			left: 50%;
			bottom: -96px;
			transform: translate(-50%, -50%);
			background: #333;
			border-radius: 50%;
		}
	}
	
	.laptop {
		img {
			width: 100%;
		}
		display: block;
		width: 100%;
		border-radius: 6px;
		border-style: solid;
		border-color: black;
		border-width: 12px;
		background-color: black;
		position: relative;
		&:after {
			content: '';
			position: absolute;
			width: calc(100% + 3em);
			height: 7%;
			left: -1.5em;
			bottom: -9%;
			background: #333;
			border-radius: 0 0 100em 100em;
		}
		&:before {
			content: '';
			position: absolute;
			width: 25%;
			height: 2%;
			left: 37.5%;
			bottom: -4%;
			background: #777;
			z-index: 2;
		}
		margin-bottom: 3.7%;
	 }
	
	.screenshot {
		img {
			width: 100%;
		}
		position: relative;
		width: 100%;
		&:after {
			content: '';
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
		&.pc {
			img {padding: 1.1% 1.2%;}
			margin-bottom: 21.25%;
			&:after {
				height: 140%;
				background: url('/images/frames/pc.svg');
				background-repeat: no-repeat;
			}
		}
		&.macbook {
			img {padding: 2.9% 11.75% 0;}
			margin-bottom: 11.25%;
			&:after {
				height: 250%;
				background: url('/images/frames/macbook.svg');
				background-repeat: no-repeat;
			}
		}
	}
}