├── Gemfile ├── thumbnail.png ├── .gitignore ├── jekyll-swiss-0.1.0.gem ├── index.html ├── _includes ├── dot.html ├── dot-accent.html ├── post_block.html ├── header.html ├── twitter.html ├── medium.html ├── github.html ├── head.html ├── previous-next.html ├── dribbble.html ├── footer.html ├── instagram.html └── previous-next_has-categories.html ├── assets └── style.scss ├── _layouts ├── default.html ├── category_index.html ├── page.html ├── post.html ├── category-post.html └── home.html ├── writing.html ├── _sass ├── _theme-red.scss ├── _theme-magenta.scss ├── _theme-orange.scss ├── _theme-gray.scss ├── _theme-white.scss ├── _theme-yellow.scss ├── _theme-blue.scss ├── _theme-black.scss ├── _variables.scss ├── _base.scss ├── _components.scss └── _utilities.scss ├── jekyll-swiss.gemspec ├── about.md ├── LICENSE.txt ├── _posts ├── 2016-08-05-welcome-to-jekyll.md ├── 2016-08-07-bacoms-are-delicious.md ├── 2016-08-3-potatoes.md └── 2016-09-04-markdown-sample.md ├── _config.yml └── README.md /Gemfile: -------------------------------------------------------------------------------- 1 | source "https://rubygems.org" 2 | gemspec 3 | -------------------------------------------------------------------------------- /thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/broccolini/swiss/HEAD/thumbnail.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .bundle 2 | .sass-cache 3 | _site 4 | .DS_Store 5 | Gemfile.lock 6 | *.gem 7 | -------------------------------------------------------------------------------- /jekyll-swiss-0.1.0.gem: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/broccolini/swiss/HEAD/jekyll-swiss-0.1.0.gem -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | --- 4 | 5 | 6 | -------------------------------------------------------------------------------- /_includes/dot.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /_includes/dot-accent.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /assets/style.scss: -------------------------------------------------------------------------------- 1 | --- 2 | # Only the main Sass file needs front matter (the dashes are enough) 3 | --- 4 | @charset "utf-8"; 5 | 6 | // Import partials from `sass_dir` and set theme here 7 | @import 8 | "theme-{{ site.theme_color | default: "black" }}.scss" 9 | ; 10 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include head.html %} 5 | 6 | 7 | 8 | {% include header.html %} 9 | 10 |
11 | {{ content }} 12 |
13 | 14 | {% include footer.html %} 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /_layouts/category_index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | --- 4 | 5 | {% if page.category_name %} 6 | {% assign category_name = page.category_name %} 7 | {% endif %} 8 | 9 |
10 | {% for post in site.categories[category_name] %} 11 | {% include post_block.html %} 12 | {% endfor %} 13 |
14 | -------------------------------------------------------------------------------- /_layouts/page.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
5 |
6 |

{{ page.title }}

7 |
8 |
9 |
10 |
11 | {{ content }} 12 |
13 |
14 | -------------------------------------------------------------------------------- /_includes/post_block.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | {{ post.date | date: "%b %-d, %Y" }} 4 |

5 | {{ post.title }} 6 |

7 |

{{ post.content | strip_html | truncatewords:30 }}

8 |
9 | -------------------------------------------------------------------------------- /writing.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: category_index 3 | title: Writing 4 | permalink: /writing/ 5 | category_name: writing 6 | --- 7 | 8 | 22 | -------------------------------------------------------------------------------- /_sass/_theme-red.scss: -------------------------------------------------------------------------------- 1 | // Default black theme 2 | 3 | // Color variables 4 | $black: #181818; 5 | $red: #E74727; 6 | $red-dark: #DC3918; 7 | $white: #fff; 8 | 9 | // Config 10 | $color-background: $red !default; 11 | $color-dot-accent: $black !default; 12 | $color-foreground: $black !default; 13 | $color-title: $white !default; 14 | $color-body-text: $black !default; 15 | $color-text-accent: $red-dark !default; 16 | $color-code: $red-dark !default; 17 | $color-nav-link: $white !default; 18 | $color-primary-link: $red !default; 19 | 20 | // Import sass partials (used in all themes) 21 | @import 22 | "variables", 23 | "base", 24 | "components", 25 | "utilities" 26 | ; 27 | -------------------------------------------------------------------------------- /_sass/_theme-magenta.scss: -------------------------------------------------------------------------------- 1 | // Pink theme - links on inside pages? 2 | 3 | // Color variables 4 | $magenta: #CD2DA8; 5 | $black: #2F2323; 6 | $white: #fff; 7 | 8 | // Config 9 | $color-background: $magenta !default; 10 | $color-dot-accent: $black !default; 11 | $color-foreground: $white !default; 12 | $color-title: $white !default; 13 | $color-body-text: $black !default; 14 | $color-text-accent: $magenta !default; 15 | $color-code: $magenta !default; 16 | $color-nav-link: $black !default; 17 | $color-primary-link: $magenta !default; 18 | 19 | // Import sass partials (used in all themes) 20 | @import 21 | "variables", 22 | "base", 23 | "components", 24 | "utilities" 25 | ; 26 | -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
5 |

{{ page.title }}

6 |
7 |

