Skip to content

Commit

Permalink
fixing a style issue
Browse files Browse the repository at this point in the history
  • Loading branch information
@shiftbot
shiftbot committed Feb 9, 2012
2 parents 0262fff + 0a83e97 commit d29ed97
Show file tree
Hide file tree
Showing 14 changed files with 1,570 additions and 186 deletions.
3 changes: 2 additions & 1 deletion .gitignore
View file
@@ -1 +1,2 @@
less/*.css less/*.css
_site
Empty file added _config.yml
View file
Empty file.
213 changes: 106 additions & 107 deletions sample-blog.html → demos/blog/index.html
View file
@@ -1,108 +1,107 @@
<!-- a template for people to start styling up a blog-style application using metro principles. <!-- a template for people to start styling up a blog-style application using metro principles.
note the use of semantic markup instead of classes everywhere note the use of semantic markup instead of classes everywhere
things to ponder: things to ponder:
- perhaps a stylesheet that derives from metro.css for elements such as these - perhaps a stylesheet that derives from metro.css for elements such as these
- how would you specify image alignments using CSS? - how would you specify image alignments using CSS?
- asides represent pull-out text - how should they be styled? - asides represent pull-out text - how should they be styled?
--> -->


<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet/less" type="text/css" href="less/metroblog.less" /> <link rel="stylesheet/less" type="text/css" href="/less/metroblog.less" />
<style> <style>
body { width: 800px; margin: 0 auto; } body { width: 800px; margin: 0 auto; }
</style> </style>
<script src="scripts/less-1.2.1.min.js" type="text/javascript"></script> <script src="/scripts/less-1.2.1.min.js" type="text/javascript"></script>
</head> <title>This is a sample blog</title>
<body> </head>
<section> <body>
<header> <section class="title">
<h1>My sample blog</h1> <header>
</header> My sample blog
<section> </header>

</section>
<nav>
<ul> <nav>
<li><a href="#" class="active">Blog</a></li> <ul>
<li><a href="#">Contact</a></li> <li><a href="#" class="active">Blog</a></li>
<li><a href="#">About</a></li> <li><a href="#">Contact</a></li>
</ul> <li><a href="#">About</a></li>
</nav> </ul>

</nav>
<article>
<header> <article>
<h2>Some header post</h2> <header>
</header> <h2>Some header post</h2>

</header>
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>

<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
<img src="http://placekitten.com/g/200/300" />

<img class="right" src="http://placekitten.com/g/200/300" />
<p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that @#$% to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?</p>

<p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that @#$% to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?</p>
<p><h3>Sub Heading #1</h3></p>

<p><h3>Sub Heading #1</h3></p>
<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>

<p>Your bones don't break, mine do. That's clear. Your cells react to bacteria and viruses differently than mine. You don't get sick, I do. That's also clear. But for some reason, you and I react the exact same way to water. We swallow it too fast, we choke. We get some in our lungs, we drown. However unreal it may seem, we are connected, you and I. We're on the same curve, just on opposite ends.</p>
<img src="http://placekitten.com/g/300/300" />

<img class="left" src="http://placekitten.com/g/300/300" />
<p>Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that @#$%? It actually says that in the little book that comes with it: the most popular gun in American crime.</p>

<p>Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that @#$%? It actually says that in the little book that comes with it: the most popular gun in American crime.</p>
<ul>
<li>We should also style lists.</li> <ul class="metro-list">
<li>This one, for example, is unordered.</li> <li>We should also style lists.</li>
<li>And that is it!</li> <li>This one, for example, is unordered.</li>
</ul> <li>And that is it!</li>

</ul>
<aside> Like they're actually proud of that &amp;@#$%. </aside>

<aside> Like they're actually proud of that &amp;@#$%. </aside>
<p><h3>Sub Heading #2</h3></p>

<p><h3>Sub Heading #2</h3></p>
<p>Normally, both your asses would be dead as @#$%ing fried chicken, but you happen to pull this &amp;@#$% while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much &amp;@#$% this morning over this case to hand it over to your dumb ass.</p>

<p>Normally, both your asses would be dead as @#$%ing fried chicken, but you happen to pull this &amp;@#$% while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much &amp;@#$% this morning over this case to hand it over to your dumb ass.</p>
<img src="http://placekitten.com/g/400/300" />

<img class="right" src="http://placekitten.com/g/400/300" />
<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>

<p>Do you see any Teletubbies in here? Do you see a slender plastic tag clipped to my shirt with my name printed on it? Do you see a little Asian child with a blank expression on his face sitting outside on a mechanical helicopter that shakes when you put quarters in it? No? Well, that's what you see at a toy store. And you must think you're in a toy store, because you're here shopping for an infant named Jeb.</p>
<img src="http://placekitten.com/g/400/600" />

</article>
</article>

<article>
<article> <header>
<header> <h2>A follow up post</h2>
<h2>A follow up post</h2> </header>
</header>

<p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass mother@#$%in' house, @#$%in' up the way the nigger talks. Mother@#$%er do that &amp;@#$% to me, he better paralyze my ass, 'cause I'll kill the mother@#$%er, know what I'm sayin'? </p>
<p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass mother@#$%in' house, @#$%in' up the way the nigger talks. Mother@#$%er do that &amp;@#$% to me, he better paralyze my ass, 'cause I'll kill the mother@#$%er, know what I'm sayin'? </p>

<img class="right" src="http://placekitten.com/g/300/300" />
<img src="http://placekitten.com/g/400/300" />

<p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p>
<p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p>

<aside> Like they're actually proud of that &amp;@#$%. </aside>
<aside> Like they're actually proud of that &amp;@#$%. </aside>

<ol class="metro-list">
<ol> <li>This, on the other hand, is an ordered list.</li>
<li>This, on the other hand, is an ordered list.</li> <li>It has a first, ...</li>
<li>It has a first, ...</li> <li>... a second, and ...</li>
<li>... a second, and ...</li> <li>... a last list item.</li>
<li>... a last list item.</li> </ol>
</ol>

<p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p>
<p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p>

<p>Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that &amp;@#$%? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that &amp;@#$%. </p>
<p>Now that there is the Tec-9, a crappy spray gun from South Miami. This gun is advertised as the most popular gun in American crime. Do you believe that &amp;@#$%? It actually says that in the little book that comes with it: the most popular gun in American crime. Like they're actually proud of that &amp;@#$%. </p> </article>
</article>

<!-- please do not remove this line -->
<!-- please do not remove this line -->

<section>
<section> Built using an awesome <a href="http://slipsum.com">lorem ipsum</a> generator and some <a href="http://placekitten.com/">kitteh pictures</a>
Built using an awesome <a href="http://slipsum.com">lorem ipsum</a> generator and some <a href="http://placekitten.com/">kitteh pictures</a> </section>
</section>

<footer>
<footer> Copyright &copy; 2011&ndash;2012
Copyright &copy; 2011&ndash;2012 </footer>
</footer> </body>
</body>
</html> </html>
6 changes: 3 additions & 3 deletions demo.html → demos/fonts/index.html
View file
@@ -1,13 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<link rel="stylesheet/less" type="text/css" href="less/metro.less" /> <link rel="stylesheet/less" type="text/css" href="/less/metro.less" />
<style> <style>
body { width: 800px; margin: 0 auto; } body { width: 800px; margin: 0 auto; }
</style> </style>
<script src="scripts/less-1.2.1.min.js" type="text/javascript"></script> <script src="/scripts/less-1.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.metro.js"></script> <script type="text/javascript" src="/scripts/jquery.metro.js"></script>
</head> </head>
<body> <body>
<h1 class="accent">LARGE heading text</h1> <h1 class="accent">LARGE heading text</h1>
Expand Down
112 changes: 112 additions & 0 deletions demos/pivot/index.html
View file
@@ -0,0 +1,112 @@
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="/less/metro.less" />
<style>
body { width: 800px; margin: 0 auto; }
</style>
<script src="/scripts/less-1.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.metro.js"></script>
</head>
<body>
<h1 class="accent">jqMetro</h1>

<div class="metro-pivot">
<div class="pivot-item">
<h3>about</h3>
<p>You've probably seen or used a tab control in the past - the pivot control is a sexy descendant of the tab control.</p>

<p>This widget, adapted from the <a href="http://naghsheh.info/Pivot/Pivot.htm">jqMetro</a> project, allows developers to make their web content more interactive with a bit of markup and some Javascript</p>

</div>
<div class="pivot-item">
<h3>usage</h3>

<br />

To get started, reference the two JS files

<pre>&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="/scripts/jquery.metro.js"&gt;&lt;/script&gt;</pre>

Then define the the DOM for the tabs. The <code>metro-pivot</code> represents the container for the control, and the <code>pivot-item</code> represents each item in the collection.

<pre>&lt;div class="metro-pivot"&gt;
&lt;div class="pivot-item"&gt;
&lt;h3&gt;tab 1&lt;/h3&gt;
&lt;p&gt;content&lt;/p&gt;
&lt;/div&gt;
&lt;div class="pivot-item"&gt;
&lt;h3&gt;tab 2&lt;/h3&gt;
&lt;p&gt;content&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>

Then add this script to the bottom of the page:

$(function () {
$("div.metro-pivot").metroPivot();
});

And that's it.
</div>

<div class="pivot-item">
<h3>configuration</h3>


<br />

There's many configuration options available - so you don't have to follow the markup style on the previous tab.

<pre>var defaults = {
animationDuration: 350,
headerOpacity: 0.25,
fixedHeaders: false,
headerSelector: function (item) { return item.children("h3").first(); },
itemSelector: function (item) { return item.children(".pivot-item"); },
headerItemTemplate: function () { return $("&lt;span class='header' />"); },
pivotItemTemplate: function () { return $("&lt;div class='pivotItem' />"); },
itemsTemplate: function () { return $("&lt;div class='items' />"); },
headersTemplate: function () { return $("&lt;div class='headers' />"); },
controlInitialized: undefined,
selectedItemChanged: undefined
};

$(function () {
$("div.metro-pivot").metroPivot(defaults);
});
</pre>

</div>
<div class="pivot-item">
<h3>tab3</h3>
<p>
Topping bear claw lemon drops. Cake powder gingerbread. Powder halvah powder danish. Cookie gingerbread muffin wypas cake marzipan dessert. Pastry jelly beans tootsie roll dessert wypas gingerbread pastry candy toffee. Sweet roll cupcake halvah. Gingerbread cotton candy tiramisu muffin carrot cake chocolate sweet roll donut. Applicake toffee halvah toffee dragée toffee candy canes sesame snaps cheesecake. Sweet powder lollipop apple pie candy halvah chupa chups croissant. Jelly beans bear claw soufflé apple pie. Gummies ice cream marzipan tootsie roll wypas carrot cake. Bonbon lemon drops candy gummi bears lemon drops lollipop. Powder caramels jelly.
</p>
</div>
</div>


<script>
var defaults = {
animationDuration: 350,
headerOpacity: 0.25,
fixedHeaders: false,
headerSelector: function (item) { return item.children("h3").first(); },
itemSelector: function (item) { return item.children(".pivot-item"); },
headerItemTemplate: function () { return $("<span class='header' />"); },
pivotItemTemplate: function () { return $("<div class='pivotItem' />"); },
itemsTemplate: function () { return $("<div class='items' />"); },
headersTemplate: function () { return $("<div class='headers' />"); },
controlInitialized: undefined,
selectedItemChanged: undefined
};

$(function () {
$("div.metro-pivot").metroPivot(defaults);
});
</script>
</body>
</html>

0 comments on commit d29ed97

Please sign in to comment.