Skip to content

Commit

Permalink
finished revising index pages
Browse files Browse the repository at this point in the history
  • Loading branch information
Keith Marran authored and Keith Marran committed Jan 20, 2013
1 parent c64a7de commit 4d1ab8e
Show file tree
Hide file tree
Showing 17 changed files with 729 additions and 447 deletions.
84 changes: 44 additions & 40 deletions _bootstrap/less/bootstrap.less
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,8 @@ h2,h3 { font-family: @displayFontFamily; color: @maroon; }
color: @cyan;
line-height: 1.2em;
margin: 20px 0;
position: relative;
position: relative;
-webkit-font-smoothing: antialiased;

#logo { font-size: 72px; line-height: 72px; color: @cyan; }
#about { font-size: 20px; line-height: 18px; color: @maroon; padding-top: 72px; }
Expand Down Expand Up @@ -128,8 +129,10 @@ h2,h3 { font-family: @displayFontFamily; color: @maroon; }

}

.first.row .title { font-size: 42px; line-height: 42px; }
.second.row .title { font-size: 36px; line-height: 42px; }
.first.row .title { font-size: 42px !important; line-height: 42px !important; }
.second.row .title { font-size: 36px !important; line-height: 42px !important; }
.third.row .title,
.fourth.row .title { font-size: 30px !important; line-height: 30px !important; }
.third.row .keyword,
.fourth.row .keyword { background-image: none; }

Expand Down Expand Up @@ -187,16 +190,33 @@ h2,h3 { font-family: @displayFontFamily; color: @maroon; }

&.selected { background: @grayLighter; }

a { color: @textColor; }
.title { font-family: @displayFontFamily; font-size: 18px; line-height: 22px; background: none; }
.title a { color: @maroon !important; }
a { color: @textColor; }
.title { font-family: @displayFontFamily; -webkit-font-smoothing: antialiased; font-size: 18px; line-height: 22px; background: none; }
.title a { color: @maroon !important; }
.timestamp { font-size: 11px; color: @grayLight; }
.date { display: none; }
.date { display: none; }

}

}

.index {

#main {
.title {
background: @orange url('/images/stripes-gold.png') no-repeat bottom right;
padding: 8px 12px 5px;
color: @white; font-family: @displayFontFamily; font-size: 36px; line-height: 36px; -webkit-font-smoothing: antialiased;
}

.teaser {
margin-top: 20px;
.title { background: none; padding: 0; line-height: 36px; color: inherit; margin: 0 0 8px; }
img { margin-top: 4px; }
}
}
}

.article {

.content { margin: 20px 0 40px; }
Expand All @@ -206,35 +226,17 @@ h2,h3 { font-family: @displayFontFamily; color: @maroon; }
padding: 8px 12px 5px;
color: @white; font-family: @displayFontFamily; font-size: 36px; line-height: 36px; -webkit-font-smoothing: antialiased;
}

}

#middle {

.series-box {
.box-header {
.title {
font-size: 36px; line-height: 28px; margin-top: 6px;
}
}

.series-item {
margin: 0 0 20px;
a { color: @maroon; }
.title { font-family: @displayFontFamily; font-size: 24px; line-height: 21px; margin-top: 6px; text-transform: uppercase; }
&.current { background: url('/images/red-dot.png') top left no-repeat; padding-left: 32px; }
.info { line-height: 1.4em; }
}

}

.next-box {
background: @grayLighter;
margin: 40px 0 10px;
padding: 12px;
.series-title { font-family: @displayFontFamily; text-transform: uppercase; font-size: 24px; text-decoration: none; margin: 8px 0 12px; }
.series-title { font-family: @displayFontFamily; -webkit-font-smoothing: antialiased; font-size: 24px; text-decoration: none; margin: 8px 0 12px; }
.help { margin: 4px 0; }
.next-link { margin: 8px 0 4px; }
.title { font-size: 36px !important; line-height: 36px; font-family: @displayFontFamily; text-transform: uppercase; margin: 0 0 8px; background: none; padding: 0; color: inherit; }
.title { font-size: 36px !important; line-height: 36px; font-family: @displayFontFamily; -webkit-font-smoothing: antialiased; margin: 0 0 8px; background: none; padding: 0; color: inherit; }
.title a { color: @maroon; }
}

