<main>
  <h1>Inline and Block-Level Code</h1>
  <p>
    Testing styles for code that appears inline with content as well as blocks of code.
  </p>
  <p>
    Updated 2 February 2016 with <a href="https://www.paciellogroup.com/blog/2016/02/short-note-on-improving-usability-of-scrollable-regions/">notes from Steve Faulkner on making scrolling bits keyboard friendly</a>.
  </p>
  <pre role="region" aria-label="Code sample; may scroll depending on viewport size." tabindex="0">main {
  width: 80%;
  margin: 1em auto;
  padding: 1em 2em;
  color: #000;
  background-color: rgba(255,255,255,.25);
  border: .07em solid rgba(0,0,0,.5);
  border-radius: .5em;
}  </pre>
  <p>
    Bacon ipsum dolor amet <code>hamburger venison ground round</code>, ham kielbasa magna dolor turducken ipsum brisket shank. Shank capicola boudin cow qui cupim id sirloin. Quis aliqua drumstick andouille veniam brisket sunt pork chop. <kbd>Alt</kbd> + <kbd>Prnt Scrn</kbd>. Pig pork chop id, beef ribs tenderloin turkey kielbasa sunt corned beef laboris quis brisket kevin short ribs drumstick. Pork pariatur velit ad tenderloin. Pancetta sirloin spare ribs corned beef prosciutto proident ut. Exercitation laboris pork belly picanha flank.
  </p>
  <p>
    This is some text. You can <kbd>Ctrl</kbd> + <kbd>C</kbd> and then <kbd>Ctrl</kbd> + <kbd>V</kbd>. Maybe a <kbd>Tab<span class="Unicode">↹</span></kbd> for good measure.
  </p>
  <pre role="region" aria-label="Code sample; may scroll depending on viewport size." tabindex="0">/* For any clicks, clear the focus class from the nav and all its descendants, essentially closing the menu when a user clicks/taps outside of it. */
$(document).click(function(e) {
  $("nav *, nav").removeClass("focus");
});

/* Manipulate focus classes in navigation. */
function classy(){
  $("nav *, nav").removeClass("focus");
  $("nav:focus").addClass("focus");
  $("nav a:focus").addClass("focus");
  $("nav a:focus").parentsUntil("body").addClass("focus");
}

/* Delay the assigning of classes to give the :focus a chance to catch up. There has to be a better way for this. */
$(document).keydown(function() {
  setTimeout(classy, 200);
});

/* Find the current page and add the aria-label to its site structure parent, which you should only use if you can't do this server-side in your CMS of choice. */
$(document).ready(function() {
  var el = $("a[aria-label^='Current Page']");
  var elParent = el.parent().parent().parent("li").children("a");
  var elTxt = elParent.text();
  elParent.attr("aria-label", "Current Section: " + elTxt);
});</pre>
  <p>
    Aute prosciutto pork chop shank. Proident rump shank elit labore mollit sint brisket sausage culpa ham hock ipsum ullamco lorem fatback. Frankfurter ea commodo, ground round ham hock drumstick aliqua excepteur eiusmod picanha brisket lorem tenderloin sint strip steak. Sint aliquip leberkas, aliqua meatloaf swine id esse shank labore commodo fugiat porchetta. Salami proident capicola, rump ut pariatur sint sausage flank reprehenderit ground round. Sunt id ball tip, duis labore tail excepteur andouille do beef beef ribs aute rump sint. Dolore veniam kielbasa ullamco ad pork loin.
  </p>
  <p>
    Ut tempor velit ad. Voluptate excepteur pastrami duis magna. Tail cupim voluptate excepteur officia hamburger corned beef qui in bacon est ball tip irure proident. Et kielbasa id magna eiusmod sint exercitation nostrud quis meatloaf elit landjaeger. Cow sint venison velit elit nulla. Cillum andouille pig et meatloaf.
  </p>
  <pre>
Testing an overflowing box with no keyboard support.

Laborum non ut, bresaola ground round elit ut swine leberkas.
Ea officia short loin swine.
Quis salami flank sint, do in ham hock anim tenderloin meatloaf dolore elit.
Deserunt turducken non kielbasa est ad aute quis aliquip fatback ball tip laboris ham hock in prosciutto.
Hamburger andouille pork loin reprehenderit meatloaf, ut swine porchetta pastrami veniam ham hock doner rump ad labore.</pre>
  <p>
    Frankfurter jerky shank tail ball tip biltong duis ground round chicken. Turducken meatloaf pork chop sausage mollit reprehenderit ball tip ribeye short ribs frankfurter hamburger salami. Pastrami ham hock eu leberkas pork belly boudin, consequat velit cow spare ribs irure dolore frankfurter. Meatball bresaola adipisicing shank. Ad pork loin consectetur, jowl boudin tempor swine nostrud ex. Pancetta fatback ut chicken cupidatat, sirloin eiusmod. Shank duis pork chop, dolore ham doner voluptate pork belly.
  </p>
</main>