Responsive pure css checkbox driven navigation menu with hamburger toggle animation

hamburger nav menu toggle.styl

// <header>
//     <input type="checkbox" id="menu-toggle" hidden checked="checked">
//     <label for="menu-toggle">
//         <span></span>
//     </label>
//     <span id="title"><a href="/">{{ .Title }}</a></span>
//     <nav>
//         <ul>
//             <li><a href="#">Work</a></li>
//             <li><a href="#">About</a></li>
//             <li><a href="#">Contact</a></li>
//         </ul>
//     </nav>
// </header>

dark = #242424
light = whitesmoke
trans-time = 0.25s
ham-size = 2em

html, body
    margin 0
    padding 0
    font-family -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif

header
    padding 1em
    text-align right
    font-weight bold
    display flex
    justify-content space-between
    align-items center

    #title
        font-size 1.5em

    a
        text-decoration none
        color dark

label[for='menu-toggle']
    display inline-block
    width ham-size
    height ham-size
    position relative
    cursor pointer
    z-index 999
    
    span, span:before, span:after
        display inline-block
        background-color dark
        width ham-size
        height (ham-size / 5)
        border-radius (ham-size / 5)

    span
        position absolute
        left 0
        top (ham-size / 2.5)
        transition background-color trans-time

        &:before, &:after
            content ""
            position absolute
            left 0
            transition background-color trans-time, transform trans-time

        &:before
            top -(ham-size / 2.5)

        &:after
            top (ham-size / 2.5)

#menu-toggle:checked
    & + label[for='menu-toggle']
        span
            background-color transparent

            &:before, &:after
                background-color light

            &:before
                transform translateY((ham-size / 5)) rotate(-30deg)

            &:after
                transform translateY(-(ham-size / 5)) rotate(210deg)

    & ~ nav
        transform translateX(0)

nav
    position fixed
    top 0
    bottom 0
    left 0
    right 0
    transform translateX(-100%)
    transition transform trans-time
    display flex
    flex-direction column
    justify-content center
    background-color alpha(dark, 0.85)

    ul
        margin 0
        padding 0
        list-style-type none
        text-align center

        li
            padding 1em

            a
                color light
                font-size 2em