Add cool-looking speech bubble style for blockquotes (3de8fb8b) · Commits · Fachschaft / fscoli-next

style.css

+44 −28

Original line number	Diff line number	Diff line
		@@ -552,8 +552,6 @@ main.list {

		main.list article {
		margin: 2em 0;
		position: relative;
		box-shadow: 0px 0px 10px var(--shadow-color);
		}

		main.list article:first-of-type {
		@@ -577,32 +575,6 @@ main.list .content {
		margin-top: 1.5em;
		}

		main.list footer::before {
		content: "";
		display: block;
		position: absolute;
		right: 0;
		width: 0;
		height: 0;
		bottom: -2em;
		border-width: 32px 0 0 32px;
		border-style: solid;
		border-color: var(--light-gray) transparent;
		}

		main.list footer::after {
		content: "";
		display: block;
		position: absolute;
		right: 0;
		width: 0;
		height: 0;
		bottom: -1.7em;
		border-width: 30px 0 0 30px;
		border-style: solid;
		border-color: #fff transparent;
		}

		main.list footer time {
		position: absolute;
		top: 0.5em;
		@@ -688,6 +660,39 @@ main.list article > header h1 {
		}
		}

		/* ### Shared styles: "Speech bubble look" for list articles and blockquotes ### */
		main.list article, blockquote {
		position: relative;
		box-shadow: 0px 0px 10px var(--shadow-color);
		}

		main.list footer::before, blockquote::before {
		content: "";
		display: block;
		position: absolute;
		right: 0;
		width: 0;
		height: 0;
		bottom: -2em;
		border-width: 32px 0 0 32px;
		border-style: solid;
		border-color: var(--light-gray) transparent;
		}

		main.list footer::after, blockquote::after {
		content: "";
		display: block;
		position: absolute;
		right: 0;
		width: 0;
		height: 0;
		bottom: -1.7em;
		border-width: 30px 0 0 30px;
		border-style: solid;
		border-color: #fff transparent;
		}
		/* ### End shared styles ### */

		/* ==== Utilities: Pagination ==== */
		.pagination {
		display: grid;
		@@ -871,6 +876,17 @@ ul.seamless li {
		}

		/* -- Quotes -- */

		/* Blockquotes share some styles with post list entries, see section marked ### above */

		blockquote {
		padding: 1em;
		}

		blockquote :first-child {
		margin-top: 0 !important;
		}

		blockquote p:first-of-type::before {
		content: "„";
		}