blog.css

/* ================ Blog Posts ================ */

/* h1 {
	font-size: 2em;
	line-height: 1.6;
	color: var(--clr-highlight);
}
h2 { font-size: 1.5em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.12em; }
h5 { font-size: .83em; }
h6 { font-size: .75em; }


@media (min-width: 700px) {
	h1 { font-size: 40px; }
	h2 { font-size: 32px; }
	h3 { font-size: 22px; }
	h4 { font-size: 18px; }
} */

h1 {
	color: var(--clr-highlight);
}

h2 {
	margin-block-end: 0.4em;
}

h3 {
	margin-block-end: 0.5em;
}

.post-body {
	font-size: 1.25em;
	line-height: 1.7;
	margin: 2em 0;
}

/* p {
	margin-top: 2.44em;
} */

.post-body a:not([class]), .post-body a[class="ext-link"] {
	text-decoration: none;
	background: var(--clr-highlight);
	color: var(--clr-dark);
	padding: .1rem .4rem .2rem .4rem;
    word-break: break-word;
    line-height: 1.2;
}

.post-body a:hover {
	text-decoration: underline;
}

hr {
	display: block;
	height: 1px;
	max-width: 500px;
	background: var(--clr-mid);
	border: none;
	margin: 3.05rem auto;
}

blockquote {
	border-left: .4rem solid var(--clr-action-bg);
	margin-left: 0;
	padding-left: 1.25em;
	font-style: italic;
	font-size: 1.2em;
}

blockquote p {
    opacity: .85;
    padding: 1.25rem 0;
}


.intro-meta {
	font-size: 0.9rem;
	line-height: 1.5;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.intro-meta .avatar {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 0.5em;
}

.intro-meta > span:not(:first-of-type)::before {
	content: '●';
	padding: 0 1em;
	color: var(--lighter-text-color);
}

@media(min-width: 700px) {
	.intro-meta {
		font-size: 1.25rem;
	}
}


.post-body img, img.hero {
    display: block;
    margin: 2rem auto;
	max-width: 100%;
	max-height: 400px;
	border-radius: 5px;
}



.blog-footer {
	background: var(--clr-highlight);
	color: var(--clr-dark);
	padding-top: 2em;
	padding-bottom: 2em;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.blog-footer .title {
	font-size: 1.6em;
	font-weight: 600;
	margin-right: 1em;
}

.blog-footer a.button {
	background: var(--clr-dark);
	color: var(--clr-text);
	padding: 8px 16px;
	font-size: 0.9em;
}

.blog-footer a.button:hover {
	background: var(--clr-primary);
}


/* ================== Code / Syntax Highlight ================ */

code {
	font-size: 1.2em;
	color: var(--clr-primary-txt);
	font-weight: 600;
	margin-left: .01ch;
	margin-right: .01ch;
}

pre > code {
	font-weight: 400;
	font-size: 1em;
}

/* pre {
	counter-reset: lineNumber;
}
code .highlight-line:before {
	-webkit-user-select: none;
	border-right: 1px solid #404040;
	color: #858585;
	content: counter(lineNumber);
	counter-increment: lineNumber;
	display: inline-block;
	font-variant-numeric: tabular-nums;
	margin-right: 1.2em;
	padding-right: 1.2em;
	text-align: right;
	width: 2.4em;
} */


/* ===================== Markdown Extentions ============================== */

nav.table-of-contents {
	display: block;
	padding: 0.4em;
	margin-bottom: 2em;
}

nav.table-of-contents li > a {
	text-decoration: none;
	line-height: 1.8;
	font-weight: bold;
}


h1 > a.header-anchor, h2 > a.header-anchor, h3 > a.header-anchor {
	background: none;
	color: var(--clr-mid);
	text-decoration: none;
	margin-left: 0.2em;
	visibility: hidden;
	opacity: 0.5;
}

h1:hover > a.header-anchor, h2:hover > a.header-anchor, h3:hover > a.header-anchor {
	visibility: visible;
}