<header>
<a href="/" class="home"><i class="fa fa-book" alt=""></i><i class="fa fa-hand-lizard-o" alt=""></i></a>
</header>
<main id="content">
<article id="post">
<progress id="reading-progress" max="100" value="0"></progress>
<header>
<h1 class="headline">A new Ice Age: How you can become a subzero cool peep and lead an exclusive
lifestyle</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>
<div class="author-detail">
<span class="author">Rob O'Leary</span>
<button class="follow-btn">Follow</button>
</div>
<div>
<span class="social"><a href="https://codepen.io/robjoeol/"><i class="fa fa-codepen"></i></a><span>
<span class="social"><a href="https://github.com/robole/"><i class="fa fa-github"></i></span>
<span class="social"><a href="#"><i class="fa fa-bookmark-o"></i></a></span>
</div>
<span class="publish-date">Apr. 16, 2020</span>
<span class="reading-time">3 min read</span>
</div>
</header>
<img src="https://dev-to-uploads.s3.amazonaws.com/i/3hj2gsz3ipnwo2sgeftg.jpg" alt="subzero cool peeps" />
<p>Something chiller killer 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>Something chiller killer 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>Something chiller killer 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>Something chiller killer 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>Something chiller killer 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>Something chiller killer 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>Something chiller killer 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>Something chiller killer 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>Something chiller killer 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>Something chiller killer 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>
</article>
<section class="recommended-articles">
<h2>Dont go! Read more articles from this author!</h2>
<ul>
<li>
<a href="" class="article-img">
<img src="https://www.fillmurray.com/200/200" alt="story with bill murray">
</a>
<a href="" class="article-title">
<h2>For the love of Bill</h2>
</a>
<span class="publish-date">Apr. 13, 2020</span>
<span class="reading-time">5min</span>
</li>
<li>
<a href="" class="article-img">
<img src="https://baconmockup.com/200/200" alt="story with slab of bacon">
</a>
<a href="" class="article-title">
<h2>Ham time with a friend of mine</h2>
</a>
<span class="publish-date">Apr. 11, 2020</span>
<span class="reading-time">4min</span>
</li>
<li>
<a href="" class="article-img">
<img src="https://www.fillmurray.com/200/200" alt="story with random photo">
</a>
<a href="" class="article-title">
<h2>Sailor, sailor, groundhog pie</h2>
</a>
<span class="publish-date">Apr. 1, 2020</span>
<span class="reading-time">15min</span>
</li>
</ul>
</section>
</main>
<footer>
<section class="pledge">
<div>
<h2>Discover</h2>
<p>Welcome to shangri-la. Voices and original ideas are king and queen. We don't mine you, or advertise
to you.</p>
</div>
<div>
<h2>Read</h2>
<p>We got articles on topics, fo real.</p>
</div>
<div>
<h2>Write</h2>
<p>Become a member and share your ideas.</p>
</div>
</section>
<section>
<p>Arghhh legal stuff. brain shutting down</p>
<p>© copyright some corp some era</p>
</section>
</footer>@import url("https://fonts.googleapis.com/css?family=Lato|Raleway");
: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;
}
body {
font-family: "Lato", sans-serif;
width: 100%;
}
h1,
h2,
h3 {
font-family: Raleway;
}
body > header {
display: grid;
grid-template-columns: auto 1fr;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
font-weight: 700;
justify-items: center;
align-items: center;
width: 100%;
}
.home {
padding: 20px;
font-size: 2em;
}
/*BEGIN progress */
progress {
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: -webkit-sticky;
position: sticky;
top: 0;
}
/*Target this for applying styles*/
progress[value] {
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Get rid of default border in Firefox. */
border: none;
width: var(--progress-width);
height: var(--progress-height);
/* Firefox: any style applied here applies to the container. */
background-color: var(--progress-bg);
border-radius: var(--progress-border-radius);
/* For IE10 */
color: var(--progress-bar-color);
}
/* For Firefox: progress bar */
progress[value]::-moz-progress-bar {
background-color: var(--progress-bar-color);
border-radius: var(--progress-border-radius);
}
/* WebKit/Blink browsers:
-webkit-progress-bar is to style the container */
progress[value]::-webkit-progress-bar {
background-color: var(--progress-bg);
border-radius: var(--progress-border-radius);
}
/*-webkit-progress-value is to style the progress bar.*/
progress[value]::-webkit-progress-value {
background-color: var(--progress-bar-color);
border-radius: var(--progress-border-radius);
}
/* END progress bar */
main {
margin: 0 20px;
}
#post header {
display: grid;
grid-template-columns: 50px 1fr auto;
grid-template-rows: auto 30px auto;
align-items: center;
grid-gap: 10px;
margin-bottom: 20px;
width: 100%;
}
.headline {
font-family: Raleway;
font-size: 2.25em;
line-height: 1.25em;
grid-column: 1 / -1;
}
.follow-btn {
background: none;
border: 1px black solid;
border-radius: 3px;
padding: 2px 5px;
}
.author-img {
width: 45px;
height: 45px;
border-radius: 50%;
grid-row: 2 / -1;
}
.social i {
padding: 10px;
font-size: 1.5em;
}
#post .reading-time {
color: var(--progress-bar-color);
font-weight: 600;
justify-self: end;
}
article img {
display: block;
width: 100%;
}
a,
a:visited {
text-decoration: none;
color: inherit;
}
/*recommended articles*/
.recommended-articles ul {
display: grid;
grid-template-columns: 1fr;
grid-gap: 20px;
list-style-type: none;
margin: 0;
padding: 10px 0;
}
.recommended-articles ul li {
display: inline-block;
border: 1px grey dashed;
min-width: 250px;
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 10px;
}
.article-img,
.article-title {
grid-column: span 1;
}
.article-img {
width: 100px;
}
.article-img img {
width: inherit;
}
.article-title h2 {
text-overflow: ellipsis;
padding: 0 5px;
font-size: 1.2em;
}
.recommended-articles span {
padding: 0 5px;
font-size: 0.8em;
color: rgba(0, 0, 0, 0.8);
}
.recommended-articles .reading-time {
justify-self: end;
}
/*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: 1000px) {
main {
margin: 0 20%;
}
.recommended-articles ul {
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.recommended-articles ul li {
min-width: 250px;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 4em auto;
grid-gap: 10px;
}
.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 body = document.body;
const post = document.getElementById("post");
const progress = document.getElementById("reading-progress");
let inViewport = false;
let observer = new IntersectionObserver(handler);
observer.observe(post);
function handler(entries, observer) {
for (entry of entries) {
if (entry.isIntersecting) {
inViewport = true;
} else {
inViewport = false;
}
}
}
/* Get the percentage scrolled of an element. It does not change if its not in view.*/
function getScrollProgress(el) {
let progressPercentage = 0;
if (inViewport) {
let coords = el.getBoundingClientRect();
let height = coords.height;
if(coords.top < 0){
progressPercentage = (Math.abs(coords.top) / height) * 100;
}
}
return progressPercentage;
}
/* Set the reading progress using the value attribute*/
function showReadingProgress() {
progress.setAttribute("value", getScrollProgress(post));
}
/* Use requestAnimationFrame*/
var timeout;
window.onscroll = function () {
if (timeout) {
window.cancelAnimationFrame(timeout);
}
timeout = window.requestAnimationFrame(function () {
// Run our scroll functions
showReadingProgress();
});
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.