├── .gitignore ├── 404.md ├── Gemfile ├── LICENSE ├── README.md ├── _config.yml ├── _includes ├── disqus.html ├── footer.html ├── head.html ├── header.html ├── icons.html ├── post_nav.html └── tags_list.html ├── _layouts ├── default.html ├── home.html ├── page.html ├── post.html └── tags.html ├── _posts ├── 2014-11-28-markdown-and-html.md ├── 2014-11-29-feature-images.md └── 2014-11-30-sample-post.md ├── _sass ├── base │ ├── _global.scss │ ├── _utility.scss │ └── _variables.scss ├── external │ ├── _reset.scss │ └── _syntax.scss ├── includes │ ├── _footer.scss │ ├── _header.scss │ ├── _post_nav.scss │ └── _tag_list.scss ├── layouts │ ├── _index.scss │ ├── _posts.scss │ ├── _search.scss │ └── _tags.scss └── type-theme.scss ├── about.md ├── assets ├── css │ └── main.scss ├── favicon.ico ├── img │ ├── avatar.png │ ├── sample_feature_img.png │ ├── sample_feature_img_2.png │ └── sample_feature_img_3.png └── js │ ├── katex_init.js │ └── search.js ├── feed.xml ├── index.html ├── search.html └── tags.html /.gitignore: -------------------------------------------------------------------------------- 1 | *.DS_Store 2 | *.gem 3 | .bundle 4 | .sass-cache 5 | _site 6 | Gemfile.lock 7 | -------------------------------------------------------------------------------- /404.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: "Page not found" 4 | permalink: /404.html 5 | hide: true 6 | --- 7 | Sorry, the requested page wasn't found on the server. 8 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source "https://rubygems.org" 2 | gem 'github-pages', group: :jekyll_plugins -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Rohan Chandra 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 all 13 | 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 THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Type Theme 2 | 3 | ![Default Type Theme blog](https://user-images.githubusercontent.com/816965/30518919-d5978024-9bcd-11e7-81b3-3dd07e99a1f9.png) 4 | 5 | A free and open-source [Jekyll](https://jekyllrb.com) theme. Great for blogs and easy to customize. 6 | 7 | [Demo](https://rohanchandra.github.io/type-theme/) 8 | 9 | ## Usage 10 | 11 | 1. Fork and clone the [Type Theme repo](https://github.com/rohanchandra/type-theme): `git clone https://github.com/rohanchandra/type-theme` 12 | 2. [Install Jekyll](https://jekyllrb.com/docs/installation/): `gem install jekyll` 13 | 3. Install the theme's dependencies: `bundle install` 14 | 4. Customize the theme (see below) 15 | 5. Run the Jekyll server: `jekyll serve` 16 | 17 | ## Customizing Type Theme 18 | 19 | Open `_config.yml` in a text editor to change most of the blog's settings. 20 | 21 | If a variable in this document is marked as "optional", disable the feature by removing all text from the variable. For example, to prevent the avatar from rendering in the header, the avatar line should read: 22 | 23 | ```yml 24 | theme: 25 | title: Type Theme 26 | avatar: 27 | gravatar: 28 | ``` 29 | 30 | Notice the avatar variable is left intentionally blank. 31 | 32 | Below is a summary of the configuration options in Type Theme. 33 | 34 | ### Site configuration 35 | The most common configurations, included here for guidance, are: 36 | 37 | Jekyll website *without* a subpath (such as a GitHub Pages website for a given username): 38 | 39 | ```yml 40 | # SITE CONFIGURATION 41 | baseurl: "" 42 | url: "https://username.github.io" 43 | ``` 44 | 45 | Jekyll website *with* subpath (like the Type Theme demo page): 46 | 47 | ```yml 48 | # SITE CONFIGURATION 49 | baseurl: "/sub-directory" 50 | url: "https://username.github.io/" 51 | ``` 52 | 53 | Please configure this in `_config.yml` before using the theme. 54 | 55 | ### Meta 56 | 57 | Meta variables hold basic information about your Jekyll site which will be used throughout the site and as meta properties for search engines, browsers, and the site's RSS feed. 58 | 59 | Change these variables in `_config.yml`: 60 | 61 | | Variable | Example | Description | Optional | 62 | | ----------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | -------- | 63 | | title | My Jekyll Blog | Name of website | Yes | 64 | | avatar | assets/img/avatar.png | Path of avatar image, to be displayed in the theme's header | Yes | 65 | | gravatar | f9879d71855b5ff21e4963273a886bfc | [MD5 hash of your email address](https://secure.gravatar.com/site/implement/hash/) to load your Gravatar in the theme's header | Yes | 66 | | description | My blog posts | Short description, primarily used by search engines | Yes | 67 | 68 | ### Header and footer text 69 | 70 | Change these variables in `_config.yml`: 71 | 72 | 73 | | Variable | Example | Description | Optional | 74 | | ------------------------- | ----------------------------------- | ----------------------------------------------------------------------- | -------- | 75 | | header_text | Welcome to my Jekyll blog | HTML (shown below the navigation) with a background colour for emphasis | Yes | 76 | | header_text_feature_image | assets/img/sample_feature_img_3.png | Background image for the header text | Yes | 77 | | footer_text | Copyright 2014 | HTML (shown at end of the site) with lighter text | Yes | 78 | 79 | ### Icons 80 | 81 | Add your username on selected websites in the icon section of the `_config.yml` file to display the site's icon from [Font Awesome](https://fortawesome.github.io/Font-Awesome/) in the header navigation. All icon variables should be your username enclosed in quotes (e.g. "username"), except for the following variables: 82 | 83 | 84 | | Variable | Example | Description | Optional | 85 | | -------------- | ----------------------------------------------- | ------------------------------------------------------ | -------- | 86 | | rss | true | Takes boolean value (true/false) to show RSS feed icon | Yes | 87 | | email_address | type@example.com | Email address | Yes | 88 | | linkedin | https://www.linkedin.com/in/FirstLast | Full URL to profile on LinkedIn | Yes | 89 | | stack_exchange | https://stackoverflow.com/users/0000/first-last | Full URL to profile on Stack Exchange | Yes | 90 | 91 | ### Scripts 92 | 93 | Change these variables in `_config.yml`: 94 | 95 | 96 | | Variable | Example | Description | Optional | 97 | | ---------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------- | -------- | 98 | | google_analytics | UA-123456-01 | Google Analytics [tracking ID](https://support.google.com/analytics/answer/1032385?hl=en) | Yes | 99 | | disqus_shortname | shortname | Disqus [shortname](https://help.disqus.com/customer/portal/articles/466208-what-s-a-shortname-) | Yes | 100 | | katex | true | Takes boolean value (true/false) to conditionally load [KaTeX](https://khan.github.io/KaTeX/) scripts required for math typesetting | Yes | 101 | 102 | Scripts listed here are only loaded if you provide a value in the `_config.yml` file. 103 | 104 | ### Localization strings 105 | 106 | Change localization string variables in `_config.yml`. 107 | 108 | English text used in the theme (such as the "continue reading" label) has been grouped so you can quickly translate the theme or change labels to suit your needs. 109 | 110 | ### Colours, typography, padding 111 | 112 | ![A selection of colours set in Type Theme by modifying the CSS](https://cloud.githubusercontent.com/assets/816965/5142488/130869a6-71d7-11e4-8a38-a69ec1673436.png) 113 | 114 | 115 | | Variable | Example | Description | Optional | 116 | | ------------ | -------------------------- | ------------------------------------ | ------------------------------------------------------------ | 117 | | google_fonts | "Playfair+Display:400,700\ | PT+Sans:400,700,700italic,400italic" | [Google Fonts](https://www.google.com/fonts) to load for use | 118 | 119 | Navigate to the `_sass > base` directory and open `_variables.scss` to change colours, typography and padding used in the theme with CSS. 120 | 121 | Once you have loaded a Google Font in `config.yml`, you can integrate the fonts into your CSS by changing the font-family in `_variables.scss`. For example, after loading the Playfair Display and PT Sans fonts from Google: 122 | 123 | ```css 124 | // Typography 125 | $font-family-main: 'PT Sans', Helvetica, Arial, sans-serif; 126 | $font-family-headings: 'Playfair Display', Helvetica, Arial, sans-serif; 127 | ``` 128 | 129 | Mozilla's [ColorPicker](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool) is a helpful tool to get your preferred colours in hexadecimal or RGBA form for use in `_variables.scss`. 130 | 131 | ### Customize style when using the remote_theme 132 | 133 | If you're using Type Theme as a `remote_theme`, you can override variables and styles. 134 | To do so, simply create a `assets/css/main.scss` file on your website with the following content: 135 | 136 | ```scss 137 | // assets/css/main.scss 138 | --- 139 | --- 140 | 141 | @import "type-theme"; 142 | ``` 143 | 144 | `@import "type-theme";` includes the theme styles, so you can add custom imports before and after it, depending on your needs. 145 | Best practice is to put your custom files in the `_sass` folder of your project. Jekyll will automatically look for them there. 146 | For example, say you wanted to override some theme variables and add some custom styles, you can create the following files: 147 | 148 | ```scss 149 | // _sass/_variables.scss 150 | $background-color: black; 151 | ``` 152 | 153 | ```sass 154 | // _sass/_custom.sass 155 | 156 | // SASS is supported as well, just note the file extension is .sass 157 | .feature-image header 158 | height: 300px 159 | ``` 160 | 161 | Then import them both into `main.scss`: 162 | 163 | ```scss 164 | // assets/css/main.scss 165 | --- 166 | --- 167 | 168 | @import "variables"; 169 | @import "type-theme"; 170 | @import "custom"; 171 | ``` 172 | 173 | ## Posts and pages in Type Theme 174 | Please refer to the [Jekyll docs for writing posts](https://jekyllrb.com/docs/posts/). Non-standard features are documented below. 175 | 176 | ### Math typesetting 177 | Wrap math expressions with `$$` signs in your posts and make sure you have set the `katex` variable in `_config.yml` to `true` for math typesetting. 178 | 179 | For inline math typesetting, type your math expression on the *same line* as your content. For example: 180 | 181 | ```latex 182 | Type math within a sentence $$2x^2 + x + c$$ to display inline 183 | ``` 184 | 185 | For display math typesetting, type your math expression on a *new line*. For example: 186 | 187 | ```latex 188 | $$ 189 | \bar{y} = {1 \over n} \sum_{i = 1}^{n}y_i 190 | $$ 191 | ``` 192 | 193 | Type Theme makes use for [KaTeX](https://khan.github.io/KaTeX/) for typesetting. 194 | 195 | ### Feature images 196 | 197 | ![Posts with geometric feature images](https://cloud.githubusercontent.com/assets/816965/5142406/19726478-71d6-11e4-8111-94f788b0e44d.png) 198 | 199 | Add a feature image by specifying a path to an image in the [front matter](http://jekyllrb.com/docs/frontmatter/) in the form of `feature-img: "img/PATH_TO_IMAGE.png"`. 200 | 201 | For example: 202 | 203 | ```yml 204 | --- 205 | layout: post 206 | title: Hello World 207 | feature-img: "assets/img/sample_feature_img.png" 208 | --- 209 | ``` 210 | 211 | By default, the page title is displayed on top of the feature image, as well as on the browser's tab. You can change the feature image's displayed title by specifying a `feature-title` in the front matter: 212 | 213 | ```yml 214 | --- 215 | layout: post 216 | title: Short title 217 | feature-title: A much longer title 218 | feature-img: "assets/img/sample_feature_img.png" 219 | --- 220 | ``` 221 | 222 | ### Hiding pages from navigation 223 | 224 | In the front matter of a page, add `hide: true` to prevent the page from showing up in the header's navigation bar (visitors can still visit the URL through other means). 225 | 226 | For example: 227 | 228 | ```yml 229 | --- 230 | layout: page 231 | title: "Error 404: Page not found" 232 | permalink: /404.html 233 | hide: true 234 | --- 235 | ``` 236 | 237 | ### Sorting pages in navigation 238 | 239 | You can configure this theme to **sort your pages** in the header's navigation bar. 240 | 241 | - Set `site_navigation_sort` in theme settings to a property name e.g. `'order'` 242 | - In the front matter of a non-hidden page, add `order: n` 243 | 244 | For example: 245 | 246 | ```yml 247 | --- 248 | layout: page 249 | title: Team 250 | permalink: /team/ 251 | order: 4 252 | --- 253 | ``` 254 | 255 | ### Tags 256 | 257 | Post tags should be placed between `[]` in your post metadata. Separate each tag with a comma. 258 | 259 | For example: 260 | 261 | ```yml 262 | --- 263 | layout: post 264 | title: Markdown and HTML 265 | tags: [sample, markdown, html] 266 | --- 267 | ``` 268 | 269 | A tags listing will be automatically generated using the `tags.html` file provided in Type Theme. If you're not using the tags feature it is safe to delete `tags.html`. 270 | 271 | ### Search 272 | 273 | The search feature can be activated in the `_config.yml` file by changing its value from `false` to `true`. 274 | 275 | ```yml 276 | #Scripts 277 | search: true 278 | ``` 279 | 280 | Once activated, the search bar will appear in the header. This feature uses [Lunr](https://lunrjs.com/) and searches through the title, tags and content of your posts. 281 | 282 | ### Subtitles 283 | A subtitle can be displayed below your title on permalink post pages. 284 | 285 | To enable this feature, add `subtitle` to your post metadata. 286 | 287 | For example: 288 | 289 | ```yml 290 | --- 291 | layout: post 292 | title: "This is a title" 293 | subtitle: "This is a subtitle" 294 | --- 295 | ``` 296 | 297 | ## License 298 | [The MIT License (MIT)](https://github.com/rohanchandra/type-theme/blob/master/LICENSE) 299 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # SITE CONFIGURATION 2 | baseurl: "/type-theme" 3 | url: "https://rohanchandra.github.io/" 4 | 5 | # THEME-SPECIFIC CONFIGURATION 6 | theme_settings: 7 | # Meta 8 | title: Type Theme 9 | avatar: assets/img/avatar.png 10 | favicon: assets/favicon.ico 11 | gravatar: # Email MD5 hash 12 | description: "A website with blog posts and pages" # used by search engines 13 | 14 | # Header and footer text 15 | header_text: > 16 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

