abdullahtarawneh.com/content/work/mastodon/style.scss

#mastodon {
	.container {
		max-width: 960px;
	}
	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: 2em;
			justify-items: center;
			align-items: center;
			svg {width: 6em;height:auto;}
		}
		.title {
			line-height: 1;
			margin: 0;
		}
	}
	.title {
		font-size: 2em;
		line-height: 1.4;
		font-weight: 700;
		margin-bottom: 1em;
		margin-top: 1em;
	}
	p {
		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 {
		.title {
			position: relative;
			&::before {
				content: 'about';
				position: absolute;
				top: -0.6em;
				left: -0.55em;
				font-size: 3em;
				font-weight: 900;
				opacity: 0.15;
			}
		}
	}
	#overview {
		.title {
			position: relative;
			&::before {
				content: 'overview';
				position: absolute;
				top: -0.6em;
				left: -0.5em;
				font-size: 3em;
				font-weight: 900;
				opacity: 0.15;
			}
		}
	}
	#process {
		.title {
			position: relative;
			&::before {
				content: 'process';
				position: absolute;
				top: -0.6em;
				left: -0.5em;
				font-size: 3em;
				font-weight: 900;
				opacity: 0.15;
			}
		}
		.subtitle {
			margin-top: 8em;
			margin-bottom: 2em;
			position: relative;
			&:before {
				position: absolute;
				top: -1em;
				right: 0em;
				font-size: 4em;
				font-weight: 900;
				color: #3088D4;
			}
		}
	}
	#user {
		.subtitle {
			&::before {
				content: '01';
			}
		}
		.structure {
			grid-template-columns: 1fr;
		}
	}
	#admin {
		.subtitle {
			&::before {
				content: '02';
			}
		}
	}
	#dev {
		.subtitle {
			&::before {
				content: '03';
			}
		}
		.old {grid-column: span 2}
	}
	#api {
		.subtitle {
			&::before {
				content: '4+5';
			}
		}
	}
	.structure {
		font-size: 1.2em;
		line-height: 1.4;
		margin-block: 2em;
		display: grid;
		@media (min-width: 40em) {
			grid-template-columns: 1fr 1fr;
			&.new {
				grid-auto-flow: column;
				grid-template-rows: auto auto 1fr;
			}
			.methods {
				grid-row: span 3;
				grid-column: 2;
			}
		}
		gap: 2em 1em;
		ul {
			> ul {
				margin-left: 1.25em;
			}
		}
		li {
			margin-left: 1em;
			&::marker {
				font-weight: 700;
				padding-right: 0.5em;
			}
		}
		.card {
			margin-top: 1em;
		}
		.card__head {
			position: relative;
			&:before {
				position: absolute;
				top: -2.5em;
				right: calc(50% - 3.25ch);
				font-size: 2em;
				font-weight: 900;
				background: #16191f;
				border-radius: 100em;
				padding: 0 0.5em;
				border: 0.25em solid #303643;
				background: #16191f;
			}
		}
		.old .card__head:before {
			content: 'OLD';
			color: #c89bae;
		}

		.new .card__head:before {
			content: 'NEW';
			color: #aec89b;
		}
		.methods ul, .entities ul {
			list-style-type: disc;
		}
	}
	.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;
		}
	}
	#outcomes {
		.title {
			margin-bottom: 3em;
			position: relative;
			&::before {
				content: 'outcomes';
				position: absolute;
				top: -0.6em;
				left: -0.5em;
				font-size: 3em;
				font-weight: 900;
				opacity: 0.15;
			}
		}
		.praise {
			border: 0;
			margin: 0;
			background: #303643;
			color: #d9e1e8;
			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;
			}
		}
		cite {
			margin-top: 1em;
			text-align: right;
			em {
				font-weight: 700;
			}
		}
		.attribution {
			margin-bottom: 5em;
			display: flex;
			justify-content: end;
			align-items: end;
			img {
				width: auto;
				height: 3em;
				margin-right: 1em;
				border-radius: 100em;
			}
		}
		ul {
			line-height: 1.4;
			font-size: 1.2em;
			list-style-type: disc;
			margin-bottom: 1em;
		}
		li {
			margin-left: 1em;
			margin-bottom: 1em;
		}
		.benefit {
			position: relative;
			margin-top: 8em;
			&:before {
				position: absolute;
				font-size: 4em;
				font-weight: 700;
				top: -1.25em;
				color: #3088d4;
			}
			&.one:before {
				content: '01';
			}
			&.two:before {
				content: '02';
			}
			&.three:before {
				content: '03';
			}
		}
	}
	.separator {
		width: 10em;
		height: 0.5em;
		border-radius: 100em;
		border: none;
		background: white;
	}
	#cta {
		.container {
			display: flex;
			flex-flow: column;
		}
		.title {
			text-align: center;
			max-width: 41rem;
			margin: 0 auto;
			margin-bottom: 1em;
		}
		img {
			width: 100%;
			height: 100%;
			margin: 0 auto;
			max-width: 100%;
		}
		.buttons {
			display: flex;
			flex-flow: row wrap;
			justify-content: center;
			margin-top: 2em;
			gap: 1em;
		}
		.button {
			width: 100%;
			padding: 1rem;
			text-decoration: none;
			display: inline-grid;
			grid-template-columns: auto 1fr;
			gap: 0.8rem;
			place-items: center;
			flex-basis: 20em;
			border-radius: 1rem;
			svg {
				font-size: 2rem;
			}
			&.demo {
				background: transparent;
				border: 2px solid white;
				color: white;
				&:hover {
					background: rgba(255,255,255,0.2);
				}
			}
			&.email {
				background: #0060ff;
				color: white;
				&:hover {
					background: #9baec8;
				}
			}
		}
	}
}