Expand All @@ -261,7 +263,7 @@ h2,h3 { font-family: @displayFontFamily; color: @maroon; }
}

.related-post { margin-bottom: 1.5em; }
.related-title a { font-family: @displayFontFamily; text-transform: uppercase; font-size: 24px; line-height: 21px; text-decoration: none; color: @navy; }
.related-title a { font-family: @displayFontFamily; -webkit-font-smoothing: antialiased; text-transform: uppercase; font-size: 24px; line-height: 21px; text-decoration: none; color: @navy; }
.related-meta {
font-size: 11px;
.timeago { color: @grayLight; margin-right: 8px; }
Expand All @@ -271,7 +273,7 @@ h2,h3 { font-family: @displayFontFamily; color: @maroon; }
.category-index {
h1 { font-size: 24px; }
img { width: 100%; border: 1px solid @navy; margin: 10px 0 !important; }
.title { font-size: 24px !important; font-family: @displayFontFamily; text-transform: uppercase; }
.title { font-size: 24px !important; font-family: @displayFontFamily; -webkit-font-smoothing: antialiased; text-transform: uppercase; }
.title a { color: @navy; text-decoration: none; }
}

Expand Down Expand Up @@ -301,20 +303,21 @@ h2,h3 { font-family: @displayFontFamily; color: @maroon; }
padding: 20px 0 36px;
border-top: 1px dotted @cyan;
font-family: @displayFontFamily;
color: @cyan;
-webkit-font-smoothing: antialiased;
color: @orange;
font-size: 20px;
}
}

.pager {
margin: 0 !important;
margin: 20px 0 !important;
a, span {
padding: 5px 14px;
background-color: @babyblue;
border: 1px solid @navy;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 0;
background: none;
border: none;
font-family: @displayFontFamily;
font-size: 18px;
-webkit-font-smoothing: antialiased;
}
}

Expand Down Expand Up @@ -347,8 +350,9 @@ h2,h3 { font-family: @displayFontFamily; color: @maroon; }

.download-box {
margin: 20px 0 20px 40px;
.icon-download { margin-right: 4px; }
.details { font-size: 11px; margin-left: 20px; }
.icon-download { margin-right: 8px; }
.details { font-size: 11px; margin-left: 24px; }
.title { background: none !important; font-size: 14px !important; font-family: @baseFontFamily !important; padding: 0 !important; }
}

.read-more { margin-top: 6px; }
141 changes: 100 additions & 41 deletions _layouts/category_index.html
Original file line number Diff line number Diff line change
@@ -1,55 +1,114 @@
---
layout: default
layout: html
---
<div class="category-index row">

<div class="span8">

<div class="box">
<div class="box-header">
<div class="box-header-left clearfix">
<div class="box-title title"><h1>{{ page.title }}</h1></div>
</div>
<div class="box-header-right"></div>
</div>
<div class="box-middle">
<div class="box-middle-left">
<body class="index categories">

{% include header.html %}

<div id="middle">

<div class="container">

<div class="row">

<div class="span8">
<div id="main">

<div class="title">{{ page.title }}</div>

<div class="content">

{% for post in paginator.posts %}

<div class="teaser">

<div class="title"><a href="{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></div>
<div class="meta"><span class="timeago">{{ post.date | time_ago }}</span>{{ post.tags | tag_links }}</div>

<div class="row">

{% if (post.images) %}
<div class="span3">
<a href="{{ post.url }}" title="{{ post.title }}"><img src="{{ post.images[0] | format_teaser_image }}" /></a>
</div>
<div class="span4">
{% else %}
<div class="span7">
{% endif %}

<div class="description">{{ post.description }}</div>
<div class="read-more"><a href="{{ post.url }}" title="{{ post.title }}">Get the whole story... »</a></div>
</div>

</div>
{% if post.images %}

