jakubb-hugo/static/css/style.css

 /* modifying it for now. */

a.home-link{
    display: none;
}

.logo img, .logo {
    height: 24px;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: #1d2021;
  color: #ebdbb2;
  font-size: 100%;
  line-height: 1.5;
}
a {
  color: #83a598;
  text-decoration: none;
}


.content {
  overflow: none;
  margin: auto 5% auto 5%;
  word-wrap: break-word;
  /* padding-bottom: 15%; */
/* display: inline-grid; */
/*   max-width: 45rem; */
/*   margin-bottom: 2rem; */
/*   margin: 2rem auto; */
  /* padding-top: 100px; */

}
/* Lists */
.post-snippet {
  margin-bottom: 1rem;
}

.post-snippet h3 {
  margin-bottom: 0.25rem;
}

/* header */

.header {
  background-color: #504945;
  /* width: 100%; */
/* /1*   position: fixed; *1/ */
/*   z-index: 3; */
}

.header .menu {
  margin: 0;
  padding: 0;
/*   /1* width: 100%; *1/ */
/*   height: auto; */
  position: relative;
  list-style: none;
  /* overflow: hidden; */
  overflow: auto;
  /* background-color: #a89984; */
}


.header .menu li a{
  padding: 15px;
  display: block;
}

.menu-entries a:hover,
.header .menu-btn:hover {
  background-color: #83a598;
  color: #504945;
}



.header .logo {
  /* float: left; */
  padding: 15px 20px;
}

/* menu */

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

.header .menu {
}

/* menu icon */

.logo {
  cursor: pointer;
}

.header .menu-icon {
/*   cursor: pointer; */
/*   float: right; */
/*   padding: 28px 20px; */
/*   position: relative; */
/*   user-select: none; */
}

/* menu btn */

.header .menu-btn {
  display: none;
}


.menu .logo {
  transition: 400ms;
}

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

footer .buttons img {
  /* margin: 5px; */
  display: inline-block;
  max-height: 25em;
  max-width: 100%;
}

/* div.content, footer{ */
/*   margin-left: 0; */
/*   /1* height: 1000px; *1/ */
/* } */

/* @media screen and (max-width: 900px) { */
/*   ul.menu { width: 100%; */
/*     height: auto; */
/*     position: relative; */
/*   } */
  
/*   ul.menu li a { */
/*     padding: 15px; */
/*   } */
  
/*   div.content, footer {margin-left: 0;} */
/* } */

/* .menu a { */
/*     padding: 20px 30px; */
/* } */
/*   ul.menu li a { */
/*     float: left; */
/*   } */

/*   .menu-entries { */
/* 	float: right; */
/*   } */

/*   .header .menu li .menu-entries{ */
/*     clear: none; */
/*     align-self: right; */
/*     width: auto; */
/*     max-height: none; */
/*   } */

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

/* } */
@media screen and (max-width: 750px) {

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

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

  .logo {
/*     clear: none; */
	  pointer-events: none;
  }

  .menu-icon {
    cursor: pointer;
  }

.menu {
  overflow: auto;
}

.header .menu-btn:checked ~ .menu .logo {
  background-color:#83a598;
  color: #504945;
}

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

}

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

.menu-entries {
  float: right;
}

.header .menu li a {
  width: fit-content;
  display: inline-block;
}

.menu-entries a {
  float: left;
}

}

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

  .menu {
    height: 100%;
  }
  
/*   .header .logo { */
/*     float: none; */
/*   } */
/*   .header .menu { */
/*     clear: both; */
/*   } */

  .menu-entries{ 
	  float: none;
  }

.menu-entries a:hover,
.header .menu-btn:hover {
  color: #83a598; 
  background-color: #504945;
}

/*   ul.menu li a { */
/*     float: none; */
/*     padding: 20px; */
/*   } */
  .content, footer {
    /* margin: auto; */
    padding: 1px 16px;
  }
  

  .header .menu li a {
    display: block;
    /* width: 100%; */
    float: none;
  }

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

}


/*   .logo { */
/*     height: 28px; */
/*     width: fit-content; */
/*   } */
/* } */



/* .header .logo { */
/*   display: block; */