abdullahtarawneh.com/assets/scss/layouts/index.scss

main.index {

	text-transform: lowercase;

	--padding-inline: 1rem;
	--gap: 2rem;
	--border-radius: 0.5rem;

	display: grid;
	gap: var(--gap, 1rem);

	padding-inline: 0;
	padding-block-end: var(--gap, 2rem);

	#about {display: contents;}

	#hcard {
		background: var(--color-card-background);
		color: var(--color-card-text);
		border-radius: var(--border-radius);
		--avatar-size: 7.5rem;

		> .section-title {
			margin-block: 0;
			padding-block: 1rem;
			padding-inline: var(--padding-inline, 1rem);
		}

		> header {
			background-image: url("/images/sunset.jpg");
			background-size: cover;
			background-position: center;
			width: 100%;
			max-height: 20rem;
			aspect-ratio: 2;

			position: relative;
			.u-photo {
				position: absolute;
				top: calc(100% - var(--avatar-size) / 2);
				left: var(--padding-inline, 1rem);
				width: var(--avatar-size, 7.5rem);
				height: var(--avatar-size, 7.5rem);
				aspect-ratio: 1;
				background: #ddd;
				border: 0.5rem solid #ddd;
				box-sizing: border-box;
				border-radius: 1rem;
			}
			margin-block-end: calc(var(--avatar-size) / 2);

		}

		.info {
			padding-inline: var(--padding-inline, 1rem);
		}

		.p-name {
			font-size: 1.5rem;
			font-weight: bold;
			margin-block-start: calc(var(--avatar-size) / 2 + 0.5rem);
			margin-block-end: 0;
		}

		.u-uid {
			font-family: monospace;
			font-size: 1rem;
			display: inline-block;
			text-decoration: none;
		}

		.p-note {
			margin-block: 1rem;
		}

		#contact {

			margin-block: 3rem;
			padding-inline: var(--padding-inline, 1rem);
			> .section-title {
				margin-block-start: 2rem;
				margin-block-end: 1rem;
			}
		}

		#links {
			padding-inline: var(--padding-inline, 1rem);
			padding-block-end: 3rem;
		}

	}

	#quotes {
		padding-inline: var(--padding-inline, 1rem);
		padding-block: 1rem;
		margin-block-start: var(--gap, 1rem);
		background: var(--color-card-background);
		color: var(--color-card-text);
		border-radius: var(--border-radius);
		> .section-title {
			margin-block-start: 0;
			margin-block-end: 2rem;
		}
	}

	.metadata {
		dt {
			font-variant: small-caps;
			font-weight: bold;
		}
		dd {
			margin-inline-start: 0;
		}
		display: flex;
		flex-flow: column;
		gap: 1rem;
	}

	.quote {
		margin-inline: 0;
		blockquote {
			margin: 0;
			border-inline-start: 4px solid var(--color-primary-highlight);
			padding-inline-start: 0.5rem;
		}
		cite {
			padding-inline-start: calc(0.5rem + 4px);
			&:before {
				content: '— ';
			}
		}
	}

	#deeds {
		background: var(--color-card-background);
		color: var(--color-card-text);
		border-radius: var(--border-radius);
		padding-inline: var(--padding-inline, 1rem);
		padding-block: 1rem;
	}

	#done {
		> .section-title {
			margin-block-start: 0;
			margin-block-end: 1rem;
		}
		#mastodon {
			img {
				max-width: 100%;
			}
		}
	}

	#updates {
		background: var(--color-card-background);
		color: var(--color-card-text);
		border-radius: var(--border-radius);
		padding-inline: var(--padding-inline, 1rem);
	}

	#activity {
		header {
			display: flex;
			h2 {
				display: inline-block;
			}
			align-items: end;
			p {
				margin-block-end: 1.5rem;
			}
			justify-content: space-between;
		}
	}

	@media (min-width: 60rem) {
		--gap: 1rem;
		padding-inline: 2rem;
		grid-template-areas:
			"hcard deeds"
			"quotes deeds"
			"updates updates";
		grid-template-columns: 20rem 1fr;
		grid-template-rows: auto auto 1fr;
		#hcard {
			grid-area: hcard;
		}
		#quotes {
			grid-area: quotes;
			margin-block-start: 0;
		}
		#deeds {
			grid-area: deeds;
		}
		#updates {
			grid-area: updates;
		} 
	}

	@media (min-width: 1200px) {
		padding-inline: 3rem;
		grid-template-areas:
			"hcard deeds updates"
			"quotes deeds updates";
			grid-template-columns: 20rem 1fr 20rem;
	}
}