Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

polishing this blog template

  • Loading branch information...
commit 0e93d4836cf03cf4f3854a4e52f8ed69d53256da 1 parent 7fec363
@shiftbot shiftbot authored
Showing with 39 additions and 15 deletions.
  1. +2 −2 less/metro.less
  2. +27 −2 less/metroblog.less
  3. +10 −11 sample-blog.html
View
4 less/metro.less
@@ -21,8 +21,8 @@
.metro-pivot .items { position: relative; }
.metro-pivot .items .pivotItem { display: block; white-space: normal; text-align: justify; width: 100%; }
-ul.metro-list { padding: 0; }
-ul.metro-list li { display: block; margin: 10px 0; height: 20px; padding: 5px; overflow: hidden; border-left: solid 30px; list-style: none; }
+ul.metro-list, ol.metro-list { padding: 0; }
+ul.metro-list li, ol.metro-list li { display: block; margin: 10px 0; height: 20px; padding: 5px; overflow: hidden; border-left: solid 30px; list-style: none; }
pre {
padding: 15px;
View
29 less/metroblog.less
@@ -25,6 +25,31 @@ footer {
}
img {
+ margin-top: 20px;
+ margin-bottom: 20px;
+ box-shadow: 3px 3px 7px #777;
+}
+img.left {
+ float: left;
+ margin-right: 20px;
+
+}
+
+img.right {
float: right;
- margin: 20px;
-}
+ margin-left: 20px;
+}
+
+
+ol.metro-list { margin-left: 10px; }
+
+
+h1, h2, h3, h4, h5, h6 {
+ color: @blue;
+}
+
+ul.metro-list li, ol.metro-list li { border-left: solid 30px @blue; }
+
+section.title { float: left; font-size: @baseFontSize * 4; }
+
+nav { float: right; width: 300px; margin: 20px; }
View
21 sample-blog.html
@@ -15,13 +15,14 @@
body { width: 800px; margin: 0 auto; }
</style>
<script src="scripts/less-1.2.1.min.js" type="text/javascript"></script>
+ <title>This is a sample blog</title>
</head>
<body>
- <section>
+ <section class="title">
<header>
- <h1>My sample blog</h1>
+ My sample blog
</header>
- <section>
+ </section>
<nav>
<ul>
@@ -38,7 +39,7 @@
<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>
@@ -46,11 +47,11 @@
<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>
- <ul>
+ <ul class="metro-list">
<li>We should also style lists.</li>
<li>This one, for example, is unordered.</li>
<li>And that is it!</li>
@@ -62,12 +63,10 @@
<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>
- <img src="http://placekitten.com/g/400/600" />
-
</article>
<article>
@@ -77,13 +76,13 @@
<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 src="http://placekitten.com/g/400/300" />
+ <img class="right" src="http://placekitten.com/g/300/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>
<aside> Like they're actually proud of that &amp;@#$%. </aside>
- <ol>
+ <ol class="metro-list">
<li>This, on the other hand, is an ordered list.</li>
<li>It has a first, ...</li>
<li>... a second, and ...</li>

0 comments on commit 0e93d48

Please sign in to comment.
Something went wrong with that request. Please try again.