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