<nav>
  <!--Will add toggle switch here-->
</nav>  
<section>
 <article class="post">
      <h1>The Principles of Good Design</h1>
      <p class="post-meta">Circa 2014 <span>by</span> Ian Daniel Stewart</p>

      <p>Is <strong>beauty</strong> objectively true? Are there principles you can use to guide you to it in your work? Can designers from both the sciences and the arts look at each others work and find <strong>beauty</strong>? These are important questions for all designers.</p>

      <p>For those of us who design things … we need to be able to recognize it. We need good taste to make good things. Instead of treating <strong>beauty</strong> as an airy abstraction, to be either blathered about or avoided depending on how one feels about airy abstractions, let’s try considering it as a practical question: how do you make good stuff?</p>
<a href="#">Read More</a>
  </article>
</section>
@import url(https://fonts.googleapis.com/css?family=Lato:400,400italic,700|Sansita+One);


body {
  font-family: "Lato", sans-serif;
  max-width: 90%;
  margin: 0 auto;
  font-size: calc(1rem + 0.25vh);
}

h1 {
    font-family: "Sansita One", serif;
    font-size: 2rem;
    margin-bottom: 1vh;
}

p {
  font-size: 1.1rem;
  line-height: 1.6rem;
}

a {
  text-decoration: none;
  border-bottom: 3px solid transparent;
  font-weight: bold;
  &:hover, &:focus {
      border-bottom: 3px solid currentColor;
  }
}

section {
  max-width: 68%;
  margin: 0 auto;
}

.post-meta {
  font-size: 1rem;
  font-style: italic;
  display: block;
  margin-bottom: 4vh;
}

nav {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0;
}
View Compiled 
/*
This is just html for demo purpose.
Find full demo here - https://codepen.io/ananyaneogi/pen/zXZyMP
*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.