18 | {% assign pages_list = category[1] %} 19 | {% include JB/pages_list %} 20 |

2 |

3 |

4 | {{ page.date | date_to_long_string }} 5 | {% if page.location %}{{ page.location }}{% endif %} 6 |

7 | {{ content }} 8 |

2 |

3 |

4 |

5 |

6 |

7 |

8 |

9 |

10 |

11 | 12 |

13 |

14 | {{ content }} 15 |

16 |

17 | 18 | 25 | 26 |

27 |

28 |

7 | 8 | {{ site.title }} 9 | 10 | 11 | {{ site.time | date_to_xmlschema }} 12 | {{ site.production_url }} 13 | 14 | {{ site.author.name }} 15 | {{ site.author.email }} 16 | 17 | 18 | {% for post in site.posts %} 19 | 20 | {{ post.title }} 21 | 22 | {{ post.date | date_to_xmlschema }} 23 | h{{ site.production_url }}{{ post.id }} 24 | {{ post.content | xml_escape }} 25 | 26 | {% endfor %} 27 | 28 |

2 | 3 |

4 |

5 | {% assign tags_list = page.tags %} 6 | {% include JB/tags_list %} 7 | 8 | 9 | {{ content }} 10 | 11 |

12 | {{ site.author.name }} 13 | {{ page.date | date_to_long_string }} 14 | {{ page.location }} 15 |

16 | 17 |

18 | {% if page.next %} 19 | Next Post → 20 | {% endif %} 21 | {% if page.previous %} 22 | ← Earlier Post 23 | {% endif %} 24 |

25 | 26 |

blog comments powered by Disqus

#{obj.class}\n#{obj.pretty_inspect}

8 | 9 | ## Version 10 | 11 | 0.1.0 - stable and versioned using [semantic versioning](http://semver.org/). 12 | 13 | ## Contributing 14 | 15 | This repository tracks 2 projects: 16 | 17 | - **Jekyll-Bootstrap Framework.** 18 | The framework for which users should clone and build their blog on top of is available in the master branch. 19 | Please fork and contribute additions to the framework itself here. 20 | 21 | - **Jekyll-Bootstrap Documentation Website.** 22 | The documentation website at is maintained in the gh-pages branch. 23 | Please fork and contribute documentation additions to this branch only. 24 | 25 | The master and gh-pages branch do not share the same ancestry. Please treat them as completely separate git repositories! 26 | 27 | 28 | ## License 29 | 30 | [Creative Commons](http://creativecommons.org/licenses/by-nc-sa/3.0/) 31 | -------------------------------------------------------------------------------- /_includes/JB/tags_list: -------------------------------------------------------------------------------- 1 | {% comment %}{% endcomment %} 19 | 20 | {% if site.JB.tags_list.provider == "custom" %} 21 | {% include custom/tags_list %} 22 | {% else %} 23 | {% if tags_list.first[0] == null %} 24 | {% for tag in tags_list %} 25 |

26 | {% endfor %} 27 | {% else %} 28 | {% for tag in tags_list %} 29 |

30 | {% endfor %} 31 | {% endif %} 32 | {% endif %} 33 | {% assign tags_list = nil %} 34 | -------------------------------------------------------------------------------- /_includes/themes/twitter/post.html: -------------------------------------------------------------------------------- 1 | 4 | 5 |

6 |

7 | {{ content }} 8 |

9 |

10 |

← Previous
← Previous
Archive
Next →
Next → 21 | {% endif %} 22 |

23 |

24 |

25 | {% include JB/comments %} 26 |

27 | 28 |

29 |

Published

30 |

31 | 32 | {% unless page.tags == empty %} 33 |

Tags

34 |

35 | {% assign tags_list = page.tags %} 36 | {% include JB/tags_list %} 37 | 38 | {% endunless %} 39 |

40 |

