Responsive Vertical Layout

dabblet.css

/* Responsive Vertical Layout */
h2 {    margin-top:0; margin-bottom: 1ex; font-variant: small-caps; background-color: rgba( 128, 128, 128, .5);         position: relative;    left: -.7ex;    padding: 0 .7ex;    width: 100%;}p {    text-align: justify;}/* vresp */html {    width: 100%;    height: calc(100% - 8px);}.head, .main, .foot {    min-height: 50px;    background-color: rgba(129,130,128,.5);    margin: 0 1ex 1ex;    display:inline-block;    width: calc( 100% - 2ex );    vertical-align: top;}.head, .foot {    height: 25%;    max-height: 120px;}.main {    min-height: 300px;    height: calc( 100% - 240px - 1ex );    white-space: nowrap; /* remove spaces between blocks */}.main > * {    /* wrap text normaly */    white-space: normal;        overflow: auto;    max-height: calc( 100% - 2ex );}    .wrap {    max-width: 800px;    min-width: 200px;    width: 100%;    margin: 0 auto;    position: relative;    height:100%;}body {    height: 100%;}@media only screen and (max-height: 560px ) { /* 120 + 120 + 300 + ~2ex*/    .head, .foot {        max-width: 200px;        min-height: 100px;        height: calc( 50% - 1ex );        max-height: 100%;    }    .head {    }    .main {        width: calc( 100% - 200px - 4ex );        margin-right:0;        height: calc( 100% - 1ex );        float:left;    }    .foot{        position: absolute;        right: 1ex;        top: 50%;    }}/* end of vresp */.wrap {    max-width: 100%;}.col-1, .col-2, .col-3 {    display: inline-block;    vertical-align: top;    padding: 1ex;    height: calc( 100% - 2ex );    max-width: 100%;    background-color: rgba( 128, 128, 128, .5 );}.two-columns .col-1 {    width: calc( 25% - 2ex );}.two-columns .col-2 { display: none; }.two-columns .col-3 {    width: calc( 75% - 3ex - 2px ); /* - 2px - fix for chrome */    margin-left: 1ex;}.three-columns .col-1 {    width: calc( 25% - 2ex );}.three-columns .col-2 {    width: calc( 25% - 3ex - 2px ); /* - 2px - fix for chrome */    margin-left: 1ex;}.three-columns .col-3 {    width: calc( 50% - 3ex - 2px ); /* - 2px - fix for chrome */    margin-left: 1ex;}.aside {    position: relative;     max-width: 180px;    background-color: rgba( 128, 128, 128, .5 );}/* floating blocks */.right,.left{    margin-top: -1ex;    vertical-align: top;    display: block;}    .right {    float: right;    margin-right: -1ex;    margin-left: 1ex;}.left {    float: left;    margin-left: -1ex;    margin-right: 1ex;}@media only screen and (max-width: 480px ) {    .two-columns .col-1, .two-columns .col-3, .three-columns .col-1, .three-columns .col-3 {        display: block;        float: none;        width: calc( 100% - 2ex );        margin: 0 0 1ex;    }}@media only screen and (max-width: 640px ) {    .wrap {        height: auto;    }    .head, .foot {        position: relative;        max-width: 100%;        top: auto;        right: auto;        height: auto;        margin-left: 0;        margin-right:0;    }    .main {        width: calc( 100% - 2ex );        margin-left: 0;    }}@media only screen and (max-width: 800px ) {    .main {        height: auto;    }    .main > * {        overflow: visible;        height: auto;        min-height: 100%;    }    .left {        max-width: 100%;        float: none;        margin: 0;    }}@media only screen and (max-width: 1024px ) {    .right {        max-width: 100%;        float: none;        margin: 0;    }}@media only screen and (max-width: 1280px ) {    .three-columns .left {        max-width: 100%;        float: none;        margin: 0;    }}​

dabblet.html

<div class="wrap">
    <div class="head">
    </div>
    <div class="main two-columns">
        <div class="col-1"></div>
        <div class="col-2"></div>
        <div class="col-3">
            <h2>Lorem ipsum dolor sit amet</h2>
            <div class="aside left">
                <p>Duis imperdiet egestas ligula, quis hendrerit ipsum ullamcorper et. Phasellus id tristique orci. Proin consequat mi at felis scelerisque ullamcorper.</p>
            </div>
            <div class="aside right">
                <p>Facilisi. Etiam enim metus, luctus in adipiscing at, consectetur quis sapien. Duis imperdiet egestas ligula, quis hendrerit ipsum ullamcorper et. Phasellus id tristique orci. Proin consequat mi at felis scelerisque ullamcorper.</p>
            </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.</p>
            <p>Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus. Phasellus erat velit, sagittis sed varius volutpat, placerat nec urna. Nam eu metus vitae dolor fringilla feugiat. Nulla.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.</p>
            <p>Et mollis nunc diam eget sapien. Nulla facilisi. Etiam feugiat imperdiet rhoncus. Sed suscipit bibendum enim, sed volutpat tortor malesuada non. Morbi fringilla dui non purus porttitor mattis. Suspendisse quis vulputate risus. Phasellus erat velit, sagittis sed varius volutpat, placerat nec urna. Nam eu metus vitae dolor fringilla feugiat. Nulla.</p>
        </div>
    </div>
    <div class="foot">
    </div>
</div>​

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}