Merge branch 'release/1.0.0' into develop

master
Michael Rose 2013-08-24 18:10:17 -04:00
commit 1108fdfd39
39 changed files with 349 additions and 4823 deletions

3
.gitignore vendored
View File

@ -2,4 +2,5 @@ _site
.DS_Store
*.sublime-project
*.sublime-workspace
codekit-config.json
codekit-config.json
node_modules

20
.jshintrc Normal file
View File

@ -0,0 +1,20 @@
{
"bitwise": true,
"browser": true,
"curly": true,
"eqeqeq": true,
"eqnull": true,
"es5": false,
"esnext": true,
"immed": true,
"jquery": true,
"latedef": true,
"newcap": true,
"noarg": true,
"node": true,
"strict": false,
"trailing": false,
"undef": true,
"multistr": true,
"expr": true
}

107
Gruntfile.js Normal file
View File

@ -0,0 +1,107 @@
'use strict';
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
options: {
jshintrc: '.jshintrc'
},
all: [
'Gruntfile.js',
'assets/js/*.js',
'assets/js/plugins/*.js',
'!assets/js/scripts.min.js'
]
},
recess: {
dist: {
options: {
compile: true,
compress: true
},
files: {
'assets/css/main.min.css': [
'assets/less/main.less'
]
}
}
},
uglify: {
dist: {
files: {
'assets/js/scripts.min.js': [
'assets/js/plugins/*.js',
'assets/js/_*.js'
]
}
}
},
imagemin: {
dist: {
options: {
optimizationLevel: 7,
progressive: true
},
files: [{
expand: true,
cwd: 'images/',
src: '{,*/}*.{png,jpg,jpeg}',
dest: 'images/'
}]
}
},
svgmin: {
dist: {
files: [{
expand: true,
cwd: 'images/',
src: '{,*/}*.svg',
dest: 'images/'
}]
}
},
watch: {
less: {
files: [
'assets/less/*.less',
'assets/less/bootstrap/*.less'
],
tasks: ['recess']
},
js: {
files: [
'<%= jshint.all %>'
],
tasks: ['jshint','uglify']
}
},
clean: {
dist: [
'assets/css/main.min.css',
'assets/js/scripts.min.js'
]
}
});
// Load tasks
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-recess');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-svgmin');
// Register tasks
grunt.registerTask('default', [
'clean',
'recess',
'uglify',
'imagemin',
'svgmin'
]);
grunt.registerTask('dev', [
'watch'
]);
};

113
README.md
View File

