abdullahtarawneh.com/content/work/style.scss

@import "../../assets/scss/base/mixins.scss";

main.work {
	text-transform: lowercase;
	--max-container-width: 74rem;
	.button {
		text-decoration: none;
		padding: 1rem;
		border-radius: 1rem;
		display: inline-grid;
		grid-template-columns: auto 1fr;
		gap: 0.8rem;
		place-items: center;
		svg {
			font-size: 1.5rem;
		}
		&.primary {
			@include box-shadow;
			background-color: var(--color-button-background);
			color: var(--color-button-text);
			&:hover {
				@include box-shadow-heavy;
				background-color: var(--color-button-hover-background);
			}
		}
		&.secondary {
			&:hover {
				background-color: var(--color-button-hover-background);
			}
		}

	}
	#intro {
		background:
			url("/images/backgrounds/ffflux1.png") center / cover;
		background-color: rgba(0,0,0,0.4);
		background-blend-mode: hard-light;
		color: var(--color-background);
		.container {
			background:
				url("/images/puzzlehead.svg") center / cover;
			padding-block: 2rem;
		}
		.tagline {
			margin-block-start: 0;
			margin-inline-end: 4rem;
			em {
				display: block;
			}
			margin-block-end: 1rem;
		}
		.blurb {
			max-width: 40ch;
			font-size: 1.2em;
			margin-block-end: 2.5rem;
			margin-inline-end: 4rem;
		}
		.tagline,
		.blurb {
			width: 15rem;
		}
		@media (min-width: 60rem) {
			.tagline, .blurb {width: 40rem;}
			.container {padding-block: 4rem;}
		}
		@media (min-width: 1200px) {
			.container {
				padding-block: 6rem;
			}
		}
	}
	#services {
		.section__title {
			margin-block-end: 3rem;
		}
		.services {
			display: grid;
			gap: 3rem;
			@media (min-width: 60rem) {
				grid-template-columns: repeat(3, 1fr);
			}
		}
		.service {
			background-color: var(--color-card-background);
			color: var(--color-card-text);
			padding: 2rem;
			border-radius: 1rem;
			text-align: center;
			display: grid;
			grid-template-areas:
				"title"
				"summary"
				"icons";
			grid-template-rows: auto 1fr auto;
			&__title {
				grid-area: title;
				align-self: end;
				margin-block: 0;
			}
			&__summary {
				grid-area: summary;
				align-self: start;
			}
			&__icons {
				grid-area: icons;
				display: flex;
				font-size: 6rem;
				place-self: center;
			}
		}
	}
	#praise {
		.title {
			margin-block-end: 4rem;
			text-align: center;
		}
	}
	.testimonials {
		display: flex;
		flex-flow: row wrap;
		gap: 4rem;
		justify-content: center;
		.testimonial {
			display: grid;
			grid-template-areas:
				"bubble bubble"
				"avatar name";
			grid-template-columns: auto 1fr;
			grid-template-rows: auto auto;
			width: 20rem;
			max-width: 90%;
			place-items: center;
			gap: 1rem;
			.avatar {
				border-radius: 100rem;
				grid-area: avatar;
				margin-inline-start: 1rem;
			}
			.name {
				grid-area: name;
				place-self: center start;
			}
			.bubble {
				grid-area: bubble;
				background: green;
				color: white;
				padding: 1rem;
				margin: 0;
				min-height: 6rem;
				width: 100%;
				display: grid;
				place-items: center;
				text-align: center;
				border-radius: 1rem;
				position: relative;
				&:after {
					content: '';
					position: absolute;
					display: block;
					width: 0;
					border: 1rem solid transparent;
					border-top-color: green;
					border-bottom: 0;
					bottom: -0.75rem;
					left: 24px;
				}
			}
		}
	}
	#interstitial {
		background: var(--color-card-background);
		padding-block: 4rem;
		.container {
			max-width: 38rem;
		}
		.title {
			margin-block-start: 0;
		}
	}
	.you {color: green}
	.me {color: hsl(210, 100%, 40%);}

	#examples {
		.title {
			margin-block-end: 4rem;
		}
	}

	.work-items {
		--border-radius: 1rem;
		display: grid;
		gap: 2rem;
		align-items: center;
		@media (min-width: 30rem) {
			grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
			align-items: stretch;
		}
	}
	.work-item {
		background-color: var(--color-card-background);
		color: var(--color-card-text);
		display: grid;
		grid-template-areas:
			"link"
			"summary";
		grid-template-rows: auto 1fr;
		border-radius: var(--border-radius, 1rem);
		aspect-ratio: 1;
		&__link {
			display: grid;
			grid-template-areas:
				"image"
				"title";
			grid-template-rows: 1fr auto;
			grid-area: link;
		}
		&__image {
			display: block;
			width: 100%;
			grid-area: image;
			border-start-start-radius: var(--border-radius, 1rem);
			border-start-end-radius: var(--border-radius, 1rem);
		}
		&__title {
			grid-area: title;
			padding-inline: 1rem;
			margin-block-end: 0;
		}
		&__summary {
			padding-inline: 1rem;
			grid-area: summary;
			place-self: start;
		}
		@media (min-width: 9999px) {
			aspect-ratio: unset;
			&.workmastodon {
				grid-column: span 3;
				.work-item__link {
					display: contents;
				}
				grid-template-areas:
					"image title"
					"image summary";
				grid-template-columns: 1fr 1fr;
				.work-item__title {
					grid-area: title;
					padding-block-start: 2rem;
					padding-inline: 2rem;
					text-decoration: underline;
				}
				.work-item__image {
					grid-area: image;
					border-start-end-radius: unset;
					border-end-start-radius: var(--border-radius, 1rem);
				}
				.work-item__summary {
					grid-area: summary;
					padding-inline: 2rem;
				}
			}
			&.worktrilogy {
				grid-column: span 2;
				.work-item__link {
					display: contents;
				}
				grid-template-areas:
					"image title"
					"image summary";
				grid-template-columns: 1fr 1fr;
				grid-template-rows: auto 1fr;
				.work-item__title {
					grid-area: title;
					padding-block-start: 2rem;
					padding-inline: 2rem;
					text-decoration: underline;
				}
				.work-item__image {
					grid-area: image;
					border-start-end-radius: unset;
					border-end-start-radius: var(--border-radius, 1rem);
					height: 100%;
					object-fit: cover;
				}
				.work-item__summary {
					grid-area: summary;
					padding-inline: 2rem;
				}
			}
		}
	}
	.your-item {
		display: grid;
		padding: 2rem;
		border: 4px dashed green;
		border-radius: var(--border-radius, 1rem);
		aspect-ratio: 1;
		place-items: center;
	}
	#hire-me {
		p {
			max-width: 70ch;
		}
		.button {
			span {
				justify-self: start;
			}
		}
		.email {
			margin-block-end: 1rem;
		}
	}
}