8 |
9 | 10 |
11 | {{ content }} 12 |
13 | 14 |
15 | 16 |
17 | {% include previous-next.html %} 18 |
19 | -------------------------------------------------------------------------------- /_sass/_theme-orange.scss: -------------------------------------------------------------------------------- 1 | // Orange theme 2 | 3 | $orange: #fa8224; 4 | $orange-dark: #DF6D16; 5 | $gray: #767676; 6 | $white: #fff; 7 | $black: #181818; 8 | 9 | $color-background: $orange !default; 10 | $color-dot-accent: $black !default; 11 | $color-foreground: $black !default; 12 | $color-title: $white !default; 13 | $color-body-text: $black !default; 14 | $color-text-accent: $orange-dark !default; 15 | $color-code: $gray !default; 16 | $color-nav-link: $white !default; 17 | $color-primary-link: $orange !default; 18 | $color-border: $orange; 19 | 20 | 21 | // Import sass partials (used in all themes) 22 | @import 23 | "variables", 24 | "base", 25 | "components", 26 | "utilities" 27 | ; 28 | -------------------------------------------------------------------------------- /_sass/_theme-gray.scss: -------------------------------------------------------------------------------- 1 | // Gray theme 2 | 3 | // Color variables 4 | $white: #fff; 5 | $black: #181818; 6 | $gray: #444; 7 | $gray-light: #777; 8 | $gray-lighter: #bbb; 9 | 10 | // Config 11 | $color-background: $gray-lighter !default; 12 | $color-dot-accent: $white !default; 13 | $color-foreground: $black !default; 14 | $color-title: $black !default; 15 | $color-body-text: $black !default; 16 | $color-text-accent: $gray-light !default; 17 | $color-code: $gray-light !default; 18 | $color-nav-link: $gray !default; 19 | $color-primary-link: $gray-light !default; 20 | 21 | 22 | // Import sass partials (used in all themes) 23 | @import 24 | "variables", 25 | "base", 26 | "components", 27 | "utilities" 28 | ; 29 | -------------------------------------------------------------------------------- /_sass/_theme-white.scss: -------------------------------------------------------------------------------- 1 | // White theme 2 | 3 | // Color variables 4 | $black: #181818; 5 | $red: #E74727; 6 | $red-dark: #DC3918; 7 | $gray-light: #f5f5f5; 8 | $white: #fff; 9 | 10 | // Config 11 | $color-background: $gray-light !default; 12 | $color-dot-accent: $red !default; 13 | $color-foreground: $black !default; 14 | $color-title: $black !default; 15 | $color-body-text: $black !default; 16 | $color-text-accent: $red-dark !default; 17 | $color-code: $red-dark !default; 18 | $color-nav-link: $red-dark !default; 19 | $color-primary-link: $red-dark !default; 20 | 21 | 22 | // Import sass partials (used in all themes) 23 | @import 24 | "variables", 25 | "base", 26 | "components", 27 | "utilities" 28 | ; 29 | -------------------------------------------------------------------------------- /_layouts/category-post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
5 |

{{ page.title }}

6 |
7 |

