roachhd/roachhd.github.io

/*-----------------------------------*\
    $CONTENT
\*-----------------------------------*/

.content {
    background-color: #efeeed;
    box-shadow: 0 -10px 10px rgba(0,0,0,.1);
}

.timeline {
    list-style: none;
    overflow: hidden;
    padding-top: 1.5rem;
    margin-top: -1.5rem;
}

    .timeline:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: .2rem;
        margin: 0 auto;
        background-color: #ceccca;
        background-image: -webkit-linear-gradient(#efeeed .25rem, #ceccca 1.5rem);
    }

.timeline li {
    z-index: 1;
    background-color: #fcfcfc;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
    border-radius: .2em;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.timeline .left, .timeline .right {
    width: 47.5%;
}

    .timeline .left {
        float: left;
        margin-right: 2.5%;
        clear: left;
    }

        .timeline .left:after {
            content: '';
            position: absolute;
            left: 100%;
            margin-left: -1px;
            top: 1rem;
            border: .5rem solid transparent;
            border-left-color: #f9f9f9;
            -webkit-filter: drop-shadow(1px 0 0 rgba(0,0,0,.15));
               -moz-filter: drop-shadow(1px 0 0 rgba(0,0,0,.15));
                -ms-filter: drop-shadow(1px 0 0 rgba(0,0,0,.15));
                 -o-filter: drop-shadow(1px 0 0 rgba(0,0,0,.15));
                    filter: drop-shadow(1px 0 0 rgba(0,0,0,.15));
            z-index: 1;
        }

        .timeline .left:before {
            content: '';
            position: absolute;
            background-color: #ceccca;
            width: .4rem;
            height: .4rem;
            border-radius: 100%;
            left: 100%;
            top: 1rem;
            margin-top: .3rem;
            margin-left: 4.5%;
            box-shadow: 0 0 0 4px #efeeed;
            z-index: 0;
        }

    .timeline .right {
        float: right;
        margin-left: 2.5%;
        clear: right;
    }

        .timeline .right:after {
            content: '';
            position: absolute;
            right: 100%;
            margin-right: -1px;
            top: 1rem;
            border: .5rem solid transparent;
            border-right-color: #f9f9f9;
            -webkit-filter: drop-shadow(-1px 0 0 rgba(0,0,0,.15));
               -moz-filter: drop-shadow(-1px 0 0 rgba(0,0,0,.15));
                -ms-filter: drop-shadow(-1px 0 0 rgba(0,0,0,.15));
                 -o-filter: drop-shadow(-1px 0 0 rgba(0,0,0,.15));
                    filter: drop-shadow(-1px 0 0 rgba(0,0,0,.15));
        }

        .timeline .right:before {
            content: '';
            position: absolute;
            background-color: #ceccca;
            width: .4rem;
            height: .4rem;
            border-radius: 100%;
            right: 100%;
            top: 1rem;
            margin-top: .3rem;
            margin-right: 4.5%;
            box-shadow: 0 0 0 4px #efeeed;
            z-index: 0;
        }

    .timeline .span {
        clear: both;
        margin-bottom: 2rem;
    }

        .timeline .span:after {
            content: '';
            position: absolute;
            left: 50%;
            margin-left: -.5rem;
            bottom: 100%;
            margin-bottom: -1px;
            border: .5rem solid transparent;
            border-bottom-color: #f9f9f9;
            -webkit-filter: drop-shadow(0 -1px 0 rgba(0,0,0,.15));
               -moz-filter: drop-shadow(0 -1px 0 rgba(0,0,0,.15));
                -ms-filter: drop-shadow(0 -1px 0 rgba(0,0,0,.15));
                 -o-filter: drop-shadow(0 -1px 0 rgba(0,0,0,.15));
                    filter: drop-shadow(0 -1px 0 rgba(0,0,0,.15));
        }

        .timeline .span:before {
            content: '';
            position: absolute;
            background-color: #ceccca;
            width: .4rem;
            height: .4rem;
            border-radius: 100%;
            bottom: 100%;
            left: 0;
            right: 0;
            margin: 0 auto;
            top: -1.1rem;
            box-shadow: 0 0 0 4px #efeeed, 0 6px 0 4px #efeeed;
            z-index: 0;
        }

    @media screen and (max-width: 680px) {
        .timeline .left, .timeline .right {
            float: none;
            width: auto;
            margin-left: 0;
            margin-right: 0;
        }

        .timeline .left:before, .timeline .left:after,
        .timeline .right:before, .timeline .right:after,
        .timeline .span:before, .timeline .span:after {
            display: none
        }
    }

.timeline li p:last-of-type {
    margin-bottom: 1rem;
}

.timeline li :last-child, .timeline :last-child, .timeline li p:last-of-type:last-child {
    margin-bottom: 0;
}

    .timeline li .image {
        overflow: hidden;
        z-index: 2;
        width: -webkit-calc(100% + 2rem);
        width:    -moz-calc(100% + 2rem);
        width:     -ms-calc(100% + 2rem);
        width:      -o-calc(100% + 2rem);
        width:         calc(100% + 2rem);
        margin-left: -1rem;
        margin-right: -1rem;
        margin-bottom: 1rem;
    }

        .timeline li .image:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
        }
        
        .timeline li .image:first-child {
            margin-top: -1rem;
        }

        .timeline li .image:first-child, .timeline li .image:first-child:after {
            border-top-left-radius: .2em;
            border-top-right-radius: .2em;
        }

        .timeline li .image:last-child {
            margin-bottom: -1rem;
        }

        .timeline li .image:last-child, .timeline li .image:last-child:after {
            border-bottom-left-radius: .2em;
            border-bottom-right-radius: .2em;
        }