abdullahtarawneh.com/assets/scss/base/page.scss

.page-title {font-size: 2.5em; font-weight: 700}
.page {
	font-size: 1em;
	@media (min-width: 600px) {font-size: 1.25em;}
	max-width: 960px;
	margin: 0 auto;
	@media (min-width: 960px) {
		display: grid;
		grid-template-columns: minmax(45ch,65ch) 1fr;
		grid-template-rows: auto auto;
		grid-template-areas:
			"header header"
			"content meta";
	}
	.section {
		padding: 1em 0;
		grid-area: content;

	}
	.page-header {
		padding: 2em 0;
		grid-area: header;
	}
	.meta {
		grid-area: meta;
	}
	.page-summary {margin: 1em 0;}
	.page-cover {width: 100%;}

	h1,h2,h3,h4,h5,h6 {
		line-height: 1.2;
		margin-bottom: 1rem;
		margin-top: 2rem;
		font-weight: 700;
	}
	p {
		line-height: 1.4;
		margin-bottom: 1em;
	}
	a {word-wrap: break-word;}
	h1 {font-size: 2.49em}
	h2 {font-size: 2.07em}
	h3 {font-size: 1.728em}
	h4 {font-size: 1.44em}
	h5 {font-size: 1.2em}
	h6 {font-size: 1em}

	h1 {font-size: 1.8em}
	h2 {font-size: 1.600em}
	h3 {font-size: 1.423em}
	h4 {font-size: 1.265em}
	h5 {font-size: 1.125em}
	h6 {font-size: 1em}

	blockquote {
		font-size: 1em;
		margin: 1em 0;
		border-left: 0.25rem solid black;
		padding-left: 0.5em;
		line-height: 1.4;
	}

	pre {
		font-family: monospace;
		background: #333;
		color: white;
		padding: 1em;
		line-height: 1.4;
		overflow-x: scroll;
		margin-bottom: 1em;
	}
	ul {list-style: disc; margin: 1em 0;}
	li {margin-bottom: 1em; line-height: 1.4; margin-left: 1em;}
	ol {list-style: decimal; margin: 1em 0;}
	dl {margin: 1em 0; line-height: 1.4;}
	dt {font-weight: 700;}
	dd {margin-left: 1em;}
	em {font-style: italic}
	strong {font-weight: 700}
	sup {
		position: relative;
		font-size: 0.8em;
		a {position: relative; top: -0.5em;}
	}
	table {
		text-align: center;
		thead {
			font-weight: 700;
		}
		th, td {border: 1px solid black; padding: 0.5em;}
	}
	figure {
		img {
			width: 100%;
			margin-bottom: -0.125em;
		}
		figcaption {
			background: #212121;
			color: white;
			font-style: italic;
			padding: 1em;
			font-size: 0.8em;
			line-height: 1.2;
		}
		margin-bottom: 1em;
	}

	img {
		width: 100%;
		margin-bottom: 1em;
	}

}

.tags {
	display: flex;
	flex-flow: row wrap;
	gap: 0.25em;
	li {
		list-style: none;
		border-radius: 4px;
		margin-left: 1em;
		margin-bottom: 0;
	}
}

.meta .container {height: 100%; margin-top: 0.75rem;}
article .container *:first-child {margin-top: 0;}

#TableOfContents {
	position: sticky;
	top: 2rem;
	@media (min-width: 960px) {top: 96px;}
	max-width: max-content;
	font-size: 0.75em;
	margin: 2em 0;
	ul {list-style: none; margin: 0;}
	li {margin-bottom: 0; margin-left: 0;}
	li li {margin-left: 1em;}
	a {
		background: unset;
		text-decoration-thickness: unset;
		text-underline-offset: unset;
		color: inherit;
		text-decoration: none;
		transition: color 0.2s ease-in-out;
		&:hover {
			color: #0060ff;
			text-decoration: underline;
		}
	}
}