8 |
9 | 10 |
11 | {{ content }} 12 |
13 | 14 |
15 | 16 |
17 | {% include previous-next_has-categories.html %} 18 |
19 | -------------------------------------------------------------------------------- /_includes/header.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | {{ site.title }} 5 | 6 |
7 |
8 | 19 |
20 |
21 | -------------------------------------------------------------------------------- /_sass/_theme-yellow.scss: -------------------------------------------------------------------------------- 1 | // Yellow theme - could do yellow on borders? - links on inside pages? 2 | 3 | // Color variables 4 | $black: #181818; 5 | $white: #fff; 6 | $gray: #777; 7 | $yellow: #fec92e; 8 | 9 | 10 | // Config 11 | $color-background: $yellow !default; 12 | $color-dot-accent: $white !default; 13 | $color-foreground: $black !default; 14 | $color-title: $black !default; 15 | $color-body-text: $black !default; 16 | $color-text-accent: $gray !default; 17 | $color-code: $gray !default; 18 | $color-nav-link: $white !default; 19 | $color-primary-link: $gray !default; 20 | $color-border: $yellow; 21 | 22 | 23 | // Import sass partials (used in all themes) 24 | @import 25 | "variables", 26 | "base", 27 | "components", 28 | "utilities" 29 | ; 30 | -------------------------------------------------------------------------------- /_includes/twitter.html: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | -------------------------------------------------------------------------------- /_sass/_theme-blue.scss: -------------------------------------------------------------------------------- 1 | // Blue theme 2 | 3 | // Color variables 4 | $blue: #009DDB; 5 | $blue-small: #007AB3; 6 | $gray: #45474A; 7 | $white: #fff; 8 | 9 | // Config 10 | $color-background: $gray !default; 11 | $color-dot-accent: $blue !default; 12 | $color-foreground: $white !default; 13 | $color-title: $blue !default; 14 | $color-body-text: $gray !default; 15 | $color-text-accent: $blue !default; 16 | $color-code: $blue-small !default; 17 | $color-nav-link: $blue !default; 18 | $color-primary-link: $blue !default; 19 | 20 | .font-smoothing { 21 | -webkit-font-smoothing: antialiased; 22 | -moz-osx-font-smoothing: grayscale; 23 | } 24 | 25 | // Import sass partials (used in all themes) 26 | @import 27 | "variables", 28 | "base", 29 | "components", 30 | "utilities" 31 | ; 32 | -------------------------------------------------------------------------------- /jekyll-swiss.gemspec: -------------------------------------------------------------------------------- 1 | # coding: utf-8 2 | 3 | Gem::Specification.new do |spec| 4 | spec.name = "jekyll-swiss" 5 | spec.version = "1.0.0" 6 | spec.authors = ["broccolini"] 7 | spec.email = ["diana.mounter@gmail.com"] 8 | 9 | spec.summary = %q{A bold typographic theme for Jekyll, inspired by Swiss design.} 10 | spec.homepage = "http://broccolini.net/swiss" 11 | spec.license = "MIT" 12 | 13 | spec.files = `git ls-files -z`.split("\x0").select do |f| 14 | f.match(%r{^(assets|_(includes|layouts|sass)/|(LICENSE|README)((\.(txt|md|markdown)|$)))}i) 15 | end 16 | 17 | spec.add_development_dependency "jekyll", "~> 3.2" 18 | spec.add_development_dependency "bundler", "~> 1.12" 19 | spec.add_development_dependency "rake", "~> 10.0" 20 | end 21 | -------------------------------------------------------------------------------- /_sass/_theme-black.scss: -------------------------------------------------------------------------------- 1 | // Default black theme 2 | 3 | // Color variables 4 | $black: #181818; 5 | $red: #E74727; 6 | $red-small: #DC3918; 7 | $white: #fff; 8 | 9 | // Config 10 | $color-background: $black !default; 11 | $color-dot-accent: $red !default; 12 | $color-foreground: $white !default; 13 | $color-title: $white !default; 14 | $color-body-text: $black !default; 15 | $color-text-accent: $red !default; 16 | $color-code: $red-small !default; 17 | $color-nav-link: $red !default; 18 | $color-primary-link: $red !default; 19 | 20 | .font-smoothing { 21 | -webkit-font-smoothing: antialiased; 22 | -moz-osx-font-smoothing: grayscale; 23 | } 24 | 25 | // Import sass partials (used in all themes) 26 | @import 27 | "variables", 28 | "base", 29 | "components", 30 | "utilities" 31 | ; 32 | -------------------------------------------------------------------------------- /_includes/medium.html: -------------------------------------------------------------------------------- 1 | 2 | 9 | 10 | -------------------------------------------------------------------------------- /_sass/_variables.scss: -------------------------------------------------------------------------------- 1 | 2 | // Font family 3 | $body-font-family: "Helvetica Neue", Arial, sans-serif; 4 | $body-font-size: 16px; 5 | $prose-font-size: 20px; 6 | 7 | 8 | // Type scale 9 | $h0-mobile: 64px; 10 | $h0-desktop: 128px; 11 | 12 | $h1-size: 40px !default; 13 | $h2-size: 32px !default; 14 | $h3-size: 24px !default; 15 | $h4-size: 20px !default; 16 | $h5-size: 16px !default; 17 | $h6-size: 12px !default; 18 | 19 | // Default border color 20 | $color-border: #ddd !default; 21 | 22 | // Container width 23 | $container-width: 64em; 24 | 25 | // Large breakpoint 26 | $breakpoint-lg: 52em; 27 | 28 | // Spacing unit 29 | $spacer: 8px !default; 30 | 31 | // Spacing scale 32 | $spacer-1: $spacer !default; // 8px 33 | $spacer-2: ($spacer * 2) !default; // 16px 34 | $spacer-3: ($spacer * 4) !default; // 32px 35 | $spacer-4: ($spacer * 8) !default; // 64px 36 | -------------------------------------------------------------------------------- /_includes/github.html: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | -------------------------------------------------------------------------------- /about.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: About 4 | permalink: /about/ 5 | --- 6 | 7 | Swiss is a bold Jekyll theme inspired by Swiss design and the works of Massimo Vignelli. This theme lends itself well to sites heavy on written content. 8 | 9 | ### Features: 10 | * Mobile-first design ensures this theme performs fastest on mobile while scaling elegantly to desktop-size screens. 11 | * Designed for blogs and sites heavy on written content, with bold typography styles, homepage summaries, and previous/next snippets. 12 | * Supports a wide range of HTML elements and markdown. 13 | * Flexible styles that can be reused for customization without adding additional CSS. 14 | * Simple styling for code snippets (if you want something with syntax highlighting, checkout ....) 15 | * Dynamically generated navigation links. See docs below for adding pages with specific post category for-loops. 16 | 17 | ## Themes 18 | 19 | ## Browser Support 20 | 21 | ## Installation 22 | -------------------------------------------------------------------------------- /_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %} 7 | 8 | 9 | {% assign user_url = site.url | append: site.baseurl %} 10 | {% assign full_base_url = user_url | default: site.github.url %} 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /_includes/previous-next.html: -------------------------------------------------------------------------------- 1 | 2 | {% assign user_url = site.url | append: site.baseurl %} 3 | {% assign full_base_url = user_url | default: site.github.url %} 4 | {% if page.previous.url %} 5 |
6 | 7 | Previous 8 |

{{ page.previous.title }}

9 |

{{ page.previous.content | strip_html | truncatewords:20 }}

10 | 11 |
12 | {% endif %} 13 | {% if page.next.url %} 14 |
15 | 16 | Next 17 |

{{ page.next.title }}

18 |

{{ page.next.content | strip_html | truncatewords:20 }}

