You signed in with another tab or window.Reload to refresh your session.You signed out in another tab or window.Reload to refresh your session.You switched accounts on another tab or window.Reload to refresh your session.Dismiss alert
Video embeds are responsive and scale with the width of the main content block with the help of[FitVids](http://fitvidsjs.com/).
11
11
12
-
Not sure if this only effects Kramdown or if it's an issue with Markdown in general. But adding YouTube video embeds causes errors when building your Jekyll site. To fix add a space between the`<iframe>` tags and remove`allowfullscreen`. Example below:
Copy file name to clipboardExpand all lines: _posts/2013-10-26-background-image.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,10 +9,10 @@ image:
9
9
10
10
Here be a sample post with a custom background image. To utilize this "feature" just add the following YAML to a post's front matter.
11
11
12
-
{% highlightyaml %}
12
+
```yaml
13
13
image:
14
14
background:filename.png
15
-
{% endhighlight %}
15
+
```
16
16
17
17
This little bit of YAML makes the assumption that your background image asset is in the`/images` folder. If you place it somewhere else or are hotlinking from the web, just include the full http(s):// URL. Either way you should have a background image that is tiled.
Copy file name to clipboardExpand all lines: theme-setup/index.md
+18-24Lines changed: 18 additions & 24 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -46,17 +46,17 @@ The preferred method for running Jekyll is with `bundle exec`, but if you're wil
46
46
>
47
47
>However, this is unreliable and is the source of considerable pain. Even if it looks like it works, it may not work in the future or on another machine.
48
48
49
-
{% highlight text %}
49
+
```bash
50
50
bundleexec jekyll build
51
51
52
52
bundleexec jekyll serve
53
-
{% endhighlight %}
53
+
```
54
54
55
55
---
56
56
57
57
##Folder Structure
58
58
59
-
{% highlightbash %}
59
+
```bash
60
60
hpstr-jekyll-theme/
61
61
├── _includes
62
62
| ├── browser-upgrade.html# prompt to upgrade browser on < IE8
@@ -83,7 +83,7 @@ hpstr-jekyll-theme/
83
83
├── posts/# all posts
84
84
├── tags/# all posts grouped by tag
85
85
└── index.html# home page with pagination
86
-
{% endhighlight %}
86
+
```
87
87
88
88
---
89
89
@@ -95,17 +95,17 @@ Most of the variables found here are used in the .html files found in `_includes
95
95
96
96
Create a[Disqus](http://disqus.com) account and change`disqus_shortname` in`_config.yml` to the Disqus*shortname* you just setup. By default comments appear on all post and pages if you assigned a shortname. To disable commenting on a post or page, add the following to its YAML Front Matter:
97
97
98
-
{% highlightyaml %}
98
+
```yaml
99
99
comments:false
100
-
{% endhighlight %}
100
+
```
101
101
102
102
### Social Share Links
103
103
104
104
To disable Facebook, Twitter, and Google+ share links on a post or page, add the following to its front matter:
105
105
106
-
{% highlightyaml %}
106
+
```yaml
107
107
share:false
108
-
{% endhighlight %}
108
+
```
109
109
110
110
### Owner/Author Information
111
111
@@ -119,13 +119,13 @@ Your Google Analytics ID goes here along with meta tags for [Google Webmaster To
119
119
120
120
To add additional links in the drop down menu edit `_data/navigation.yml`. Use the following format to set the URL and title for as many links as you'd like. *External links will open in a new window.*
121
121
122
-
{% highlightyaml %}
122
+
```yaml
123
123
- title: Portfolio
124
124
url: /portfolio/
125
125
126
126
- title: Made Mistakes
127
127
url: http://mademistakes.com
128
-
{% endhighlight %}
128
+
```
129
129
130
130
---
131
131
@@ -151,27 +151,27 @@ A good rule of thumb is to keep feature images nice and wide so you don't push t
151
151
152
152
The two layouts make the assumption that the feature images live in the *images* folder. To add a feature image to a post or page just include the filename in the front matter like so.
153
153
154
-
{% highlightyaml %}
154
+
```yaml
155
155
image:
156
156
feature: feature-image-filename.jpg
157
157
thumb: thumbnail-image.jpg #keep it square 200x200 px is good
158
-
{% endhighlight %}
158
+
```
159
159
160
160
If you want to apply attribution to a feature image use the following YAML front matter on posts or pages. Image credits appear directly below the feature image with a link back to the original source.
161
161
162
-
{% highlightyaml %}
162
+
```yaml
163
163
image:
164
164
feature: feature-image-filename.jpg
165
165
credit: Michael Rose #name of the person or site you want to credit
166
166
creditlink: http://mademistakes.com #url to their site or licensing
167
-
{% endhighlight %}
167
+
```
168
168
169
169
By default the `<div>` containing feature images is set to have a minimum height of 400px with CSS. Anything taller is hidden with an `overflow:hidden` declaration. You can customize the height of the homepage feature image and those appearing on posts/pages by modifying the following variables in `/_sass/_variables.scss`.
170
170
171
-
{% highlight sass %}
171
+
```scss
172
172
$feature-image-height: 400px; // min 150px recommended
173
173
$front-page-feature-image-height: 400px; // min 150px recommended
174
-
{% endhighlight %}
174
+
```
175
175
176
176
#### Post/Page Thumbnails for OG and Twitter Cards
177
177
@@ -185,12 +185,6 @@ Here's an example of what a tweet to your site could look like if you activate T
185
185
186
186
Video embeds are responsive and scale with the width of the main content block with the help of [FitVids](http://fitvidsjs.com/).
187
187
188
-
Not sure if this only effects Kramdown or if it's an issue with Markdown in general. But adding YouTube video embeds causes errors when building your Jekyll site. To fix add a space between the`<iframe>` tags and remove`allowfullscreen`. Example below:
Twitter cards make it possible to attach images and post summaries to Tweets that link to your content. Summary Card meta tags have been added to `head.html` to support this, you just need to [validate and apply your domain](https://dev.twitter.com/docs/cards) to turn it on.
@@ -209,9 +203,9 @@ For example if you wanted a red background instead of white you'd change `$bodyc
209
203
210
204
To modify the site's JavaScript files I setup a Grunt build script to lint/concatenate/minify all scripts into `scripts.min.js`. [Install Node.js](http://nodejs.org/), then [install Grunt](http://gruntjs.com/getting-started), and then finally install the dependencies for the theme contained in `package.json`:
211
205
212
-
{% highlightbash %}
206
+
```bash
213
207
npm install
214
-
{% endhighlight %}
208
+
```
215
209
216
210
From the theme's root, use `grunt` to concatenate JavaScript files and optimize `.jpg`, `.png` and `.svg` files in the `images/` folder.