abdullahtarawneh.com/assets/scss/content/work.scss

#work {
	overflow: hidden;
	.title {
		font-size: 2em;
		font-weight: 700;
		line-height: 1.2;
		margin-top: 2rem;
		margin-bottom: 2em;
		&:before {
			font-size: 1em;
			font-weight: 700;
			color: #ddd;
			position: absolute;
			top: -1em;
			left: 0em;
			z-index: -1;
		}
		position: relative;
		a {
			position: absolute;
			left: 0;
			top: -1em;
			color: #ddd;
			width: 100%;
		}
	}
	#praise .title:before {
		content: '#praise';
	}
	#process .title:before {
		content: '#process';
	}
	#timeline .title:before {
		content: '#timeline';
	}
	#hireme .title:before {
		content: ''
	}
	#process {
		.title {
			strong {
				color: #06f;
				font-weight: 900;
			}
			em {
				color: green;
				font-style: italic;
			}
			br {
				@media (max-width: 24.375em) {
					display: none
				}
			}
		}
		.subtitle {
			font-size: 1.6em;
			margin-bottom: 1em;
		}
		.blurb {
			font-size: 1.2em;
			line-height: 1.4;
		}
	}
	#interstitial {
		padding: 3em 0;
		@media (min-width: 35em) {
			padding-top: 4em;
		}
		background: #eee;
		box-shadow:
			0px 4px 4px -4px inset rgba(0,0,0,0.5),
			0px -4px 4px -4px inset rgba(0,0,0,0.5)
		;
		strong {
			color: #06f;
			font-weight: 900;
		}
		em {
			color: green;
			font-style: italic;
		}
		.container {
			display: grid;
			place-items: center;
			text-align: center;
		}
		.title {
			margin: 0;
			margin-bottom: 0.7em;
		}
		.blurb {
			font-size: 1.25em;
			margin-bottom: 2em;
			max-width: 45ch;
			line-height: 1.4;
		}
		.button {
		}
	}
	.timeline {
		position: relative;
		max-width: 60em;
		margin: 0 auto;
		&::before {
			content: '?';
			position: absolute;
			bottom: -4rem;
			left: 1.25em;
			font-size: 2em;
			font-weight: 900;
			color: #ddd;
		}
		&::after {
			content: '';
			position: absolute;
			width: 0.5rem;
			background: #ddd;
			top: -1.5rem;
			bottom: -5rem;
			left: 0.5rem;
			z-index: -1;
			border-radius: 100em;
		}
		&-item {
			padding: 1em 0;
			position: relative;
			margin-bottom: 2em;
			@media (min-width: 30em) {
				display: grid;
				grid-template-areas:
				"dates title"
				"at title"
				"readmore summary"
				;
				grid-template-columns: 20ch 1fr;
				grid-template-rows: auto auto auto;
			}
			margin-left: 2.5rem;
			&::before {
				content: " ";
				position: absolute;
				top: 0.75rem;
				width: 2rem;
				height: 2rem;
				z-index: 1;
				left: -3rem;
				border-width: 1rem;
				border-radius: 100em;
				background-color: #ddd;
				border: 0.25em solid #ddd;
			}
			&.worktrilogy::before {
				background: url("/images/logos/trilogy.png");
				background-size: cover;
			}
			&.workmastodon::before {
				background: url("/images/logos/mastodon.png");
				background-size: cover;
				background-color: #2b90d9;

			}
			&.workpixelfed::before {
				background: url("/images/logos/pixelfed.svg");
				background-size: cover;
				background-color: pink;
			}
			&.workgo-fed::before {
				background: url("/images/logos/go-fed.png");
				background-size: cover;
			}
			&.workeqin::before {
				background: url("/images/logos/eqin.png");
				background-size: cover;
			}
			&.workuab:before {
				background: url("/images/logos/uab.svg");
				background-size: contain;
				background-repeat: no-repeat;
				background-position: center;
				background-color: white;
			}
			&__daterange {
				margin-left: 0em;
				flex-basis: 10ch;
				grid-area: dates;
				text-transform: uppercase;
			}
			&__at {
				display: block;
				margin-bottom: 0.5em;
			}
			&__title {
				font-size: 1.4em;
				font-weight: 700;
				margin-bottom: 0.5em;
				margin-top: 0.5em;
				align-self: center;
				grid-area: title;
				@media (min-width: 30em) {
					margin-top: -0.125em;
				}
			}
			&__summary {
				flex-basis: 30ch;
				grid-area: summary;
				line-height: 1.4;
				margin-bottom: 0.5em;
			}
			&__readmore {
				width: max-content;
				height: min-content;
				grid-area: readmore;
				border-radius: 0.25em;
				display: block;
			}
		}
		.workeqin, .workuab, .workpixelfed {
			.timeline-item__readmore {display: none;}
		}
		.you {
			&:before {
				background: green;
			}
			strong {
				font-weight: 700;
				color: green;
			}
		}
	}
	#cta {
		.container  {
			display: flex;
			flex-flow: column;
			align-items: start;
		}
		.title {
			font-size: 1.4em;
			font-weight: 700;
			margin-bottom: 1.4em;
			&:before {content: ''}
		}
		.blurb {
			line-height: 1.4;
			margin-bottom: 1.4em;
			strong {
				font-weight: 700;
				color: green;
			}
		}
		.buttons {
			margin-top: 1em;
			display: grid;
			grid-template-columns: 1fr;
			width: 100%;
			font-size: 1.25em;
			@media (min-width: 33.75em) {
				grid-template-columns: auto auto 1fr;
				.button.resume {
					grid-row: 2;
				}
				.button.email {
					width: 100%;
					grid-column: span 2;
				}
			}
			@media (min-width: 43.25em) {
				grid-template-columns: auto auto auto 1fr;
				width: unset;
				.button {
					width: max-content;
				}
				.button.resume {
					grid-row: unset;
				}
				.button.email {
					width: max-content;
					grid-column: span 1;
				}
			}
			gap: 1em;
			svg {
				width: 1.25em;
				height: 1.25em;
				path {
					fill: currentColor;
				}
			}
		}
	}
}