19 | 20 |
21 | {% endif %} 22 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 broccolini 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /_includes/dribbble.html: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | -------------------------------------------------------------------------------- /_sass/_base.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Reset some basic elements 3 | */ 4 | 5 | * { 6 | box-sizing: border-box !important; 7 | margin: 0; } 8 | 9 | input, 10 | select, 11 | textarea, 12 | button { 13 | font-family: inherit; 14 | font-size: inherit; 15 | line-height: inherit; 16 | } 17 | 18 | 19 | body, h1, h2, h3, h4, h5, h6, 20 | p, blockquote, pre, hr, 21 | dl, dd, ol, ul, figure { 22 | margin: 0; 23 | padding: 0; 24 | } 25 | 26 | 27 | /** 28 | * Basic styling 29 | */ 30 | body { 31 | font-family: $body-font-family; 32 | font-size: $body-font-size; 33 | line-height: 1.5; 34 | color: $color-body-text; 35 | background-color: #fff; 36 | } 37 | 38 | p { 39 | margin-top: 0; 40 | margin-bottom: 0.5em; 41 | } 42 | 43 | h1, h2, h3, h4, h5, h6 { 44 | margin-top: 1em; 45 | margin-bottom: 0.25em; 46 | } 47 | 48 | h1, .h1 { font-size: $h1-size; } 49 | h2, .h2 { font-size: $h2-size; } 50 | h3, .h3 { font-size: $h3-size; } 51 | h4, .h4 { font-size: $h4-size; } 52 | h5, .h5 { font-size: $h5-size; } 53 | h6, .h6 { font-size: $h6-size; text-transform: uppercase; letter-spacing: 0.02em; } 54 | 55 | a { 56 | color: inherit; 57 | text-decoration: none; 58 | } 59 | 60 | a:hover { 61 | text-decoration: underline; 62 | } 63 | -------------------------------------------------------------------------------- /_posts/2016-08-05-welcome-to-jekyll.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: category-post 3 | title: "Welcome to Jekyll!" 4 | date: 2016-08-05 20:20:56 -0400 5 | categories: writing 6 | --- 7 | You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated. 8 | 9 | To add new posts, simply add a file in the `_posts` directory that follows the convention `YYYY-MM-DD-name-of-post.ext` and includes the necessary front matter. Take a look at the source for this post to get an idea about how it works. 10 | 11 | Jekyll also offers powerful support for code snippets: 12 | 13 | ``` 14 | def print_hi(name) 15 | puts "Hi, #{name}" 16 | end 17 | print_hi('Tom') 18 | #=> prints 'Hi, Tom' to STDOUT. 19 | ``` 20 | 21 | Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk]. 22 | 23 | [jekyll-docs]: http://jekyllrb.com/docs/home 24 | [jekyll-gh]: https://github.com/jekyll/jekyll 25 | [jekyll-talk]: https://talk.jekyllrb.com/ 26 | -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |

This project is maintained by {{ site.github_username }}

4 | 12 |
13 |
14 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # Welcome to Jekyll! 2 | # 3 | # This config file is meant for settings that affect your whole site, values 4 | # which you are expected to set up once and rarely edit after that. If you find 5 | # yourself editing these this file very often, consider using Jekyll's data files 6 | # feature for the data you need to update frequently. 7 | # 8 | # For technical reasons, this file is *NOT* reloaded automatically when you use 9 | # 'jekyll serve'. If you change this file, please restart the server process. 10 | 11 | # Site settings 12 | # These are used to personalize your new site. If you look in the HTML files, 13 | # you will see them accessed via {{ site.title }}, {{ site.github_repo }}, and so on. 14 | # You can create any custom variable you would like, and they will be accessible 15 | # in the templates via {{ site.myvariable }}. 16 | title: Swiss Jekyll Theme 17 | description: A bold typographic theme inspired by Swiss design. 18 | baseurl: "" # the subpath of your site, e.g. /blog 19 | url: "" # the base hostname & protocol for your site, e.g. http://example.com 20 | github_repo: jekyll # the GitHub repo name for your project 21 | github_username: jekyll 22 | 23 | # Optional social link, you can choose from the following options: 24 | # twitter (default), instagram, medium, or dribbble 25 | social_link: twitter 26 | social_username: jekyllrb 27 | 28 | # Set theme color here 29 | # Choose from: black (default), blue, gray, magenta, orange, red, white, and yellow. 30 | theme_color: black 31 | 32 | # Build settings 33 | markdown: kramdown 34 | -------------------------------------------------------------------------------- /_includes/instagram.html: -------------------------------------------------------------------------------- 1 | 2 | 18 | 19 | -------------------------------------------------------------------------------- /_posts/2016-08-07-bacoms-are-delicious.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Bacoms are delicious" 4 | date: 2016-08-07 5 | --- 6 | 7 | Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. 8 | 9 | ```html 10 |
11 | test 12 |
13 | ``` 14 | 15 | Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus. 16 | 17 | Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus. 18 | -------------------------------------------------------------------------------- /_includes/previous-next_has-categories.html: -------------------------------------------------------------------------------- 1 | 2 | {% if page.categories %} 3 | {% assign category = page.categories[0] %} 4 | {% assign posts = site.categories[category] %} 5 | {% for post in posts %} 6 | {% if post.url == page.url %} 7 | {% assign post_index0 = forloop.index0 %} 8 | {% assign post_index1 = forloop.index %} 9 | {% endif %} 10 | {% endfor %} 11 | {% for post in posts %} 12 | {% if post_index0 == forloop.index %} 13 | {% assign next_post = post %} 14 | {% endif %} 15 | {% if post_index1 == forloop.index0 %} 16 | {% assign prev_post = post %} 17 | {% endif %} 18 | {% endfor %} 19 | {% endif %} 20 | {% assign user_url = site.url | append: site.baseurl %} 21 | {% assign full_base_url = user_url | default: site.github.url %} 22 | {% if prev_post %} 23 |
24 | 25 | Previous 26 |

{{ prev_post.title }}

27 |

{{ page.previous.content | strip_html | truncatewords:20 }}

28 | 29 |
30 | {% endif %} 31 | {% if next_post %} 32 |
33 | 34 | Next 35 |

{{ next_post.title }}

36 |

{{ page.next.content | strip_html | truncatewords:20 }}

37 | 38 |
39 | {% endif %} 40 | -------------------------------------------------------------------------------- /_layouts/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include head.html %} 5 | 6 | 7 | 8 |
9 | 10 |
11 | 12 |
13 |
    14 | {% for my_page in site.pages %} 15 | {% if my_page.title %} 16 |
  • 17 | {{ my_page.title }} 18 |
    • 19 | {% endif %} 20 | {% endfor %} 21 |
22 |
23 | 24 |
25 |

{{ site.title }}

26 | 27 |
28 |
29 |
30 |
31 | {% include dot-accent.html %} 32 |
33 |
34 | {% include dot-accent.html %} 35 |
36 |
37 | {% include github.html %} 38 |
39 |
40 | 41 |

{{ site.description }}

42 |
43 | 44 |
45 |
46 | {% include dot.html %} 47 |
48 |
49 | {% include {{ site.social_link | default: "twitter" }}.html %} 50 |
51 |
52 |
53 | 54 |
55 |
56 | 57 |
58 | {% for post in site.posts %} 59 | {% include post_block.html %} 60 | {% endfor %} 61 |
62 | 63 |
64 | 65 | {% include footer.html %} 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /_sass/_components.scss: -------------------------------------------------------------------------------- 1 | // Styling markdown output 2 | 3 | // Code formatting 4 | pre { 5 | border-left: $spacer-1 solid $color-border; 6 | margin: $spacer-3 0; 7 | padding-left: 16px; 8 | width: (9 / 12 * 100%); // matches col-9 9 | overflow-x: auto; 10 | } 11 | 12 | code { 13 | color: $color-code; 14 | font-size: $body-font-size; 15 | padding: 1px 0px; 16 | } 17 | 18 | 19 | .prose { 20 | 21 | a { 22 | text-decoration: underline dotted; 23 | 24 | &:hover { 25 | text-decoration: underline; 26 | } 27 | } 28 | 29 | p, ol, ul { 30 | font-size: $prose-font-size; 31 | margin-bottom: 1em; 32 | width: 100%; 33 | 34 | @media (min-width: $breakpoint-lg) { 35 | width: (10 / 12 * 100%); // matches col-10 36 | } 37 | 38 | } 39 | 40 | ul, ol { 41 | padding-left: 40px; 42 | } 43 | 44 | li { 45 | margin-bottom: 0.5em; 46 | 47 | ul li, ol li { 48 | margin-bottom: 0; 49 | } 50 | } 51 | 52 | img { 53 | 54 | max-width: 100%; 55 | 56 | @media (min-width: $breakpoint-lg) { 57 | max-width: (12 / 10 * 100%); // make image fill width of container on desktop 58 | } 59 | 60 | } 61 | 62 | blockquote { 63 | line-height: 1.375; 64 | padding-left: 20px; 65 | margin: 40px 0 40px -16px; 66 | border-left: $spacer-1 solid $color-border; 67 | font-style: italic; 68 | 69 | p { 70 | font-size: 24px; 71 | } 72 | 73 | @media (min-width: $breakpoint-lg) { 74 | padding-left: $spacer-3; 75 | margin: $spacer-4 0 $spacer-4 -40px; 76 | max-width: (11 / 10 * 100%); 77 | 78 | p { 79 | font-size: 32px; 80 | } 81 | 82 | } 83 | 84 | } 85 | 86 | hr { 87 | color: $color-body-text; 88 | border-style: solid; 89 | border-width: thin; 90 | margin-top: 0.5em; 91 | margin-bottom: 0.5em; 92 | } 93 | 94 | dt { 95 | font-weight: bold; 96 | font-style: italic; 97 | line-height: 1.25; 98 | } 99 | 100 | dd { 101 | font-style: italic; 102 | margin-bottom: 0.5em; 103 | } 104 | 105 | // Markdown tables 106 | table { 107 | border-collapse: collapse; 108 | display: block; 109 | width: 100%; 110 | margin-bottom: 1.5em; 111 | overflow: auto; 112 | // For Firefox to horizontally scroll wider tables. 113 | word-break: normal; 114 | word-break: keep-all; 115 | 116 | th { 117 | font-weight: bold; 118 | text-align: left; 119 | } 120 | 121 | th, 122 | td { 123 | padding: $spacer-2 $spacer-3 $spacer-2 2px; 124 | border-top: 1px solid $color-body-text; 125 | border-bottom: 1px solid $color-body-text; 126 | } 127 | 128 | tr { 129 | background-color: #fff; 130 | border-top: 1px solid $color-body-text; 131 | } 132 | 133 | tr th { 134 | border-top: 2px solid $color-body-text; 135 | border-bottom: 2px solid $color-body-text; 136 | } 137 | } 138 | 139 | } 140 | -------------------------------------------------------------------------------- /_posts/2016-08-3-potatoes.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: category-post 3 | title: "Potatoes" 4 | date: 2015-11-25 5 | categories: writing 6 | --- 7 | 8 | Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus. 9 | 10 | # Heading 1 11 | Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus. 12 | 13 | ## Heading 2 14 | Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus. 15 | 16 | ### Heading 3 17 | Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus. 18 | 19 | #### Heading 4 20 | Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus. 21 | 22 | ##### Heading 5 23 | Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus. 24 | 25 | ###### Heading 6 26 | Lorem ipsizzle funky fresh i'm in the shizzle boom shackalack, consectetizzle adipiscing my shizz. Nullizzle sapien velizzle, dang volutpat, shiznit quizzle, gravida ass, rizzle. Pot get down get down tortor. Sed erizzle. Black go to hizzle dolizzle dapibizzle turpis fo shizzle my nizzle yo. Maurizzle pellentesque nibh et check it out. Bow wow wow check it out tortizzle. Pellentesque for sure rhoncizzle bow wow wow. In owned habitasse brizzle dictumst. Nizzle dapibizzle. Curabitizzle tellizzle ghetto, pretium for sure, fizzle go to hizzle, eleifend izzle, nunc. Dope suscipizzle. Integizzle boom shackalack velit ass purus. 27 | 28 | ```html 29 |
30 | test 31 |
32 | ``` 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Swiss Jekyll Theme 2 | 3 | [![Gem Version](https://badge.fury.io/rb/jekyll-swiss.svg)](https://badge.fury.io/rb/jekyll-swiss) 4 | 5 | Swiss is a bold Jekyll theme inspired by Swiss design and the works of Massimo Vignelli. This theme lends itself well to sites heavy on written content. 6 | 7 | ### Features: 8 | * Mobile-first design ensures this theme performs fastest on mobile while scaling elegantly to desktop-size screens. 9 | * Designed for blogs and sites heavy on written content, with bold typography styles, homepage summaries, and previous/next snippets. 10 | * Supports a wide range of HTML elements and markdown. 11 | * Flexible styles that can be reused for customization without adding additional CSS. 12 | * Dynamically generated navigation links. See docs for adding pages with specific post category for-loops. 13 | 14 | ## Installation 15 | 16 | Add this line to your Jekyll site's Gemfile: 17 | 18 | ```ruby 19 | gem "github-pages", group: :jekyll_plugins 20 | ``` 21 | 22 | And add this line to your Jekyll site: 23 | 24 | ```yaml 25 | remote_theme: broccolini/swiss 26 | ``` 27 | 28 | And then execute: 29 | 30 | $ bundle 31 | 32 | ## Usage 33 | 34 | This theme comes in eight different color variations. The default is set to the black theme, to change to a different theme edit the config under `theme_color: black` to one of the following colors: 35 | 36 | | | | 37 | |:-----------------------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------------------------------------------------------------------------------------| 38 | | `theme_color: black` | `theme_color: red` | 39 | | black | red | 40 | | `theme_color: white` | `theme_color: gray` | 41 | | white | gray | 42 | | `theme_color: blue` | `theme_color: magenta` | 43 | | blue | magenta | 44 | | `theme_color: orange` | `theme_color: yellow` | 45 | | orange | yellow | 46 | 47 | ## Contributing 48 | 49 | Bug reports and pull requests are welcome on GitHub at https://github.com/broccolini/swiss. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct. 50 | 51 | ## Development 52 | 53 | To set up your environment to develop this theme, run `bundle install`. 54 | 55 | Your theme is setup just like a normal Jekyll site! To test your theme, run `bundle exec jekyll serve` and open your browser at `http://localhost:4000`. This starts a Jekyll server using your theme. Add pages, documents, data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, your site will regenerate and you should see the changes in the browser after a refresh, just like normal. 56 | 57 | When your theme is released, only the files in `_layouts`, `_includes`, and `_sass` tracked with Git will be released. 58 | 59 | ## License 60 | 61 | The theme is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT). 62 | -------------------------------------------------------------------------------- /_sass/_utilities.scss: -------------------------------------------------------------------------------- 1 | /* Type utilities */ 2 | .h0 { 3 | font-size: $h0-mobile; 4 | line-height: 1.0125; 5 | margin-top: 0.85em; 6 | word-wrap: break-word; 7 | 8 | @media (min-width: $breakpoint-lg) { 9 | font-size: $h0-desktop; 10 | } 11 | } 12 | 13 | .text-right { text-align: right; } 14 | 15 | .no-underline { 16 | text-decoration: none !important; 17 | 18 | &:hover { 19 | text-decoration: none !important; 20 | } 21 | } 22 | 23 | .bold { font-weight: bold; } 24 | .uppercase { text-transform: uppercase; } 25 | 26 | .lh-condensed { line-height: 1.25; } 27 | 28 | .list-reset { 29 | list-style: none; 30 | padding-left: 0; 31 | } 32 | 33 | /* Border utilities */ 34 | .border-bottom-thick { border-bottom: 2px solid; border-color: currentColor; } 35 | .border-bottom-thin { border-bottom: 1px solid; border-color: currentColor; } 36 | .border-top-thick { border-top: 2px solid; border-color: currentColor; } 37 | .border-top-thin { border-top: 1px solid; border-color: currentColor; } 38 | .border-0 { border: 0; } 39 | 40 | 41 | /* Theme color utilities */ 42 | .header-background { background-color: $color-background; } 43 | .header-border { border-color: $color-foreground; } 44 | .header-title { color: $color-title; } 45 | .header-text { color: $color-foreground; } 46 | .header-social { fill: $color-foreground; } 47 | .header-social-accent { fill: $color-dot-accent; } 48 | .header-link:hover { color: $color-nav-link !important; } // used for navigation links on homepage 49 | .text-accent { color: $color-text-accent; } // used for date in post list and home link 50 | 51 | /* Layout utilities */ 52 | .container { max-width: $container-width; } 53 | 54 | .col-1 { width: (1 / 12 * 100%); } 55 | .col-2 { width: (2 / 12 * 100%); } 56 | .col-3 { width: (3 / 12 * 100%); } 57 | .col-4 { width: (4 / 12 * 100%); } 58 | .col-5 { width: (5 / 12 * 100%); } 59 | .col-6 { width: (6 / 12 * 100%); } 60 | .col-7 { width: (7 / 12 * 100%); } 61 | .col-8 { width: (8 / 12 * 100%); } 62 | .col-9 { width: (9 / 12 * 100%); } 63 | .col-10 { width: (10 / 12 * 100%); } 64 | .col-11 { width: (11 / 12 * 100%); } 65 | .col-12 { width: 100%; } 66 | 67 | @media (max-width: $breakpoint-lg) { 68 | .sm-width-full { width: 100% !important; } 69 | } 70 | 71 | .block { display: block !important; } 72 | .inline-block { display: inline-block !important; } 73 | 74 | .table { display: table !important; } 75 | 76 | .left { float: left; } 77 | .right { float: right; } 78 | 79 | .clearfix:before, 80 | .clearfix:after { 81 | content: " "; 82 | display: table 83 | } 84 | .clearfix:after { clear: both } 85 | 86 | .align-middle { vertical-align: middle; } 87 | 88 | /* Padding */ 89 | .px-0 { padding-left: 0; padding-right: 0 } 90 | .py-0 { padding-top: 0; padding-bottom: 0 } 91 | 92 | .px-1 { padding-left: $spacer-1; padding-right: $spacer-1 } 93 | .py-1 { padding-top: $spacer-1; padding-bottom: $spacer-1 } 94 | 95 | .px-2 { padding-left: $spacer-2; padding-right: $spacer-2; } 96 | .py-2 { padding-top: $spacer-2; padding-bottom: $spacer-2; } 97 | 98 | .px-3 { padding-left: $spacer-3; padding-right: $spacer-3; } 99 | .py-3 { padding-top: $spacer-3; padding-bottom: $spacer-3; } 100 | 101 | .px-4 { padding-left: $spacer-4; padding-right: $spacer-4; } 102 | .py-4 { padding-top: $spacer-4; padding-bottom: $spacer-4; } 103 | 104 | /* Margin */ 105 | .mx-auto { margin-left: auto; margin-right: auto; } 106 | 107 | .mt-0 { margin-top: 0; } 108 | .mr-0 { margin-right: 0; } 109 | .mb-0 { margin-bottom: 0; } 110 | .ml-0 { margin-left: 0; } 111 | 112 | .mt-1 { margin-top: $spacer-1; } 113 | .mr-1 { margin-right: $spacer-1; } 114 | .mb-1 { margin-bottom: $spacer-1; } 115 | .ml-1 { margin-left: $spacer-1; } 116 | 117 | .mt-2 { margin-top: $spacer-2; } 118 | .mr-2 { margin-right: $spacer-2; } 119 | .mb-2 { margin-bottom: $spacer-2; } 120 | .ml-2 { margin-left: $spacer-2; } 121 | 122 | .mt-3 { margin-top: $spacer-3; } 123 | .mr-3 { margin-right: $spacer-3; } 124 | .mb-3 { margin-bottom: $spacer-3; } 125 | .ml-3 { margin-left: $spacer-3; } 126 | 127 | .mt-4 { margin-top: $spacer-4; } 128 | .mr-4 { margin-right: $spacer-4; } 129 | .mb-4 { margin-bottom: $spacer-4; } 130 | .ml-4 { margin-left: $spacer-4; } 131 | 132 | // Responsive margin 133 | @media (min-width: 52em) { 134 | .mx-lg-auto { margin-left: auto; margin-right: auto; } 135 | 136 | .mt-lg-0 { margin-top: 0; } 137 | .mr-lg-0 { margin-right: 0; } 138 | .mb-lg-0 { margin-bottom: 0; } 139 | .ml-lg-0 { margin-left: 0; } 140 | 141 | .mt-lg-1 { margin-top: $spacer-1; } 142 | .mr-lg-1 { margin-right: $spacer-1; } 143 | .mb-lg-1 { margin-bottom: $spacer-1; } 144 | .ml-lg-1 { margin-left: $spacer-1; } 145 | 146 | .mt-lg-2 { margin-top: $spacer-2; } 147 | .mr-lg-2 { margin-right: $spacer-2; } 148 | .mb-lg-2 { margin-bottom: $spacer-2; } 149 | .ml-lg-2 { margin-left: $spacer-2; } 150 | 151 | .mt-lg-3 { margin-top: $spacer-3; } 152 | .mr-lg-3 { margin-right: $spacer-3; } 153 | .mb-lg-3 { margin-bottom: $spacer-3; } 154 | .ml-lg-3 { margin-left: $spacer-3; } 155 | 156 | .mt-lg-4 { margin-top: $spacer-4; } 157 | .mr-lg-4 { margin-right: $spacer-4; } 158 | .mb-lg-4 { margin-bottom: $spacer-4; } 159 | .ml-lg-4 { margin-left: $spacer-4; } 160 | } 161 | 162 | // Link styles for social icons 163 | .link-social { 164 | text-decoration: none; 165 | font-weight: bold; 166 | line-height: 1; 167 | 168 | &:hover { 169 | text-decoration: none !important; 170 | } 171 | } 172 | 173 | // Link styles for navigation 174 | .link-primary { 175 | font-weight: bold; 176 | text-decoration: none !important; 177 | 178 | &:hover { 179 | color: $color-primary-link; 180 | text-decoration: none !important; 181 | } 182 | } 183 | -------------------------------------------------------------------------------- /_posts/2016-09-04-markdown-sample.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Markdown sample" 4 | date: 2016-09-04 5 | --- 6 | 7 | ### Markdown test document 8 | 9 | Text can be **bold**, _italic_, or ~~strikethrough~~. [Links](https://github.com) should be have dotted underlines and solid underlines on hover. 10 | 11 | There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. 12 | 13 | There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. There should be whitespace between paragraphs. 14 | 15 | > There should be no margin above this first sentence. 16 | > 17 | > Blockquotes should be a italicized with a gray border along the left side. 18 | > 19 | > There should be no margin below this final sentence. 20 | 21 | # Heading 1 22 | 23 | This is a normal paragraph following a Heading. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong. 24 | 25 | ## Heading 2 26 | 27 | This is a normal paragraph following a Heading. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong. 28 | 29 | 30 | > This is a blockquote following a Heading. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong. 31 | 32 | This is a normal paragraph following a Heading. Bacon ipsum dolor sit amet t-bone doner shank drumstick, pork belly porchetta chuck sausage brisket ham hock rump pig. Chuck kielbasa leberkas, pork bresaola ham hock filet mignon cow shoulder short ribs biltong. 33 | 34 | 35 | ### Heading 3 36 | 37 | ``` 38 | This is a code block following a Heading. 39 | ``` 40 | 41 | #### Heading 4 42 | 43 | * This is an unordered list following a Heading. 44 | * This is an unordered list following a Heading. 45 | * This is an unordered list following a Heading. 46 | 47 | ##### Heading 5 48 | 49 | 1. This is an ordered list following a Heading. 50 | 2. This is an ordered list following a Heading. 51 | 3. This is an ordered list following a Heading. 52 | 53 | ###### Heading 6 54 | 55 | | What | Follows | 56 | |-----------|-----------------| 57 | | A table | A Heading | 58 | | A table | A Heading | 59 | | A table | A Heading | 60 | 61 | ---------------- 62 | 63 | There's a horizontal rule above and below this. 64 | 65 | ---------------- 66 | 67 | Here is an unordered list: 68 | 69 | * Salt-n-Pepa 70 | * Bel Biv DeVoe 71 | * Kid 'N Play 72 | 73 | And an ordered list: 74 | 75 | 1. Michael Jackson 76 | 2. Michael Bolton 77 | 3. Michael Bublé 78 | 79 | And a nested list: 80 | 81 | * Jackson 5 82 | * Michael 83 | * Tito 84 | * Jackie 85 | * Marlon 86 | * Jermaine 87 | * TMNT 88 | * Leonardo 89 | * Michelangelo 90 | * Donatello 91 | * Raphael 92 | 93 | Definition lists can be used with HTML syntax. Definition terms are bold and italic. 94 | 95 |
96 |
Name
97 |
Godzilla
98 |
Born
99 |
1952
100 |
Birthplace
101 |
Japan
102 |
Color
103 |
Green
104 |
105 | 106 | ---------------- 107 | 108 | Tables should have bold headings and alternating shaded rows. 109 | 110 | | Artist | Album | Year | 111 | |-------------------|-----------------|------| 112 | | Michael Jackson | Thriller | 1982 | 113 | | Prince | Purple Rain | 1984 | 114 | | Beastie Boys | License to Ill | 1986 | 115 | 116 | If a table is too wide, it should condense down and/or scroll horizontally. 117 | 118 | | Artist | Album | Year | Label | Awards | Songs | 119 | |-------------------|-----------------|------|-------------|----------|-----------| 120 | | Michael Jackson | Thriller | 1982 | Epic Records | Grammy Award for Album of the Year, American Music Award for Favorite Pop/Rock Album, American Music Award for Favorite Soul/R&B Album, Brit Award for Best Selling Album, Grammy Award for Best Engineered Album, Non-Classical | Wanna Be Startin' Somethin', Baby Be Mine, The Girl Is Mine, Thriller, Beat It, Billie Jean, Human Nature, P.Y.T. (Pretty Young Thing), The Lady in My Life | 121 | | Prince | Purple Rain | 1984 | Warner Brothers Records | Grammy Award for Best Score Soundtrack for Visual Media, American Music Award for Favorite Pop/Rock Album, American Music Award for Favorite Soul/R&B Album, Brit Award for Best Soundtrack/Cast Recording, Grammy Award for Best Rock Performance by a Duo or Group with Vocal | Let's Go Crazy, Take Me With U, The Beautiful Ones, Computer Blue, Darling Nikki, When Doves Cry, I Would Die 4 U, Baby I'm a Star, Purple Rain | 122 | | Beastie Boys | License to Ill | 1986 | Mercury Records | noawardsbutthistablecelliswide | Rhymin & Stealin, The New Style, She's Crafty, Posse in Effect, Slow Ride, Girls, (You Gotta) Fight for Your Right, No Sleep Till Brooklyn, Paul Revere, Hold It Now, Hit It, Brass Monkey, Slow and Low, Time to Get Ill | 123 | 124 | ---------------- 125 | 126 | Code snippets like `var foo = "bar";` can be shown inline. 127 | 128 | Also, `this should vertically align` ~~`with this`~~ ~~and this~~. 129 | 130 | Code can also be shown in a block element. 131 | ```` 132 | var foo = "bar"; 133 | ```` 134 | 135 | Code can also use syntax highlighting. 136 | ````Javascript 137 | var foo = "bar"; 138 | ```` 139 | 140 | ``` 141 | Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this. 142 | ``` 143 | 144 | ```Javascript 145 | var foo = "The same thing is true for code with syntax highlighting. A single line of code should horizontally scroll if it is really long."; 146 | ``` 147 | 148 | Inline code inside table cells should still be distinguishable. 149 | 150 | | Language | Code | 151 | |-------------|--------------------| 152 | | Javascript | `var foo = "bar";` | 153 | | Ruby | `foo = "bar"` | 154 | 155 | ---------------- 156 | 157 | Small images should be shown at their actual size. 158 | 159 | ![](http://placekitten.com/g/300/200/) 160 | 161 | Large images should always scale down and fit in the content container. 162 | 163 | ![](http://placekitten.com/g/1200/800/) 164 | 165 | ``` 166 | This is the final element on the page and there should be no margin below this. 167 | ``` 168 | 169 | 170 | ## License 171 | 172 | [MIT](./LICENSE) 173 | --------------------------------------------------------------------------------