├── .gitignore ├── _config.yml ├── favicon.ico ├── images └── 1.jpg ├── fonts ├── sourcesanspro-bold-webfont.eot ├── sourcesanspro-bold-webfont.ttf ├── sourcesanspro-bold-webfont.woff ├── sourcesanspro-regular-webfont.eot ├── sourcesanspro-regular-webfont.ttf ├── sourcesanspro-regular-webfont.woff ├── sourcesanspro-semibold-webfont.eot ├── sourcesanspro-semibold-webfont.ttf ├── sourcesanspro-semibold-webfont.woff ├── specimen_files │ ├── sourcesanspro-bold-cleartype.png │ ├── sourcesanspro-regular-cleartype.png │ ├── sourcesanspro-semibold-cleartype.png │ ├── easytabs.js │ ├── grid_12-825-55-15.css │ └── specimen_stylesheet.css ├── icons_svg_source │ ├── app │ │ ├── circle.svg │ │ ├── square.svg │ │ ├── arrow-up.svg │ │ ├── arrow-down.svg │ │ ├── arrow-left.svg │ │ └── arrow-right.svg │ ├── ios │ │ ├── locate.svg │ │ ├── arrow-right.svg │ │ ├── alarm.svg │ │ ├── battery.svg │ │ └── lock.svg │ └── android │ │ ├── battery-colored.svg │ │ ├── system-home.svg │ │ ├── system-apps.svg │ │ ├── battery.svg │ │ ├── system-back.svg │ │ ├── network.svg │ │ └── wifi.svg ├── generator_config.txt ├── stylesheet.css ├── sourcesanspro-bold-demo.html └── sourcesanspro-regular-demo.html ├── 404.html ├── README.md ├── _layouts ├── base.html └── post.html ├── _includes ├── footer.html ├── head.html └── header.html ├── scss ├── site │ ├── _vars.scss │ ├── _grid.scss │ ├── _image_alignment.scss │ ├── _fonts.scss │ ├── _blog.scss │ ├── _mixins.scss │ └── _normalize.scss ├── components │ ├── _bordered-list.scss │ ├── _nav.scss │ ├── _table.scss │ └── _pygments.scss └── screen.scss ├── _posts ├── 2013-06-05-post-with-a-video.md ├── 2013-06-05-lorem-ipsum.md ├── 2013-06-15-code-post.md └── 2013-06-13-dolor-sit-amet.md ├── atom.xml ├── config.rb ├── blog.html ├── index.html ├── js └── respond.min.js ├── sample-page.html ├── documentation.html └── css └── screen.css /.gitignore: -------------------------------------------------------------------------------- 1 | _site/ -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | name: Sitename 2 | markdown: kramdown 3 | baseurl: "/" 4 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wolfr/cactus-jekyll-theme/HEAD/favicon.ico -------------------------------------------------------------------------------- /images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wolfr/cactus-jekyll-theme/HEAD/images/1.jpg -------------------------------------------------------------------------------- /fonts/sourcesanspro-bold-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wolfr/cactus-jekyll-theme/HEAD/fonts/sourcesanspro-bold-webfont.eot -------------------------------------------------------------------------------- /fonts/sourcesanspro-bold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wolfr/cactus-jekyll-theme/HEAD/fonts/sourcesanspro-bold-webfont.ttf -------------------------------------------------------------------------------- /fonts/sourcesanspro-bold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wolfr/cactus-jekyll-theme/HEAD/fonts/sourcesanspro-bold-webfont.woff -------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: base 3 | title: 404 4 | --- 5 | 6 |
7 |

Sorry, this page does not exist.

8 |
-------------------------------------------------------------------------------- /fonts/sourcesanspro-regular-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wolfr/cactus-jekyll-theme/HEAD/fonts/sourcesanspro-regular-webfont.eot -------------------------------------------------------------------------------- /fonts/sourcesanspro-regular-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wolfr/cactus-jekyll-theme/HEAD/fonts/sourcesanspro-regular-webfont.ttf -------------------------------------------------------------------------------- /fonts/sourcesanspro-regular-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wolfr/cactus-jekyll-theme/HEAD/fonts/sourcesanspro-regular-webfont.woff -------------------------------------------------------------------------------- /fonts/sourcesanspro-semibold-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wolfr/cactus-jekyll-theme/HEAD/fonts/sourcesanspro-semibold-webfont.eot -------------------------------------------------------------------------------- /fonts/sourcesanspro-semibold-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wolfr/cactus-jekyll-theme/HEAD/fonts/sourcesanspro-semibold-webfont.ttf -------------------------------------------------------------------------------- /fonts/sourcesanspro-semibold-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wolfr/cactus-jekyll-theme/HEAD/fonts/sourcesanspro-semibold-webfont.woff -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Cactus Jekyll theme 2 | 3 | Cactus is a theme for Jekyll. Check out the demo. -------------------------------------------------------------------------------- /fonts/specimen_files/sourcesanspro-bold-cleartype.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wolfr/cactus-jekyll-theme/HEAD/fonts/specimen_files/sourcesanspro-bold-cleartype.png -------------------------------------------------------------------------------- /_layouts/base.html: -------------------------------------------------------------------------------- 1 | {% include head.html %} 2 | 3 | 4 | {% include header.html %} 5 | {{ content }} 6 | {% include footer.html %} 7 | 8 | 9 | -------------------------------------------------------------------------------- /fonts/specimen_files/sourcesanspro-regular-cleartype.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wolfr/cactus-jekyll-theme/HEAD/fonts/specimen_files/sourcesanspro-regular-cleartype.png -------------------------------------------------------------------------------- /fonts/specimen_files/sourcesanspro-semibold-cleartype.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Wolfr/cactus-jekyll-theme/HEAD/fonts/specimen_files/sourcesanspro-semibold-cleartype.png -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /scss/site/_vars.scss: -------------------------------------------------------------------------------- 1 | // Base media queries 2 | $break-large: 960px; 3 | $break-medium: 768px; 4 | $break-small-medium: 480px; 5 | 6 | // Base colors 7 | $dark-bg: #485934; 8 | $light-bg: #EDEFF1; 9 | $muted-text: #999; 10 | $link-color: $dark-bg; -------------------------------------------------------------------------------- /_posts/2013-06-05-post-with-a-video.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Intro video 4 | --- 5 | 6 |

Post with a video to demonstrate fluid videos.

