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

#mastodon {
	overflow: hidden;
	background: #16191f;
	color: #9baec8;
	.page-header {
		background: #3088D4;
		color: white;
		.container {
			display: grid;
			@media (min-width: 51.75em) {
				grid-template-columns: auto 1fr;
			}
			gap: 1em;
			justify-items: center;
			align-items: center;
		}
	}
	.title {
		font-size: 2em;
		line-height: 1.4;
		font-weight: 700;
		margin-bottom: 1em;
		margin-top: 1em;
	}
	.blurb {
		line-height: 1.4;
		font-size: 1.2em;
		margin-bottom: 1.4em;
		a {
			color: white;
		}
	}
	.subtitle {
		font-size: 1.6em;
		font-weight: 700;
		margin-bottom: 1em;
	}
	.conversation {
		display: flex;
		flex-flow: column;
		align-items: center;
		margin-bottom: 1.4em;
		iframe {
			width: 80ch
		}
	}
	#about {
		.container {
			display: flex;
			flex-flow: column;
			gap: 1em;
		}
		.title {
			position: relative;
			&::before {
				content: 'About';
				position: absolute;
				top: -0.6em;
				left: -0.5em;
				font-size: 4em;
				font-weight: 900;
				opacity: 0.15;
			}
		}
	}
	#overview {
		.title {
			position: relative;
			&::before {
				content: 'Overview';
				position: absolute;
				top: -0.6em;
				left: -0.5em;
				font-size: 4em;
				font-weight: 900;
				opacity: 0.15;
			}
		}
	}
	#process {
		.title {
			position: relative;
			&::before {
				content: 'Process';
				position: absolute;
				top: -0.6em;
				left: -0.5em;
				font-size: 4em;
				font-weight: 900;
				opacity: 0.15;
			}
		}
	}
	#user {
		.subtitle {
			margin-top: 4em;
			margin-bottom: 2em;
			position: relative;
			&::before {
				content: '01';
				position: absolute;
				top: -0.4em;
				right: 0em;
				font-size: 4em;
				font-weight: 900;
				opacity: 0.15;
			}
		}
		.structure {
			grid-template-columns: 1fr;
		}
	}
	#admin {
		.subtitle {
			margin-top: 4em;
			margin-bottom: 2em;
			position: relative;
			&::before {
				content: '02';
				position: absolute;
				top: -0.4em;
				right: 0em;
				font-size: 4em;
				font-weight: 900;
				opacity: 0.15;
			}
		}
	}
	.structure {
		font-size: 1.2em;
		line-height: 1.4;
		margin-bottom: 2em;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1em;
		ul {
			list-style-type: number;
		}
		li {
			margin-left: 1em;
			&::marker {
				font-weight: 700;
				padding-right: 0.5em;
			}
		}
		.old {
			.card__head {
				position: relative;
				&::before {
					content: 'OLD';
					position: absolute;
					top: -0.6em;
					right: -0.25em;
					font-size: 4em;
					font-weight: 900;
					opacity: 0.15;
				}
			}
		}
		.new {
			.card__head {
				position: relative;
				&::before {
					content: 'NEW';
					position: absolute;
					top: -0.6em;
					right: -0.25em;
					font-size: 4em;
					font-weight: 900;
					opacity: 0.15;
				}
			}
		}
	}
	p {column-span: 2}
	.card {
		background: #303643;
		color: #d9e1e8;
		padding: 2em;
		border-radius: 1em;
		&__head {
			font-weight: 700;
			margin-bottom: 1em;
		}
		&__body {
			display: flex;
			flex-flow: column;
			gap: 0.5em;
		}
	}
}