17 | 18 |

Remove all header text in _config.yml to disable this feature.

19 | header_text_feature_image: 20 | footer_text: > 21 | Powered by Jekyll with Type Theme 22 | 23 | # Icons 24 | rss: false 25 | email_address: # Full email address, e.g. "sam@example.com" 26 | behance: 27 | bitbucket: 28 | dribbble: 29 | facebook: 30 | flickr: 31 | gitlab: 32 | github: "rohanchandra/type-theme" 33 | gitter: 34 | google_plus: 35 | instagram: 36 | linkedin: # Full URL 37 | pinterest: 38 | reddit: 39 | soundcloud: 40 | stack_exchange: # Full URL 41 | steam: 42 | tumblr: 43 | twitter: 44 | wordpress: 45 | youtube: 46 | 47 | # Scripts 48 | google_analytics: # Tracking ID, e.g. "UA-000000-01" 49 | disqus_shortname: 50 | katex: true # Enable if using math markup 51 | search: false # Enable the search feature 52 | 53 | # Localization strings 54 | str_follow_on: "Follow on" 55 | str_rss_follow: "Follow RSS feed" 56 | str_email: "Email" 57 | str_next_post: "Next post" 58 | str_previous_post: "Previous post" 59 | str_next_page: "Next" 60 | str_previous_page: "Prev" 61 | str_continue_reading: "Continue reading" 62 | str_javascript_required_disqus: "Please enable JavaScript to view comments." 63 | str_search_no_results: "No results found." 64 | 65 | # Colours, typography and padding 66 | # Open the "_sass > base" folder, and open "_variables.scss" 67 | google_fonts: "Source+Sans+Pro:400,700,700italic,400italic" 68 | 69 | # Post navigation 70 | post_navigation: false 71 | 72 | # PAGINATION 73 | paginate: 5 74 | paginate_path: "blog/page:num" 75 | 76 | # BUILD SETTINGS 77 | markdown: kramdown 78 | highlighter: rouge 79 | sass: 80 | sass_dir: _sass 81 | style: :compressed 82 | plugins: [jekyll-paginate] 83 | exclude: 84 | - Gemfile 85 | - Gemfile.lock 86 | -------------------------------------------------------------------------------- /_includes/disqus.html: -------------------------------------------------------------------------------- 1 |
2 | 10 | 11 | -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 | {% if site.theme_settings.katex and page.id %} 2 | 3 | {% endif %} 4 | 5 | {% if site.theme_settings.footer_text %} 6 | 9 | {% endif %} 10 | -------------------------------------------------------------------------------- /_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {% if page.title %}{{ page.title }} |{% endif %} {{ site.theme_settings.title }} 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 20 | 21 | 22 | 24 | 25 | 26 | {% if site.theme_settings.google_fonts %} 27 | 29 | {% endif %} 30 | 31 | 32 | {% if site.theme_settings.katex and page.id %} 33 | 35 | 36 | 39 | {% endif %} 40 | 41 | 42 | {% if site.theme_settings.google_analytics %} 43 | 54 | {% endif %} 55 | -------------------------------------------------------------------------------- /_includes/header.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | {% if site.theme_settings.gravatar %} 4 | 5 | 6 | 7 | {% elsif site.theme_settings.avatar %} 8 | 9 | 10 | 11 | {% endif %} 12 |

