aarongustafson

<link rel="stylesheet" href="/c/d.min.css">
<link rel="stylesheet" href="/c/a.min.css" media="only screen">

aarongustafson

@supports (display: flex) {
  .project--minipromo[data-imaged] {
    display: flex;
    flex-wrap: none;
    padding: 0;
  }
  .project--minipromo[data-imaged] picture {
    flex: 0 1 50%;
    margin-right: 1.375rem;
  }

aarongustafson

main {
  padding: 0 .5em;
}

@media (min-width: 20em) {
  main {
    padding: 0 1.375rem;
  }
}

aarongustafson

#intro {
  /* Basic styles for IE6 */
}

/* More styles here */

body[id=css-zen-garden] #intro {  
  /* Advanced styles for everyone else */
}

aarongustafson

*:-o-prefocus {
  color: blue;
}

aarongustafson

code {
  font-size: 1.6875rem;
}

*:-o-prefocus,
code {
  font-size: inherit;
}

aarongustafson

a:link, a:visited {
  color: #046;
  border-bottom: 1px dotted;
  border-bottom-color: rgba(0, 68, 102, 0.25);
}

aarongustafson

<label for="n">What’s your name?</label>  
<input id="n" name="n"
       required aria-required="true"  
       autocorrect="off" autocapitalize="words"  
       placeholder="Sir Tim Berners Lee"
       autocomplete="name"
       >

aarongustafson

<nav class="global-navigation" role="navigation"
     aria-label="main navigation">
  …
</nav>

aarongustafson

<label for="first_name">What’s your first name?</label>
<input name="first_name" id="first_name">