<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>
       <img class="author-img" src="https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/361098/3dbb565c-6cd7-42db-9376-bfad8f9e6647.jpeg" alt="profile pic">
       <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
       <div class="language-html highlighter-rouge">
         <div class="highlight">
           <pre class="highlight"><code><span class="cp">&lt;!DOCTYPE html&gt;</span>
                    <span class="nt">&lt;html</span> <span class="na">lang=</span><span class="s">"en"</span><span class="nt">&gt;</span>
                      <span class="nt">&lt;head&gt;</span>
                        <span class="nt">&lt;meta</span> <span class="na">charset=</span><span class="s">"UTF-8"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"width=device-width, initial-scale=1.0"</span><span class="nt">&gt;</span>
                        <span class="nt">&lt;title&gt;</span>Hello World!<span class="nt">&lt;/title&gt;</span>
                      <span class="nt">&lt;/head&gt;</span>
                      <span class="nt">&lt;body&gt;</span>
                      <span class="nt">&lt;/body&gt;</span>
                    <span class="nt">&lt;/html&gt;</span></code></pre>
         </div>
       </div>
       <div class="language-css highlighter-rouge">
         <div class="highlight">
           <pre class="highlight">
                            <code>
                            <span class="nd">:root</span> <span class="p">{</span>
                            <span class="py">--progress-width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span>
                            <span class="py">--progress-height</span><span class="p">:</span> <span class="m">8px</span><span class="p">;</span>
                            <span class="py">--progress-bar-color</span><span class="p">:</span> <span class="nb">rgb</span><span class="p">(</span><span class="m">115</span><span class="p">,</span> <span class="m">0</span><span class="p">,</span> <span class="m">209</span><span class="p">);</span>
                            <span class="py">--progress-bg</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
                            <span class="py">--progress-border-radius</span><span class="p">:</span> <span class="m">5px</span><span class="p">;</span>
                        <span class="p">}</span>
              
              <span class="nt">progress</span> <span class="p">{</span>
                <span class="nl">position</span><span class="p">:</span> <span class="n">-moz-sticky</span><span class="p">;</span>
                <span class="nl">position</span><span class="p">:</span> <span class="n">-ms-sticky</span><span class="p">;</span>
                <span class="nl">position</span><span class="p">:</span> <span class="n">-o-sticky</span><span class="p">;</span>
                <span class="nl">position</span><span class="p">:</span> <span class="n">-webkit-sticky</span><span class="p">;</span>
                <span class="nl">position</span><span class="p">:</span> <span class="n">sticky</span><span class="p">;</span>
                <span class="nl">top</span><span class="p">:</span> <span class="m">0</span><span class="p">;</span>
              <span class="p">}</span>
              
              <span class="c">/*Target this for applying styles*/</span>
              <span class="nt">progress</span><span class="o">[</span><span class="nt">value</span><span class="o">]</span> <span class="p">{</span>
                <span class="c">/* Reset the default appearance */</span>
                <span class="nl">-webkit-appearance</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
                <span class="nl">-moz-appearance</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
                <span class="nl">appearance</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
              
                <span class="c">/* Get rid of default border in Firefox. */</span>
                <span class="nl">border</span><span class="p">:</span> <span class="nb">none</span><span class="p">;</span>
              
                <span class="nl">width</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--progress-width</span><span class="p">);</span>
                <span class="nl">height</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--progress-height</span><span class="p">);</span>
              
                <span class="c">/* Firefox: any style applied here applies to the container. */</span>
                <span class="nl">background-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--progress-bg</span><span class="p">);</span>
                <span class="nl">border-radius</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--progress-border-radius</span><span class="p">);</span>
              
                <span class="c">/* For IE10 */</span>
                <span class="nl">color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--progress-bar-color</span><span class="p">);</span>
              <span class="p">}</span>
              <span class="c">/* For Firefox: progress bar */</span>
              <span class="nt">progress</span><span class="o">[</span><span class="nt">value</span><span class="o">]</span><span class="nd">::-moz-progress-bar</span> <span class="p">{</span>
                <span class="nl">background-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--progress-bar-color</span><span class="p">);</span>
                <span class="nl">border-radius</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--progress-border-radius</span><span class="p">);</span>
              <span class="p">}</span>
              <span class="c">/* WebKit/Blink browsers:
                  -webkit-progress-bar is to style the container */</span>
              <span class="nt">progress</span><span class="o">[</span><span class="nt">value</span><span class="o">]</span><span class="nd">::-webkit-progress-bar</span> <span class="p">{</span>
                <span class="nl">background-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--progress-bg</span><span class="p">);</span>
                <span class="nl">border-radius</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--progress-border-radius</span><span class="p">);</span>
              <span class="p">}</span>
              <span class="c">/*-webkit-progress-value is to style the progress bar.*/</span>
              <span class="nt">progress</span><span class="o">[</span><span class="nt">value</span><span class="o">]</span><span class="nd">::-webkit-progress-value</span> <span class="p">{</span>
                <span class="nl">background-color</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--progress-bar-color</span><span class="p">);</span>
                <span class="nl">border-radius</span><span class="p">:</span> <span class="n">var</span><span class="p">(</span><span class="n">--progress-border-radius</span><span class="p">);</span>
              <span class="p">}</span>
              </code></pre>
         </div>
       </div>
       <div class="language-javascript highlighter-rouge">
         <div class="highlight">
           <pre class="highlight"><code><span class="kd">const</span> <span class="nx">post</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">post</span><span class="dl">"</span><span class="p">);</span>
                    <span class="kd">const</span> <span class="nx">progress</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">reading-progress</span><span class="dl">"</span><span class="p">);</span>
                    <span class="kd">let</span> <span class="nx">inViewport</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
                    
                    <span class="kd">let</span> <span class="nx">observer</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">IntersectionObserver</span><span class="p">(</span><span class="nx">handler</span><span class="p">);</span>
                    
                    <span class="nx">observer</span><span class="p">.</span><span class="nx">observe</span><span class="p">(</span><span class="nx">post</span><span class="p">);</span>
                    
                    <span class="c1">//Whenever the post comes in or out of view, this handler is invoked.</span>
                    <span class="kd">function</span> <span class="nx">handler</span><span class="p">(</span><span class="nx">entries</span><span class="p">,</span> <span class="nx">observer</span><span class="p">)</span> <span class="p">{</span>
                        <span class="k">for</span> <span class="p">(</span><span class="nx">entry</span> <span class="k">of</span> <span class="nx">entries</span><span class="p">)</span> <span class="p">{</span>
                            <span class="k">if</span> <span class="p">(</span><span class="nx">entry</span><span class="p">.</span><span class="nx">isIntersecting</span><span class="p">)</span> <span class="p">{</span>
                              <span class="nx">inViewport</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
                            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                              <span class="nx">inViewport</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
                            <span class="p">}</span>
                        <span class="p">}</span>
                    <span class="p">}</span>
                    
                    <span class="c1">// Get the percentage scrolled of an element. It returns zero if its not in view.</span>
                    <span class="kd">function</span> <span class="nx">getScrollProgress</span><span class="p">(</span><span class="nx">el</span><span class="p">)</span> <span class="p">{</span>
                      <span class="kd">let</span> <span class="nx">coords</span> <span class="o">=</span> <span class="nx">el</span><span class="p">.</span><span class="nx">getBoundingClientRect</span><span class="p">();</span>
                      <span class="kd">let</span> <span class="nx">height</span> <span class="o">=</span> <span class="nx">coords</span><span class="p">.</span><span class="nx">height</span><span class="p">;</span>
                      <span class="kd">let</span> <span class="nx">progressPercentage</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span>
                    
                      <span class="k">if</span> <span class="p">(</span><span class="nx">inViewport</span> <span class="o">&amp;&amp;</span> <span class="nx">coords</span><span class="p">.</span><span class="nx">top</span> <span class="o">&lt;</span> <span class="mi">0</span><span class="p">)</span> <span class="p">{</span>
                        <span class="nx">progressPercentage</span> <span class="o">=</span> <span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">abs</span><span class="p">(</span><span class="nx">coords</span><span class="p">.</span><span class="nx">top</span><span class="p">)</span> <span class="o">/</span> <span class="nx">height</span><span class="p">)</span> <span class="o">*</span> <span class="mi">100</span><span class="p">;</span>
                      <span class="p">}</span>
                    
                      <span class="k">return</span> <span class="nx">progressPercentage</span><span class="p">;</span>
                    <span class="p">}</span>
                    
                    <span class="kd">function</span> <span class="nx">showReadingProgress</span><span class="p">()</span> <span class="p">{</span>
                        <span class="nx">progress</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="dl">"</span><span class="s2">value</span><span class="dl">"</span><span class="p">,</span> <span class="nx">getScrollProgress</span><span class="p">(</span><span class="nx">post</span><span class="p">));</span>
                    <span class="p">}</span>
                    
                    <span class="c1">//scroll event listener</span>
                    <span class="nb">window</span><span class="p">.</span><span class="nx">onscroll</span> <span class="o">=</span> <span class="nx">showReadingProgress</span><span class="p">;</span>
                    </code></pre>
         </div>
       </div>
   </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");

