jakubb-hugo/static/css/style.css

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


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

body{
  /* font-size: 100%; */
  line-height: 1.5;
 	background-color: var(--body-bg);
 	color: var(--body-fg);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

a{
  text-decoration: none;
 	color: var(--link-fg);
}


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


footer {
	width: calc(100% - 40px);
	text-align: center;
	padding: 20px;
}

footer.fixed {
	margin: 0;
	position: fixed;
	bottom: 0;
}


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

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

.menu-entries a:hover{
	background-color: var(--header-bg-hov);
	color: var(--header-fg-hov);
	box-shadow:  inset 0 -20px 20px -20px var(--header-shadow-hov);

}

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

.menu a {
	display: inline-block;
}

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

.menu-btn, .lang-btn {
  display: none;
}

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


a.home-link { display: none; }

/* 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  .menu-entries {
		/* Reveal Entries */
		height: auto;
		max-height: 750px; /* May Need to be change manually for nav lists */
		overflow: scroll;
}

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

	.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(--hamburger-fg);
  	margin: 6px 0;
  	transition: 0.4s;
	}

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

	.change .bar2 { opacity: 0; }
	
	.change .bar3 {
  	transform: translate(0, -11px) rotate(-45deg);
		background-color: var(--hamburger-fg-checked);
	}
}
/* 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(--header-shadow);
	}

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

	.menu a, .menu a { display: block; }
	a.home-link { display: none; }

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

	}

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

	footer { 
		width: calc(85% - 40px); 
		margin-left: 15%;
		padding-top: 0;
	}

	footer.fixed { left: 15%; }
}

/* Table Styles */

table { width: 100%; }

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

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

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

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



/* Markdown Blockquote styles */

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

blockquote blockquote { margin-left: 20px }

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

blockquote p { margin: 0; }

blockquote.location p { padding: inherit; }

.map-txt-grid .child-element a.button { margin: 0; }


/* =========================================== 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;
}
	
.button {
	color: var(--button-fg);
	background-color: var(--button-bg);
	padding: 5px;
	border: solid 3px var(--button-bg);
	border-radius: 8px;
	margin-top: 10px;
	margin-bottom: 10px;
	display: inline-block;
}

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





/* TODO put in a clean spot */
.lang-switch {
	display: inline-block;
	background-color: var(--lang-btn-bg);
	text-align: center;
	width: 120px;

}

.lang-switch a {
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.lang-switch a:hover  {
	background-color: var(--langs-bg-hov);
}


/* lang-switch content (hidden by default) */
.translation-list {
  display: block;
  position: absolute;
	background-color: var(--langs-bg);	
	width: 120px;
	top: 64px;
	right: 0;
	overflow: hidden;

	height: 0;
	max-height: 0;
	transition-property: all;
	transition: 400ms;
}

/* Links inside the lang-switch */
.translation-list a {
  float: none;
  display: block;
}

/* Add a grey background color to lang-switch links on hover */

/* Show the lang-switch menu on hover */
.lang-btn:checked ~ .translation-list {
	height: auto;
	max-height: 100px;
}

.lang-btn:checked ~ .lang-switch {
	background-color: var(--langs-bg-hov);
}

@media screen and (min-width: 1040px) {
	.lang-switch { 
	width: 100%;
	text-align: left;
}

.lang-switch a {
	padding: 20px;
	width: auto;
}

.translation-list {
	position: static;
	width: auto;
}

}

@media screen and (max-width: 755px) {
	.lang-switch { 
	width: 100%;
	display: block;
}

.lang-switch a {
	padding: 20px;
	width: auto;
}

.translation-list {
	position: static;
	width: auto;
}


}

/* Calendar TODO Mix in for clean stylesheet */
 .calendar {
  width: 100%;
	max-width: 1000px;
  margin: 20px auto;
  padding: 0;
  background-color: var(--cal-bg);
  color: var(--cal-fg);
 }

 a.month {
  display: block;
  width: 100%;
  padding: 15px 0;
  text-align: center;
  background-color: var(--cal-month-bg);
  color: var(--cal-month-fg);
	pointer-events: none;
 }

 .days {
  width: calc(100% - 10 px) ;
  padding: 5px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
 }

 .weekdays {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
	pointer-events: none;
 }

 .weekdays p {
  display: inline-block;
  width: calc(14.28%);
  background-color: var(--cal-weekdays-bg);
  color: var(--cal-weekdays-fg);
  margin: 0;
  padding: 0;
  text-align: center;
	/* border: 0px solid var(--bg); */
	/* border-collapse: collapse; */
}

 .pad-day, .day {
  width: calc(14.28% - 3px - 10px);
  padding: 0 5px;
  margin: 1.5px;
  aspect-ratio: 1;
 }


 .day {
  background-color: var(--cal-day-empty-bg);
  color: var(--cal-day-empty-fg);
  transition: 400ms;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
 }


 .day:has(>.event) {
  display: block;
  color: var(--cal-day-busy-fg);
  background-color: var(--cal-day-busy-bg);
 }

.day:has(>.event):hover {
  transform: scale(1.2);
  background-color: var(--cal-day-hover-bg);
  color: var(--cal-day-hover-fg);
 }

 .day-num {
  font-size: 8vh;
	pointer-events: none;
 }

.day:has(>.event) .day-num {
  font-size: 4vh;
 }

 .event, .event a {
  font-size: 1.5vh;
  color: var(--cal-event-fg);
  background-color: var(--cal-event-bg);
 }

 .mobile-date { display: none;}
 
/* mobile layout */
@media screen and (max-width: 755px) {
  .day, .pad-day, .weekdays, a.month { display:  none; }

  .days { 
    padding: 0;
    text-align: left;
   }

  .calendar{
    background-color: inherit;
    
  } 
  .day:has(>.event) {
    display: block;
    width: 100%;
    aspect-ratio: auto;

    text-align: left;

    border-left-width: 5px;
    border-left-style: solid;
    margin-top: 10px;
    background-color: var(--alt-bg);
    border-left-color: var(--acc-1);
    padding: 20px;
    color: var(--alt-fg);

  }

  .day:has(>.event):hover {
    background-color: var(--alt-bg);
    transform: none;
    color: var(--alt-fg);

  }

  .day-num { display: none; }

 .mobile-date { 
    display: inline-block;
    
    text-align: left;
    font-size: 3vh;
    width: auto;

  }

  .event {

    float: right;
    height: 100%;

    display:flex;justify-content:flex-end;align-items:center;
  }

  .event, .event a {
    background: none;

  }
    .event a {
    color: var(--acc-1);
    font-size: 2vh;
    }
}



/* pics stuff */

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
	width: 100%;
}

.gallery-item {
	flex-grow: 1;
	flex: 1 1 auto;
	height: 25vh;
}

.gallery-item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: 140ms;
	border-radius: 8px;
}


.gallery-item img:hover {
  transform: scale(1.2);
  transition: 400ms;
}

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

	.gallery-item {
		width: 100%;
		height: auto;
	}

	.gallery-item img:hover {
  	transform: none;
	}
}