theme-blog-ewen/static/css/style.css

/***********
 * CSS style for the Simple-Goeland Hugo theme
 * Author: eorn (https://forge.goe.land/eorn/simple-goeland)
 ***********/

/* CSS reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}




/* Sections, containers... */
main {
	display: block;
}
.flex {
	display: flex;
}
.container {
	max-width: 80rem;
	margin: 0 auto;
}
.sidebar {
	flex: 0 0 250px;
	font-size: 1em;
}
.page-content {
	font-size: 1.25em;
	min-width: 320px;
	flex-grow: 1;
	padding-left: 12px;
}
main.container {
	margin-top : 12px;
	margin-bottom: 25px;
	padding-top: 20px;
	border-top: 1px solid #53bcdf;
}


/* Navbar */
#navbar {
	height: 40px;
	font-family: "Source Code Pro", monospace;
}

.nav-left {
	float: left;
}
.nav-right {
	float: right;
	margin-top: 8px;
}
.nav-left a, .nav-left h1 {
	text-decoration: none;
	color: #53bcdf;
	font-size: 30px;
	font-weight: bold;
	vertical-align: middle;
}
.nav-right a {
	text-decoration: none;
	color: white;
}
.nav-right img, .nav-right svg {
	margin: 0px;
	padding: 0px;
	vertical-align: bottom;
}
.pleroma svg {
	fill: #f39f54;
}
.pleroma svg:hover {
	fill: #ffc992;
}
.pixelfed svg {
	fill: #c02fa8;
}
.pixelfed svg:hover {
	fill: #ff61f2;
}
.gitea svg {
	fill: #5f9825;
}
.gitea svg:hover {
	fill: #8dcc4a;
}
.rss svg {
	fill: #f76300;
}
.rss svg:hover {
	fill: #ffac46;
}


