style.css

*{
  box-sizing: border-box;
}
html{
  background: #eee;
}
body{
  background: #fff;
  margin: 0 auto;
  max-width: 24em;
}

/* 
HEADER 
met grote titel 
en zoek icoon
*/
body > header{
  position: relative;
  background: gold;
  margin: 0;
  margin-top: -13rem;
  padding: 1rem;
  transition: margin 0.3s cubic-bezier(.66,1.66,.72,1.03);
  /* cubic bezier tool http://cubic-bezier.com */
}
body > header h1{
  margin: 4rem 0 3rem 0;
  font-family: roboto, helvetica, arial, sans-serif;
  font-weight: bold;
  letter-spacing: -0.1em;
  font-size: 6.3em;
  line-height: 80%;
}
/* zoek button vergrootglas & sluit icoon */
body > header > button{
  outline: none;
  position: absolute;
  top: 15rem;
  right: 0.2rem;
  width: 5rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  background-image: url('https://koopreynders.github.io/frontendvoordesigners/img/search.svg');
  background-size: 3rem;
  background-repeat: no-repeat;
  background-position: top;
  height: 5rem;
  font-family: roboto, helvetica, arial, sans-serif;
  font-size: 0.8em;
  padding-top: 3rem;
  cursor:pointer;
  transition: all 0.3s;
}
.close{
    background-image: url('https://koopreynders.github.io/frontendvoordesigners/img/close.svg');
  font-size: 0em;
}
body > header > button img{
  width: 3rem;
  margin-bottom: 0.4rem;
}
body > header > button:hover{
  transform: scale(1.1);
}

/* 
MICRO INTERACTIE
deze class wordt aangeroepen als op de button wordt geklikt
*/
body > header.show-search{
  margin-top: 0;
/*   background: Goldenrod; */
}
body > header.show-search span {
  top: -2.6rem;
  transition: top 0.35s 0.4s cubic-bezier(.66,1.66,.72,1.03);
}
/* 
ZOEK FORM
Staat eerst buiten beeld
na klik schuift het naar beneden
Dit is de micro interactie
*/
header > form{
  margin: -1rem;
  padding: 4rem 1rem 2rem 1rem;
  text-align: center;
  background: Goldenrod;
}
header > form fieldset{
  border: 0;
  margin: 0;
  padding: 0;
  font-family: roboto, helvetica, arial, sans-serif;
  font-weight: bold;
  font-size: 2em;
  color: #8a6914;
}
header > form fieldset div{
  display: flex;
  flex-direction: column;
  align-items: center;
}
header > form input[type="search"]{
  display: block;
  margin: 1rem 0;
  padding: 0.6rem;
  width: 16em;
  font-family: sans-serif;
  font-size: 1.4rem;
  text-align:center;
  border: solid 0.4rem DarkGoldenrod;
  transition: border 0.3s;
}
header > form input[type="search"]:focus{
  border: solid 0.4em black;
  border-radius: 1rem;
}
header > form label{
  position: absolute;
  left: -666rem;
}
header > form button{
  position: absolute;
  left: -666rem;
}
header > form legend{
  position: relative;
}
header > form legend > span{
  position: absolute;
  top: -8rem;
  left: 43%;
  transform: rotate(10deg);
  font-weight: normal;
  font-size: 0.8em;
  background: gold;
  color: black;
  padding: 0.2rem 0.8rem 0.8rem 0.8rem;
  clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 57% 80%, 45% 100%, 31% 80%, 0 80%);
  /* maak je eigen clippy: http://bennettfeely.com/clippy */

}

/*
MAIN 
content met de verhalen
*/
main{
  margin: 0;
  padding: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
main h2{
  width: 20rem;
  margin: 1rem 0;
  font-family: roboto, helvetica, arial, sans-serif;
  font-weight: bold;
  font-size: 1.4em;
}
main figure{
  /background: pink;
  /width:calc(50% - 2rem);
  /margin: 1rem;
  overflow: hidden;

}
main figure img{
  width:calc(50% - 2rem);
  /height: 10em;

  margin: 0;
  padding: 0;
  /background: LightGoldenrodYellow;
  border-radius: 0.2em;
  border: 0.2em black solid;
  box-shadow: 3px 3px 6px 3px #ccc;
}