[GLASS] KQ Sample App

by Brian Blakely

HTML

<article
    class="auto-paginate"
    style="box-sizing: border-box; padding: 0; width: 640px; height: 360px;"
>    
    <!-- PAGE 1 -->
    <div
        style="position: relative; margin: 0; padding: 0; width: 640px; height: 360px; background: #000; overflow: hidden; z-index: 2;"
    >
        <span
            style="display: block; position: absolute; top: 0; left: 0; margin: 0; width: 100%; height: 40px; text-align: center; line-height: 40px; font-size: 30px; color: #000; background: url(http://i.imgur.com/ihNsNU9.png) 40px 50% no-repeat #ffcd5b; background-size: auto 30px; z-index: 1;"
        >
            10 Minute Recipes
        </span>
        
        <img
            src="http://www.kraftrecipes.com/kraftcheese/PublishingImages/recipe/featuredrecipes-grilled-cheese-margherita.jpg"
            alt=""
        style="position: absolute; top: 70px; left: 50%; margin: 0 0 0 -193px; height: 290px; box-shadow: 0 0 40px #000; z-index: 2;"
        />
        <img
            src="http://www.kraftrecipes.com/kraftcheese/PublishingImages/recipe/featuredrecipes-pulled-pork.jpg"
            alt=""
            style="position: absolute; top: 55px; right: -100px; height: 225px; opacity: 0.5;"
        />
    </div>
    <!-- PAGE 2 -->
    <div
        style="position: relative; margin: 0; padding: 0; width: 640px; height: 360px; background: #000; overflow: hidden; z-index: 2;"
    >
        <span
            style="display: block; position: absolute; top: 0; left: 0; margin: 0; width: 100%; height: 40px; text-align: center; line-height: 40px; font-size: 30px; color: #000; background: url(http://i.imgur.com/ihNsNU9.png) 40px 50% no-repeat #ffcd5b; background-size: auto 30px; z-index: 1;"
        >
            20 Minute Recipes
        </span>
        <img
            src="http://www.kraftrecipes.com/kraftcheese/PublishingImages/recipe/featuredrecipes-grilled-cheese-margherita.jpg"
            alt=""
            style="position: absolute; top: 55px; left: -100px;...

CSS

/*--------------------------------------- */
/* RESET */
* {
 margin: 0;
 padding: 0;
 border: 0;
 font: inherit;
 color: inherit;
}

/*--------------------------------------- */
/* BASIC COMPONENTS */

/* Base card size, colors, and fonts. */
article {
  width: 640px;
  height: 360px;
  display: block;
  overflow: hidden;

  position: absolute;
  top: 0px;
  left: 0px;

  background-color: #000;
  color: #fff;

  font-family: 'Roboto';
  font-weight: 100;
  font-size: 40px;
  text-shadow: 0 1px 1px #000;
}

/* Modifications to allow content to flow across pages. */
article.auto-paginate {
  overflow: visible;

  /* Keeps contents 40px from the top/bottom of the screen. */
  height: 280px;
  padding: 40px 0px;

  /* Actually causes the pagination. */
  -webkit-column-width: 640px;
  -webkit-column-gap: 0px;
  -webkit-column-rule: 0px solid #000;
}

/* Keeps content of pages 40px away from the left/right edges of the screen. */
article.auto-paginate > * {
  margin-left: 40px;
  margin-right: 40px;
}

/* Main content area, excluding footer. */
section {
  margin: 40px 40px 0 40px;
  padding: 0;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 80px;
  overflow: hidden;
}

/* Remove margin on top and bottom for sections that are inside
   auto-paginating articles. */
article.auto-paginate > section {
  margin-top: 40px;
  margin-bottom: 40px;
}

/* Footer containing timestamp, auxiliary info. */
footer {
  margin: 0 40px 26px 40px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;

  font-weight: 300;
  font-size: 26px;
  line-height: 1.4em;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}

/* Force footer content to be single-line, ellipsized. */
footer > div, footer > p, footer > time, footer > h1, footer > h2, footer > h3 {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

footer img {
  padding: 0 10px 10px 10px;
}

footer img.left {
  padding-left: 0;
}

footer img.right {
 ...

JavaScript

{
  "kind": "mirror#timelineItem",
  "id": "db212c44-1cec-4ef3-af63-625bbddc5b15",
  "created": "2013-09-25T18:47:18.845Z",
  "updated": "2013-09-27T18:17:59.387Z",
  "etag": "\"JSKDAQwHsFMfjxJv83yregOhnaw/0opyKeg73Em7UXv44Z9fvYC0UcQ\"",
  "html": "<article class=\"auto-paginate\" style=\"padding:0;width:640px;height:360px\">    \n    \n    <div style=\"position:relative;margin:0;padding:0;width:640px;height:360px;background:#000;overflow:hidden;z-index:2\">\n        <span style=\"display:block;position:absolute;top:0;left:0;margin:0;width:100%;height:40px;text-align:center;line-height:40px;font-size:30px;color:#000;background:url(http://i.imgur.com/ihNsNU9.png) 40px 50% no-repeat #ffcd5b;background-size:auto 30px;z-index:1\">\n            10 Minute Recipes\n        </span>\n        \n        <img src=\"http://www.kraftrecipes.com/kraftcheese/PublishingImages/recipe/featuredrecipes-grilled-cheese-margherita.jpg\" style=\"position:absolute;top:70px;left:50%;margin:0 0 0 -193px;height:290px;box-shadow:0 0 40px #000;z-index:2\">\n        <img src=\"http://www.kraftrecipes.com/kraftcheese/PublishingImages/recipe/featuredrecipes-pulled-pork.jpg\" style=\"position:absolute;top:55px;right:-100px;height:225px;opacity:0.5\">\n    </div>\n    \n    <div style=\"position:relative;margin:0;padding:0;width:640px;height:360px;background:#000;overflow:hidden;z-index:2\">\n        <span style=\"display:block;position:absolute;top:0;left:0;margin:0;width:100%;height:40px;text-align:center;line-height:40px;font-size:30px;color:#000;background:url(http://i.imgur.com/ihNsNU9.png) 40px 50% no-repeat #ffcd5b;background-size:auto 30px;z-index:1\">\n            20 Minute Recipes\n        </span>\n        <img src=\"http://www.kraftrecipes.com/kraftcheese/PublishingImages/recipe/featuredrecipes-grilled-cheese-margherita.jpg\" style=\"position:absolute;top:55px;left:-100px;height:225px;opacity:0.5\">\n        <img...