:root {
  --progress-width: 100%;
  --progress-height: 8px;
  --progress-bar-color: rgb(115, 0, 209);
  --progress-bg: none;
  --progress-border-radius: 5px;
}

* {
  box-sizing: border-box;
  font: inherit;
}

.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 {
  color: var(--progress-bar-color);
  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);
  }
}

/*code highlighting */
.highlight {
  background: #ffffff;
}
.highlight .c {
  color: #999988;
  font-style: italic;
} /* Comment */
.highlight .err {
  color: #a61717;
  background-color: #e3d2d2;
} /* Error */
.highlight .k {
  font-weight: bold;
} /* Keyword */
.highlight .o {
  font-weight: bold;
} /* Operator */
.highlight .cm {
  color: #999988;
  font-style: italic;
} /* Comment.Multiline */
.highlight .cp {
  color: #999999;
  font-weight: bold;
} /* Comment.Preproc */
.highlight .c1 {
  color: #999988;
  font-style: italic;
} /* Comment.Single */
.highlight .cs {
  color: #999999;
  font-weight: bold;
  font-style: italic;
} /* Comment.Special */
.highlight .gd {
  color: #000000;
  background-color: #ffdddd;
} /* Generic.Deleted */
.highlight .gd .x {
  color: #000000;
  background-color: #ffaaaa;
} /* Generic.Deleted.Specific */
.highlight .ge {
  font-style: italic;
} /* Generic.Emph */
.highlight .gr {
  color: #aa0000;
} /* Generic.Error */
.highlight .gh {
  color: #999999;
} /* Generic.Heading */
.highlight .gi {
  color: #000000;
  background-color: #ddffdd;
} /* Generic.Inserted */
.highlight .gi .x {
  color: #000000;
  background-color: #aaffaa;
} /* Generic.Inserted.Specific */
.highlight .go {
  color: #888888;
} /* Generic.Output */
.highlight .gp {
  color: #555555;
} /* Generic.Prompt */
.highlight .gs {
  font-weight: bold;
} /* Generic.Strong */
.highlight .gu {
  color: #aaaaaa;
} /* Generic.Subheading */
.highlight .gt {
  color: #aa0000;
} /* Generic.Traceback */
.highlight .kc {
  font-weight: bold;
} /* Keyword.Constant */
.highlight .kd {
  font-weight: bold;
} /* Keyword.Declaration */
.highlight .kp {
  font-weight: bold;
} /* Keyword.Pseudo */
.highlight .kr {
  font-weight: bold;
} /* Keyword.Reserved */
.highlight .kt {
  color: #445588;
  font-weight: bold;
} /* Keyword.Type */
.highlight .m {
  color: #009999;
} /* Literal.Number */
.highlight .s {
  color: #d14;
} /* Literal.String */
.highlight .na {
  color: #008080;
} /* Name.Attribute */
.highlight .nb {
  color: #0086b3;
} /* Name.Builtin */
.highlight .nc {
  color: #445588;
  font-weight: bold;
} /* Name.Class */
.highlight .no {
  color: #008080;
} /* Name.Constant */
.highlight .ni {
  color: #800080;
} /* Name.Entity */
.highlight .ne {
  color: #990000;
  font-weight: bold;
} /* Name.Exception */
.highlight .nf {
  color: #990000;
  font-weight: bold;
} /* Name.Function */
.highlight .nn {
  color: #555555;
} /* Name.Namespace */
.highlight .nt {
  color: #000080;
} /* Name.Tag */
.highlight .nv {
  color: #008080;
} /* Name.Variable */
.highlight .ow {
  font-weight: bold;
} /* Operator.Word */
.highlight .w {
  color: #bbbbbb;
} /* Text.Whitespace */
.highlight .mf {
  color: #009999;
} /* Literal.Number.Float */
.highlight .mh {
  color: #009999;
} /* Literal.Number.Hex */
.highlight .mi {
  color: #009999;
} /* Literal.Number.Integer */
.highlight .mo {
  color: #009999;
} /* Literal.Number.Oct */
.highlight .sb {
  color: #d14;
} /* Literal.String.Backtick */
.highlight .sc {
  color: #d14;
} /* Literal.String.Char */
.highlight .sd {
  color: #d14;
} /* Literal.String.Doc */
.highlight .s2 {
  color: #d14;
} /* Literal.String.Double */
.highlight .se {
  color: #d14;
} /* Literal.String.Escape */
.highlight .sh {
  color: #d14;
} /* Literal.String.Heredoc */
.highlight .si {
  color: #d14;
} /* Literal.String.Interpol */
.highlight .sx {
  color: #d14;
} /* Literal.String.Other */
.highlight .sr {
  color: #009926;
} /* Literal.String.Regex */
.highlight .s1 {
  color: #d14;
} /* Literal.String.Single */
.highlight .ss {
  color: #990073;
} /* Literal.String.Symbol */
.highlight .bp {
  color: #999999;
} /* Name.Builtin.Pseudo */
.highlight .vc {
  color: #008080;
} /* Name.Variable.Class */
.highlight .vg {
  color: #008080;
} /* Name.Variable.Global */
.highlight .vi {
  color: #008080;
} /* Name.Variable.Instance */
.highlight .il {
  color: #009999;
} /* Literal.Number.Integer.Long */

/* Make line numbers unselectable: excludes line numbers from copy-paste user ops */
.highlight .lineno {
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  color: #ccc;
  display: inline-block;
  padding: 0 5px;
  border-right: 1px solid #ccc;
}
.lineno::-moz-selection {
  background-color: transparent;
} /* Mozilla specific */
.lineno::selection {
  background-color: transparent;
} /* Other major browsers */
/* Add to css/syntax.css */
.highlight pre code {
  display: block;
  white-space: pre;
  overflow-x: auto;
  word-wrap: normal;
}
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;
}

External CSS

  1. https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.