@ -1,8 +1,115 @@
hpstr-jekyll-theme
==================
# HPSTR RDX Jekyll Theme
Jekyll theme. Documentation soon...
They say three times the charm, so here is another free responsive Jekyll theme for you. I've learned a ton since open sourcing my first two themes [on Github](http://github.com/mmistakes), and wanted to try a few new things this time around. If you've used my previous themes most of this should be familiar territory...
## What HPSTR RDX brings to the table:
* Responsive templates for post, page, and post index `_layouts`. Looks great on mobile, tablet, and desktop devices.
* Gracefully degrads in older browsers. Compatible with Internet Explorer 8+ and all modern browsers.
* Modern and minimal design.
* Sweet animated menu.
* Readable typography to make your words shine.
* Support for large images to call out your favorite posts.
* Comments powered by [Disqus](http://disqus.com) if you choose to enable.
* Simple and clear permalink structure.
* [Open Graph](https://developers.facebook.com/docs/opengraph/) and [Twitter Cards](https://dev.twitter.com/docs/cards) support for a better social sharing experience.
* Simple [custom 404 page]({{ site.url }}/404.html) to get you started.
* Stylesheets for Pygments and Coderay [syntax highlighting]({{ site.url }}/code-highlighting-post/) to make your code examples look snazzy
* Grunt build script for easy theme development
## [Theme Preview](http://mmistakes.github.io/hpstr-jekyll-theme)
![HPSTR RDX Theme Preview screenshot](http://mmistakes.github.io/hpstr-jekyll-theme/images/hpstr-jekyll-theme-preview.jpg)
---
General notes and suggestions for customizing **HPSTR RDX**.
## Basic Setup for a new Jekyll site
1. [Install Jekyll](http://jekyllrb.com) and read through the documentation if you haven't already.
2. Fork the [HPSTR RDX repo](https://github.com/mmistakes/hpstr-rdx-theme/fork)
3. Clone the repo you just forked to your computer.
4. Edit `_config.yml` to personalize your site.
5. Check out the sample posts in `_posts` to see examples for pulling in large feature images, tags, and other YAML data.
6. Read the documentation below for further customization pointers and documentation.
### [Download the Theme](https://github.com/mmistakes/hpstr-jekyll-theme)
**Pro-tip:** Delete the `gh-pages` branch after cloning and start fresh by branching off `master`. There is a bunch of garbage in `gh-pages` used for the theme's demo that I'm guessing you don't want on your site.
{:.notice}
---
## Setup for an Existing Jekyll site
1. Clone the following folders: `_includes`, `_layouts`, `assets`, and `images`.
2. Clone the following files and personalize content as need: `about.md`, `archive.html`, `index.html`, `tags.html`, and `feed.xml`.
3. Set the following variables in your `config.yml` file:
``` yaml
title: Site Title
description: Describe your website here.
disqus_shortname: shortname
url: http://your-website.com
# Owner/author information
owner:
name: Your Name
avatar: avatar.jpg
bio: "Your bio goes here. It shouldn't be super long but a good two sentences or two should suffice."
email: you@email.com
# Social networking links used in footer. Update and remove as you like.
twitter:
facebook:
github:
stackexchange:
linkedin:
instagram:
flickr:
tumblr:
# For Google Authorship https://plus.google.com/authorship
google_plus:
# Analytics and webmaster tools stuff goes here
google_analytics:
google_verify:
# https://ssl.bing.com/webmaster/configure/verify/ownership Option 2 content= goes here
bing_verify:
# Links to include in top navigation
# For external links add external: true
links:
- title: Theme Setup
url: /theme-setup
- title: External Link
url: http://mademistakes.com
external: true
# http://en.wikipedia.org/wiki/List_of_tz_database_time_zones
timezone: America/New_York
future: true
pygments: true
markdown: kramdown
# Amount of posts to show on home page
paginate: 5
```
---
## [More Theme Setup Goodness](http://mmistakes.github.io/hpstr-jekyll-theme/theme-setup/)
To learn more about how to customize the theme, how feature images work, use the Grunt build script, and some other junk, [read up here](http://mmistakes.github.io/hpstr-jekyll-theme/theme-setup/).
---
## Questions?
Having a problem getting something to work or want to know why I setup something in a certain way? Ping me on Twitter [@mmistakes](http://twitter.com/mmistakes) or [file a GitHub Issue](https://github.com/mmistakes/hpstr-jekyll-theme/issues/new). And if you make something cool with this theme feel free to let me know.
---
## License
This theme is free and open source software, distributed under the [GNU General Public License](https://github.com/mmistakes/hpstr-jekyll-theme/blob/master/LICENSE) version 2 or later. So feel free to use this Jekyll theme on your site without linking back to me or including a disclaimer.

View File

@ -34,7 +34,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- For all browsers -->
<link rel="stylesheet" href="{{ site.url }}/assets/css/main.css">
<link rel="stylesheet" href="{{ site.url }}/assets/css/main.min.css">
<!-- Webfonts -->
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic" rel="stylesheet" type="text/css">

View File

@ -17,28 +17,28 @@
{% if site.owner.twitter %}<li>
<a href="http://twitter.com/{{ site.owner.twitter }}"><i class="icon-twitter"></i> Twitter</a>
</li>{% endif %}
{% if site.owner.facebook %}<li>
{% if site.owner.facebook %}<li>
<a href="http://facebook.com/{{ site.owner.facebook }}"><i class="icon-facebook"></i> Facebook</a>
</li>{% endif %}
{% if site.owner.google_plus %}<li>
{% if site.owner.google_plus %}<li>
<a href="{{ site.owner.google_plus }}"><i class="icon-google-plus"></i> Google+</a>
</li>{% endif %}
{% if site.owner.linkedin %}<li>
{% if site.owner.linkedin %}<li>
<a href="http://linkedin.com/in/{{ site.owner.linkedin }}"><i class="icon-linkedin"></i> LinkedIn</a>
</li>{% endif %}
{% if site.owner.github %}<li>
{% if site.owner.github %}<li>
<a href="http://github.com/{{ site.owner.github }}"><i class="icon-github"></i> GitHub</a>
</li>{% endif %}
{% if site.owner.stackexchange %}<li>
{% if site.owner.stackexchange %}<li>
<a href="{{ site.owner.stackexchange }}"><i class="icon-stackexchange"></i> Stackexchange</a>
</li>{% endif %}
{% if site.owner.instagram %}<li>
{% if site.owner.instagram %}<li>
<a href="http://instagram.com/{{ site.owner.instagram }}"><i class="icon-instagram"></i> Instagram</a>
</li>{% endif %}
{% if site.owner.flickr %}<li>
{% if site.owner.flickr %}<li>
<a href="http://www.flickr.com/photos/{{ site.owner.flickr }}"><i class="icon-flickr"></i> Flickr</a>
</li>{% endif %}
{% if site.owner.tumblr %}<li>
{% if site.owner.tumblr %}<li>
<a href="http://{{ site.owner.tumblr }}.tumblr.com"><i class="icon-tumblr"></i> Tumblr</a>
</li>{% endif %}
</ul><!-- /.dl-submenu -->

View File

@ -1,6 +1,6 @@
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="{{ site.url }}/assets/js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="{{ site.url }}/assets/js/main.js"></script>
<script src="{{ site.url }}/assets/js/scripts.min.js"></script>
{% if site.google_analytics %}
<!-- Asynchronous Google Analytics snippet -->
<script>

View File

@ -24,6 +24,7 @@ They say three times the charm, so here is another free responsive Jekyll theme
* [Open Graph](https://developers.facebook.com/docs/opengraph/) and [Twitter Cards](https://dev.twitter.com/docs/cards) support for a better social sharing experience.
* Simple [custom 404 page]({{ site.url }}/404.html) to get you started.
* Stylesheets for Pygments and Coderay [syntax highlighting]({{ site.url }}/code-highlighting-post/) to make your code examples look snazzy
* Grunt build script for easy theme development
<div markdown="0"><a href="{{ site.url }}/theme-setup" class="btn btn-info">Install the Theme</a></div>

File diff suppressed because it is too large Load Diff

30
assets/css/main.min.css vendored Normal file

File diff suppressed because one or more lines are too long

26
assets/js/_main.js Normal file
View File

@ -0,0 +1,26 @@
/*! Plugin options and other jQuery stuff */
// dl-menu options
$(function() {
$( '#dl-menu' ).dlmenu({
animationClasses : { classin : 'dl-animate-in', classout : 'dl-animate-out' }
});
});
// FitVids options
$(function() {
$("article").fitVids();
});
$(".close-menu").click(function () {
$(".menu").toggleClass("disabled");
$(".links").toggleClass("enabled");
});
$(".about").click(function () {
$("#about").css('display','block');
});
$(".close-about").click(function () {
$("#about").css('display','');
});

File diff suppressed because it is too large Load Diff

1
assets/js/scripts.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -136,6 +136,8 @@
backface-visibility: hidden;
@media @medium {
.border-radius(3px,3px,3px,3px);
overflow-y: auto;
max-height: 650px;
}
}
.dl-menu.dl-menu-toggle {

View File

@ -1,7 +1,9 @@
/*!
// ===========================================================
// HPSTR Jekyll Theme
// By: Michael Rose
// ===========================================================
*/
// ROOT =======================================================
// CSS Reset ==================================================

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 62 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 75 KiB

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 123 KiB

After

Width:  |  Height:  |  Size: 117 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 69 KiB

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 24 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 75 KiB

After

Width:  |  Height:  |  Size: 72 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 64 KiB

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 705 B

After

Width:  |  Height:  |  Size: 776 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 38 KiB

25
package.json Normal file
View File

@ -0,0 +1,25 @@
{
"name": "hpstr-theme",
"author": "Michael Rose <michael@mademistakes.com>",
"homepage": "http://mmistakes.github.io/hpstr-jekyll-theme/",
"repository": {
"type": "git",
"url": "git://github.com/mmistakes/hpstr-jekyll-theme.git"
},
"bugs": {
"url": "https://github.com/mmistakes/hpstr-jekyll-theme/issues"
},
"engines": {
"node": ">= 0.10.0"
},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-uglify": "~0.2.2",
"grunt-contrib-watch": "~0.5.2",
"grunt-recess": "~0.3.5",
"grunt-contrib-imagemin": "~0.2.0",
"grunt-svgmin": "~0.2.0"
}
}

View File

@ -37,7 +37,6 @@ General notes and suggestions for customizing **HPSTR RDX**.
{% highlight yaml %}
title: Site Title
description: Describe your website here.
logo: site-logo.png
disqus_shortname: shortname
url: http://your-website.com
@ -104,8 +103,10 @@ hpstr-rdx-theme/
├── assets
| ├── css # preprocessed less styles
| ├── js
| | ├── main.js # concatenated vendor scripts
| | └── vendor # 3rd party scripts
| | ├── _main.js # plugin options
| | ├── scripts.min.js # concatenated and minifed site scripts
| | ├── plugins # plugin scripts
| | └── vendor # jQuery and Modernizr scripts
| └── less
├── images # images for posts and pages
├── _config.yml # Jekyll options
@ -216,42 +217,23 @@ Link blog like a champ by adding `link: http://url-you-want-linked` to a post's
---
## Further Customization
## Theme Development
To make things easier I use LESS to build the theme's stylesheet. If you want to easily skin the colors and fonts, take a look at `variables.less` in `assets/less/`. Just compile `main.less` using your preprocessor of choice and off you go -- I like [CodeKit](http://incident57.com/codekit/) for OS X and [Prepros](http://alphapixels.com/prepros/) for Windows. [Grunt](http://gruntjs.com) and an assortment [Jekyll plugins](http://jekyllrb.com/docs/plugins/) are also an option for converting LESS files into CSS.
If you want to easily skin the themes' colors and fonts, take a look at `variables.less` in `assets/less/` and make the necessary changes to the color and font variables. To make development easier I setup a Grunt build script to compile/minify the LESS files into `main.min.css` and 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 install the dependencies for the theme contained in `package.json`:
{% highlight css %}
// Colors
// --------------------------------------------------
@base-font: 'Lato', Calibri, Arial, sans-serif;
@heading-font: @base-font;
@caption-font: @base-font;
@code-font: monospace;
@alt-font: serif;
// Colors
// --------------------------------------------------
@base-color : #222;
@body-color : #e8e8e8;
@text-color : #222;
@comp-color : spin(@base-color, 180);
@border-color : lighten(@base-color,60);
@white : #fff;
@black : #000;
@link-color : #222;
@primary : @base-color;
@success : #5cb85c;
@warning : #dd8338;
@danger : #C64537;
@info : #308cbc;
{% highlight bash %}
npm install
{% endhighlight %}
From the theme's root, use `grunt` to rebuild the CSS, concatenate JavaScript files, and optimize .jpg, .png, and .svg files in the `images/` folder. You can also use `grunt watch` in combination with `jekyll build --watch` to watch for updates to your LESS and JS files that Grunt will then automatically re-build as you write your code which will in turn auto-generate your Jekyll site when developing locally.
And if the command line isn't your thing (you're using Jekyll so it probably is), [CodeKit](http://incident57.com/codekit/) for OS X and [Prepros](http://alphapixels.com/prepros/) for Windows are great alternatives.
---
## Questions?
Having a problem getting something to work or want to know why I setup something in a certain way? Ping me on Twitter [@mmistakes](http://twitter.com/mmistakes) or [file a GitHub Issue](https://github.com/mmistakes/hpstr-rdx-theme/issues/new). And if you make something cool with this theme feel free to let me know.
Having a problem getting something to work or want to know why I setup something in a certain way? Ping me on Twitter [@mmistakes](http://twitter.com/mmistakes) or [file a GitHub Issue](https://github.com/mmistakes/hpstr-jekyll-theme/issues/new). And if you make something cool with this theme feel free to let me know.
---