Website logo depicts joriszwart.nl

I ❤ to create appealing stuff

Stachys redesign

Using only 120 lines of CSS and leaving the HTML as-is (hence the inappropriate use of IDs and unsemantic elements) I pulled the website from 1999-style to mobile-last-but-responsive 2014-style.1

*, *:before, *:after {
  box-sizing: border-box
}

body {
  background: #f3f1f1;
  color: #333;
  font: lighter 16px/1.5 Helvetica, Arial, Verdana;
  margin: 0
}

h1, h2 {
  color: #006010;
  font-weight: lighter;
  margin-top: 2em
}

th, td {
  vertical-align: top
}

ol, ul {
  padding-left: 1em
}

ul {
  list-style-type: square
}

a {
  color: #a33;
  font-weight: normal;
  text-decoration: none
}

#topfoto {
  background-position: center !important;
  background-size: cover !important;
  color: white;
  padding: 4rem;
  text-align: center;
  text-shadow: 2px 2px black
}

#topfoto::before {
  content: "Stachys";
  display: block;
  font-size: 5em
}

#topfoto::after {
  content: "ecologisch adviesbureau";
  font-size: 1.5em
}

#topfoto img,
#stachyslogo {
  display: none
}

#div_menubalk {
  background: #a33
}

#div_menubalk ul {
  margin: 0 1.5em;
  padding: 0
}

#div_menubalk li {
  list-style: none;
  border-top: 1px solid tan
}

#div_menubalk li:first-child {
  border-top: none
}

#div_menubalk a {
  color: #f3f1f1;
  display: inline-block;
  padding: 1em 2em 1em 0;
  text-transform: capitalize
}

#fotoline, #bottomline {
  color: gray;
  font-size: small;
  padding: 5rem 0 2rem;
  text-align: center
}

#div_contents {
  background: url(../images/stachyslogo.png) no-repeat right 4em;
  background-size: 82px;
  margin: 2em;
  padding-right: 100px
}

@media(min-width: 45em) {
  #div_menubalk ul, #div_contents {
    margin: auto;
    width: 40em
  }

  #div_contents {
    background-size: 164px;
    padding-right: 180px
  }

  #div_menubalk li {
    border-top: none;
    display: inline-block
  }

  #div_menubalk li:last-child {
    float: right
  }
}

stachys.css
  1. Yes, I know it is 2017 now :-)