@import "base.less";
@import "mixins.less";
@import "var.less";
// Credits: [Golden Grid System](http://goldengridsystem.com/) by [Joni Korpi](http://jonikorpi.com/) licensed under [MIT](http://www.opensource.org/licenses/mit-license.php)
// Important numbers
@line: 24;
@column: 100% / 18;
@font-size: 16;
@em: @font-size*1em;
// Simple fluid media
figure {
position: relative;
}
figure img, figure object, figure embed, figure video {
max-width: 100%;
display: block;
}
// Elastic Object & Iframe Embedded Videos http://webdesignerwall.com/tutorials/css-elastic-videos
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
margin-bottom: @line * 1px;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
// Typography settings - Make the text bigger if you dare
.small {font-size: 12px;}
.normal {font-size: 14px;}
.large {font-size: 18px;}
.huge {font-size: 24px;}
.massive {font-size: 36px;}
.gigantic {font-size: 48px;}
body {
.normal;
line-height: @line * 1px;
background: @white;
color: lighten(@black, 25%);
.sans;
}
.title{
line-height: 1;
.fancy-font;
font-weight: 700;
}
h1{
.title;
.huge;
margin: 0 0 (@line * 1.5px) 0;
}
h2{
.title;
.large;
margin: (@line * 2px) 0 (@line * 1px);
}
h3{
.title;
.normal;
margin: (@line * 1.5px) 0 (@line * 1px);
text-transform: uppercase;
color: lighten(@black, 60%);
}
h4, h5, h6{
.title;
.normal;
margin: (@line * 1px) 0;
font-weight: 400;
}
b, strong{
font-weight: 700;
}
// Four-column grid active
// ----------------------------------------
// Margin | # 1 2 3 4 | Margin
// 5.55555% | % 25 50 75 100 | 5.55555%
.wrapper {
padding: 0 (@line/2)/@em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
a{
color: @link;
text-decoration: none;
.transition();
&:hover{
color: darken(@link, 40%);
text-decoration:underline;
}
}
header{
.border-image(0 0 2px, 0 0 2, '../images/2px.png', repeat); // It's a very small detail, delete this line if you want different colors and don't want to edit the image file
.gradient(@color, darken(@color, 6%));
padding: (@line * 2px) @column;
margin-bottom: (@line * 2px);
h1{
margin: 0;
}
a{
text-decoration: none;
color: fade(@white, 80%);
// The 3d effect is kind of silly, so go ahead and delete the following lines xD
text-shadow:
0 1px 0 lighten(@black, 70%),
0 2px 0 lighten(@black, 60%),
0 3px 0 lighten(@black, 50%),
0 4px 0 lighten(@black, 40%),
0 5px 0 lighten(@black, 30%),
0 6px 0 lighten(@black, 20%),
0px 7px 0 lighten(@black, 10%),
0 8px 7px lighten(@black, 5%);
&:hover{
color: @white;
text-decoration:none;
}
}
}
footer{
.border-image(20px 0 0, 20 0 0, '../images/pages.png', repeat); // Again, it's a detail. I used border-image to be able to use a gradient or background color for the footer, but now it's white
padding: (@line * 2px) @column (@line * 1px);
margin-top: (@line * 4px);
color: fade(@black, 60%);
}
.pages{
margin-bottom: (@line * 1px);
}
.nav li{
list-style: none;
display: inline;
padding-right: 10px;
}
p[role="contentinfo"]{
margin-top: (@line / 2px); // If you don't use the Twitter button, delete this line
.small;
}
.content{
margin:0 @column;
}
.meta{
background: lighten(@black, 95%);
padding-top: (@line * 1px);
padding-bottom: (@line * 1px);
.rounded();
}
time{
.small;
text-transform: uppercase;
}
.tags li{
display: inline;
list-style: none;
}
blockquote, code, .post ul, .post ol, p{
margin: 0 0 (@line * 1px) 0;
}
blockquote{
margin-left: -(@line / 2px);
border-left: (@line / 4px) solid @link;
padding-left: (@line / 4px);
}
code{
display: block;
background: lighten(@black, 15%); // If you don't a dark scheme for code, we can't be friends
.box-shadow(inset 0 0 10px @black);
padding: (@line * 1px);
color: @white;
.rounded();
.mono();
margin-left: -(@line * 1px);
}
.post ul li{
list-style-image: url('../images/bullet.png'); // or use something less colorful, like list-style-type: square
}
.main + .main{
margin-top: (@line * 4px);
}
.archive li{
list-style: none;
}
.archive a{
display: block;
padding: (@line / 2px) 0;
border-bottom: 1px dotted lighten(@black, 80%);
&:hover{
text-decoration:none;
}
}
.archive time{
display: inline;
color: lighten(@black, 40%);
}
// Eight-column grid active
// ----------------------------------------------------------------------
// Margin | # 1 2 3 4 5 6 7 8 | Margin
// 5.55555% | % 12.5 25.0 37.5 50.0 62.5 75.0 87.5 100 | 5.55555%
// @media screen and (min-width: 720px)
@media screen and (min-width: 45em) {
header .wrapper{
width: 75%;
float: right;
}
.meta, .pages{
width: 25%;
float: left;
text-align: right;
}
.pages{
padding-top: 28px + (@line * 1px); // Twitter button size + [role="contentinfo"] margin-top. If you don't use the Twitter button, delete this line
}
.meta{
background: @white;
padding-top: 24px + (@line * 1.5px); // h1 font-size + margin-bottom
time{
margin-bottom: (@line * 1px);
}
}
.post, .copy, .main{
width: 75%;
float: right;
}
.tags li{
display: block;
}
.tags a:hover, .nav a:hover{
padding-right: (@line / 4px); // If prefer your links to remain still, delete this nonsense
}
.tags a:hover:after, .nav a:hover:after, .more:hover:after{
content: "\2192 ";
}
.nav li{
display: block;
padding-right: 0;
}
.archive time{
display: block;
width: 100/4%; // target 1 columns, context 4 columns
float: left;
}
}
// @media screen and (min-width: 888px)
@media screen and (min-width: 55.5em) {
.post p, .post blockquote, .post ul, .post ol{
width: 400/6%; // target 4 columns, context 6 columns
}
.main{
width: 50%;
float: none;
margin-left: 25%;
}
}
// @media screen and (min-width: 984px)
@media screen and (min-width: 61.5em) {
.meta, .pages{
width: 12.5%;
}
.pages{
padding-top: 0;
}
.meta{
padding-top: 24px + (@line * 1.5px);
}
}
// Sixteen-column grid active
// ----------------------------------------------------------------------------------------------------------------------
// Margin | # 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | Margin
// 5.55555% | % 6.25 12.5 18.75 25.0 31.25 37.5 43.75 50.0 56.25 62.5 68.75 75.0 81.25 87.5 93.75 100 | 5.55555%
// @media screen and (min-width: 1872px)
@media screen and (min-width: 117em) {
body{
.large;
}
header{
margin-bottom: (@line * 4px);
}
footer{
margin-top: (@line * 6px);
}
h1{
.gigantic;
margin-bottom: (@line * 2px);
}
h2, header .huge{
.massive;
}
h2{
margin-top: (@line * 3px);
}
h3{
.huge;
margin-top: (@line * 3px);
}
h4, h5, h6{
.large;
margin-top: (@line * 2px);
}
.meta, .pages{
width: 18.75%;
padding-left: 6.25%;
}
.meta{
padding-top: 48 * 2px;
}
.post, .copy{
width: 75%;
}
.post{
padding-right: 12.5%;
}
.post ul{
margin-bottom: 0;
}
.post li{
margin-bottom: (@line * 1px);
}
code{
.massive;
line-height: 1.5;
}
.post p, .post blockquote, .post ul, .post ol{
width: 600/10%; // target 4 columns, context 6 columns
}
}
// @media screen and (min-width: 2080px)
@media screen and (min-width: 130em) {
body {
max-width: 2560/@em;
}
}
@media print{
@import "print.less";
}