<div class="teaser">
<div class="row">
<div class="span2">
<div class="image"><a href="{{ post.url }}" title="{{ post.title }}"><img src="{{ post.images[0] | format_teaser_image }}" /></a></div>
</div>
<div class="span6">
<div class="title"><a href="{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></div>
<div class="description">{{ post.description }}</div>
<div class="read-more"><a href="{{ post.url }}" title="{{ post.title }}">There's more? Yes! Let's go. »</a></div>
</div>
</div>
</div>

{% else %}

</div>
<div class="teaser">
<div class="row">
<div class="span8">
<div class="title"><a href="{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></div>
<div class="description">{{ post.description }}</div>
<div class="read-more"><a href="{{ post.url }}" title="{{ post.title }}">There's more? Yes! Let's go. »</a></div>
</div>
</div>
</div>

{% endif %}

{% endfor %}

{{ paginator | pager_links }}

</div>
<div class="box-middle-right"></div>
</div>

</div>
</div>

<div class="span4">
<div id="sidebar">

<div id="search">
<div class="header">Search</div>
<form method="get" class="form-search">
<input type="text" name="search-text" id="search-text">
</form>
</div>

<div id="statuses">
<div class="header">Off the cuff</div>

{% for post in site.categories['statuses'] limit:10 %}

<div class="teaser{% if (forloop.first) %} first{% endif %}">
<div class="timestamp"><script language="javascript">document.write($.timeago('{{ post.date }}'))</script></div>
<div class="description"><a href="{{ post.url }}">{{ post.content }}</a></div>

{% if (post.picture) %}

<div class="row">
<div class="span1"><div class="image"><img src="{{ post.picture }}" /></a></div></div>
{% if (post.link-info) %}
<div class="span3"><div class="info"><a href="{{ post.url }}">{{ post.link-info }}</a></div></div>
{% endif %}
</div>

{% endif %}


</div>

{% endfor %}

</div>

<div id="popular-tags">
<div class="header">Popular Tags</div>

{{ site.tags | popular_tags }}

</div>

</div>
</div>
</div>


</div>
</div>

</div>

{% include footer.html %}

</body>
67 changes: 4 additions & 63 deletions _layouts/default.html
Original file line number Diff line number Diff line change
@@ -1,64 +1,6 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{{ page.title }} | Keith Marran</title>
<meta name="author" content="Keith Marran" />
<link href="/atom.xml" rel="alternate" title="Keith Marran" type="application/atom+xml" />

<link rel="stylesheet" href="/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="/css/responsive.css" type="text/css" />
<link rel="stylesheet" href="/js/shadowbox-3.0.3/shadowbox.css" type="text/css">

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript" src="/js/porter-stemmer.js"></script>
<script type="text/javascript" src="/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/js/jquery.cookies.js"></script>
<script type="text/javascript" src="/js/site-search.js"></script>
<script type="text/javascript" src="/js/time-ago.js"></script>
<script type="text/javascript" src="/js/shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript" src="/js/link-helper.js"></script>
<script type="text/javascript" src="/js/offendable.js"></script>
<script type="text/javascript" src="/js/map.js"></script>

<meta property="og:site_name" content="Keith Marran"/>
<meta property="og:title" content="{{ page.title | strip_html }}"/>
{% if (page.description) %}<meta property="og:description" content="{{ page.description | strip_html }}"/>{% endif %}
{% if (page.images) %}<meta property="og:image" content="{{ page.images[0] | format_teaser_image }}"/>{% endif %}


<meta property="twitter:card" content="summary" />
<meta property="twitter:creator" content="@captaincanine" />
<meta property="twitter:url" content="{{ page.url | absolute_path }}" />
<meta property="twitter:title" content="{{ page.title | strip_html }}" />
{% if (page.description) %}<meta property="twitter:description" content="{{ page.description | strip_html }}" />{% endif %}
{% if (page.images) %}<meta property="twitter:image" content="{{ page.images[0] | format_teaser_image }}" />{% endif %}


<script type="text/javascript">
Shadowbox.init({
overlayOpacity: '0.9'
});
</script>

<script type="text/javascript">

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-359180-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>

</head>
---
layout: html
---
<body>

{% include header.html %}
Expand Down Expand Up @@ -128,5 +70,4 @@

{% include footer.html %}

</body>
</html>
</body>
Loading

0 comments on commit 4d1ab8e

Please sign in to comment.