JSFiddle - React, Tailwind, and code Playground

by NOVUSIDEA

HTML

<!-- http://tympanus.net/Development/ButtonComponentMorph/index3.html -->

<main>
    <header>
        <h1>Logo</h1>
    </header>
    <section>
        <article>
            <h3><a href="#">The first article with a very very long title to demonstrate how my new website should look like</a></h3>
            <p><small>Geschrieben am 10. Nov. 2015 um 08:52 Uhr in <a href="#">Development</a></small></p>
        </article>
        <article>
            <h3><a href="#">The second article with a very very long title to demonstrate how my new website should look like</a></h3>
            <p><small>Geschrieben am 09. Nov. 2015 um 14:26 Uhr in <a href="#">Interests</a></small></p>
        </article>
        <article>
            <h3><a href="#">The third article with a very very long title to demonstrate how my new website should look like</a></h3>
            <p><small>Geschrieben am 08. Nov. 2015 um 12:54 Uhr in <a href="#">Development</a></small></p>
        </article>
        <article>
            <h3><a href="#">The fourth article with a very very long title to demonstrate how my new website should look like</a></h3>
            <p><small>Geschrieben am 07. Nov. 2015 um 19:59 Uhr in <a href="#">Interests</a></small></p>
        </article>
        <article>
            <h3><a href="#">The fifth article with a very very long title to demonstrate how my new website should look like</a></h3>
            <p><small>Geschrieben am 06. Nov. 2015 um 19:59 Uhr in <a href="#">Development</a></small></p>
        </article>
    </section>
    <footer>
        <p>Footer</p>
    </footer>
</main>
<div id="modal"></div>

SCSS

body {
    font-family: Consolas;
    background: #333;
    font-size: 16px;
    color: #ddd;
    margin: 0;
}


h3 {
    font-weight: 300;
}

a {
    color: #fff;
}

a:hover {
    color: #bbb;
}

main {
    margin: 0 auto;

    @media (min-width: 34em) {
        width: 32em;
    }

    @media (min-width: 48em) {
        width: 46em;
    }

    @media (min-width: 62em) {
        width: 60em;
    }

    > header,
    > footer {
        text-align: center;
    }
    > section {
        border-top: 1px dotted #444;
        -webkit-word-break: break-all;
        -moz-word-break: break-all;
        word-break: break-all;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;

        > article {
            border-bottom: 1px dotted #444;
            position: relative;
            padding: 1.6rem;
            -webkit-transition: background-color 0.1s;
            -moz-transition: background-color 0.1s;
            transition: background-color 0.1s;
            
            a {                
                -webkit-transition: color 0.1s;
                -moz-transition: color 0.1s;
                transition: color 0.1s;
            }

            &:hover {
                background: #363636;
            }

            > h3:first-child {
                margin-top: 0;
            }

            > p:last-child {
                margin-bottom: 0;
            }
        }
    }
}

#modal {
    position: fixed;
    height: auto;
    left: auto;
    top: auto;
    width: auto;
    background: #444;
    z-index: 9999;
    opacity: 0.2;
    visibility: hidden;

    &.opened {            
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 1;
        visibility: visible;
    }
}

JavaScript

$('article > h3 > a').on('click', function(ev){
	ev.preventDefault();
    
    var article		= $(this).parents('article');
    var position	= article.position();
    var posTop		= position.top;
    var posLeft		= position.left;
    
    $('#modal').css({
    	top: posTop,
    	left: posLeft,
        width: article.outerWidth(),
        height: article.outerHeight()
    });
    
    $('#modal').addClass('opened');
    
    $('#modal').animate({
    	top: 0,
    	left: 0,
        width: '100%',
        height: '100%'
    });
});

var t, transition, el = document.createElement("fakeelement");

var transitions = {
    "transition"      : "transitionend",
    "OTransition"     : "oTransitionEnd",
    "MozTransition"   : "transitionend",
    "WebkitTransition": "webkitTransitionEnd"
}

for (t in transitions){
    if (el.style[t] !== undefined){
        transition = transitions[t];
    }
}

$('#modal').one(transition, function(ev){
	console.log(transition);
});