Responsive example with css-only mobile menu switch

dabblet.css

/**
 * Responsive example with css-only mobile menu switch
 */


html
{
    font-family : sans-serif;
}

html,
body,
#head *,
#foot *
{
    padding : 0;
    margin  : 0;
}

#head h1
{
    text-align : center;
    font-size  : 2rem;
}

#head a[href="#menu"]
{
    display    : block;
    text-align : center;
    font-size  : 0.8rem;
}

#menu ul
{
    list-style : none iside;
}


#menu ul li
{
    display    : inline;
    display    : inline-block;
    width      : 30%;
    min-width  : 5em;
    text-align : center;
}


@media all and (max-width: 10cm)
{
    #head a[href="#menu"]
    {
        float : right;
        font  : 0/0 a;
        color : transparent;
        /* hides ::after on android
        width : 0;
        */
    }
    #head a[href="#menu"]::after
    {
        display       : inline-block;
        height        : 2rem;
        width         : 2rem;
        min-height    : 1cm;
        min-width     : 1cm;
        content       : "▼";
        font          : 1.2rem/2rem sans-serif; /* GAH! */
        color         : black;
        text-align    : center;
        border        : gray solid thin;
        border-width  : 0 0 thin thin;
        border-radius : 0 0 0 0.5em;
    }
    
    
    /* needs to use height:0 instead of display:none
    #menu
    {
      -moz-transition    : height 1s;
      -webkit-transition : height 1s;
      -ms-transition     : height 1s;
      -o-transition      : height 1s;
      transition         : height 1s;
    }
    */
    #menu:not(:target)
    {
        /* use with transition
        height   : 0;
        overflow : hidden;
        */
        display : none;
    }
    #menu:target
    {
        /* use with transition, but it may be taller, so it sux.
        height : 1.5rem;
        overflow : hidden;
        */
        display : block;
    }
}


@media all and (min-width: 10cm)
{
    body
    {
        padding : 0 0.25em;
    }
}

@media all and (min-width: 15cm)
{
    body
    {
        padding : 0.25em 3em;
    }
    #head
    {
        /* contain floats */
        position : relative;
    }
    
    #head a[href="#menu"]
    {
        display : none;
    }
    
    #head h1
    {
        float : left;
    }

    #menu ul li
    {
        width       : auto;
        line-height : 2rem;
        margin      : 0 1em;
    }

    #content ol
    {
        list-style-position : outside;
        padding             : 0;
    }
}

@media all and (min-width: 29.7cm)
{
    html
    {
        min-height : 100%;
    }
    body
    {
        max-width    : 29.7cm;
        margin       : 0 auto;
        border       : silver solid thin;
        border-width : 0 thin;
        box-shadow   : 0.3em 0 0.3em #cccccc, -0.3em 0 0.3em #cccccc
    }
}

​

dabblet.html

<header id="head">
    <a href="#menu" onclick="if (2 < document.getElementById('menu').clientHeight) { window.location.hash = ''; return false; }">skip to navigation</a>
    <h1>
        a site
    </h1>
    <nav id="menu">
        <ul>
            <li><a href="#">about</a></li>
            <li><a href="#">stuff</a></li>
            <li><a href="#">other stuff</a></li>
        </ul>
    </nav>
</header>

<div id="content">
    <article>
        <p>Stuff of a stuff is stuff in stuffed stuff by stuff.</p>
        
        <p>Width breakpoints:<p>
        <ol>
            <li>10cm</li>
            <li>15cm</li>
            <li>29.7cm (A4)</li>
        </ol>
    </article>
</div>​

settings.json

{"view":"split-vertical","seethrough":"","prefixfree":"1","page":"all"}