/**
 *
 * Doogie.de CSS Layout
 *
 * This layout builds upon the awesome Bootstrap Library (getbootstrap.com)
 */

/************** Google Font NOTO SERIF ***************/
/* copy from https://google-webfonts-helper.herokuapp.com/fonts/noto-serif?subsets=latin */

/* noto-serif-regular - latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('/static/fonts/noto-serif-v9-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/static/fonts/noto-serif-v9-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-serif-700 - latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('/static/fonts/noto-serif-v9-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('/static/fonts/noto-serif-v9-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/*OLD version   @import url('https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap'); */


/************** Overall layout ***************/
body {
	margin: 0;
	padding: 0;
	font-family: 'Noto Serif', serif;
	/*font-family: Georgia, Times, "Times New Roman", serif;*/
	/*font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;*/
	/*font-size: 1.2rem;*/
}

.layout {
	display: flex;
  flex-direction: row;
}

/**** Container for content at the right taking up the remaining width *****/

.right-container {
	min-height: 100vh;
	background-color: #EEE;
	padding: 2rem;
	flex-grow: 1;
	margin: 0 0 0 max(20vh, 300px);  /* prevent content to slip under left-sidebar */
}


/************** Sidebar at the left  ***************/
.sidebar {
	position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: start;
	height: 100vh;
	width: 20vh;
	min-width: 300px;
	text-align: center;
	border-right: 1px solid #ebebeb;
}

/** Elements of the left sidebar */

header {
	display: flex;
	flex-direction: column;
	align-items: center;
}

header a {
	color: blue;
	text-decoration: none;
}

header a:visited {
	color: blue;	
}

.site-logo {
	margin: 4rem 0;
}

.site-title {
	font-family: 'Noto Serif', serif;
	margin: 0;
	font-weight: 700;
	font-size: 34pt;
	color: darkblue;
}

.site-title a:visited {
	color: darkblue;
}

.site-description {
	font-family: "Work Sans", "Helvetica Neue", Helvetica, sans-serif;
	font-size: 1rem;
	margin-top: 0.5rem;
	letter-spacing: 2px;
	color: grey;
	font-weight: normal;
}

.navigation {
	margin-top: 5rem;
}

.tag-cloud {
	list-style: none;
	/*margin: 100px 0;*/
	padding-left: 0;	
	color: gray;
	font-size: 1rem;
	line-height: 2;
}

.tag-cloud a {
	color: gray;
	text-decoration: none;
	width: 210px;
	display: inline-block;
	margin-bottom: 0.5rem;
}

.tag-cloud a:hover {
	color: darkblue;
	background-color: #eeeeee;
}

.tag-cloud .post-tag {
	font-size: 1rem;
}

footer {
	width: 100%;
	flex-grow: 1;
	text-align: center;
	position: absolute;
	bottom: 3rem;
	font-size: 1.5rem;
}
footer .social-link {
	margin: 0 1rem;
	color: lightgray;
	text-decoration: none;
}

footer .social-link:hover {
	color: grey;
}

#footer-logo-hands:hover {
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	opacity: 0.5;
}

/**
 * ============= Masonry layout for blog post cards on start page =============
 * 
 * There are three normal bootstrap grid columns.
 * The blog-list.pug template puts every third card in one column.
 * This way the cards are sorted left to right and then top to bottom.
 * The first three articles are in the top row.
 */

 .masonry-layout {
	max-width: 1500px;
	margin: 0 auto;
 }

/* if a tag is selected, it is shown at the top */
.selected-tag-wrapper {
	margin: 2rem 0;
}

.selected-tag-wrapper .selected-tag {
	padding: 3px 1rem;
	font-size: 0.75rem;
	line-height: 2;
}

/* This is used in the alert at the top AND in the tag-cloud! */
.selected-tag {
	background: lightgray;
}

/** ========= Card with preview / excerpt for one blog post ============ */

.blog-list-card {
	margin-bottom: 30px;
	overflow: hidden;
	
}


