Permalink
Browse files

updated code

  • Loading branch information...
1 parent d248aec commit bcc6a5f6ce0aa659129f6c3fdf6da80e35d7b0e4 @yaanno committed May 7, 2011
@@ -0,0 +1,43 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Blog Post</title>
+ <link rel="stylesheet/less" href="../src/reset.less" type="text/css">
+ <link rel="stylesheet/less" href="../src/base.less" type="text/css">
+ <link rel="stylesheet/less" href="../src/comments.less" type="text/css">
+ <script src="../js/lessjs.min.js"></script>
+ </head>
+ <body>
+ <article class="wrapper">
+ <section id="main">
+ <h1>Don't stray too far from your laptop at Starbucks</h1>
+ <p>
+ All across New York, Starbucks pops up again and again on police blotters because of purses, bags, laptops and other items stolen after being abandoned by customers picking up their drinks or using the bathroom. "Officers have set up stings in the chain’s stores," says this New York Times story.</p>
+ <p>"A commander even asked one branch to put up a sign warning customers; the manager demurred, saying such a sign required corporate approval." MY TAKE FROM THE CHICAGO AREA: Starbucks customers here are pretty careful, and generally ask another customer to keep an eye on their belongs while they step away from their tables.
+ </p>
+ </section>
+ <section id="comments">
+ <h2>Comments</h2>
+ <article id="comment-1">
+ <h3>Starbucks, Seattle's Best, or Peet's Coffee? <span class="autor">by joel</span> <span class="date">at <a href="#comment-1">10:45, 2011. 01. 05.</a></span></h3>
+ <p>
+ In my city, we have a Starbucks literally right across from a Peet's, and in another part, we have a Seattle's Best on the same block as another Starbucks.
+ </p>
+ </article>
+ <article id="comment-2">
+ <h3>Definitely Starbucks <span class="autor">by adrian</span> <span class="date">at <a href="#comment-2">10:45, 2011. 01. 08.</a></span></h3>
+ <p>
+ Seattle's Best has more drink seleciton, and is a bit more expensive than starbucks with the simillar drinks that they have. Starbucks, is Starbucks many people go there and buy drink, i bet its one of the most famouse coffe shops in the world.
+ </p>
+ </article>
+ <article id="comment-3">
+ <h3>Starbucks is frequently the scene of thefts <span class="autor">by marie</span> <span class="date">at <a href="#comment-3">10:45, 2011. 02. 05.</a></span></h3>
+ <p>
+ Gotta love the name of that police officer! Anyway, it sounds like this is only identified as a Starbucks problem because there are more Starbucks in NYC than any other similar business, so it naturally happens more often at Starbucks.
+ </p>
+ </article>
+ </section>
+ </article>
+ </body>
+</html>
@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Debug me!</title>
+ <link rel="stylesheet/less" href="../src/reset.less" type="text/css">
+ <link rel="stylesheet/less" href="../src/base.less" type="text/css">
+ <link rel="stylesheet/less" href="../src/debug.less" type="text/css">
+ <script src="../js/lessjs.min.js"></script>
+ </head>
+ <body>
+ <article class="wrapper">
+
+ <h1>Peet's Coffees</h1>
+
+ <ul class="panel">
+ <li>
+ <h2>Major Dickason’s Blend</h2>
+ <p></p>
+ </li>
+ <li>
+ <h2></h2>
+ <p>
+ Decaf version of our most beloved blend. Made of the finest coffees in the world, for a bold, full-bodied, bright and flavorful cup.
+ </p>
+ </li>
+ <li>
+ <h2>Uzuri African Blend</h2>
+ <p></p>
+ </li>
+ <li>
+ <h2>Decaf Mocca-Java</h2>
+ <p>
+ Complex and full-bodied. This water processed, decaffeinated coffee is a blend of Java and Ethiopian Mocca.
+ </p>
+ </li>
+ </ul>
+ </article>
+ </body>
+</html>
View
@@ -0,0 +1,100 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Order</title>
+ <link rel="stylesheet/less" href="../src/reset.less" type="text/css">
+ <link rel="stylesheet/less" href="../src/base.less" type="text/css">
+ <link rel="stylesheet/less" href="../src/form.less" type="text/css">
+ <script src="../js/lessjs.min.js"></script>
+ </head>
+ <body>
+ <article class="wrapper">
+
+ <h1>Order Coffee Cups</h1>
+ <form action="" method="post" accept-charset="utf-8">
+
+ <fieldset>
+ <legend>Personal details</legend>
+ <ul>
+ <li>
+ <label>
+ <span>Your name:</span>
+ <input required placeholder="eg. James T. Kirk" type="text" name="name">
+ </label>
+ </li>
+ <li>
+ <label>
+ <span>Your e-mail:</span>
+ <input required placeholder="eg. james.kirk@enterprise.com" type="email" name="email">
+ </label>
+ </li>
+ </ul>
+ </fieldset>
+
+ <fieldset>
+ <legend>Order details</legend>
+ <ul>
+ <li>
+ <label>
+ <span>Your desired cup size:</span>
+ <input type="range" min="1" max="4" step="1" value="2" name="size">
+ <span class="current_value">Middle</span>
+ <span class="explain">Small (1), Middle (2), Large (3), Extra Large (4)</span>
+ </label>
+ </li>
+ <li>
+ <label>
+ <span>Number of coffee cups:</span>
+ <input type="number" min="1" step="1" max="10" value="1" name="size">
+ <span class="explain">Max. 10 cups</span>
+ </label>
+ </li>
+ <li>
+ <label style="display:inline">
+ <span>I have a coupon code:</span>
+ </label>
+ <input type="checkbox">
+ <input type="text" name="coupon" disabled>
+ </li>
+ <li>
+ <input type="submit" name="submit" value="Submit Order!">
+ </li>
+ </ul>
+ </fieldset>
+ </form>
+ </article>
+ <script src="../js/jquery.min.js"></script>
+ <script>
+ (function ($) {
+ var $cupsize = $("input[type='range']"),
+ $cupsize_value = $cupsize.next(),
+ cupsize_value_map = {
+ "1": "Small",
+ "2": "Middle",
+ "3": "Large",
+ "4": "Extra Large"
+ },
+ $enable_coupon = $("input[type='checkbox']"),
+ $coupon_code = $enable_coupon.next();
+
+ console.log($enable_coupon, $coupon_code)
+
+ $cupsize.bind("change", function (event) {
+ if (this.value in cupsize_value_map) {
+ $cupsize_value.text(cupsize_value_map[this.value]);
+ }
+ });
+
+ $enable_coupon.bind("click", function (event) {
+ if (this.checked) {
+ $coupon_code.attr({'disabled':false});
+ return;
+ }
+ $coupon_code.attr({'disabled':true});
+ })
+
+ })(jQuery);
+ </script>
+ </body>
+</html>
File renamed without changes.
View
@@ -0,0 +1,70 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Flexible Box Layout</title>
+ <style>
+ .container {
+ display: -moz-box;
+ -moz-box-orient: horizontal;
+
+ display: -webkit-box;
+ -webkit-box-orient: horizontal;
+
+ display: box;
+ box-orient: horizontal;
+ }
+ .container div {
+ -moz-box-flex: 1;
+ -webkit-box-flex: 1;
+ box-flex: 1;
+
+ padding: 10px;
+ color: white;
+ }
+
+ .container div:nth-child(odd) {
+ background: blue;
+ }
+
+ .container div:nth-child(even) {
+ background: gray;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="container">
+ <div>
+ <p>
+ Let’s consider an example design.
+ </p>
+ <p>
+ Let’s consider an example design.
+ </p>
+ </div>
+ <div>
+ <p>
+ Let’s consider an example design.
+ Let’s consider an example design.
+ Let’s consider an example design.
+ Let’s consider an example design.
+ Let’s consider an example design.
+ Let’s consider an example design.
+ </p>
+ </div>
+ <div>
+ <p>
+ Let’s consider an example design.
+ </p>
+ <p>
+ Let’s consider an example design.
+ Let’s consider an example design.
+ Let’s consider an example design.
+ Let’s consider an example design.
+ Let’s consider an example design.
+ Let’s consider an example design.
+ </p>
+ </div>
+ </div>
+ </body>
+</html>
@@ -0,0 +1,46 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Font Service</title>
+ <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
+ <link href='http://fonts.googleapis.com/css?family=Crafty+Girls' rel='stylesheet' type='text/css'>
+ <link rel="stylesheet/less" href="../src/reset.less" type="text/css">
+ <link rel="stylesheet/less" href="../src/base.less" type="text/css">
+ <link rel="stylesheet/less" href="../src/comments.less" type="text/css">
+ <link rel="stylesheet/less" href="../src/fontapi.less" type="text/css">
+ <script src="../js/lessjs.min.js"></script>
+ </head>
+ <body>
+ <article class="wrapper">
+ <section id="main">
+ <h1>Don't stray too far from your laptop at Starbucks</h1>
+ <p>
+ All across New York, Starbucks pops up again and again on police blotters because of purses, bags, laptops and other items stolen after being abandoned by customers picking up their drinks or using the bathroom. "Officers have set up stings in the chain’s stores," says this New York Times story.</p>
+ <p>"A commander even asked one branch to put up a sign warning customers; the manager demurred, saying such a sign required corporate approval." MY TAKE FROM THE CHICAGO AREA: Starbucks customers here are pretty careful, and generally ask another customer to keep an eye on their belongs while they step away from their tables.
+ </p>
+ </section>
+ <section id="comments">
+ <h2>Comments</h2>
+ <article id="comment-1">
+ <h3>Starbucks, Seattle's Best, or Peet's Coffee? <span class="autor">by joel</span> <span class="date">at <a href="#comment-1">10:45, 2011. 01. 05.</a></span></h3>
+ <p>
+ In my city, we have a Starbucks literally right across from a Peet's, and in another part, we have a Seattle's Best on the same block as another Starbucks.
+ </p>
+ </article>
+ <article id="comment-2">
+ <h3>Definitely Starbucks <span class="autor">by adrian</span> <span class="date">at <a href="#comment-2">10:45, 2011. 01. 08.</a></span></h3>
+ <p>
+ Seattle's Best has more drink seleciton, and is a bit more expensive than starbucks with the simillar drinks that they have. Starbucks, is Starbucks many people go there and buy drink, i bet its one of the most famouse coffe shops in the world.
+ </p>
+ </article>
+ <article id="comment-3">
+ <h3>Starbucks is frequently the scene of thefts <span class="autor">by marie</span> <span class="date">at <a href="#comment-3">10:45, 2011. 02. 05.</a></span></h3>
+ <p>
+ Gotta love the name of that police officer! Anyway, it sounds like this is only identified as a Starbucks problem because there are more Starbucks in NYC than any other similar business, so it naturally happens more often at Starbucks.
+ </p>
+ </article>
+ </section>
+ </article>
+ </body>
+</html>
@@ -0,0 +1,71 @@
+<!doctype html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Effects</title>
+ <link rel="stylesheet/less" href="../src/reset.less" type="text/css">
+ <link rel="stylesheet/less" href="../src/base.less" type="text/css">
+ <link rel="stylesheet/less" href="../src/effects.less" type="text/css">
+ <script src="../js/lessjs.min.js"></script>
+ <style>
+ @-webkit-keyframes blink {
+ 0% {
+ background: white;
+ }
+
+ 100% {
+ background: red;
+ }
+ }
+
+ @-webkit-keyframes puff {
+ 0% {
+ -webkit-transform: scale(1);
+ }
+
+ 100% {
+ -webkit-transform: scale(10);
+ opacity: 0;
+ }
+ }
+
+ @-webkit-keyframes highlight {
+ 0% {
+ background: rgba(238,221,130,.5);
+ }
+ 33% {
+ background: rgba(238,221,130,1)
+ }
+ 100% {
+ background: tan;
+ }
+ }
+ .blink:hover {
+ -webkit-animation: blink .5s 4;
+ }
+ .puff:hover {
+ -webkit-animation: puff .5s 1 ease-in;
+ }
+ .highlight:hover {
+ -webkit-animation: highlight .5s 1 ease-in-out;
+ }
+ </style>
+ </head>
+ <body>
+ <article class="wrapper">
+
+ <section class="card blink">
+ <p>Blink</p>
+ </section>
+
+ <section class="card puff">
+ <p>Puff</p>
+ </section>
+
+ <section class="card highlight">
+ <p>Highlight</p>
+ </section>
+
+ </article>
+ </body>
+</html>
Oops, something went wrong.

0 comments on commit bcc6a5f

Please sign in to comment.