abdullahtarawneh.com/assets/scss/work/index.scss

#work {
	overflow: hidden;
	.title {
		font-size: 2em;
		font-weight: 700;
		margin-top: 2rem;
		margin-bottom: 2em;
		&:before {
			font-size: 3em;
			font-weight: 700;
			color: #ddd;
			position: absolute;
			top: -0.425em;
			left: -0.15em;
			z-index: -1;
		}
		position: relative;
	}
	#timeline .title:before {
		content: 'timeline';
	}
	#hireme .title:before {
		content: ''
	}
	.timeline {
		position: relative;
		max-width: 60em;
		margin: 0 auto;
		&::before {
			content: 'TODAY';
			position: absolute;
			bottom: -4rem;
			left: 1.25em;
		}
		&::after {
			content: '';
			position: absolute;
			width: 0.5rem;
			background: #ddd;
			top: 0rem;
			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;
				padding-top: 1.5em;
			}
			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: #06f;
				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;
			}
			&.workpixelfed::before {
				background: url("/images/logos/pixelfed.svg");
				background-size: cover;
				background-color: pink;
			}
			&.workeqin::before {
				background: url("/images/logos/eqin.png");
				background-size: cover;
			}
			&.workuab:before {
				background: url("/images/logos/uab.png");
				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;

				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;
				background: #06f;
				padding: 0.5em 1em;
				color: white;
				text-decoration: none;
				border-radius: 0.25em;
				display: block;
			}
		}
		.workeqin, .workuab, .workpixelfed {
			.timeline-item__readmore {display: none;}
		}
	}
	.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: 1fr 1fr 1fr;
				width: unset;
				.button {
					width: unset;
				}
			}
			gap: 1em;
		}
	}
}