blog.css

/* ================ Blog Posts & Listing ================ */

h1 {
	font-size: 2em;
	line-height: 1.6;
	color: var(--header-color);
	border-bottom: 1px solid var(--divider-color);
}
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; }
}

main a {
	text-decoration: underline;
	color: var(--primary-color);
}

/* p {
	text-align: justify;
} */


blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 1.2em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: var(--primary-light-60-color);
  content: open-quote;
  font-size: 5em;
  line-height: 0.1em;
  margin-right: 0.1em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
  font-size: 1.3em;
  font-weight: 300;
  line-height: 1.5;
}



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


.blogslist {
	width: 100%;
	/* max-width: 1240px; */
	/* margin: 0 auto; */
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	grid-gap: 20px;
}


.blogtag {
	margin-left: 1em;
	text-decoration: none;
}

.blogslist .card {
	background: white;
	text-decoration: none;
	color: var(--main-text-color);
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	display: flex;
	flex-direction: column;
	position: relative;
	transition: all .1s ease-out;
}

.blogslist .card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 5px rgba(0,0,0,0.2);
}

.blogslist article {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.blogslist h4 {
	margin: 0.2em 0;
}

.blogslist p {
  flex: 1;
  font-size: 0.9em;
  line-height: 1.4;
}

.blogslist time {
  font-size: 11px;
  font-weight: bold;
  color: var(--header-color);
  letter-spacing: .05em;
}

/* time::before {
	content: '📅 ';
} */

.blogslist .taglist > span {
	font-size: 0.8em;
	font-weight: bold;
	margin-right: 0.5em;
	color: var(--lighter-text-color);
	/* font-family: 'Courier New', Courier, monospace; */
}

.blogslist .thumb {
  padding-bottom: 60%;
  background-size: cover;
  height: auto;
}

.pagination a {
	color: var(--main-text-color);
}

/* .item a:hover p {
  color: var(--main-text-color) !important;
  text-decoration: none;
} */

/* .item {
  padding: 20px;
} */

.blog-button {
  width: 30%;
  color: white;
  margin-top: 20px;
  font-size: 13px;
  font-weight: 500;
  background: #44ce6f;
  border: 0;
  padding: 12px 30px;
}

.active, .btn:hover {
  color: var(--primary-color) !important;
}


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

nav.table-of-contents {
	display: block;
	width: 100%;
	padding: 0.4em;
	margin-bottom: 2em;
	background: var(--background-section-color);
	border-left: 5px solid var(--primary-color);
}

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

@media (min-width: 700px) {
	nav.table-of-contents {
		max-width:70%;
		width:auto;
		padding: 1em;
		margin-left: auto;
		margin-right: auto;

	}
}

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

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