<header>
  <a href="/" class="home"><i class="fa fa-code" alt=""></i></a>
</header>
<main id="content">
  <article id="post">
    <header>
      <h1 class="headline">I became a zen buddhist</h1>
      <svg class="author-img" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z"/></svg>
      <span class="author">Rob O'Leary</span>
      <div class="sharing">
        <span class="social"><a href=""><i class="fa fa-twitter"></i></a><span>
            <span class="social"><a href="#"><i class="fa fa-get-pocket"></i></a></span>
            <span class="social"><a href="#"><i class="fa fa-reddit"></i></a></span>
            <span class="social"><a href=""><i class="fa fa-share-alt"></i></a></span>
      </div>
      <span class="publish-date">Apr. 16, 2020</span>
      <div class="reading-time">
        <details>
          <summary>1 min read</summary><span></span>
        </details>
      </div>
      </div>
    </header>
    <img src="https://cdn.imgpaste.net/2020/04/24/pW8SB.jpg" alt="coding" />
    <p>Talking about code here. Aliquip est reprehenderit officia laborum esse ea aute fugiat labore.
      Culpa enim labore culpa sit enim irure. Sunt elit voluptate mollit enim sunt aute consectetur. Officia
      fugiat occaecat sit minim consectetur officia labore amet nisi do. Sint ad aliquip labore enim laboris
      occaecat sint sit id consequat nostrud velit anim laborum.</p>
    <h2>One two three four five six seven eight nine ten</h2>
    <p>Talking about code here. Aliquip est reprehenderit officia laborum esse ea aute fugiat labore.
      Culpa enim labore culpa sit enim irure. Sunt elit voluptate mollit enim sunt aute consectetur. Officia
      fugiat occaecat sit minim consectetur officia labore amet nisi do. Sint ad aliquip labore enim laboris
      occaecat sint sit id consequat nostrud velit anim laborum.</p>
    <p>Talking about code here. Aliquip est reprehenderit officia laborum esse ea aute fugiat labore.Culpa enim labore culpa sit enim irure. Sunt elit voluptate mollit enim sunt aute consectetur. Officia fugiat occaecat sit minim consectetur officia labore amet nisi do. Sint ad aliquip labore enim laboris</p>
    <p>Talking about code here. Aliquip est reprehenderit officia laborum esse ea aute fugiat labore.Culpa enim labore culpa sit enim irure. Sunt elit voluptate mollit enim sunt aute consectetur. Officia fugiat occaecat sit minim consectetur officia labore amet nisi do. Sint ad aliquip labore enim laboris</p>
    <p>Talking about code here. Aliquip est reprehenderit officia laborum esse ea aute fugiat labore.Culpa enim labore culpa sit enim irure. Sunt elit voluptate mollit enim sunt aute consectetur. Officia fugiat occaecat sit minim consectetur officia labore amet nisi do. Sint ad aliquip labore enim laboris</p>
  </article>
</main>
<footer>
  <section class="pledge">
    <div>
      <h2>Om</h2>
      <p>We are one with everything.</p>
    </div>
    <div>
      <h2>Hack the planet</h2>
      <p>Do it, fo real.</p>
    </div>
    <div>
      <h2>Share</h2>
      <p>Open source it to proliferate your ideas and benefit everyone.</p>
    </div>
  </section>
  <section>
    <p>Arghhh legal stuff. brain shutting down</p>
    <p>&copy; copyright some corp some era</p>
  </section>
</footer>

@import url("https://fonts.googleapis.com/css2?family=Montserrat&family=Open+Sans&family=Source+Sans+Pro&family=Ubuntu+Mono&display=swap");

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

.reading-time {
  position: relative;
  display: inline-block;
  cursor: pointer;
  grid-column: 1 / -1; /*for layout in the grid inside header */
}

.reading-time details {
  position: absolute;
  background-color: white;
  z-index: 1;
}

.reading-time summary {
  background-color: purple;
  color: white;
  font-weight: 600;
}

body {
  font-family: "Open Sans", sans-serif;
}

h1 {
  font-size: 1.3em;
}

h2 {
  font-size: 1.2em;
  font-weight: bold;
}

body > header {
  height: 4em;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  font-weight: 700;
  margin: 5px;
  padding: 0;
}

.home {
  display: block;
  padding: 0.25em 0.5em;
  font-size: 2em;
}

main {
  margin: 0 20px;
}

#post header {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 30px auto auto;
  align-items: center;
  grid-gap: 10px;
  margin-bottom: 30px;
  width: 100%;
}

.headline {
  font-family: Raleway;
  font-size: 2.25em;
  line-height: 1.25em;
  grid-column: 1 / -1;
}

.author {
  grid-row: 3;
}

.author-img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.sharing {
  grid-column: 2 / -1;
  justify-self: end;
}

.social i {
  padding-right: 10px;
  font-size: 1.5em;
  grid-column: 2;
  grid-row: 2;
}

.publish-date {
  justify-self: end;
}

article img {
  display: block;
  width: 100%;
}

a,
a:visited {
  text-decoration: none;
  color: inherit;
}

/*footer*/
footer {
  background: rgba(0, 0, 0, 0.9);
  color: white;
  text-align: center;
  padding: 1em 0;
  margin-top: 10em;
}

.pledge {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
  margin: 10px 20px;
}

@media screen and (min-width: 750px) {
  main {
    margin: 0 20%;
  }

  #post header {
    grid-template-columns: 50px 1fr auto;
    grid-template-rows: auto 30px auto auto;
  }

  .author {
    grid-row: 2;
  }

  .sharing {
    grid-row: 2;
    grid-column: 3;
    justify-self: end;
  }

  .social i {
    padding-right: 10px;
    font-size: 1.5em;
    grid-column: 2;
    grid-row: 2;
  }

  .publish-date {
    justify-self: start;
  }

  .reading-time {
    grid-column: 3;
    padding-bottom: 1em;
    width: 100%;
  }

  .author-img {
    grid-row: 2 / -1;
  }

  .article-img,
  .article-title {
    grid-column: span 2;
  }

  .article-img {
    width: 150px;
    justify-self: center;
    align-self: center;
  }

  .article-img img {
    width: inherit;
  }

  .pledge {
    grid-template-rows: auto;
    grid-template-columns: repeat(3, 1fr);
  }
}

const post = document.getElementById("post");
const readingTimeSummary = document.querySelector(".reading-time summary");
const readingTimeDetails = document.querySelector(".reading-time details span");
const avgWordsPerMin = 250;

setReadingTime();

function setReadingTime(){
    let count = getWordCount();
    let time = Math.ceil(count / avgWordsPerMin);

    readingTimeSummary.innerText = time + " min read";
    readingTimeDetails.innerText = count + " words read at " + avgWordsPerMin + " words per minute.";
}

function getWordCount(){
  return post.innerText.match(/\w+/g).length;
}