41 | -------------------------------------------------------------------------------- /assets/themes/the-minimum/css/module.css: -------------------------------------------------------------------------------- 1 | /* 2 | Base .mod module from http://j.mp/svs81k 3 | 4 | HTML should look like this and .bd is required: 5 |

6 |

7 |

8 |

9 |

10 |

11 |

12 | 13 | No styleguide reference. 14 | */ 15 | 16 | .mod .inner { position:relative; } 17 | .mod .bd, .mod .ft, .mod .hd { overflow:hidden; *overflow:visible; zoom:1; } 18 | 19 | /* 20 | .media module from http://j.mp/tQCTa8 21 | Since .media uses overflow: hidden, box-shadow needs padding to render correctly. 22 | Using dropdown or pop over should be problematic. Anything try to go outside of this module box should have problem. 23 | HTML should look like this and .media-left or .media-right and .bd is required: 24 | 25 |

26 |

27 |

28 |

29 |

30 | 31 | No styleguide reference. 32 | */ 33 | 34 | .media { overflow:hidden; *overflow:visible; zoom:1; } 35 | .media .media-left { float:left; margin-right: 14px; } 36 | .media .img img { display:block; } 37 | .media .media-right { float:right; margin-left: 14px; } 38 | .media .bd, .media .ft, .media .hd { overflow:hidden; *overflow:visible; zoom:1; } 39 | -------------------------------------------------------------------------------- /index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Hello World! 4 | --- 5 | {% include JB/setup %} 6 | 7 | Read [Jekyll Quick Start](http://jekyllbootstrap.com/usage/jekyll-quick-start.html) 8 | 9 | Complete usage and documentation available at: [Jekyll Bootstrap](http://jekyllbootstrap.com) 10 | 11 | ## Update Author Attributes 12 | 13 | In `_config.yml` remember to specify your own data: 14 | 15 | title : My Blog =) 16 | 17 | author : 18 | name : Name Lastname 19 | email : blah@email.test 20 | github : username 21 | twitter : username 22 | 23 | The theme should reference these variables whenever needed. 24 | 25 | ## Sample Posts 26 | 27 | This blog contains sample posts which help stage pages and blog data. 28 | When you don't need the samples anymore just delete the `_posts/core-samples` folder. 29 | 30 | $ rm -rf _posts/core-samples 31 | 32 | Here's a sample "posts list". 33 | 34 |

{{ post.date | date_to_string }} » {{ post.title }}

39 | 40 | ## To-Do 41 | 42 | This theme is still unfinished. If you'd like to be added as a contributor, [please fork](http://github.com/plusjade/jekyll-bootstrap)! 43 | We need to clean up the themes, make theme usage guides with theme-specific markup examples. 44 | 45 | 46 | -------------------------------------------------------------------------------- /_includes/JB/liquid_raw: -------------------------------------------------------------------------------- 1 | {% comment%}{% endcomment%} 26 | 27 | {% if site.JB.liquid_raw.provider == "custom" %} 28 | {% include custom/liquid_raw %} 29 | {% else %} 30 |

{{text | replace:"|.", "{" | replace:".|", "}" | replace:">", ">" | replace:"<", "<" }}

31 | {% endif %} 32 | {% assign text = nil %} -------------------------------------------------------------------------------- /_includes/JB/pages_list: -------------------------------------------------------------------------------- 1 | {% comment %}{% endcomment %} 22 | 23 | {% if site.JB.pages_list.provider == "custom" %} 24 | {% include custom/pages_list %} 25 | {% else %} 26 | {% for node in pages_list %} 27 | {% if group == null or group == node.group %} 28 | {% if page.url == node.url %} 29 |

30 | {% else %} 31 |

32 | {% endif %} 33 | {% endif %} 34 | {% endfor %} 35 | {% endif %} 36 | {% assign pages_list = nil %} 37 | {% assign group = nil %} -------------------------------------------------------------------------------- /_includes/JB/categories_list: -------------------------------------------------------------------------------- 1 | {% comment %}{% endcomment %} 19 | 20 | {% if site.JB.categories_list.provider == "custom" %} 21 | {% include custom/categories_list %} 22 | {% else %} 23 | {% if categories_list.first[0] == null %} 24 | {% for category in categories_list %} 25 |

26 | {{ category | join: "/" }} {{ site.categories[category].size }} 27 |

28 | {% endfor %} 29 | {% else %} 30 | {% for category in categories_list %} 31 |

32 | {{ category[0] | join: "/" }} {{ category[1].size }} 33 |

34 | {% endfor %} 35 | {% endif %} 36 | {% endif %} 37 | {% assign categories_list = nil %} -------------------------------------------------------------------------------- /assets/themes/the-minimum/readme.markdown: -------------------------------------------------------------------------------- 1 | ## Theme info 2 | 3 | Theme Name: the\_minimum 4 | Description: A minimumlist theme for [jekyll](https://github.com/mojombo/jekyll).Theming is done on [Jekyll-Bootstrap](http://jekyllbootstrap.com/). 5 | Author: Yuya Saito @ [\_layout](http://layouts-the.me/) 6 | Version: 1.0 7 | 8 | ## About the \_minimum 9 | 10 | - Love minimalism? So do I. I've put some effort on typography(not the type face) so your reader won't need Readability to read your content. 11 | - Design is simple so is the code behind it. You can easily customize it. 12 | - Built with mobile first. 13 | - Written with [LESS](http://lesscss.org/) so if you need to edit it, you should get [Codekit](http://incident57.com/codekit/). I did use this app to develop this theme. 14 | 15 | ## About me 16 | 17 | I'm Yuya Saito who is a web designer/front-end developer from Tokyo, Japan. 18 | 19 | This is a Jekyll Bootstrap port of my theme [studiomohawk/jekyll-theme-the_minimum](https://github.com/studiomohawk/jekyll-theme-the_minimum). 20 | If you watch or fork from it, you should do those here instead. 21 | 22 | ## How to use it? 23 | 24 | There are 2 places you should go look. 25 | 26 | 1. [Jekyll](https://github.com/mojombo/jekyll) / Jekyll repo page on Github 27 | 2. [Jekyll-Bootstrap](http://jekyllbootstrap.com/) / (Almost) complete how-to and bootstrap for Jekyll created by [Jade Dominguez](http://plusjade.com/) 28 | 29 | ## Code I didn't write 30 | 31 | - [Jekyll-Bootstrap](http://jekyllbootstrap.com/) / [CC BY-NC-SA 3.0](http://creativecommons.org/licenses/by-nc-sa/3.0/) 32 | - [Modernizr](http://www.modernizr.com/) / MIT/BSD license 33 | - [Frameless](http://framelessgrid.com/) / [CC0](http://creativecommons.org/publicdomain/zero/1.0/) 34 | - [HTML5 Boilerplate](http://html5boilerplate.com/): [The Unlicense](http://unlicense.org) (aka: Public Domain) -------------------------------------------------------------------------------- /assets/themes/the-minimum/css/helper.css: -------------------------------------------------------------------------------- 1 | /* 2 | helper.css contains non-semantic helper classes 3 | This must be the last file to import 4 | 5 | No styleguide reference. 6 | */ 7 | 8 | /* For image replacement */ 9 | .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; } 10 | .ir br { display: none; } 11 | /* Hide from both screenreaders and browsers: h5bp.com/u */ 12 | .hidden { display: none !important; visibility: hidden; } 13 | /* Hide only visually, but have it available for screenreaders: h5bp.com/v */ 14 | .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } 15 | /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */ 16 | .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } 17 | /* Hide visually and from screenreaders, but maintain layout */ 18 | .invisible { visibility: hidden; } 19 | /* Firefox had different box-sizing for hr. See: http://jsfiddle.net/sFgt7/ */ 20 | hr { -moz-box-sizing: content-box; } 21 | /* Contain floats: h5bp.com/q */ 22 | .clearfix:before, 23 | .clearfix:after, 24 | .cf:before, 25 | .cf:after, 26 | .hasGrid:before, 27 | .hasGrid:after, 28 | .unit-inner:before, 29 | .unit-inner:after, 30 | .tag_box:before, 31 | .tag_box:after { content: ""; display: table; } 32 | .clearfix:after, 33 | .cf:after, 34 | .hasGrid:after, 35 | .unit-inner:after, 36 | .tag_box:after { clear: both; } 37 | .clearfix, 38 | .cf, 39 | .hasGrid, 40 | .unit-inner, 41 | .tag_box { *zoom: 1; } 42 | .left { 43 | *display: inline; 44 | float: left; 45 | } 46 | .right { 47 | *display: inline; 48 | float: right; 49 | } 50 | -------------------------------------------------------------------------------- /assets/themes/twitter/css/style.css: -------------------------------------------------------------------------------- 1 | /* Override some defaults */ 2 | html, body { 3 | background-color: #eee; 4 | } 5 | body { 6 | padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */ 7 | } 8 | .container > footer p { 9 | text-align: center; /* center align it with the container */ 10 | } 11 | .container { 12 | width: 820px; /* downsize our container to make the content feel a bit tighter and more cohesive. NOTE: this removes two full columns from the grid, meaning you only go to 14 columns and not 16. */ 13 | } 14 | 15 | /* The white background content wrapper */ 16 | .content { 17 | background-color: #fff; 18 | padding: 20px; 19 | margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */ 20 | -webkit-border-radius: 0 0 6px 6px; 21 | -moz-border-radius: 0 0 6px 6px; 22 | border-radius: 0 0 6px 6px; 23 | -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); 24 | -moz-box-shadow: 0 1px 2px rgba(0,0,0,.15); 25 | box-shadow: 0 1px 2px rgba(0,0,0,.15); 26 | } 27 | 28 | /* Page header tweaks */ 29 | .page-header { 30 | background-color: #f5f5f5; 31 | padding: 20px 20px 10px; 32 | margin: -20px -20px 20px; 33 | } 34 | 35 | .topbar .btn { 36 | border: 0; 37 | } 38 | 39 | 40 | /* tag_box ======================================================== */ 41 | 42 | .tag_box { 43 | list-style:none; 44 | margin:0; 45 | padding:5px 0 ; 46 | overflow:hidden; 47 | } 48 | .tag_box li { 49 | line-height:28px; 50 | } 51 | .tag_box.inline li { 52 | float:left; 53 | } 54 | .tag_box a { 55 | padding: 3px 6px; 56 | margin: 2px; 57 | background: #eee; 58 | color:#005F6B; 59 | border-radius: 3px; 60 | text-decoration:none; 61 | } 62 | .tag_box a span{ 63 | vertical-align:super; 64 | font-size:0.8em; 65 | } 66 | .tag_box a.active { 67 | background:#57A957; 68 | border:1px solid #4C964D; 69 | color:#FFF; 70 | } 71 | -------------------------------------------------------------------------------- /_includes/JB/posts_collate: -------------------------------------------------------------------------------- 1 | {% comment %}{% endcomment %} 19 | 20 | {% if site.JB.posts_collate.provider == "custom" %} 21 | {% include custom/posts_collate %} 22 | {% else %} 23 | {% for post in posts_collate %} 24 | {% capture this_year %}{{ post.date | date: "%Y" }}{% endcapture %} 25 | {% capture this_month %}{{ post.date | date: "%B" }}{% endcapture %} 26 | {% capture next_year %}{{ post.previous.date | date: "%Y" }}{% endcapture %} 27 | {% capture next_month %}{{ post.previous.date | date: "%B" }}{% endcapture %} 28 | 29 | {% if forloop.first %} 30 |

31 |

32 |

{{ post.date | date: "%B %e, %Y" }} » {{ post.title }}

39 | {% else %} 40 | {% if this_year != next_year %} 41 | 42 |

43 |

44 |

45 | {% else %} 46 | {% if this_month != next_month %} 47 | 48 |

49 |

43 | 44 |

45 | {{ content }} 46 |

47 | 48 | 54 | 55 |

22 |

23 | {{ site.title }} 24 | Archive 25 | Pages 26 | Categories 27 | Tags 28 |

29 | 30 | {{ content }} 31 | 32 | 53 |

{{ page.title }} ← {{ page.top }}

29 | 30 | 43 | 44 | {{ content }} 45 | 46 | 59 | 60 |

2 |

3 |

4 |

5 |

6 |

7 |

8 |

9 |

10 |

11 | 12 |

13 |

14 | {{ content }} 15 |

16 |

17 | Published: 18 | 19 | {{ page.date | date: '%B' }} 20 | {{ page.date | date: '%d' }} 21 | {{ page.date | date: '%Y' }} 22 | 23 |

24 |

category:

29 | 34 |

35 |

36 |

37 | 43 | 44 | {% include JB/comments %} 45 |

46 | 47 |

48 | 68 | 69 |

70 |

71 |

18 |

19 |

20 |

21 |

22 | 32 |

33 |

34 |

35 |

36 |

37 |

38 |

39 | {{ content }} 40 |

41 |

42 |

43 |

44 | 63 |

3 | by Joni Korpi 4 | licensed under CC0 5 | 6 | No styleguide reference. 7 | */ 8 | 9 | @font-size: 16; // Your base font-size in pixels 10 | @line-height: 26; // Your base line-height in pixels 11 | @em: @font-size*1em; // Shorthand for outputting ems, e.g. "12/@em" 12 | 13 | @column: 60; // The column-width of your grid in pixels 14 | @gutter: 30; // The gutter-width of your grid in pixels 15 | 16 | // Column-widths in variables, in ems 17 | 18 | @1cols: ( 1 * (@column + @gutter) - @gutter) / @em; @1col: @1cols; // 60px 19 | @2cols: ( 2 * (@column + @gutter) - @gutter) / @em; // 150px 20 | @3cols: ( 3 * (@column + @gutter) - @gutter) / @em; // 240px 21 | @4cols: ( 4 * (@column + @gutter) - @gutter) / @em; // 330px 22 | @5cols: ( 5 * (@column + @gutter) - @gutter) / @em; // 420px 23 | @6cols: ( 6 * (@column + @gutter) - @gutter) / @em; // 510px 24 | @7cols: ( 7 * (@column + @gutter) - @gutter) / @em; // 600px 25 | @8cols: ( 8 * (@column + @gutter) - @gutter) / @em; // 690px 26 | @9cols: ( 9 * (@column + @gutter) - @gutter) / @em; // 780px 27 | @10cols: (10 * (@column + @gutter) - @gutter) / @em; // 870px 28 | @11cols: (11 * (@column + @gutter) - @gutter) / @em; // 960px 29 | @12cols: (12 * (@column + @gutter) - @gutter) / @em; // 1050px 30 | @13cols: (13 * (@column + @gutter) - @gutter) / @em; // 1140px 31 | @14cols: (14 * (@column + @gutter) - @gutter) / @em; // 1230px 32 | @15cols: (15 * (@column + @gutter) - @gutter) / @em; // 1320px 33 | @16cols: (16 * (@column + @gutter) - @gutter) / @em; // 1410px 34 | 35 | // Column-widths in a function, in ems 36 | 37 | .width (@cols:1) { width: (@cols * (@column + @gutter) - @gutter) / @em; } 38 | 39 | /* 40 | Font families 41 | 42 | No styleguide reference. 43 | */ 44 | 45 | @font-stack: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, "MS PGothic", Osaka, Sans-Serif; 46 | @webfont: junctionregularRegular, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, "MS PGothic", Osaka, Sans-Serif; 47 | 48 | /* 49 | Base font size should be larger than 16px. 50 | Calculation should be done via http://j.mp/rNg5uA 51 | 52 | No styleguide reference. 53 | */ 54 | 55 | body { 56 | font-family: @font-stack; 57 | font-size: @font-size / 16*1em; 58 | line-height: @line-height / @em; 59 | } 60 | 61 | /* 62 | Font size setting 63 | Using Golden ratio section (Caliculated via http://j.mp/sB6oxM): 64 | 109.657 6.854 843.515 * h1 65 | 82.241 5.14 632.623 66 | 67.773 4.236 521.331 67 | 50.829 3.177 390.992 68 | 41.887 2.618 322.208 * h2 69 | 31.415 1.963 241.654 70 | 25.888 1.618 199.138 * h3 71 | 19.416 1.214 149.354 * h4 72 | 16.000 1 123.077 * Base font size 73 | 12.000 0.75 92.308 * Minimum font size 74 | Vertical Rhythm is caluculated via http://j.mp/sUvKuN 75 | 76 | No styleguide reference. 77 | */ 78 | 79 | h1, h2, h3, h4, h5, h6 { 80 | font-family: @webfont; 81 | font-weight: bold; 82 | } 83 | 84 | h1, .h1 { 85 | font-size: 42px; 86 | line-height: 52px; 87 | margin-top: 52px; 88 | margin-bottom: 26px; 89 | letter-spacing: -1px; 90 | } 91 | h2, .h2 { 92 | font-size: 42px; 93 | line-height: 52px; 94 | margin-top: 52px; 95 | margin-bottom: 26px; 96 | letter-spacing: -1px; 97 | } 98 | h3, .h3 { 99 | font-size: 26px; 100 | line-height: 26px; 101 | margin-top: 26px; 102 | margin-bottom: 26px; 103 | } 104 | h4, .h4 { 105 | font-size: 20px; 106 | line-height: 26px; 107 | margin-top: 26px; 108 | margin-bottom: 26px; 109 | } 110 | p, ul, ol, dl, img { 111 | margin-top: 0; 112 | margin-bottom: @line-height / @em; 113 | } 114 | small, .small, aside { font-size: 0.75 * (@font-size / @em); } 115 | .font-size-default { font-size: @font-size / @em; } 116 | 117 | blockquote { font-weight: bold; } 118 | blockquote cite { font-weight: normal; } 119 | strong { font-weight: bold; } 120 | em { font-weight: bold; } 121 | 122 | /* 123 | Color schemes 124 | 125 | No styleguide reference. 126 | */ 127 | 128 | /* solarized - http://j.mp/s9Xuw9 129 | 130 | @base03: #002b36; 131 | @base02: #073642; 132 | @base01: #586e75; 133 | @base00: #657b83; 134 | @base0: #839496; 135 | @base1: #93a1a1; 136 | @base2: #eee8d5; 137 | @base3: #fdf6e3; 138 | @yellow: #b58900; 139 | @orange: #cb4b16; 140 | @red: #dc322f; 141 | // @magenta: #d33682; 142 | @violet: #6c71c4; 143 | @blue: #268bd2; 144 | @cyan: #2aa198; 145 | @green: #859900; 146 | 147 | */ 148 | 149 | // Tomorrow Night - http://j.mp/wvO4U4 150 | 151 | @base03: #2d2d2d; 152 | @base02: #393939; 153 | @base01: #515151; 154 | @base0: #cccccc; 155 | @subtle: #999999; 156 | @yellow: #ffcc66; 157 | @orange: #f99157; 158 | @red: #f2777a; 159 | @violet: #cc99cc; 160 | @blue: #6699cc; 161 | @cyan: #66cccc; 162 | @green: #99cc99; 163 | 164 | // Texture 165 | 166 | @noise-100-90-5: "/assets/themes/the-minimum/skin/100-90-5-monochrome.png"; // http://noisepng.com/ 167 | @cross-hair: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAR0lEQVQYGYVOQQoAIAizHuJXpafqR4wFCw9Ggji2OSbubpkp3UI7Qmcidz9JIKniAYITEQasqovcJHhelquxFf9LVjfTeKFtWPOYLQ+xHqUAAAAASUVORK5CYII="; // http://ptrn.it/AmYV5d 168 | 169 | /* Junction Font 170 | * http://www.theleagueofmoveabletype.com/ 171 | * Using for Logo and headers 172 | */ 173 | 174 | @font-face { 175 | font-family: 'junctionregularRegular'; 176 | src: url('/assets/themes/the-minimum/font/Junction-webfont.eot'); 177 | src: url('/assets/themes/the-minimum/font/Junction-webfont.eot?#iefix') format('embedded-opentype'), 178 | url('/assets/themes/the-minimum/font/Junction-webfont.woff') format('woff'), 179 | url('/assets/themes/the-minimum/font/Junction-webfont.ttf') format('truetype'), 180 | url('/assets/themes/the-minimum/font/Junction-webfont.svg#junctionregularRegular') format('svg'); 181 | font-weight: normal !important; 182 | font-style: normal; 183 | } 184 | 185 | /* 186 | LESS helper 187 | */ 188 | 189 | /* 190 | List modules 191 | .list-linear - list line up horizontally 192 | 193 | No styleguide reference. 194 | */ 195 | 196 | .list-linear { 197 | letter-spacing: -0.31em; 198 | *letter-spacing: normal; 199 | word-spacing: -0.43em; 200 | list-style: none; 201 | padding-left: 0; 202 | li { 203 | display: inline-block; 204 | *display: inline; 205 | zoom: 1; 206 | line-height: normal; 207 | letter-spacing: normal; 208 | margin-right: 16px; 209 | word-spacing: normal; 210 | vertical-align: middle; 211 | &:last-child { margin-right: 0; } 212 | } 213 | } 214 | -------------------------------------------------------------------------------- /assets/themes/the-minimum/css/_layout.less: -------------------------------------------------------------------------------- 1 | // GO MOBILE FIRST! 2 | .the-header { 3 | .unit-inner { 4 | width: @3cols; 5 | margin-top: @line-height / @em; 6 | margin-bottom: @line-height / @em; 7 | margin-left: auto; 8 | margin-right: auto; 9 | } 10 | .logo a { 11 | font-size: 32px; 12 | line-height: 42px; 13 | } 14 | } // the-header 15 | 16 | .unit-article { 17 | 18 | .unit-head-inner, .entry-content, .misc-content, .unit-foot-inner { 19 | width: @3cols; 20 | margin-left: auto; 21 | margin-right: auto; 22 | } 23 | 24 | .unit-head-inner { 25 | .meta { margin-bottom: @line-height / @em; } 26 | } 27 | 28 | } // .the-article 29 | 30 | .layout-page { 31 | 32 | .unit-body { 33 | .unit-body-inner { 34 | width: @3cols; 35 | margin-left: auto; 36 | margin-right: auto; 37 | } 38 | .article-list { 39 | .meta { margin-bottom: @line-height / @em; } 40 | } 41 | } 42 | 43 | } // .layout-page 44 | 45 | .the-footer { 46 | 47 | .unit-foot { 48 | width: @3cols; 49 | margin-left: auto; 50 | margin-right: auto; 51 | } 52 | 53 | } // .the-footer 54 | 55 | /* 56 | IE 57 | */ 58 | 59 | .ie { 60 | .the-header { 61 | .unit-inner { 62 | width: @11cols; 63 | margin-top: @line-height / @em; 64 | margin-bottom: @line-height / @em; 65 | margin-left: auto; 66 | margin-right: auto; 67 | } 68 | .logo { 69 | width: @5cols; 70 | float: left; 71 | } 72 | .nav-global { 73 | margin-top: 50px; 74 | text-align: right; 75 | width: @5cols; 76 | float: right; 77 | } 78 | } // the-header 79 | 80 | .unit-article { 81 | 82 | .unit-head-inner, .entry-content, .misc-content, .unit-foot-inner { 83 | width: @11cols; 84 | margin-left: auto; 85 | margin-right: auto; 86 | } 87 | .unit-head-inner, .entry-content, .misc-content { 88 | h1, h2, h3, h4, h5, p, ul, ol, dl, blockquote { 89 | margin-right: 210px; 90 | } 91 | } 92 | 93 | .unit-head-inner { 94 | .meta { 95 | width: @4cols; 96 | float: right; 97 | } 98 | } 99 | 100 | } // .unit-article 101 | 102 | .layout-page { 103 | 104 | .unit-body { 105 | .unit-body-inner{ 106 | width: @8cols; 107 | margin-left: auto; 108 | margin-right: auto; 109 | } 110 | .article-list { 111 | width: @8cols; 112 | .meta { 113 | width: @4cols; 114 | float: right; 115 | } 116 | } 117 | } 118 | 119 | } // layout-page 120 | 121 | .the-footer { 122 | 123 | .unit-foot { 124 | width: @11cols; 125 | margin-left: auto; 126 | margin-right: auto; 127 | } 128 | 129 | } // .the-footer 130 | 131 | } // .ie 132 | 133 | /* 134 | Smartphone 135 | */ 136 | 137 | @media only screen and (min-width: 320px) and (max-width: 767px) { 138 | img { max-width: 100%; } 139 | } 140 | 141 | /* 142 | Wide Smartphone 143 | */ 144 | 145 | @media only screen and (min-width: 480px) { 146 | 147 | .the-header { 148 | .unit-inner { width: @5cols; } 149 | .logo a { 150 | font-size: 42px; 151 | line-height: 52px; 152 | letter-spacing: -1px; 153 | } 154 | .nav-global { 155 | margin-top: @line-height / @em; 156 | letter-spacing: -0.31em; 157 | *letter-spacing: normal; 158 | word-spacing: -0.43em; 159 | list-style: none; 160 | padding-left: 0; 161 | .home:after { 162 | margin-left: 16px; 163 | content: "/"; 164 | } 165 | li { 166 | display: inline-block; 167 | *display: inline; 168 | zoom: 1; 169 | line-height: normal; 170 | letter-spacing: normal; 171 | margin-right: 16px; 172 | word-spacing: normal; 173 | vertical-align: middle; 174 | &:last-child { margin-right: 0; } 175 | } 176 | } 177 | } // the-header 178 | 179 | .unit-article { 180 | 181 | .unit-head-inner, .entry-content, .misc-content, .unit-foot-inner { width: @5cols; } 182 | .unit-foot { 183 | .gotop { margin-top: @line-height / @em; } 184 | } 185 | 186 | } // .unit-article 187 | 188 | .layout-page { 189 | 190 | .unit-body { 191 | .unit-body-inner { width: @5cols; } 192 | .article-list { width: @5cols; } 193 | } 194 | 195 | } // .layout-page 196 | 197 | .the-footer { 198 | 199 | .unit-foot { width: @5cols; } 200 | 201 | } // .the-footer 202 | 203 | } // min-width: 480px 204 | 205 | /* 206 | Tablet 207 | */ 208 | 209 | @media only screen and (min-width: 768px) { 210 | 211 | .the-header { 212 | .unit-inner { width: @8cols; } 213 | } // the-header 214 | 215 | .unit-article { 216 | 217 | .unit-head-inner, .entry-content, .misc-content, .unit-foot-inner { width: @8cols; } 218 | 219 | .unit-head-inner { 220 | .meta { 221 | margin-bottom: 0; 222 | text-align: right; 223 | width: @4cols; 224 | float: right; 225 | } 226 | } 227 | 228 | } // .the-article 229 | 230 | .layout-page { 231 | 232 | .unit-body { 233 | .unit-body-inner { width: @8cols; } 234 | .article-list { 235 | width: @8cols; 236 | .meta { 237 | margin-bottom: 0; 238 | text-align: right; 239 | width: @4cols; 240 | float: right; 241 | } 242 | } 243 | } 244 | 245 | } // .layout-page 246 | 247 | .the-footer { 248 | 249 | .unit-foot { width: @8cols; } 250 | 251 | } // the-footer 252 | 253 | } // min-width: 768px 254 | 255 | /* 256 | Not that old computer layout 257 | */ 258 | 259 | @media only screen and (min-width: 1280px) { 260 | 261 | .the-header { 262 | .unit-inner { width: @11cols; } 263 | .logo { 264 | width: @5cols; 265 | float: left; 266 | } 267 | .nav-global { 268 | margin-top: 21px; 269 | text-align: right; 270 | width: @5cols; 271 | float: right; 272 | } 273 | } // the-header 274 | 275 | .unit-article { 276 | 277 | .unit-head-inner, .entry-content, .misc-content, .unit-foot-inner { width: @8cols; } 278 | 279 | .unit-foot { 280 | .pagination { 281 | float: left; 282 | width: @7cols; 283 | } 284 | .gotop { 285 | float: right; 286 | margin-top: 0; 287 | text-align: right; 288 | width: @4cols; 289 | } 290 | } 291 | 292 | } // .unit-article 293 | 294 | .layout-page { 295 | 296 | .unit-body { 297 | .unit-body-inner { width: @8cols; } 298 | .article-list { 299 | width: @8cols; 300 | .meta { width: @4cols; } 301 | } 302 | } 303 | 304 | } // .layout-page 305 | 306 | .the-footer { 307 | 308 | .unit-foot { width: @11cols; } 309 | 310 | } // .the-footer 311 | 312 | } // min-width: 1280px 313 | 314 | /* 315 | Huge-screen layout 316 | */ 317 | 318 | @media only screen and (min-width: 1410px) { 319 | 320 | .the-header { 321 | .unit-inner { width: @16cols; } 322 | .logo { width: @8cols; } 323 | .nav-global { width: @8cols; } 324 | } // the-header 325 | 326 | .unit-article { 327 | 328 | .unit-head-inner, .entry-content, .misc-content { width: @8cols; } 329 | .unit-foot-inner { width: @16cols; } 330 | 331 | .unit-foot { 332 | .pagination { width: @10cols; } 333 | .gotop { 334 | padding-right: 360px; 335 | width: @2cols; 336 | } 337 | } 338 | 339 | } // .unit-article 340 | 341 | .layout-page { 342 | 343 | .unit-body { 344 | .unit-body-inner { width: @8cols; } 345 | .article-list { 346 | width: @8cols; 347 | .meta { width: @4cols; } 348 | } 349 | } 350 | 351 | } // .layout-page 352 | 353 | .the-footer { 354 | 355 | .unit-foot { width: @16cols; } 356 | .unit-inner { 357 | h1, h2, h3, h4, h5, p, ul, ol, dl, blockquote { 358 | margin-left: 360px; 359 | margin-right: 360px; 360 | } 361 | } 362 | 363 | } // .the-footer 364 | 365 | } // min-width: 1410px 366 | -------------------------------------------------------------------------------- /assets/themes/the-minimum/css/style.less: -------------------------------------------------------------------------------- 1 | @import "base.css"; 2 | @import "module.css"; 3 | @import "_less-base.less"; 4 | 5 | /* LESS VARIABLES 6 | --------------------------------------------------------------------------------- */ 7 | @main-bg: #ffffff; 8 | @subtle-bg: @base01; 9 | @main-font-color: @base03; 10 | @accent-color: @green; 11 | 12 | /* GLOBAL 13 | --------------------------------------------------------------------------------- */ 14 | html { 15 | background-color: @main-bg; 16 | color: @main-font-color; 17 | } 18 | 19 | /* LINK */ 20 | a { 21 | &:link { 22 | color: @main-font-color; 23 | text-decoration: none; 24 | } 25 | &:visited { 26 | color: darken(@main-font-color, 10%); 27 | text-decoration: none; 28 | } 29 | &:hover { 30 | color: lighten(@main-font-color, 10%); 31 | text-decoration: none; 32 | } 33 | } 34 | 35 | /* HIGHLIGHTER */ 36 | pre { margin-bottom: @line-height / @em; } 37 | pre { 38 | color: #f2f2f2; 39 | background-color: @base02; 40 | border: 1px solid fadein(@base02, 30%); 41 | font-family: "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; 42 | margin-left: 0; 43 | margin-right: 0; 44 | padding: @line-height / @em; 45 | overflow: auto; 46 | -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.6); 47 | -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.6); 48 | box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.6); 49 | } 50 | 51 | /* meta */ 52 | .meta {} 53 | 54 | 55 | /* HEADER 56 | --------------------------------------------------------------------------------- */ 57 | .the-header { 58 | .logo { 59 | font-family: @webfont; 60 | margin: 0; 61 | a:visited { color: @main-font-color; } 62 | } 63 | .nav-global { 64 | text-transform: uppercase; 65 | .forkme { 66 | position: relative; 67 | top: 2px; 68 | } 69 | } 70 | } // .the-header 71 | 72 | /* MAIN 73 | --------------------------------------------------------------------------------- */ 74 | .unit-article { 75 | 76 | header { 77 | background: url('@{noise-100-90-5}'); 78 | background-repeat: repeat; 79 | background-position: 0 0; 80 | background-color: #BADA55; 81 | margin-bottom: @line-height / @em; 82 | padding-top: (@line-height / @em); 83 | padding-bottom: (@line-height / @em) ; 84 | h1 { 85 | color: @main-font-color; 86 | margin-top: 0; 87 | margin-bottom: 0; 88 | } 89 | } // .article-inner header 90 | 91 | .entry-content { 92 | h2, h3, h4, h5, h6 { 93 | color: @main-font-color; 94 | a { 95 | &:link { 96 | color: @main-font-color; 97 | border: 0; 98 | } 99 | &:visited { 100 | color: darken(@main-font-color, 10%); 101 | border: 0; 102 | } 103 | &:hover { 104 | color: lighten(@main-font-color, 10%); 105 | border: 0; 106 | } 107 | } 108 | } 109 | } // .article-inner .entry-content 110 | 111 | .entry-content:first-child h2, 112 | .entry-content:first-child h3, 113 | .entry-content:first-child h4, 114 | .entry-content:first-child h5, 115 | .entry-content:first-child h6 { margin-top: 0; } // Canceling header margin since there is margin on header 116 | 117 | a { 118 | &:link { border-bottom: 1px dotted @accent-color; } 119 | &:visited { border-bottom: 1px dotted darken(@accent-color, 10%); } 120 | &:hover { border-bottom: 1px dotted lighten(@accent-color, 10%); } 121 | } 122 | 123 | blockquote { 124 | border-left: 1em solid rgba(21, 25, 25, 0.8); 125 | padding-left: 1em; 126 | p { 127 | margin-left: 0; 128 | margin-right: 0; 129 | } 130 | } 131 | ul, ol, dl { padding-left: 0; } 132 | ul { list-style: square; } 133 | ol { list-style: decimal; } 134 | li, dt, dd { 135 | h1, h2, h3, h4, h5, p, ul, ol, dl, blockquote, .hasGrid { margin-left: 0; margin-right: 0; } 136 | } 137 | p code, li code { 138 | margin: 0 2px; 139 | padding: 2px 5px; 140 | white-space: nowrap; 141 | border: 1px solid #CCC; 142 | background-color: #F8F8F8; 143 | -webkit-border-radius: 3px; 144 | -moz-border-radius: 3px; 145 | border-radius: 3px; 146 | -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 147 | } 148 | 149 | img { 150 | display: block; 151 | margin-left: auto; 152 | margin-left: auto; 153 | } 154 | img.left { margin-right: 16px; } 155 | img.right { margin-left: 16px; } 156 | 157 | .date-publish { margin-bottom: 0; } 158 | .list-linear .list-head { margin-right: 4px; } 159 | .list-category a, .list-tag a { 160 | border: 0 none; 161 | &:hover span { background-color: @orange; } 162 | } 163 | .list-category span, .list-tag span { 164 | background-color: darken(@orange, 20%); 165 | padding: 1px 5px; 166 | -webkit-border-radius: 10px; 167 | -moz-border-radius: 10px; 168 | border-radius: 10px; 169 | color: white; 170 | text-transform: uppercase; 171 | margin: 0 6px 0 0; 172 | display: inline-block; 173 | position: relative; 174 | vertical-align: middle; 175 | top: -2px; 176 | font-weight: bold; 177 | font-size: 10px; 178 | } 179 | .list-category { 180 | margin-bottom: 0; 181 | text-transform: capitalize; 182 | 183 | } 184 | .list-tag { 185 | text-transform: capitalize; 186 | } 187 | 188 | .unit-foot { 189 | background: url('@{noise-100-90-5}') repeat 0 0 #4d4d4d; 190 | color: #fafafa; 191 | a { 192 | &:link { color: #fafafa; } 193 | &:visited { color: #fafafa; } 194 | &:hover { color: #ffffff; } 195 | } 196 | padding-top: @line-height / @em; 197 | padding-bottom: @line-height / @em; 198 | position: relative; 199 | nav ul { 200 | list-style: none; 201 | li { display: inline; } 202 | } 203 | .gotop { margin-bottom: 0; } 204 | } // .article-inner .unit-foot 205 | 206 | } // .the-article 207 | 208 | /* post & page */ 209 | .layout-page { 210 | .tag_box { 211 | background: url('@{noise-100-90-5}') repeat 0 0 @subtle; 212 | padding: (@line-height / @em) / 2; 213 | list-style: none; 214 | -webkit-border-radius: 3px; 215 | -moz-border-radius: 3px; 216 | border-radius: 3px; 217 | -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 218 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.4); 219 | -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.4); 220 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4); 221 | li { 222 | display: inline; 223 | line-height: normal; 224 | vertical-align: middle; 225 | } 226 | a { 227 | background-color: @green; 228 | float: left; 229 | border: 1px solid darken(@green, 30%); 230 | padding: 3px 6px 3px 6px; 231 | -webkit-border-radius: 3px; 232 | -moz-border-radius: 3px; 233 | border-radius: 3px; 234 | margin: 5px; 235 | -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 236 | text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4); 237 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 238 | -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 239 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 240 | -webkit-transition-duration: 0.2s; 241 | -moz-transition-duration: 0.2s; 242 | transition-duration: 0.2s; 243 | -webkit-user-select:none; 244 | -moz-user-select:none; 245 | -ms-user-select:none; 246 | user-select:none; 247 | &:link {} 248 | &:active { 249 | -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); 250 | -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); 251 | box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); 252 | background: darken(@green, 40%); 253 | border: solid darken(@green, 40%); 254 | } 255 | &:hover { 256 | background-color: darken(@green, 10%); 257 | border: 1px solid darken(@green, 40%); 258 | span { 259 | background-color: darken(#fafafa, 10%); 260 | border: 1px solid darken(@green, 10%); 261 | } 262 | } 263 | } 264 | span { 265 | background-color: #fafafa; 266 | border: 1px solid @green; 267 | padding: 1px 5px; 268 | -webkit-border-radius: 10px; 269 | -moz-border-radius: 10px; 270 | border-radius: 10px; 271 | color: #1a1a1a; 272 | display: inline-block; 273 | position: relative; 274 | vertical-align: middle; 275 | top: -2px; 276 | font-weight: bold; 277 | font-size: 10px; 278 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 279 | -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 280 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 281 | } 282 | 283 | } 284 | } // .page-post 285 | 286 | /* FOOTER 287 | ----------------------------------------------- */ 288 | .the-footer { 289 | background-color: #1a1a1a; 290 | background-color: rgba(21, 25, 25, 0.8); 291 | color: #fafafa; 292 | color: rgba(250, 250, 250, 0.8); 293 | padding-bottom: @line-height / @em; 294 | a { 295 | &:link { 296 | color: @accent-color; 297 | border: 0; 298 | } 299 | &:visited { 300 | color: darken(@accent-color, 10%); 301 | border: 0; 302 | } 303 | &:hover { 304 | color: lighten(@accent-color, 10%); 305 | border: 0; 306 | } 307 | } 308 | ul { 309 | list-style: square; 310 | padding-left: 1em; 311 | } 312 | address { font-style: normal; } 313 | .license { 314 | clear: both; 315 | p { margin-bottom: 0; } 316 | } 317 | } 318 | 319 | @import "_layout.less"; 320 | @import "syntaxhighlighter.css"; 321 | @import "helper.css"; 322 | -------------------------------------------------------------------------------- /assets/themes/mark-reid/css/screen.css: -------------------------------------------------------------------------------- 1 | /* @override http://mark.reid.dev/files/css/screen.css */ 2 | 3 | /* @override 4 | http://mark.reid.dev/files/css/screen.css 5 | http://mark.reid.name/files/css/screen.css 6 | */ 7 | 8 | /* screen.css 9 | * 10 | * A clean, simple stylesheet that aims for 11 | * a consistent vertical rhythm. 12 | * 13 | * Base font height: 16px 14 | * Base line length: 24px 15 | * 16 | * AUTHOR: Mark Reid 17 | */ 18 | 19 | /* @group Reset */ 20 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td,abbr { margin:0; padding:0;} 21 | /* @end */ 22 | 23 | body { 24 | font-family: Palatino, georgia, "times new roman", serif; 25 | background-color: whitesmoke; 26 | background-position: center -18em; 27 | background-repeat: repeat-x; 28 | } 29 | 30 | /* Hack via Joel Spolsky to make image rescaling nicer in IE */ 31 | img { -ms-interpolation-mode:bicubic; } 32 | 33 | /* IE6 ignores this and uses default size of 16pt */ 34 | html>body { font-size:16px; } 35 | p { margin: 0 0 1.5em 0; text-align: justify; } 36 | 37 | a { text-decoration: none; color: #339; } 38 | a:hover { text-decoration: underline; color: #33f; } 39 | a.pdf:before { 40 | margin-right: 1em; 41 | content: url(/files/css/icon_pdf.gif); } 42 | 43 | h1,h2,h3,h4 { 44 | line-height:1em; 45 | font-size:1.5em; 46 | font-weight: normal; 47 | clear: left; 48 | font-family: 'lucida grande', sans-serif; 49 | } 50 | h1 { margin-bottom: 1em; } 51 | h2 { 52 | font-size: 100%; 53 | line-height: 1.5em; 54 | margin:1.5em 0 1.5em 0; 55 | font-weight:bold; 56 | } 57 | 58 | hr { 59 | border-top: 1px solid silver; 60 | border-bottom: none; 61 | padding: 0; 62 | margin: 1.46em 0 0 0; 63 | } 64 | 65 | sup { line-height: 1ex; } 66 | 67 | #site { 68 | max-width: 46em; 69 | margin: 1.5em auto 3em auto; 70 | line-height:1.5em; 71 | } 72 | 73 | #page, #disqus_thread { 74 | background: white; 75 | /* background-image: url(grid.png); */ 76 | padding: 3em 3em 1.5em 3em; 77 | border: 1px solid #ccc; 78 | } 79 | 80 | /* More experimental CSS3 features */ 81 | #page, #disqus_thread { 82 | box-shadow: 2px 2px 8px #aaa; 83 | -webkit-box-shadow: 2px 2px 8px #aaa; 84 | -moz-box-shadow: 2px 2px 8px #aaa; 85 | } 86 | 87 | #disqus_thread { padding-top: 0; } 88 | 89 | /* TODO 90 | #page { counter-reset: section; } 91 | #page h2:before { 92 | margin-left: -3.5ex; 93 | color: silver; 94 | content: "§" counter(section) ". "; 95 | counter-increment: section 2; 96 | } 97 | */ 98 | 99 | /* @group FancyFirst */ 100 | .emphnext + p:first-letter, p.emphfirst:first-letter { 101 | font-size: 48px; 102 | padding: 0 0.15em 0 0; 103 | margin: 0.05em 0 -0.15em 0; 104 | line-height: 1em; 105 | float: left; 106 | } 107 | 108 | .emphnext + p:first-line, p.emphfirst:first-line { 109 | font-variant: small-caps; 110 | font-size: larger; 111 | } 112 | /* @end */ 113 | 114 | .right { float: right; clear: left; } 115 | .left { float: left; clear: right; } 116 | .inset { 117 | border: 1px solid silver; 118 | padding: 2px; 119 | margin: 0em 0.8em 0.8em 0.8em; 120 | } 121 | .right.inset { margin-right: 0 !important; } 122 | .left.inset { margin-left: 0 !important; } 123 | .quiet { 124 | color: grey; 125 | font-size: 0.875em; 126 | line-height: 1.714em; 127 | } 128 | blockquote { 129 | padding: 0 2.8em; 130 | margin: 1.714em 0; 131 | color: #444; 132 | font-size: 0.875em; 133 | line-height: 1.714em; 134 | } 135 | 136 | .note { 137 | padding-top: 0.5em; 138 | background-color: #fafaff; 139 | border-top: 1px solid silver; 140 | border-bottom: 1px solid silver; 141 | } 142 | /* @group Table */ 143 | table.neat { 144 | width: 80%; 145 | margin: 1.5em auto 1.5em auto; 146 | table-layout: fixed; 147 | border-spacing: 0; 148 | } 149 | table.neat tr { text-align: center; } 150 | table.neat th { font-weight: normal; background-color: #eeeeee; } 151 | table.neat td { background-color: white; } 152 | table.neat th.title { border-bottom: 1px solid gray; border-top: 1px solid gray; vertical-align: bottom; background-color: lightgrey; } 153 | caption { 154 | color: #333; 155 | font-size: 0.875em; 156 | margin: 0.875em auto 0 auto; 157 | line-height: 1.14em; 158 | text-align: justify; 159 | } 160 | 161 | /* @end */ 162 | 163 | /* @group Lists */ 164 | ul { 165 | margin-top: 1.5em; 166 | margin-bottom: 1.5em; 167 | line-height: 1.5em; 168 | padding-left: 1.5em; 169 | } 170 | ul li { 171 | list-style-type: square; 172 | list-style-position: outside; 173 | } 174 | ol li { 175 | list-style-type: decimal; 176 | list-style-position: inside; 177 | } 178 | dt { font-weight: bold;} 179 | dd { margin: 0 0 1.5em 0; text-align: justify; } 180 | 181 | ul.compact { margin: 0; padding: 0;} 182 | ul.compact li { list-style: ; 183 | list-style-type: square; 184 | list-style-position: inside; 185 | } 186 | ul.compact li span.date { 187 | display: none; 188 | color: grey; 189 | width: 20%; 190 | } 191 | ul.compact li a { 192 | width: 70%; 193 | } 194 | /* @end */ 195 | 196 | /* @group Header */ 197 | #header, #header a { color: silver; } 198 | #header .hover { color: transparent; } 199 | #header:hover a { color: black; text-shadow: #aaa 2px 2px 3px;} 200 | #header:hover a:hover { text-decoration: none; } 201 | #header a:hover .hover { color: silver; } 202 | #header { 203 | position: relative; 204 | font-variant: small-caps; 205 | line-height: 1em; 206 | margin-top: .5em; 207 | margin-bottom: 0; 208 | } 209 | #header h1 { 210 | font-family: Palatino, georgia, "times new roman", serif; 211 | margin-bottom: 0; 212 | line-height: 0.9em; 213 | display: block; 214 | font-weight: normal; 215 | } 216 | 217 | #header ul { 218 | position: absolute; 219 | top: 0; 220 | right: 0; 221 | font-size: 100%; 222 | line-height: 1.6em; 223 | display: block; 224 | margin: 0; 225 | width: 50%; 226 | text-align: right; 227 | } 228 | #header ul li { display: inline; } 229 | #header ul li a { 230 | padding: 0.4em 0.3em 0 0.3em; 231 | display: inline; 232 | } 233 | #header ul li a:hover { 234 | color: blue; 235 | border-bottom: 2px solid blue; 236 | } 237 | #header .byline { 238 | color: silver; 239 | font-size: 10pt; 240 | line-height: 75% 241 | } 242 | #header:hover .byline a { color: silver; text-shadow: none; } 243 | #header:hover .byline a:hover { color: black; text-shadow: #aaa 1px 1px 2px;} 244 | 245 | /* @group Twitter */ 246 | #twitter_update_list { display: inline; margin: 0; } 247 | #twitter_update_list li { display: inline; margin: 0;} 248 | .twitter-title { display: inline; margin: 0; } 249 | .twitter-title a { display: inline; } 250 | /* @end */ 251 | 252 | body#Work #header a.work, 253 | body#Home #header a.home, 254 | body#Play #header a.play, 255 | body#Info #header a.info, 256 | body#Code #header a.code, 257 | body#Past #header a.past, 258 | body#Kith #header a.kith 259 | { 260 | border-bottom: 2px solid silver; 261 | } 262 | 263 | /* @end */ 264 | 265 | /* @group Footnotes */ 266 | .footnotes { color: grey; } 267 | .footnotes:hover { color: black; } 268 | .footnotes ol li { 269 | list-style-type: decimal; 270 | list-style-position: inside; 271 | font-size: 75%; 272 | line-height: 1.5em; 273 | } 274 | .footnotes ol li > a { display: none; } 275 | /* @end */ 276 | 277 | /* @group Sections */ 278 | .section { 279 | font-size: 87.5%; 280 | line-height: 1.43em; 281 | margin-bottom: 1.43em; 282 | margin-top: 1.43em; 283 | margin-left: 7.5em; 284 | padding-right: 3em; 285 | } 286 | .section h1 { 287 | font-family: Palatino, georgia, serif; 288 | font-size: 100%; 289 | line-height: 1.43em; 290 | position: absolute; 291 | width: 6em; 292 | max-width: 6em; 293 | margin-left: -7.5em; 294 | font-weight: bold; 295 | font-variant: small-caps; 296 | } 297 | .section p { margin-bottom: 1.43em; } 298 | 299 | /* @end */ 300 | 301 | .list .title { font-weight: bold; } 302 | p.line { position: relative; margin: 0; } 303 | p.excerpt { margin: 0; } 304 | .comments { font-size: smaller; position: absolute; color: silver; right: 0; top: 0; } 305 | .excerpt { color: black; } 306 | 307 | /* @group Signature */ 308 | .signature { 309 | margin-top: 3em; 310 | position: relative; 311 | } 312 | .signature .author { 313 | font-variant: small-caps; 314 | font-style: normal; 315 | color: black; 316 | display: block; 317 | margin-bottom: 1.5em; 318 | } 319 | .signature .date { 320 | font-size: 87.5%; 321 | line-height: 1.5em; 322 | display: block; 323 | font-variant: small-caps; 324 | font-style: normal; 325 | position: absolute; 326 | right: 0; 327 | top: 0; 328 | } 329 | .signature .location { 330 | display: block; 331 | font-size: 87.5%; 332 | line-height: 1.5em; 333 | position: absolute; 334 | right: 0; 335 | top: 1.5em; 336 | } 337 | /* @end */ 338 | 339 | /* @group Code */ 340 | pre { 341 | margin: 1em 0 1.5em 0; 342 | font-size: 0.75em; /* Hack to make code look same size as body font */ 343 | line-height: 1.5em; 344 | color: #111; 345 | background: #fffff0; 346 | border: 1px solid #ddc; 347 | padding: 0.5em 1em; 348 | overflow: hidden; 349 | 350 | /* Experimental CSS3 stuff */ 351 | box-shadow: 1px 1px 6px #ccc; 352 | -webkit-box-shadow: 1px 1px 6px #ccc; 353 | -moz-box-shadow: 1px 1px 6px #ccc; 354 | } 355 | pre:hover { 356 | border-right: none; 357 | overflow: visible; 358 | } 359 | code { 360 | font-size: 1em; 361 | background-color: #f7f7ff; 362 | line-height: 1.4em; 363 | } 364 | pre > code { 365 | background-color: transparent; 366 | } 367 | /* @end */ 368 | 369 | 370 | /* @group Disqus */ 371 | #disqus_thread { 372 | margin-top: 2.93em; 373 | } 374 | .dsq-comment-body { 375 | text-align: justify; 376 | line-height: 1.29em; 377 | } 378 | .dsq-comment { 379 | padding-top: 0 !important; 380 | margin-top: 1.7em !important; 381 | margin-bottom: 1.9em !important; 382 | background-image: none !important; 383 | } 384 | .dsq-comment-message { 385 | line-height: 1.714em; 386 | } 387 | .dsq-comment-header { 388 | background-color: whitesmoke !important; 389 | border-top: 1px solid silver !important; 390 | border-bottom: 1px solid silver !important; 391 | margin-bottom: 1.15em !important; 392 | } 393 | .dsq-header-time { margin-left: 0 !important; } 394 | .dsq-comment-header cite { 395 | font-variant: small-caps; 396 | margin-left: 0 !important; 397 | } 398 | .dsq-comment-footer { 399 | font-size: 75% !important; 400 | margin-top: 1px !important; 401 | } 402 | #dsq-options { 403 | background: whitesmoke; 404 | border-bottom: 1px solid silver; 405 | border-top: 1px solid silver; 406 | padding: 0 0 0 1em; 407 | } 408 | #dsq-comments-count { 409 | margin-top: 0.8em !important; 410 | margin-bottom: 1.2em !important; 411 | } 412 | #dsq-extra-links { padding-left: 0 !important; } 413 | #dsq-extra-links li img { display: none; } 414 | #dsq-options-toggle { color: silver; font-size: 75% !important;} 415 | #dsq-add-new-comment { 416 | margin-top: 1.19em !important; 417 | margin-bottom: 1.25em !important; 418 | } 419 | /* The following position, width and height ensure 420 | * that none of the body in the iframe shows through. 421 | */ 422 | form#comment { 423 | position: absolute; 424 | height: 100%; 425 | width: 100%; 426 | background-color: white !important; 427 | } 428 | /* @end */ 429 | 430 | /* @group LibraryThing */ 431 | span.LTtitle { display: none; } 432 | div.LTitem { display: inline; margin-right: 0.7em; } 433 | div.LTprovided { display: none; } 434 | /* @end */ 435 | 436 | /* @group Last.fm */ 437 | #lastfm a { margin-right: 0.7em; } 438 | /* @end */ 439 | 440 | /* @group Delicious */ 441 | .delicious-posts { } 442 | .delicious-posts ul, .delicious-posts li, .delicious-banner { margin: 0; padding: 0 } 443 | .delicious-posts li { list-style-position: outside; margin-bottom: 1em; margin-left: 1em; text-align: justify; } 444 | .delicious-post { } 445 | .delicious-banner { display: none; } 446 | .delicious-posts a:hover { } 447 | .delicious-posts a { } 448 | .delicious-post a { font-weight: bold; } 449 | p.delicious-extended { font-size: 100%; display: inline; } 450 | p.delicious-extended:before { content: ' — '; } 451 | /* @end */ 452 | 453 | /* @group Footer */ 454 | #footer { 455 | margin-top: 0; 456 | color: grey; 457 | font-size: 87.5%; 458 | line-height: 1.3em; 459 | } 460 | #footer address { 461 | position: relative; 462 | margin: .5em 0 0 0; 463 | text-align: right; 464 | } 465 | #footer a { 466 | font-variant: small-caps; 467 | font-style: normal; 468 | color: #77d; 469 | text-decoration: none; 470 | } 471 | #footer .copyright { 472 | position: absolute; 473 | left: 0; 474 | text-align: left; 475 | display: block; 476 | } 477 | #footer .engine { 478 | position: absolute; 479 | text-align: right; 480 | display: block; 481 | right: 0; 482 | } 483 | /* @end */ 484 | 485 | 486 | /* @group Figures and images */ 487 | dl.figure { 488 | margin-top: 1.5em; 489 | margin-bottom: 1.5em; 490 | text-align: center; 491 | } 492 | 493 | dl.figure dd { 494 | color: #333; 495 | font-size: 0.875em; 496 | margin: 0.875em auto 0 auto; 497 | line-height: 1.14em; 498 | text-align: justify; 499 | width: 85%; 500 | } 501 | /* @end */ 502 | 503 | /* @group Equations */ 504 | div.maruku-equation { display: block ;text-align: center; } 505 | div.maruku-equation img.maruku-png { position: relative; top: -0.75em;} 506 | span.maruku-inline { } 507 | img.maruku-png { } 508 | /* @end */ 509 | 510 | /* .prev-next */ 511 | .prev-next { 512 | position:relative; 513 | } 514 | .prev-next .next{ 515 | float:right; 516 | } 517 | 518 | /* tag_box ======================================================== */ 519 | .tag_box { 520 | list-style:none; 521 | margin:0; 522 | padding:5px 0 ; 523 | overflow:hidden; 524 | } 525 | .tag_box li { 526 | list-style:none; 527 | line-height:1.8em; 528 | } 529 | .tag_box.inline li { 530 | float:left; 531 | } 532 | .tag_box a { 533 | padding: 3px 6px; 534 | margin: 2px; 535 | background: #eee; 536 | border-radius: 3px; 537 | border:1px dashed #ccc; 538 | text-decoration:none; 539 | } 540 | .tag_box a span{ 541 | vertical-align:super; 542 | font-size:0.8em; 543 | } 544 | .tag_box a.active { 545 | background:#57A957; 546 | border:1px solid #4C964D; 547 | color:#FFF; 548 | } 549 | 550 | -------------------------------------------------------------------------------- /_posts/core-samples/2011-12-29-jekyll-introduction.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | category : lessons 4 | tags : [intro, beginner, jekyll, tutorial] 5 | --- 6 | {% include JB/setup %} 7 | 8 | This Jekyll introduction will outline specifically what Jekyll is and why you would want to use it. 9 | Directly following the intro we'll learn exactly _how_ Jekyll does what it does. 10 | 11 | ## Overview 12 | 13 | ### What is Jekyll? 14 | 15 | Jekyll is a parsing engine bundled as a ruby gem used to build static websites from 16 | dynamic components such as templates, partials, liquid code, markdown, etc. Jekyll is known as "a simple, blog aware, static site generator". 17 | 18 | ### Examples 19 | 20 | This website is created with Jekyll. [Other Jekyll websites](https://github.com/mojombo/jekyll/wiki/Sites). 21 | 22 | 23 | 24 | ### What does Jekyll Do? 25 | 26 | Jekyll is a ruby gem you install on your local system. 27 | Once there you can call `jekyll --server` on a directory and provided that directory 28 | is setup in a way jekyll expects, it will do magic stuff like parse markdown/textile files, 29 | compute categories, tags, permalinks, and construct your pages from layout templates and partials. 30 | 31 | Once parsed, Jekyll stores the result in a self-contained static `_site` folder. 32 | The intention here is that you can serve all contents in this folder statically from a plain static web-server. 33 | 34 | You can think of Jekyll as a normalish dynamic blog but rather than parsing content, templates, and tags 35 | on each request, Jekyll does this once _beforehand_ and caches the _entire website_ in a folder for serving statically. 36 | 37 | ### Jekyll is Not Blogging Software 38 | 39 | **Jekyll is a parsing engine.** 40 | 41 | Jekyll does not come with any content nor does it have any templates or design elements. 42 | This is a common source of confusion when getting started. 43 | Jekyll does not come with anything you actually use or see on your website - you have to make it. 44 | 45 | ### Why Should I Care? 46 | 47 | Jekyll is very minimalistic and very efficient. 48 | The most important thing to realize about Jekyll is that it creates a static representation of your website requiring only a static web-server. 49 | Traditional dynamic blogs like Wordpress require a database and server-side code. 50 | Heavily trafficked dynamic blogs must employ a caching layer that ultimately performs the same job Jekyll sets out to do; serve static content. 51 | 52 | Therefore if you like to keep things simple and you prefer the command-line over an admin panel UI then give Jekyll a try. 53 | 54 | **Developers like Jekyll because we can write content like we write code:** 55 | 56 | - Ability to write content in markdown or textile in your favorite text-editor. 57 | - Ability to write and preview your content via localhost. 58 | - No internet connection required. 59 | - Ability to publish via git. 60 | - Ability to host your blog on a static web-server. 61 | - Ability to host freely on GitHub Pages. 62 | - No database required. 63 | 64 | # How Jekyll Works 65 | 66 | The following is a complete but concise outline of exactly how Jekyll works. 67 | 68 | Be aware that core concepts are introduced in rapid succession without code examples. 69 | This information is not intended to specifically teach you how to do anything, rather it 70 | is intended to give you the _full picture_ relative to what is going on in Jekyll-world. 71 | 72 | Learning these core concepts should help you avoid common frustrations and ultimately 73 | help you better understand the code examples contained throughout Jekyll-Bootstrap. 74 | 75 | 76 | ## Initial Setup 77 | 78 | After [installing jekyll](/index.html#start-now) you'll need to format your website directory in a way jekyll expects. 79 | Jekyll-bootstrap conveniently provides the base directory format. 80 | 81 | ### The Jekyll Application Base Format 82 | 83 | Jekyll expects your website directory to be laid out like so: 84 | 85 | . 86 | |-- _config.yml 87 | |-- _includes 88 | |-- _layouts 89 | | |-- default.html 90 | | |-- post.html 91 | |-- _posts 92 | | |-- 20011-10-25-open-source-is-good.markdown 93 | | |-- 20011-04-26-hello-world.markdown 94 | |-- _site 95 | |-- index.html 96 | |-- assets 97 | |-- css 98 | |-- style.css 99 | |-- javascripts 100 | 101 | 102 | - **\_config.yml** 103 | Stores configuration data. 104 | 105 | - **\_includes** 106 | This folder is for partial views. 107 | 108 | - **\_layouts** 109 | This folder is for the main templates your content will be inserted into. 110 | You can have different layouts for different pages or page sections. 111 | 112 | - **\_posts** 113 | This folder contains your dynamic content/posts. 114 | the naming format is required to be `@YEAR-MONTH-DATE-title.MARKUP@`. 115 | 116 | - **\_site** 117 | This is where the generated site will be placed once Jekyll is done transforming it. 118 | 119 | - **assets** 120 | This folder is not part of the standard jekyll structure. 121 | The assets folder represents _any generic_ folder you happen to create in your root directory. 122 | Directories and files not properly formatted for jekyll will be left untouched for you to serve normally. 123 | 124 | (read more: ) 125 | 126 | 127 | ### Jekyll Configuration 128 | 129 | Jekyll supports various configuration options that are fully outlined here: 130 | 131 | 132 | 133 | 134 | 135 | ## Content in Jekyll 136 | 137 | Content in Jekyll is either a post or a page. 138 | These content "objects" get inserted into one or more templates to build the final output for its respective static-page. 139 | 140 | ### Posts and Pages 141 | 142 | Both posts and pages should be written in markdown, textile, or HTML and may also contain Liquid templating syntax. 143 | Both posts and pages can have meta-data assigned on a per-page basis such as title, url path, as well as arbitrary custom meta-data. 144 | 145 | ### Working With Posts 146 | 147 | **Creating a Post** 148 | Posts are created by properly formatting a file and placing it the `_posts` folder. 149 | 150 | **Formatting** 151 | A post must have a valid filename in the form `YEAR-MONTH-DATE-title.MARKUP` and be placed in the `_posts` directory. 152 | If the data format is invalid Jekyll will not recognize the file as a post. The date and title are automatically parsed from the filename of the post file. 153 | Additionally, each file must have [YAML Front-Matter](https://github.com/mojombo/jekyll/wiki/YAML-Front-Matter) prepended to its content. 154 | YAML Front-Matter is a valid YAML syntax specifying meta-data for the given file. 155 | 156 | **Order** 157 | Ordering is an important part of Jekyll but it is hard to specify a custom ordering strategy. 158 | Only reverse chronological and chronological ordering is supported in Jekyll. 159 | 160 | Since the date is hard-coded into the filename format, to change the order, you must change the dates in the filenames. 161 | 162 | **Tags** 163 | Posts can have tags associated with them as part of their meta-data. 164 | Tags may be placed on posts by providing them in the post's YAML front matter. 165 | You have access to the post-specific tags in the templates. These tags also get added to the sitewide collection. 166 | 167 | **Categories** 168 | Posts may be categorized by providing one or more categories in the YAML front matter. 169 | Categories offer more significance over tags in that they can be reflected in the URL path to the given post. 170 | Note categories in Jekyll work in a specific way. 171 | If you define more than one category you are defining a category hierarchy "set". 172 | Example: 173 | 174 | --- 175 | title : Hello World 176 | categories : [lessons, beginner] 177 | --- 178 | 179 | This defines the category hierarchy "lessons/beginner". Note this is _one category_ node in Jekyll. 180 | You won't find "lessons" and "beginner" as two separate categories unless you define them elsewhere as singular categories. 181 | 182 | ### Working With Pages 183 | 184 | **Creating a Page** 185 | Pages are created by properly formatting a file and placing it anywhere in the root directory or subdirectories that do _not_ start with an underscore. 186 | 187 | **Formatting** 188 | In order to register as a Jekyll page the file must contain [YAML Front-Matter](https://github.com/mojombo/jekyll/wiki/YAML-Front-Matter). 189 | Registering a page means 1) that Jekyll will process the page and 2) that the page object will be available in the `site.pages` array for inclusion into your templates. 190 | 191 | **Categories and Tags** 192 | Pages do not compute categories nor tags so defining them will have no effect. 193 | 194 | **Sub-Directories** 195 | If pages are defined in sub-directories, the path to the page will be reflected in the url. 196 | Example: 197 | 198 | . 199 | |-- people 200 | |-- bob 201 | |-- essay.html 202 | 203 | This page will be available at `http://yourdomain.com/people/bob/essay.html` 204 | 205 | 206 | **Recommended Pages** 207 | 208 | - **index.html** 209 | You will always want to define the root index.html page as this will display on your root URL. 210 | - **404.html** 211 | Create a root 404.html page and GitHub Pages will serve it as your 404 response. 212 | - **sitemap.html** 213 | Generating a sitemap is good practice for SEO. 214 | - **about.html** 215 | A nice about page is easy to do and gives the human perspective to your website. 216 | 217 | 218 | ## Templates in Jekyll 219 | 220 | Templates are used to contain a page's or post's content. 221 | All templates have access to a global site object variable: `site` as well as a page object variable: `page`. 222 | The site variable holds all accessible content and metadata relative to the site. 223 | The page variable holds accessible data for the given page or post being rendered at that point. 224 | 225 | **Create a Template** 226 | Templates are created by properly formatting a file and placing it in the `_layouts` directory. 227 | 228 | **Formatting** 229 | Templates should be coded in HTML and contain YAML Front Matter. 230 | All templates can contain Liquid code to work with your site's data. 231 | 232 | **Rending Page/Post Content in a Template** 233 | There is a special variable in all templates named : `content`. 234 | The `content` variable holds the page/post content including any sub-template content previously defined. 235 | Render the content variable wherever you want your main content to be injected into your template: 236 | 237 | {% capture text %}... 238 | 239 | 240 |

241 | |.{content}.| 242 |

243 | 244 | ...{% endcapture %} 245 | {% include JB/liquid_raw %} 246 | 247 | ### Sub-Templates 248 | 249 | Sub-templates are exactly templates with the only difference being they 250 | define another "root" layout/template within their YAML Front Matter. 251 | This essentially means a template will render inside of another template. 252 | 253 | ### Includes 254 | In Jekyll you can define include files by placing them in the `_includes` folder. 255 | Includes are NOT templates, rather they are just code snippets that get included into templates. 256 | In this way, you can treat the code inside includes as if it was native to the parent template. 257 | 258 | Any valid template code may be used in includes. 259 | 260 | 261 | ## Using Liquid for Templating 262 | 263 | Templating is perhaps the most confusing and frustrating part of Jekyll. 264 | This is mainly due to the fact that Jekyll templates must use the Liquid Templating Language. 265 | 266 | ### What is Liquid? 267 | 268 | [Liquid](https://github.com/Shopify/liquid) is a secure templating language developed by [Shopify](http://shopify.com). 269 | Liquid is designed for end-users to be able to execute logic within template files 270 | without imposing any security risk on the hosting server. 271 | 272 | Jekyll uses Liquid to generate the post content within the final page layout structure and as the primary interface for working with 273 | your site and post/page data. 274 | 275 | ### Why Do We Have to Use Liquid? 276 | 277 | GitHub uses Jekyll to power [GitHub Pages](http://pages.github.com/). 278 | GitHub cannot afford to run arbitrary code on their servers so they lock developers down via Liquid. 279 | 280 | ### Liquid is Not Programmer-Friendly. 281 | 282 | The short story is liquid is not real code and its not intended to execute real code. 283 | The point being you can't do jackshit in liquid that hasn't been allowed explicitly by the implementation. 284 | What's more you can only access data-structures that have been explicitly passed to the template. 285 | 286 | In Jekyll's case it is not possible to alter what is passed to Liquid without hacking the gem or running custom plugins. 287 | Both of which cannot be supported by GitHub Pages. 288 | 289 | As a programmer - this is very frustrating. 290 | 291 | But rather than look a gift horse in the mouth we are going to 292 | suck it up and view it as an opportunity to work around limitations and adopt client-side solutions when possible. 293 | 294 | **Aside** 295 | My personal stance is to not invest time trying to hack liquid. It's really unnecessary 296 | _from a programmer's_ perspective. That is to say if you have the ability to run custom plugins (i.e. run arbitrary ruby code) 297 | you are better off sticking with ruby. Toward that end I've built [Mustache-with-Jekyll](http://github.com/plusjade/mustache-with-jekyll) 298 | 299 | 300 | ## Static Assets 301 | 302 | Static assets are any file in the root or non-underscored subfolders that are not pages. 303 | That is they have no valid YAML Front Matter and are thus not treated as Jekyll Pages. 304 | 305 | Static assets should be used for images, css, and javascript files. 306 | 307 | 308 | 309 | 310 | ## How Jekyll Parses Files 311 | 312 | Remember Jekyll is a processing engine. There are two main types of parsing in Jekyll. 313 | 314 | - **Content parsing.** 315 | This is done with textile or markdown. 316 | - **Template parsing.** 317 | This is done with the liquid templating language. 318 | 319 | And thus there are two main types of file formats needed for this parsing. 320 | 321 | - **Post and Page files.** 322 | All content in Jekyll is either a post or a page so valid posts and pages are parsed with markdown or textile. 323 | - **Template files.** 324 | These files go in `_layouts` folder and contain your blogs **templates**. They should be made in HTML with the help of Liquid syntax. 325 | Since include files are simply injected into templates they are essentially parsed as if they were native to the template. 326 | 327 | **Arbitrary files and folders.** 328 | Files that _are not_ valid pages are treated as static content and pass through 329 | Jekyll untouched and reside on your blog in the exact structure and format they originally existed in. 330 | 331 | ### Formatting Files for Parsing. 332 | 333 | We've outlined the need for valid formatting using **YAML Front Matter**. 334 | Templates, posts, and pages all need to provide valid YAML Front Matter even if the Matter is empty. 335 | This is the only way Jekyll knows you want the file processed. 336 | 337 | YAML Front Matter must be prepended to the top of template/post/page files: 338 | 339 | --- 340 | layout: post 341 | category : pages 342 | tags : [how-to, jekyll] 343 | --- 344 | 345 | ... contents ... 346 | 347 | Three hyphens on a new line start the Front-Matter block and three hyphens on a new line end the block. 348 | The data inside the block must be valid YAML. 349 | 350 | Configuration parameters for YAML Front-Matter is outlined here: 351 | [A comprehensive explanation of YAML Front Matter](https://github.com/mojombo/jekyll/wiki/YAML-Front-Matter) 352 | 353 | #### Defining Layouts for Posts and Templates Parsing. 354 | 355 | The `layout` parameter in the YAML Front Matter defines the template file for which the given post or template should be injected into. 356 | If a template file specifies its own layout, it is effectively being used as a `sub-template.` 357 | That is to say loading a post file into a template file that refers to another template file with work in the way you'd expect; as a nested sub-template. 358 | 359 | 360 | 361 | 362 | 363 | ## How Jekyll Generates the Final Static Files. 364 | 365 | Ultimately, Jekyll's job is to generate a static representation of your website. 366 | The following is an outline of how that's done: 367 | 368 | 1. **Jekyll collects data.** 369 | Jekyll scans the posts directory and collects all posts files as post objects. It then scans the layout assets and collects those and finally scans other directories in search of pages. 370 | 371 | 2. **Jekyll computes data.** 372 | Jekyll takes these objects, computes metadata (permalinks, tags, categories, titles, dates) from them and constructs one 373 | big `site` object that holds all the posts, pages, layouts, and respective metadata. 374 | At this stage your site is one big computed ruby object. 375 | 376 | 3. **Jekyll liquifies posts and templates.** 377 | Next jekyll loops through each post file and converts (through markdown or textile) and **liquifies** the post inside of its respective layout(s). 378 | Once the post is parsed and liquified inside the the proper layout structure, the layout itself is "liquified". 379 | **Liquification** is defined as follows: Jekyll initiates a Liquid template, and passes a simpler hash representation of the ruby site object as well as a simpler 380 | hash representation of the ruby post object. These simplified data structures are what you have access to in the templates. 381 | 382 | 3. **Jekyll generates output.** 383 | Finally the liquid templates are "rendered", thereby processing any liquid syntax provided in the templates 384 | and saving the final, static representation of the file. 385 | 386 | **Notes.** 387 | Because Jekyll computes the entire site in one fell swoop, each template is given access to 388 | a global `site` hash that contains useful data. It is this data that you'll iterate through and format 389 | using the Liquid tags and filters in order to render it onto a given page. 390 | 391 | Remember, in Jekyll you are an end-user. Your API has only two components: 392 | 393 | 1. The manner in which you setup your directory. 394 | 2. The liquid syntax and variables passed into the liquid templates. 395 | 396 | All the data objects available to you in the templates via Liquid are outlined in the **API Section** of Jekyll-Bootstrap. 397 | You can also read the original documentation here: 398 | 399 | ## Conclusion 400 | 401 | I hope this paints a clearer picture of what Jekyll is doing and why it works the way it does. 402 | As noted, our main programming constraint is the fact that our API is limited to what is accessible via Liquid and Liquid only. 403 | 404 | Jekyll-bootstrap is intended to provide helper methods and strategies aimed at making it more intuitive and easier to work with Jekyll =) 405 | 406 | **Thank you** for reading this far. 407 | 408 | ## Next Steps 409 | 410 | Please take a look at [{{ site.categories.api.first.title }}]({{ BASE_PATH }}{{ site.categories.api.first.url }}) 411 | or jump right into [Usage]({{ BASE_PATH }}{{ site.categories.usage.first.url }}) if you'd like. -------------------------------------------------------------------------------- /assets/themes/the-minimum/css/style.css: -------------------------------------------------------------------------------- 1 | @import "base.css"; 2 | 3 | @import "module.css"; 4 | 5 | @import "syntaxhighlighter.css"; 6 | 7 | @import "helper.css"; 8 | /* 9 | Frameless 10 | by Joni Korpi 11 | licensed under CC0 12 | 13 | No styleguide reference. 14 | */ 15 | /* 16 | Font families 17 | 18 | No styleguide reference. 19 | */ 20 | /* 21 | Base font size should be larger than 16px. 22 | Calculation should be done via http://j.mp/rNg5uA 23 | 24 | No styleguide reference. 25 | */ 26 | body { 27 | font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, "MS PGothic", Osaka, Sans-Serif; 28 | font-size: 1em; 29 | line-height: 1.625em; 30 | } 31 | /* 32 | Font size setting 33 | Using Golden ratio section (Caliculated via http://j.mp/sB6oxM): 34 | 109.657 6.854 843.515 * h1 35 | 82.241 5.14 632.623 36 | 67.773 4.236 521.331 37 | 50.829 3.177 390.992 38 | 41.887 2.618 322.208 * h2 39 | 31.415 1.963 241.654 40 | 25.888 1.618 199.138 * h3 41 | 19.416 1.214 149.354 * h4 42 | 16.000 1 123.077 * Base font size 43 | 12.000 0.75 92.308 * Minimum font size 44 | Vertical Rhythm is caluculated via http://j.mp/sUvKuN 45 | 46 | No styleguide reference. 47 | */ 48 | h1, 49 | h2, 50 | h3, 51 | h4, 52 | h5, 53 | h6 { 54 | font-family: junctionregularRegular, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, "MS PGothic", Osaka, Sans-Serif; 55 | font-weight: bold; 56 | } 57 | h1, .h1 { 58 | font-size: 42px; 59 | line-height: 52px; 60 | margin-top: 52px; 61 | margin-bottom: 26px; 62 | letter-spacing: -1px; 63 | } 64 | h2, .h2 { 65 | font-size: 42px; 66 | line-height: 52px; 67 | margin-top: 52px; 68 | margin-bottom: 26px; 69 | letter-spacing: -1px; 70 | } 71 | h3, .h3 { 72 | font-size: 26px; 73 | line-height: 26px; 74 | margin-top: 26px; 75 | margin-bottom: 26px; 76 | } 77 | h4, .h4 { 78 | font-size: 20px; 79 | line-height: 26px; 80 | margin-top: 26px; 81 | margin-bottom: 26px; 82 | } 83 | p, 84 | ul, 85 | ol, 86 | dl, 87 | img { 88 | margin-top: 0; 89 | margin-bottom: 1.625em; 90 | } 91 | small, .small, aside { 92 | font-size: 0.75em; 93 | } 94 | .font-size-default { 95 | font-size: 1em; 96 | } 97 | blockquote { 98 | font-weight: bold; 99 | } 100 | blockquote cite { 101 | font-weight: normal; 102 | } 103 | strong { 104 | font-weight: bold; 105 | } 106 | em { 107 | font-weight: bold; 108 | } 109 | /* 110 | Color schemes 111 | 112 | No styleguide reference. 113 | */ 114 | /* solarized - http://j.mp/s9Xuw9 115 | 116 | @base03: #002b36; 117 | @base02: #073642; 118 | @base01: #586e75; 119 | @base00: #657b83; 120 | @base0: #839496; 121 | @base1: #93a1a1; 122 | @base2: #eee8d5; 123 | @base3: #fdf6e3; 124 | @yellow: #b58900; 125 | @orange: #cb4b16; 126 | @red: #dc322f; 127 | // @magenta: #d33682; 128 | @violet: #6c71c4; 129 | @blue: #268bd2; 130 | @cyan: #2aa198; 131 | @green: #859900; 132 | 133 | */ 134 | /* Junction Font 135 | * http://www.theleagueofmoveabletype.com/ 136 | * Using for Logo and headers 137 | */ 138 | @font-face { 139 | font-family: 'junctionregularRegular'; 140 | src: url('/assets/themes/the-minimum/font/Junction-webfont.eot'); 141 | src: url('/assets/themes/the-minimum/font/Junction-webfont.eot?#iefix') format('embedded-opentype'), url('/assets/themes/the-minimum/font/Junction-webfont.woff') format('woff'), url('/assets/themes/the-minimum/font/Junction-webfont.ttf') format('truetype'), url('/assets/themes/the-minimum/font/Junction-webfont.svg#junctionregularRegular') format('svg'); 142 | font-weight: normal !important; 143 | font-style: normal; 144 | } 145 | /* 146 | LESS helper 147 | */ 148 | /* 149 | List modules 150 | .list-linear - list line up horizontally 151 | 152 | No styleguide reference. 153 | */ 154 | .list-linear { 155 | letter-spacing: -0.31em; 156 | *letter-spacing: normal; 157 | word-spacing: -0.43em; 158 | list-style: none; 159 | padding-left: 0; 160 | } 161 | .list-linear li { 162 | display: inline-block; 163 | *display: inline; 164 | zoom: 1; 165 | line-height: normal; 166 | letter-spacing: normal; 167 | margin-right: 16px; 168 | word-spacing: normal; 169 | vertical-align: middle; 170 | } 171 | .list-linear li:last-child { 172 | margin-right: 0; 173 | } 174 | /* LESS VARIABLES 175 | --------------------------------------------------------------------------------- */ 176 | /* GLOBAL 177 | --------------------------------------------------------------------------------- */ 178 | html { 179 | background-color: #ffffff; 180 | color: #2d2d2d; 181 | } 182 | /* LINK */ 183 | a:link { 184 | color: #2d2d2d; 185 | text-decoration: none; 186 | } 187 | a:visited { 188 | color: #141414; 189 | text-decoration: none; 190 | } 191 | a:hover { 192 | color: #474747; 193 | text-decoration: none; 194 | } 195 | /* HIGHLIGHTER */ 196 | pre { 197 | margin-bottom: 1.625em; 198 | } 199 | pre { 200 | color: #f2f2f2; 201 | background-color: #393939; 202 | border: 1px solid #393939; 203 | font-family: "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; 204 | margin-left: 0; 205 | margin-right: 0; 206 | padding: 1.625em; 207 | overflow: auto; 208 | -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.6); 209 | -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.6); 210 | box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.6); 211 | } 212 | /* meta */ 213 | /* HEADER 214 | --------------------------------------------------------------------------------- */ 215 | .the-header .logo { 216 | font-family: junctionregularRegular, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, "MS PGothic", Osaka, Sans-Serif; 217 | margin: 0; 218 | } 219 | .the-header .logo a:visited { 220 | color: #2d2d2d; 221 | } 222 | .the-header .nav-global { 223 | text-transform: uppercase; 224 | } 225 | .the-header .nav-global .forkme { 226 | position: relative; 227 | top: 2px; 228 | } 229 | /* MAIN 230 | --------------------------------------------------------------------------------- */ 231 | .unit-article header { 232 | background: url('/assets/themes/the-minimum/skin/100-90-5-monochrome.png'); 233 | background-repeat: repeat; 234 | background-position: 0 0; 235 | background-color: #BADA55; 236 | margin-bottom: 1.625em; 237 | padding-top: 1.625em; 238 | padding-bottom: 1.625em; 239 | } 240 | .unit-article header h1 { 241 | color: #2d2d2d; 242 | margin-top: 0; 243 | margin-bottom: 0; 244 | } 245 | .unit-article .entry-content h2, 246 | .unit-article .entry-content h3, 247 | .unit-article .entry-content h4, 248 | .unit-article .entry-content h5, 249 | .unit-article .entry-content h6 { 250 | color: #2d2d2d; 251 | } 252 | .unit-article .entry-content h2 a:link, 253 | .unit-article .entry-content h3 a:link, 254 | .unit-article .entry-content h4 a:link, 255 | .unit-article .entry-content h5 a:link, 256 | .unit-article .entry-content h6 a:link { 257 | color: #2d2d2d; 258 | border: 0; 259 | } 260 | .unit-article .entry-content h2 a:visited, 261 | .unit-article .entry-content h3 a:visited, 262 | .unit-article .entry-content h4 a:visited, 263 | .unit-article .entry-content h5 a:visited, 264 | .unit-article .entry-content h6 a:visited { 265 | color: #141414; 266 | border: 0; 267 | } 268 | .unit-article .entry-content h2 a:hover, 269 | .unit-article .entry-content h3 a:hover, 270 | .unit-article .entry-content h4 a:hover, 271 | .unit-article .entry-content h5 a:hover, 272 | .unit-article .entry-content h6 a:hover { 273 | color: #474747; 274 | border: 0; 275 | } 276 | .unit-article .entry-content:first-child h2, 277 | .unit-article .entry-content:first-child h3, 278 | .unit-article .entry-content:first-child h4, 279 | .unit-article .entry-content:first-child h5, 280 | .unit-article .entry-content:first-child h6 { 281 | margin-top: 0; 282 | } 283 | .unit-article a:link { 284 | border-bottom: 1px dotted #99cc99; 285 | } 286 | .unit-article a:visited { 287 | border-bottom: 1px dotted #77bb77; 288 | } 289 | .unit-article a:hover { 290 | border-bottom: 1px dotted #bbddbb; 291 | } 292 | .unit-article blockquote { 293 | border-left: 1em solid rgba(21, 25, 25, 0.8); 294 | padding-left: 1em; 295 | } 296 | .unit-article blockquote p { 297 | margin-left: 0; 298 | margin-right: 0; 299 | } 300 | .unit-article ul, .unit-article ol, .unit-article dl { 301 | padding-left: 0; 302 | } 303 | .unit-article ul { 304 | list-style: square; 305 | } 306 | .unit-article ol { 307 | list-style: decimal; 308 | } 309 | .unit-article li h1, 310 | .unit-article dt h1, 311 | .unit-article dd h1, 312 | .unit-article li h2, 313 | .unit-article dt h2, 314 | .unit-article dd h2, 315 | .unit-article li h3, 316 | .unit-article dt h3, 317 | .unit-article dd h3, 318 | .unit-article li h4, 319 | .unit-article dt h4, 320 | .unit-article dd h4, 321 | .unit-article li h5, 322 | .unit-article dt h5, 323 | .unit-article dd h5, 324 | .unit-article li p, 325 | .unit-article dt p, 326 | .unit-article dd p, 327 | .unit-article li ul, 328 | .unit-article dt ul, 329 | .unit-article dd ul, 330 | .unit-article li ol, 331 | .unit-article dt ol, 332 | .unit-article dd ol, 333 | .unit-article li dl, 334 | .unit-article dt dl, 335 | .unit-article dd dl, 336 | .unit-article li blockquote, 337 | .unit-article dt blockquote, 338 | .unit-article dd blockquote, 339 | .unit-article li .hasGrid, 340 | .unit-article dt .hasGrid, 341 | .unit-article dd .hasGrid { 342 | margin-left: 0; 343 | margin-right: 0; 344 | } 345 | .unit-article p code, .unit-article li code { 346 | margin: 0 2px; 347 | padding: 2px 5px; 348 | white-space: nowrap; 349 | border: 1px solid #CCC; 350 | background-color: #F8F8F8; 351 | -webkit-border-radius: 3px; 352 | -moz-border-radius: 3px; 353 | border-radius: 3px; 354 | -moz-background-clip: padding; 355 | -webkit-background-clip: padding-box; 356 | background-clip: padding-box; 357 | } 358 | .unit-article img { 359 | display: block; 360 | margin-left: auto; 361 | margin-left: auto; 362 | } 363 | .unit-article img.left { 364 | margin-right: 16px; 365 | } 366 | .unit-article img.right { 367 | margin-left: 16px; 368 | } 369 | .unit-article .date-publish { 370 | margin-bottom: 0; 371 | } 372 | .unit-article .list-linear .list-head { 373 | margin-right: 4px; 374 | } 375 | .unit-article .list-category a, .unit-article .list-tag a { 376 | border: 0 none; 377 | } 378 | .unit-article .list-category a:hover span, .unit-article .list-tag a:hover span { 379 | background-color: #f99157; 380 | } 381 | .unit-article .list-category span, .unit-article .list-tag span { 382 | background-color: #e25608; 383 | padding: 1px 5px; 384 | -webkit-border-radius: 10px; 385 | -moz-border-radius: 10px; 386 | border-radius: 10px; 387 | color: white; 388 | text-transform: uppercase; 389 | margin: 0 6px 0 0; 390 | display: inline-block; 391 | position: relative; 392 | vertical-align: middle; 393 | top: -2px; 394 | font-weight: bold; 395 | font-size: 10px; 396 | } 397 | .unit-article .list-category { 398 | margin-bottom: 0; 399 | text-transform: capitalize; 400 | } 401 | .unit-article .list-tag { 402 | text-transform: capitalize; 403 | } 404 | .unit-article .unit-foot { 405 | background: url('/assets/themes/the-minimum/skin/100-90-5-monochrome.png') repeat 0 0 #4d4d4d; 406 | color: #fafafa; 407 | padding-top: 1.625em; 408 | padding-bottom: 1.625em; 409 | position: relative; 410 | } 411 | .unit-article .unit-foot a:link { 412 | color: #fafafa; 413 | } 414 | .unit-article .unit-foot a:visited { 415 | color: #fafafa; 416 | } 417 | .unit-article .unit-foot a:hover { 418 | color: #ffffff; 419 | } 420 | .unit-article .unit-foot nav ul { 421 | list-style: none; 422 | } 423 | .unit-article .unit-foot nav ul li { 424 | display: inline; 425 | } 426 | .unit-article .unit-foot .gotop { 427 | margin-bottom: 0; 428 | } 429 | /* post & page */ 430 | .layout-page .tag_box { 431 | background: url('/assets/themes/the-minimum/skin/100-90-5-monochrome.png') repeat 0 0 #999999; 432 | padding: 0.8125em; 433 | list-style: none; 434 | -webkit-border-radius: 3px; 435 | -moz-border-radius: 3px; 436 | border-radius: 3px; 437 | -moz-background-clip: padding; 438 | -webkit-background-clip: padding-box; 439 | background-clip: padding-box; 440 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.4); 441 | -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.4); 442 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4); 443 | } 444 | .layout-page .tag_box li { 445 | display: inline; 446 | line-height: normal; 447 | vertical-align: middle; 448 | } 449 | .layout-page .tag_box a { 450 | background-color: #99cc99; 451 | float: left; 452 | border: 1px solid #448844; 453 | padding: 3px 6px 3px 6px; 454 | -webkit-border-radius: 3px; 455 | -moz-border-radius: 3px; 456 | border-radius: 3px; 457 | margin: 5px; 458 | -moz-background-clip: padding; 459 | -webkit-background-clip: padding-box; 460 | background-clip: padding-box; 461 | text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.4); 462 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 463 | -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 464 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 465 | -webkit-transition-duration: 0.2s; 466 | -moz-transition-duration: 0.2s; 467 | transition-duration: 0.2s; 468 | -webkit-user-select: none; 469 | -moz-user-select: none; 470 | -ms-user-select: none; 471 | user-select: none; 472 | } 473 | .layout-page .tag_box a:active { 474 | -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); 475 | -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); 476 | box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.6); 477 | background: #336633; 478 | border: solid #336633; 479 | } 480 | .layout-page .tag_box a:hover { 481 | background-color: #77bb77; 482 | border: 1px solid #336633; 483 | } 484 | .layout-page .tag_box a:hover span { 485 | background-color: #e1e1e1; 486 | border: 1px solid #77bb77; 487 | } 488 | .layout-page .tag_box span { 489 | background-color: #fafafa; 490 | border: 1px solid #99cc99; 491 | padding: 1px 5px; 492 | -webkit-border-radius: 10px; 493 | -moz-border-radius: 10px; 494 | border-radius: 10px; 495 | color: #1a1a1a; 496 | display: inline-block; 497 | position: relative; 498 | vertical-align: middle; 499 | top: -2px; 500 | font-weight: bold; 501 | font-size: 10px; 502 | -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 503 | -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 504 | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2); 505 | } 506 | /* FOOTER 507 | ----------------------------------------------- */ 508 | .the-footer { 509 | background-color: #1a1a1a; 510 | background-color: rgba(21, 25, 25, 0.8); 511 | color: #fafafa; 512 | color: rgba(250, 250, 250, 0.8); 513 | padding-bottom: 1.625em; 514 | } 515 | .the-footer a:link { 516 | color: #99cc99; 517 | border: 0; 518 | } 519 | .the-footer a:visited { 520 | color: #77bb77; 521 | border: 0; 522 | } 523 | .the-footer a:hover { 524 | color: #bbddbb; 525 | border: 0; 526 | } 527 | .the-footer ul { 528 | list-style: square; 529 | padding-left: 1em; 530 | } 531 | .the-footer address { 532 | font-style: normal; 533 | } 534 | .the-footer .license { 535 | clear: both; 536 | } 537 | .the-footer .license p { 538 | margin-bottom: 0; 539 | } 540 | .the-header .unit-inner { 541 | width: 15em; 542 | margin-top: 1.625em; 543 | margin-bottom: 1.625em; 544 | margin-left: auto; 545 | margin-right: auto; 546 | } 547 | .the-header .logo a { 548 | font-size: 32px; 549 | line-height: 42px; 550 | } 551 | .unit-article .unit-head-inner, 552 | .unit-article .entry-content, 553 | .unit-article .misc-content, 554 | .unit-article .unit-foot-inner { 555 | width: 15em; 556 | margin-left: auto; 557 | margin-right: auto; 558 | } 559 | .unit-article .unit-head-inner .meta { 560 | margin-bottom: 1.625em; 561 | } 562 | .layout-page .unit-body .unit-body-inner { 563 | width: 15em; 564 | margin-left: auto; 565 | margin-right: auto; 566 | } 567 | .layout-page .unit-body .article-list .meta { 568 | margin-bottom: 1.625em; 569 | } 570 | .the-footer .unit-foot { 571 | width: 15em; 572 | margin-left: auto; 573 | margin-right: auto; 574 | } 575 | /* 576 | IE 577 | */ 578 | .ie .the-header .unit-inner { 579 | width: 60em; 580 | margin-top: 1.625em; 581 | margin-bottom: 1.625em; 582 | margin-left: auto; 583 | margin-right: auto; 584 | } 585 | .ie .the-header .logo { 586 | width: 26.25em; 587 | float: left; 588 | } 589 | .ie .the-header .nav-global { 590 | margin-top: 50px; 591 | text-align: right; 592 | width: 26.25em; 593 | float: right; 594 | } 595 | .ie .unit-article .unit-head-inner, 596 | .ie .unit-article .entry-content, 597 | .ie .unit-article .misc-content, 598 | .ie .unit-article .unit-foot-inner { 599 | width: 60em; 600 | margin-left: auto; 601 | margin-right: auto; 602 | } 603 | .ie .unit-article .unit-head-inner h1, 604 | .ie .unit-article .entry-content h1, 605 | .ie .unit-article .misc-content h1, 606 | .ie .unit-article .unit-head-inner h2, 607 | .ie .unit-article .entry-content h2, 608 | .ie .unit-article .misc-content h2, 609 | .ie .unit-article .unit-head-inner h3, 610 | .ie .unit-article .entry-content h3, 611 | .ie .unit-article .misc-content h3, 612 | .ie .unit-article .unit-head-inner h4, 613 | .ie .unit-article .entry-content h4, 614 | .ie .unit-article .misc-content h4, 615 | .ie .unit-article .unit-head-inner h5, 616 | .ie .unit-article .entry-content h5, 617 | .ie .unit-article .misc-content h5, 618 | .ie .unit-article .unit-head-inner p, 619 | .ie .unit-article .entry-content p, 620 | .ie .unit-article .misc-content p, 621 | .ie .unit-article .unit-head-inner ul, 622 | .ie .unit-article .entry-content ul, 623 | .ie .unit-article .misc-content ul, 624 | .ie .unit-article .unit-head-inner ol, 625 | .ie .unit-article .entry-content ol, 626 | .ie .unit-article .misc-content ol, 627 | .ie .unit-article .unit-head-inner dl, 628 | .ie .unit-article .entry-content dl, 629 | .ie .unit-article .misc-content dl, 630 | .ie .unit-article .unit-head-inner blockquote, 631 | .ie .unit-article .entry-content blockquote, 632 | .ie .unit-article .misc-content blockquote { 633 | margin-right: 210px; 634 | } 635 | .ie .unit-article .unit-head-inner .meta { 636 | width: 20.625em; 637 | float: right; 638 | } 639 | .ie .layout-page .unit-body .unit-body-inner { 640 | width: 43.125em; 641 | margin-left: auto; 642 | margin-right: auto; 643 | } 644 | .ie .layout-page .unit-body .article-list { 645 | width: 43.125em; 646 | } 647 | .ie .layout-page .unit-body .article-list .meta { 648 | width: 20.625em; 649 | float: right; 650 | } 651 | .ie .the-footer .unit-foot { 652 | width: 60em; 653 | margin-left: auto; 654 | margin-right: auto; 655 | } 656 | /* 657 | Smartphone 658 | */ 659 | @media only screen and (min-width: 320px) and (max-width: 767px) { 660 | img { 661 | max-width: 100%; 662 | } 663 | } 664 | /* 665 | Wide Smartphone 666 | */ 667 | @media only screen and (min-width: 480px) { 668 | .the-header .unit-inner { 669 | width: 26.25em; 670 | } 671 | .the-header .logo a { 672 | font-size: 42px; 673 | line-height: 52px; 674 | letter-spacing: -1px; 675 | } 676 | .the-header .nav-global { 677 | margin-top: 1.625em; 678 | letter-spacing: -0.31em; 679 | *letter-spacing: normal; 680 | word-spacing: -0.43em; 681 | list-style: none; 682 | padding-left: 0; 683 | } 684 | .the-header .nav-global .home:after { 685 | margin-left: 16px; 686 | content: "/"; 687 | } 688 | .the-header .nav-global li { 689 | display: inline-block; 690 | *display: inline; 691 | zoom: 1; 692 | line-height: normal; 693 | letter-spacing: normal; 694 | margin-right: 16px; 695 | word-spacing: normal; 696 | vertical-align: middle; 697 | } 698 | .the-header .nav-global li:last-child { 699 | margin-right: 0; 700 | } 701 | .unit-article .unit-head-inner, 702 | .unit-article .entry-content, 703 | .unit-article .misc-content, 704 | .unit-article .unit-foot-inner { 705 | width: 26.25em; 706 | } 707 | .unit-article .unit-foot .gotop { 708 | margin-top: 1.625em; 709 | } 710 | .layout-page .unit-body .unit-body-inner { 711 | width: 26.25em; 712 | } 713 | .layout-page .unit-body .article-list { 714 | width: 26.25em; 715 | } 716 | .the-footer .unit-foot { 717 | width: 26.25em; 718 | } 719 | } 720 | /* 721 | Tablet 722 | */ 723 | @media only screen and (min-width: 768px) { 724 | .the-header .unit-inner { 725 | width: 43.125em; 726 | } 727 | .unit-article .unit-head-inner, 728 | .unit-article .entry-content, 729 | .unit-article .misc-content, 730 | .unit-article .unit-foot-inner { 731 | width: 43.125em; 732 | } 733 | .unit-article .unit-head-inner .meta { 734 | margin-bottom: 0; 735 | text-align: right; 736 | width: 20.625em; 737 | float: right; 738 | } 739 | .layout-page .unit-body .unit-body-inner { 740 | width: 43.125em; 741 | } 742 | .layout-page .unit-body .article-list { 743 | width: 43.125em; 744 | } 745 | .layout-page .unit-body .article-list .meta { 746 | margin-bottom: 0; 747 | text-align: right; 748 | width: 20.625em; 749 | float: right; 750 | } 751 | .the-footer .unit-foot { 752 | width: 43.125em; 753 | } 754 | } 755 | /* 756 | Not that old computer layout 757 | */ 758 | @media only screen and (min-width: 1280px) { 759 | .the-header .unit-inner { 760 | width: 60em; 761 | } 762 | .the-header .logo { 763 | width: 26.25em; 764 | float: left; 765 | } 766 | .the-header .nav-global { 767 | margin-top: 21px; 768 | text-align: right; 769 | width: 26.25em; 770 | float: right; 771 | } 772 | .unit-article .unit-head-inner, 773 | .unit-article .entry-content, 774 | .unit-article .misc-content, 775 | .unit-article .unit-foot-inner { 776 | width: 43.125em; 777 | } 778 | .unit-article .unit-foot .pagination { 779 | float: left; 780 | width: 37.5em; 781 | } 782 | .unit-article .unit-foot .gotop { 783 | float: right; 784 | margin-top: 0; 785 | text-align: right; 786 | width: 20.625em; 787 | } 788 | .layout-page .unit-body .unit-body-inner { 789 | width: 43.125em; 790 | } 791 | .layout-page .unit-body .article-list { 792 | width: 43.125em; 793 | } 794 | .layout-page .unit-body .article-list .meta { 795 | width: 20.625em; 796 | } 797 | .the-footer .unit-foot { 798 | width: 60em; 799 | } 800 | } 801 | /* 802 | Huge-screen layout 803 | */ 804 | @media only screen and (min-width: 1410px) { 805 | .the-header .unit-inner { 806 | width: 88.125em; 807 | } 808 | .the-header .logo { 809 | width: 43.125em; 810 | } 811 | .the-header .nav-global { 812 | width: 43.125em; 813 | } 814 | .unit-article .unit-head-inner, .unit-article .entry-content, .unit-article .misc-content { 815 | width: 43.125em; 816 | } 817 | .unit-article .unit-foot-inner { 818 | width: 88.125em; 819 | } 820 | .unit-article .unit-foot .pagination { 821 | width: 54.375em; 822 | } 823 | .unit-article .unit-foot .gotop { 824 | padding-right: 360px; 825 | width: 9.375em; 826 | } 827 | .layout-page .unit-body .unit-body-inner { 828 | width: 43.125em; 829 | } 830 | .layout-page .unit-body .article-list { 831 | width: 43.125em; 832 | } 833 | .layout-page .unit-body .article-list .meta { 834 | width: 20.625em; 835 | } 836 | .the-footer .unit-foot { 837 | width: 88.125em; 838 | } 839 | .the-footer .unit-inner h1, 840 | .the-footer .unit-inner h2, 841 | .the-footer .unit-inner h3, 842 | .the-footer .unit-inner h4, 843 | .the-footer .unit-inner h5, 844 | .the-footer .unit-inner p, 845 | .the-footer .unit-inner ul, 846 | .the-footer .unit-inner ol, 847 | .the-footer .unit-inner dl, 848 | .the-footer .unit-inner blockquote { 849 | margin-left: 360px; 850 | margin-right: 360px; 851 | } 852 | } 853 | -------------------------------------------------------------------------------- /assets/themes/the-minimum/font/Junction-webfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | --------------------------------------------------------------------------------

Facebook comments TODO!

{{ page.title }}

{{ page.title }} Supporting tagline

All Pages

{{ tag[0] }}

{{ category[0] | join: "/" }}

{{ page.title }}

{{ page.title }}

{{ page.title }}

{{ page.title }} Supporting tagline

Published

Tags

{{this_year}}

{{this_month}}

{{next_year}}

{{next_month}}

{{next_month}}

32 | {{ site.title }} 33 | ← {{ site.author.name }} 34 |

{{ page.title }}

Facebook comments TODO!

{{ page.title }}

{{ page.title }} Supporting tagline

All Pages

{{ tag[0] }}

{{ category[0] | join: "/" }}

{{ page.title }}

Related Posts

{{ page.title }}

{{ page.title }} Supporting tagline

Published

Tags

{{this_year}}

{{this_month}}

{{next_year}}

{{next_month}}

{{next_month}}

32 | {{ site.title }} 33 | ← {{ site.author.name }} 34 |