Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add some responsiveness to the blog demo #40

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add some responsiveness to the blog demo #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 11 additions & 14 deletions demos/blog/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,14 @@
<html>
<head>
<link rel="stylesheet/less" type="text/css" href="/less/metroblog.less" />
<style>
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 class="title">
<header>
My sample blog
</header>
</section>
<a href="/">My sample blog</a>
<span class="subtitle">Catch phrase</span>
</header>

<nav>
<ul>
Expand All @@ -32,11 +28,12 @@
</ul>
</nav>

<main>
<article>
<header>
<div class="articleheader">
<h2>Some header post</h2>
<span class="date">February 10th</span>
</header>
</div>

<p>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.</p>

Expand Down Expand Up @@ -71,10 +68,10 @@ <h2>Some header post</h2>
</article>

<article>
<header>
<div class="articleheader">
<h2>A follow up post</h2>
<span class="date">February 9th</span>
</header>
</div>

<p>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.</p>

Expand All @@ -95,15 +92,15 @@ <h2>A follow up post</h2>

<p>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.</p>
</article>

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

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

<footer>
Copyright &copy; 2011&ndash;2012
Copyright &copy; 2011&ndash;2014
</footer>
</body>
</html>
</html>
86 changes: 69 additions & 17 deletions less/metroblog.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
@import "metro.less";

body { margin: 0 20px; }

main { clear: both; }

nav {
ul {
list-style-type: none;
Expand All @@ -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;
}
Expand All @@ -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: "";
}
}
}
}