hugo-theme/static/css/style.css

@import url('./colors.css'); /* Include colorscheme */
/* TODO clean and move all ugly code from old.css into this file */
/* @import url('./old.css'); */


/* Global  */
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: auto 5% auto 5%;
}
	

	.menu-entries {
  	/* display: block; */
  	/* clear: both; */
  	/* transition: max-height .2s ease-out; */
	}

	/* Footer */
	footer {
		/* position: fixed; */
		left: 0;
		bottom: 0;
		width: 100%;
		text-align: center;
		max-height: 15%;
		padding-top; 10px;
		padding-bottom: 10px;
	}
	
	footer .buttons {
  	margin-top: 5px;
	}


/* Header */

.header { 
	width: 100%;
	/* position: fixed; */
	/* top: 0; */
	background-color: var(--alt-bg);
	/*   z-index: 3; */
	
}

.header .menu {
  margin: 0;
  /* position: relative; */
  /* overflow: auto; */
  padding: 0;
  list-style: none;
}

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

	/* Menu */
.header .menu-btn {
  display: none;
}


@media screen and (max-width: 755px) {
  .logo {
/*     clear: none; */
	  pointer-events: none;
  }

  .menu-icon {
    cursor: pointer;
  }

	/* .content { */
	/* 	margin: auto 5% auto 5%; */
	/* } */
.header .menu-btn:checked ~ .menu li .menu-entries, .menu li .menu-entries a{
  display: block;
}

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

}


	.menu-entries {
		text-align: center;
		float: none;
		display: none;
	}

	.menu-icon a.logo {
		display: block;
	}

}

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

	.menu-entries {
	  	float: right;
	}

	
	.header .menu li a {
	  	/* width: fit-content; */
		/* padding:15px; */
	  /* display: inline-block; */
	}
	/*  */
	/* .menu-entries a { */
	/*   	float: left; */
	/* } */
}

@media screen and (min-width: 1040px) {
  .header {
    top: 0;
    width: 15%;
    height: 100%;
    position: fixed;
  }

	.menu {
		width: 100%;
		padding: 0;
		margin: 0;
	}

.header .menu a {
	display: block;
}
	.header .menu li a{
		/* width: 100%; */
		display: block;
		/* padding: 15px; */
		margin: 0;
	}

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

  .menu-entries{ 
	  float: none;
  }

	.content { 
	  	margin: auto 5% auto 20%;
	}

  .content, footer {
    padding: 1px 16px;
  }
}