Brandon Mathis
14 years ago
15 changed files with 728 additions and 13 deletions
@ -0,0 +1,161 @@ |
|||||
|
# Jekyll category page generator. |
||||
|
# http://recursive-design.com/projects/jekyll-plugins/ |
||||
|
# |
||||
|
# Version: 0.1.4 (201101061053) |
||||
|
# |
||||
|
# Copyright (c) 2010 Dave Perrett, http://recursive-design.com/ |
||||
|
# Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php) |
||||
|
# |
||||
|
# A generator that creates category pages for jekyll sites. |
||||
|
# |
||||
|
# To use it, simply drop this script into the _plugins directory of your Jekyll site. You should |
||||
|
# also create a file called 'category_index.html' in the _layouts directory of your jekyll site |
||||
|
# with the following contents (note: you should remove the leading '# ' characters): |
||||
|
# |
||||
|
# ================================== COPY BELOW THIS LINE ================================== |
||||
|
# --- |
||||
|
# layout: default |
||||
|
# --- |
||||
|
# |
||||
|
# <h1 class="category">{{ page.title }}</h1> |
||||
|
# <ul class="posts"> |
||||
|
# {% for post in site.categories[page.category] %} |
||||
|
# <div>{{ post.date | date_to_html_string }}</div> |
||||
|
# <h2><a href="{{ post.url }}">{{ post.title }}</a></h2> |
||||
|
# <div class="categories">Filed under {{ post.categories | category_links }}</div> |
||||
|
# {% endfor %} |
||||
|
# </ul> |
||||
|
# ================================== COPY ABOVE THIS LINE ================================== |
||||
|
# |
||||
|
# You can alter the _layout_ setting if you wish to use an alternate layout, and obviously you |
||||
|
# can change the HTML above as you see fit. |
||||
|
# |
||||
|
# When you compile your jekyll site, this plugin will loop through the list of categories in your |
||||
|
# site, and use the layout above to generate a page for each one with a list of links to the |
||||
|
# individual posts. |
||||
|
# |
||||
|
# Included filters : |
||||
|
# - category_links: Outputs the list of categories as comma-separated <a> links. |
||||
|
# - date_to_html_string: Outputs the post.date as formatted html, with hooks for CSS styling. |
||||
|
# |
||||
|
# Available _config.yml settings : |
||||
|
# - category_dir: The subfolder to build category pages in (default is 'categories'). |
||||
|
# - category_title_prefix: The string used before the category name in the page title (default is |
||||
|
# 'Category: '). |
||||
|
module Jekyll |
||||
|
|
||||
|
|
||||
|
# The CategoryIndex class creates a single category page for the specified category. |
||||
|
class CategoryIndex < Page |
||||
|
|
||||
|
# Initializes a new CategoryIndex. |
||||
|
# |
||||
|
# +base+ is the String path to the <source>. |
||||
|
# +category_dir+ is the String path between <source> and the category folder. |
||||
|
# +category+ is the category currently being processed. |
||||
|
def initialize(site, base, category_dir, category) |
||||
|
@site = site |
||||
|
@base = base |
||||
|
@dir = category_dir |
||||
|
@name = 'index.html' |
||||
|
self.process(@name) |
||||
|
# Read the YAML data from the layout page. |
||||
|
self.read_yaml(File.join(base, '_layouts'), 'category_index.html') |
||||
|
self.data['category'] = category |
||||
|
# Set the title for this page. |
||||
|
title_prefix = site.config['category_title_prefix'] || 'Category: ' |
||||
|
self.data['title'] = "#{title_prefix}#{category}" |
||||
|
# Set the meta-description for this page. |
||||
|
meta_description_prefix = site.config['category_meta_description_prefix'] || 'Category: ' |
||||
|
self.data['description'] = "#{meta_description_prefix}#{category}" |
||||
|
end |
||||
|
|
||||
|
end |
||||
|
|
||||
|
|
||||
|
# The Site class is a built-in Jekyll class with access to global site config information. |
||||
|
class Site |
||||
|
|
||||
|
# Creates an instance of CategoryIndex for each category page, renders it, and |
||||
|
# writes the output to a file. |
||||
|
# |
||||
|
# +category_dir+ is the String path to the category folder. |
||||
|
# +category+ is the category currently being processed. |
||||
|
def write_category_index(category_dir, category) |
||||
|
index = CategoryIndex.new(self, self.source, category_dir, category) |
||||
|
index.render(self.layouts, site_payload) |
||||
|
index.write(self.dest) |
||||
|
# Record the fact that this page has been added, otherwise Site::cleanup will remove it. |
||||
|
self.pages << index |
||||
|
end |
||||
|
|
||||
|
# Loops through the list of category pages and processes each one. |
||||
|
def write_category_indexes |
||||
|
if self.layouts.key? 'category_index' |
||||
|
dir = self.config['category_dir'] || 'categories' |
||||
|
self.categories.keys.each do |category| |
||||
|
self.write_category_index(File.join(dir, category.gsub(/_|\W/, '-')), category) |
||||
|
end |
||||
|
|
||||
|
# Throw an exception if the layout couldn't be found. |
||||
|
else |
||||
|
throw "No 'category_index' layout found." |
||||
|
end |
||||
|
end |
||||
|
|
||||
|
end |
||||
|
|
||||
|
|
||||
|
# Jekyll hook - the generate method is called by jekyll, and generates all of the category pages. |
||||
|
class GenerateCategories < Generator |
||||
|
safe true |
||||
|
priority :low |
||||
|
|
||||
|
def generate(site) |
||||
|
site.write_category_indexes |
||||
|
end |
||||
|
|
||||
|
end |
||||
|
|
||||
|
|
||||
|
# Adds some extra filters used during the category creation process. |
||||
|
module Filters |
||||
|
|
||||
|
# Outputs a list of categories as comma-separated <a> links. This is used |
||||
|
# to output the category list for each post on a category page. |
||||
|
# |
||||
|
# +categories+ is the list of categories to format. |
||||
|
# |
||||
|
# Returns string |
||||
|
# |
||||
|
def category_links(categories) |
||||
|
categories = categories.sort!.map do |item| |
||||
|
"<a class='category' href='/#{@context.registers[:site].config['category_dir']}/#{item.gsub(/_|\W/, '-')}'/>#{item}</a>" |
||||
|
end |
||||
|
|
||||
|
case categories.length |
||||
|
when 0 |
||||
|
"" |
||||
|
when 1 |
||||
|
categories[0].to_s |
||||
|
else |
||||
|
"#{categories[0...-1].join(', ')}, #{categories[-1]}" |
||||
|
end |
||||
|
end |
||||
|
|
||||
|
# Outputs the post.date as formatted html, with hooks for CSS styling. |
||||
|
# |
||||
|
# +date+ is the date object to format as HTML. |
||||
|
# |
||||
|
# Returns string |
||||
|
def date_to_html_string(date) |
||||
|
result = '<span class="month">' + date.strftime('%b').upcase + '</span> ' |
||||
|
result += date.strftime('<span class="day">%d</span> ') |
||||
|
result += date.strftime('<span class="year">%Y</span> ') |
||||
|
result |
||||
|
end |
||||
|
|
||||
|
end |
||||
|
|
||||
|
end |
||||
|
|
||||
@ -0,0 +1,5 @@ |
|||||
|
@import "base/utilities"; |
||||
|
@import "base/solarized"; |
||||
|
@import "base/theme"; |
||||
|
@import "base/layout"; |
||||
|
@import "base/typography"; |
||||
@ -0,0 +1,7 @@ |
|||||
|
@import "partials/header"; |
||||
|
@import "partials/navigation"; |
||||
|
@import "partials/blog"; |
||||
|
@import "partials/syntax"; |
||||
|
@import "partials/archive"; |
||||
|
@import "partials/sidebar"; |
||||
|
@import "partials/footer"; |
||||
@ -0,0 +1,134 @@ |
|||||
|
$max-width: 1200px !default; |
||||
|
|
||||
|
// Padding used for layout margins |
||||
|
$pad-min: 18px !default; |
||||
|
$pad-narrow: 25px !default; |
||||
|
$pad-medium: 35px !default; |
||||
|
$pad-wide: 55px !default; |
||||
|
|
||||
|
// Sidebar widths used in media queries |
||||
|
$sidebar-width-medium: 240px !default; |
||||
|
$sidebar-pad-medium: 15px !default; |
||||
|
$sidebar-pad-wide: 20px !default; |
||||
|
$sidebar-width-wide: 300px !default; |
||||
|
|
||||
|
.group { @include pie-clearfix; } |
||||
|
|
||||
|
body { |
||||
|
-webkit-text-size-adjust: none; |
||||
|
max-width: $max-width; |
||||
|
position: relative; |
||||
|
margin: 0 auto; |
||||
|
> header, > nav, > footer, #articles > article, #articles > nav { |
||||
|
@extend .group; |
||||
|
padding-left: $pad-min; |
||||
|
padding-right: $pad-min; |
||||
|
@media only screen and (min-width: 480px) { |
||||
|
padding-left: $pad-narrow; |
||||
|
padding-right: $pad-narrow; |
||||
|
} |
||||
|
@media only screen and (min-width: 768px) { |
||||
|
padding-left: $pad-medium; |
||||
|
padding-right: $pad-medium; |
||||
|
} |
||||
|
@media only screen and (min-width: 992px) { |
||||
|
padding-left: $pad-wide; |
||||
|
padding-right: $pad-wide; |
||||
|
} |
||||
|
} |
||||
|
> header { |
||||
|
font-size: 1em; |
||||
|
padding-top: 1.5em; |
||||
|
padding-bottom: 1.5em; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.toggle-sidebar { display: none; } |
||||
|
#articles { width: 100%; |
||||
|
+ aside { |
||||
|
float: none; |
||||
|
padding: 0 $pad-min 1px; |
||||
|
background-color: $sidebar-bg; |
||||
|
border-top: 1px solid $sidebar-border; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media only screen and (min-width: 550px) { |
||||
|
body > header { font-size: 1em; } |
||||
|
} |
||||
|
@media only screen and (min-width: 768px) { |
||||
|
body { -webkit-text-size-adjust: auto; } |
||||
|
body > header { font-size: 1.2em; } |
||||
|
body > nav { |
||||
|
+ div { |
||||
|
@extend .group; |
||||
|
padding: 0; |
||||
|
margin: 0 auto; |
||||
|
> div { |
||||
|
@extend .group; |
||||
|
margin-right: $sidebar-width-medium; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
#articles { |
||||
|
padding-top: $pad-medium/2; |
||||
|
padding-bottom: $pad-medium/2; |
||||
|
float: left; |
||||
|
+ aside { |
||||
|
width: $sidebar-width-medium - $sidebar-pad-medium*2; |
||||
|
padding: 0 $sidebar-pad-medium $sidebar-pad-medium; |
||||
|
background: none; |
||||
|
float: left; |
||||
|
margin: 0 -100% 0 0; |
||||
|
} |
||||
|
} |
||||
|
body > div > div { position: relative; } |
||||
|
|
||||
|
.collapse-sidebar { |
||||
|
> div > div { margin-right: 10px; } |
||||
|
#articles + aside { |
||||
|
display: none; |
||||
|
} |
||||
|
.toggle-sidebar { |
||||
|
right: -1px; |
||||
|
background-color: $sidebar-bg; |
||||
|
border-right-width: 0; |
||||
|
text-indent: 2px; |
||||
|
border-left: 1px solid $sidebar-border; |
||||
|
@include border-bottom-right-radius(0); |
||||
|
@include border-bottom-left-radius(.3em); |
||||
|
@include link-colors(#aaa, #888); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.toggle-sidebar { |
||||
|
outline: none; |
||||
|
position: absolute; right: -21px; top: 0; |
||||
|
width: 20px; |
||||
|
font-size: 1.2em; |
||||
|
line-height: 1.1em; |
||||
|
padding-bottom: .1em; |
||||
|
text-indent: -1px; |
||||
|
text-decoration: none; |
||||
|
@include link-colors(#ccc, #999); |
||||
|
@include border-bottom-right-radius(.3em); |
||||
|
text-align: center; |
||||
|
background: $main-bg; |
||||
|
border-bottom: 1px solid $sidebar-border; |
||||
|
border-right: 1px solid $sidebar-border; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@media only screen and (min-width: 992px) { |
||||
|
body > header { font-size: 1.3em; } |
||||
|
body > nav + div > div { margin-right: $sidebar-width-wide; } |
||||
|
#articles { |
||||
|
padding-top: $pad-wide/2; |
||||
|
padding-bottom: $pad-wide/2; |
||||
|
+ aside { |
||||
|
width: $sidebar-width-wide - $sidebar-pad-wide*2; |
||||
|
padding: 1.2em $sidebar-pad-wide $sidebar-pad-wide; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,16 @@ |
|||||
|
$base03: #002b36; //darkest blue |
||||
|
$base02: #073642; //dark blue |
||||
|
$base01: #586e75; //darkest gray |
||||
|
$base00: #657b83; //dark gray |
||||
|
$base0: #839496; //medium gray |
||||
|
$base1: #93a1a1; //medium light gray |
||||
|
$base2: #eee8d5; //cream |
||||
|
$base3: #fdf6e3; //white |
||||
|
$yellow: #b58900; |
||||
|
$orange: #cb4b16; |
||||
|
$red: #dc322f; |
||||
|
$magenta: #d33682; |
||||
|
$violet: #6c71c4; |
||||
|
$blue: #268bd2; |
||||
|
$cyan: #2aa198; |
||||
|
$green: #859900; |
||||
@ -0,0 +1,76 @@ |
|||||
|
$img-border: inline-image('dotted-border.png'); |
||||
|
|
||||
|
// Main Link Colors |
||||
|
$link-color: lighten(#165b94, 3) !default; |
||||
|
$link-color-hover: adjust-hue($link-color, -200) !default; |
||||
|
$link-color-visited: darken(adjust_hue($link_color, 70), 10) !default; |
||||
|
$link-color-active: darken($link-color-hover, 15) !default; |
||||
|
|
||||
|
// Main Section Colors |
||||
|
$page-bg: #252525 !default; |
||||
|
$article-border: #eeeeee !default; |
||||
|
$main-bg: #f5f5f5 !default; |
||||
|
|
||||
|
$header-bg: #333 !default; |
||||
|
$header-border: lighten($header-bg, 15) !default; |
||||
|
$title-color: #f2f2f2 !default; |
||||
|
$subtitle-color: #aaa !default; |
||||
|
|
||||
|
$text-color: #222 !default; |
||||
|
$text-color-light: #aaa !default; |
||||
|
$type-border: #ddd !default; |
||||
|
|
||||
|
|
||||
|
/* Navigation */ |
||||
|
$nav-bg: #ccc !default; |
||||
|
$nav-color: darken($nav-bg, 38) !default; |
||||
|
$nav-color-hover: darken($nav-color, 25) !default; |
||||
|
$nav-placeholder: desaturate(darken($nav-bg, 10), 15) !default; |
||||
|
$nav-border: darken($nav-bg, 10) !default; |
||||
|
$nav-border-top: lighten($nav-bg, 15) !default; |
||||
|
$nav-border-bottom: darken($nav-bg, 25) !default; |
||||
|
$nav-border-left: darken($nav-bg, 11) !default; |
||||
|
$nav-border-right: lighten($nav-bg, 7) !default; |
||||
|
|
||||
|
/* Sidebar colors */ |
||||
|
$sidebar-bg: #eee !default; |
||||
|
$sidebar-link-color: $link-color !default; |
||||
|
$sidebar-link-color-hover: $link-color-hover !default; |
||||
|
$sidebar-color: change-color(mix($text-color, $sidebar-bg, 80), $hue: hue($sidebar-bg), $saturation: saturation($sidebar-bg)/2) !default; |
||||
|
$sidebar-border: desaturate(darken($sidebar-bg, 7), 10) !default; |
||||
|
$sidebar-border: darken($sidebar-bg, 7) !default; |
||||
|
$sidebar-link-color-subdued: lighten($sidebar-color, 20) !default; |
||||
|
$sidebar-link-color-subdued-hover: $sidebar-link-color-hover !default; |
||||
|
$twitter-status-link: lighten($sidebar-link-color-subdued, 15) !default; |
||||
|
|
||||
|
$footer-color: #888 !default; |
||||
|
$footer-bg: #ccc !default; |
||||
|
$footer-color: darken($footer-bg, 38) !default; |
||||
|
$footer-color-hover: darken($footer-color, 10) !default; |
||||
|
$footer-border-top: lighten($footer-bg, 15) !default; |
||||
|
$footer-border-bottom: darken($footer-bg, 15) !default; |
||||
|
$footer-link-color: darken($footer-bg, 38) !default; |
||||
|
$footer-link-color-hover: darken($footer-color, 25) !default; |
||||
|
$page-border-bottom: darken($footer-bg, 5) !default; |
||||
|
|
||||
|
|
||||
|
/* Core theme application */ |
||||
|
|
||||
|
article a, #articles + aside a { |
||||
|
@include link-colors($link-color, $hover: $link-color-hover, $focus: $link-color-hover, $visited: $link-color-visited, $active: $link-color-active); |
||||
|
} |
||||
|
a { @include transition(color, .5s); } |
||||
|
|
||||
|
html { |
||||
|
background: $page-bg image-url('line-tile.png') top left; |
||||
|
} |
||||
|
body { |
||||
|
> div { |
||||
|
background: $sidebar-bg image-url('noise.png') top left; |
||||
|
border-bottom: 1px solid $page-border-bottom; |
||||
|
> div { |
||||
|
background: $main-bg image-url('noise.png') top left; |
||||
|
border-right: 1px solid $sidebar-border; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,130 @@ |
|||||
|
$blockquote: $type-border !default; |
||||
|
$mono: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; |
||||
|
|
||||
|
// Fonts |
||||
|
.heading { |
||||
|
font-family: "PT Serif", "Georgia", "Helvetica Neue", Arial, sans-serif; |
||||
|
} |
||||
|
.sans { font-family: "PT Sans", "Helvetica Neue", Arial, sans-serif; } |
||||
|
.serif { font-family: "PT Serif", Georgia, Times, "Times New Roman", serif; } |
||||
|
.mono { font-family: $mono; } |
||||
|
|
||||
|
body > header h1 { |
||||
|
font-size: 2.6em; |
||||
|
@extend .heading; |
||||
|
font-weight: normal; |
||||
|
line-height: 1.2em; |
||||
|
margin-bottom: 0.6667em; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
line-height: 1.5em; |
||||
|
color: $text-color; |
||||
|
@extend .serif; |
||||
|
} |
||||
|
|
||||
|
#{headings()}{ |
||||
|
@extend .heading; |
||||
|
text-rendering: optimizelegibility; |
||||
|
margin-bottom: 1em; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
h1 { |
||||
|
font-size: 3.2em; |
||||
|
line-height: 1.2em; |
||||
|
@media only screen and (max-width: 768px) { font-size: 2.2em; } |
||||
|
} |
||||
|
|
||||
|
|
||||
|
h2, section h1 { |
||||
|
font-size: 1.5em; |
||||
|
} |
||||
|
h3, section h2, section section h1 { |
||||
|
font-size: 1.3em; |
||||
|
} |
||||
|
h4, section h3, section section h2, section section section h1 { |
||||
|
font-size: 1em; |
||||
|
} |
||||
|
h5, section h4, section section h3 { |
||||
|
font-size: .9em; |
||||
|
} |
||||
|
h6, section h5, section section h4, section section section h3 { |
||||
|
font-size: .8em; |
||||
|
} |
||||
|
p, blockquote, ul, ol { margin-bottom: 1.5em; } |
||||
|
|
||||
|
ul{ list-style-type: circle; } |
||||
|
|
||||
|
ol{ list-style-type: decimal; ol { list-style-type: lower-alpha; } } |
||||
|
ul ul, ol ol { margin-left: 1.75em; } |
||||
|
|
||||
|
strong { font-weight: bold; } |
||||
|
|
||||
|
em { font-style: italic; } |
||||
|
|
||||
|
sup, sub { font-size: 0.8em; position: relative; display: inline-block; } |
||||
|
sup { top: -.5em; } |
||||
|
sub { bottom: -.5em; } |
||||
|
|
||||
|
q { font-style: italic; |
||||
|
&:before { content: "\201C"; } |
||||
|
&:after { content: "\201D"; } |
||||
|
} |
||||
|
|
||||
|
em, dfn { font-style: italic; } |
||||
|
|
||||
|
strong, dfn { font-weight: bold; } |
||||
|
|
||||
|
del, s { text-decoration: line-through; } |
||||
|
|
||||
|
abbr, acronym { border-bottom: 1px dotted; cursor: help; } |
||||
|
|
||||
|
pre, code, tt { @extend .mono-font; } |
||||
|
|
||||
|
sub, sup { line-height: 0; } |
||||
|
|
||||
|
hr { margin-bottom: 0.2em; } |
||||
|
|
||||
|
small { font-size: .8em; } |
||||
|
|
||||
|
big { font-size: 1.2em; } |
||||
|
|
||||
|
blockquote { |
||||
|
$bq-margin: 1.2em; |
||||
|
font-style: italic; |
||||
|
position: relative; |
||||
|
font-size: 1.2em; |
||||
|
line-height: 1.5em; |
||||
|
padding-left: 1em; |
||||
|
border-left: 4px solid rgba($text-color-light, .5); |
||||
|
cite { |
||||
|
font-style: italic; |
||||
|
a { color: $text-color-light !important; word-wrap: break-word; } |
||||
|
&:before { content: '–'; padding:{right: .3em; left: .3em;} color: $text-color-light; } |
||||
|
} |
||||
|
@media only screen and (min-width: 992px) { |
||||
|
padding-left: 1.5em; |
||||
|
border-left-width: 4px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.has-pullquote:before { |
||||
|
/* Reset metrics. */ |
||||
|
padding: 0; |
||||
|
border: none; |
||||
|
|
||||
|
/* Content */ |
||||
|
content: attr(data-pullquote); |
||||
|
|
||||
|
/* Pull out to the right, modular scale based margins. */ |
||||
|
float: right; |
||||
|
width: 45%; |
||||
|
margin: .5em 0 1em 1.5em; |
||||
|
|
||||
|
/* Baseline correction */ |
||||
|
position: relative; |
||||
|
top: 7px; |
||||
|
font-size: 1.4em; |
||||
|
line-height: 1.45em; |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,21 @@ |
|||||
|
@mixin mask-image($img, $repeat: no-repeat){ |
||||
|
@include experimental(mask-image, image-url($img), -webkit, -moz, -o, -ms); |
||||
|
@include experimental(mask-repeat, $repeat, -webkit, -moz, -o, -ms); |
||||
|
width: image-width($img); |
||||
|
height: image-height($img); |
||||
|
} |
||||
|
|
||||
|
@mixin selection($bg, $color: inherit, $text-shadow: none){ |
||||
|
* { |
||||
|
&::-moz-selection { background: $bg; color: $color; text-shadow: $text-shadow; } |
||||
|
&::-webkit-selection { background: $bg; color: $color; text-shadow: $text-shadow; } |
||||
|
&::selection { background: $bg; color: $color; text-shadow: $text-shadow; } |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@function text-color($color, $dark: dark, $light: light){ |
||||
|
$text-color: ( (red($color)*299) + (green($color)*587) + (blue($color)*114) ) / 1000; |
||||
|
$text-color: if($text-color >= 150, $dark, $light); |
||||
|
@return $text-color; |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,72 @@ |
|||||
|
#articles .blog-archives { |
||||
|
article { |
||||
|
padding: 1em 0 1em; |
||||
|
position: relative; |
||||
|
background: $img-border bottom left repeat-x; |
||||
|
&:last-child { |
||||
|
background: none; |
||||
|
} |
||||
|
} |
||||
|
h2 { |
||||
|
background: none; |
||||
|
display: none; |
||||
|
} |
||||
|
h1, h2 { color: $text-color; margin-bottom: .3em; } |
||||
|
h1 { |
||||
|
font-size: 1.5em; |
||||
|
a { |
||||
|
@include hover-link; |
||||
|
color: inherit; |
||||
|
&:hover { color: $link-color-hover; } |
||||
|
font-weight: normal; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
} |
||||
|
a.category, time { |
||||
|
@extend .sans; |
||||
|
color: $text-color-light; |
||||
|
} |
||||
|
color: $text-color-light; |
||||
|
.entry-content { display: none; } |
||||
|
time { |
||||
|
font-size: .9em; |
||||
|
line-height: 1em; |
||||
|
.month, .day { display: inline-block; } |
||||
|
.month { text-transform: uppercase; } |
||||
|
} |
||||
|
p { margin-bottom: 1em; } |
||||
|
&, .entry-content { a { @include link-colors(inherit, $link-color-hover); }} |
||||
|
a:hover { color: $link-color-hover; } |
||||
|
@media only screen and (min-width: 550px) { |
||||
|
article { margin-left: 5em; } |
||||
|
h2 { |
||||
|
background: none; |
||||
|
display: inline-block; |
||||
|
float: left; |
||||
|
padding-top: .75em; |
||||
|
&:first-child { padding-top: .75em; } |
||||
|
} |
||||
|
time { |
||||
|
position: absolute; |
||||
|
text-align: right; |
||||
|
left: 0em; |
||||
|
top: 1.8em; |
||||
|
} |
||||
|
.year { display: none; } |
||||
|
article { |
||||
|
padding:{left: 4.5em; bottom: .7em;} |
||||
|
} |
||||
|
a.category { |
||||
|
//text-align: right; |
||||
|
line-height: 1.1em; |
||||
|
//float: right; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
#articles .blog-archives.category { |
||||
|
article { |
||||
|
margin-left: 0; |
||||
|
padding-left: 6.8em; |
||||
|
} |
||||
|
.year { display: inline; } |
||||
|
} |
||||
@ -1,13 +0,0 @@ |
|||||
html { |
|
||||
background: $page-bg image-url('line-tile.png') top left; |
|
||||
} |
|
||||
body { |
|
||||
> div { |
|
||||
background: $sidebar-bg image-url('noise.png') top left; |
|
||||
border-bottom: 1px solid $page-border-bottom; |
|
||||
> div { |
|
||||
background: $main-bg image-url('noise.png') top left; |
|
||||
border-right: 1px solid $sidebar-border; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -0,0 +1,56 @@ |
|||||
|
.side-shadow-border { |
||||
|
@include box-shadow(lighten($sidebar-bg, 5) 0 1px); |
||||
|
} |
||||
|
#articles + aside { |
||||
|
color: $sidebar-color; |
||||
|
padding-top: 1.2em; |
||||
|
text-shadow: lighten($sidebar-bg, 8) 0 1px; |
||||
|
section { |
||||
|
@extend .sans; |
||||
|
font-size: .8em; |
||||
|
line-height: 1.4em; |
||||
|
margin-bottom: 1.5em; |
||||
|
h1 { |
||||
|
margin: 1.5em 0 0; |
||||
|
padding-bottom: .2em; |
||||
|
border-bottom: 1px solid $sidebar-border; |
||||
|
@extend .side-shadow-border; |
||||
|
+ p { |
||||
|
padding-top: .4em; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
ul { |
||||
|
margin-bottom: 0.5em; |
||||
|
} |
||||
|
li { |
||||
|
list-style: none; |
||||
|
padding: .5em 0; |
||||
|
margin: 0; |
||||
|
border-bottom: 1px solid $sidebar-border; |
||||
|
@extend .side-shadow-border; |
||||
|
p:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
} |
||||
|
a { |
||||
|
color: inherit; |
||||
|
@include transition(color, .5s); |
||||
|
} |
||||
|
&:hover a, &:hover #tweets a { color: $sidebar-link-color; |
||||
|
&:hover { color: $sidebar-link-color-hover; } |
||||
|
} |
||||
|
#recent_posts { |
||||
|
time { |
||||
|
text-transform: uppercase; |
||||
|
font-size: .9em; |
||||
|
color: #666; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.aside-alt-link { |
||||
|
color: $sidebar-link-color-subdued; |
||||
|
&:hover { |
||||
|
color: $sidebar-link-color-subdued-hover; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,4 @@ |
|||||
|
.delicious-posts { |
||||
|
a.delicious-link { margin-bottom: .5em; display: block; } |
||||
|
p { font-size: 1em; } |
||||
|
} |
||||
@ -0,0 +1,12 @@ |
|||||
|
#pinboard_linkroll { |
||||
|
.pin-title, .pin-description { |
||||
|
display: block; |
||||
|
margin-bottom: .5em; |
||||
|
} |
||||
|
.pin-tag { |
||||
|
@include hover-link; |
||||
|
@extend .aside-alt-link; |
||||
|
&:after { content: ','; } |
||||
|
&:last-child:after { content: ''; } |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,33 @@ |
|||||
|
#tweets { |
||||
|
.loading { |
||||
|
background: inline-image('bird_32_gray.png') no-repeat center .5em; |
||||
|
color: darken($sidebar-bg, 18); |
||||
|
text-shadow: $main-bg 0 1px; |
||||
|
text-align: center; |
||||
|
padding: 2.5em 0 .5em; |
||||
|
&.error { |
||||
|
background: inline-image('bird_32_gray_fail.png') no-repeat center .5em; |
||||
|
} |
||||
|
} |
||||
|
a { color: $sidebar-link-color-subdued; @include hover-link; } |
||||
|
p { |
||||
|
position: relative; |
||||
|
padding-right: 1em; |
||||
|
} |
||||
|
a[href*=status]{ |
||||
|
color: $twitter-status-link; |
||||
|
float: right; |
||||
|
padding: 0 0 .1em 1em; |
||||
|
position: relative; right: -1.3em; |
||||
|
text-shadow: #fff 0 1px; |
||||
|
font-size: .7em; |
||||
|
span { font-size: 1.5em; } |
||||
|
&:hover { |
||||
|
color: $sidebar-link-color-subdued-hover; |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
} |
||||
|
a[href*='twitter.com/search']{ |
||||
|
@extend .aside-alt-link; |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue