mind-overflow-website-ghost-theme/assets/css/screen.css

@charset "utf-8";
/*

TABLE OF CONTENTS
--------------------------------------------------
1.       Global Settings
  1.1.     Structure & Style
  1.2.     Layout
  1.3.     Navigation bar(s)
  1.4.     Footer
  1.5.     Header
2.       Index Style
3.       Feeds
  3.1.     Post Feed
  3.2.     Tag Feed
4.       Post & Tag Cards
  4.1.     Big Post Card style
  4.2.     Navbar Post Card Style
  4.3.     Tag Card Style
5.       Pages & Posts style
  5.1.     Header
  5.2.     Content
  5.3.     Koenig Styles
  5.4.     Sidebar
6.       Cookie & Policy Popup
7.       Animations and Gradients
--------------------------------------------------

*/


/*
1. Global Settings
--------------------------------------------------
Settings used for things displayed in all pages
*/

/*
1.1. Style
--------------------------------------------------
Used to style things in such a way that they appear in the same way, everywhere.
*/

@import "fonts.css";

html, body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    margin: 0;
    padding: 0;
    height: 100%;

  	font-size: 20px;
    line-height: 1.6;
  	color: white;
  	width: 100%;
    background-color: #151515;
}

a {
  text-decoration: none;
  color: paleturquoise;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
	color: rgb(230, 230, 230);
}

h1 {
	font-size: 70px;
}

h2 {
  font-size: 35px;
}

h3 {
  font-size: 28px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 20px;
}

hr {
  border: 1px solid rgb(80, 80, 80);
  border-bottom: 0;
  margin: 50px 70px;
}

img {
  display: block;
	-moz-user-select: none;
	-webkis-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-o-user-select: none;
}

/* Generic class to make things unselectable */
.unselectable {
	-moz-user-select: none;
	-webkis-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-o-user-select: none;
}

/* COLORED TEXT SELECTION */
::selection {
	color: #2d0670;

	/*
	We need RGBA because Chrome forces it to be semi-trasparent, making white look like grey.
	By setting it to 99.5% opacity, we can override this. 100% does not work, however.
	*/
	background: rgba(255, 255, 255, 0.995);
}

.mind-post-card-sidebar_tag, .mind-post-header_tag, .mind-post-card-big_tag {
	color: #3fd5ff;
}

/*
1.2. Layout
--------------------------------------------------
Used to define how every page is displayed.
*/

main {
  display: block;
  box-sizing: border-box;
  width: 100%;
	max-width: 100%;
}

.mind-content_main {
	width: 1260px;
  margin: auto;
}

/*
1.3. Navigation
--------------------------------------------------
Used to style the navigation bars.
*/
.nav {
  width: 100%;
	padding: 0;
}

.mind-global-navbar_primary {
  position: absolute; /* only used if JS is disabled */
  top: 0;
  width: 100%;
  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  padding: 0;

  transition: .5s;
}
/* This class is applied by a JS script, so that users with JS disabled
can still see the navbar, but it won't move while they're scrolling.
This is needed because the navbar is transparent, and a black background
is applied by the script on scroll.
*/
.mind-global-navbar_primary-allowmoving {
  position: fixed;
}

.mind-global-navbar_primary-colored {
  background: rgba(0, 0, 0, 1);
}

.mind-global-navbar_primary-colored img {
	transform:translate(50px, 0);
}

.mind-global-navbar_primary-transparent {
  background: rgba(0, 0, 0, 0.0);
}

.mind-global-navbar_primary-transparent img {
  opacity: 0;
}

.mind-global-navbar_primary img {
  margin-left: -30px;
  width: 30px;
  height: 30px;
  transition: .5s;
}

.mind-global-navbar_primary li {
  display: inline-block;
	text-align: center;
	font-size: 25px;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
  margin: 0;
  padding: 0 10px;
}

.mind-global-navbar_primary a {
  color: white;
  margin: 0;
  padding: 0;
	text-decoration: none;
  display: flex;
  align-items: center;
}