13 | {{ site.theme_settings.title }} 14 |

15 |
16 | 48 | 49 |
50 | -------------------------------------------------------------------------------- /_includes/icons.html: -------------------------------------------------------------------------------- 1 | {% if site.theme_settings.rss %} 2 |
  • 3 | 4 | 5 | 6 |
    • 7 | {% endif %} 8 | 9 | {% if site.theme_settings.email_address %} 10 |
  • 11 | 12 | 13 | 14 |
    • 15 | {% endif %} 16 | 17 | {% if site.theme_settings.behance %} 18 |
  • 19 | 20 | 21 | 22 |
    • 23 | {% endif %} 24 | 25 | {% if site.theme_settings.bitbucket %} 26 |
  • 27 | 28 | 29 | 30 |
    • 31 | {% endif %} 32 | 33 | {% if site.theme_settings.dribbble %} 34 |
  • 35 | 36 | 37 | 38 |
    • 39 | {% endif %} 40 | 41 | {% if site.theme_settings.facebook %} 42 |
  • 43 | 44 | 45 | 46 |
    • 47 | {% endif %} 48 | 49 | {% if site.theme_settings.flickr %} 50 |
  • 51 | 52 | 53 | 54 |
    • 55 | {% endif %} 56 | 57 | {% if site.theme_settings.github %} 58 |
  • 59 | 60 | 61 | 62 |
    • 63 | {% endif %} 64 | 65 | {% if site.theme_settings.google_plus %} 66 |
  • 67 | 68 | 69 | 70 |
    • 71 | {% endif %} 72 | 73 | {% if site.theme_settings.instagram %} 74 |
  • 75 | 76 | 77 | 78 |
    • 79 | {% endif %} 80 | 81 | {% if site.theme_settings.linkedin %} 82 |
  • 83 | 84 | 85 | 86 |
    • 87 | {% endif %} 88 | 89 | {% if site.theme_settings.pinterest %} 90 |
  • 91 | 92 | 93 | 94 |
    • 95 | {% endif %} 96 | 97 | {% if site.theme_settings.reddit %} 98 |
  • 99 | 100 | 101 | 102 |
    • 103 | {% endif %} 104 | 105 | {% if site.theme_settings.soundcloud %} 106 |
  • 107 | 108 | 109 | 110 |
    • 111 | {% endif %} 112 | 113 | {% if site.theme_settings.stack_exchange %} 114 |
  • 115 | 116 | 117 | 118 |
    • 119 | {% endif %} 120 | 121 | {% if site.theme_settings.steam %} 122 |
  • 123 | 124 | 125 | 126 |
    • 127 | {% endif %} 128 | 129 | {% if site.theme_settings.tumblr %} 130 |
  • 131 | 132 | 133 | 134 |
    • 135 | {% endif %} 136 | 137 | {% if site.theme_settings.gitlab %} 138 |
  • 139 | 140 | 141 | 142 |
    • 143 | {% endif %} 144 | 145 | {% if site.theme_settings.twitter %} 146 |
  • 147 | 148 | 149 | 150 |
    • 151 | {% endif %} 152 | 153 | {% if site.theme_settings.wordpress %} 154 |
  • 155 | 156 | 157 | 158 |
    • 159 | {% endif %} 160 | 161 | {% if site.theme_settings.youtube %} 162 |
  • 163 | 164 | 165 | 166 |
    • 167 | {% endif %} 168 | 169 | {% if site.theme_settings.gitter %} 170 |
  • 171 | 172 | 173 | 174 |
    • 175 | {% endif %} 176 | -------------------------------------------------------------------------------- /_includes/post_nav.html: -------------------------------------------------------------------------------- 1 |
    2 | {% if page.previous.url %} 3 | 9 | {% endif %} 10 | {% if page.next.url %} 11 | 17 | {% endif %} 18 |
    19 | -------------------------------------------------------------------------------- /_includes/tags_list.html: -------------------------------------------------------------------------------- 1 | {% if include.tag_count > 0 %} 2 | 9 | {% endif %} 10 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {% include head.html %} 4 | 5 | {% include header.html %} 6 |
    7 | {{ content }} 8 |
    9 | {% include footer.html %} 10 | 11 | 12 | -------------------------------------------------------------------------------- /_layouts/home.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
    6 | {% if site.theme_settings.header_text %} 7 |
    9 | {{ site.theme_settings.header_text }} 10 |
    11 | {% endif %} 12 | 13 |
    14 | {% for post in paginator.posts %} 15 |
    16 |
    17 |

    18 | 19 | {{ post.title }} 20 | 21 |

    22 |

    23 | {{ post.date | date: "%B %-d, %Y" }} 24 |

    25 |
    26 |
    27 | {{ post.excerpt }} 28 | 29 | {{ site.theme_settings.str_continue_reading }} 30 | 31 |
    32 |
    33 | {% endfor %} 34 |
    35 | 36 | {% if paginator.total_pages > 1 %} 37 | 51 | {% endif %} 52 |
    53 | -------------------------------------------------------------------------------- /_layouts/page.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
    5 |
    6 |

    {{ page.feature-title | default: page.title }}

    7 | {% if page.subtitle %}

    {{ page.subtitle }}

    {% endif %} 8 |
    9 |
    {{ content }}
    10 |
    11 | -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
    5 |
    6 |

    {{ page.feature-title | default: page.title }}

    7 | {% if page.subtitle %}

    {{ page.subtitle }}

    {% endif %} 8 |

    9 | {{ page.date | date: "%B %-d, %Y" }} 10 | {% if page.author %} - {{ page.author }}{% endif %} 11 |

    12 |
    13 |
    {{ content }}
    14 | {% include tags_list.html tags=page.tags tag_count=page.tags.size %} 15 |
    16 | 17 | 18 | {% if site.theme_settings.disqus_shortname %} 19 |
    20 | {% include disqus.html %} 21 |
    22 | {% endif %} 23 | 24 | 25 | {% if site.theme_settings.post_navigation %} 26 | {% include post_nav.html %} 27 | {% endif %} 28 | -------------------------------------------------------------------------------- /_layouts/tags.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | --- 4 | 5 | {% capture site_tags %}{% for tag in site.tags %}{{ tag | first }}{% unless forloop.last %},{% endunless %}{% endfor %}{% endcapture %} 6 | {% assign tag_words = site_tags | split:',' | sort %} 7 | 8 | 9 | {% for item in (0..site.tags.size) %} 10 | {% unless forloop.last %} 11 | {% capture this_word %}{{ tag_words[item] | strip_newlines }}{% endcapture %} 12 |

    13 | #{{ this_word }} 14 |

    15 | 16 | {% for post in site.tags[this_word] %} 17 | {% if post.title != null %} 18 |
    19 |

    20 | 21 | {{ post.title }} 22 | 23 |

    24 |
    25 | {{ post.date | date: "%B %-d, %Y" }} 26 |
    27 |
    28 | {% endif %} 29 | {% endfor %} 30 | {% endunless %} 31 | {% endfor %} 32 | -------------------------------------------------------------------------------- /_posts/2014-11-28-markdown-and-html.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Markdown and HTML 4 | --- 5 | 6 | Jekyll supports the use of [Markdown](http://daringfireball.net/projects/markdown/syntax) with inline HTML tags which makes it easier to quickly write posts with Jekyll, without having to worry too much about text formatting. A sample of the formatting follows. 7 | 8 | Tables have also been extended from Markdown: 9 | 10 | First Header | Second Header 11 | ------------- | ------------- 12 | Content Cell | Content Cell 13 | Content Cell | Content Cell 14 | 15 | Here's an example of an image, which is included using Markdown: 16 | 17 | ![Geometric pattern with fading gradient]({{ site.baseurl }}/assets/img/sample_feature_img_2.png) 18 | 19 | Highlighting for code in Jekyll is done using Pygments or Rouge. This theme makes use of Rouge by default. 20 | 21 | {% highlight js %} 22 | // count to ten 23 | for (var i = 1; i <= 10; i++) { 24 | console.log(i); 25 | } 26 | 27 | // count to twenty 28 | var j = 0; 29 | while (j < 20) { 30 | j++; 31 | console.log(j); 32 | } 33 | {% endhighlight %} 34 | 35 | Type Theme uses KaTeX to display maths. Equations such as $$S_n = a \times \frac{1-r^n}{1-r}$$ can be displayed inline. 36 | 37 | Alternatively, they can be shown on a new line: 38 | 39 | $$ f(x) = \int \frac{2x^2+4x+6}{x-2} $$ 40 | -------------------------------------------------------------------------------- /_posts/2014-11-29-feature-images.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Feature images 4 | feature-img: "assets/img/sample_feature_img.png" 5 | --- 6 | This is an example of a post which includes a feature image specified in the front matter of the post. The feature image spans the full-width of the page, and is shown with the title on permalink pages. 7 | -------------------------------------------------------------------------------- /_posts/2014-11-30-sample-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Sample post 4 | tags: [test, sample] 5 | --- 6 | Consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. 7 | 8 | * Consectetur adipiscing elit 9 | * Donec a diam lectus 10 | * Sed sit amet ipsum mauris 11 | 12 | Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est. 13 | 14 | Nunc diam velit, adipiscing ut tristique vitae, sagittis vel odio. Maecenas convallis ullamcorper ultricies. Curabitur ornare, ligula *semper consectetur sagittis*, nisi diam iaculis velit, id fringilla sem nunc vel mi. Nam dictum, odio nec pretium volutpat, arcu ante placerat erat, non tristique elit urna et turpis. Quisque mi metus, ornare sit amet fermentum et, tincidunt et orci. Fusce eget orci a orci congue vestibulum. 15 | 16 | Ut dolor diam, elementum et vestibulum eu, porttitor vel elit. Curabitur venenatis pulvinar tellus gravida ornare. Sed et erat faucibus nunc euismod ultricies ut id justo. Nullam cursus suscipit nisi, et ultrices justo sodales nec. Fusce venenatis facilisis lectus ac semper. Aliquam at massa ipsum. Quisque bibendum purus convallis nulla ultrices ultricies. Nullam aliquam, mi eu aliquam tincidunt, purus velit laoreet tortor, viverra pretium nisi quam vitae mi. Fusce vel volutpat elit. Nam sagittis nisi dui. 17 | 18 | > Suspendisse lectus leo, consectetur in tempor sit amet, placerat quis neque 19 | 20 | Etiam luctus porttitor lorem, sed suscipit est rutrum non. Curabitur lobortis nisl a enim congue semper. Aenean commodo ultrices imperdiet. Vestibulum ut justo vel sapien venenatis tincidunt. 21 | 22 | Phasellus eget dolor sit amet ipsum dapibus condimentum vitae quis lectus. Aliquam ut massa in turpis dapibus convallis. Praesent elit lacus, vestibulum at malesuada et, ornare et est. Ut augue nunc, sodales ut euismod non, adipiscing vitae orci. Mauris ut placerat justo. Mauris in ultricies enim. Quisque nec est eleifend nulla ultrices egestas quis ut quam. Donec sollicitudin lectus a mauris pulvinar id aliquam urna cursus. Cras quis ligula sem, vel elementum mi. Phasellus non ullamcorper urna. 23 | -------------------------------------------------------------------------------- /_sass/base/_global.scss: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | figure { 7 | margin: 0; 8 | } 9 | // For correct line number width in Github Gists 10 | .gist table tbody tr td { 11 | box-sizing: content-box; 12 | } 13 | html { 14 | background: $background-color; 15 | } 16 | 17 | // Typography 18 | ::selection { 19 | background: $selection-color; 20 | } 21 | ::-moz-selection { 22 | background: $selection-color; 23 | } 24 | body { 25 | color: $text-color; 26 | font-family: $font-family-main; 27 | font-size: $font-size; 28 | word-wrap: break-word; 29 | } 30 | h1, h2, h3, h4, h5, h6 { 31 | font-family: $font-family-headings; 32 | line-height: 1.2; 33 | margin: 0.67em 0; 34 | a { 35 | color: $text-color; 36 | } 37 | } 38 | h1 { 39 | font-size: 2.5em; 40 | } 41 | h2 { 42 | font-size: 2em; 43 | } 44 | h3 { 45 | font-size: 1.5em; 46 | } 47 | h4 { 48 | font-size: 1.15em; 49 | } 50 | blockquote { 51 | border-left: 2px solid; 52 | padding: 1em 1em; 53 | } 54 | blockquote p:last-child, 55 | footer p:last-child { 56 | margin-bottom: 0; 57 | } 58 | table { 59 | table-layout:fixed; 60 | width:100%; 61 | word-wrap:break-word; 62 | } 63 | td, 64 | th { 65 | padding: 0.5em 1em; 66 | border: 1px solid $border-color; 67 | text-align: left; 68 | } 69 | td { 70 | vertical-align: top; 71 | } 72 | th { 73 | vertical-align: bottom; 74 | } 75 | table, 76 | dl, 77 | blockquote, 78 | code, 79 | kbd, 80 | pre, 81 | samp { 82 | margin: 1em 0; 83 | } 84 | dt { 85 | font-weight: bold; 86 | } 87 | dd { 88 | margin-left: 2em; 89 | } 90 | p, ol, ul, dl, .math-display { 91 | line-height: 1.5; 92 | margin-bottom: 1em; 93 | } 94 | // KaTeX math display 95 | .math-display { 96 | display: inline-block; 97 | width: 100%; 98 | } 99 | // Lists within lists 100 | li > ul, li > ol { 101 | margin-bottom: 0; 102 | margin-left: 1em; 103 | } 104 | ol, ul { 105 | list-style-position: inside; 106 | } 107 | hr { 108 | border: 0; 109 | border-top: 1px solid $border-color; 110 | border-bottom: 1px solid #fff; 111 | margin: 1em 0; 112 | } 113 | a { 114 | color: $link-color; 115 | text-decoration: none; 116 | } 117 | .nav { 118 | list-style: none; 119 | margin: 0; 120 | padding: 0; 121 | } 122 | // Responsive media 123 | iframe, img, embed, object, video { 124 | max-width: 100%; 125 | } 126 | img[align=left] { 127 | margin-right: 3%; 128 | } 129 | img[align=right] { 130 | margin-left: 3%; 131 | } 132 | -------------------------------------------------------------------------------- /_sass/base/_utility.scss: -------------------------------------------------------------------------------- 1 | // Mix-ins 2 | %padding-small { 3 | padding: $padding-x-small $padding-x-small * 2; 4 | @media (max-width: 1000px) { 5 | padding: $padding-x-small $padding-x-small; 6 | } 7 | } 8 | %padding-regular { 9 | padding: $padding-small $padding-large; 10 | @media (max-width: 1000px) { 11 | padding: $padding-small * 1.5 $padding-large / 1.6; 12 | } 13 | @media (max-width: 576px) { 14 | padding: $padding-small; 15 | } 16 | } 17 | // Buttons 18 | .button { 19 | border-radius: 0.3em; 20 | border: 1px solid; 21 | display: inline-block; 22 | margin: 1em 0; 23 | padding: 0.5em 0.75em; 24 | } 25 | a.button { 26 | @extend .button-link; 27 | } 28 | .button-link { 29 | &:hover { 30 | background: $link-color; 31 | border: 1px solid $link-color; 32 | color: $background-color; 33 | text-decoration: none; 34 | } 35 | } 36 | .body-link { 37 | &:hover { 38 | text-decoration: underline; 39 | color: darken($link-color, 15%); 40 | } 41 | } 42 | // States 43 | .disabled { 44 | opacity: 0.7; 45 | } 46 | -------------------------------------------------------------------------------- /_sass/base/_variables.scss: -------------------------------------------------------------------------------- 1 | // Typography 2 | $font-family-main: 'Source Sans Pro', Helvetica, Arial, sans-serif !default; 3 | $font-family-headings: 'Source Sans Pro', Helvetica, Arial, sans-serif !default; 4 | $font-size: 1.10em !default; 5 | 6 | // Padding 7 | $padding-large: 20% !default; 8 | $padding-small: 5% !default; 9 | $padding-x-small: 3% !default; 10 | 11 | // Brand colours 12 | $brand-color: #fff !default; 13 | $background-color: #fff !default; 14 | $border-color: rgba(0, 0, 0, 0.1) !default; // rgba recommended if using feature images 15 | 16 | // Typography colours 17 | $text-color: #383838 !default; 18 | $link-color: #1ABC9C !default; 19 | $selection-color: #D4D4D4 !default; // visible when highlighting text 20 | 21 | // Tags color 22 | $tags-color: #b0b0b0 !default; 23 | 24 | //Search color 25 | $search-color: #999 !default; 26 | 27 | // Header colours 28 | $header-link-color: #383838 !default; 29 | 30 | // Feature image for articles 31 | $feature-image-text-color: #fff !default; 32 | $feature-image-size: cover !default; // options include "cover", "contain", "auto" 33 | 34 | // Header description box 35 | $header-desc-background-color: #1ABC9C !default; 36 | $header-desc-text-color: #FFF !default; 37 | $header-desc-link-color: #02453D !default; 38 | -------------------------------------------------------------------------------- /_sass/external/_reset.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; /* 1 */ 59 | vertical-align: baseline; /* 2 */ 60 | } 61 | 62 | /** 63 | * Prevent modern browsers from displaying `audio` without controls. 64 | * Remove excess height in iOS 5 devices. 65 | */ 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 75 | */ 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | /* Links 83 | ========================================================================== */ 84 | 85 | /** 86 | * Remove the gray background color from active links in IE 10. 87 | */ 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | /** 94 | * Improve readability when focused and also mouse hovered in all browsers. 95 | */ 96 | 97 | a:active, 98 | a:hover { 99 | outline: 0; 100 | } 101 | 102 | /* Text-level semantics 103 | ========================================================================== */ 104 | 105 | /** 106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 107 | */ 108 | 109 | abbr[title] { 110 | border-bottom: 1px dotted; 111 | } 112 | 113 | /** 114 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 115 | */ 116 | 117 | b, 118 | strong { 119 | font-weight: bold; 120 | } 121 | 122 | /** 123 | * Address styling not present in Safari and Chrome. 124 | */ 125 | 126 | dfn { 127 | font-style: italic; 128 | } 129 | 130 | /** 131 | * Address variable `h1` font-size and margin within `section` and `article` 132 | * contexts in Firefox 4+, Safari, and Chrome. 133 | */ 134 | 135 | h1 { 136 | font-size: 2em; 137 | margin: 0.67em 0; 138 | } 139 | 140 | /** 141 | * Address styling not present in IE 8/9. 142 | */ 143 | 144 | mark { 145 | background: #ff0; 146 | color: #000; 147 | } 148 | 149 | /** 150 | * Address inconsistent and variable font size in all browsers. 151 | */ 152 | 153 | small { 154 | font-size: 80%; 155 | } 156 | 157 | /** 158 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 159 | */ 160 | 161 | sub, 162 | sup { 163 | font-size: 75%; 164 | line-height: 0; 165 | position: relative; 166 | vertical-align: baseline; 167 | } 168 | 169 | sup { 170 | top: -0.5em; 171 | } 172 | 173 | sub { 174 | bottom: -0.25em; 175 | } 176 | 177 | /* Embedded content 178 | ========================================================================== */ 179 | 180 | /** 181 | * Remove border when inside `a` element in IE 8/9/10. 182 | */ 183 | 184 | img { 185 | border: 0; 186 | } 187 | 188 | /** 189 | * Correct overflow not hidden in IE 9/10/11. 190 | */ 191 | 192 | svg:not(:root) { 193 | overflow: hidden; 194 | } 195 | 196 | /* Grouping content 197 | ========================================================================== */ 198 | 199 | /** 200 | * Address margin not present in IE 8/9 and Safari. 201 | */ 202 | 203 | figure { 204 | margin: 1em 40px; 205 | } 206 | 207 | /** 208 | * Address differences between Firefox and other browsers. 209 | */ 210 | 211 | hr { 212 | -moz-box-sizing: content-box; 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | /** 218 | * Contain overflow in all browsers. 219 | */ 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | /** 226 | * Address odd `em`-unit font size rendering in all browsers. 227 | */ 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | /* Forms 238 | ========================================================================== */ 239 | 240 | /** 241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | * styling of `select`, unless a `border` property is set. 243 | */ 244 | 245 | /** 246 | * 1. Correct color not being inherited. 247 | * Known issue: affects color of disabled elements. 248 | * 2. Correct font properties not being inherited. 249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; /* 1 */ 258 | font: inherit; /* 2 */ 259 | margin: 0; /* 3 */ 260 | } 261 | 262 | /** 263 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | */ 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | /** 271 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | * All other form control elements do not inherit `text-transform` values. 273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | * Correct `select` style inheritance in Firefox. 275 | */ 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | /** 283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | * and `video` controls. 285 | * 2. Correct inability to style clickable `input` types in iOS. 286 | * 3. Improve usability and consistency of cursor style between image-type 287 | * `input` and others. 288 | */ 289 | 290 | button, 291 | html input[type="button"], /* 1 */ 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; /* 2 */ 295 | cursor: pointer; /* 3 */ 296 | } 297 | 298 | /** 299 | * Re-set default cursor for disabled elements. 300 | */ 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default; 305 | } 306 | 307 | /** 308 | * Remove inner padding and border in Firefox 4+. 309 | */ 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | /** 318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | * the UA stylesheet. 320 | */ 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | /** 327 | * It's recommended that you don't attempt to style these elements. 328 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | * 330 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | * 2. Remove excess padding in IE 8/9/10. 332 | */ 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | box-sizing: border-box; /* 1 */ 337 | padding: 0; /* 2 */ 338 | } 339 | 340 | /** 341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 342 | * `font-size` values of the `input`, it causes the cursor style of the 343 | * decrement button to change from `default` to `text`. 344 | */ 345 | 346 | input[type="number"]::-webkit-inner-spin-button, 347 | input[type="number"]::-webkit-outer-spin-button { 348 | height: auto; 349 | } 350 | 351 | /** 352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 354 | * (include `-moz` to future-proof). 355 | */ 356 | 357 | input[type="search"] { 358 | -webkit-appearance: textfield; /* 1 */ 359 | -moz-box-sizing: content-box; 360 | -webkit-box-sizing: content-box; /* 2 */ 361 | box-sizing: content-box; 362 | } 363 | 364 | /** 365 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 366 | * Safari (but not Chrome) clips the cancel button when the search input has 367 | * padding (and `textfield` appearance). 368 | */ 369 | 370 | input[type="search"]::-webkit-search-cancel-button, 371 | input[type="search"]::-webkit-search-decoration { 372 | -webkit-appearance: none; 373 | } 374 | 375 | /** 376 | * Define consistent border, margin, and padding. 377 | */ 378 | 379 | fieldset { 380 | border: 1px solid #c0c0c0; 381 | margin: 0 2px; 382 | padding: 0.35em 0.625em 0.75em; 383 | } 384 | 385 | /** 386 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 387 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 388 | */ 389 | 390 | legend { 391 | border: 0; /* 1 */ 392 | padding: 0; /* 2 */ 393 | } 394 | 395 | /** 396 | * Remove default vertical scrollbar in IE 8/9/10/11. 397 | */ 398 | 399 | textarea { 400 | overflow: auto; 401 | } 402 | 403 | /** 404 | * Don't inherit the `font-weight` (applied by a rule above). 405 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 406 | */ 407 | 408 | optgroup { 409 | font-weight: bold; 410 | } 411 | 412 | /* Tables 413 | ========================================================================== */ 414 | 415 | /** 416 | * Remove most spacing between table cells. 417 | */ 418 | 419 | table { 420 | border-collapse: collapse; 421 | border-spacing: 0; 422 | } 423 | 424 | td, 425 | th { 426 | padding: 0; 427 | } 428 | -------------------------------------------------------------------------------- /_sass/external/_syntax.scss: -------------------------------------------------------------------------------- 1 | // pygments-css (https://github.com/richleland/pygments-css) 2 | 3 | .hll { background-color: #ffffcc } 4 | .c { color: #999988; font-style: italic } /* Comment */ 5 | .err { color: #a61717; background-color: #e3d2d2 } /* Error */ 6 | .k { color: #000000; font-weight: bold } /* Keyword */ 7 | .o { color: #000000; font-weight: bold } /* Operator */ 8 | .cm { color: #999988; font-style: italic } /* Comment.Multiline */ 9 | .cp { color: #999999; font-weight: bold; font-style: italic } /* Comment.Preproc */ 10 | .c1 { color: #999988; font-style: italic } /* Comment.Single */ 11 | .cs { color: #999999; font-weight: bold; font-style: italic } /* Comment.Special */ 12 | .gd { color: #000000; background-color: #ffdddd } /* Generic.Deleted */ 13 | .ge { color: #000000; font-style: italic } /* Generic.Emph */ 14 | .gr { color: #aa0000 } /* Generic.Error */ 15 | .gh { color: #999999 } /* Generic.Heading */ 16 | .gi { color: #000000; background-color: #ddffdd } /* Generic.Inserted */ 17 | .go { color: #888888 } /* Generic.Output */ 18 | .gp { color: #555555 } /* Generic.Prompt */ 19 | .gs { font-weight: bold } /* Generic.Strong */ 20 | .gu { color: #aaaaaa } /* Generic.Subheading */ 21 | .gt { color: #aa0000 } /* Generic.Traceback */ 22 | .kc { color: #000000; font-weight: bold } /* Keyword.Constant */ 23 | .kd { color: #000000; font-weight: bold } /* Keyword.Declaration */ 24 | .kn { color: #000000; font-weight: bold } /* Keyword.Namespace */ 25 | .kp { color: #000000; font-weight: bold } /* Keyword.Pseudo */ 26 | .kr { color: #000000; font-weight: bold } /* Keyword.Reserved */ 27 | .kt { color: #445588; font-weight: bold } /* Keyword.Type */ 28 | .m { color: #009999 } /* Literal.Number */ 29 | .s { color: #d01040 } /* Literal.String */ 30 | .na { color: #008080 } /* Name.Attribute */ 31 | .nb { color: #0086B3 } /* Name.Builtin */ 32 | .nc { color: #445588; font-weight: bold } /* Name.Class */ 33 | .no { color: #008080 } /* Name.Constant */ 34 | .nd { color: #3c5d5d; font-weight: bold } /* Name.Decorator */ 35 | .ni { color: #800080 } /* Name.Entity */ 36 | .ne { color: #990000; font-weight: bold } /* Name.Exception */ 37 | .nf { color: #990000; font-weight: bold } /* Name.Function */ 38 | .nl { color: #990000; font-weight: bold } /* Name.Label */ 39 | .nn { color: #555555 } /* Name.Namespace */ 40 | .nt { color: #000080 } /* Name.Tag */ 41 | .nv { color: #008080 } /* Name.Variable */ 42 | .ow { color: #000000; font-weight: bold } /* Operator.Word */ 43 | .w { color: #bbbbbb } /* Text.Whitespace */ 44 | .mf { color: #009999 } /* Literal.Number.Float */ 45 | .mh { color: #009999 } /* Literal.Number.Hex */ 46 | .mi { color: #009999 } /* Literal.Number.Integer */ 47 | .mo { color: #009999 } /* Literal.Number.Oct */ 48 | .sb { color: #d01040 } /* Literal.String.Backtick */ 49 | .sc { color: #d01040 } /* Literal.String.Char */ 50 | .sd { color: #d01040 } /* Literal.String.Doc */ 51 | .s2 { color: #d01040 } /* Literal.String.Double */ 52 | .se { color: #d01040 } /* Literal.String.Escape */ 53 | .sh { color: #d01040 } /* Literal.String.Heredoc */ 54 | .si { color: #d01040 } /* Literal.String.Interpol */ 55 | .sx { color: #d01040 } /* Literal.String.Other */ 56 | .sr { color: #009926 } /* Literal.String.Regex */ 57 | .s1 { color: #d01040 } /* Literal.String.Single */ 58 | .ss { color: #990073 } /* Literal.String.Symbol */ 59 | .bp { color: #999999 } /* Name.Builtin.Pseudo */ 60 | .vc { color: #008080 } /* Name.Variable.Class */ 61 | .vg { color: #008080 } /* Name.Variable.Global */ 62 | .vi { color: #008080 } /* Name.Variable.Instance */ 63 | .il { color: #009999 } /* Literal.Number.Integer.Long */ 64 | -------------------------------------------------------------------------------- /_sass/includes/_footer.scss: -------------------------------------------------------------------------------- 1 | .site-footer { 2 | @extend %padding-regular; 3 | display: inline-block; 4 | text-align: center; 5 | width: 100%; 6 | color: lighten($text-color, 30%); 7 | font-size: 0.9em; 8 | } 9 | -------------------------------------------------------------------------------- /_sass/includes/_header.scss: -------------------------------------------------------------------------------- 1 | .site-header { 2 | @extend %padding-small; 3 | background: $brand-color; 4 | border-bottom: 1px solid $border-color; 5 | display: inline-block; 6 | float: left; 7 | width: 100%; 8 | 9 | a { 10 | color: $header-link-color; 11 | } 12 | 13 | .avatar { 14 | height: 2em; 15 | width: 2em; 16 | float: left; 17 | margin-top: -3px; 18 | border-radius: 0.2em; 19 | margin-right: 1em; 20 | } 21 | 22 | .site-title { 23 | float: left; 24 | font-weight: bold; 25 | font-size: 1em; 26 | line-height: 1.5; 27 | } 28 | 29 | .site-nav { 30 | ul { 31 | margin: 0; 32 | padding: 0; 33 | list-style: none; 34 | line-height: 1.5; 35 | float: right; 36 | text-align: right; 37 | } 38 | li { 39 | display: inline; 40 | margin-right: 1em; 41 | vertical-align: middle; 42 | &:last-of-type { 43 | margin-right: 0; 44 | } 45 | } 46 | @media (max-width: 1100px) { 47 | ul { 48 | display: inline-block; 49 | float: left; 50 | padding-top: $padding-small; 51 | text-align: left; 52 | width: 100%; 53 | } 54 | } 55 | } 56 | 57 | /* --- Search form --- */ 58 | form { 59 | border: 0; 60 | border-bottom: 2px solid $search-color; 61 | outline: 0; 62 | 63 | *:focus { 64 | outline: none; 65 | } 66 | 67 | input{ 68 | &[type=text] { 69 | box-sizing: border-box; 70 | border: 0; 71 | outline: 0; 72 | color: $search-color; 73 | } 74 | 75 | &::-moz-placeholder { 76 | color: $search-color; 77 | opacity: 1; 78 | } 79 | 80 | &:-ms-input-placeholder, &::-webkit-input-placeholder { 81 | color: $search-color; 82 | } 83 | } 84 | 85 | button { 86 | border: none; 87 | font-size: 0.9em; 88 | background-color: $brand-color; 89 | color: $search-color; 90 | } 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /_sass/includes/_post_nav.scss: -------------------------------------------------------------------------------- 1 | #post-nav { 2 | width:100%; 3 | border-bottom: 1px solid $border-color; 4 | float: left; 5 | text-align: center; 6 | @extend %padding-small; 7 | i { 8 | vertical-align: middle; 9 | } 10 | a { 11 | width: 100%; 12 | display: inline-block; 13 | padding: 0; 14 | } 15 | p { 16 | @extend .meta; 17 | } 18 | .post-nav-post + .post-nav-post { 19 | margin-top: 1em; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /_sass/includes/_tag_list.scss: -------------------------------------------------------------------------------- 1 | .tags { 2 | width: 100%; 3 | margin-top: 1em; 4 | .tag { 5 | margin-right: 0.5em; 6 | color: $tags-color; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /_sass/layouts/_index.scss: -------------------------------------------------------------------------------- 1 | // Header text feature 2 | .call-out { 3 | @extend %padding-regular; 4 | display: inline-block; 5 | width: 100%; 6 | background-color:$header-desc-background-color; 7 | background-size: cover; 8 | font-size: 1.2em; 9 | text-align: center; 10 | color: $header-desc-text-color; 11 | } 12 | .call-out p:last-child { 13 | margin-bottom: 0; 14 | } 15 | .call-out a { 16 | color: $header-desc-link-color 17 | } 18 | // Post listing 19 | .posts { 20 | .post-teaser { 21 | @extend %padding-regular; 22 | width: 100%; 23 | margin-bottom: 0; 24 | display: inline-block; 25 | background-size: $feature-image-size; 26 | border-bottom: 1px solid $border-color; 27 | p a { 28 | @extend .body-link; 29 | } 30 | } 31 | .excerpt { 32 | margin-top: 1em; 33 | } 34 | } 35 | // Pagination 36 | .pagination .button { 37 | margin: 0 1.5em; 38 | i { 39 | vertical-align: middle; 40 | } 41 | } 42 | .pagination { 43 | padding: $padding-small $padding-large 0 $padding-large; 44 | text-align: center; 45 | @media (max-width: 600px) { 46 | padding: $padding-small; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /_sass/layouts/_posts.scss: -------------------------------------------------------------------------------- 1 | .post-content > :last-child { 2 | margin-bottom: 0; 3 | } 4 | article, 5 | .comments { 6 | @extend %padding-regular; 7 | border-bottom: 1px solid $border-color; 8 | float: left; 9 | width: 100%; 10 | } 11 | article { 12 | .subtitle { 13 | font-size: 1.45em; 14 | font-weight: normal; 15 | margin: 0; 16 | } 17 | header { 18 | margin-bottom: 6%; 19 | text-align: center; 20 | } 21 | a { 22 | @extend .body-link; 23 | } 24 | .footnotes { 25 | font-size: 0.9em; 26 | } 27 | } 28 | header { 29 | h1 { 30 | margin: 0; 31 | } 32 | } 33 | .meta { 34 | color: rgba($text-color, .5); 35 | font-size: 0.9em; 36 | letter-spacing: 0.1em; 37 | margin: 0; 38 | text-transform: uppercase; 39 | } 40 | .feature-image { 41 | padding: 0%; 42 | .post-link { 43 | color: $feature-image-text-color; 44 | } 45 | header { 46 | color: $feature-image-text-color; 47 | background-size: $feature-image-size; 48 | margin-bottom: 0; 49 | padding: $padding-large/2.5 $padding-large; 50 | .meta { 51 | color: rgba($feature-image-text-color, .7); 52 | } 53 | } 54 | .post-content { 55 | @extend %padding-regular; 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /_sass/layouts/_search.scss: -------------------------------------------------------------------------------- 1 | .search { 2 | h1, h2, h3, h4, h5 { 3 | margin-bottom: 0; 4 | } 5 | a.search-link { 6 | &:hover { 7 | text-decoration: none; 8 | color: $text-color; 9 | } 10 | } 11 | #not-found { 12 | text-align: center; 13 | font-weight: bold; 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /_sass/layouts/_tags.scss: -------------------------------------------------------------------------------- 1 | .tag-title { 2 | color: $tags-color; 3 | margin-bottom: 0; 4 | } 5 | .tagged-post { 6 | .title { 7 | margin-top: 0; 8 | margin-bottom: 0; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /_sass/type-theme.scss: -------------------------------------------------------------------------------- 1 | // External 2 | @import 'external/reset'; 3 | @import 'external/syntax'; 4 | 5 | // Base 6 | @import 'base/variables'; 7 | @import 'base/global'; 8 | @import 'base/utility'; 9 | 10 | // Posts 11 | @import 'layouts/posts'; 12 | @import 'layouts/index'; 13 | @import 'layouts/tags'; 14 | @import 'layouts/search'; 15 | 16 | // Partials 17 | @import 'includes/header'; 18 | @import 'includes/footer'; 19 | @import 'includes/tag_list'; 20 | @import 'includes/post_nav'; 21 | -------------------------------------------------------------------------------- /about.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: About 4 | permalink: /about/ 5 | feature-img: "assets/img/sample_feature_img_2.png" 6 | --- 7 | 8 | Type Theme is a free and open-source theme for [Jekyll](http://jekyllrb.com/), licensed under the MIT License. 9 | 10 | Head over to the [theme's documentation](https://rohanchandra.github.io/project/type/) for much more information about Type Theme or to install this theme on your own Jekyll site. 11 | 12 | This file is an example of a page in Jekyll, that automatically shows up in the header navigation, you can delete or modify this file freely. 13 | -------------------------------------------------------------------------------- /assets/css/main.scss: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | @import "type-theme"; 5 | -------------------------------------------------------------------------------- /assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohanchandra/type-theme/c6ec5a69ff7dfe2df193be08515193c72bd4a55d/assets/favicon.ico -------------------------------------------------------------------------------- /assets/img/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohanchandra/type-theme/c6ec5a69ff7dfe2df193be08515193c72bd4a55d/assets/img/avatar.png -------------------------------------------------------------------------------- /assets/img/sample_feature_img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohanchandra/type-theme/c6ec5a69ff7dfe2df193be08515193c72bd4a55d/assets/img/sample_feature_img.png -------------------------------------------------------------------------------- /assets/img/sample_feature_img_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohanchandra/type-theme/c6ec5a69ff7dfe2df193be08515193c72bd4a55d/assets/img/sample_feature_img_2.png -------------------------------------------------------------------------------- /assets/img/sample_feature_img_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohanchandra/type-theme/c6ec5a69ff7dfe2df193be08515193c72bd4a55d/assets/img/sample_feature_img_3.png -------------------------------------------------------------------------------- /assets/js/katex_init.js: -------------------------------------------------------------------------------- 1 | const elements = [...document.getElementsByTagName('script')]; 2 | const mathElements = elements.filter((elem) => elem.type.includes('math/tex')); 3 | 4 | for (let element of mathElements) { 5 | // Regex needed to workaround the conflict between Kramdown and KaTeX. 6 | // See: https://github.com/rohanchandra/type-theme/issues/47 7 | const textToRender = (element.innerText || element.textContent).replace(/%.*/g, ''); 8 | const katexElement = document.createElement('span'); 9 | const isDisplayMode = element.type.includes('mode=display'); 10 | katexElement.className = isDisplayMode ? "math-display" : "math-inline"; 11 | katex.render(textToRender, katexElement, { displayMode: isDisplayMode }); 12 | element.parentNode.insertBefore(katexElement, element); 13 | } -------------------------------------------------------------------------------- /assets/js/search.js: -------------------------------------------------------------------------------- 1 | { 2 | const SEARCH_BOX_ID = "search-box"; 3 | const NO_RESULTS_MESSAGE_ID = "not-found"; 4 | const SEARCH_RESULTS_CONTAINER_ID = "search-results"; 5 | const QUERY_VARIABLE_URL_STRING = "query"; 6 | 7 | const extractUrlQueryParameter = (fallback = '') => { 8 | const urlSearchParams = new URLSearchParams(window.location.search); 9 | const queryParameter = urlSearchParams.get(QUERY_VARIABLE_URL_STRING); 10 | return queryParameter === null ? fallback : queryParameter; 11 | } 12 | 13 | const setSearchBoxValue = (searchBoxValue) => { 14 | document 15 | .getElementById(SEARCH_BOX_ID) 16 | .setAttribute("value", searchBoxValue); 17 | } 18 | 19 | const showNoResultsMessage = () => { 20 | document 21 | .getElementById(NO_RESULTS_MESSAGE_ID) 22 | .style 23 | .display = "block"; 24 | } 25 | 26 | const setSearchResultsHtml = (innerHtml) => { 27 | document 28 | .getElementById(SEARCH_RESULTS_CONTAINER_ID) 29 | .innerHTML = innerHtml; 30 | } 31 | 32 | const createPostListingHtml = (postItem) => ` 33 |

    34 | ${postItem.title} 35 |

    36 | 37 |
    38 | ${postItem.date} 39 |
    40 | 41 |

    42 | ${postItem.content.substring(0, 150)}... 43 |

    44 | `; 45 | 46 | const displaySearchResults = (results) => { 47 | setSearchResultsHtml( 48 | results 49 | .map(result => createPostListingHtml(window.store[result.ref])) 50 | .join('') 51 | ); 52 | } 53 | 54 | const buildLunrIndex = () => { 55 | return lunr(function () { 56 | this.field("id"); 57 | this.field("title", { boost: 10 }); 58 | this.field("author"); 59 | this.field("category"); 60 | this.field("content"); 61 | for (let key in window.store) { 62 | const postJson = window.store[key]; 63 | this.add({ 64 | "id": key, 65 | "title": postJson.title, 66 | "author": postJson.author, 67 | "category": postJson.category, 68 | "content": postJson.content 69 | }); 70 | } 71 | }); 72 | } 73 | 74 | const searchFromUrl = () => { 75 | const searchTerm = extractUrlQueryParameter(); 76 | setSearchBoxValue(searchTerm); 77 | const lunrIndex = buildLunrIndex(); 78 | const results = lunrIndex.search(searchTerm); 79 | results.length === 0 ? showNoResultsMessage() : displaySearchResults(results); 80 | } 81 | 82 | searchFromUrl(); 83 | }; -------------------------------------------------------------------------------- /feed.xml: -------------------------------------------------------------------------------- 1 | --- 2 | layout: null 3 | --- 4 | 5 | 6 | 7 | {{ site.theme_settings.title | xml_escape }} 8 | 9 | {{ site.url }}{{ site.baseurl }}/ 10 | {{ site.theme_settings.description | xml_escape }} 11 | {{ site.time | date_to_rfc822 }} 12 | {% for post in site.posts limit:15 %} 13 | 14 | {{ post.title | xml_escape }} 15 | {{ post.url | relative_url }} 16 | {{ post.url | relative_url }} 17 | {{ post.content | xml_escape }} 18 | {{ post.date | date_to_rfc822 }} 19 | 20 | {% endfor %} 21 | 22 | 23 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | --- 4 | -------------------------------------------------------------------------------- /search.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: Search 4 | hide: true 5 | --- 6 | 7 |
    8 |
    9 | 12 |
    13 | 14 | 15 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /tags.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: tags 3 | title: Tags 4 | hide: true 5 | --- --------------------------------------------------------------------------------