jekyll-theme-type 1.0 → 1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 56cc45ff6a154eed2763e8083b1396fe147ba40f
-  data.tar.gz: 3e8b739efcab4022186c0d236b32d02a7e026e78
+  metadata.gz: a887f9c28935122ea7323b0c1c6b3da01271e277
+  data.tar.gz: d3b5750a6bb40c7b9f0a2900e185176b18204331
 SHA512:
-  metadata.gz: ec1641b4f379afefb5979d8b606d980c2c5b696c6b25ad28fc9dfc14a39cb0732b0efbebb03b5f0e8c2d9788e53a8661b3ccd1f37b7219f426e158ebb605c4d7
-  data.tar.gz: 6ec5024b72857dffbffc0ff347382a622747fb1f720bbc88076147429f567631fba13cf8b6a039a281f61367bba7629235892c463bd4be2ead501319cda769f2
+  metadata.gz: 366a9adf069be4eb262ffe8b18a021fb909057335610978d35a2f67d7b0fd440e2974ce3960f58302c39f00840d77108db7c9ad9f7a5f91d21f4886a410f8d15
+  data.tar.gz: b46f93b306d3e5069a0f9f6a76e97b85468cb9700b03ec56c06570a6f83cb174985ea10620eb8b25064247d1a807bb8865df41a168842ac02fc1cb71c50cf772

data/README.md

@@ -1,14 +1,220 @@
 # Type Theme
 