.mind-global-navbar_primary li.nav-services {
  /* TODO: choose if background should be colorful or white */
	background: linear-gradient(to right, #33ffc5 20%, #fc33ff, #ff3370, #ff3333, #3dff33, #33ffc5);
  /*background: white;*/
	background-size: 800px, 800px;
	color: aquamarine;
	text-fill-color: transparent;
	animation: gradient 2s linear infinite;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.mind-global-navbar_secondary {
	width: 100%;

	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	text-decoration: none;
	overflow: hidden;
	padding: 0;

	background-color: rgb(50, 50, 50);

  position: relative;
  z-index: 4;
}

.mind-global-navbar_secondary li {
  display: inline-block;
	text-align: center;
	font-size: 25px;
	font-family: 'Oswald', sans-serif;
	font-weight: 300;
  margin: 0;
  padding: 0 10px;
}

.mind-global-navbar_secondary a {
  color: white;
  margin: 0;
  padding: 0;
	text-decoration: none;
  display: flex;
  align-items: center;
}

/*
1.4. Footer
--------------------------------------------------
*/

footer.mind-site-footer_main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    z-index: 3;
    font-family: 'Montserrat', sans-serif;
    color: white;
}

.mind-site-footer_main p {
      font-weight: 800;
      margin: 0;
      padding: 20px;
      font-size: 25px;
}

nav.mind-site-footer_nav {
  text-align: right;
  margin: 20px;
}
/*
1.5. Header
--------------------------------------------------
*/

/* TODO: choose if background should be colorful or black */
.mind-post-header, footer.mind-site-footer_main {
	/*background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);*/
  background: rgb(10, 10, 10);
	background-size: 1000%, 100%;
	animation: gradient 7s linear infinite;
	animation-direction: alternate-reverse;
	color: white;
}

.mind-global-header_arrow-down {
	border: solid white;
	opacity: 0.4;
	border-width: 0 2px 2px 0;
	display: inline-block;
	padding: 6px;
	margin-left: -6px;
	position: absolute;
	transform: rotate(45deg);
	transition: 1s;
}

.mind-global-header_arrow-down-big {
animation: arrow-bounce-big 1.5s infinite;
}

.mind-global-header_arrow-down-mid {
animation: arrow-bounce-mid 1.5s infinite;
}

/* 2. Index Style
--------------------------------------------------
Used to style the index/homepage.
*/

.mind-index-header_main {
	height: 100%;
	width: 100%;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: linear-gradient(45deg, #067062, #063d70, #2d0670, #4e0670, #700667);
	background-size: 1000%, 100%;
	animation: gradient 7s linear infinite;
	animation-direction: alternate-reverse;
}

.mind-index-header_main h1 {
	margin-top: 100px;
	padding: 0;
	font-size: 90px;
}

/* 3. Feeds
--------------------------------------------------
*/

/* 3.1. Post Feed
--------------------------------------------------
Used to style the post feed, seen in the index/home page.
*/

.mind-feed-content_main {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 30px;
	padding: 50px 0;
}

/* 3.2. Tag Feed
--------------------------------------------------
Used to style the tag feed, seen in the custom-tags page.
*/

.mind-tag-content_main {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 30px;
	padding: 50px 0;
}

/* 4. Post & Tag Cards
--------------------------------------------------
*/

/* 4.1. Big Post Card style
--------------------------------------------------
*/

.mind-post-card-big_main {
  /* Layout */
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
	box-sizing: border-box;

	/* Style */
	background-color: rgb(50, 50, 50);
	border: 1px solid;
	border-color: transparent;
	border-radius: 5px;
	box-shadow: 0 1px 1px black, 0 2px 4px black;
	transition: 0.5s;
	font-size: 18px;
}

.mind-post-card-big_main:hover {
	box-shadow: 1px 3px 15px 2px black;

	/* TODO: decide:
	1. move up
	transform:translate3d(0,-5px,0);

	2. scale up
	transform: scale(1.04);

	3. scale down
	transform: scale(0.96);

	ATM: move up
	*/
	transform:translate3d(0,-5px,0);
}

.mind-post-card-big_header {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	padding: 20px 30px 0;
}

.mind-post-card-big_excerpt {
  text-align: justify;
	padding: 0 30px;
}

a.mind-post-card-big_main {
	color: rgb(200, 200, 200);
}

.mind-post-card-big_meta {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
	margin: 10px 5px 0;
	color: rgb(180, 180, 180);
}

a.mind-post-card-big_main:hover {
	text-decoration: none;
}

footer.mind-post-card-big_footer {
	display: flex;
	align-items: flex-end;
	height: 100%;
	margin-top: 20px;
	justify-content: flex-end;
	padding: 0 20px 20px;
}

.mind-post-card-big_author-image {
	border-radius: 100%;
	margin-left: 10px;
	max-width: 30px;
}

.mind-post-card-big_feature-image {

	/*
	The following 3 statements are used
	to make all images have the same size.

	This has the downside of being relatively more difficult to scale,
	so if you want to go back to normal viewing (full image)
	only leave:
	width: 100%;
	*/
	object-fit: cover;
	width: 100%;
	height: 217px;
	max-height: 100%;


	border-radius: 5px;
}
/* 4.2. Navbar Post Card style
--------------------------------------------------
*/

.mind-post-card-sidebar_main {
	/* Layout */
	display: flex;
	flex-direction: column;
	margin: 20px 0;

	/* Style */
	background-color: rgb(40, 40, 40);
	border-radius: 5px;
	box-shadow: 0 0 2px rgb(0,0,0),0 2px 3px rgb(0,0,0);
	transition: .3s;
}

.mind-post-card-sidebar_main:hover {
	transform:translate3d(0,-5px,0);
	box-shadow: 0 0 2px rgb(0,0,0),0 2px 15px rgb(0,0,0);
}

.mind-post-card-sidebar_feature-image {

	/*
	The following 3 statements are used
	to make all images have the same size.

	This has the downside of being relatively more difficult to scale,
	so if you want to go back to normal viewing (full image)
	only leave:
	width: 100%;
	*/
	object-fit: cover;
	width: 100%;
	height: 100px;
	max-height: 100%;


	border-radius: 5px;
}

.mind-post-card-sidebar_meta {
	font-family: 'Open Sans';
	font-weight: 700;
	text-transform: uppercase;
	font-size: 12px;
	color: rgb(180, 180, 180);
}

.mind-post-card-sidebar_header {
	margin: 0 5px 0;
	padding: 0 5px 10px;
}


/* 4.3. Tag Card Style
--------------------------------------------------
*/

.mind-tag-card_main {
	/* Layout */
	display: flex;
	flex-direction: column;
  height: 100%;

	/* Style */
	background-color: rgb(40, 40, 40);
	border-radius: 5px;
	box-shadow: 0 0 2px rgb(0,0,0), 0 2px 3px rgb(0,0,0);
	transition: .3s;
}

.mind-tag-card_main:hover {
	transform:translate3d(0,-5px,0);
	box-shadow: 0 0 2px rgb(0,0,0), 0 2px 10px rgb(0,0,0);
}
.mind-tag-card_feature-image {

	/*
	The following 3 statements are used
	to make all images have the same size.

	This has the downside of being relatively more difficult to scale,
	so if you want to go back to normal viewing (full image)
	only leave:
	width: 100%;
	*/
	object-fit: cover;
	width: 100%;
	height: 200px;
	max-height: 100%;


	border-radius: 5px;
}
.mind-tag-card_header {
  margin: auto;
}

.mind-tag-card_header h4 {
  font-size: 20px;
  text-align: center;
  margin: 10px;
}
/* 5. Pages & Posts style
--------------------------------------------------
style shared between pages and posts (eg. title).

Even if pages are different from posts, they are very similar,
and thus mostly share the same classes.
Due to Ghost's structure, pages are derivates of posts,
so all classes will refer to them as posts ".mind-post*"
instead of pages ".mind-page*".
*/


/* 5.1. Header
--------------------------------------------------
*/

.mind-post-header {
	height: 400px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	text-align: center;
	position: relative;
	z-index: 3;
	box-shadow: 0 0 3px rgb(0,0,0),0 3px 46px rgb(0,0,0);
}

.mind-post-header div {
/* Leave space for the floating arrow */
	margin: 0;
	margin-bottom: 70px;
}

.mind-post-header p {
	font-family: 'Open Sans';
	font-weight: 700;
	text-transform: uppercase;
	color: rgb(200, 200, 200);
	font-size: 15px
}

/* 5.2. Content
--------------------------------------------------
*/

.mind-post_main {
	max-width: 1260px;
	width: 1260px;
	display: grid;
	grid-template-columns: 1fr 4fr 1fr;
	margin: auto;
}

.mind-post_content-header {
	/*
		TODO: decide whether the image should be full-size (without rounded borders),
		or with the same margin as the content, with rounded borders.

		SAME-AS-CONTENT:
		margin-top: 50px;

		CURRENTLY:
		full-size.
	 */

	margin: 0 -60px;
	padding: 0 0 20px;
}

img.mind-post_feature-image {
	width: 100%;
	/*
	TODO: see .mind-post_content-header.

	SAME-AS-CONTENT:
	border-radius: 5px;
	*/
}

.mind-post_content code {
	font-family: monospace;
	background-color: rgb(20, 20, 20);
	border-radius: 2px;
	font-size: 14px;
	padding: 7px 5px 2px;
}

.mind-post_content pre code {
	border-radius: 0;
	padding: 0;
}

.mind-post_content pre {
	background-color: rgb(20, 20, 20);
	overflow-x: scroll;
	border: 1px solid black;
	border-radius: 5px;
	font-size: 14px;
	color: white;
	padding: 10px;
	margin: 0 20px 2em;
}

.mind-post_content {
	overflow: hidden; /* to hide, eg., overflowing code */
	padding: 0 60px;
  text-align: justify;
	background-color: rgb(40, 40, 40);
	box-shadow: 0 0 3px rgb(0,0,0),0 3px 46px rgb(0,0,0);
	position: relative;
	z-index: 2;
	font-size: 18px;
	color: rgb(200, 200, 200);
  box-sizing: border-box;
}

.mind-post_content h1, .mind-post_content h2, .mind-post_content h3, .mind-post_content h4, .mind-post_content h5, .mind-post_content h6 {
	text-align: left;
}

.mind-post_content blockquote {
	border-left: 4px solid paleturquoise;
	border-radius: 6px;

	color: rgb(180, 180, 180);
	background-color: rgb(30, 30, 30);

	margin: 20px 0;
	padding: 10px 30px;
}

.mind-post_content li {
	margin: 0 0 1em;
}

/*.mind-post_content a {
  position: relative;
}

.mind-post_content a:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: paleturquoise;
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.3s ease-in-out 0s;
	transition: all 0.3s ease-in-out 0s;
}

.mind-post_content a:hover:before {
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}*/


/* 5.3. Koenig Styles
--------------------------------------------------
*/

  /* Begin images

  [structure]
  class ".kg-card" is applied to all cards!

  class ".kg-image" is applied to all images.
  class ".kg-image-card" is applied to all image containers (includes description)

  there are 3 sizes:
    - normal
    - wide (class ".kg-width-wide")
    - full (class ".kg-width-full")

  if an image has a description, class ".kg-card-hascaption" is applied to the container.
  */

  .kg-card {
    padding: 20px 0 20px;
  }

  .kg-image {
    width: 100%;
    max-width: 100%;
  }

  .kg-image-card img {
      border-radius: 5px;
  }

  .kg-image-card {
    margin: 0 40px;
  }

  .kg-width-wide {
    margin: 0;
  }

  .kg-width-full {
    margin: 0 -60px;
  }

  .kg-width-full img {
    border-radius: 0;
  }

  .kg-card-hascaption figcaption {
    margin: 0 20px;
    padding: 10px 20px;
    font-size: 16px;
    line-height: 1em;
    color: rgb(150, 150, 150);
    border-right: 1px solid rgb(80, 80, 80);
    border-bottom: 1px solid rgb(80, 80, 80);
    border-left: 1px solid rgb(80, 80, 80);
    border-radius: 0 0 5px 5px;
    text-align: center;
  }

  /* End images */

  /* Begin Bookmarks */


  .kg-bookmark-card {
    margin: 0;
  }

  .kg-bookmark-container {
    display: flex;
    min-height: 148px;
    border: 1px solid rgb(80, 80, 80);
    border-radius: 5px;
    transition: .3s;
  }

  .kg-bookmark-container:hover {
  	transform:translate3d(0,-3px,0);
  	box-shadow: 0 0 3px rgb(0,0,0),0 3px 10px rgb(0,0,0);
  }

  .kg-bookmark-content {
    display: flex;
    flex-direction: column;
    padding: 20px 20px 0;
    color: white;
  }

  .kg-bookmark-title {
    font-size: 15px;
    font-weight: 700;

  }

  .kg-bookmark-description {
    margin: 12px 0;
    max-height: 48px;
    font-size: 14px;

    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

  }

  .kg-bookmark-metadata {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    margin-top: auto;

  }

  .kg-bookmark-icon {
    width: 22px;
    height: 22px;
    margin-right: 10px;

  }

  .kg-bookmark-publisher {
    padding-left: 10px;
  }

  .kg-bookmark-author {
    padding-right: 10px;
    border-right: 1px solid rgb(80, 80, 80);
  }

  .kg-bookmark-author, .kg-bookmark-publisher {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
  }

  .kg-bookmark-thumbnail {
    box-sizing: border-box;
    font-size: 0;
    max-height: 100%;
    max-width: 30%;
  }

  .kg-bookmark-thumbnail img {
    box-sizing: border-box;
    border-radius: 0 5px 5px 0;
    object-fit: cover;
    height: 100%;
    width: 100%;
  }

  /* End Bookmarks */

  /* Begin Gallery */
  .kg-gallery-container {
    margin: 0 -40px;
  }

  .kg-gallery-row {
    display: flex;
    justify-content: center;
  }

  .kg-gallery-image {
    margin: 10px 10px;
  }
  .kg-gallery-image img {
    object-fit: cover;
    height: 100%;
    width: 100%;
  }

  /* End Gallery */


/* 5.4. Sidebar
--------------------------------------------------
*/

.mind-post_sidebar {
	padding: 0 20px;
	background-color: rgb(30, 30, 30);
	box-shadow: 0 0 3px rgb(0,0,0),0 3px 46px rgb(0,0,0);
	height: 100%;
}

.mind-post_sidebar-content {
	padding: 90px 0 10px;
	position: sticky;
	top: 0;
}

/* 6. Cookie & Policy popup
--------------------------------------------------
*/

.mind-policy-popup {
  display: none; /*Hidden, we want to show it via JavaScript */

  /* Theming */
  background: rgb(30, 30, 30);
  color: white;
  border-radius: 3px;
  padding: 10px;
  font-size: 25px;
  box-sizing: border-box;
  box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.2);

  /* Disable text highlighting */
  user-select: none;
  -moz-user-select: none;
  -webkis-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;

  /* Size */
  width: 600px;
  overflow: hidden;

  /* Positioning */
  position: fixed;
  left: 50px;
  bottom: 75px;
  z-index: 2;
}

.mind-policy-popup p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 200;
  color: white;
  font-size: 16px;
}


.mind-policy-popup button {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 13px;

  transition-duration: 0.4s;
  border-radius: 3px;
  background-color: #484848;
  border: none;
  cursor: pointer;
  color: white;
  padding: 15px 30px;
  text-align: center;
  float: right;
}

.mind-policy-popup button:hover {
  background-color: #44277a;
}

div.mind-policy-popup {
  z-index: 100;
  padding: 20px 20px;
}

/* End policy popup */

/* 7. Animations and Gradients
--------------------------------------------------
*/

/* ARROW BOUNCE (on Pages and Posts)*/
@keyframes arrow-bounce-mid {
	0% { top: 89%; }
	50% { top: 87%; }
	100% { top: 89%; }
}

/* ARROW BOUNCE (on Index and Home pages)*/
@keyframes arrow-bounce-big {
	0% { top: 94%; }
	50% { top: 92%; }
	100% { top: 94%; }
}

/* ANIMATED GRADIENT BACKGROUND */
@keyframes gradient {
	0% {background-position: 0%}
	100% {background-position: 100%}
}