Skip to content

Commit

Permalink
[less] finished converting blog list -> LESS
Browse files Browse the repository at this point in the history
  • Loading branch information
Rob McGuire-Dale committed Feb 19, 2012
1 parent 0e731e3 commit ea8f600
Show file tree
Hide file tree
Showing 3 changed files with 137 additions and 149 deletions.
109 changes: 54 additions & 55 deletions media/less/base.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@
*/

// default 940px grid (based on Twitter Bootstrap grid)
@grid_nr_cols: 12;
@grid_col: 60px;
@grid_gutter: 20px;
@grid_total_width: (@grid_nr_cols * @grid_col) + (@grid_gutter * (@grid_nr_cols - 1));
@grid_nr_cols: 12;
@grid_col: 60px;
@grid_gutter: 20px;
@site_width: (@grid_nr_cols * @grid_col) + (@grid_gutter * (@grid_nr_cols - 1));

// grid span
@grid_cols_2: (@grid_col * 2) + @grid_gutter;
Expand All @@ -20,79 +20,78 @@

/* Main */
#body-wrap{
width: @grid_total_width;
margin: 25px auto;
width: @site_width;
margin: 25px auto;

/* Main text styles */
color: @dark_grey;
font-size: 14px;
font-family: "Veranda", lucida, tahoma, helvetica, arial, sans-serif;
line-height: 1.4em;
}

/* Links */
a, a:visited{
color: #31527D;
text-decoration: none;
}
a:hover{
color: #97A9C0;
}
/* Links */
a{
color: #31527D;
text-decoration: none;

/* Headings */
h1, h2, h3{
font-weight: normal;
margin: 0px;
}
h1{ font-size: 2em }
h2{ font-size: 1.5em }
h3{
font-size: 1em;
font-weight: bold;
}
&:hover{
color: #97A9C0;
}
}

/* Header */
#header{
display: table;
width: 100%;
#header{
display: table;
width: 100%;

font-family: "Orbitron", sans-serif;
border-bottom: solid 1px #777;
font-family: "Orbitron", sans-serif;
border-bottom: solid 1px #777;

padding-bottom: 2px;
margin-bottom: @grid_gutter;
padding-bottom: 2px;
margin-bottom: @grid_gutter;

#title{
a{
color: @dark_grey;
#title{
display: table-cell;
font-size: 2.5em;

a{
color: @dark_grey;
}
}
}

#menu{
display: table-cell;
font-size: 1.2em;
text-align: right;
#menu{
display: table-cell;
font-size: 1.2em;
text-align: right;

a{
margin-left: @grid_gutter;
}
a{
margin-left: @grid_gutter;
}

#selected{
border-top: solid 1px #777;
padding-top: 2px;
}

#selected{
border-top: solid 1px #777;
padding-top: 2px;
}
}

#content{
margin: 0px 0px;
}
}
#header h1{
display: table-cell;
font-size: 2.5em;

}


/* Content */
#content{
margin: 0px 0px;
/* Headings */
h1, h2, h3{
font-weight: normal;
margin: 0px;
}
h1{ font-size: 2em }
h2{ font-size: 1.5em }
h3{
font-size: 1em;
font-weight: bold;
}

/* Syntax highlighting */
Expand Down
167 changes: 80 additions & 87 deletions media/less/blog.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,86 @@
#content{
display: table-cell;
padding-right: @grid_gutter;

/* article list */
#list{
.article{
margin-bottom: @grid_gutter;

table{
margin: 0px;
border-spacing: 0px;

.title-img-wrap{
vertical-align: top;
padding-right: @grid_gutter;

img{
border: 1px solid #CCC;
box-shadow: 3px 4px 6px 1px #aaa;
-moz-box-shadow: 3px 4px 6px 1px #aaa;
-webkit-box-shadow: 3px 4px 6px 1px #aaa;
}
}
}

.text{
vertical-align: top;

.title-bar{

.title{
font-size: 1.5em;
margin-bottom: 5px;
margin-top: 0px;
}

.subtitle{
font-size: 0.9em;
color: #888;
}

}
}
}
}

/* single article */
#article{
.blog-item .content{
/* margin-left: 20px; */
}

.blog-item .content h1{
margin-top: 40px;
margin-bottom: 20px;
font-size: 1.9em;
}



.blog-item .article-image{
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
}
#blog-wrap #article-header{
margin-bottom: 20px;
}

#blog-wrap #article-footer{
}

/* Disqus stuffs */
#disqus_thread{
margin-bottom: 0px;
margin-top: 40px;
}

#dsq-footer{
margin: 0px;
}
}
}

#sidebar{
Expand Down Expand Up @@ -40,90 +120,3 @@
}
}

#blog-wrap #article-header{
margin-bottom: 20px;
}

#blog-wrap #article-footer{
}


.blog-item{
margin-bottom: 40px;
}

.blog-item.last{
margin-bottom: 20px;
}

.blog-item .title-bar{
/* border-bottom: 1px solid #ccc; */
}

.blog-item .title{
font-size: 2em;
margin-bottom: 5px;
margin-top: 0px;
}

.blog-item .subtitle{
font-size: 0.9em;
color: #888;
}

.blog-item .content{
/* margin-left: 20px; */
}

.blog-item .content h1{
margin-top: 40px;
margin-bottom: 20px;
font-size: 1.9em;
}

.blog-item #title-img-wrap{
text-align: center;
margin-top: 10px;
margin-bottom: 40px;
}

.blog-item #title-img, .title-img{
border: 1px solid #CCC;
box-shadow: 3px 4px 6px 1px #aaa;
-moz-box-shadow: 3px 4px 6px 1px #aaa;
-webkit-box-shadow: 3px 4px 6px 1px #aaa;
}

.blog-item .article-image{
text-align: center;
margin-top: 10px;
margin-bottom: 10px;
}

/* Disqus stuffs */
#disqus_thread{
margin-bottom: 0px;
margin-top: 40px;
}
#dsq-footer{
margin: 0px;
}

/* article list */
#blog-wrap #blog-list .blog-item td.title-img-wrap{
vertical-align: top;
padding-right: 20px;
width: 100px;
}
#blog-wrap #blog-list .blog-item td.text{
vertical-align: top;
}
#blog-wrap #blog-list .blog-item h1.title{
font-size: 1.5em;
}

#blog-wrap #blog-list .blog-item table{
margin: 0px;
border-spacing: 0px;
}

10 changes: 3 additions & 7 deletions templates/blog-list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@

<!-- blog list -->
{% if page.subpages %}
<div id='blog-list'>
<div id='list'>
{% for page in page.subpages|sort(attribute='datetime', reverse=True) %}
<div class='blog-item {% if loop.last %}last{% endif %}'>
<div class='article {% if loop.last %}last{% endif %}'>
<div class='{% for tag in page.tags %}{{nospace(tag)}} {% endfor %}'>
<table>
<tr>
<td class='title-img-wrap'>
{% if page.title_img_thumb %}
<a href='{{page.url}}'>
<img class='title-img' src='{{page.title_img_thumb}}'>
<img src='{{page.title_img_thumb}}'>
</a>
{% endif %}
</td>
Expand Down Expand Up @@ -46,10 +46,6 @@ <h1 class='title'>
{% endif %}
</div>
</div>

<div class='snippet'>
{{page.original|truncate}}
</div>
</td>
</tr>
</table>
Expand Down

0 comments on commit ea8f600

Please sign in to comment.