-![Default Type Theme blog](https://cloud.githubusercontent.com/assets/816965/5142407/19742e48-71d6-11e4-8d9d-fdfe010784f0.png)
+![Default Type Theme blog](https://user-images.githubusercontent.com/816965/30518919-d5978024-9bcd-11e7-81b3-3dd07e99a1f9.png)
 
-A free and open-source [Jekyll](http://jekyllrb.com) theme. Great for blogs and easy to customize.
-
-## Get Started
+A free and open-source [Jekyll](https://jekyllrb.com) theme. Great for blogs and easy to customize.
 
 [Demo](https://rohanchandra.github.io/type-theme/)
 
-[Using Type](https://rohanchandra.github.io/project/type/)
+## Usage
+
+1. Fork and clone the [Type Theme repo](https://github.com/rohanchandra/type-theme): `git clone https://github.com/rohanchandra/type-theme`
+2. [Install Jekyll](https://jekyllrb.com/docs/installation/): `gem install jekyll`
+3. Install the theme's dependencies: `bundle install`
+4. Customize the theme (see below)
+5. Run the Jekyll server: `jekyll serve`
+
+## Customizing Type Theme
+
+Open `_config.yml` in a text editor to change most of the blog's settings.
+
+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:
+
+```
+theme:
+  title: Type Theme
+  avatar:
+  gravatar:
+```
+
+Notice the avatar variable is left intentionally blank.
+
+Below is a summary of the configuration options in Type Theme.
+
+### Site configuration
+The most common configurations, included here for guidance, are:
+
+Jekyll website *without* a subpath (such as a GitHub Pages website for a given username):
+
+```
+# SITE CONFIGURATION
+baseurl: ""
+url: "https://username.github.io"
+```
+
+Jekyll website *with* subpath (like the Type Theme demo page):
+
+```
+# SITE CONFIGURATION
+baseurl: "/sub-directory"
+url: "https://username.github.io/"
+```
+
+Please configure this in `_config.yml` before using the theme.
+
+### Meta
+
+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.
+
+Change these variables in `_config.yml`:
+
+| Variable | Example | Description | Optional |
+|-------------|----------------------------------|--------------------------------------------------------------------------------------------------------------------------------|----------|
+| title | My Jekyll Blog | Name of website | Yes |
+| avatar | assets/img/avatar.png | Path of avatar image, to be displayed in the theme's header | Yes |
+| 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 |
+| description | My blog posts | Short description, primarily used by search engines | Yes |
+
+### Header and footer text
+
+Change these variables in `_config.yml`:
+
+
+| Variable | Example | Description | Optional |
+|---------------------------|------------------------------|-------------------------------------------------------------------------|----------|
+| header_text | Welcome to my Jekyll blog | HTML (shown below the navigation) with a background colour for emphasis | Yes |
+| header_text_feature_image | assets/img/sample_feature_img_3.png | Background image for the header text | Yes |
+| footer_text | Copyright 2014 | HTML (shown at end of the site) with lighter text | Yes |
+
+### Icons
+
+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:
+
+
+| Variable | Example | Description | Optional |
+|----------------|-------------------------------------------------|--------------------------------------------------------|----------|
+| rss | true | Takes boolean value (true/false) to show RSS feed icon | Yes |
+| email_address | type@example.com | Email address | Yes |
+| linkedin | https://www.linkedin.com/in/FirstLast | Full URL to profile on LinkedIn | Yes |
+| stack_exchange | https://stackoverflow.com/users/0000/first-last | Full URL to profile on Stack Exchange | Yes |
+
+### Scripts
+
+Change these variables in `_config.yml`:
+
+
+| Variable | Example | Description | Optional |
+|------------------|--------------|-------------------------------------------------------------------------------------------------------------------------------------|----------|
+| google_analytics | UA-123456-01 | Google Analytics [tracking ID](https://support.google.com/analytics/answer/1032385?hl=en) | Yes |
+| disqus_shortname | shortname | Disqus [shortname](https://help.disqus.com/customer/portal/articles/466208-what-s-a-shortname-) | Yes |
+| katex | true | Takes boolean value (true/false) to conditionally load [KaTeX](https://khan.github.io/KaTeX/) scripts required for math typesetting | Yes |
+
+Scripts listed here are only loaded if you provide a value in the `_config.yml` file.
+
+### Localization strings
+
+Change localization string variables in `_config.yml`.
+
+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.
+
+### Colours, typography, padding
+
+![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)
+
+
+| Variable | Example | Description | Optional |
+|--------------|----------------------------|--------------------------------------|--------------------------------------------------------------|
+| google_fonts | "Playfair+Display:400,700\ | PT+Sans:400,700,700italic,400italic" | [Google Fonts](https://www.google.com/fonts) to load for use |
+
+Navigate to the `_sass > base` directory and open `_variables.scss` to change colours, typography and padding used in the theme with CSS.
+
+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:
+
+```
+// Typography
+$font-family-main: 'PT Sans', Helvetica, Arial, sans-serif;
+$font-family-headings: 'Playfair Display', Helvetica, Arial, sans-serif;
+```
+
+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`.
+
+### Favicon
+
+To change your favicon, usually displayed in the browser, place an ICO file named `favicon.ico` in the root directory of your blog.
+
+## Posts and pages in Type Theme
+Please refer to the [Jekyll docs for writing posts](https://jekyllrb.com/docs/posts/). Non-standard features are documented below.
+
+### Math typesetting
+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.
+
+For inline math typesetting, type your math expression on the *same line* as your content. For example:
+
+```
+Type math within a sentence $$2x^2 + x + c$$ to display inline
+```
+
+For display math typesetting, type your math expression on a *new line*. For example:
+
+```
+$$
+  \bar{y} = {1 \over n} \sum_{i = 1}^{n}y_i
+$$
+```
+
+Type Theme makes use for [KaTeX](https://khan.github.io/KaTeX/) for typesetting.
+
+### Feature images
+
+![Posts with geometric feature images](https://cloud.githubusercontent.com/assets/816965/5142406/19726478-71d6-11e4-8111-94f788b0e44d.png)
+
+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"`.
+
+For example:
+
+```
+---
+layout: post
+title: Hello World
+feature-img: "assets/img/sample_feature_img.png"
+---
+```
+
+### Hiding pages from navigation
+
+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).
+
+For example:
+
+```
+---
+layout: page
+title: "Error 404: Page not found"
+permalink: /404.html
+hide: true
+---
+```
+
+### Tags
+
+Post tags should be placed between `[]` in your post metadata. Seperate each tag with a comma.
+
+For example:
+
+```
+---
+layout: post
+title: Markdown and HTML
+tags: [sample, markdown, html]
+---
+```
+
+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`.
+
+### Subtitles
+A subtitle can be displayed below your title on permalink post pages.
+
+To enable this feature, add `subtitle` to your post metadata.
+
+For example:
+
+```
+---
+layout: post
+title: "This is a title"
+subtitle: "This is a subtitle"
+---
+```
 
 ## License
-The MIT License (MIT)
+[The MIT License (MIT)](https://github.com/rohanchandra/type-theme/blob/master/LICENSE)

data/_includes/disqus.html

@@ -7,4 +7,4 @@
 		(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
 	})();
 </script>
-<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+<noscript>{{ site.theme_settings.str_javascript_required_disqus }}</noscript>

data/_includes/head.html

@@ -3,7 +3,6 @@
 	<title>{% if page.title %}{{ page.title }} |{% endif %} {{ site.theme_settings.title }}</title>
 	<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.theme_settings.description }}{% endif %}">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
-	<meta http-equiv="X-Frame-Options" content="sameorigin">
 
 	<!-- CSS -->
 	<link rel="stylesheet" href="{{ "/assets/css/main.css" | prepend: site.baseurl }}">
@@ -27,8 +26,8 @@
 
 	<!-- KaTeX -->
 	{% if site.theme_settings.katex %}
-	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css">
-	<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js"></script>
+	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.8.3/katex.min.css">
+	<script src="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.8.3/katex.min.js"></script>
 	{% endif %}
 
 	<!-- Google Analytics -->

data/_includes/header.html

@@ -6,7 +6,7 @@
 		</a>
 		{% elsif site.theme_settings.avatar %}
 		<a href="{{ site.baseurl }}/">
-			<img class="avatar" src="{{ site.baseurl }}/{{ site.theme_settings.avatar }}" alt="{{site.theme_settings.avatar}}"/>
+			<img class="avatar" src="{{ site.baseurl }}/{{ site.theme_settings.avatar }}" alt=""/>
 		</a>
 		{% endif %}
 		<h1 class="site-title">

data/_includes/icons.html

@@ -134,6 +134,14 @@
 </li>
 {% endif %}
 
+{% if site.theme_settings.gitlab %}
+<li>
+	<a href="https://gitlab.com/{{ site.theme_settings.gitlab }}" title="{{ site.theme_settings.str_follow_on }} Gitlab">
+		<i class="fa fa-fw fa-gitlab"></i>
+	</a>
+</li>
+{% endif %}
+
 {% if site.theme_settings.twitter %}
 <li>
 	<a href="https://twitter.com/{{ site.theme_settings.twitter }}" title="{{ site.theme_settings.str_follow_on }} Twitter">

data/_includes/post_nav.html

@@ -0,0 +1,18 @@
+<div id="post-nav">
+  {% if page.previous.url %}
+  <div id="previous-post" class="post-nav-post">
+      <p>{{ site.theme_settings.str_previous_post }}</p>
+      <a href="{{ site.baseurl }}{{ page.previous.url }}">
+        {{ page.previous.title }}
+      </a>
+  </div>
+  {% endif %}
+  {% if page.next.url %}
+  <div id="next-post" class="post-nav-post">
+      <p>{{ site.theme_settings.str_next_post }}</p>
+      <a href="{{ site.baseurl }}{{ page.next.url }}">
+        {{ page.next.title }}
+      </a>
+  </div>
+  {% endif %}
+</div>

data/_includes/tags_list.html

@@ -0,0 +1,9 @@
+{% if include.tag_count > 0 %}
+<footer>
+  <div class="tags">
+    {% for tag in include.tags %}
+    <a class="tag" href="{{site.baseurl}}/tags#{{tag}}">#{{tag}}</a>
+    {% endfor %}
+  </div>
+</footer>
+{% endif %}

data/_layouts/home.html

@@ -1,6 +1,7 @@
 ---
 layout: default
 ---
+
 <div class="home">
   {% if site.theme_settings.header_text %}
   <div class="call-out"
@@ -37,12 +38,12 @@ layout: default
     {% if paginator.previous_page %}
     <a href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}" class="button" >
       <i class="fa fa-chevron-left"></i>
-      {{ site.theme_settings.str_prev }}
+      {{ site.theme_settings.str_previous_page }}
     </a>
     {% endif %}
     {% if paginator.next_page %}
     <a href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}" class="button" >
-      {{ site.theme_settings.str_next }}
+      {{ site.theme_settings.str_next_page }}
       <i class="fa fa-chevron-right"></i>
     </a>
     {% endif %}

data/_layouts/page.html

@@ -4,6 +4,7 @@ layout: default
 <article {% if page.feature-img %}class="feature-image"{% endif %}>
   <header style="background-image: url('{{ site.baseurl }}/{{ page.feature-img }}')">
     <h1 class="title">{{ page.title }}</h1>
+    {% if page.subtitle %}<h2 class="subtitle">{{ page.subtitle }}</h3>{% endif %}
   </header>
   <section class="post-content">{{ content }}</section>
 </article>

data/_layouts/post.html

@@ -4,36 +4,16 @@ layout: default
 <article {% if page.feature-img %}class="feature-image"{% endif %}>
   <header style="background-image: url('{{ site.baseurl }}/{{ page.feature-img }}')">
     <h1 class="title">{{ page.title }}</h1>
+    {% if page.subtitle %}<h2 class="subtitle">{{ page.subtitle }}</h3>{% endif %}
     <p class="meta">
-    {{ page.date | date: "%B %-d, %Y" }}
-    {% if page.author %} - {{ page.author }}{% endif %}
+      {{ page.date | date: "%B %-d, %Y" }}
+      {% if page.author %} - {{ page.author }}{% endif %}
     </p>
   </header>
   <section class="post-content">{{ content }}</section>
+  {% include tags_list.html tags=page.tags tag_count=page.tags.size %}
 </article>
 
-<!-- Post navigation -->
-{% if site.theme_settings.post_navigation %}
-<div id="post-nav">
-    {% if page.previous.url %}
-    <a id="prev-post" href="{{ site.baseurl }}{{ page.previous.url }}">
-      <span class="page-title">{{ page.previous.title }}</span>
-      <span class="nav-label">
-        <i class="fa fa-chevron-left"></i> {{ site.theme_settings.str_prev }}
-      </span>
-    </a>
-    {% endif %}
-    {% if page.next.url %}
-    <a id="next-post" href="{{ site.baseurl }}{{ page.next.url }}">
-       <span class="page-title">{{ page.next.title }}</span>
-       <span class="nav-label">
-        {{ site.theme_settings.str_next }} <i class="fa fa-chevron-right"></i>
-       </span>
-     </a>
-    {% endif %}
-</div>
-{% endif %}
-
 <!-- Disqus -->
 {% if site.theme_settings.disqus_shortname %}
 <div class="comments">
@@ -41,9 +21,7 @@ layout: default
 </div>
 {% endif %}
 
-<!-- Muut -->
-{% if site.theme_settings.muut_community_name %}
-<div class="comments">
-  {% include muut.html %}
-</div>
-{% endif %}
+<!-- Post navigation -->
+{% if site.theme_settings.post_navigation %}
+  {% include post_nav.html %}
+{% endif %}

data/_sass/base/_utility.scss

@@ -10,10 +10,9 @@
   @media (max-width: 1000px) {
     padding: $padding-small * 1.5 $padding-large / 1.6;
   }
-}
-%link-hover {
-  text-decoration: underline;
-  color: darken($link-color, 15%);
+  @media (max-width: 576px) {
+    padding: $padding-small;
+  }
 }
 // Buttons
 .button {
@@ -23,11 +22,22 @@
   margin: 1em 0;
   padding: 0.5em 0.75em;
 }
-a.button:hover {
-  background: $link-color;
-  border: 1px solid $link-color;
-  color: $background-color;
-  text-decoration: none;
+a.button {
+  @extend .button-link;
+}
+.button-link {
+  &:hover {
+    background: $link-color;
+    border: 1px solid $link-color;
+    color: $background-color;
+    text-decoration: none;
+  }
+}
+.body-link {
+  &:hover {
+    text-decoration: underline;
+    color: darken($link-color, 15%);
+  }
 }
 // States
 .disabled {