7 | 8 |
9 | 10 |
11 | 12 | -------------------------------------------------------------------------------- /scss/components/_bordered-list.scss: -------------------------------------------------------------------------------- 1 | .bordered-list { 2 | margin: 0; 3 | padding: 0; 4 | span { 5 | display: inline-block; 6 | text-align: right; 7 | float: right; 8 | } 9 | li { 10 | clear: both; 11 | list-style: none; 12 | padding: 0 0 4px; 13 | margin: 0 0 4px; 14 | border-bottom: 1px solid #EEE; 15 | &:last-child { 16 | border: none; 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /scss/site/_grid.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Grid using Susy 3 | */ 4 | 5 | // Susy default grid values 6 | $total-columns : 6; 7 | $column-width : 140px; 8 | $gutter-width : 20px; 9 | $grid-padding : 20px; 10 | 11 | // Fluid pages 12 | 13 | $container-style: magic; 14 | 15 | // Container 16 | #header > .inner-content, 17 | #content > .inner-content, 18 | #footer > .inner-content { 19 | // page acts as a container for our grid. 20 | @include container; 21 | } 22 | -------------------------------------------------------------------------------- /_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{ page.title }} 7 | 8 | 9 | 12 | -------------------------------------------------------------------------------- /_posts/2013-06-05-lorem-ipsum.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Lorem ipsum 4 | --- 5 | 6 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-------------------------------------------------------------------------------- /fonts/icons_svg_source/app/circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /fonts/generator_config.txt: -------------------------------------------------------------------------------- 1 | # Font Squirrel Font-face Generator Configuration File 2 | # Upload this file to the generator to recreate the settings 3 | # you used to create these fonts. 4 | 5 | {"mode":"expert","formats":["ttf","woff","eotz","svg"],"tt_instructor":"default","fix_vertical_metrics":"Y","fix_gasp":"xy","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"basic","subset_custom":"","subset_custom_range":"","css_stylesheet":"stylesheet.css","filename_suffix":"-webfont","emsquare":"2048","spacing_adjustment":"0","rememberme":"Y"} -------------------------------------------------------------------------------- /fonts/icons_svg_source/app/square.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /fonts/icons_svg_source/ios/locate.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /fonts/icons_svg_source/android/battery-colored.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /_includes/header.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /fonts/icons_svg_source/app/arrow-up.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /fonts/icons_svg_source/app/arrow-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /fonts/icons_svg_source/app/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /fonts/icons_svg_source/app/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /fonts/icons_svg_source/ios/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /fonts/icons_svg_source/android/system-home.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 8 | 9 | -------------------------------------------------------------------------------- /fonts/icons_svg_source/android/system-apps.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 8 | 9 | -------------------------------------------------------------------------------- /_posts/2013-06-15-code-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: A post with some code 4 | date: 2013-06-16 12:26:00 GMT+1 5 | --- 6 | 7 | Blog post with some code. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. 8 | 9 | {% highlight scss %} 10 | p { 11 | font-size: 14px; 12 | color: #333; 13 | } 14 | {% endhighlight %} 15 | 16 | Incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. -------------------------------------------------------------------------------- /fonts/icons_svg_source/android/battery.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /fonts/icons_svg_source/ios/alarm.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 8 | 9 | -------------------------------------------------------------------------------- /fonts/icons_svg_source/android/system-back.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 8 | 9 | -------------------------------------------------------------------------------- /scss/site/_image_alignment.scss: -------------------------------------------------------------------------------- 1 | 2 | /* 3 | Image alignment 4 | */ 5 | 6 | .cl-docs { 7 | // Wordpress 8 | 9 | a[rel="attachment"] { 10 | border: none; 11 | } 12 | 13 | .aligncenter { 14 | margin: 0 auto; 15 | display: block; 16 | } 17 | 18 | .wp-caption { 19 | text-align: right; 20 | a { 21 | border: none; 22 | } 23 | .wp-caption-text { 24 | color: #999; 25 | font-size: 13px; 26 | } 27 | } 28 | 29 | img.alignright, 30 | div.alignright { 31 | float: right; 32 | margin: 0 0 12px 12px; 33 | } 34 | 35 | img.alignleft, 36 | div.alignleft { 37 | float: left; 38 | margin: 0 12px 12px 0; 39 | } 40 | 41 | img.aligncenter { 42 | margin: 0 auto 12px; 43 | clear: both; 44 | } 45 | 46 | } 47 | -------------------------------------------------------------------------------- /atom.xml: -------------------------------------------------------------------------------- 1 | --- 2 | layout: nil 3 | --- 4 | 5 | 6 | My RSS feed 7 | 8 | 9 | {{ site.time | date_to_xmlschema }} 10 | http://mydomain.com/ 11 | 12 | Firstname Lastname 13 | yourmail@domain.com 14 | 15 | {% for post in site.posts %} 16 | 17 | {{ post.title }} 18 | 19 | {{ post.date | date_to_xmlschema }} 20 | http://mydomain.com{{ post.id }} 21 | {{ post.content | xml_escape }} 22 | 23 | {% endfor %} 24 | -------------------------------------------------------------------------------- /fonts/icons_svg_source/android/network.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /config.rb: -------------------------------------------------------------------------------- 1 | # Require any additional compass plugins here. 2 | 3 | # Set this to the root of your project when deployed: 4 | http_path = "/" 5 | css_dir = "css" 6 | sass_dir = "scss" 7 | images_dir = "images" 8 | javascripts_dir = "javascripts" 9 | 10 | # You can select your preferred output style here (can be overridden via the command line): 11 | # output_style = :expanded or :nested or :compact or :compressed 12 | 13 | output_style = :compressed 14 | 15 | # To enable relative paths to assets via compass helper functions. Uncomment: 16 | # relative_assets = true 17 | 18 | # To disable debugging comments that display the original location of your selectors. Uncomment: 19 | line_comments = false 20 | 21 | # If you prefer the indented syntax, you might want to regenerate this 22 | # project again passing --syntax sass, or you can uncomment this: 23 | # preferred_syntax = :sass 24 | # and then run: 25 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass 26 | require "susy" -------------------------------------------------------------------------------- /fonts/icons_svg_source/ios/battery.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /fonts/specimen_files/easytabs.js: -------------------------------------------------------------------------------- 1 | (function($){$.fn.easyTabs=function(option){var param=jQuery.extend({fadeSpeed:"fast",defaultContent:1,activeClass:'active'},option);$(this).each(function(){var thisId="#"+this.id;if(param.defaultContent==''){param.defaultContent=1;} 2 | if(typeof param.defaultContent=="number") 3 | {var defaultTab=$(thisId+" .tabs li:eq("+(param.defaultContent-1)+") a").attr('href').substr(1);}else{var defaultTab=param.defaultContent;} 4 | $(thisId+" .tabs li a").each(function(){var tabToHide=$(this).attr('href').substr(1);$("#"+tabToHide).addClass('easytabs-tab-content');});hideAll();changeContent(defaultTab);function hideAll(){$(thisId+" .easytabs-tab-content").hide();} 5 | function changeContent(tabId){hideAll();$(thisId+" .tabs li").removeClass(param.activeClass);$(thisId+" .tabs li a[href=#"+tabId+"]").closest('li').addClass(param.activeClass);if(param.fadeSpeed!="none") 6 | {$(thisId+" #"+tabId).fadeIn(param.fadeSpeed);}else{$(thisId+" #"+tabId).show();}} 7 | $(thisId+" .tabs li").click(function(){var tabId=$(this).find('a').attr('href').substr(1);changeContent(tabId);return false;});});}})(jQuery); -------------------------------------------------------------------------------- /_posts/2013-06-13-dolor-sit-amet.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Dolor sit amet 4 | date: 2013-06-13 17:00:00 GMT+1 5 | --- 6 | 7 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 8 | 9 | * Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat. 10 | * Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus. 11 | * Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi. 12 | * Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. 13 | 14 | -------------------------------------------------------------------------------- /fonts/icons_svg_source/ios/lock.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /fonts/icons_svg_source/android/wifi.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 8 | 10 | 12 | 14 | 15 | -------------------------------------------------------------------------------- /scss/components/_nav.scss: -------------------------------------------------------------------------------- 1 | /**** 2 | Nav adapted from bootstrap 3 | ****/ 4 | 5 | 6 | .nav { 7 | margin-left: 0; 8 | margin-bottom: 20px; 9 | list-style: none; 10 | } 11 | .nav > li > a { 12 | display: block; 13 | } 14 | .nav > li > a:hover, 15 | .nav > li > a:focus { 16 | text-decoration: none; 17 | background-color: #EEE; 18 | } 19 | .nav-tabs > li > a, 20 | .nav-pills > li > a { 21 | padding-right: 6px; 22 | padding-left: 6px; 23 | margin-right: 2px; 24 | line-height: 14px; 25 | } 26 | .nav-tabs { 27 | border-bottom: 1px solid #ddd; 28 | } 29 | .nav-tabs > li { 30 | margin-bottom: -1px; 31 | } 32 | .nav-tabs > li > a { 33 | padding-top: 8px; 34 | padding-bottom: 8px; 35 | line-height: 20px; 36 | border: 1px solid transparent; 37 | border-radius: 4px 4px 0 0; 38 | } 39 | .nav-tabs > li > a:hover, 40 | .nav-tabs > li > a:focus { 41 | border-color: #EEE #EEE #DDD; 42 | } 43 | .nav-tabs > .active > a, 44 | .nav-tabs > .active > a:hover, 45 | .nav-tabs > .active > a:focus { 46 | color: #555555; 47 | background-color: #FFF; 48 | border: 1px solid #DDD; 49 | border-bottom-color: transparent; 50 | cursor: default; 51 | } 52 | 53 | .nav-stacked > li > a { 54 | margin-right: 0; 55 | } 56 | .nav-tabs.nav-stacked { 57 | border-bottom: 0; 58 | } 59 | .nav-tabs.nav-stacked > li > a { 60 | border: 1px solid #ddd; 61 | border-radius: 0; 62 | } 63 | .nav-tabs.nav-stacked > li:first-child > a { 64 | border-top-right-radius: 4px; 65 | border-top-left-radius: 4px; 66 | } 67 | .nav-tabs.nav-stacked > li:last-child > a { 68 | border-bottom-right-radius: 4px; 69 | border-bottom-left-radius: 4px; 70 | } -------------------------------------------------------------------------------- /scss/site/_fonts.scss: -------------------------------------------------------------------------------- 1 | // Fonts 2 | @font-face { 3 | font-family: 'Source Sans Pro'; 4 | src: url('../fonts/sourcesanspro-regular-webfont.eot'); 5 | src: url('../fonts/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'), 6 | url('../fonts/sourcesanspro-regular-webfont.woff') format('woff'), 7 | url('../fonts/sourcesanspro-regular-webfont.ttf') format('truetype'), 8 | url('../fonts/sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg'); 9 | font-weight: normal; 10 | font-style: 400; 11 | } 12 | 13 | @font-face { 14 | font-family: 'Source Sans Pro'; 15 | src: url('../fonts/sourcesanspro-semibold-webfont.eot'); 16 | src: url('../fonts/sourcesanspro-semibold-webfont.eot?#iefix') format('embedded-opentype'), 17 | url('../fonts/sourcesanspro-semibold-webfont.woff') format('woff'), 18 | url('../fonts/sourcesanspro-semibold-webfont.ttf') format('truetype'), 19 | url('../fonts/sourcesanspro-semibold-webfont.svg#source_sans_prosemibold') format('svg'); 20 | font-weight: 600; 21 | font-style: normal; 22 | } 23 | 24 | @font-face { 25 | font-family: 'Source Sans Pro'; 26 | src: url('../fonts/sourcesanspro-bold-webfont.eot'); 27 | src: url('../fonts/sourcesanspro-bold-webfont.eot?#iefix') format('embedded-opentype'), 28 | url('../fonts/sourcesanspro-bold-webfont.woff') format('woff'), 29 | url('../fonts/sourcesanspro-bold-webfont.ttf') format('truetype'), 30 | url('../fonts/sourcesanspro-bold-webfont.svg#source_sans_probold') format('svg'); 31 | font-weight: bold; 32 | font-style: 700; 33 | } 34 | -------------------------------------------------------------------------------- /blog.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: base 3 | title: Blog 4 | --- 5 | 6 |
7 |
8 |

Blog

9 |
10 |
11 | 12 |
13 |
14 | {% for post in site.posts %} 15 |
16 |
17 |

{{ post.title }}

18 |

Posted on {{ post.date | date: "%B %d, %Y" }} by Wolfr

19 |
20 |
21 | {{ post.content }} 22 |
23 |
24 | {% endfor %} 25 | 26 | {% if paginator.page %} 27 |
28 | {% if paginator.next_page %} 29 | Older entries 30 | {% endif %} 31 | {% if paginator.previous_page %} 32 | Newer entries 33 | {% endif %} 34 |
35 | {% endif %} 36 | 37 |
38 |
39 |

Welcome to the {X} blog

40 |

The latest and greatest on {X}. Follow us on Twitter or subscribe the RSS feed for updates.

41 | 42 |

Post archive

43 | 51 | 52 |
53 |
-------------------------------------------------------------------------------- /fonts/stylesheet.css: -------------------------------------------------------------------------------- 1 | /* Generated by Font Squirrel (http://www.fontsquirrel.com) on June 10, 2013 */ 2 | 3 | 4 | 5 | @font-face { 6 | font-family: 'source_sans_proregular'; 7 | src: url('sourcesanspro-regular-webfont.eot'); 8 | src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'), 9 | url('sourcesanspro-regular-webfont.woff') format('woff'), 10 | url('sourcesanspro-regular-webfont.ttf') format('truetype'), 11 | url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg'); 12 | font-weight: normal; 13 | font-style: normal; 14 | 15 | } 16 | 17 | 18 | 19 | 20 | @font-face { 21 | font-family: 'source_sans_prosemibold'; 22 | src: url('sourcesanspro-semibold-webfont.eot'); 23 | src: url('sourcesanspro-semibold-webfont.eot?#iefix') format('embedded-opentype'), 24 | url('sourcesanspro-semibold-webfont.woff') format('woff'), 25 | url('sourcesanspro-semibold-webfont.ttf') format('truetype'), 26 | url('sourcesanspro-semibold-webfont.svg#source_sans_prosemibold') format('svg'); 27 | font-weight: normal; 28 | font-style: normal; 29 | 30 | } 31 | 32 | 33 | 34 | 35 | @font-face { 36 | font-family: 'source_sans_probold'; 37 | src: url('sourcesanspro-bold-webfont.eot'); 38 | src: url('sourcesanspro-bold-webfont.eot?#iefix') format('embedded-opentype'), 39 | url('sourcesanspro-bold-webfont.woff') format('woff'), 40 | url('sourcesanspro-bold-webfont.ttf') format('truetype'), 41 | url('sourcesanspro-bold-webfont.svg#source_sans_probold') format('svg'); 42 | font-weight: normal; 43 | font-style: normal; 44 | 45 | } -------------------------------------------------------------------------------- /scss/site/_blog.scss: -------------------------------------------------------------------------------- 1 | // Blog specific 2 | 3 | @media all and (max-width: $break-large - 1) { 4 | #blog-nav { 5 | padding: 12px 20px 0; 6 | } 7 | #blog-content { 8 | padding: 20px; 9 | } 10 | } 11 | 12 | @media all and (min-width: $break-large) { 13 | #blog { 14 | @include container; 15 | padding: 20px 0 0; 16 | #blog-nav { 17 | @include span-columns(2); 18 | @include omega; 19 | } 20 | #blog-content { 21 | @include span-columns(4); 22 | } 23 | #blog-single { 24 | @include prefix(1); 25 | @include span-columns(4); 26 | } 27 | article { 28 | max-width: 600px; 29 | } 30 | } 31 | } 32 | 33 | #blog { 34 | article { 35 | font-size: 14px; 36 | @include micro-clearfix; 37 | } 38 | img { 39 | max-width: 100%; 40 | } 41 | h2 { 42 | margin-top: 0; 43 | } 44 | } 45 | 46 | #blog-nav { 47 | a { 48 | @include muted-links; 49 | } 50 | h4 { 51 | margin-top: 12px; 52 | } 53 | .date { 54 | color: #BBB; 55 | font-size: 11px; 56 | } 57 | } 58 | 59 | #blog article { 60 | header { 61 | p { 62 | color: #999; 63 | } 64 | } 65 | h1 { 66 | @include display-font; 67 | text-transform: none; 68 | a { 69 | color: darken($link-color, 10%); 70 | border: none; 71 | &:hover { 72 | color: #000; 73 | } 74 | } 75 | } 76 | img.shaded { 77 | @include box-shadow(2px 2px 2px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.1)); 78 | 79 | } 80 | margin: 0 0 24px; 81 | padding: 0 0 24px; 82 | border-bottom: 1px solid #DDD; 83 | &:last-child { 84 | margin: 0; 85 | border: none; 86 | } 87 | } 88 | 89 | // Blog comments using Disqus 90 | #disqus_thread { 91 | max-width: 600px; 92 | } -------------------------------------------------------------------------------- /scss/components/_table.scss: -------------------------------------------------------------------------------- 1 | // Tables 2 | // Stripped version of bootstrap component 3 | // -------------------------------------------------- 4 | 5 | 6 | // BASE TABLES 7 | // ----------------- 8 | 9 | table { 10 | max-width: 100%; 11 | border-collapse: collapse; 12 | border-spacing: 0; 13 | } 14 | 15 | // BASELINE STYLES 16 | // --------------- 17 | 18 | .table { 19 | width: 100%; 20 | margin-bottom: 12px; 21 | // Cells 22 | th, 23 | td { 24 | padding: 8px; 25 | text-align: left; 26 | vertical-align: top; 27 | border-top: 1px solid $light-bg; 28 | } 29 | th { 30 | font-weight: 700; 31 | color: #000; 32 | } 33 | // Bottom align for column headings 34 | thead th { 35 | vertical-align: bottom; 36 | } 37 | // Remove top border from thead by default 38 | caption + thead tr:first-child th, 39 | caption + thead tr:first-child td, 40 | colgroup + thead tr:first-child th, 41 | colgroup + thead tr:first-child td, 42 | thead:first-child tr:first-child th, 43 | thead:first-child tr:first-child td { 44 | border-top: 0; 45 | } 46 | // Account for multiple tbody instances 47 | tbody + tbody { 48 | border-top: 2px solid $light-bg; 49 | } 50 | } 51 | 52 | // CONDENSED TABLE W/ HALF PADDING 53 | // ------------------------------- 54 | 55 | .table-condensed { 56 | th, 57 | td { 58 | padding: 4px 5px; 59 | } 60 | } 61 | 62 | 63 | // BORDERED VERSION 64 | // ---------------- 65 | 66 | .table-bordered { 67 | border: 1px solid $light-bg; 68 | border-left: 0; 69 | th, 70 | td { 71 | border-left: 1px solid $light-bg; 72 | } 73 | } 74 | 75 | // ZEBRA-STRIPING 76 | // -------------- 77 | 78 | // Default zebra-stripe styles (alternating gray and transparent backgrounds) 79 | .table-striped { 80 | tbody { 81 | > tr:nth-child(odd) > td, 82 | > tr:nth-child(odd) > th { 83 | background-color: $light-bg; 84 | } 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | {% include head.html %} 2 | 3 | 4 | {% include header.html %} 5 | 6 |
7 |
8 |

Blog

9 |
10 |
11 | 12 |
13 |
14 |
15 |
16 |

{{ page.title }}

17 |

Posted on {{ page.date | date: "%B %d, %Y" }} by Author

18 |
19 |
20 | {{ content }} 21 |
22 |
23 | 24 |
25 | 36 | 37 | comments powered by Disqus 38 | 39 |
40 |
41 | 42 | 54 | 55 | {% include footer.html %} 56 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: base 3 | title: Home 4 | --- 5 | 6 | 14 | 15 |
16 |
17 |
18 |
19 |

Features

20 |
    21 |
  • Made for static blogging with Jekyll
    • 22 |
  • Easy theming with SCSS. Change a few variables and you've got your look
    • 23 |
  • Using the wonderful open source font Source Sans Pro
    • 24 |
  • Modern CSS using subtle transitions
    • 25 |
  • Lightweight code (the CSS file is 18kb)
    • 26 |
  • Responsive design with fluid grid and video
    • 27 |
  • Code highlighting and image alignment classes for better looking blog posts
    • 28 |
  • Drop in a Disqus code and you have comments
    • 29 |
  • Photo banner on homepage, ready to customize
    • 30 |
  • Built-in RSS feed
    • 31 |
32 |
33 |
34 |

Initial setup

35 |

Download the files from the Github repository and put them in a folder. Make sure Jekyll, Susy, Compass and Sass are installed through RubyGems:

36 | {% highlight bash %} 37 | sudo gem install jekyll 38 | sudo gem install susy 39 | sudo gem install sass 40 | sudo gem install compass{% endhighlight %} 41 | 42 |

How to use

43 |

Run two terminal windows, one to compile the site and one to compile the CSS. If you're just blogging you only need the jekyll command:

44 | {% highlight bash %} 45 | jekyll serve -w 46 | compass watch{% endhighlight %} 47 |

Theme license

48 |

The Cactus Jekyll theme is licensed under the MIT license i.e. do whatever you want with it. Keeping the backlink and spreading the word would be nice.

49 |
50 |
51 |
52 |
53 | -------------------------------------------------------------------------------- /scss/site/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin gradient-vertical($startColor: #555, $endColor: #333) { 2 | background-color: mix($startColor, $endColor, 60%); 3 | background-image: -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+ 4 | background-image: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+ 5 | background-image: -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+ 6 | background-image: -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10 7 | background-image: linear-gradient(to bottom, $startColor, $endColor); // Standard, IE10 8 | background-repeat: repeat-x; 9 | filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($startColor)}', endColorstr='#{ie-hex-str($endColor)}', GradientType=0); // IE9 and down 10 | } 11 | 12 | 13 | @mixin default-links { 14 | @include single-transition(color, 0.2s); 15 | 16 | text-decoration: none; 17 | color: $link-color; 18 | border-bottom: 1px solid rgba($link-color, 0.2); 19 | 20 | &:visited { 21 | color: darken($link-color, 10%); 22 | border-bottom: 1px solid rgba($link-color, 0.2); 23 | } 24 | &:hover, 25 | &:active, 26 | &:focus { 27 | background: rgba($link-color, 0.2); 28 | color: brighten($link-color, 30%); 29 | } 30 | } 31 | 32 | @mixin no-underlines { 33 | &:link, 34 | &:visited, 35 | &:hover, 36 | &:active, 37 | &:focus { 38 | text-decoration: none; 39 | border: none !important; 40 | } 41 | } 42 | 43 | @mixin muted-links { 44 | &:link, 45 | &:visited { 46 | color: #7F7F7F; 47 | border-bottom: 1px solid #CCC; 48 | border-bottom: 1px solid rgba(0,0,0,0.15); 49 | } 50 | &:hover, 51 | &:active, 52 | &:focus { 53 | color: #000; 54 | border-bottom: none; 55 | } 56 | } 57 | 58 | @mixin display-font { 59 | text-transform: uppercase; 60 | font-family: "HelveticaNeue-CondensedBold", "Helvetica Neue CE 600 Condensed", "Helvetica Neue LT Condensed", "Helvetica Neue 600 Condensed", "HelveticaNeue-BoldCondensed", "Helvetica Neue BoldCondensed", "Helvetica Neue", Helvetica, Arial, sans-serif; 61 | font-weight: 700; 62 | font-stretch: condensed; 63 | line-height: 1; 64 | margin: 0; 65 | } 66 | 67 | @mixin calc($property, $expression) { 68 | #{$property}: -moz-calc(#{$expression}); 69 | #{$property}: -o-calc(#{$expression}); 70 | #{$property}: -webkit-calc(#{$expression}); 71 | #{$property}: calc(#{$expression}); 72 | } 73 | 74 | /* 75 | Alternate clearfix that does not rely on overflow: hidden; 76 | */ 77 | 78 | @mixin micro-clearfix { 79 | &:before, 80 | &:after { 81 | content:""; 82 | display:table; 83 | } 84 | &:after { 85 | clear:both; 86 | } 87 | } -------------------------------------------------------------------------------- /js/respond.min.js: -------------------------------------------------------------------------------- 1 | /*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */ 2 | /*! NOTE: If you're already including a window.matchMedia polyfill via Modernizr or otherwise, you don't need this part */ 3 | window.matchMedia=window.matchMedia||function(a){"use strict";var c,d=a.documentElement,e=d.firstElementChild||d.firstChild,f=a.createElement("body"),g=a.createElement("div");return g.id="mq-test-1",g.style.cssText="position:absolute;top:-100em",f.style.background="none",f.appendChild(g),function(a){return g.innerHTML='­',d.insertBefore(f,e),c=42===g.offsetWidth,d.removeChild(f),{matches:c,media:a}}}(document); 4 | 5 | /*! Respond.js v1.1.0: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */ 6 | (function(a){"use strict";function x(){u(!0)}var b={};if(a.respond=b,b.update=function(){},b.mediaQueriesSupported=a.matchMedia&&a.matchMedia("only all").matches,!b.mediaQueriesSupported){var q,r,t,c=a.document,d=c.documentElement,e=[],f=[],g=[],h={},i=30,j=c.getElementsByTagName("head")[0]||d,k=c.getElementsByTagName("base")[0],l=j.getElementsByTagName("link"),m=[],n=function(){for(var b=0;l.length>b;b++){var c=l[b],d=c.href,e=c.media,f=c.rel&&"stylesheet"===c.rel.toLowerCase();d&&f&&!h[d]&&(c.styleSheet&&c.styleSheet.rawCssText?(p(c.styleSheet.rawCssText,d,e),h[d]=!0):(!/^([a-zA-Z:]*\/\/)/.test(d)&&!k||d.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&m.push({href:d,media:e}))}o()},o=function(){if(m.length){var b=m.shift();v(b.href,function(c){p(c,b.href,b.media),h[b.href]=!0,a.setTimeout(function(){o()},0)})}},p=function(a,b,c){var d=a.match(/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi),g=d&&d.length||0;b=b.substring(0,b.lastIndexOf("/"));var h=function(a){return a.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+b+"$2$3")},i=!g&&c;b.length&&(b+="/"),i&&(g=1);for(var j=0;g>j;j++){var k,l,m,n;i?(k=c,f.push(h(a))):(k=d[j].match(/@media *([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1,f.push(RegExp.$2&&h(RegExp.$2))),m=k.split(","),n=m.length;for(var o=0;n>o;o++)l=m[o],e.push({media:l.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/)&&RegExp.$2||"all",rules:f.length-1,hasquery:l.indexOf("(")>-1,minw:l.match(/\(\s*min\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:l.match(/\(\s*max\-width\s*:\s*(\s*[0-9\.]+)(px|em)\s*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},s=function(){var a,b=c.createElement("div"),e=c.body,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",e||(e=f=c.createElement("body"),e.style.background="none"),e.appendChild(b),d.insertBefore(e,d.firstChild),a=b.offsetWidth,f?d.removeChild(e):e.removeChild(b),a=t=parseFloat(a)},u=function(b){var h="clientWidth",k=d[h],m="CSS1Compat"===c.compatMode&&k||c.body[h]||k,n={},o=l[l.length-1],p=(new Date).getTime();if(b&&q&&i>p-q)return a.clearTimeout(r),r=a.setTimeout(u,i),void 0;q=p;for(var v in e)if(e.hasOwnProperty(v)){var w=e[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?t||s():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?t||s():1)),w.hasquery&&(z&&A||!(z||m>=x)||!(A||y>=m))||(n[w.media]||(n[w.media]=[]),n[w.media].push(f[w.rules]))}for(var C in g)g.hasOwnProperty(C)&&g[C]&&g[C].parentNode===j&&j.removeChild(g[C]);for(var D in n)if(n.hasOwnProperty(D)){var E=c.createElement("style"),F=n[D].join("\n");E.type="text/css",E.media=D,j.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(c.createTextNode(F)),g.push(E)}},v=function(a,b){var c=w();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))},w=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}();n(),b.update=n,a.addEventListener?a.addEventListener("resize",x,!1):a.attachEvent&&a.attachEvent("onresize",x)}})(this); -------------------------------------------------------------------------------- /scss/components/_pygments.scss: -------------------------------------------------------------------------------- 1 | // Solarized theme 2 | .highlight { background-color: #ffffcc } 3 | .highlight .c { color: #586E75 } /* Comment */ 4 | .highlight .err { color: #93A1A1 } /* Error */ 5 | .highlight .g { color: #93A1A1 } /* Generic */ 6 | .highlight .k { color: #859900 } /* Keyword */ 7 | .highlight .l { color: #93A1A1 } /* Literal */ 8 | .highlight .n { color: #93A1A1 } /* Name */ 9 | .highlight .o { color: #859900 } /* Operator */ 10 | .highlight .x { color: #CB4B16 } /* Other */ 11 | .highlight .p { color: #93A1A1 } /* Punctuation */ 12 | .highlight .cm { color: #586E75 } /* Comment.Multiline */ 13 | .highlight .cp { color: #859900 } /* Comment.Preproc */ 14 | .highlight .c1 { color: #586E75 } /* Comment.Single */ 15 | .highlight .cs { color: #859900 } /* Comment.Special */ 16 | .highlight .gd { color: #2AA198 } /* Generic.Deleted */ 17 | .highlight .ge { color: #93A1A1; font-style: italic } /* Generic.Emph */ 18 | .highlight .gr { color: #DC322F } /* Generic.Error */ 19 | .highlight .gh { color: #CB4B16 } /* Generic.Heading */ 20 | .highlight .gi { color: #859900 } /* Generic.Inserted */ 21 | .highlight .go { color: #93A1A1 } /* Generic.Output */ 22 | .highlight .gp { color: #93A1A1 } /* Generic.Prompt */ 23 | .highlight .gs { color: #93A1A1; font-weight: bold } /* Generic.Strong */ 24 | .highlight .gu { color: #CB4B16 } /* Generic.Subheading */ 25 | .highlight .gt { color: #93A1A1 } /* Generic.Traceback */ 26 | .highlight .kc { color: #CB4B16 } /* Keyword.Constant */ 27 | .highlight .kd { color: #268BD2 } /* Keyword.Declaration */ 28 | .highlight .kn { color: #859900 } /* Keyword.Namespace */ 29 | .highlight .kp { color: #859900 } /* Keyword.Pseudo */ 30 | .highlight .kr { color: #268BD2 } /* Keyword.Reserved */ 31 | .highlight .kt { color: #DC322F } /* Keyword.Type */ 32 | .highlight .ld { color: #93A1A1 } /* Literal.Date */ 33 | .highlight .m { color: #2AA198 } /* Literal.Number */ 34 | .highlight .s { color: #2AA198 } /* Literal.String */ 35 | .highlight .na { color: #93A1A1 } /* Name.Attribute */ 36 | .highlight .nb { color: #B58900 } /* Name.Builtin */ 37 | .highlight .nc { color: #268BD2 } /* Name.Class */ 38 | .highlight .no { color: #CB4B16 } /* Name.Constant */ 39 | .highlight .nd { color: #268BD2 } /* Name.Decorator */ 40 | .highlight .ni { color: #CB4B16 } /* Name.Entity */ 41 | .highlight .ne { color: #CB4B16 } /* Name.Exception */ 42 | .highlight .nf { color: #268BD2 } /* Name.Function */ 43 | .highlight .nl { color: #93A1A1 } /* Name.Label */ 44 | .highlight .nn { color: #93A1A1 } /* Name.Namespace */ 45 | .highlight .nx { color: #93A1A1 } /* Name.Other */ 46 | .highlight .py { color: #93A1A1 } /* Name.Property */ 47 | .highlight .nt { color: #268BD2 } /* Name.Tag */ 48 | .highlight .nv { color: #268BD2 } /* Name.Variable */ 49 | .highlight .ow { color: #859900 } /* Operator.Word */ 50 | .highlight .w { color: #93A1A1 } /* Text.Whitespace */ 51 | .highlight .mf { color: #2AA198 } /* Literal.Number.Float */ 52 | .highlight .mh { color: #2AA198 } /* Literal.Number.Hex */ 53 | .highlight .mi { color: #2AA198 } /* Literal.Number.Integer */ 54 | .highlight .mo { color: #2AA198 } /* Literal.Number.Oct */ 55 | .highlight .sb { color: #586E75 } /* Literal.String.Backtick */ 56 | .highlight .sc { color: #2AA198 } /* Literal.String.Char */ 57 | .highlight .sd { color: #93A1A1 } /* Literal.String.Doc */ 58 | .highlight .s2 { color: #2AA198 } /* Literal.String.Double */ 59 | .highlight .se { color: #CB4B16 } /* Literal.String.Escape */ 60 | .highlight .sh { color: #93A1A1 } /* Literal.String.Heredoc */ 61 | .highlight .si { color: #2AA198 } /* Literal.String.Interpol */ 62 | .highlight .sx { color: #2AA198 } /* Literal.String.Other */ 63 | .highlight .sr { color: #DC322F } /* Literal.String.Regex */ 64 | .highlight .s1 { color: #2AA198 } /* Literal.String.Single */ 65 | .highlight .ss { color: #2AA198 } /* Literal.String.Symbol */ 66 | .highlight .bp { color: #268BD2 } /* Name.Builtin.Pseudo */ 67 | .highlight .vc { color: #268BD2 } /* Name.Variable.Class */ 68 | .highlight .vg { color: #268BD2 } /* Name.Variable.Global */ 69 | .highlight .vi { color: #268BD2 } /* Name.Variable.Instance */ 70 | .highlight .il { color: #2AA198 } /* Literal.Number.Integer.Long */ -------------------------------------------------------------------------------- /sample-page.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: base 3 | title: Sample page 4 | --- 5 | 6 |
7 |
8 |

{{ page.title }}

9 |
10 |
11 | 12 |
13 | 21 | 22 |
23 |
24 |

Section 1

25 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

26 | 27 |
28 | 29 |

Section 2

30 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

31 |
    32 |
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • 33 |
  • Aliquam tincidunt mauris eu risus.
    • 34 |
  • Vestibulum auctor dapibus neque.
    • 35 |
36 | 37 | 38 | 39 | 40 | 43 | 46 | 49 | 50 | 51 | 54 | 57 | 60 | 61 | 62 | 65 | 68 | 71 | 72 | 73 | 76 | 79 | 82 | 83 | 84 |
41 | Name(s) 42 | 44 | Scope 45 | 47 | Description 48 |
52 | Land plants, also known as Embryophyta or Metaphyta. 53 | 55 | Plantae sensu strictissimo 56 | 58 | This group includes the liverworts, hornworts, mosses, and vascular plants, as well as fossil plants similar to these surviving groups. 59 |
63 | Green plants - also known as Viridiplantae, Viridiphyta or Chlorobionta 64 | 66 | Plantae sensu stricto 67 | 69 | This group includes the land plants plus various groups of green algae, including stoneworts. The names given to these groups vary considerably as of July 2011[update]. Viridiplantae encompass a group of organisms that possess chlorophyll a and b, have plastids that are bound by only two membranes, are capable of storing starch, and have cellulose in their cell walls. It is this clade which is mainly the subject of this article. 70 |
74 | Archaeplastida, Plastida or Primoplantae 75 | 77 | Plantae sensu lato 78 | 80 | This group comprises the green plants above plus Rhodophyta (red algae) and Glaucophyta (glaucophyte algae). This clade includes the organisms that eons ago acquired their chloroplasts directly by engulfing cyanobacteria. 81 |
85 | 86 |
87 | 88 |

Section 3

89 |

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

90 | 91 |
92 |
93 |
-------------------------------------------------------------------------------- /fonts/specimen_files/grid_12-825-55-15.css: -------------------------------------------------------------------------------- 1 | /*Notes about grid: 2 | Columns: 12 3 | Grid Width: 825px 4 | Column Width: 55px 5 | Gutter Width: 15px 6 | -------------------------------*/ 7 | 8 | 9 | 10 | .section {margin-bottom: 18px; 11 | } 12 | .section:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;} 13 | .section {*zoom: 1;} 14 | 15 | .section .firstcolumn, 16 | .section .firstcol {margin-left: 0;} 17 | 18 | 19 | /* Border on left hand side of a column. */ 20 | .border { 21 | padding-left: 7px; 22 | margin-left: 7px; 23 | border-left: 1px solid #eee; 24 | } 25 | 26 | /* Border with more whitespace, spans one column. */ 27 | .colborder { 28 | padding-left: 42px; 29 | margin-left: 42px; 30 | border-left: 1px solid #eee; 31 | } 32 | 33 | 34 | 35 | /* The Grid Classes */ 36 | .grid1, .grid1_2cols, .grid1_3cols, .grid1_4cols, .grid2, .grid2_3cols, .grid2_4cols, .grid3, .grid3_2cols, .grid3_4cols, .grid4, .grid4_3cols, .grid5, .grid5_2cols, .grid5_3cols, .grid5_4cols, .grid6, .grid6_4cols, .grid7, .grid7_2cols, .grid7_3cols, .grid7_4cols, .grid8, .grid8_3cols, .grid9, .grid9_2cols, .grid9_4cols, .grid10, .grid10_3cols, .grid10_4cols, .grid11, .grid11_2cols, .grid11_3cols, .grid11_4cols, .grid12 37 | {margin-left: 15px;float: left;display: inline; overflow: hidden;} 38 | 39 | 40 | .width1, .grid1, .span-1 {width: 55px;} 41 | .width1_2cols,.grid1_2cols {width: 20px;} 42 | .width1_3cols,.grid1_3cols {width: 8px;} 43 | .width1_4cols,.grid1_4cols {width: 2px;} 44 | .input_width1 {width: 49px;} 45 | 46 | .width2, .grid2, .span-2 {width: 125px;} 47 | .width2_3cols,.grid2_3cols {width: 31px;} 48 | .width2_4cols,.grid2_4cols {width: 20px;} 49 | .input_width2 {width: 119px;} 50 | 51 | .width3, .grid3, .span-3 {width: 195px;} 52 | .width3_2cols,.grid3_2cols {width: 90px;} 53 | .width3_4cols,.grid3_4cols {width: 37px;} 54 | .input_width3 {width: 189px;} 55 | 56 | .width4, .grid4, .span-4 {width: 265px;} 57 | .width4_3cols,.grid4_3cols {width: 78px;} 58 | .input_width4 {width: 259px;} 59 | 60 | .width5, .grid5, .span-5 {width: 335px;} 61 | .width5_2cols,.grid5_2cols {width: 160px;} 62 | .width5_3cols,.grid5_3cols {width: 101px;} 63 | .width5_4cols,.grid5_4cols {width: 72px;} 64 | .input_width5 {width: 329px;} 65 | 66 | .width6, .grid6, .span-6 {width: 405px;} 67 | .width6_4cols,.grid6_4cols {width: 90px;} 68 | .input_width6 {width: 399px;} 69 | 70 | .width7, .grid7, .span-7 {width: 475px;} 71 | .width7_2cols,.grid7_2cols {width: 230px;} 72 | .width7_3cols,.grid7_3cols {width: 148px;} 73 | .width7_4cols,.grid7_4cols {width: 107px;} 74 | .input_width7 {width: 469px;} 75 | 76 | .width8, .grid8, .span-8 {width: 545px;} 77 | .width8_3cols,.grid8_3cols {width: 171px;} 78 | .input_width8 {width: 539px;} 79 | 80 | .width9, .grid9, .span-9 {width: 615px;} 81 | .width9_2cols,.grid9_2cols {width: 300px;} 82 | .width9_4cols,.grid9_4cols {width: 142px;} 83 | .input_width9 {width: 609px;} 84 | 85 | .width10, .grid10, .span-10 {width: 685px;} 86 | .width10_3cols,.grid10_3cols {width: 218px;} 87 | .width10_4cols,.grid10_4cols {width: 160px;} 88 | .input_width10 {width: 679px;} 89 | 90 | .width11, .grid11, .span-11 {width: 755px;} 91 | .width11_2cols,.grid11_2cols {width: 370px;} 92 | .width11_3cols,.grid11_3cols {width: 241px;} 93 | .width11_4cols,.grid11_4cols {width: 177px;} 94 | .input_width11 {width: 749px;} 95 | 96 | .width12, .grid12, .span-12 {width: 825px;} 97 | .input_width12 {width: 819px;} 98 | 99 | /* Subdivided grid spaces */ 100 | .emptycols_left1, .prepend-1 {padding-left: 70px;} 101 | .emptycols_right1, .append-1 {padding-right: 70px;} 102 | .emptycols_left2, .prepend-2 {padding-left: 140px;} 103 | .emptycols_right2, .append-2 {padding-right: 140px;} 104 | .emptycols_left3, .prepend-3 {padding-left: 210px;} 105 | .emptycols_right3, .append-3 {padding-right: 210px;} 106 | .emptycols_left4, .prepend-4 {padding-left: 280px;} 107 | .emptycols_right4, .append-4 {padding-right: 280px;} 108 | .emptycols_left5, .prepend-5 {padding-left: 350px;} 109 | .emptycols_right5, .append-5 {padding-right: 350px;} 110 | .emptycols_left6, .prepend-6 {padding-left: 420px;} 111 | .emptycols_right6, .append-6 {padding-right: 420px;} 112 | .emptycols_left7, .prepend-7 {padding-left: 490px;} 113 | .emptycols_right7, .append-7 {padding-right: 490px;} 114 | .emptycols_left8, .prepend-8 {padding-left: 560px;} 115 | .emptycols_right8, .append-8 {padding-right: 560px;} 116 | .emptycols_left9, .prepend-9 {padding-left: 630px;} 117 | .emptycols_right9, .append-9 {padding-right: 630px;} 118 | .emptycols_left10, .prepend-10 {padding-left: 700px;} 119 | .emptycols_right10, .append-10 {padding-right: 700px;} 120 | .emptycols_left11, .prepend-11 {padding-left: 770px;} 121 | .emptycols_right11, .append-11 {padding-right: 770px;} 122 | .pull-1 {margin-left: -70px;} 123 | .push-1 {margin-right: -70px;margin-left: 18px;float: right;} 124 | .pull-2 {margin-left: -140px;} 125 | .push-2 {margin-right: -140px;margin-left: 18px;float: right;} 126 | .pull-3 {margin-left: -210px;} 127 | .push-3 {margin-right: -210px;margin-left: 18px;float: right;} 128 | .pull-4 {margin-left: -280px;} 129 | .push-4 {margin-right: -280px;margin-left: 18px;float: right;} -------------------------------------------------------------------------------- /documentation.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: base 3 | title: Documentation 4 | --- 5 | 6 |
7 | 8 |
9 |
10 |

Clank Documentation

11 |
12 |
13 | 14 |
15 |
16 |

General

17 | 26 |
27 | 28 |
29 |
30 |

What is Clank?

31 |

Clank is an open source prototyping framework for mobile apps. Think of it as Twitter Bootstrap but for prototyping native apps.

32 | 33 |
34 | 35 |

Why Clank?

36 | 37 |

Actually looks like a native app

38 |

We strive to actually look like a native app (as far as web tech allows us to go) instead of pseudo implementations.

39 | 40 |

Component based: pick and choose

41 |

Clank is a collection of HTML/CSS components. For example, a button is a component. It has it's own SCSS file: components/_button.scss.

42 |

Every component stands on its own and can't influence other components. Clank has strong rules on component naming to avoid any style clashes.

43 |

A good component only defines layout and provide hooks for specific looks.

44 | 45 |

46 |

We strive to actually look like a native app (as far as web tech allows us to go) instead of pseudo implementations.

47 | 48 |
49 | 50 |

Skinning-mechanism

51 | 52 |

Clank uses variables in SCSS to provide an easy way to easily change the look of Clank-made applications.

53 | 54 |

Changing the global color of headers, bars and buttons is as easy as changing one variable:

55 | 56 | {% highlight scss %}$accent-color: red{% endhighlight %} 57 | 58 |

Variables for cross platform design

59 |

Every operating system has its own look and feel. Clank acknowledges that you are building apps for multiple platforms. We see each part of the design as a variable that can be altered:

60 | 61 | {% highlight scss %} 62 | $functional-shadows: true 63 | $decorational-shadows: false 64 | {% endhighlight %} 65 | 66 |

Sometimes in more detail:

67 | 68 | {% highlight scss %}$border-radius: 4px;{% endhighlight %} 69 | 70 |

This way, it's easy to generate an iOS or Android specific style sheet by switching out the variables. Or maybe you want to create a unified look that looks like your brand instead of chasing platform guidelines. It's all possible.

71 | 72 |

You also want to switch on a functional level i.e. you might want to swap out an iOS header for an Android action bar component. More on this in component includes.

73 | 74 |

Philosophy

75 |

You should try to make your application using standard components. The standard components used in iOS and Android have a lot of work behind them. Face it, you don't have 2 weeks to perfect a <select>.

76 | 77 |
78 | 79 |

Component includes

80 | 81 |

Component includes is a planned feature where you can swap components in your prototypes depending on the operating system. E.g. for your Android application you might want to use Android style tabs, but the same functionality in the iOS version uses a segmented control.

82 | 83 |
84 | 85 |

Browser support

86 |

It's not advisable to use Clank for production work since it only supports new and modern browsers like Google Chrome. A lot of the techniques used in Clank depend on newer CSS properties such as Flexbox. For now, Clank is a prototyping tool and testbed for modern web technologies.

87 | 88 |
89 | 90 |

(S)CSS conventions

91 |

We use SCSS for all CSS because it provides us with a way to extend CSS with variables and mixins.

92 |

Every component should be prefixed with cl-:

93 | {% highlight scss %}.cl-accordion { }{% endhighlight %} 94 |

This is verbose but the only way to not clash with other libraries until Web Components are commonplace.

95 |

A child element dependent on the component should be added with a hyphen:

96 | {% highlight scss %}.cl-accordion-item { }{% endhighlight %} 97 |

State should be added with a double underscore:

98 | {% highlight scss %}.cl-accordion-item__disabled { }{% endhighlight %} 99 |

This prevents too many nested selectors in SCSS.

100 |

This naming technique has been coined BEM.

101 | 102 |
103 | 104 |

Generators

105 | 106 |

Note that generators are a work in progress and they do not exist yet.

107 | 108 |

What is a generator?

109 |

A generator is simply a bash script that generates code for you. This makes it easy to, for example, add new screens or components to your project.

110 |

Available generators

111 |
    112 |
  • 113 |

    generate-page.sh

    114 |

    Creates a new page.

    115 |
    • 116 |
  • 117 |

    generate-component.sh

    118 |

    Creates a new component.

    119 |
    • 120 |
121 | 122 |
123 |
124 | 125 |
126 | 127 |
-------------------------------------------------------------------------------- /scss/screen.scss: -------------------------------------------------------------------------------- 1 | // Framework imports 2 | @import "compass/css3"; 3 | @import "susy"; 4 | 5 | // Variables and mixin 6 | @import "site/vars"; 7 | @import "site/mixins"; 8 | 9 | // Normalize 10 | @import "site/normalize"; 11 | 12 | // Components 13 | @import "components/table"; 14 | @import "components/bordered-list"; 15 | @import "components/nav"; 16 | @import "components/pygments"; // code highlighting styles 17 | 18 | // Regular imports 19 | @import "site/fonts"; 20 | @import "site/grid"; 21 | @import "site/image_alignment"; 22 | @import "site/blog"; 23 | 24 | 25 | body { 26 | margin: 0; 27 | padding: 0; 28 | 29 | font-family: 'Source Sans Pro', Arial, sans-serif; 30 | font-size: 14px; 31 | color: #666; 32 | line-height: 1.5; 33 | 34 | } 35 | 36 | // Utils 37 | 38 | .accessible-text { 39 | position: absolute; 40 | top: -9000px; 41 | left: -9000px; 42 | } 43 | 44 | // Typography 45 | 46 | .page-title-bar { 47 | background: $light-bg; 48 | 49 | .inner-content { 50 | @include container; 51 | padding-top: 12px; 52 | padding-bottom: 12px; 53 | } 54 | h2 { 55 | @include display-font; 56 | text-transform: none; 57 | font-size: 32px; 58 | } 59 | } 60 | 61 | p, h4 { 62 | margin: 6px 0; 63 | } 64 | 65 | hr { 66 | border: none; 67 | border-bottom: 1px solid $light-bg; 68 | margin: 18px 0; 69 | } 70 | 71 | h1, h2 { 72 | color: #000; 73 | line-height: 1.1; 74 | } 75 | 76 | h3 { 77 | color: #333; 78 | font-weight: 600; 79 | font-size: 18px; 80 | margin: 12px 0; 81 | } 82 | 83 | h4 { 84 | color: #000; 85 | } 86 | 87 | a { 88 | @include default-links; 89 | } 90 | 91 | pre { 92 | padding: 10px; 93 | margin: 0 0 1px; 94 | font-size: 12px; 95 | @include border-radius(4px); 96 | background: $light-bg; 97 | line-height: 1.3; 98 | 99 | white-space: pre-wrap; /* css-3 */ 100 | white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ 101 | white-space: -pre-wrap; /* Opera 4-6 */ 102 | white-space: -o-pre-wrap; /* Opera 7 */ 103 | word-wrap: break-word; /* Internet Explorer 5.5+ */ 104 | & + pre { 105 | border-bottom-radius: 4px; 106 | } 107 | } 108 | 109 | .help-text { 110 | color: $muted-text; 111 | font-size: 11px; 112 | } 113 | 114 | // main layout 115 | 116 | 117 | #header { 118 | background: $dark-bg; 119 | // Nice transitions 120 | a { 121 | transition-property: background, box-shadow; 122 | transition-duration: 0.18s; 123 | } 124 | #social { 125 | float: right; 126 | color: lighten($dark-bg, 30%); 127 | @media all and(max-width: $break-medium) { 128 | // Hide longer copy on medium sized screens 129 | span { 130 | display: none; 131 | } 132 | } 133 | @media all and(max-width: $break-small-medium) { 134 | // Hide gh button altogether on small sized screens 135 | display: none; 136 | } 137 | } 138 | #social a { 139 | margin: 10px 0 10px 5px; 140 | border: none; 141 | color: #FFF; 142 | padding: 10px 15px; 143 | display: inline-block; 144 | background: lighten($dark-bg, 10%); 145 | border-radius: 3px; 146 | &:hover, 147 | &:focus { 148 | background: darken($dark-bg, 20%); 149 | @include box-shadow(0 0 0 2px #FFF); 150 | } 151 | } 152 | } 153 | 154 | // nav in header 155 | #nav { 156 | padding: 10px 0; 157 | float: left; 158 | a { 159 | color: #FFF; 160 | padding: 10px; 161 | display: inline-block; 162 | margin-right: -4px; // fix inline block spacing 163 | &:link, 164 | &:visited { 165 | border: none; 166 | border-right: 1px solid lighten($dark-bg, 10%); 167 | } 168 | &:hover, 169 | &:active, 170 | &:focus, 171 | &.active { 172 | background: lighten($dark-bg, 10%); 173 | } 174 | &:last-child { 175 | border-right: none; 176 | } 177 | } 178 | } 179 | 180 | #banner { 181 | // Cactus 182 | background: #1E2A28 url(../images/1.jpg) center center; 183 | 184 | @include background-size('cover'); 185 | margin: 0 0 20px; 186 | padding: 20px 0; 187 | position: relative; 188 | &:after { 189 | content: ''; 190 | width: 100%; 191 | height: 100%; 192 | position: absolute; 193 | top: 0; 194 | left: 0; 195 | background: #000; 196 | background: rgba(0,0,0,0.5); 197 | } 198 | .inner-content { 199 | @include container; 200 | } 201 | .copy { 202 | position: relative; 203 | z-index: 1; 204 | } 205 | h1 { 206 | @include display-font; 207 | font-size: 110px; 208 | line-height: 0.9; 209 | color: #FFF; 210 | } 211 | .intro { 212 | font-size: 21px; 213 | color: #FFF; 214 | line-height: 1.33; 215 | margin: 0; 216 | @include opacity(0.75); 217 | } 218 | 219 | // Offset 220 | .btn, .intro { 221 | margin-left: 4px; 222 | } 223 | img { 224 | margin-top: 20px; 225 | } 226 | .img-holder { 227 | display: none; 228 | } 229 | @media all and (min-width: $break-large) { 230 | &:after { 231 | content: none; 232 | } 233 | height: 303px; 234 | padding: 0; 235 | .copy { 236 | background: #000; 237 | background: rgba(0,0,0,0.5); 238 | padding: 20px; 239 | margin-top: 40px; 240 | @include span-columns(4,8); 241 | } 242 | } 243 | } 244 | 245 | #footer { 246 | border-top: 1px solid $light-bg; 247 | margin: 0 auto; 248 | padding: 12px 0; 249 | color: $muted-text; 250 | overflow: hidden; 251 | a { 252 | @include muted-links; 253 | } 254 | @media all and (min-width: $break-large) { 255 | p.first-child { 256 | float: left; 257 | } 258 | p.last-child { 259 | float: right; 260 | } 261 | } 262 | } 263 | 264 | // columns on home 265 | 266 | .cols { 267 | margin: 0 0 20px; 268 | overflow: hidden; // clearing 269 | h3 { 270 | margin: 12px 0 4px; 271 | } 272 | @media all and (min-width: 500px) { 273 | .col { 274 | @include span-columns(3); 275 | } 276 | .col:last-child { 277 | @include omega; 278 | } 279 | } 280 | } 281 | 282 | // page with subnav 283 | 284 | .page-type-subnav { 285 | #subnav { 286 | h4 { 287 | margin-top: 0; 288 | margin-bottom: 4px; 289 | } 290 | ul { 291 | padding: 0; 292 | margin-top: 0; 293 | } 294 | } 295 | #content { 296 | article { 297 | font-size: 14px; 298 | } 299 | h2 { 300 | margin-top: 0; 301 | } 302 | } 303 | } 304 | 305 | @media all and (max-width: $break-medium - 1) { 306 | #subnav { 307 | padding: 12px 20px 0; 308 | } 309 | .page-type-subnav #content { 310 | padding: 0 20px 12px 20px; 311 | } 312 | } 313 | 314 | // Layout 315 | @media all and (min-width: $break-medium) { 316 | 317 | .page-type-subnav { 318 | @include container; 319 | #subnav { 320 | @include span-columns(1); 321 | margin: 32px 0 0; 322 | h4 { 323 | margin-top: 0; 324 | margin-bottom: 4px; 325 | } 326 | ul { 327 | padding: 0; 328 | margin-top: 0; 329 | } 330 | } 331 | #content { 332 | @include span-columns(5); 333 | @include omega; 334 | article { 335 | max-width: 740px; 336 | font-size: 14px; 337 | padding: 20px; 338 | } 339 | h2 { 340 | margin-top: 0; 341 | } 342 | } 343 | } 344 | } 345 | 346 | 347 | // 404 348 | #error404 { 349 | background: $light-bg; 350 | text-align: center; 351 | padding: 40px; 352 | } 353 | 354 | // Fluid vids 355 | .video-wrapper { 356 | position: relative; 357 | padding-bottom: 66.67%; /* 3:2 */ 358 | &.aspect-16-9 { 359 | padding-bottom: 56.25%; /* 16:9 */ 360 | } 361 | padding-top: 25px; 362 | height: 0; 363 | } 364 | 365 | .video-wrapper iframe { 366 | position: absolute; 367 | top: 0; 368 | left: 0; 369 | width: 100%; 370 | height: 100%; 371 | } -------------------------------------------------------------------------------- /fonts/specimen_files/specimen_stylesheet.css: -------------------------------------------------------------------------------- 1 | @import url('grid_12-825-55-15.css'); 2 | 3 | /* 4 | CSS Reset by Eric Meyer - Released under Public Domain 5 | http://meyerweb.com/eric/tools/css/reset/ 6 | */ 7 | html, body, div, span, applet, object, iframe, 8 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 9 | a, abbr, acronym, address, big, cite, code, 10 | del, dfn, em, font, img, ins, kbd, q, s, samp, 11 | small, strike, strong, sub, sup, tt, var, 12 | b, u, i, center, dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, table, 14 | caption, tbody, tfoot, thead, tr, th, td 15 | {margin: 0;padding: 0;border: 0;outline: 0; 16 | font-size: 100%;vertical-align: baseline; 17 | background: transparent;} 18 | body {line-height: 1;} 19 | ol, ul {list-style: none;} 20 | blockquote, q {quotes: none;} 21 | blockquote:before, blockquote:after, 22 | q:before, q:after {content: ''; content: none;} 23 | :focus {outline: 0;} 24 | ins {text-decoration: none;} 25 | del {text-decoration: line-through;} 26 | table {border-collapse: collapse;border-spacing: 0;} 27 | 28 | 29 | 30 | 31 | body { 32 | color: #000; 33 | background-color: #dcdcdc; 34 | } 35 | 36 | a { 37 | text-decoration: none; 38 | color: #1883ba; 39 | } 40 | 41 | h1{ 42 | font-size: 32px; 43 | font-weight: normal; 44 | font-style: normal; 45 | margin-bottom: 18px; 46 | } 47 | 48 | h2{ 49 | font-size: 18px; 50 | } 51 | 52 | #container { 53 | width: 865px; 54 | margin: 0px auto; 55 | } 56 | 57 | 58 | #header { 59 | padding: 20px; 60 | font-size: 36px; 61 | background-color: #000; 62 | color: #fff; 63 | } 64 | 65 | #header span { 66 | color: #666; 67 | } 68 | #main_content { 69 | background-color: #fff; 70 | padding: 60px 20px 20px; 71 | } 72 | 73 | 74 | #footer p { 75 | margin: 0; 76 | padding-top: 10px; 77 | padding-bottom: 50px; 78 | color: #333; 79 | font: 10px Arial, sans-serif; 80 | } 81 | 82 | .tabs { 83 | width: 100%; 84 | height: 31px; 85 | background-color: #444; 86 | } 87 | .tabs li { 88 | float: left; 89 | margin: 0; 90 | overflow: hidden; 91 | background-color: #444; 92 | } 93 | .tabs li a { 94 | display: block; 95 | color: #fff; 96 | text-decoration: none; 97 | font: bold 11px/11px 'Arial'; 98 | text-transform: uppercase; 99 | padding: 10px 15px; 100 | border-right: 1px solid #fff; 101 | } 102 | 103 | .tabs li a:hover { 104 | background-color: #00b3ff; 105 | 106 | } 107 | 108 | .tabs li.active a { 109 | color: #000; 110 | background-color: #fff; 111 | } 112 | 113 | 114 | 115 | div.huge { 116 | 117 | font-size: 300px; 118 | line-height: 1em; 119 | padding: 0; 120 | letter-spacing: -.02em; 121 | overflow: hidden; 122 | } 123 | div.glyph_range { 124 | font-size: 72px; 125 | line-height: 1.1em; 126 | } 127 | 128 | .size10{ font-size: 10px; } 129 | .size11{ font-size: 11px; } 130 | .size12{ font-size: 12px; } 131 | .size13{ font-size: 13px; } 132 | .size14{ font-size: 14px; } 133 | .size16{ font-size: 16px; } 134 | .size18{ font-size: 18px; } 135 | .size20{ font-size: 20px; } 136 | .size24{ font-size: 24px; } 137 | .size30{ font-size: 30px; } 138 | .size36{ font-size: 36px; } 139 | .size48{ font-size: 48px; } 140 | .size60{ font-size: 60px; } 141 | .size72{ font-size: 72px; } 142 | .size90{ font-size: 90px; } 143 | 144 | 145 | .psample_row1 { height: 120px;} 146 | .psample_row1 { height: 120px;} 147 | .psample_row2 { height: 160px;} 148 | .psample_row3 { height: 160px;} 149 | .psample_row4 { height: 160px;} 150 | 151 | .psample { 152 | overflow: hidden; 153 | position: relative; 154 | } 155 | .psample p { 156 | line-height: 1.3em; 157 | display: block; 158 | overflow: hidden; 159 | margin: 0; 160 | } 161 | 162 | .psample span { 163 | margin-right: .5em; 164 | } 165 | 166 | .white_blend { 167 | width: 100%; 168 | height: 61px; 169 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNrs3TsKgFAMRUE/eer+NxztxMYuEWQG3ECKwwUF58ycAKixOAGAyAKILAAiCyCyACILgMgCiCyAyAIgsgAiCyCyAIgsgMgCiCwAIgsgsgAiC4DIAogsACIL0CWuZ3UGgLrIhjMA1EV2OAOAJQtgyQLwjOzmDAAiCyCyAIgsQFtkd2cAEFkAkQVAZAHaIns4A4AlC2DJAiCyACILILIAiCzAV5H1dQGAJQsgsgCILIDIAvwisl58AViyAJYsACILILIAIgvAe2T9EhxAZAFEFgCRBeiL7HAGgLrIhjMAWLIAliwAt1OAAQDwygTBulLIlQAAAABJRU5ErkJggg==); 170 | position: absolute; 171 | bottom: 0; 172 | } 173 | .black_blend { 174 | width: 100%; 175 | height: 61px; 176 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVkAAAA9CAYAAAAH4BojAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAPJJREFUeNrs3TEKhTAQRVGjibr/9QoxhY2N3Ywo50A28IrLwP9g6b1PAMSYTQAgsgAiC4DIAogsgMgCILIAIgsgsgCILIDIAogsACILILIAIguAyAKILIDIAiCyACILgMgCZCnjLWYAiFGvB0BQZJsZAFyyAC5ZAO6RXc0AILIAIguAyAKkRXYzA4DIAogsACILkBbZ3QwALlkAlywAIgsgsgAiC4DIArwVWf8uAHDJAogsACILILIAv4isH74AXLIALlkARBZAZAFEFoDnyPokOIDIAogsACILkBfZZgaAuMhWMwC4ZAE+p4x3mAEgxinAAJ+XBbPWGkwAAAAAAElFTkSuQmCC); 177 | position: absolute; 178 | bottom: 0; 179 | } 180 | .fullreverse { 181 | background: #000 !important; 182 | color: #fff !important; 183 | margin-left: -20px; 184 | padding-left: 20px; 185 | margin-right: -20px; 186 | padding-right: 20px; 187 | padding: 20px; 188 | margin-bottom:0; 189 | } 190 | 191 | 192 | .sample_table td { 193 | padding-top: 3px; 194 | padding-bottom:5px; 195 | padding-left: 5px; 196 | vertical-align: middle; 197 | line-height: 1.2em; 198 | } 199 | 200 | .sample_table td:first-child { 201 | background-color: #eee; 202 | text-align: right; 203 | padding-right: 5px; 204 | padding-left: 0; 205 | padding: 5px; 206 | font: 11px/12px "Courier New", Courier, mono; 207 | } 208 | 209 | code { 210 | white-space: pre; 211 | background-color: #eee; 212 | display: block; 213 | padding: 10px; 214 | margin-bottom: 18px; 215 | overflow: auto; 216 | } 217 | 218 | 219 | .bottom,.last {margin-bottom:0 !important; padding-bottom:0 !important;} 220 | 221 | .box { 222 | padding: 18px; 223 | margin-bottom: 18px; 224 | background: #eee; 225 | } 226 | 227 | .reverse,.reversed { background: #000 !important;color: #fff !important; border: none !important;} 228 | 229 | #bodycomparison { 230 | position: relative; 231 | overflow: hidden; 232 | font-size: 72px; 233 | height: 90px; 234 | white-space: nowrap; 235 | } 236 | 237 | #bodycomparison div{ 238 | font-size: 72px; 239 | line-height: 90px; 240 | display: inline; 241 | margin: 0 15px 0 0; 242 | padding: 0; 243 | } 244 | 245 | #bodycomparison div span{ 246 | font: 10px Arial; 247 | position: absolute; 248 | left: 0; 249 | } 250 | #xheight { 251 | float: none; 252 | position: absolute; 253 | color: #d9f3ff; 254 | font-size: 72px; 255 | line-height: 90px; 256 | } 257 | 258 | .fontbody { 259 | position: relative; 260 | } 261 | .arialbody{ 262 | font-family: Arial; 263 | position: relative; 264 | } 265 | .verdanabody{ 266 | font-family: Verdana; 267 | position: relative; 268 | } 269 | .georgiabody{ 270 | font-family: Georgia; 271 | position: relative; 272 | } 273 | 274 | /* @group Layout page 275 | */ 276 | 277 | #layout h1 { 278 | font-size: 36px; 279 | line-height: 42px; 280 | font-weight: normal; 281 | font-style: normal; 282 | } 283 | 284 | #layout h2 { 285 | font-size: 24px; 286 | line-height: 23px; 287 | font-weight: normal; 288 | font-style: normal; 289 | } 290 | 291 | #layout h3 { 292 | font-size: 22px; 293 | line-height: 1.4em; 294 | margin-top: 1em; 295 | font-weight: normal; 296 | font-style: normal; 297 | } 298 | 299 | 300 | #layout p.byline { 301 | font-size: 12px; 302 | margin-top: 18px; 303 | line-height: 12px; 304 | margin-bottom: 0; 305 | } 306 | #layout p { 307 | font-size: 14px; 308 | line-height: 21px; 309 | margin-bottom: .5em; 310 | } 311 | 312 | #layout p.large{ 313 | font-size: 18px; 314 | line-height: 26px; 315 | } 316 | 317 | #layout .sidebar p{ 318 | font-size: 12px; 319 | line-height: 1.4em; 320 | } 321 | 322 | #layout p.caption { 323 | font-size: 10px; 324 | margin-top: -16px; 325 | margin-bottom: 18px; 326 | } 327 | 328 | /* @end */ 329 | 330 | /* @group Glyphs */ 331 | 332 | #glyph_chart div{ 333 | background-color: #d9f3ff; 334 | color: black; 335 | float: left; 336 | font-size: 36px; 337 | height: 1.2em; 338 | line-height: 1.2em; 339 | margin-bottom: 1px; 340 | margin-right: 1px; 341 | text-align: center; 342 | width: 1.2em; 343 | position: relative; 344 | padding: .6em .2em .2em; 345 | } 346 | 347 | #glyph_chart div p { 348 | position: absolute; 349 | left: 0; 350 | top: 0; 351 | display: block; 352 | text-align: center; 353 | font: bold 9px Arial, sans-serif; 354 | background-color: #3a768f; 355 | width: 100%; 356 | color: #fff; 357 | padding: 2px 0; 358 | } 359 | 360 | 361 | #glyphs h1 { 362 | font-family: Arial, sans-serif; 363 | } 364 | /* @end */ 365 | 366 | /* @group Installing */ 367 | 368 | #installing { 369 | font: 13px Arial, sans-serif; 370 | } 371 | 372 | #installing p, 373 | #glyphs p{ 374 | line-height: 1.2em; 375 | margin-bottom: 18px; 376 | font: 13px Arial, sans-serif; 377 | } 378 | 379 | 380 | 381 | #installing h3{ 382 | font-size: 15px; 383 | margin-top: 18px; 384 | } 385 | 386 | /* @end */ 387 | 388 | #rendering h1 { 389 | font-family: Arial, sans-serif; 390 | } 391 | .render_table td { 392 | font: 11px "Courier New", Courier, mono; 393 | vertical-align: middle; 394 | } 395 | 396 | 397 | -------------------------------------------------------------------------------- /scss/site/_normalize.scss: -------------------------------------------------------------------------------- 1 | /* normalize.css v2.1.0 | MIT License | git.io/normalize */ 2 | /* normalize.scss v2.1.0 | MIT/GPLv2 License | bit.ly/normalize-with-compass */ 3 | 4 | 5 | // ============================================================================= 6 | // Variables and Imports 7 | // 8 | // If you have a base partial (or equivalent), you should move these lines to 9 | // that file. @see http://compass-style.org/help/tutorials/best_practices/ 10 | // ============================================================================= 11 | 12 | // The base font size. 13 | $base-font-size: 16px !default; // Override default set in Compass' Vertical Rhythm partial. 14 | 15 | // The base line height determines the basic unit of vertical rhythm. 16 | // $base-line-height: 24px; // Override default set in Compass' Vertical Rhythm partial. 17 | 18 | // The font sizes for h1-h6. 19 | $h1-font-size: 2 * $base-font-size !default; 20 | $h2-font-size: 1.5 * $base-font-size !default; 21 | $h3-font-size: 1.17 * $base-font-size !default; 22 | $h4-font-size: 1 * $base-font-size !default; 23 | $h5-font-size: 0.83 * $base-font-size !default; 24 | $h6-font-size: 0.67 * $base-font-size !default; 25 | 26 | // Set this to true to add support for IE 6. 27 | // $legacy-support-for-ie6: true; // Override default set in Compass' Support partial. 28 | 29 | // Set this to true to add support for IE 7. 30 | // $legacy-support-for-ie7: true; // Override default set in Compass' Support partial. 31 | 32 | // The default font family. 33 | $base-font-family: sans-serif !default; 34 | 35 | // The amount lists and blockquotes are indented. 36 | $indent-amount: 40px !default; 37 | 38 | // After the default variables are set, import the required Compass partials. 39 | @import "compass/support"; 40 | @import "compass/css3/box-sizing"; 41 | @import "compass/typography/vertical_rhythm"; 42 | 43 | 44 | /* ========================================================================== 45 | HTML5 display definitions 46 | ========================================================================== */ 47 | 48 | /** 49 | * Correct `block` display not defined in IE 8/9. 50 | */ 51 | 52 | article, 53 | aside, 54 | details, 55 | figcaption, 56 | figure, 57 | footer, 58 | header, 59 | hgroup, 60 | main, 61 | nav, 62 | section, 63 | summary { 64 | display: block; 65 | } 66 | 67 | /** 68 | * Correct `inline-block` display not defined in IE 8/9. 69 | */ 70 | 71 | audio, 72 | canvas, 73 | video { 74 | display: inline-block; 75 | @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { 76 | *display: inline; 77 | *zoom: 1; 78 | } 79 | } 80 | 81 | /** 82 | * Prevent modern browsers from displaying `audio` without controls. 83 | * Remove excess height in iOS 5 devices. 84 | */ 85 | 86 | audio:not([controls]) { 87 | display: none; 88 | height: 0; 89 | } 90 | 91 | /** 92 | * Address styling not present in IE 7/8/9. 93 | * Known issue: no IE 6 support. 94 | */ 95 | 96 | [hidden] { 97 | display: none; 98 | } 99 | 100 | /* ========================================================================== 101 | Base 102 | ========================================================================== */ 103 | 104 | /** 105 | * 1. Set default font family to sans-serif. 106 | * 2. Prevent iOS text size adjust after orientation change, without disabling 107 | * user zoom. 108 | * 3. Correct text resizing oddly in IE 6/7 when body `font-size` is set using 109 | * `em` units. 110 | */ 111 | 112 | html { 113 | font-family: $base-font-family; /* 1 */ 114 | font-size: 100% * ($base-font-size / 16px); /* 3 */ 115 | -webkit-text-size-adjust: 100%; /* 2 */ 116 | -ms-text-size-adjust: 100%; /* 2 */ 117 | /* Establish a vertical rhythm unit using $base-line-height. */ 118 | @include adjust-leading-to(1); 119 | } 120 | 121 | @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { 122 | /** 123 | * Address `font-family` inconsistency between `textarea` and other form 124 | * elements in IE 6/7. 125 | */ 126 | 127 | button, 128 | input, 129 | select, 130 | textarea { 131 | font-family: $base-font-family; 132 | } 133 | } 134 | 135 | /** 136 | * Remove default margin. 137 | */ 138 | 139 | body { 140 | margin: 0; 141 | } 142 | 143 | /* ========================================================================== 144 | Links 145 | ========================================================================== */ 146 | 147 | /** 148 | * Address `outline` inconsistency between Chrome and other browsers. 149 | */ 150 | 151 | a:focus { 152 | outline: thin dotted; 153 | } 154 | 155 | /** 156 | * Improve readability when focused and also mouse hovered in all browsers. 157 | */ 158 | 159 | a:active, 160 | a:hover { 161 | outline: 0; 162 | } 163 | 164 | /* ========================================================================== 165 | Typography 166 | ========================================================================== */ 167 | 168 | /** 169 | * Set 1 unit of vertical rhythm on the top and bottom margin. 170 | */ 171 | 172 | p, 173 | pre { 174 | margin: rhythm(1) 0; 175 | } 176 | 177 | blockquote { 178 | /* Set 1 unit of vertical rhythm on the top and bottom margin. */ 179 | margin: rhythm(1) $indent-amount; 180 | } 181 | 182 | /** 183 | * Address variable `h1` font-size and margin within `section` and `article` 184 | * contexts in Firefox 4+, Safari 5, and Chrome. 185 | */ 186 | 187 | h1 { 188 | /* Set the font-size and line-height while keeping a proper vertical rhythm. */ 189 | @include adjust-font-size-to( $h1-font-size ); 190 | 191 | /* Set 1 unit of vertical rhythm on the top and bottom margins. */ 192 | @include leader(1, $h1-font-size); 193 | @include trailer(1, $h1-font-size); 194 | } 195 | 196 | h2 { 197 | @include adjust-font-size-to( $h2-font-size ); 198 | @include leader(1, $h2-font-size); 199 | @include trailer(1, $h2-font-size); 200 | } 201 | 202 | h3 { 203 | @include adjust-font-size-to( $h3-font-size ); 204 | @include leader(1, $h3-font-size); 205 | @include trailer(1, $h3-font-size); 206 | } 207 | 208 | h4 { 209 | @include adjust-font-size-to( $h4-font-size ); 210 | @include leader(1, $h4-font-size); 211 | @include trailer(1, $h4-font-size); 212 | } 213 | 214 | h5 { 215 | @include adjust-font-size-to( $h5-font-size ); 216 | @include leader(1, $h5-font-size); 217 | @include trailer(1, $h5-font-size); 218 | } 219 | 220 | h6 { 221 | @include adjust-font-size-to( $h6-font-size ); 222 | @include leader(1, $h6-font-size); 223 | @include trailer(1, $h6-font-size); 224 | } 225 | 226 | /** 227 | * Address styling not present in IE 8/9, Safari 5, and Chrome. 228 | */ 229 | 230 | abbr[title] { 231 | border-bottom: 1px dotted; 232 | } 233 | 234 | /** 235 | * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. 236 | */ 237 | 238 | b, 239 | strong { 240 | font-weight: bold; 241 | } 242 | 243 | /** 244 | * Address styling not present in Safari 5 and Chrome. 245 | */ 246 | 247 | dfn { 248 | font-style: italic; 249 | } 250 | 251 | /** 252 | * Address differences between Firefox and other browsers. 253 | * Known issue: no IE 6/7 normalization. 254 | */ 255 | 256 | hr { 257 | @include box-sizing(border-box); 258 | height: 0; 259 | } 260 | 261 | /** 262 | * Address styling not present in IE 8/9. 263 | */ 264 | 265 | mark { 266 | background: #ff0; 267 | color: #000; 268 | } 269 | 270 | /** 271 | * Correct font family set oddly in Safari 5 and Chrome. 272 | */ 273 | 274 | code, 275 | kbd, 276 | pre, 277 | samp { 278 | font-family: monospace, serif; 279 | @if $legacy-support-for-ie6 { 280 | _font-family: 'courier new', monospace; 281 | } 282 | @include adjust-font-size-to( 1 * $base-font-size ); 283 | } 284 | 285 | /** 286 | * Improve readability of pre-formatted text in all browsers. 287 | */ 288 | 289 | pre { 290 | white-space: pre-wrap; 291 | } 292 | 293 | /** 294 | * Set consistent quote types. 295 | */ 296 | 297 | q { 298 | quotes: "\201C" "\201D" "\2018" "\2019"; 299 | } 300 | 301 | /** 302 | * Address inconsistent and variable font size in all browsers. 303 | */ 304 | 305 | small { 306 | font-size: 80%; 307 | } 308 | 309 | /** 310 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 311 | */ 312 | 313 | sub, 314 | sup { 315 | font-size: 75%; 316 | line-height: 0; 317 | position: relative; 318 | vertical-align: baseline; 319 | } 320 | 321 | sup { 322 | top: -0.5em; 323 | } 324 | 325 | sub { 326 | bottom: -0.25em; 327 | } 328 | 329 | /* ========================================================================== 330 | Lists 331 | ========================================================================== */ 332 | 333 | /** 334 | * Set 1 unit of vertical rhythm and a consistent indentation. 335 | */ 336 | 337 | dl, 338 | menu, 339 | ol, 340 | ul { 341 | margin: rhythm(1) 0; 342 | padding: 0 0 0 $indent-amount; 343 | } 344 | 345 | dl { 346 | padding: 0; 347 | } 348 | 349 | dd { 350 | margin: 0 0 0 $indent-amount; 351 | } 352 | 353 | @if $legacy-support-for-ie7 { 354 | /** 355 | * Correct list images handled incorrectly in IE 7. 356 | */ 357 | 358 | nav ul, 359 | nav ol { 360 | list-style: none; 361 | list-style-image: none; 362 | } 363 | } 364 | 365 | /* ========================================================================== 366 | Embedded content 367 | ========================================================================== */ 368 | 369 | /** 370 | * Remove border when inside `a` element in IE 8/9. 371 | */ 372 | 373 | img { 374 | border: 0; 375 | @if $legacy-support-for-ie7 { 376 | /* Improve image quality when scaled in IE 7. */ 377 | -ms-interpolation-mode: bicubic; 378 | } 379 | } 380 | 381 | /** 382 | * Correct overflow displayed oddly in IE 9. 383 | */ 384 | 385 | svg:not(:root) { 386 | overflow: hidden; 387 | } 388 | 389 | /* ========================================================================== 390 | Figures 391 | ========================================================================== */ 392 | 393 | /** 394 | * Address margin not present in IE 8/9 and Safari 5. 395 | */ 396 | 397 | figure { 398 | margin: 0; 399 | } 400 | 401 | /* ========================================================================== 402 | Forms 403 | ========================================================================== */ 404 | 405 | @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { 406 | /** 407 | * Correct margin displayed oddly in IE 6/7. 408 | */ 409 | 410 | form { 411 | margin: 0; 412 | } 413 | } 414 | 415 | /** 416 | * Define consistent border, margin, and padding. 417 | */ 418 | 419 | fieldset { 420 | border-color: #c0c0c0; 421 | margin: 0 2px; 422 | /* Apply borders and padding that keep the vertical rhythm. */ 423 | @include apply-side-rhythm-border(top, $width: 1px, $lines: 0.35); 424 | @include apply-side-rhythm-border(bottom, $width: 1px, $lines: 0.65); 425 | @include apply-side-rhythm-border(left, $width: 1px, $lines: 0.625); 426 | @include apply-side-rhythm-border(right, $width: 1px, $lines: 0.625); 427 | } 428 | 429 | /** 430 | * 1. Correct `color` not being inherited in IE 8/9. 431 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 432 | * 3. Correct alignment displayed oddly in IE 6/7. 433 | */ 434 | 435 | legend { 436 | border: 0; /* 1 */ 437 | padding: 0; /* 2 */ 438 | @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { 439 | *margin-left: -7px; /* 3 */ 440 | } 441 | } 442 | 443 | /** 444 | * 1. Correct font family not being inherited in all browsers. 445 | * 2. Correct font size not being inherited in all browsers. 446 | * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. 447 | * 4. Improve appearance and consistency with IE 6/7. 448 | */ 449 | 450 | button, 451 | input, 452 | select, 453 | textarea { 454 | font-family: inherit; /* 1 */ 455 | font-size: 100%; /* 2 */ 456 | margin: 0; /* 3 */ 457 | @if $legacy-support-for-ie6 or $legacy-support-for-ie7 { 458 | vertical-align: baseline; /* 4 */ 459 | *vertical-align: middle; /* 4 */ 460 | } 461 | } 462 | 463 | /** 464 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 465 | * the UA stylesheet. 466 | */ 467 | 468 | button, 469 | input { 470 | line-height: normal; 471 | } 472 | 473 | /** 474 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 475 | * All other form control elements do not inherit `text-transform` values. 476 | * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. 477 | * Correct `select` style inheritance in Firefox 4+ and Opera. 478 | */ 479 | 480 | button, 481 | select { 482 | text-transform: none; 483 | } 484 | 485 | /** 486 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 487 | * and `video` controls. 488 | * 2. Correct inability to style clickable `input` types in iOS. 489 | * 3. Improve usability and consistency of cursor style between image-type 490 | * `input` and others. 491 | * 4. Remove inner spacing in IE 7 without affecting normal text inputs. 492 | * Known issue: inner spacing remains in IE 6. 493 | */ 494 | 495 | button, 496 | html input[type="button"], /* 1 */ 497 | input[type="reset"], 498 | input[type="submit"] { 499 | -webkit-appearance: button; /* 2 */ 500 | cursor: pointer; /* 3 */ 501 | @if $legacy-support-for-ie7 { 502 | *overflow: visible; /* 4 */ 503 | } 504 | } 505 | 506 | /** 507 | * Re-set default cursor for disabled elements. 508 | */ 509 | 510 | button[disabled], 511 | html input[disabled] { 512 | cursor: default; 513 | } 514 | 515 | /** 516 | * 1. Address box sizing set to `content-box` in IE 8/9. 517 | * 2. Remove excess padding in IE 8/9. 518 | * 3. Remove excess padding in IE 7. 519 | * Known issue: excess padding remains in IE 6. 520 | */ 521 | 522 | input[type="checkbox"], 523 | input[type="radio"] { 524 | @include box-sizing(border-box); /* 1 */ 525 | padding: 0; /* 2 */ 526 | @if $legacy-support-for-ie7 { 527 | *height: 13px; /* 3 */ 528 | *width: 13px; /* 3 */ 529 | } 530 | } 531 | 532 | /** 533 | * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. 534 | * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome 535 | * (include `-moz` to future-proof). 536 | */ 537 | 538 | input[type="search"] { 539 | -webkit-appearance: textfield; /* 1 */ 540 | @include box-sizing(content-box); /* 2 */ 541 | } 542 | 543 | /** 544 | * Remove inner padding and search cancel button in Safari 5 and Chrome 545 | * on OS X. 546 | */ 547 | 548 | input[type="search"]::-webkit-search-cancel-button, 549 | input[type="search"]::-webkit-search-decoration { 550 | -webkit-appearance: none; 551 | } 552 | 553 | /** 554 | * Remove inner padding and border in Firefox 4+. 555 | */ 556 | 557 | button::-moz-focus-inner, 558 | input::-moz-focus-inner { 559 | border: 0; 560 | padding: 0; 561 | } 562 | 563 | /** 564 | * 1. Remove default vertical scrollbar in IE 8/9. 565 | * 2. Improve readability and alignment in all browsers. 566 | */ 567 | 568 | textarea { 569 | overflow: auto; /* 1 */ 570 | vertical-align: top; /* 2 */ 571 | } 572 | 573 | /* ========================================================================== 574 | Tables 575 | ========================================================================== */ 576 | 577 | /** 578 | * Remove most spacing between table cells. 579 | */ 580 | 581 | table { 582 | border-collapse: collapse; 583 | border-spacing: 0; 584 | } 585 | -------------------------------------------------------------------------------- /css/screen.css: -------------------------------------------------------------------------------- 1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;line-height:1.5em}button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}p,pre{margin:1.5em 0}blockquote{margin:1.5em 40px}h1{font-size:2em;line-height:1.5em;margin-top:0.75em;margin-bottom:0.75em}h2{font-size:1.5em;line-height:2em;margin-top:1em;margin-bottom:1em}h3{font-size:1.17em;line-height:1.28205em;margin-top:1.28205em;margin-bottom:1.28205em}h4{font-size:1em;line-height:1.5em;margin-top:1.5em;margin-bottom:1.5em}h5{font-size:0.83em;line-height:1.80723em;margin-top:1.80723em;margin-bottom:1.80723em}h6{font-size:0.67em;line-height:2.23881em;margin-top:2.23881em;margin-bottom:2.23881em}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em;line-height:1.5em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1.5em 0;padding:0 0 0 40px}dl{padding:0}dd{margin:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border-color:#c0c0c0;margin:0 2px;border-top-style:solid;border-top-width:0.0625em;padding-top:0.4625em;border-bottom-style:solid;border-bottom-width:0.0625em;padding-bottom:0.9125em;border-left-style:solid;border-left-width:0.0625em;padding-left:0.875em;border-right-style:solid;border-right-width:0.0625em;padding-right:0.875em}legend{border:0;padding:0;*margin-left:-7px}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}table{max-width:100%;border-collapse:collapse;border-spacing:0}.table{width:100%;margin-bottom:12px}.table th,.table td{padding:8px;text-align:left;vertical-align:top;border-top:1px solid #edeff1}.table th{font-weight:700;color:#000}.table thead th{vertical-align:bottom}.table caption+thead tr:first-child th,.table caption+thead tr:first-child td,.table colgroup+thead tr:first-child th,.table colgroup+thead tr:first-child td,.table thead:first-child tr:first-child th,.table thead:first-child tr:first-child td{border-top:0}.table tbody+tbody{border-top:2px solid #edeff1}.table-condensed th,.table-condensed td{padding:4px 5px}.table-bordered{border:1px solid #edeff1;border-left:0}.table-bordered th,.table-bordered td{border-left:1px solid #edeff1}.table-striped tbody>tr:nth-child(odd)>td,.table-striped tbody>tr:nth-child(odd)>th{background-color:#edeff1}.bordered-list{margin:0;padding:0}.bordered-list span{display:inline-block;text-align:right;float:right}.bordered-list li{clear:both;list-style:none;padding:0 0 4px;margin:0 0 4px;border-bottom:1px solid #EEE}.bordered-list li:last-child{border:none}.nav{margin-left:0;margin-bottom:20px;list-style:none}.nav>li>a{display:block}.nav>li>a:hover,.nav>li>a:focus{text-decoration:none;background-color:#EEE}.nav-tabs>li>a,.nav-pills>li>a{padding-right:6px;padding-left:6px;margin-right:2px;line-height:14px}.nav-tabs{border-bottom:1px solid #ddd}.nav-tabs>li{margin-bottom:-1px}.nav-tabs>li>a{padding-top:8px;padding-bottom:8px;line-height:20px;border:1px solid transparent;border-radius:4px 4px 0 0}.nav-tabs>li>a:hover,.nav-tabs>li>a:focus{border-color:#EEE #EEE #DDD}.nav-tabs>.active>a,.nav-tabs>.active>a:hover,.nav-tabs>.active>a:focus{color:#555555;background-color:#FFF;border:1px solid #DDD;border-bottom-color:transparent;cursor:default}.nav-stacked>li>a{margin-right:0}.nav-tabs.nav-stacked{border-bottom:0}.nav-tabs.nav-stacked>li>a{border:1px solid #ddd;border-radius:0}.nav-tabs.nav-stacked>li:first-child>a{border-top-right-radius:4px;border-top-left-radius:4px}.nav-tabs.nav-stacked>li:last-child>a{border-bottom-right-radius:4px;border-bottom-left-radius:4px}.highlight{background-color:#ffc}.highlight .c{color:#586e75}.highlight .err{color:#93a1a1}.highlight .g{color:#93a1a1}.highlight .k{color:#859900}.highlight .l{color:#93a1a1}.highlight .n{color:#93a1a1}.highlight .o{color:#859900}.highlight .x{color:#cb4b16}.highlight .p{color:#93a1a1}.highlight .cm{color:#586e75}.highlight .cp{color:#859900}.highlight .c1{color:#586e75}.highlight .cs{color:#859900}.highlight .gd{color:#2aa198}.highlight .ge{color:#93A1A1;font-style:italic}.highlight .gr{color:#dc322f}.highlight .gh{color:#cb4b16}.highlight .gi{color:#859900}.highlight .go{color:#93a1a1}.highlight .gp{color:#93a1a1}.highlight .gs{color:#93A1A1;font-weight:bold}.highlight .gu{color:#cb4b16}.highlight .gt{color:#93a1a1}.highlight .kc{color:#cb4b16}.highlight .kd{color:#268bd2}.highlight .kn{color:#859900}.highlight .kp{color:#859900}.highlight .kr{color:#268bd2}.highlight .kt{color:#dc322f}.highlight .ld{color:#93a1a1}.highlight .m{color:#2aa198}.highlight .s{color:#2aa198}.highlight .na{color:#93a1a1}.highlight .nb{color:#b58900}.highlight .nc{color:#268bd2}.highlight .no{color:#cb4b16}.highlight .nd{color:#268bd2}.highlight .ni{color:#cb4b16}.highlight .ne{color:#cb4b16}.highlight .nf{color:#268bd2}.highlight .nl{color:#93a1a1}.highlight .nn{color:#93a1a1}.highlight .nx{color:#93a1a1}.highlight .py{color:#93a1a1}.highlight .nt{color:#268bd2}.highlight .nv{color:#268bd2}.highlight .ow{color:#859900}.highlight .w{color:#93a1a1}.highlight .mf{color:#2aa198}.highlight .mh{color:#2aa198}.highlight .mi{color:#2aa198}.highlight .mo{color:#2aa198}.highlight .sb{color:#586e75}.highlight .sc{color:#2aa198}.highlight .sd{color:#93a1a1}.highlight .s2{color:#2aa198}.highlight .se{color:#cb4b16}.highlight .sh{color:#93a1a1}.highlight .si{color:#2aa198}.highlight .sx{color:#2aa198}.highlight .sr{color:#dc322f}.highlight .s1{color:#2aa198}.highlight .ss{color:#2aa198}.highlight .bp{color:#268bd2}.highlight .vc{color:#268bd2}.highlight .vg{color:#268bd2}.highlight .vi{color:#268bd2}.highlight .il{color:#2aa198}@font-face{font-family:'Source Sans Pro';src:url("../fonts/sourcesanspro-regular-webfont.eot");src:url("../fonts/sourcesanspro-regular-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/sourcesanspro-regular-webfont.woff") format("woff"),url("../fonts/sourcesanspro-regular-webfont.ttf") format("truetype"),url("../fonts/sourcesanspro-regular-webfont.svg#source_sans_proregular") format("svg");font-weight:normal;font-style:400}@font-face{font-family:'Source Sans Pro';src:url("../fonts/sourcesanspro-semibold-webfont.eot");src:url("../fonts/sourcesanspro-semibold-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/sourcesanspro-semibold-webfont.woff") format("woff"),url("../fonts/sourcesanspro-semibold-webfont.ttf") format("truetype"),url("../fonts/sourcesanspro-semibold-webfont.svg#source_sans_prosemibold") format("svg");font-weight:600;font-style:normal}@font-face{font-family:'Source Sans Pro';src:url("../fonts/sourcesanspro-bold-webfont.eot");src:url("../fonts/sourcesanspro-bold-webfont.eot?#iefix") format("embedded-opentype"),url("../fonts/sourcesanspro-bold-webfont.woff") format("woff"),url("../fonts/sourcesanspro-bold-webfont.ttf") format("truetype"),url("../fonts/sourcesanspro-bold-webfont.svg#source_sans_probold") format("svg");font-weight:bold;font-style:700}#header>.inner-content,#content>.inner-content,#footer>.inner-content{*zoom:1;max-width:940px;_width:940px;padding-left:20px;padding-right:20px;margin-left:auto;margin-right:auto}#header>.inner-content:after,#content>.inner-content:after,#footer>.inner-content:after{content:"";display:table;clear:both}.cl-docs a[rel="attachment"]{border:none}.cl-docs .aligncenter{margin:0 auto;display:block}.cl-docs .wp-caption{text-align:right}.cl-docs .wp-caption a{border:none}.cl-docs .wp-caption .wp-caption-text{color:#999;font-size:13px}.cl-docs img.alignright,.cl-docs div.alignright{float:right;margin:0 0 12px 12px}.cl-docs img.alignleft,.cl-docs div.alignleft{float:left;margin:0 12px 12px 0}.cl-docs img.aligncenter{margin:0 auto 12px;clear:both}@media all and (max-width: 959px){#blog-nav{padding:12px 20px 0}#blog-content{padding:20px}}@media all and (min-width: 960px){#blog{*zoom:1;max-width:940px;_width:940px;padding-left:20px;padding-right:20px;margin-left:auto;margin-right:auto;padding:20px 0 0}#blog:after{content:"";display:table;clear:both}#blog #blog-nav{width:31.91489%;float:left;margin-right:2.12766%;display:inline;float:right;margin-right:0;*margin-left:-20px;display:inline}#blog #blog-content{width:65.95745%;float:left;margin-right:2.12766%;display:inline}#blog #blog-single{padding-left:17.02128%;width:65.95745%;float:left;margin-right:2.12766%;display:inline}#blog article{max-width:600px}}#blog article{font-size:14px}#blog article:before,#blog article:after{content:"";display:table}#blog article:after{clear:both}#blog img{max-width:100%}#blog h2{margin-top:0}#blog-nav a:link,#blog-nav a:visited{color:#7F7F7F;border-bottom:1px solid #CCC;border-bottom:1px solid rgba(0,0,0,0.15)}#blog-nav a:hover,#blog-nav a:active,#blog-nav a:focus{color:#000;border-bottom:none}#blog-nav h4{margin-top:12px}#blog-nav .date{color:#BBB;font-size:11px}#blog article{margin:0 0 24px;padding:0 0 24px;border-bottom:1px solid #DDD}#blog article header p{color:#999}#blog article h1{text-transform:uppercase;font-family:"HelveticaNeue-CondensedBold", "Helvetica Neue CE 600 Condensed", "Helvetica Neue LT Condensed", "Helvetica Neue 600 Condensed", "HelveticaNeue-BoldCondensed", "Helvetica Neue BoldCondensed", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:700;font-stretch:condensed;line-height:1;margin:0;text-transform:none}#blog article h1 a{color:#2e3921;border:none}#blog article h1 a:hover{color:#000}#blog article img.shaded{-webkit-box-shadow:2px 2px 2px rgba(0,0,0,0.15),0 0 0 1px rgba(0,0,0,0.1);-moz-box-shadow:2px 2px 2px rgba(0,0,0,0.15),0 0 0 1px rgba(0,0,0,0.1);box-shadow:2px 2px 2px rgba(0,0,0,0.15),0 0 0 1px rgba(0,0,0,0.1)}#blog article:last-child{margin:0;border:none}#disqus_thread{max-width:600px}body{margin:0;padding:0;font-family:'Source Sans Pro', Arial, sans-serif;font-size:14px;color:#666;line-height:1.5}.accessible-text{position:absolute;top:-9000px;left:-9000px}.page-title-bar{background:#edeff1}.page-title-bar .inner-content{*zoom:1;max-width:940px;_width:940px;padding-left:20px;padding-right:20px;margin-left:auto;margin-right:auto;padding-top:12px;padding-bottom:12px}.page-title-bar .inner-content:after{content:"";display:table;clear:both}.page-title-bar h2{text-transform:uppercase;font-family:"HelveticaNeue-CondensedBold", "Helvetica Neue CE 600 Condensed", "Helvetica Neue LT Condensed", "Helvetica Neue 600 Condensed", "HelveticaNeue-BoldCondensed", "Helvetica Neue BoldCondensed", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:700;font-stretch:condensed;line-height:1;margin:0;text-transform:none;font-size:32px}p,h4{margin:6px 0}hr{border:none;border-bottom:1px solid #edeff1;margin:18px 0}h1,h2{color:#000;line-height:1.1}h3{color:#333;font-weight:600;font-size:18px;margin:12px 0}h4{color:#000}a{-webkit-transition:color 0.2s;-moz-transition:color 0.2s;-o-transition:color 0.2s;transition:color 0.2s;text-decoration:none;color:#485934;border-bottom:1px solid rgba(72,89,52,0.2)}a:visited{color:#2e3921;border-bottom:1px solid rgba(72,89,52,0.2)}a:hover,a:active,a:focus{background:rgba(72,89,52,0.2);color:brighten(#485934, 30%)}pre{padding:10px;margin:0 0 1px;font-size:12px;-webkit-border-radius:4px;-moz-border-radius:4px;-ms-border-radius:4px;-o-border-radius:4px;border-radius:4px;background:#edeff1;line-height:1.3;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}pre+pre{border-bottom-radius:4px}.help-text{color:#999;font-size:11px}#header{background:#485934}#header a{transition-property:background, box-shadow;transition-duration:0.18s}#header #social{float:right;color:#95af77}@media all and (max-width: 768px){#header #social span{display:none}}@media all and (max-width: 480px){#header #social{display:none}}#header #social a{margin:10px 0 10px 5px;border:none;color:#FFF;padding:10px 15px;display:inline-block;background:#627947;border-radius:3px}#header #social a:hover,#header #social a:focus{background:#14190e;-webkit-box-shadow:0 0 0 2px #fff;-moz-box-shadow:0 0 0 2px #fff;box-shadow:0 0 0 2px #fff}#nav{padding:10px 0;float:left}#nav a{color:#FFF;padding:10px;display:inline-block;margin-right:-4px}#nav a:link,#nav a:visited{border:none;border-right:1px solid #627947}#nav a:hover,#nav a:active,#nav a:focus,#nav a.active{background:#627947}#nav a:last-child{border-right:none}#banner{background:#1e2a28 url(../images/1.jpg) center center;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;margin:0 0 20px;padding:20px 0;position:relative}#banner:after{content:'';width:100%;height:100%;position:absolute;top:0;left:0;background:#000;background:rgba(0,0,0,0.5)}#banner .inner-content{*zoom:1;max-width:940px;_width:940px;padding-left:20px;padding-right:20px;margin-left:auto;margin-right:auto}#banner .inner-content:after{content:"";display:table;clear:both}#banner .copy{position:relative;z-index:1}#banner h1{text-transform:uppercase;font-family:"HelveticaNeue-CondensedBold", "Helvetica Neue CE 600 Condensed", "Helvetica Neue LT Condensed", "Helvetica Neue 600 Condensed", "HelveticaNeue-BoldCondensed", "Helvetica Neue BoldCondensed", "Helvetica Neue", Helvetica, Arial, sans-serif;font-weight:700;font-stretch:condensed;line-height:1;margin:0;font-size:110px;line-height:0.9;color:#FFF}#banner .intro{font-size:21px;color:#FFF;line-height:1.33;margin:0;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=75);opacity:0.75}#banner .btn,#banner .intro{margin-left:4px}#banner img{margin-top:20px}#banner .img-holder{display:none}@media all and (min-width: 960px){#banner{height:303px;padding:0}#banner:after{content:none}#banner .copy{background:#000;background:rgba(0,0,0,0.5);padding:20px;margin-top:40px;width:49.20635%;float:left;margin-right:1.5873%;display:inline}}#footer{border-top:1px solid #edeff1;margin:0 auto;padding:12px 0;color:#999;overflow:hidden}#footer a:link,#footer a:visited{color:#7F7F7F;border-bottom:1px solid #CCC;border-bottom:1px solid rgba(0,0,0,0.15)}#footer a:hover,#footer a:active,#footer a:focus{color:#000;border-bottom:none}@media all and (min-width: 960px){#footer p.first-child{float:left}#footer p.last-child{float:right}}.cols{margin:0 0 20px;overflow:hidden}.cols h3{margin:12px 0 4px}@media all and (min-width: 500px){.cols .col{width:48.93617%;float:left;margin-right:2.12766%;display:inline}.cols .col:last-child{float:right;margin-right:0;*margin-left:-20px;display:inline}}.page-type-subnav #subnav h4{margin-top:0;margin-bottom:4px}.page-type-subnav #subnav ul{padding:0;margin-top:0}.page-type-subnav #content article{font-size:14px}.page-type-subnav #content h2{margin-top:0}@media all and (max-width: 767px){#subnav{padding:12px 20px 0}.page-type-subnav #content{padding:0 20px 12px 20px}}@media all and (min-width: 768px){.page-type-subnav{*zoom:1;max-width:940px;_width:940px;padding-left:20px;padding-right:20px;margin-left:auto;margin-right:auto}.page-type-subnav:after{content:"";display:table;clear:both}.page-type-subnav #subnav{width:14.89362%;float:left;margin-right:2.12766%;display:inline;margin:32px 0 0}.page-type-subnav #subnav h4{margin-top:0;margin-bottom:4px}.page-type-subnav #subnav ul{padding:0;margin-top:0}.page-type-subnav #content{width:82.97872%;float:left;margin-right:2.12766%;display:inline;float:right;margin-right:0;*margin-left:-20px;display:inline}.page-type-subnav #content article{max-width:740px;font-size:14px;padding:20px}.page-type-subnav #content h2{margin-top:0}}#error404{background:#edeff1;text-align:center;padding:40px}.video-wrapper{position:relative;padding-bottom:66.67%;padding-top:25px;height:0}.video-wrapper.aspect-16-9{padding-bottom:56.25%}.video-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%} 2 | -------------------------------------------------------------------------------- /fonts/sourcesanspro-bold-demo.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | Source Sans Pro Bold Specimen 19 | 20 | 21 | 26 | 27 | 28 | 29 |
30 | 32 | 39 | 40 |
41 | 42 | 43 |
44 | 45 |
46 |
47 |
AaBb
48 |
49 |
50 | 51 |
52 |
A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
53 |
54 |
55 |
56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 |
10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
73 | 74 |
75 | 76 |
77 | 78 | 79 | 80 |
81 | 82 | 83 |
84 |
body
body
body
body
85 |
86 | bodySource Sans Pro Bold 87 |
88 |
89 | bodyArial 90 |
91 |
92 | bodyVerdana 93 |
94 |
95 | bodyGeorgia 96 |
97 | 98 | 99 | 100 |
101 | 102 | 103 |
104 | 105 |
106 |

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

107 | 108 |
109 |
110 |

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

111 | 112 |
113 |
114 |

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

115 | 116 |
117 |
118 |

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

119 | 120 |
121 |
122 | 123 |
124 |
125 |
126 |

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

127 | 128 |
129 |
130 |

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

131 | 132 |
133 |
134 |

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

135 | 136 |
137 | 138 |
139 | 140 |
141 | 142 |
143 |
144 |

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

145 |
146 |
147 |

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

148 |
149 | 150 |
151 | 152 |
153 | 154 |
155 |
156 |

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

157 |
158 |
159 | 160 |
161 | 162 | 163 | 164 |
165 |
166 |

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

167 | 168 |
169 |
170 |

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

171 | 172 |
173 |
174 |

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

175 | 176 |
177 |
178 |

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

179 | 180 |
181 |
182 | 183 |
184 | 185 |
186 |
187 |

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

188 | 189 |
190 |
191 |

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

192 | 193 |
194 |
195 |

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

196 | 197 |
198 |
199 | 200 |
201 | 202 |
203 |
204 |

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

205 |
206 |
207 |

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

208 |
209 | 210 |
211 | 212 |
213 | 214 |
215 |
216 |

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

217 |
218 |
219 | 220 |
221 | 222 | 223 | 224 | 225 |
226 | 227 |
228 | 229 |
230 | 231 |
232 |

Lorem Ipsum Dolor

233 |

Etiam porta sem malesuada magna mollis euismod

234 | 235 |

By Aenean Lacinia

236 |
237 |
238 |
239 |
240 |

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

241 | 242 | 243 |

Pellentesque ornare sem

244 | 245 |

Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

246 | 247 |

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

248 | 249 |

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

250 | 251 |

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

252 | 253 |

Cras mattis consectetur

254 | 255 |

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

256 | 257 |

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

258 |
259 | 260 |
261 | 262 |
263 |

Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

264 |
265 | 266 |

Maecenas sed diam eget risus varius.

267 | 268 |

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

269 | 270 | 271 | 272 |

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.

273 | 274 |

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

275 | 276 |
277 |
278 | 279 |
280 | 281 | 282 | 283 | 284 | 285 | 286 |
287 |
288 |
289 | 290 |

Language Support

291 |

The subset of Source Sans Pro Bold in this kit supports the following languages:
292 | 293 | Albanian, Danish, Dutch, English, Faroese, French, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Swedish

294 |

Glyph Chart

295 |

The subset of Source Sans Pro Bold in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

296 |
297 | 298 |

&#13;

299 |

&#32;

300 |

&#33;

!
301 |

&#34;

"
302 |

&#35;

#
303 |

&#36;

$
304 |

&#37;

%
305 |

&#38;

&
306 |

&#39;

'
307 |

&#40;

(
308 |

&#41;

)
309 |

&#42;

*
310 |

&#43;

+
311 |

&#44;

,
312 |

&#45;

-
313 |

&#46;

.
314 |

&#47;

/
315 |

&#48;

0
316 |

&#49;

1
317 |

&#50;

2
318 |

&#51;

3
319 |

&#52;

4
320 |

&#53;

5
321 |

&#54;

6
322 |

&#55;

7
323 |

&#56;

8
324 |

&#57;

9
325 |

&#58;

:
326 |

&#59;

;
327 |

&#60;

<
328 |

&#61;

=
329 |

&#62;

>
330 |

&#63;

?
331 |

&#64;

@
332 |

&#65;

A
333 |

&#66;

B
334 |

&#67;

C
335 |

&#68;

D
336 |

&#69;

E
337 |

&#70;

F
338 |

&#71;

G
339 |

&#72;

H
340 |

&#73;

I
341 |

&#74;

J
342 |

&#75;

K
343 |

&#76;

L
344 |

&#77;

M
345 |

&#78;

N
346 |

&#79;

O
347 |

&#80;

P
348 |

&#81;

Q
349 |

&#82;

R
350 |

&#83;

S
351 |

&#84;

T
352 |

&#85;

U
353 |

&#86;

V
354 |

&#87;

W
355 |

&#88;

X
356 |

&#89;

Y
357 |

&#90;

Z
358 |

&#91;

[
359 |

&#92;

\
360 |

&#93;

]
361 |

&#94;

^
362 |

&#95;

_
363 |

&#96;

`
364 |

&#97;

a
365 |

&#98;

b
366 |

&#99;

c
367 |

&#100;

d
368 |

&#101;

e
369 |

&#102;

f
370 |

&#103;

g
371 |

&#104;

h
372 |

&#105;

i
373 |

&#106;

j
374 |

&#107;

k
375 |

&#108;

l
376 |

&#109;

m
377 |

&#110;

n
378 |

&#111;

o
379 |

&#112;

p
380 |

&#113;

q
381 |

&#114;

r
382 |

&#115;

s
383 |

&#116;

t
384 |

&#117;

u
385 |

&#118;

v
386 |

&#119;

w
387 |

&#120;

x
388 |

&#121;

y
389 |

&#122;

z
390 |

&#123;

{
391 |

&#124;

|
392 |

&#125;

}
393 |

&#126;

~
394 |

&#160;

 
395 |

&#161;

¡
396 |

&#162;

¢
397 |

&#163;

£
398 |

&#164;

¤
399 |

&#165;

¥
400 |

&#166;

¦
401 |

&#167;

§
402 |

&#168;

¨
403 |

&#169;

©
404 |

&#170;

ª
405 |

&#171;

«
406 |

&#172;

¬
407 |

&#173;

­
408 |

&#174;

®
409 |

&#175;

¯
410 |

&#176;

°
411 |

&#177;

±
412 |

&#178;

²
413 |

&#179;

³
414 |

&#180;

´
415 |

&#181;

µ
416 |

&#182;

417 |

&#183;

·
418 |

&#184;

¸
419 |

&#185;

¹
420 |

&#186;

º
421 |

&#187;

»
422 |

&#188;

¼
423 |

&#189;

½
424 |

&#190;

¾
425 |

&#191;

¿
426 |

&#192;

À
427 |

&#193;

Á
428 |

&#194;

Â
429 |

&#195;

Ã
430 |

&#196;

Ä
431 |

&#197;

Å
432 |

&#198;

Æ
433 |

&#199;

Ç
434 |

&#200;

È
435 |

&#201;

É
436 |

&#202;

Ê
437 |

&#203;

Ë
438 |

&#204;

Ì
439 |

&#205;

Í
440 |

&#206;

Î
441 |

&#207;

Ï
442 |

&#208;

Ð
443 |

&#209;

Ñ
444 |

&#210;

Ò
445 |

&#211;

Ó
446 |

&#212;

Ô
447 |

&#213;

Õ
448 |

&#214;

Ö
449 |

&#215;

×
450 |

&#216;

Ø
451 |

&#217;

Ù
452 |

&#218;

Ú
453 |

&#219;

Û
454 |

&#220;

Ü
455 |

&#221;

Ý
456 |

&#222;

Þ
457 |

&#223;

ß
458 |

&#224;

à
459 |

&#225;

á
460 |

&#226;

â
461 |

&#227;

ã
462 |

&#228;

ä
463 |

&#229;

å
464 |

&#230;

æ
465 |

&#231;

ç
466 |

&#232;

è
467 |

&#233;

é
468 |

&#234;

ê
469 |

&#235;

ë
470 |

&#236;

ì
471 |

&#237;

í
472 |

&#238;

î
473 |

&#239;

ï
474 |

&#240;

ð
475 |

&#241;

ñ
476 |

&#242;

ò
477 |

&#243;

ó
478 |

&#244;

ô
479 |

&#245;

õ
480 |

&#246;

ö
481 |

&#247;

÷
482 |

&#248;

ø
483 |

&#249;

ù
484 |

&#250;

ú
485 |

&#251;

û
486 |

&#252;

ü
487 |

&#253;

ý
488 |

&#254;

þ
489 |

&#255;

ÿ
490 |

&#338;

Œ
491 |

&#339;

œ
492 |

&#376;

Ÿ
493 |

&#710;

ˆ
494 |

&#732;

˜
495 |

&#8192;

 
496 |

&#8193;

 
497 |

&#8194;

 
498 |

&#8195;

 
499 |

&#8196;

 
500 |

&#8197;

 
501 |

&#8198;

 
502 |

&#8199;

 
503 |

&#8200;

 
504 |

&#8201;

 
505 |

&#8202;

 
506 |

&#8208;

‐
507 |

&#8209;

‑
508 |

&#8210;

‒
509 |

&#8211;

–
510 |

&#8212;

—
511 |

&#8216;

‘
512 |

&#8217;

’
513 |

&#8218;

‚
514 |

&#8220;

“
515 |

&#8221;

”
516 |

&#8222;

„
517 |

&#8226;

•
518 |

&#8230;

…
519 |

&#8239;

 
520 |

&#8249;

‹
521 |

&#8250;

›
522 |

&#8287;

 
523 |

&#8364;

€
524 |

&#8482;

™
525 |

&#57344;

526 |

&#64257;

fi
527 |

&#64258;

fl
528 |
529 |
530 | 531 | 532 |
533 |
534 | 535 | 536 |
537 | 538 |
539 | 540 |
541 |
542 |
543 |

Installing Webfonts

544 | 545 |

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

546 | 547 |

1. Upload your webfonts

548 |

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

549 | 550 |

2. Include the webfont stylesheet

551 |

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

552 | 553 | 554 | 555 | @font-face{ 556 | font-family: 'MyWebFont'; 557 | src: url('WebFont.eot'); 558 | src: url('WebFont.eot?#iefix') format('embedded-opentype'), 559 | url('WebFont.woff') format('woff'), 560 | url('WebFont.ttf') format('truetype'), 561 | url('WebFont.svg#webfont') format('svg'); 562 | } 563 | 564 | 565 |

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

566 | <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> 567 | 568 |

3. Modify your own stylesheet

569 |

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

570 | p { font-family: 'WebFont', Arial, sans-serif; } 571 | 572 |

4. Test

573 |

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

574 |
575 | 576 |
577 |
578 |

Troubleshooting
Font-Face Problems

579 |

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

580 | 581 |

Fonts not showing in any browser

582 | 583 |

This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.

584 | 585 |

Fonts not loading in iPhone or iPad

586 | 587 |

The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.

588 | 589 |

Fonts not loading in Firefox

590 | 591 |

The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)

592 | 593 |

Fonts not loading in IE

594 | 595 |

Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.

596 | 597 |

Fonts not loading in IE9

598 | 599 |

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

600 |
601 |
602 |
603 | 604 |
605 | 606 |
607 | 610 |
611 | 612 | 613 | -------------------------------------------------------------------------------- /fonts/sourcesanspro-regular-demo.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 17 | 18 | Source Sans Pro Regular Specimen 19 | 20 | 21 | 26 | 27 | 28 | 29 |
30 | 32 | 39 | 40 |
41 | 42 | 43 |
44 | 45 |
46 |
47 |
AaBb
48 |
49 |
50 | 51 |
52 |
A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​1​2​3​4​5​6​7​8​9​0​&​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
53 |
54 |
55 |
56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 |
10abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
11abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
12abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
13abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
14abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
16abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
18abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
20abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
24abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
30abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
36abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
48abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
60abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
72abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
90abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
73 | 74 |
75 | 76 |
77 | 78 | 79 | 80 |
81 | 82 | 83 |
84 |
body
body
body
body
85 |
86 | bodySource Sans Pro Regular 87 |
88 |
89 | bodyArial 90 |
91 |
92 | bodyVerdana 93 |
94 |
95 | bodyGeorgia 96 |
97 | 98 | 99 | 100 |
101 | 102 | 103 |
104 | 105 |
106 |

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

107 | 108 |
109 |
110 |

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

111 | 112 |
113 |
114 |

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

115 | 116 |
117 |
118 |

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

119 | 120 |
121 |
122 | 123 |
124 |
125 |
126 |

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

127 | 128 |
129 |
130 |

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

131 | 132 |
133 |
134 |

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

135 | 136 |
137 | 138 |
139 | 140 |
141 | 142 |
143 |
144 |

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

145 |
146 |
147 |

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

148 |
149 | 150 |
151 | 152 |
153 | 154 |
155 |
156 |

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

157 |
158 |
159 | 160 |
161 | 162 | 163 | 164 |
165 |
166 |

10.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

167 | 168 |
169 |
170 |

11.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

171 | 172 |
173 |
174 |

12.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

175 | 176 |
177 |
178 |

13.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

179 | 180 |
181 |
182 | 183 |
184 | 185 |
186 |
187 |

14.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

188 | 189 |
190 |
191 |

16.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

192 | 193 |
194 |
195 |

18.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

196 | 197 |
198 |
199 | 200 |
201 | 202 |
203 |
204 |

20.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

205 |
206 |
207 |

24.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

208 |
209 | 210 |
211 | 212 |
213 | 214 |
215 |
216 |

30.Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae elit libero, a pharetra augue.

217 |
218 |
219 | 220 |
221 | 222 | 223 | 224 | 225 |
226 | 227 |
228 | 229 |
230 | 231 |
232 |

Lorem Ipsum Dolor

233 |

Etiam porta sem malesuada magna mollis euismod

234 | 235 |

By Aenean Lacinia

236 |
237 |
238 |
239 |
240 |

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

241 | 242 | 243 |

Pellentesque ornare sem

244 | 245 |

Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam id dolor id nibh ultricies vehicula ut id elit.

246 | 247 |

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

248 | 249 |

Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur.

250 | 251 |

Nullam quis risus eget urna mollis ornare vel eu leo. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec ullamcorper nulla non metus auctor fringilla.

252 | 253 |

Cras mattis consectetur

254 | 255 |

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean lacinia bibendum nulla sed consectetur. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum.

256 | 257 |

Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Cras mattis consectetur purus sit amet fermentum.

258 |
259 | 260 |
261 | 262 |
263 |

Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

264 |
265 | 266 |

Maecenas sed diam eget risus varius.

267 | 268 |

Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Vestibulum id ligula porta felis euismod semper. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

269 | 270 | 271 | 272 |

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.

273 | 274 |

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

275 | 276 |
277 |
278 | 279 |
280 | 281 | 282 | 283 | 284 | 285 | 286 |
287 |
288 |
289 | 290 |

Language Support

291 |

The subset of Source Sans Pro Regular in this kit supports the following languages:
292 | 293 | Albanian, Danish, Dutch, English, Faroese, French, German, Icelandic, Italian, Malagasy, Norwegian, Portuguese, Spanish, Swedish

294 |

Glyph Chart

295 |

The subset of Source Sans Pro Regular in this kit includes all the glyphs listed below. Unicode entities are included above each glyph to help you insert individual characters into your layout.

296 |
297 | 298 |

&#13;

299 |

&#32;

300 |

&#33;

!
301 |

&#34;

"
302 |

&#35;

#
303 |

&#36;

$
304 |

&#37;

%
305 |

&#38;

&
306 |

&#39;

'
307 |

&#40;

(
308 |

&#41;

)
309 |

&#42;

*
310 |

&#43;

+
311 |

&#44;

,
312 |

&#45;

-
313 |

&#46;

.
314 |

&#47;

/
315 |

&#48;

0
316 |

&#49;

1
317 |

&#50;

2
318 |

&#51;

3
319 |

&#52;

4
320 |

&#53;

5
321 |

&#54;

6
322 |

&#55;

7
323 |

&#56;

8
324 |

&#57;

9
325 |

&#58;

:
326 |

&#59;

;
327 |

&#60;

<
328 |

&#61;

=
329 |

&#62;

>
330 |

&#63;

?
331 |

&#64;

@
332 |

&#65;

A
333 |

&#66;

B
334 |

&#67;

C
335 |

&#68;

D
336 |

&#69;

E
337 |

&#70;

F
338 |

&#71;

G
339 |

&#72;

H
340 |

&#73;

I
341 |

&#74;

J
342 |

&#75;

K
343 |

&#76;

L
344 |

&#77;

M
345 |

&#78;

N
346 |

&#79;

O
347 |

&#80;

P
348 |

&#81;

Q
349 |

&#82;

R
350 |

&#83;

S
351 |

&#84;

T
352 |

&#85;

U
353 |

&#86;

V
354 |

&#87;

W
355 |

&#88;

X
356 |

&#89;

Y
357 |

&#90;

Z
358 |

&#91;

[
359 |

&#92;

\
360 |

&#93;

]
361 |

&#94;

^
362 |

&#95;

_
363 |

&#96;

`
364 |

&#97;

a
365 |

&#98;

b
366 |

&#99;

c
367 |

&#100;

d
368 |

&#101;

e
369 |

&#102;

f
370 |

&#103;

g
371 |

&#104;

h
372 |

&#105;

i
373 |

&#106;

j
374 |

&#107;

k
375 |

&#108;

l
376 |

&#109;

m
377 |

&#110;

n
378 |

&#111;

o
379 |

&#112;

p
380 |

&#113;

q
381 |

&#114;

r
382 |

&#115;

s
383 |

&#116;

t
384 |

&#117;

u
385 |

&#118;

v
386 |

&#119;

w
387 |

&#120;

x
388 |

&#121;

y
389 |

&#122;

z
390 |

&#123;

{
391 |

&#124;

|
392 |

&#125;

}
393 |

&#126;

~
394 |

&#160;

 
395 |

&#161;

¡
396 |

&#162;

¢
397 |

&#163;

£
398 |

&#164;

¤
399 |

&#165;

¥
400 |

&#166;

¦
401 |

&#167;

§
402 |

&#168;

¨
403 |

&#169;

©
404 |

&#170;

ª
405 |

&#171;

«
406 |

&#172;

¬
407 |

&#173;

­
408 |

&#174;

®
409 |

&#175;

¯
410 |

&#176;

°
411 |

&#177;

±
412 |

&#178;

²
413 |

&#179;

³
414 |

&#180;

´
415 |

&#181;

µ
416 |

&#182;

417 |

&#183;

·
418 |

&#184;

¸
419 |

&#185;

¹
420 |

&#186;

º
421 |

&#187;

»
422 |

&#188;

¼
423 |

&#189;

½
424 |

&#190;

¾
425 |

&#191;

¿
426 |

&#192;

À
427 |

&#193;

Á
428 |

&#194;

Â
429 |

&#195;

Ã
430 |

&#196;

Ä
431 |

&#197;

Å
432 |

&#198;

Æ
433 |

&#199;

Ç
434 |

&#200;

È
435 |

&#201;

É
436 |

&#202;

Ê
437 |

&#203;

Ë
438 |

&#204;

Ì
439 |

&#205;

Í
440 |

&#206;

Î
441 |

&#207;

Ï
442 |

&#208;

Ð
443 |

&#209;

Ñ
444 |

&#210;

Ò
445 |

&#211;

Ó
446 |

&#212;

Ô
447 |

&#213;

Õ
448 |

&#214;

Ö
449 |

&#215;

×
450 |

&#216;

Ø
451 |

&#217;

Ù
452 |

&#218;

Ú
453 |

&#219;

Û
454 |

&#220;

Ü
455 |

&#221;

Ý
456 |

&#222;

Þ
457 |

&#223;

ß
458 |

&#224;

à
459 |

&#225;

á
460 |

&#226;

â
461 |

&#227;

ã
462 |

&#228;

ä
463 |

&#229;

å
464 |

&#230;

æ
465 |

&#231;

ç
466 |

&#232;

è
467 |

&#233;

é
468 |

&#234;

ê
469 |

&#235;

ë
470 |

&#236;

ì
471 |

&#237;

í
472 |

&#238;

î
473 |

&#239;

ï
474 |

&#240;

ð
475 |

&#241;

ñ
476 |

&#242;

ò
477 |

&#243;

ó
478 |

&#244;

ô
479 |

&#245;

õ
480 |

&#246;

ö
481 |

&#247;

÷
482 |

&#248;

ø
483 |

&#249;

ù
484 |

&#250;

ú
485 |

&#251;

û
486 |

&#252;

ü
487 |

&#253;

ý
488 |

&#254;

þ
489 |

&#255;

ÿ
490 |

&#338;

Œ
491 |

&#339;

œ
492 |

&#376;

Ÿ
493 |

&#710;

ˆ
494 |

&#732;

˜
495 |

&#8192;

 
496 |

&#8193;

 
497 |

&#8194;

 
498 |

&#8195;

 
499 |

&#8196;

 
500 |

&#8197;

 
501 |

&#8198;

 
502 |

&#8199;

 
503 |

&#8200;

 
504 |

&#8201;

 
505 |

&#8202;

 
506 |

&#8208;

‐
507 |

&#8209;

‑
508 |

&#8210;

‒
509 |

&#8211;

–
510 |

&#8212;

—
511 |

&#8216;

‘
512 |

&#8217;

’
513 |

&#8218;

‚
514 |

&#8220;

“
515 |

&#8221;

”
516 |

&#8222;

„
517 |

&#8226;

•
518 |

&#8230;

…
519 |

&#8239;

 
520 |

&#8249;

‹
521 |

&#8250;

›
522 |

&#8287;

 
523 |

&#8364;

€
524 |

&#8482;

™
525 |

&#57344;

526 |

&#64257;

fi
527 |

&#64258;

fl
528 |
529 |
530 | 531 | 532 |
533 |
534 | 535 | 536 |
537 | 538 |
539 | 540 |
541 |
542 |
543 |

Installing Webfonts

544 | 545 |

Webfonts are supported by all major browser platforms but not all in the same way. There are currently four different font formats that must be included in order to target all browsers. This includes TTF, WOFF, EOT and SVG.

546 | 547 |

1. Upload your webfonts

548 |

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.

549 | 550 |

2. Include the webfont stylesheet

551 |

A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches. Learn more about this syntax by reading the Fontspring blog post about it. The code for it is as follows:

552 | 553 | 554 | 555 | @font-face{ 556 | font-family: 'MyWebFont'; 557 | src: url('WebFont.eot'); 558 | src: url('WebFont.eot?#iefix') format('embedded-opentype'), 559 | url('WebFont.woff') format('woff'), 560 | url('WebFont.ttf') format('truetype'), 561 | url('WebFont.svg#webfont') format('svg'); 562 | } 563 | 564 | 565 |

We've already gone ahead and generated the code for you. All you have to do is link to the stylesheet in your HTML, like this:

566 | <link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" /> 567 | 568 |

3. Modify your own stylesheet

569 |

To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:

570 | p { font-family: 'WebFont', Arial, sans-serif; } 571 | 572 |

4. Test

573 |

Getting webfonts to work cross-browser can be tricky. Use the information in the sidebar to help you if you find that fonts aren't loading in a particular browser.

574 |
575 | 576 |
577 |
578 |

Troubleshooting
Font-Face Problems

579 |

Having trouble getting your webfonts to load in your new website? Here are some tips to sort out what might be the problem.

580 | 581 |

Fonts not showing in any browser

582 | 583 |

This sounds like you need to work on the plumbing. You either did not upload the fonts to the correct directory, or you did not link the fonts properly in the CSS. If you've confirmed that all this is correct and you still have a problem, take a look at your .htaccess file and see if requests are getting intercepted.

584 | 585 |

Fonts not loading in iPhone or iPad

586 | 587 |

The most common problem here is that you are serving the fonts from an IIS server. IIS refuses to serve files that have unknown MIME types. If that is the case, you must set the MIME type for SVG to "image/svg+xml" in the server settings. Follow these instructions from Microsoft if you need help.

588 | 589 |

Fonts not loading in Firefox

590 | 591 |

The primary reason for this failure? You are still using a version Firefox older than 3.5. So upgrade already! If that isn't it, then you are very likely serving fonts from a different domain. Firefox requires that all font assets be served from the same domain. Lastly it is possible that you need to add WOFF to your list of MIME types (if you are serving via IIS.)

592 | 593 |

Fonts not loading in IE

594 | 595 |

Are you looking at Internet Explorer on an actual Windows machine or are you cheating by using a service like Adobe BrowserLab? Many of these screenshot services do not render @font-face for IE. Best to test it on a real machine.

596 | 597 |

Fonts not loading in IE9

598 | 599 |

IE9, like Firefox, requires that fonts be served from the same domain as the website. Make sure that is the case.

600 |
601 |
602 |
603 | 604 |
605 | 606 |
607 | 610 |
611 | 612 | 613 | --------------------------------------------------------------------------------