wriver4
11/23/2012 - 4:31 PM
A CodePen by Adam Krueger. Responsive HTML5 Less Template - This is a simple Responsive HTML5 template using Less CSS. I used it as a playgr
A CodePen by Adam Krueger. Responsive HTML5 Less Template - This is a simple Responsive HTML5 template using Less CSS. I used it as a playground to test out Less and use an HTML5 layout.
<div id="layout">
<header>
<h1><a href="#">Standard Blog</a></h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Archives</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<section id="main">
<article>
<header>
<h2><a href="#">Some Awesome Title</a></h2>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nisi metus. Morbi accumsan laoreet elit id ultrices. Fusce sit amet dignissim dolor. Maecenas convallis congue purus sed mattis. Sed velit orci, blandit varius fringilla nec, suscipit pretium sapien. Integer blandit blandit porta. Fusce ut gravida orci. Nulla eleifend mi id erat accumsan aliquam. In hac habitasse platea dictumst. Nulla congue sapien in nibh mollis nec laoreet ante bibendum.</p>
</section>
</article>
<aside>
<header>
<p>Sidebar Title 1</p>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nisi metus. Morbi accumsan laoreet elit id ultrices. Fusce sit amet dignissim dolor. Maecenas convallis congue purus sed mattis. Sed velit orci, blandit varius fringilla nec, suscipit pretium sapien.</p>
</section>
</aside>
<article>
<header>
<h2><a href="#">Another Awesome Title</a></h2>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nisi metus. Morbi accumsan laoreet elit id ultrices. Fusce sit amet dignissim dolor. Maecenas convallis congue purus sed mattis. Sed velit orci, blandit varius fringilla nec, suscipit pretium sapien. Integer blandit blandit porta. Fusce ut gravida orci. Nulla eleifend mi id erat accumsan aliquam. In hac habitasse platea dictumst. Nulla congue sapien in nibh mollis nec laoreet ante bibendum.</p>
</section>
</article>
<article>
<header>
<h2><a href="#">Yet Another Awesome Title</a></h2>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nisi metus. Morbi accumsan laoreet elit id ultrices. Fusce sit amet dignissim dolor. Maecenas convallis congue purus sed mattis. Sed velit orci, blandit varius fringilla nec, suscipit pretium sapien. Integer blandit blandit porta. Fusce ut gravida orci. Nulla eleifend mi id erat accumsan aliquam. In hac habitasse platea dictumst. Nulla congue sapien in nibh mollis nec laoreet ante bibendum.</p>
</section>
</article>
<aside>
<header>
<p>Sidebar Title 2</p>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nisi metus. Morbi accumsan laoreet elit id ultrices. Fusce sit amet dignissim dolor. Maecenas convallis congue purus sed mattis. Sed velit orci, blandit varius fringilla nec, suscipit pretium sapien.</p>
</section>
</aside>
<aside>
<header>
<p>Sidebar Title 3</p>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nisi metus. Morbi accumsan laoreet elit id ultrices. Fusce sit amet dignissim dolor. Maecenas convallis congue purus sed mattis. Sed velit orci, blandit varius fringilla nec, suscipit pretium sapien.</p>
</section>
</aside>
</section>
<footer id="copyright">
<p>Copyright © 2012 All Rights</p>
</footer>
</div> WebFontConfig = {
google: { families: [ 'Headland+One::latin', 'Oswald:400,700,300:latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
@text_color: #eee;
@text_color_title: #82c057;
@text_color_title_other: #c9697e;
@text_font: "Oswald", sans-serif;
@text_font_title: "Headland One", Georgia, serif;
@wood_color: #dbb158;
/*
These font families are available:
font-family: "Headland One", serif;
font-family: "Oswald", sans-serif;
*/
* { box-sizing: border-box; }
body {
font-size:14px;
line-height:24px;
font-family:@text_font_title;
color: @text_color;
background:lighten(saturate(@wood_color, 50%), 20%) url('http://www.kruegerdesigns.com/easyblog/img/trans_wood.png');
}
#layout {
width:80%;
margin:auto;
position:relative;
padding:1em;
background:rgba(0,0,0, .6);
}
header {
font-family: @text_font;
h1 {
a {
font-size:3em;
line-height:3em;
color:@text_color_title;
text-decoration: none;
&:hover {
text-decoration:underline;
}
}
}
}
nav {
ul {
display: table;
width:100%;
li {
display:table-cell;
text-align:center;
padding:0 0 15px 15px;
&:first-child {
padding-left:0;
}
a {
padding:0.75em 0;
text-transform:uppercase;
text-decoration:none;
font-family:@text_font;
display:block;
width:auto;
color:lighten(@text_color_title, 30%);
background:rgba(0,0,0, .40);
&:hover {
color:lighten(@text_color_title, 50%);
background:rgba(0,0,0, .25);
}
}
}
}
}
section#main {
margin-bottom:15px;
background:rgba(255,255,255, .0);
article {
float:left;
clear:both;
width:66.66%;
padding:1em 1em 1em 0;
margin-bottom:1em;
header {
h2 {
a{
color:darken(@text_color_title_other, 5%);
font-size:1.5em;
text-decoration: none;
&:hover {
text-decoration:underline;
}
}
}
}
}
aside {
width:33.33%;
margin-left:66.66%;
padding:1em;
color: lighten(@text_color, 25%);
background: darken(@text_color_title, 10%);
header {
font-size:1.3em;
color:#333;
}
}
}
footer#copyright {
clear:both;
background:rgba(0,0,0, 0.30);
font-size:.75em;
p {
font-family:@text_font;
padding:1em;
color:lighten(@text_color_title, 30%);
}
}
@media screen and (max-width: 40.5em) {
section#main {
article {
float:none;
width:100%;
}
aside {
width:100%;
margin-left:0;
margin-bottom:1em;
}
}
}