/* Sidebar */
.sidebar {
	font-family: "Source Code Pro", monospace;
	line-height: 1.5;
}
.sidebar hr {
	border 0;
}
.sidebar h2 {
	border-top: 1px solid #53bcdf;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 10px;
	padding-top: 5px;
}
.sidebar a {
	color: #53bcdf;
	text-decoration: underline;
}
.sidebar a:hover {
	text-decoration: none;
	color: #9de2ff;
}
.sidebar ul, .sidebar li, .sidebar ul li {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.sidebar li ul {
	margin-left: 20px;
}
a.active {
	font-weight: bold;
	color: #9de2ff;
}

.pagination {
	font-family: "Source Code Pro", monospace;
	padding-top: 15px;
	text-align: center;
}
.pagination ul, .pagination li {
	display: inline;
	margin: 0;
	padding: 0;
	list-style: none;
}
.page-content li.page-item::before {
	content: "";
	width: 0em;
	margin-left: 0em;
	margin: 0px;
	padding: 0px;
}
.pagination a {
	background-color: #2f3335;
	padding: 4px;
}


/* Footer */
.footer {
	font-family: "Source Code Pro", monospace;
	border-top: 1px solid #53bcdf;
	padding-top: 15px;
}


/* Content defaults */
body {
	font-family: "Source Sans Pro", sans-serif;
	color: white;
	background-color: #232627;
	text-rendering: optimizeLegibility;
	line-height: 1.25;
	margin: 0 auto;
	max-width: 1280px;
	padding: 15px;
}


.has-text-centered {
	text-align: center;
}


.page-content p {
	margin-top: 15px;
	margin-bottom: 15px;
}

.page-content a {
	color: #53bcdf;
	text-decoration: underline;
}
.page-content a:hover {
	text-decoration: none;
	color: #9de2ff;
}

.tag a {
	background-color: #2f3335;
	padding: 2px;
	color: #76e09d;
}
.tag a:hover {
	color: #b4ffd2;
}
.tag.active a {
	font-weight: bold;
	color: #b4ffd2;
}
.button a {
	background-color: #2f3335;
	padding: 2px;
	margin: 2px;
}

.page-content article {
	margin-bottom: 25px;
	border-top: 1px dashed #bbb677;
}

.page-content h1, .page-content h1 a {
	font-size: 30px;
	margin-bottom: 10px;
	font-weight: bold;
	color: #bbb677;
	padding-top: 10px;
}
.page-content h1 a:hover {
	color: #f0eca9;
}
.page-content h2 {
	font-size: 25px;
	font-weight: bold;
	color: #bbb677;
	margin-top: 30px;
}
.page-content h3 {
	font-size: 20px;
	font-weight: bold;
	color: #bbb677;
	margin-top: 35px;
}
.page-content h4 {
	font-size: 15px;
	font-weight: bold;
	color: #bbb677;
	margin-top: 20px;
}
.page-content h5 {
	font-size: 15px;
	color: #bbb677;
	margin-top: 10px;
}

.page-content .article-date {
	font-family: "Source Code Pro", monospace;
	font-size: 0.8em;
	margin: 0px;
}
.page-content .tags-list {
	float: right;
	max-width: 40%;
	text-align: right;
}

article .post-content {
	margin-top: 20px;
}

.page-content ul {
	padding: 0px;
	list-style: none;
}
.page-content ul li{
	margin-left: 20px;
}
.page-content ul li::before {
	content: "🦄";
	color: #53bcdf;
	font-weight: bold;
	display: inline-block;
	width: 1.3em;
	margin-left: -0.5em;
}
.page-content li ul {
	margin-left: 20px;
}


.page-content ol {
	margin-left: 20px;
	list-style-type: decimal;
	list-style-color: #53bcdf;
}
.page-content ol li{
	margin-left: 10px;
}
.page-content ol li::before{
	content: none;
}

.page-content ol li p,
.page-content ul li p {
	display: inline;
	margin: 0px;
}


.page-content em {
	font-style: italic;
}

.page-content strong {
	font-weight: bold;
}

.page-content code {
	font-family: "Source Code Pro", monospace;
}

.page-content p code,
.page-content li code {
	display: inline-block;
	background-color: #2d3132;
	padding-right: 4px;
	padding-left: 4px;
	border: 1px dashed grey !important;
	font-size: 0.8em;
}


.page-content blockquote {
	border: 1px dashed grey;
	background-color: #2c2f31;
	max-width: 80%;
	margin: auto;
	margin-top: 5px;
	margin-bottom: 5px;
}
.page-content blockquote p {
	padding-right: 15px;
	padding-left: 15px;
}

.page-content blockquote p.quotecaption {
	text-align: right;
	font-size: 15px;
	border-top: 1px dashed grey;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 10px;
	padding-top: 10px;
}

.page-content .block_color {
	font-size: 15px;
	padding-right: 15px;
	padding-left: 50px;
	border-radius: 10px;
	background-repeat: no-repeat;
	background-size: 30px;
	background-position: 10px 10px;
}
.page-content .block_red {
	border: 1px dashed #b64f4f;
	background-color: #2f2525;
	background-image: url("/img/warning.svg");
}
.page-content .block_blue {
	border: 1px dashed #3b5f72;
	background-color: #24282f;
	background-image: url("/img/info.svg");
}
.page-content .block_green {
	border: 1px dashed #50a243;
	background-color: #272f26;
	background-image: url("/img/ok.svg");
}

.page-content hr {
	border: none;
	width: 30px;
	height: 30px;
	background-image: url("/img/hr-stars.png");
	background-repeat: no-repeat;
	background-size: 30px;
}

.page-content .highlight table {
	font-size: 0.8em;
	border: 1px dashed grey !important;
	padding: 10px !important;
	background-color: #2d3132 !important;
}
.page-content .highlight pre {
	background-color: #2d3132 !important;
}	


figure {
	padding: 5px;
	border: 1px dotted #bbb677;
}

figure.img-large {
	max-width: 80%;
}

figure.img-medium {
	max-width: 50%;
}
figure.img-small {
	max-width: 20%;
}


figure.img-10 {
	max-width: 10%;
}
figure.img-20 {
	max-width: 20%;
}
figure.img-30 {
	max-width: 30%;
}
figure.img-35 {
	max-width: 35%;
}
figure.img-40 {
	max-width: 40%;
}
figure.img-50 {
	max-width: 50%;
}
figure.img-60 {
	max-width: 60%;
}
figure.img-70 {
	max-width: 70%;
}
figure.img-80 {
	max-width: 80%;
}
figure.img-90 {
	max-width: 90%;
}
figure.img-100 {
	max-width: 100%;
}

figure.center {
	margin: 0 auto;
}

figcaption h4, figcaption p {
	margin: 0px !important;
	font-weight: normal !important;
	color: white !important;
}


figure img {
	max-width: 100%;
}

figure.audiofig audio {
	width: 90%;
	align: center;
}


.center {
	text-align: center;
}


.related {
	margin-top: 25px;
	border-top: 1px dashed #bbb677;
	padding-top: 10px;
}



/* Comments */
.isso-postbox > .form-wrapper .textarea,
.isso-postbox > .form-wrapper input {
	color: white;
	background-color: #2f3335 !important;
}



/* Responsive */
@media only screen and (max-width: 800px) {
	.flex {
		display: table;
	}
	.sidebar {
		display: table-footer-group;
	}
	.page-content {
		display: table-header-group;
		padding: 0px;
		font-size: 1em;
	}
	#navbar .nav-left, #navbar .nav-right {
		float: none;
		text-align: center;
	}
	#navbar {
		min-height: 75px;
	}
	.page-content .highlight table {
		width: 95vw !important;
	}
}