JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<script src="http://fonts.googleapis.com/css?family=Raleway:400,500"></script>
<script src="http://fonts.googleapis.com/css?family=EB+Garamond"></script>
<div class="content">
    <div class="header"> <a href="javascript:;" class="logotype">&.</a>

    </div>
    <div class="posts_navigation">
        <div class="_nav_item __active">
             <h1>The Best of All Worlds</h1>

             <h5 class="__show">Finding Sci-Fi adventures in an archive of travel photos</h5>

        </div>
        <div class="_nav_item">
             <h1>The Most Influential Things I Read This Year</h1>

             <h5>Finding Sci-Fi adventures in an archive of travel photos</h5>

        </div>
        <div class="_nav_item">
             <h1>With a camera, you can portray in a picture the world as you want to s</h1>

             <h5>Finding Sci-Fi adventures in an archive of travel photos</h5>

        </div>
    </div>
    <div class="posts">
        <div class="_post">
            <img src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*qLKF0lgjRBib2G8JAxZMAw.jpeg">
            <p>With a camera, you can portray in a picture the world as you want to see it. With a pair of scissors and some glue (or their digital equivalent), you can remake those pictures into visions no one has seen before.</p>
            <p>Photographer Matthew Lief Anderson uses shards of his otherwise forgotten photos to collage new, eerie worlds.</p>
            <img src="https://d262ilb51hltx0.cloudfront.net/max/2000/1*nTQ31ba1uumxSNxSocpCPA.jpeg">
            <p>His combinative vistas share a sci-fi sheen, with futuristic cities, epic landscapes, and impossibly huge vegetation surrounding figures of anonymous adventurers.</p>
            <p>They’re pictures that would look at home next to a Robert Heinlein novel, but they have mundane, Earthly origins — they’re composed from photos that were taken all over North America, Europe, Asia, and Africa.</p>
        </div>
    </div>
</div>

CSS

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family:'Raleway', sans-serif;
    background: white;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
h1, h2, h3, h4, h5, h5, .header .logotype {
    margin: 0;
    font-family:'EB Garamond', serif;
}
.posts_navigation, .posts {
    display: block;
    width: 33.3%;
    height: 100vh;
    float: left;
    overflow-y: hidden;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    background: white;
    width: 33.3%;
    height: 75px;
    padding: 10px 50px;
}
.header .logotype {
    font-size: 30pt;
    text-decoration: none;
    font-weight: bolder;
    color: #8E9093;
}
.header .logotype:hover {
    color: #34383e;
}
.header .logotype:active {
    color: black;
}
.posts {
    width: 66.6%;
    overflow-y: scroll;
}
.posts p {
    margin: 2em 5em;
    font-size: 12pt;
    line-height: 19pt;
}
.posts img {
    width: 100%;
}
.posts_navigation {
    padding-top: 75px;
}

.posts_navigation.__active {
    overflow-y: scroll;
}

._nav_item {
    width: 100%;
    padding: 25px 50px;
    overflow: hidden;
    cursor: pointer;
    -webkit-transition: 0.2s ease-out;
}
._nav_item.__active {
    height: 100vh;
}
._nav_item h1 {
    font-size: 21pt;
    font-weight: 400;
}
._nav_item.__active h1 {
    -webkit-transition: 0.2s;
    font-size: 52pt;
}
._nav_item h5 {
    font-size: 14pt;
    color: #747474;
    margin: 1em 0 0;
    font-weight: 400;
    opacity: 0;
    -webkit-transition: 0.2s;
}

._nav_item h5.__show{
    opacity: 1;
}

.posts_navigation.__active ._nav_item {
    height: auto;
}
.posts_navigation.__active ._nav_item:hover {
    background: #f8f8f8;
}
.posts_navigation.__active ._nav_item h1 {
    font-size: 28pt;
}
.posts_navigation.__active ._nav_item h5 {
    display: none;
}

JavaScript

function q(Selector) {
    var results = document.querySelectorAll(Selector);
    return results.length > 1 ? results : document.querySelector(Selector);
}

function toggleClass(elem, classToToggle) {
    var currentClass = elem.className,
        reg = new RegExp(classToToggle, 'g');

    if (reg.test(currentClass)) {
        elem.className = currentClass.replace(reg, '');
    } else {
        elem.className += ' ' + classToToggle;
    }

}

var postNav = q('.posts_navigation'),
    navItems = q('.posts_navigation ._nav_item');

var getClosestValues = function(a, x) {
    var lo, hi;
    for (var i = a.length; i--;) {
        if (a[i] <= x && (lo === undefined || lo < a[i])) lo = a[i];
        if (a[i] >= x && (hi === undefined || hi > a[i])) hi = a[i];
    };
    return [lo, hi];
};

function setFontSize(isExpandNav){
    var h1 = q('._nav_item.__active h1');
    if(isExpandNav){
        h1.style.fontSize = '21pt';
    } else {
        var l = h1.innerText.length;
        var fontSizes = [21,24,36,48,60,72];
        var fontSize = (72-((72-21)*(l * 0.01)));
            fontSize = getClosestValues(fontSizes, fontSize);
        //maxFontSize - ((maxFontSize - minFontSize) * (length*0.01));
        h1.style.fontSize = fontSize[1] + 'pt';
        console.log(fontSize[0]);
    }
}

function expandPostsNav() {
    var subHeader = q('._nav_item.__active h5');
    setFontSize(true);
    postNav.className += ' __active';
    subHeader.style.display = 'none';
    setTimeout(function () {
        toggleClass(subHeader, ' __show')
    }, 350);
}

function collapsePostsNav() {
    var subHeader = q('._nav_item.__active h5');
    setFontSize();
    postNav.className = postNav.className.replace(' __active', '');
    subHeader.style.display = 'block';
    setTimeout(function () {
        toggleClass(subHeader, ' __show')
    }, 350)
}

function togglePostNav(e) {
    if (e) {
        e.preventDefault();
    }

    if (postNav.className.match('__active')) {
       ...