A little CSS3 usage

My last gig had a relatively small amount of front-end work to it. I mostly plugged in standard form markup onto a common form and wrote the javascript for handling the interaction. I've recently had a chance to do more markup and am please by what I'm learning.

Flexbox

I recently put together a job application and a new resume. After years of keeping my resume in a text file, I've never liked having it in a word processor. So I took some time to convert it to an html document. CSS Flexible boxes, I love you.

style

// the heading line
.experience-heading {
    margin-left: -20px;
    display: flex;
    align-content: space-around;
    width: 103%;
    font-weight: bold;
}

// keep this to the left
.experience-position {
    margin-left: 0px;
    margin-right: auto;
}

// keep this to the right
.experience-duration {
    margin-left: auto;
    margin-right: 0px;
}

markup

    <div class="experience">
        <div class="experience-heading">
            <div class="experience-position">Software Engineer &amp; Advertising champion, Zattoo.com</div>
            <div class="experience-duration">Jan 2011 To July 2013</div>
        </div>
        <p>
            Zattoo is a European virtual cable provider offering live television on computers, mobiles, smart televisions, and set-top boxes.  Bill created front-end user interfaces on desktop and mobile websites, managed and improved the server-side API and advertising system, and worked with marketing on promotional landing pages and displays.
        </p>
        <h4>Major contributions:</h4>
        <p>
            Transitioned the Zattoo ad infrastructure across vendors on a heroic timeframe. Specified, rewrote, deployed, tested, and supported operations to enable the switch before the extremely popular EUFA Euro 2012.  Work spanned user front-end (web, iOS, android), Zattoo application servers, and vendor systems.
        </p>
        <p>
            Bootstrapped and launched Zattoo’s Live TV Android App.  Managed the major challenge of Android’s lack of live streaming video protocols.
        </p>
    </div>

Yields a very nice left & right justified line that I like so much.

Viewport Units

After thinking about tweeting about my ember post, I had a look at my domains, they are in shambles since I nuked ye olde slicehost instance.

So, I made some new placeholder pages and learned a little CSS3. Specifically viewport units for sizing. You'll see its use in this stunning gone-fishing page for the kwerl and quickreleaselever top pages:

<!DOCTYPE html>  
<html>  
    <head>
        <meta charset="utf-8">
        <title>quick release lever</title>
        <style type="text/css">
            .biggie {
                height: 100vh;
                background: #fff no-repeat center center;
                background-size: contain;
                background-image: url(qrl.png);
            }
        </style>
    </head>
    <body>
        <div class="biggie"></div>
    </body>
</html>