diff --git a/demos/blog/index.html b/demos/blog/index.html index b67e79b..983df2c 100644 --- a/demos/blog/index.html +++ b/demos/blog/index.html @@ -11,18 +11,14 @@ - This is a sample blog -
- My sample blog -
-
+ My sample blog + Catch phrase + +
-
+

Some header post

February 10th -
+

Pork chop sirloin jowl, pastrami ground round pork leberkas salami turducken. Sirloin salami capicola rump leberkas, andouille boudin speck spare ribs pastrami ground round shank kielbasa ball tip bresaola. Hamburger tri-tip boudin ground round venison chicken, jerky kielbasa. Jerky cow chicken hamburger. Chicken beef ribs short loin, sausage turducken venison pork belly kielbasa tenderloin. Biltong shank beef ribs leberkas. Chuck salami shank, sausage bacon capicola meatball.

@@ -71,10 +68,10 @@

Some header post

-
+

A follow up post

February 9th -
+

Frankfurter pancetta flank leberkas salami, bacon beef turducken strip steak tri-tip. Capicola ribeye andouille, ham venison kielbasa bacon pork belly tri-tip sausage short loin beef ribs biltong. Turducken beef ribs leberkas, drumstick andouille filet mignon ground round boudin speck sirloin meatball shank pastrami spare ribs frankfurter. Pork loin shankle bresaola turkey filet mignon. Speck pig shoulder, boudin pancetta pork chop shankle bresaola filet mignon jerky ham swine pork belly. T-bone shoulder shankle, swine beef ribs beef jerky. Sausage hamburger pork belly ham hock drumstick shoulder bacon.

@@ -95,7 +92,7 @@

A follow up post

Tri-tip brisket meatloaf sirloin pork belly kielbasa. Ball tip meatball shank fatback sausage tenderloin bacon. Drumstick ground round short loin beef ribs. Bacon pancetta ham hock ball tip flank, pork belly tongue biltong cow shoulder meatloaf turducken.

- +
@@ -103,7 +100,7 @@

A follow up post

- \ No newline at end of file + diff --git a/less/metroblog.less b/less/metroblog.less index f9e0429..52a40e1 100644 --- a/less/metroblog.less +++ b/less/metroblog.less @@ -1,4 +1,9 @@ @import "metro.less"; + +body { margin: 0 20px; } + +main { clear: both; } + nav { ul { list-style-type: none; @@ -8,14 +13,14 @@ nav { display: inline; margin-right: 20px; } - - a { + + a { color: @inactive; font-size: @baseFontSize * 1.6; text-decoration: none; text-transform: lowercase; - &.active + &.active { color: @foreground; } @@ -25,37 +30,84 @@ nav { footer { font-size: 90%; + font-style: italic; + color: @inactive; } img { margin-top: 20px; margin-bottom: 20px; - box-shadow: 0px 0px 7px #777; -} -img.left { - float: left; - margin-right: 20px; + box-shadow: 0px 0px 7px #777; -} + &.left { + float: left; + margin-right: 20px; + } -img.right { - float: right; - margin-left: 20px; + &.right { + float: right; + margin-left: 20px; + } } - ol.metro-list { margin-left: 10px; } - h1, h2, h3, h4, h5, h6 { - color: @blue; + color: @blue; } article { .clear } .date { text-transform: uppercase; } -section.title { float: left; font-size: @baseFontSize * 4; } +header { + font-size: @baseFontSize * 2; + margin-top: 10px; + margin-bottom: 10px; + + span.subtitle { + font-size: @baseFontSize; + color: @inactive; + font-style: italic; + display: inline; + + &:before { + content: "- "; + } + } +} -nav { float: right; margin-left: 140px; margin-top: 20px; margin-bottom: 20px; } +nav { + margin-top: 10px; + margin-bottom: 10px; +} nav a:hover { color: black; } + +@media all and(min-width: 800px) { + body { width: 800px; margin: 0 auto; } + + nav { + float: right; + margin-left: 120px; + margin-top: 20px; + margin-bottom: 20px; + } + + header { + float: left; + font-size: @baseFontSize * 4; + margin-top: 20px; + margin-bottom: 20px; + + span.subtitle { + font-size: @baseFontSize * 1.5; + color: @inactive; + font-style: italic; + display: block; + + &:before { + content: ""; + } + } + } +}