/* Zoom image on hover over blog-list-card */
.blog-list-card:hover {
	box-shadow: 0 .5rem 1rem rgba(0,0,0,0.4) !important;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.blog-list-card:hover	.card-img-top,
.blog-list-card:hover	.card-img-left {
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
	opacity: 0.8;
	/*
	-webkit-transform: scale(1.05, 1.05);
	transform: scale(1.05, 1.05);
	*/
}

.blog-list-card .post-excerpt {
	color: black;
}

.card-img-top {
	object-fit: cover; /* Cover the area but keep image proportions */
	object-position: center; /* Center the image within the element */
	width: 100%;
	max-height: 200px;
}

.post-title {
	color: darkblue;
	font-family: 'Noto Serif', serif;
	font-weight: 700;
	text-decoration: none;
}
.blog-list-card a:hover {
	text-decoration: none;
}


/** 
 Metadata of a post: date created and tags 
 This is shown differently for .post-list-cards and one .blog-post
*/

.post-metadata {
	color: #aaa;
	font-size: 0.8rem;
}

.post-date {
	font-family: "Work Sans", "Helvetica Neue", Helvetica, sans-serif;
	margin-left: 10px;
}

.post-tags-wrapper {
	display: flex;
	flex-direction: row;
	margin-top: 5px;
}

.post-tags-wrapper .fa-tags {
	padding-top: 5px;
}

.post-tags {
	word-break: break-all;
}

.post-tags {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.post-tag {
	font-family: "Work Sans", "Helvetica Neue", Helvetica, sans-serif;
	font-size: 0.8rem;
	border: 1px solid #ebebeb;
	border-radius: 3px;
	margin-left: 4px;
	padding: 1px 4px;
	white-space: nowrap;
}









/******* TODO: Let elements appear when they become visible ******/

.appear-when-visible {
	opacity: 0;
	transform: translateY(50px);
	/*transition: opacity 5s, transform 5s ease-out;*/
}

.appear-anim {
	opacity: 1.0 !important;
	transform: none;
}


/** =======  Tag page with list of posts with that tag ======= */
/* Each tag-list-card has a FIXED HEIGHT. (But not on mobile.) */

.tag-list-cards {
	max-width: 1000px;
	margin: 0 auto;
}

.tag-list-card {
	height: 220px;
}


.tag-list-card .post-excerpt {
	height: 70px;
	color: black;
	text-overflow: ellipsis;
	overflow: hidden;
}

.blog-list-card .card-img-left-col {
	flex: 0 0 300px;
}

.blog-list-card .card-img-left {
	object-fit: cover;
	object-position: center;
	width: 300px;
	height: 220px;
	
}

.tag-list-title {
	color: darkblue;
	font-family: 'Noto Serif', serif;
	margin: 0 0 2rem 0;
	line-height: 1.5;
}

.tag-list-title-tag {
	background-color: white;
	border: 1px solid darkblue;
	font-family: "Work Sans", "Helvetica Neue", Helvetica, sans-serif;
	font-size: 90%;
	border-radius: 3px;
	padding: 4px 10px;
	white-space: nowrap;
}

/************** One blog post ***************/
.blog-post-card {
	max-width: 1024px;
	margin-left: auto;
	margin-right: auto;
}

.blog-post-card .card-body {
	max-width: 768px;
	padding-top: 3rem;
	padding-bottom: 10rem;
	margin-left: auto;
	margin-right: auto;
}

.blog-post-card .post-metadata {
	margin-bottom: 2rem;
}

.blog-post-card p {
	text-align: justify;
	margin-bottom: 0.5rem;
}

.post-link {
	text-decoration: none;
	font-size: 1.2rem;
}
.post-link-next {
	float: right;
}
.post-link-title {
	opacity: 0;
}
.post-link:hover .post-link-title {
	opacity: 1;
	transition: opacity 0.5s ;

}

/******* Post footer *******/

.post-footer {
	margin: 2rem auto;
	padding: 1.25rem;
	max-width: 1024px;
	/*font-family: Georgia, Times, "Times New Roman", serif;*/
	color: grey;
}

.post-footer a {
	color:gray;
}
.post-footer a:visited {
	color:gray;
}

.licence {
	text-align: center;
	color: #aaa;
	font-size: 12px;
}
.licence a {
	color: #aaa
}



/******* Achilles & Turtle *******/
.turtle {
	padding-left: 1.5em;
	text-indent:-1.5em;
}
.turtle::before {
	content: "Turtle:\00A0";
	font-style: italic;
	color: grey;
}

.achilles {
	padding-left: 1.5em;
	text-indent:-1.5em;
}
.achilles::before {
	content: "Achilles:\00A0";
	font-style: italic;
	color: grey;
}

.sokrates {
	padding-left: 1.5em;
	text-indent:-1.5em;
}
.sokrates::before {
	content: "Sokrates:\00A0";
	font-style: italic;
	color: grey;
}

.indent {
	padding-left: 1.5em;
}


/*
@media(max-width: 1300px) {
	#blog-list-card-columns {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
	}
}
*/

/****************************************************************
   Special styling for smaller and mobile devices       

   We have ONE breakpoint and its already quite large.
	 (e.g. also on iPad in horizontal position)

	 Below this breakpoint we show the navigation at the top
	 and only one column of posts.
 ***************************************************************/

/* Simply hide mobile list on large screens */
.mobile-blog-list {
	display: none;
}

/* These are now all settings for tablets and mobile phones. Only one breakpoint! */
@media(max-width: 1200px) {

	body {
		overflow-x: hidden;  /* no horizontal scrolling */
	}

	.masonry-layout {
		display: none;
	}

	.mobile-blog-list {
		display: block;
	}

	.layout {
		display: flex;
		flex-direction: column;  /* one column of post-list-cards */
		min-height: 100vh;
	}

	.sidebar {
		width: 100%;
		height: auto;
		min-width: unset;
		max-width: unset;
		position: relative;			/* sidebar moves to the top on mobile. Not sticky or fixed. */
		/*border-bottom: 1px solid lightgray;*/
		box-shadow: 0 .5rem 0.5rem rgba(0,0,0,.1);
	}

	/* Less spacing on mobile blog post, padding for site-sitle on mobile */
	.right-container {
		margin: 0;  /* no left margin, no sidebar */
		padding: 1rem;
		font-size: 14px;
	}

	header {
		height: auto;
		min-height: auto;
	}

	.site-logo {
		margin: 2rem 0;
	}

	.navigation {
		margin-top: 1rem;
	}

	.tag-cloud {
		margin: 1rem 0;
	}
	.tag-cloud li {
		display: inline;
	}
	.tag-cloud a {
		width: auto;
	}
	.tag-cloud .post-tag {
		font-size: 0.8rem;
	}

	footer {
		position: relative;
		bottom: 0;
		margin-bottom: 1rem;
	}

	/*
	 Smaller headers in blog-cards. 
	 (Need to be a bit more specific than just h1 so therefor the .right-container h1)
	*/

	.right-container h1 {
		font-size: 1.6rem;
	}
	.right-container h3 {
		font-size: 1.5rem;
	}
	.right-container h3 {
		font-size: 1.4rem;
	}

	/************ tag-list on mobile ******************/
	
	.tag-list-card .card-body {
		padding: 0.5rem;
	}

	.tag-list-card {
		height: unset;  /* let cards be as high as content on mobile */
	}
	
	.tag-list-card .card-img-left-col {
		width: 16%;
		flex: none;
	}

	.tag-list-card .card-img-left {
		width: 100%;
		height: 100%;
	}

	.tag-list-card .post-excerpt {
		height: unset;
	}


	/************ Layout for one blog post on mobile ******************/
	/* much smaller header with only site-title and site-description  */

	.blog-post-layout .site-logo {
		display: none;
	}

	.blog-post-layout .site-title {
		margin-top: 1rem;
	}

	.blog-post-layout .tag-cloud {
		display: none;
	}

	.blog-post-layout .social-icons {
		display: none;
	}

	.blog-post-layout .navigation {
		margin-top: 0;
	}

	.blog-post-layout .post-footer {
		margin: 2rem 0;
	}

	.blog-post-card .card-body {
		padding: 1rem;
	}


	/** Less indent on mobile in the dialog between our two friends */

	.blog-post-card p {
		text-align: left;  /* left is easier to read than justify on a narrow mobile screen */
	}

	.turtle {
		padding-left: 0.5em;
		text-indent:-0.5em;
	}
	.achilles {
		padding-left: 0.5em;
		text-indent:-0.5em;
	}
	.sokrates {
		padding-left: 0.5em;
		text-indent:-0.5em;
	}

}


/**************** General typsetting *************/

h1,h2,h3,h4,h5,h6 {
	font-family: 'Noto Serif', serif;
	color: darkblue;
}

blockquote {
	border-left: 3px solid lightgray;
	margin-left: 0.5rem;
	padding-left: 1rem;
	font-style: italic;
}

p.keep-newline {
	white-space: pre-line;
	text-align: left;
}