abdullahtarawneh.com/assets/scss/layouts/blog/single.scss

main.blog.single {
	--max-container-width: 80ch;
	line-height: 1.6;
	padding-bottom: 2rem;
	article.h-entry {
		> header {
			background: var(--color-card-background);
			color: var(--color-card-text);
			padding-block: 1rem;
			.entry-title {
				margin-block-start: 1rem;
				font-family: serif;
			}
			.entry-summary {
				font-family: serif;
			}
			.h-card {
				font-style: normal;
				display: block;
				margin-block: 0.5rem;
				a {
					display: grid;
					grid-template-columns: auto 1fr;
					gap: 0.5rem;
					align-items: center;
				}
				img.logo, .no-avatar {
					width: 2rem;
					height: 2rem;
					border-radius: 100rem;
				}
				.no-avatar {
					svg {
						width: 100%;
						height: 100%;
					}
				}
			}
			time.dt-published {
				display: block;
			}
			#TableOfContents > ul {
				padding-left: 1rem;
			}
			a {
				text-decoration: none;
				color: inherit;
			}
		}
		section.e-content {
			display: grid;
			grid-template-columns: 1em 1fr 1em;
			padding-block: 1rem;
			gap: 1rem 0;
			max-width: 80ch;
			margin: 0 auto;
			@media (min-width: 55ch) {
				grid-template-columns: minmax(1em, 1fr) minmax(45ch, 70ch) minmax(1em, 1fr);
			}
			> * {
				grid-column: 2;
				margin: 0;
			}
			> img, > figure {
				grid-column: 1 / span 3;
				width: 100%;
				img {
					width: 100%;
					display: block;
				}
				figcaption {
					padding: 1rem;
					background: var(--color-card-background);
					color: var(--color-card-text);
					font-size: 0.8em;
				}
			}
			> blockquote {
				padding-inline-start: 0.25rem;
				border-inline-start: 0.25rem solid var(--color-highlight);
				p:only-child {margin: 0;}
			}
			.has-pullquote {
				@mixin pullquote {
					content: attr(data-pullquote);
					font-family: serif;
					display: block;
					margin-block-end: 1rem;
					font-size: 1.2rem;
					color: var(--color-highlight);
				}
				&.left {
					&.before:before,
					&.after:after {
						@include pullquote;
					}
				}
				&.right {
					&.before:before,
					&.after:after {
						@include pullquote;
					}
				}
				@media (min-width: 40rem) {
					&.left {
						&.before:before,
						&.after:after {
							float: left;
							margin-inline-end: 1rem;
							max-width: 24ch;
						}
					}
					&.right {
						&.before:before,
						&.after:after {
							float: right;
							margin-inline-start: 1rem;
							max-width: 24ch;
						}
					}
				}
			}
		}
	}
}