jakubb-hugo/static/css/style.css

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




























/* For cleanup ================================ */ 
/* Globals  */
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%;
}

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

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


}

.hamburger {
	display: none;
}

.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;
}

.menu-entries {
	float: right;
	padding: inherit;
}

.menu-btn {
  display: none;
}

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


/* Footer */
footer {
	/* position: fixed; */

	width: 100%;
	text-align: center;
	padding-bottom: 14px;

}

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

.logo {
	pointer-events: none;
	text-align: center;
}

.menu-icon {
	cursor: pointer;
 }

.menu-entries {
	text-align: center;
	float: none;
	height: 0;
	max-height: 0;
	transition-property: all;
	transition-duration: 400ms;
	overflow: hidden;
}
	
a.logo {
	display: block;
	transition: 400ms;
}

	.menu-btn:checked ~ 
		.menu li .menu-entries,
		.menu li .menu-entries a{
			display: block;
	}

	.menu-btn:checked ~ 
	.menu li .menu-entries {
		height: auto;
		max-height: 900px;
		transition-property: all;
		transition-duration: 400ms;

	}

	.menu-btn:checked ~ .menu .logo, .menu-entries a:hover	 {
	background-color: var(--acc-1);
	color: var(--alt-bg);
	transition: 400ms;
	}

.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);

}
}

@media screen and (min-width: 755px) and (max-width: 1040px) {

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

	.menu li {
		display: inline-block;
	}
}

@media screen and (min-width: 1040px) {
/* Wide window - links on a left sidebar */	
	.header {
		width: 15%;
		height: 100%;
		box-shadow: inset -22px 0 20px -20px var(--shadow);
	}

	.menu a {
		display: block;
	}

	.menu-entries{ 
		float: none;
	}

	.content { 
		margin: auto 5% auto 20%;
		padding: 1px 16px;
	}

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


.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;
}

.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 */
	}
}