jakubb-hugo/static/css/style.css

/* Include */
@import url('./colorschemes/gruvbox.css'); /* Include colorscheme */


/* Global options  */
html, body {
  margin: 0;
  padding: 0;
}

body{
  font-size: 100%;
  line-height: 1.5;
 	background-color: var(--bg);
 	color: var(--fg);
}

a{
  text-decoration: none;
 	color: var(--acc-1);
}


/* Main Body */
.content { margin: 5em 5% auto 5%; }

footer {
	width: calc(85% - 40px);
	text-align: center;
	padding: 20px;
	margin-left: 15%;z
}

footer.fixed {
	margin: 0;
	position: fixed;
	bottom: 0;
	left: 15%;
}


/* Header and Navigation Menu */
.header { 
	width: 100%;
	background-color: var(--alt-bg);
	box-shadow:  inset 0 -20px 20px -20px var(--shadow);
	position: fixed;
	top: 0;
	z-index: 100;
}

.menu-entries a{
	transition: 400ms;
}

.menu-entries a:hover{
	background-color: var(--acc-1);
	color: var(--alt-bg);
	box-shadow:  inset 0 -20px 20px -20px var(--shadow);

}

.menu {
  margin: 0;
  padding: 0;
}

.menu li {
	list-style-type: none;
	display: inline-block;
}

.menu-entries {
	float: right;
	padding: inherit;
	position: absolute;
	top: 0;
	right: 0;
}

.menu-btn {
  display: none;
}

.menu a {
	display: inline-block;
	padding: 20px;
}


/* Mobile layout - logo now serves as toggle for rest of menu items */
@media screen and (max-width: 755px) {

	/* disable clicking and clickable cursor indication */
	.logo {
		pointer-events: none;
		text-align: center;
	}

	.menu-entries {
		text-align: center;
		float: none;
		position: inherit;

		/* Hide Entries until toggled */
		height: 0;
		max-height: 0;
		overflow: hidden;

		/* Slide out Animation */
		transition: 400ms;
		transition-property: all;
	}

	.menu-btn:checked ~ .menu li .menu-entries {
		/* Reveal Entries */
		height: auto;
		max-height: 900px; /* May Need to be change manually for nav lists */
	}

	.menu-btn:checked ~ .menu .logo, .menu-entries a:hover	 {
		/* BG Color on logo an hover effect */
		background-color: var(--acc-1);
		color: var(--alt-bg);
	}

	.menu li, .menu-entries a{ display: block; }
	/* TODO Make sure we can combine these 2 blocks */

	a.logo { display: block; transition: 400ms; }


	/* Hamburger Menu */
	.hamburger {
		display: block;
		float: right;
		position: absolute;
		top: 0;
		right: 0;
		margin-top: 12px;
		margin-right: 12px;
		cursor: pointer;
	}

	.bar1, .bar2, .bar3 {
  	width: 35px;
  	height: 5px;
		background-color: var(--acc-1);
  	margin: 6px 0;
  	transition: 0.4s;
	}

	.change .bar1 {
		background-color: var(--alt-bg);
  	transform: translate(0, 11px) rotate(45deg);
	}	

	.change .bar2 { opacity: 0; }
	
	.change .bar3 {
  	transform: translate(0, -11px) rotate(-45deg);
		background-color: var(--alt-bg);
	}
}
/* Wide window - links on the left in a sidebar */	
@media screen and (min-width: 1040px) {
	.header {
		width: 15%;
		height: 100%;
		box-shadow: inset -22px 0 20px -20px var(--shadow);
	}

	.menu-entries{ 
		float: none;
		position: inherit;
	}

	.menu a, .menu li { display: block; }

	.content { 
		margin-left: calc(15%);
		margin-top: auto;
		padding: 20px;

	}

	.menu-entries a:hover{
		box-shadow: inset -22px 0 20px -20px var(--shadow);
	}
}

/* Table Styles */

table { width: 100%; }

th, td, table {
	border: 1px solid var(--bg);
	border-collapse: collapse;
	padding: 6px 13px;
}

table thead tr { background-color: var(--table); }

table tr { background-color: var(--table-alt); }

table tr:nth-child(2n) { background-color: var(--table); }



/* Markdown Blockquote styles */

blockquote {
  border-left-color: var(--alt-bg);
  border-left-width: 5px;
  border-left-style: solid;
	margin: 0;
}

blockquote blockquote { margin-left: 20px }

blockquote p {
  padding: 20px;
	margin-left: 5px;
}

/* Maps Shortcode */
blockquote.location {
	background-color: var(--alt-bg);
  border-left-color: var(--acc-1);
	padding: 20px;
}

blockquote.location p { padding: inherit; }


/* =========================================== Still Needs cleaning  */
/* Maps shortcode styling */
/* TODO rename most grid related elements for clarity */

.grid-item {
	margin: 0;
	position: relative;
 }

.grid-item p {
	margin: 0;
}
	
.map-button {
	color: var(--fg);
	background-color: var(--acc-1);
	padding: 5px;
	border: solid 3px var(--acc-1);
	border-radius: 8px;
}

.map {
	display: flex;
}

.map img {
	width: 350px;
	max-height: 350px;
}
.map-txt-grid {
	display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  grid-gap: 10px;
	position: relative;
	left: 15px;

	z-index: 1;
}

.map img {
	display: block;
}

.map-txt-grid {
	display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr;
  grid-gap: 10px;
	position: relative;
	left: 15px;

	z-index: 1;
}

.map img {
	display: block;
}


@media screen and (max-width: 755px) {
	.map {
		display: block;
	}
	
	.map-button {
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.map img {
		width: 100%;
		max-height: inherit;
	}
	
	.map-txt-grid {
		display: grid;
		grid-template-rows: auto auto; /* Two rows, first row adjusts to content, second row adjusts to content */
		grid-template-columns: 1fr 1fr; /* Two columns for the entire grid */
	}
	
	.map-txt-grid {
		margin-top: 10px;
		left: 0;
	}
	
	.grid-item:first-child {
		grid-column: span 2; /* Span two columns */
	}
}