diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..d8a17729a --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +*.sublime-* +node_modules \ No newline at end of file diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 000000000..75a496104 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,59 @@ +/*global module:false*/ +module.exports = function(grunt) { + + // Project configuration. + grunt.initConfig({ + shell: { + hexogen: { + command: 'hexo generate', + options: { + execOptions: { + cwd: '_blog_src' + } + } + } + }, + + stylus: { + compile: { + options: { + compress: true + }, + files: { + 'blog/css/style.css': '_blog_src/themes/casper_custom/source/css/style.styl' + } + } + }, + + connect: { + server: { + options: { + port: 4000, + base: '.', + livereload: true + } + } + }, + + watch: { + hexo: { + files: ['_blog_src/_config.yml', '_blog_src/themes/**', '_blog_src/scaffolds/**', '_blog_src/scripts/**', '_blog_src/source/**'], + tasks: ['shell:hexogen'] + }, + livereload: { + options: { livereload: true }, + files: ['blog/**'], + } + } + }); + + // These plugins provide necessary tasks. + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-contrib-connect'); + grunt.loadNpmTasks('grunt-contrib-stylus'); + grunt.loadNpmTasks('grunt-shell'); + + // Default task. + grunt.registerTask('dev', ['shell:hexogen', 'connect', 'watch']); + grunt.registerTask('default', ['shell:hexogen']); +}; diff --git a/README.md b/README.md index 3e2f3c1fc..67b21ce63 100644 --- a/README.md +++ b/README.md @@ -2,3 +2,5 @@ ui-grid.info ============ Website for ui-grid + +[Using the blog system](_blog_src/Blogging.md) \ No newline at end of file diff --git a/_blog_src/.gitignore b/_blog_src/.gitignore new file mode 100644 index 000000000..a7640be62 --- /dev/null +++ b/_blog_src/.gitignore @@ -0,0 +1,7 @@ +.DS_Store +Thumbs.db +db.json +debug.log +node_modules/ +public/ +.deploy/ \ No newline at end of file diff --git a/_blog_src/Blogging.md b/_blog_src/Blogging.md new file mode 100644 index 000000000..b415c6869 --- /dev/null +++ b/_blog_src/Blogging.md @@ -0,0 +1,27 @@ + +# UI-Grid.info Blog + +The "blog" uses [hexo](http://hexo.io) to generate a pretty simple static site. + +## Installing + +To use it you need to install hexo: + + npm install -g hexo@2.8.3 + +Then install dependencies in both the parent and _blog_src directories. This needs to be done bcause hexo's cwd needs to be the blog source directory. + + npm install + cd _blog_src + npm install + +Then go back up and run the dev task: + + cd .. + grund dev + +You'll get a server running on [http://localhost:4000](http://localhost:4000) with auto-watch on the blog directory to rebuild when you change files. + +## Creating Posts + +New posts can be created in `_blog_src/source/_posts` or by running `hexo new` in _blog_src. You can find further documentation on hexo's site: http://hexo.io \ No newline at end of file diff --git a/_blog_src/Gruntfile.js b/_blog_src/Gruntfile.js new file mode 100644 index 000000000..9a1a5447a --- /dev/null +++ b/_blog_src/Gruntfile.js @@ -0,0 +1,54 @@ +/*global module:false*/ +module.exports = function(grunt) { + + // Project configuration. + grunt.initConfig({ + shell: { + hexogen: { + command: 'hexo generate' + } + }, + + stylus: { + compile: { + options: { + compress: true + }, + files: { + 'public/css/style.css': 'themes/landscape/source/css/style.styl' + } + } + }, + + connect: { + server: { + options: { + port: 4000, + base: 'public', + livereload: true + } + } + }, + + watch: { + hexo: { + files: ['_config.yml', 'themes/**', 'scaffolds/**', 'scripts/**', 'source/**'], + tasks: ['shell:hexogen'] + }, + livereload: { + options: { livereload: true }, + files: ['public/**'], + } + } + }); + + // These plugins provide necessary tasks. + grunt.loadNpmTasks('grunt-contrib-watch'); + grunt.loadNpmTasks('grunt-contrib-connect'); + grunt.loadNpmTasks('grunt-contrib-stylus'); + grunt.loadNpmTasks('grunt-shell'); + + // Default task. + grunt.registerTask('dev', ['shell:hexogen', 'connect', 'watch']); + +}; diff --git a/_blog_src/_config.yml b/_blog_src/_config.yml new file mode 100644 index 000000000..c0e000a99 --- /dev/null +++ b/_blog_src/_config.yml @@ -0,0 +1,109 @@ +# Hexo Configuration +## Docs: http://hexo.io/docs/configuration.html +## Source: https://github.com/tommy351/hexo/ + +# Site +# UI-Grid Blog +title: UI Grid +subtitle: An AngularJS data grid +description: "Tips, tricks and news for UI Grid" +author: UI Grid Team +email: uigridteam@gmail.com +language: + +# URL +## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' +url: http://ui-grid.info/blog +root: /blog/ +permalink: :title/ +tag_dir: tags +archive_dir: archives +category_dir: categories +code_dir: downloads/code + +# Directory +source_dir: source +public_dir: ../blog + +# Writing +new_post_name: :title.md # File name of new posts +default_layout: post +auto_spacing: false # Add spaces between asian characters and western characters +titlecase: false # Transform title into titlecase +external_link: true # Open external links in new tab +max_open_file: 100 +multi_thread: true +filename_case: 0 +render_drafts: false +post_asset_folder: false +highlight: + enable: true + line_number: true + tab_replace: + +# Category & Tag +default_category: uncategorized +category_map: +tag_map: + +# Archives +## 2: Enable pagination +## 1: Disable pagination +## 0: Fully Disable +archive: 2 +category: 1 +tag: 1 + +# Server +## Hexo uses Connect as a server +## You can customize the logger format as defined in +## http://www.senchalabs.org/connect/logger.html +port: 4000 +server_ip: 0.0.0.0 +logger: false +logger_format: + +# Date / Time format +## Hexo uses Moment.js to parse and display date +## You can customize the date format as defined in +## http://momentjs.com/docs/#/displaying/format/ +date_format: MMM D YYYY +time_format: H:mm:ss + +# Pagination +## Set per_page to 0 to disable pagination +per_page: 10 +pagination_dir: page + +# Disqus +disqus_shortname: + +# Extensions +## Plugins: https://github.com/tommy351/hexo/wiki/Plugins +## Themes: https://github.com/tommy351/hexo/wiki/Themes +theme: casper_custom +exclude_generator: + +# Deployment +## Docs: http://hexo.io/docs/deployment.html +deploy: + type: + +sitemap: + path: ../sitemap.xml + +# casper theme config +cover: +logo: +bio: + +# Content +excerpt_link: Read More + +# Miscellaneous +rss: + +feed: + type: atom + path: atom.xml + limit: 20 diff --git a/_blog_src/package.json b/_blog_src/package.json new file mode 100644 index 000000000..b35b8ba1d --- /dev/null +++ b/_blog_src/package.json @@ -0,0 +1,12 @@ +{ + "name": "ui-grid.info.blog", + "version": "2.8.3", + "private": true, + "dependencies": { + "hexo-renderer-ejs": "*", + "hexo-renderer-stylus": "0.1.x", + "hexo-renderer-marked": "0.1.x", + "hexo-generator-cherrypick": "https://github.com/c0bra/hexo-generator-cherrypick/tarball/0.0.1", + "hexo-generator-feed": "^0.2.1" + } +} diff --git a/_blog_src/scaffolds/draft.md b/_blog_src/scaffolds/draft.md new file mode 100644 index 000000000..45b1bb754 --- /dev/null +++ b/_blog_src/scaffolds/draft.md @@ -0,0 +1,3 @@ +title: {{ title }} +tags: +--- diff --git a/_blog_src/scaffolds/page.md b/_blog_src/scaffolds/page.md new file mode 100644 index 000000000..f484b7615 --- /dev/null +++ b/_blog_src/scaffolds/page.md @@ -0,0 +1,3 @@ +title: {{ title }} +date: {{ date }} +--- diff --git a/_blog_src/scaffolds/photo.md b/_blog_src/scaffolds/photo.md new file mode 100644 index 000000000..5aba0db62 --- /dev/null +++ b/_blog_src/scaffolds/photo.md @@ -0,0 +1,5 @@ +layout: {{ layout }} +title: {{ title }} +date: {{ date }} +tags: +--- diff --git a/_blog_src/scaffolds/post.md b/_blog_src/scaffolds/post.md new file mode 100644 index 000000000..c590d7a77 --- /dev/null +++ b/_blog_src/scaffolds/post.md @@ -0,0 +1,4 @@ +title: {{ title }} +date: {{ date }} +tags: +--- diff --git a/_blog_src/source/_posts/6_ways_to_take_control_of_how_your_grid_data_is_displayed.md b/_blog_src/source/_posts/6_ways_to_take_control_of_how_your_grid_data_is_displayed.md new file mode 100644 index 000000000..add58ae69 --- /dev/null +++ b/_blog_src/source/_posts/6_ways_to_take_control_of_how_your_grid_data_is_displayed.md @@ -0,0 +1,132 @@ +author: Brian +title: 6 Ways to Take Control of How Your Grid Data is Displayed +date: 2015-02-27 10:55:01 +tags: + - customize + - display +--- + + + +Getting your data displayed just right can be a huge pain. + +You might just want to format some numbers, or you might want to embed something complex like a chart or custom directive. + +In this post outline six different methods you can use to get your data **just the way you want it**: + +* Bindings +* Cell Filters +* Cell Templates + * Links + * Buttons + * Custom directives + +## Bindings + +UI Grid columns can be bound to any sort of Angular expression, as well as property names that would normally break an expression: + +{% codeblock lang:js %} +var columnDefs = [ + { field: 'name' }, + { field: 'addresses[0]' }, + + /* + Yes, you can use hyphens, plus signs, etc. + + Normally something like {% raw %}{{ row.entity.first-name }}{% endraw %} would + bomb but UI Grid pre-processes your bindings to make sure they work correctly. + */ + { field: 'first-name' }, + + /* Function expressions work too */ + { field: 'getCurrency()' }, + { field: 'transformValue(row.entity.myField)' }, + + /* Plain old functions are also an option */ + { field: function () { return this.address.zip; } } +]; +{% endcodeblock %} + +## Cell Filters + +Cell filters can transform the displayed value for a column while leaving the model intact. In this plunker the amount column contains floating point values, but we only want to display the integer part. A simple cellFilter that uses `.toFixed()` will alter the displayed value the way we want. + +{% iframe http://embed.plnkr.co/BjLqXGiUI8nQFwvijduh/preview %} + +### Passing Arguments ### + +In the third column I am using two different fields. The column itself is bound to the same field as the second column, but on the filter I am passing the scope like so: `cellFilter: 'currencyFilter:this'`. Using the `this` argument on your filter will pass the scope. + +Then I can lookup the currency symbol I want using the currency field from the row. + +If you double-click a cell in the Currency column you'll see that the raw value is still available to be edited. Cell filters only change your displayed value! + +## Cell Templates ## + +Column definitions take a `cellTemplate` argument you can use to give your cells a custom template. You can specify it a few different ways, with a url (relative or absolute), an Angular template ID, a string/Angular element, or a promise. + +{% codeblock lang:js %} +var columnDefs = [ + { field: 'name', cellTemplate: 'name-template.html' }, + { field: 'name', cellTemplate: 'myTemplateId' }, + { field: 'name', cellTemplate: $.get('url-to-your-template.html') } +]; +{% endcodeblock %} + +### Bindings in Cell Templates ### + +There are a couple options for your binding your row's data in your template. You can access the `row` object which is in the local scope; `row.entity` will contain the reference to your object, so if you want the "name" field, you can bind like so: {{ row.entity.name }}. + +If you've *already* defined your binding in your column definition you can use one of UI Grid's placeholders: `{% raw %}{{ COL_FIELD }}{% endraw %}`. UI Grid will automatically replace COL_FIELD with the appropriate binding. If you need to two-way bind to your row, like when you're using the edit feature, you'll need to use the `MODEL_COL_FIELD` placeholder. + +{% codeblock lang:js %} +var columnDefs = [ + { + field: 'image_url', + cellTemplate: '
' + } +]; +{% endcodeblock %} + +### Links and Buttons ### + +Links are simple, just use regular old HTML. Wrapping your cell in an element using the class `.ui-grid-cell-contents` will apply the proper CSS settings like padding, overflow, etc., and make sure your cell fits in its space nicely. + +{% codeblock lang:js %} +var columnDefs = [ + { + field: 'email', + cellTemplate: '
Send E-Mail
' + } +]; +{% endcodeblock %} + +In the plunker below I'm using a basic cellTemplate to bind both the first and last name fields into one column. On the second column I'm using a simple link like above (note: none of these emails are real). + +On the third one, I'm using a template that's referenced in index.html. If you check the bottom of that file you'll see the template inside a ` + + + + +<% if (theme.google_analytics) { %> + +<% } %> +<% if (config.disqus_shortname){ %> + +<% } %> +<% if (theme.fancybox){ %> + + + +<% } %> + diff --git a/_blog_src/themes/casper_custom/layout/casper/footer.ejs b/_blog_src/themes/casper_custom/layout/casper/footer.ejs new file mode 100644 index 000000000..842f5d805 --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/casper/footer.ejs @@ -0,0 +1,9 @@ + + diff --git a/_blog_src/themes/casper_custom/layout/casper/head.ejs b/_blog_src/themes/casper_custom/layout/casper/head.ejs new file mode 100644 index 000000000..e62eb44f3 --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/casper/head.ejs @@ -0,0 +1,48 @@ +<% + var title = page.title; + + if (is_archive()){ + title = 'Archives'; + + if (is_month()){ + title += ': ' + page.year + '/' + page.month; + } else if (is_year()){ + title += ': ' + page.year; + } + } else if (is_category()){ + title = 'Category: ' + page.category; + } else if (is_tag()){ + title = 'Tag: ' + page.tag; + } +%> + + + + <% if (title){ %><%= title %> | <% } %><%= config.title %> + + + + + + + + + + + <% if (config.rss) { %> + + <% } %> + <% if (config.feed && config.feed.type == 'atom') { %> + + <% } %> + <% if (config.feed && config.feed.type == 'rss') { %> + + <% } %> + + <% if (config.cloudfrontanalytics) { %> + + <% } %> + diff --git a/_blog_src/themes/casper_custom/layout/casper/header.ejs b/_blog_src/themes/casper_custom/layout/casper/header.ejs new file mode 100644 index 000000000..558dc1c4d --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/casper/header.ejs @@ -0,0 +1,9 @@ +
style="background-image: url(<%- theme.cover %>)" <% } %>> +
+
+ <% if (theme.logo) { %> <% } %> +

<%- config.title %>

+

<%- config.subtitle %>

+
+
+
\ No newline at end of file diff --git a/_blog_src/themes/casper_custom/layout/casper/index.ejs b/_blog_src/themes/casper_custom/layout/casper/index.ejs new file mode 100644 index 000000000..ea70accb0 --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/casper/index.ejs @@ -0,0 +1,30 @@ + +
+ <% page.posts.each(function(post) { %> +
+
+ <%- partial('post/meta', {post: post}) %> +

<%- post.title %>

+
+
+

+ <% if (post.excerpt){ %> + <%- post.excerpt %> + <% } else { %> + <%- post.content.replace(/<(?:.|\n)*?>/gm, '').substr(0, 220) %> + <% } %> +

+ <% if (theme.excerpt_link) { %> +

+ <%= theme.excerpt_link %>... +

+ <% } %> +
+
+ <% }); %> + +
diff --git a/_blog_src/themes/casper_custom/layout/casper/post.ejs b/_blog_src/themes/casper_custom/layout/casper/post.ejs new file mode 100644 index 000000000..0c75d7937 --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/casper/post.ejs @@ -0,0 +1,17 @@ + +<% permalink = config.url + config.root + post.path %> +
+
+ <%- partial('post/meta') %> +

<%- post.title %>

+
+ <%- post.content %> +
+ +
+ <%- partial('post/navigation') %> + <%- partial('post/comments') %> +
diff --git a/_blog_src/themes/casper_custom/layout/casper/post/author.ejs b/_blog_src/themes/casper_custom/layout/casper/post/author.ejs new file mode 100644 index 000000000..5fe2f0036 --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/casper/post/author.ejs @@ -0,0 +1,4 @@ +
+

<%- post.author || config.author %>

+

<%- config.bio %>

+
\ No newline at end of file diff --git a/_blog_src/themes/casper_custom/layout/casper/post/comments.ejs b/_blog_src/themes/casper_custom/layout/casper/post/comments.ejs new file mode 100644 index 000000000..9031e180d --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/casper/post/comments.ejs @@ -0,0 +1,8 @@ +<% if(config.disqus_shortname) { %> +
+

Comments

+
+ +
+
+<% } %> \ No newline at end of file diff --git a/_blog_src/themes/casper_custom/layout/casper/post/meta.ejs b/_blog_src/themes/casper_custom/layout/casper/post/meta.ejs new file mode 100644 index 000000000..be1843df4 --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/casper/post/meta.ejs @@ -0,0 +1,11 @@ + + + <% if (post.tags && post.tags.length){ %> + <% count = post.tags.length %> + | <% post.tags.forEach(function(tag, index) { %> + <%= tag.name %><% if (count !== index+1) { %>,<% } %> + <% }); %> + <% } %> + \ No newline at end of file diff --git a/_blog_src/themes/casper_custom/layout/casper/post/navigation.ejs b/_blog_src/themes/casper_custom/layout/casper/post/navigation.ejs new file mode 100644 index 000000000..697b571f1 --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/casper/post/navigation.ejs @@ -0,0 +1,15 @@ + \ No newline at end of file diff --git a/_blog_src/themes/casper_custom/layout/casper/post/share.ejs b/_blog_src/themes/casper_custom/layout/casper/post/share.ejs new file mode 100644 index 000000000..4cee062cd --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/casper/post/share.ejs @@ -0,0 +1,15 @@ +
+

Share this post

+ + + + + + + + + +
\ No newline at end of file diff --git a/_blog_src/themes/casper_custom/layout/category.ejs b/_blog_src/themes/casper_custom/layout/category.ejs new file mode 100644 index 000000000..868de2063 --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/category.ejs @@ -0,0 +1 @@ +<%- partial('casper/index') %> diff --git a/_blog_src/themes/casper_custom/layout/index.ejs b/_blog_src/themes/casper_custom/layout/index.ejs new file mode 100644 index 000000000..a5e689260 --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/index.ejs @@ -0,0 +1 @@ +<%- partial('ui-grid/index') %> diff --git a/_blog_src/themes/casper_custom/layout/layout.ejs b/_blog_src/themes/casper_custom/layout/layout.ejs new file mode 100644 index 000000000..b85475677 --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/layout.ejs @@ -0,0 +1,14 @@ + + +<%- partial('ui-grid/head') %> +<% if (typeof page.title == 'undefined') { %> + +<% } else { %> + +<% } %> + <%- partial('ui-grid/header') %> + <%- body %> + <%- partial('ui-grid/footer') %> + <%- partial('ui-grid/after_all') %> + + diff --git a/_blog_src/themes/casper_custom/layout/layout.ejs.bak b/_blog_src/themes/casper_custom/layout/layout.ejs.bak new file mode 100644 index 000000000..091004f21 --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/layout.ejs.bak @@ -0,0 +1,14 @@ + + +<%- partial('casper/head') %> +<% if (typeof page.title == 'undefined') { %> + +<% } else { %> + +<% } %> + <%- partial('casper/header') %> + <%- body %> + <%- partial('casper/footer') %> + <%- partial('casper/after_all') %> + + diff --git a/_blog_src/themes/casper_custom/layout/page.ejs b/_blog_src/themes/casper_custom/layout/page.ejs new file mode 100644 index 000000000..12b341f38 --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/page.ejs @@ -0,0 +1 @@ +<%- partial('casper/post', {post: page}) %> diff --git a/_blog_src/themes/casper_custom/layout/post.ejs b/_blog_src/themes/casper_custom/layout/post.ejs new file mode 100644 index 000000000..8d5c1dd97 --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/post.ejs @@ -0,0 +1 @@ +<%- partial('ui-grid/post', {post: page}) %> diff --git a/_blog_src/themes/casper_custom/layout/tag.ejs b/_blog_src/themes/casper_custom/layout/tag.ejs new file mode 100644 index 000000000..868de2063 --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/tag.ejs @@ -0,0 +1 @@ +<%- partial('casper/index') %> diff --git a/_blog_src/themes/casper_custom/layout/ui-grid/after_all.ejs b/_blog_src/themes/casper_custom/layout/ui-grid/after_all.ejs new file mode 100644 index 000000000..1b34b1360 --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/ui-grid/after_all.ejs @@ -0,0 +1,63 @@ + + + + + + + + + + +<% if (theme.google_analytics) { %> + +<% } %> +<% if (config.disqus_shortname){ %> + +<% } %> +<% if (theme.fancybox){ %> + + + +<% } %> + diff --git a/_blog_src/themes/casper_custom/layout/ui-grid/footer.ejs b/_blog_src/themes/casper_custom/layout/ui-grid/footer.ejs new file mode 100644 index 000000000..7bfcc2eb6 --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/ui-grid/footer.ejs @@ -0,0 +1,33 @@ +
+ + + + \ No newline at end of file diff --git a/_blog_src/themes/casper_custom/layout/ui-grid/head.ejs b/_blog_src/themes/casper_custom/layout/ui-grid/head.ejs new file mode 100644 index 000000000..7f74e805e --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/ui-grid/head.ejs @@ -0,0 +1,48 @@ +<% + var title = page.title; + + if (is_archive()){ + title = 'Archives'; + + if (is_month()){ + title += ': ' + page.year + '/' + page.month; + } else if (is_year()){ + title += ': ' + page.year; + } + } else if (is_category()){ + title = 'Category: ' + page.category; + } else if (is_tag()){ + title = 'Tag: ' + page.tag; + } +%> + + + + + + + + + <% if (title){ %><%= title %> | <% } %><%= config.title %> + + + + + + + + + + + + + <% if (config.rss) { %> + + <% } %> + <% if (config.feed && config.feed.type == 'atom') { %> + + <% } %> + <% if (config.feed && config.feed.type == 'rss') { %> + + <% } %> + \ No newline at end of file diff --git a/_blog_src/themes/casper_custom/layout/ui-grid/header.ejs b/_blog_src/themes/casper_custom/layout/ui-grid/header.ejs new file mode 100644 index 000000000..ffdbf8949 --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/ui-grid/header.ejs @@ -0,0 +1,29 @@ +
+
+ UI Grid + +
+
+

+ + +

+
+
\ No newline at end of file diff --git a/_blog_src/themes/casper_custom/layout/ui-grid/index.ejs b/_blog_src/themes/casper_custom/layout/ui-grid/index.ejs new file mode 100644 index 000000000..a28b597f3 --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/ui-grid/index.ejs @@ -0,0 +1,63 @@ +
+
+
Posts
+
+ + +
+
+ + <% page.posts.each(function(post) { %> + <% author = post.author || config.author %> +
+
+
+ <%- partial('post/meta', {post: post}) %> +

<%- post.title %>

+
+
+

+ <% if (post.excerpt){ %> + <%- post.excerpt %> + <% } else { %> + <%- truncate(post.content, { length: 220, separator: ' '}) %> + <% } %> +

+

+ <% if (author) { %> + Posted by <%= author %> on <%= post.date.format('MMMM Do YYYY') %> + <% } %> + <% if (theme.excerpt_link) { %> + + <% } %> +

+
+
+
+ +
+
+ + <% }); %> + + +
+ + \ No newline at end of file diff --git a/_blog_src/themes/casper_custom/layout/ui-grid/post.ejs b/_blog_src/themes/casper_custom/layout/ui-grid/post.ejs new file mode 100644 index 000000000..9759fa1d3 --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/ui-grid/post.ejs @@ -0,0 +1,31 @@ + +<% permalink = config.url + config.root + post.path %> +<% author = post.author || config.author %> + +
+
+
+
+ <%- partial('post/meta') %> +

<%- post.title %>

+ +
+ +
+ <%- post.content %> + + <% if (page.mailchimp_tag) { %> + <%- partial('post/mailchimp') %> + <% } %> +
+ + +
+
+
+ <%- partial('post/navigation') %> + <%- partial('post/comments') %> +
diff --git a/_blog_src/themes/casper_custom/layout/ui-grid/post/author.ejs b/_blog_src/themes/casper_custom/layout/ui-grid/post/author.ejs new file mode 100644 index 000000000..db7a62116 --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/ui-grid/post/author.ejs @@ -0,0 +1,4 @@ +
+

<%- post.author || config.author %>

+

<%- post.bio || config.bio %>

+
\ No newline at end of file diff --git a/_blog_src/themes/casper_custom/layout/ui-grid/post/comments.ejs b/_blog_src/themes/casper_custom/layout/ui-grid/post/comments.ejs new file mode 100644 index 000000000..9031e180d --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/ui-grid/post/comments.ejs @@ -0,0 +1,8 @@ +<% if(config.disqus_shortname) { %> +
+

Comments

+
+ +
+
+<% } %> \ No newline at end of file diff --git a/_blog_src/themes/casper_custom/layout/ui-grid/post/mailchimp.ejs b/_blog_src/themes/casper_custom/layout/ui-grid/post/mailchimp.ejs new file mode 100644 index 000000000..1470c5314 --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/ui-grid/post/mailchimp.ejs @@ -0,0 +1,22 @@ + + + +<% mailchimp_title = page.mailchimp_title || 'Enter your email address to sign up:' %> + +
+
+
+ +
+ + + + +
+
+
+
+
+
+
+ \ No newline at end of file diff --git a/_blog_src/themes/casper_custom/layout/ui-grid/post/meta.ejs b/_blog_src/themes/casper_custom/layout/ui-grid/post/meta.ejs new file mode 100644 index 000000000..2b757d375 --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/ui-grid/post/meta.ejs @@ -0,0 +1,20 @@ +<% if (is_post()) { %> + + + + <% if (false && post.tags && post.tags.length){ %> + <% count = post.tags.length %> + | <% post.tags.forEach(function(tag, index) { %> + <%= tag.name %><% if (count !== index+1) { %>,<% } %> + <% }); %> + <% } %> + + + + + Back to main page + + +<% } %> \ No newline at end of file diff --git a/_blog_src/themes/casper_custom/layout/ui-grid/post/navigation.ejs b/_blog_src/themes/casper_custom/layout/ui-grid/post/navigation.ejs new file mode 100644 index 000000000..3994aa97f --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/ui-grid/post/navigation.ejs @@ -0,0 +1,21 @@ + \ No newline at end of file diff --git a/_blog_src/themes/casper_custom/layout/ui-grid/post/share.ejs b/_blog_src/themes/casper_custom/layout/ui-grid/post/share.ejs new file mode 100644 index 000000000..167063e8b --- /dev/null +++ b/_blog_src/themes/casper_custom/layout/ui-grid/post/share.ejs @@ -0,0 +1,15 @@ +
+

Share this post

+ + + + + + + + + +
\ No newline at end of file diff --git a/_blog_src/themes/casper_custom/source/css/normalize.css b/_blog_src/themes/casper_custom/source/css/normalize.css new file mode 100644 index 000000000..562891ab8 --- /dev/null +++ b/_blog_src/themes/casper_custom/source/css/normalize.css @@ -0,0 +1,406 @@ +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined in IE 8/9. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * Correct `inline-block` display not defined in IE 8/9. + */ + +audio, +canvas, +video { + display: inline-block; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9. + * Hide the `template` element in IE, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background: transparent; +} + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari 5, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Correct font family set oddly in Safari 5 and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +/** + * Improve readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre-wrap; +} + +/** + * Set consistent quote types. + */ + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9. + */ + +img { + border: 0; +} + +/** + * Correct overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari 5. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Correct font family not being inherited in all browsers. + * 2. Correct font size not being inherited in all browsers. + * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/_blog_src/themes/casper_custom/source/css/screen.css b/_blog_src/themes/casper_custom/source/css/screen.css new file mode 100644 index 000000000..8968be558 --- /dev/null +++ b/_blog_src/themes/casper_custom/source/css/screen.css @@ -0,0 +1,1135 @@ +/* ========================================================================== + Table of Contents + ========================================================================== */ + +/* + + 0. Includes + 1. Icons + 2. General + 3. Utilities + 4. General + 5. Single Post + 6. Third Party Elements + 7. Pagination + 8. Footer + 9. Media Queries (Tablet) + 10. Media Queries (Mobile) + + */ + +/* ========================================================================== + 0. Includes - Ground zero + ========================================================================== */ + +@import url(normalize.css); + + +/* ========================================================================== + 1. Icons - Sets up the icon font and respective classes + ========================================================================== */ + +/* Import the font file with the icons in it */ +@font-face { + font-family: 'icons'; + src:url('../fonts/icons.eot'); + src:url('../fonts/icons.eot?#iefix') format('embedded-opentype'), + url('../fonts/icons.woff') format('woff'), + url('../fonts/icons.ttf') format('truetype'), + url('../fonts/icons.svg#icons') format('svg'); + font-weight: normal; + font-style: normal; +} + +/* Apply these base styles to all icons */ +.icon-ghost:before, +.icon-feed:before, +.icon-twitter:before, +.icon-google-plus:before, +.icon-facebook:before { + font-family: 'icons'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + text-decoration: none; +} + +/* Each icon is created by inserting the corret character into the + content of the :before pseudo element. Like a boss. */ +.icon-ghost:before { + content: "\e000"; +} +.icon-feed:before { + content: "\e001"; +} +.icon-twitter:before { + content: "\e002"; + font-size: 1.1em; +} +.icon-google-plus:before { + content: "\e003"; +} +.icon-facebook:before { + content: "\e004"; +} + + +/* ========================================================================== + 2. General - Setting up some base styles + ========================================================================== */ + +html { + height: 100%; + max-height: 100%; + font-size: 62.5%; +} + +body { + height: 100%; + max-height: 100%; + font-family: 'Noto Serif', serif; + font-size: 2.0rem; + line-height: 1.6em; + color: #3A4145; +} + +::-moz-selection { + color: #222; + background: #D6EDFF; + text-shadow: none; +} + +::selection { + color: #222; + background: #D6EDFF; + text-shadow: none; +} + +h1, h2, h3, +h4, h5, h6 { + text-rendering: optimizeLegibility; + line-height: 1; + margin-top: 0; + font-family: 'Open Sans', sans-serif; +} + +h1 { + font-size: 5rem; + line-height: 1.2em; + letter-spacing: -2px; + text-indent: -3px; +} + +h2 { + font-size: 4rem; + line-height: 1.2em; + letter-spacing: -1px; + text-indent: -2px; +} + +h3 { + font-size: 3.5rem; +} + +h4 { + font-size: 3rem; +} + +h5 { + font-size: 2.5rem; +} + +h6 { + font-size: 2rem; +} + +a { + color: #4a4a4a; + transition: color ease 0.3s; +} + +a:hover { + color: #57A3E8; +} + +h1 a, h2 a, h3 a, +h4 a, h5 a, h6 a { + color: #50585D; +} + + +p, ul, ol, dl { + margin: 1.6em 0; +} + +ol ol, ul ul, +ul ol, ol ul { + margin: 0.4em 0; +} + +dl dt { + float: left; + width: 180px; + overflow: hidden; + clear: left; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: bold; + margin-bottom: 1em +} + +dl dd { + margin-left: 200px; + margin-bottom: 1em +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #efefef; + margin: 3.2em 0; + padding: 0; +} + +blockquote { + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 1.6em 0 1.6em -2.2em; + padding: 0 0 0 1.6em; + border-left: #4a4a4a 0.4em solid; +} + +blockquote p { + margin: 0.8em 0; + font-style: italic; +} + +blockquote small { + display: inline-block; + margin: 0.8em 0 0.8em 1.5em; + font-size:0.9em; + color: #ccc; +} + +blockquote small:before { content: '\2014 \00A0'; } + +blockquote cite { + font-weight:bold; +} + +blockquote cite a { font-weight: normal; } + +mark { + background-color: #ffc336; +} + +code, tt { + padding: 1px 3px; + font-family: Inconsolata, monospace, sans-serif; + font-size: 0.85em; + white-space: pre-wrap; + border: 1px solid #E3EDF3; + background: #F7FAFB; + border-radius: 2px; +} + +pre { + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 1.6em 0; + border: 1px solid #E3EDF3; + width: 100%; + padding: 10px; + font-family: Inconsolata, monospace, sans-serif; + font-size: 0.9em; + white-space: pre; + overflow: auto; + background: #F7FAFB; + border-radius: 3px; +} + +pre code, tt { + font-size: inherit; + white-space: -moz-pre-wrap; + white-space: pre-wrap; + background: transparent; + border: none; + padding: 0; +} + +kbd { + display: inline-block; + margin-bottom: 0.4em; + padding: 1px 8px; + border: #ccc 1px solid; + color: #666; + text-shadow: #fff 0 1px 0; + font-size: 0.9em; + font-weight: bold; + background: #f4f4f4; + border-radius: 4px; + box-shadow: + 0 1px 0 rgba(0, 0, 0, 0.2), + 0 1px 0 0 #fff inset; +} + +table { + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 1.6em 0; + width:100%; + max-width: 100%; + background-color: transparent; +} + +table th, +table td { + padding: 8px; + line-height: 20px; + text-align: left; + vertical-align: top; + border-top: 1px solid #efefef; +} + +table th { color: #000; } + +table caption + thead tr:first-child th, +table caption + thead tr:first-child td, +table colgroup + thead tr:first-child th, +table colgroup + thead tr:first-child td, +table thead:first-child tr:first-child th, +table thead:first-child tr:first-child td { + border-top: 0; +} + +table tbody + tbody { border-top: 2px solid #efefef; } + +table table table { background-color: #fff; } + +table tbody > tr:nth-child(odd) > td, +table tbody > tr:nth-child(odd) > th { + background-color: #f6f6f6; +} + +table.plain tbody > tr:nth-child(odd) > td, +table.plain tbody > tr:nth-child(odd) > th { + background: transparent; +} + +iframe, .fluid-width-video-wrapper { + display: block; + margin: 1.6em 0; +} + +/* When a video is inside the fitvids wrapper, drop the +margin on the iframe, cause it breaks stuff. */ +.fluid-width-video-wrapper iframe { + margin: 0; +} + + +/* ========================================================================== + 3. Utilities - These things get used a lot + ========================================================================== */ + +/* Hides shit */ +.hidden { + text-indent: -9999px; + visibility: hidden; + display: none; +} + +/* Creates a responsive wrapper that makes our content scale nicely */ +.inner { + position: relative; + width: 80%; + max-width: 700px; + margin: 0 auto; +} + +/* Centres vertically yo. (IE8+) */ +.vertical { + display: table-cell; + vertical-align: middle; +} + + +/* ========================================================================== + 4. General - The main styles for the the theme + ========================================================================== */ + +/* Big cover image on the home page */ +.site-head { + position: relative; + display: table; + width: 100%; + height: 60%; + margin-bottom: 5rem; + text-align: center; + color: #fff; + background: #303538 no-repeat center center; + background-size: cover; +} + +.blog-logo { + text-decoration: none; +} + +/* Yo-logo. Yolo-go. Upload one in ghost/settings/ */ +.blog-logo img { + display: block; + max-height: 100px; + width: auto; + margin: 0 auto; + line-height: 0; +} + +/* The details of your blog. Defined in ghost/settings/ */ +.blog-title { + margin: 10px 0 10px 0; + font-size: 5rem; + letter-spacing: -1px; + font-weight: bold; + font-family: 'Open Sans', sans-serif; + text-shadow: 0 1px 6px rgba(0,0,0,0.1); +} + +.blog-description { + margin: 0; + font-size: 1.8rem; + line-height: 1.5em; + font-weight: 300; + font-family: 'Noto Serif', serif; + letter-spacing: 0; + text-shadow: 0 1px 3px rgba(0,0,0,0.15); +} + +/* Every post, on every page, gets this style on its
tag */ +.post { + position: relative; + width:80%; + max-width: 700px; + margin: 4rem auto; + padding-bottom: 4rem; + border-bottom: #EBF2F6 1px solid; + word-break: break-word; + hyphens: auto; +} + +/* Add a little circle in the middle of the border-bottom on our .post + just for the lolz and stylepoints. */ +.post:after { + display: block; + content: ""; + width: 7px; + height: 7px; + border: #E7EEF2 1px solid; + position: absolute; + bottom: -5px; + left: 50%; + margin-left: -5px; + background: #fff; + -webkit-border-radius: 100%; + -moz-border-radius: 100%; + border-radius: 100%; + box-shadow: #fff 0 0 0 5px; +} + +.post-title { + margin:0; +} + +.post-title a { + text-decoration: none; +} + +.post-excerpt p { + margin: 1.6rem 0 0 0; + font-size: 0.9em; + line-height: 1.6em; +} + +.post-meta { + display: inline-block; + margin: 0 0 5px 0; + font-family: 'Open Sans', sans-serif; + font-size: 1.5rem; + color: #9EABB3; +} + +.post-meta a { + color: #9EABB3; + text-decoration: none; +} + +.post-meta a:hover { + text-decoration: underline; +} + +.user-meta { + position: relative; + padding: 0.3rem 40px 0 100px; + min-height: 77px; +} + +.user-image { + position: absolute; + top: 0; + left: 0; +} + +.user-name { + display: block; + font-weight: bold; +} + +.user-bio { + display: block; + max-width: 440px; + font-size: 1.4rem; + line-height: 1.5em; +} + +.publish-meta { + position: absolute; + top: 0; + right: 0; + padding: 4.3rem 0 4rem 0; + text-align: right; +} + +.publish-heading { + display: block; + font-weight: bold; +} + +.publish-date { + display: block; + font-size: 1.4rem; + line-height: 1.5em; +} + +.comments-area { + width: 80%; + max-width: 700px; + margin: 4rem auto; +} + +#comment h1 a { + text-decoration: none; +} + +/* ========================================================================== + 5. Single Post - When you click on an individual post + ========================================================================== */ + +/* Insert some mad padding up in the header for better spacing */ +.post-template .post-header { + padding: 60px 0; + text-align: center; +} + +.post-template .site-head { + color: #303538; + border-bottom: #ebf2f6 1px solid; + background: none !important; +} + +.post-template .site-head:after { + position: absolute; + bottom: -5px; + left: 50%; + display: block; + width: 7px; + height: 7px; + margin-left: -5px; + content: ''; + border: #e7eef2 1px solid; + -webkit-border-radius: 100%; + -moz-border-radius: 100%; + border-radius: 100%; + background: #fff; + box-shadow: #fff 0 0 0 5px; +} + +/* Keep large images within the bounds of the post-width */ +.post-content img { + display: block; + max-width: 100%; + margin: 0 auto; + height: auto; +} + +/* The author credit area after the post */ +.post-footer { + position: relative; + margin: 4rem 0 0 0; + padding: 4rem 0 0 0; + border-top: #EBF2F6 1px solid; +} + +.post-footer h4 { + font-size: 1.8rem; + margin: 0; +} + +.post-footer p { + margin: 1rem 0; + font-size: 1.4rem; + line-height: 1.6em; +} + +/* Create some space to the right for the share links */ +.post-footer .author { + margin-right: 180px; +} + +/* Drop the share links in the space to the right. + Doing it like this means it's easier for the author bio + to be flexible at smaller screen sizes while the share + links remain at a fixed width the whole time */ +.post-footer .share { + position: absolute; + top: 4rem; + right: 0; + width: 140px; +} + +.post-footer .share a { + font-size: 1.8rem; + display: inline-block; + margin: 1.4rem 1.6rem 1.6rem 0; + color: #BBC7CC; + text-decoration: none; +} + +.post-footer .share a:hover { + color: #50585D; +} + + +/* ========================================================================== + 6. Third Party Elements - Embeds from other services + ========================================================================== */ + +/* Hexo: Youtube, other video container */ + +.video-container { + position: relative; + padding-top: 56.25%; + height: 0; + overflow: hidden; +} +.video-container iframe, +.video-container object, +.video-container embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + margin-top: 0; +} + +/* Hexo: Syntax Highlighter */ + +figure.highlight { + background:#fff; + border-radius:0.3em; + border:1px solid #e1e1e1; + line-height:1.45em; + font-size:.9em; + margin-bottom:2.1em; + color:#222; + overflow:auto; + white-space:pre; + word-wrap:normal; +} +figure.highlight figcaption { + padding: 7px 10px; + font-size: .8em; +} +figure.highlight table { + margin: 0; +} +figure.highlight table > tbody > tr > td { + padding: 0; + background: #fff !important; +} +figure.highlight table > tbody > tr > td.gutter { + max-width: 40px; + text-align: right; +} +figure.highlight pre { + border: none; + margin: 0; +} + +/* Theme: Solarized - Github + * More theme here: http://softwaremaniacs.org/media/soft/highlight/test.html + */ +pre .comment, +pre .template_comment, +.diff pre .header, +pre .javadoc { + color: #998; + font-style: italic +} + +pre .keyword, +.css .rule pre .keyword, +pre .winutils, +.javascript pre .title, +.nginx pre .title, +pre .subst, +pre .request, +pre .status { + color: #333; + font-weight: bold +} + +pre .number, +pre .hexcolor, +.ruby pre .constant { + color: #099; +} + +pre .string, +pre .tag pre .value, +pre .phpdoc, +.tex pre .formula { + color: #d14 +} + +pre .title, +pre .id, +.coffeescript pre .params, +.scss pre .preprocessor { + color: #900; + font-weight: bold +} + +.javascript pre .title, +.lisp pre .title, +.clojure pre .title, +pre .subst { + font-weight: normal +} + +pre .class pre .title, +.haskell pre .type, +.vhdl pre .literal, +.tex pre .command { + color: #458; + font-weight: bold +} + +pre .tag, +pre .tag pre .title, +pre .rules pre .property, +.django pre .tag pre .keyword { + color: #000080; + font-weight: normal +} + +pre .attribute, +pre .variable, +.lisp pre .body { + color: #008080 +} + +pre .regexp { + color: #009926 +} + +pre .symbol, +.ruby pre .symbol pre .string, +.lisp pre .keyword, +.tex pre .special, +pre .prompt { + color: #990073 +} + +pre .built_in, +.lisp pre .title, +.clojure pre .built_in { + color: #0086b3 +} + +pre .preprocessor, +pre .pragma, +pre .pi, +pre .doctype, +pre .shebang, +pre .cdata { + color: #999; + font-weight: bold +} + +pre .deletion { + background: #fdd +} + +pre .addition { + background: #dfd +} + +.diff pre .change { + background: #0086b3 +} + +pre .chunk { + color: #aaa +} + + +/* Github */ + +.gist table { + margin: 0; + font-size: 1.4rem; +} + +.gist .line-number { + min-width: 25px; + font-size: 1.1rem; +} + + +/* ========================================================================== + 7. Pagination - Tools to let you flick between pages + ========================================================================== */ + +/* The main wrapper for our pagination links */ +.pagination { + position: relative; + width: 80%; + max-width: 700px; + margin: 4rem auto; + font-family: 'Open Sans', sans-serif; + font-size: 1.3rem; + color: #9EABB3; + text-align: center; +} + +.pagination a { + color: #9EABB3; +} + +/* Push the previous/next links out to the left/right */ +.older-posts, +.newer-posts { + position: absolute; + display: inline-block; + padding: 0 15px; + border: #EBF2F6 2px solid; + text-decoration: none; + border-radius: 30px; + transition: border ease 0.3s; +} + +.older-posts { + right: 0; +} + +.page-number { + display: inline-block; + padding: 2px 0; +} + +.newer-posts { + left: 0; +} + +.older-posts:hover, +.newer-posts:hover { + border-color: #9EABB3; +} + + +/* ========================================================================== + 8. Footer - The bottom of every page + ========================================================================== */ + +.site-footer { + position: relative; + margin: 8rem 0 0 0; + padding: 4rem 0; + border-top: #EBF2F6 1px solid; + font-family: 'Open Sans', sans-serif; + font-size: 1.3rem; + line-height: 1.7em; + color: #BBC7CC; + text-align: center; + background: #F7FAFB; +} + +.site-footer a { + color: #BBC7CC; + text-decoration: underline; +} + +.site-footer a:hover { + color: #50585D; +} + +.poweredby .icon-ghost { + font-weight: 700; + text-decoration: none; +} + +.poweredby .icon-ghost:hover { + text-decoration: none; +} + +.poweredby .icon-ghost:before { + font-size: 1rem; + margin-right: 0.2em; +} + +/* The subscribe icon on the footer */ +.subscribe { + width: 28px; + height: 28px; + position: absolute; + top: -14px; + left: 50%; + margin-left: -15px; + border: #EBF2F6 1px solid; + text-align: center; + line-height: 2.4rem; + border-radius: 50px; + background: #fff; + transition: box-shadow 0.5s; +} + +/* The RSS icon, inserted via icon font */ +.subscribe:before { + color: #D2DEE3; + font-size: 10px; + position: absolute; + top: 9px; + left: 9px; + font-weight: bold; + transition: color 0.5s ease; +} + +/* Add a box shadow to on hover */ +.subscribe:hover { + box-shadow: rgba(0,0,0,0.05) 0 0 0 3px; + transition: box-shadow 0.25s; +} + +.subscribe:hover:before { + color: #50585D; +} + +/* CSS tooltip saying "Subscribe!" - initially hidden */ +.tooltip { + opacity:0; + display: inline-block; + padding: 4px 8px 5px 8px; + position:absolute; + top: -23px; + left: -21px; + color: rgba(255,255,255,0.9); + font-size: 1.1rem; + line-height: 1em; + text-align: center; + background: #50585D; + border-radius:20px; + box-shadow: 0 1px 4px rgba(0,0,0,0.1); + transition: opacity 0.3s ease, top 0.3s ease; +} + +/* The little chiclet arrow under the tooltip, pointing down */ +.tooltip:after { + content:""; + border-width:5px 5px 0 5px; + border-style:solid; + border-color: #50585D transparent; + display:block; + position:absolute; + bottom:-4px; + left:50%; + margin-left:-5px; + z-index: 220; + width:0; +} + +/* On hover, show the tooltip! */ +.subscribe:hover .tooltip { + opacity: 1; + top: -33px; +} + + +/* ========================================================================== + 9. Media Queries - Smaller than 900px + ========================================================================== */ + +@media only screen and (max-width: 900px) { + + blockquote { + margin-left: 0; + } + + .site-head { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + height: auto; + min-height: 240px; + padding: 15% 0; + } + + .blog-title { + font-size: 4rem; + letter-spacing: -1px; + } + + .blog-description { + font-size: 1.7rem; + line-height: 1.5em; + } + + .post { + font-size: 0.9em; + line-height: 1.6em; + } + + .post-template .post { + padding-bottom: 1rem; + } + + .post-template .post-header { + padding: 40px 0; + } + + h1 { + font-size: 4.8rem; + text-indent: -2px; + } + + h2 { + font-size: 3.8rem; + } + + h3 { + font-size: 3.3rem; + } + + h4 { + font-size: 2.8rem; + } + +} + +/* ========================================================================== + 10. Media Queries - Smaller than 500px + ========================================================================== */ + + +@media only screen and (max-width: 500px) { + + .blog-logo img { + max-height: 80px; + } + + .inner, + .pagination { + width: auto; + margin-left: 16px; + margin-right: 16px; + } + + .post { + width:auto; + margin-left: 16px; + margin-right: 16px; + font-size: 0.8em; + line-height: 1.6em; + } + + .site-head { + padding: 10% 0; + } + + .blog-title { + font-size: 3rem; + } + + .blog-description { + font-size: 1.5rem; + } + + + h1, h2 { + font-size: 3rem; + line-height: 1.1em; + letter-spacing: -1px; + } + + h3 { + font-size: 2.8rem; + } + + h4 { + font-size: 2.3rem; + } + + .post-template .post-header { + padding: 30px 0; + } + + .post-meta { + font-size: 1.3rem; + } + + .post-footer { + padding: 4rem 0; + text-align: center; + } + + .post-footer .author { + margin: 0 0 2rem 0; + padding: 0 0 1.6rem 0; + border-bottom: #EBF2F6 1px dashed; + } + + .post-footer .share { + position: static; + width: auto; + } + + .post-footer .share a { + margin: 1.4rem 0.8rem 0 0.8rem; + } + + .older-posts, + .newer-posts { + position: static; + margin: 10px 0; + } + + .page-number { + display: block; + } + + .site-footer { + margin-top: 6rem; + font-size: 1.1rem; + } + +} + +/* ========================================================================== + End of file. Media queries should be the last thing here. Do not add stuff + below this point, or it will probably fuck everything up. + ========================================================================== */ diff --git a/_blog_src/themes/casper_custom/source/css/site.css b/_blog_src/themes/casper_custom/source/css/site.css new file mode 100644 index 000000000..f2a1de693 --- /dev/null +++ b/_blog_src/themes/casper_custom/source/css/site.css @@ -0,0 +1,352 @@ + +body { + padding-top: 0px; +} + +/*------------------------------------------ + Posts +--------------------------------------------*/ + +.posts-header { + text-transform: uppercase; +} + +.post-content { + font-size: 18px; +} + +.post-content p { + margin: 1em; +} + +.post-content h1, +.post-content h2, +.post-content h3, +.post-content h4, +.post-content h5, +.post-content h6 { + margin-top: 60px; +} + +.post-content ul { + margin-left: 20px; +} + +/* The author credit area after the post */ +.post-footer { + position: relative; + margin: 4rem 0 0 0; + padding: 4rem 0 0 0; + border-top: #EBF2F6 1px solid; +} + +.post-footer h4 { + font-size: 1.8rem; + margin: 0; +} + +.post-footer p { + margin: 1rem 0; + font-size: 1.4rem; + line-height: 1.6em; +} + +/* Create some space to the right for the share links */ +.post-footer .author { + margin-right: 180px; +} + +/* Drop the share links in the space to the right. + Doing it like this means it's easier for the author bio + to be flexible at smaller screen sizes while the share + links remain at a fixed width the whole time */ +.post-footer .share { + position: absolute; + top: 4rem; + right: 0; + width: 140px; +} + +.post-footer .share a { + font-size: 1.8rem; + display: inline-block; + margin: 1.4rem 1.6rem 1.6rem 0; + color: #BBC7CC; + text-decoration: none; +} + +.post-footer .share a:hover { + color: #50585D; +} + +/* Mailchimp form */ + +.mailchimp-form-container { + margin-top: 50px; +} + +.mailchimp-form { + border: 2px solid #dce4ec; + border-radius: 4px; + float: left; + padding: 20px; +} + +/*------------------------------------------ + Google search form +--------------------------------------------*/ + +input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus, .gsc-search-button +{ + box-sizing: content-box; + line-height: normal; +} + +.post-search-form input.gsc-search-button.gsc-search-button-v2 { + background-color: #18bc9c; + border-color: #2ca78f; +} + +/*------------------------------------------ + Footer +--------------------------------------------*/ + +.site-footer { + padding: 50px 0 65px; +} + +.site-footer .list-inline { + margin: 0; + padding: 0; +} + +.site-footer .list-inline a { + color: #2c3e50; +} + +.site-footer .copyright { + font-size: 14px; + text-align: center; + margin-top: 30px; + margin-bottom: 0; +} + +/*------------------------------------------ + Pagination +--------------------------------------------*/ + +/* The main wrapper for our pagination links */ +.paging { + text-align: center; + /*position: relative;*/ + /*width: 80%; + max-width: 700px; + margin: 4rem auto;*/ + /*font-family: 'Open Sans', sans-serif;*/ + /*font-size: 1.3rem;*/ + color: #9EABB3; + margin-top: 4rem; +} + +.paging a { + color: #9EABB3; +} + +/* Push the previous/next links out to the left/right */ +.older-posts, +.newer-posts { + /*position: absolute; + display: inline-block;*/ + padding: 0 15px; + border: #EBF2F6 2px solid; + text-decoration: none; + border-radius: 30px; + transition: border ease 0.3s; +} + +.page-number { + display: inline-block; + padding: 2px 0; +} + +.older-posts:hover, +.newer-posts:hover { + border-color: #9EABB3; +} + + +/* Hexo: Syntax Highlighter */ + +figure.highlight { + background: #23241f; + border-radius:0.3em; + border:1px solid #e1e1e1; + line-height:1.45em; + font-size:.9em; + margin-bottom:2.1em; + /*color:#222;*/ + overflow:auto; + white-space:pre; + word-wrap:normal; +} +figure.highlight figcaption { + padding: 7px 10px; + font-size: .8em; +} +figure.highlight table { + width:100%; + margin: 0; +} +figure.highlight table > tbody > tr > td, figure.highlight table > tbody > tr > td { + padding: 0; + background: #23241f !important; +} +figure.highlight table > tbody > tr > td, figure.highlight table > tbody > tr > td > pre { + background: #23241f !important; +} +figure.highlight table > tbody > tr > td.gutter { + max-width: 40px; + text-align: right; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +figure.highlight pre { + border: none; + margin: 0; +} + + +/* Theme: Solarized - Github + * More theme here: http://softwaremaniacs.org/media/soft/highlight/test.html + */ +/*pre .comment, +pre .template_comment, +.diff pre .header, +pre .javadoc { + color: #998; + font-style: italic +} + +pre .keyword, +.css .rule pre .keyword, +pre .winutils, +.javascript pre .title, +.nginx pre .title, +pre .subst, +pre .request, +pre .status { + color: #333; + font-weight: bold +} + +pre .number, +pre .hexcolor, +.ruby pre .constant { + color: #099; +} + +pre .string, +pre .tag pre .value, +pre .phpdoc, +.tex pre .formula { + color: #d14 +} + +pre .title, +pre .id, +.coffeescript pre .params, +.scss pre .preprocessor { + color: #900; + font-weight: bold +} + +.javascript pre .title, +.lisp pre .title, +.clojure pre .title, +pre .subst { + font-weight: normal +} + +pre .class pre .title, +.haskell pre .type, +.vhdl pre .literal, +.tex pre .command { + color: #458; + font-weight: bold +} + +pre .tag, +pre .tag pre .title, +pre .rules pre .property, +.django pre .tag pre .keyword { + color: #000080; + font-weight: normal +} + +pre .attribute, +pre .variable, +.lisp pre .body { + color: #008080 +} + +pre .regexp { + color: #009926 +} + +pre .symbol, +.ruby pre .symbol pre .string, +.lisp pre .keyword, +.tex pre .special, +pre .prompt { + color: #990073 +} + +pre .built_in, +.lisp pre .title, +.clojure pre .built_in { + color: #0086b3 +} + +pre .preprocessor, +pre .pragma, +pre .pi, +pre .doctype, +pre .shebang, +pre .cdata { + color: #999; + font-weight: bold +} + +pre .deletion { + background: #fdd +} + +pre .addition { + background: #dfd +} + +.diff pre .change { + background: #0086b3 +} + +pre .chunk { + color: #aaa +} +*/ + + +/* Github */ + +/*.gist table { + margin: 0; + font-size: 1.4rem; +} + +.gist .line-number { + min-width: 25px; + font-size: 1.1rem; +}*/ \ No newline at end of file diff --git a/_blog_src/themes/casper_custom/source/fonts/icons.dev.svg b/_blog_src/themes/casper_custom/source/fonts/icons.dev.svg new file mode 100644 index 000000000..dac6a13a4 --- /dev/null +++ b/_blog_src/themes/casper_custom/source/fonts/icons.dev.svg @@ -0,0 +1,41 @@ + + + + +This is a custom SVG font generated by IcoMoon. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/_blog_src/themes/casper_custom/source/fonts/icons.eot b/_blog_src/themes/casper_custom/source/fonts/icons.eot new file mode 100644 index 000000000..68c968db6 Binary files /dev/null and b/_blog_src/themes/casper_custom/source/fonts/icons.eot differ diff --git a/_blog_src/themes/casper_custom/source/fonts/icons.svg b/_blog_src/themes/casper_custom/source/fonts/icons.svg new file mode 100644 index 000000000..182aa87c5 --- /dev/null +++ b/_blog_src/themes/casper_custom/source/fonts/icons.svg @@ -0,0 +1,41 @@ + + + + +This is a custom SVG font generated by IcoMoon. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/_blog_src/themes/casper_custom/source/fonts/icons.ttf b/_blog_src/themes/casper_custom/source/fonts/icons.ttf new file mode 100644 index 000000000..12b247613 Binary files /dev/null and b/_blog_src/themes/casper_custom/source/fonts/icons.ttf differ diff --git a/_blog_src/themes/casper_custom/source/fonts/icons.woff b/_blog_src/themes/casper_custom/source/fonts/icons.woff new file mode 100644 index 000000000..0127877de Binary files /dev/null and b/_blog_src/themes/casper_custom/source/fonts/icons.woff differ diff --git a/_blog_src/themes/casper_custom/source/js/index.js b/_blog_src/themes/casper_custom/source/js/index.js new file mode 100644 index 000000000..c015cb44e --- /dev/null +++ b/_blog_src/themes/casper_custom/source/js/index.js @@ -0,0 +1,15 @@ +/** + * Main JS file for Casper behaviours + */ + +/*globals jQuery, document */ +(function ($) { + "use strict"; + + $(document).ready(function(){ + + $(".post-content").fitVids(); + + }); + +}(jQuery)); \ No newline at end of file diff --git a/_blog_src/themes/casper_custom/source/js/jquery.fitvids.js b/_blog_src/themes/casper_custom/source/js/jquery.fitvids.js new file mode 100644 index 000000000..a8551f6e1 --- /dev/null +++ b/_blog_src/themes/casper_custom/source/js/jquery.fitvids.js @@ -0,0 +1,74 @@ +/*global jQuery */ +/*jshint multistr:true browser:true */ +/*! +* FitVids 1.0.3 +* +* Copyright 2013, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com +* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ +* Released under the WTFPL license - http://sam.zoy.org/wtfpl/ +* +* Date: Thu Sept 01 18:00:00 2011 -0500 +*/ + +(function( $ ){ + + "use strict"; + + $.fn.fitVids = function( options ) { + var settings = { + customSelector: null + }; + + if(!document.getElementById('fit-vids-style')) { + + var div = document.createElement('div'), + ref = document.getElementsByTagName('base')[0] || document.getElementsByTagName('script')[0], + cssStyles = '­'; + + div.className = 'fit-vids-style'; + div.id = 'fit-vids-style'; + div.style.display = 'none'; + div.innerHTML = cssStyles; + + ref.parentNode.insertBefore(div,ref); + + } + + if ( options ) { + $.extend( settings, options ); + } + + return this.each(function(){ + var selectors = [ + "iframe[src*='player.vimeo.com']", + "iframe[src*='youtube.com']", + "iframe[src*='youtube-nocookie.com']", + "iframe[src*='kickstarter.com'][src*='video.html']", + "object", + "embed" + ]; + + if (settings.customSelector) { + selectors.push(settings.customSelector); + } + + var $allVideos = $(this).find(selectors.join(',')); + $allVideos = $allVideos.not("object object"); // SwfObj conflict patch + + $allVideos.each(function(){ + var $this = $(this); + if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; } + var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(), + width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(), + aspectRatio = height / width; + if(!$this.attr('id')){ + var videoID = 'fitvid' + Math.floor(Math.random()*999999); + $this.attr('id', videoID); + } + $this.wrap('
').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%"); + $this.removeAttr('height').removeAttr('width'); + }); + }); + }; +// Works with either jQuery or Zepto +})( window.jQuery || window.Zepto ); diff --git a/_blog_src/themes/landscape/Gruntfile.js b/_blog_src/themes/landscape/Gruntfile.js new file mode 100644 index 000000000..59fd5df35 --- /dev/null +++ b/_blog_src/themes/landscape/Gruntfile.js @@ -0,0 +1,46 @@ +module.exports = function(grunt){ + grunt.initConfig({ + gitclone: { + fontawesome: { + options: { + repository: 'https://github.com/FortAwesome/Font-Awesome.git', + directory: 'tmp/fontawesome' + }, + }, + fancybox: { + options: { + repository: 'https://github.com/fancyapps/fancyBox.git', + directory: 'tmp/fancybox' + } + } + }, + copy: { + fontawesome: { + expand: true, + cwd: 'tmp/fontawesome/fonts/', + src: ['**'], + dest: 'source/css/fonts/' + }, + fancybox: { + expand: true, + cwd: 'tmp/fancybox/source/', + src: ['**'], + dest: 'source/fancybox/' + } + }, + _clean: { + tmp: ['tmp'], + fontawesome: ['source/css/fonts'], + fancybox: ['source/fancybox'] + } + }); + + require('load-grunt-tasks')(grunt); + + grunt.renameTask('clean', '_clean'); + + grunt.registerTask('fontawesome', ['gitclone:fontawesome', 'copy:fontawesome', '_clean:tmp']); + grunt.registerTask('fancybox', ['gitclone:fancybox', 'copy:fancybox', '_clean:tmp']); + grunt.registerTask('default', ['gitclone', 'copy', '_clean:tmp']); + grunt.registerTask('clean', ['_clean']); +}; \ No newline at end of file diff --git a/_blog_src/themes/landscape/LICENSE b/_blog_src/themes/landscape/LICENSE new file mode 100644 index 000000000..9ce4d329b --- /dev/null +++ b/_blog_src/themes/landscape/LICENSE @@ -0,0 +1,7 @@ +Copyright (c) 2013 Tommy Chen + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file diff --git a/_blog_src/themes/landscape/README.md b/_blog_src/themes/landscape/README.md new file mode 100644 index 000000000..65671044d --- /dev/null +++ b/_blog_src/themes/landscape/README.md @@ -0,0 +1,111 @@ +# Landscape + +A brand new default theme for [Hexo]. + +- [Preview](http://hexo.io/hexo-theme-landscape/) + +## Installation + +### Install + +``` bash +$ git clone https://github.com/tommy351/hexo-theme-landscape.git themes/landscape +``` + +**Landscape requires Hexo 2.4 and above.** + +### Enable + +Modify `theme` setting in `_config.yml` to `landscape`. + +### Update + +``` bash +cd themes/landscape +git pull +``` + +## Configuration + +``` yml +# Header +menu: + Home: / + Archives: /archives +rss: /atom.xml + +# Content +excerpt_link: Read More +fancybox: true + +# Sidebar +sidebar: right +widgets: +- category +- tag +- tagcloud +- archives +- recent_posts + +# Miscellaneous +google_analytics: +favicon: /favicon.png +twitter: +google_plus: +``` + +- **menu** - Navigation menu +- **rss** - RSS link +- **excerpt_link** - "Read More" link at the bottom of excerpted articles. `false` to hide the link. +- **fancybox** - Enable [Fancybox] +- **sidebar** - Sidebar style. You can choose `left`, `right`, `bottom` or `false`. +- **widgets** - Widgets displaying in sidebar +- **google_analytics** - Google Analytics ID +- **favicon** - Favicon path +- **twitter** - Twiiter ID +- **google_plus** - Google+ ID + +## Features + +### Fancybox + +Landscape uses [Fancybox] to showcase your photos. You can use Markdown syntax or fancybox tag plugin to add your photos. + +``` +![img caption](img url) + +{% fancybox img_url [img_thumbnail] [img_caption] %} +``` + +### Sidebar + +You can put your sidebar in left side, right side or bottom of your site by editing `sidebar` setting. + +Landscape provides 5 built-in widgets: + +- category +- tag +- tagcloud +- archives +- recent_posts + +All of them are enabled by default. You can edit them in `widget` setting. + +## Development + +### Requirements + +- [Grunt] 0.4+ +- Hexo 2.4+ + +### Grunt tasks + +- **default** - Download [Fancybox] and [Font Awesome]. +- **fontawesome** - Only download [Font Awesome]. +- **fancybox** - Only download [Fancybox]. +- **clean** - Clean temporarily files and downloaded files. + +[Hexo]: http://zespia.tw/hexo/ +[Fancybox]: http://fancyapps.com/fancybox/ +[Font Awesome]: http://fontawesome.io/ +[Grunt]: http://gruntjs.com/ diff --git a/_blog_src/themes/landscape/_config.yml b/_blog_src/themes/landscape/_config.yml new file mode 100644 index 000000000..85a1ccf09 --- /dev/null +++ b/_blog_src/themes/landscape/_config.yml @@ -0,0 +1,26 @@ +# Header +menu: + Home: / + Archives: /archives +rss: /atom.xml + +# Content +excerpt_link: Read More +fancybox: true + +# Sidebar +sidebar: right +widgets: +- category +- tag +- tagcloud +- archive +- recent_posts + +# Miscellaneous +google_analytics: +favicon: /favicon.png +twitter: +google_plus: +fb_admins: +fb_app_id: \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/_partial/after-footer.ejs b/_blog_src/themes/landscape/layout/_partial/after-footer.ejs new file mode 100644 index 000000000..fdb297086 --- /dev/null +++ b/_blog_src/themes/landscape/layout/_partial/after-footer.ejs @@ -0,0 +1,24 @@ +<% if (config.disqus_shortname){ %> + +<% } %> + + + +<% if (theme.fancybox){ %> + + +<% } %> + +<%- js('js/script') %> \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/_partial/archive-post.ejs b/_blog_src/themes/landscape/layout/_partial/archive-post.ejs new file mode 100644 index 000000000..36f2cc31f --- /dev/null +++ b/_blog_src/themes/landscape/layout/_partial/archive-post.ejs @@ -0,0 +1,8 @@ +
+
+
+ <%- partial('post/date', {class_name: 'archive-article-date', date_format: 'MMM D'}) %> + <%- partial('post/title', {class_name: 'archive-article-title'}) %> +
+
+
\ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/_partial/archive.ejs b/_blog_src/themes/landscape/layout/_partial/archive.ejs new file mode 100644 index 000000000..8401769f8 --- /dev/null +++ b/_blog_src/themes/landscape/layout/_partial/archive.ejs @@ -0,0 +1,33 @@ +<% if (pagination == 2){ %> + <% page.posts.each(function(post){ %> + <%- partial('article', {post: post, index: true}) %> + <% }) %> + <% if (page.total > 1){ %> + + <% } %> +<% } else { %> + <% var last; %> + <% page.posts.each(function(post, i){ %> + <% var year = post.date.year(); %> + <% if (last != year){ %> + <% if (last != null){ %> + + <% } %> + <% last = year; %> +
+
+ <%= year %> +
+
+ <% } %> + <%- partial('archive-post', {post: post, even: i % 2 == 0}) %> + <% }) %> + <% if (page.posts.length){ %> +
+ <% } %> +<% } %> \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/_partial/article.ejs b/_blog_src/themes/landscape/layout/_partial/article.ejs new file mode 100644 index 000000000..404b0659e --- /dev/null +++ b/_blog_src/themes/landscape/layout/_partial/article.ejs @@ -0,0 +1,44 @@ +
+
+ <%- partial('post/date', {class_name: 'article-date', date_format: null}) %> + <%- partial('post/category') %> +
+
+ <%- partial('post/gallery') %> + <% if (post.link || post.title){ %> +
+ <%- partial('post/title', {class_name: 'article-title'}) %> +
+ <% } %> +
+ <% if (post.excerpt && index){ %> + <%- post.excerpt %> + <% if (theme.excerpt_link){ %> +

+ <%= theme.excerpt_link %> +

+ <% } %> + <% } else { %> + <%- post.content %> + <% } %> +
+
+ Share + <% if (post.comments && config.disqus_shortname){ %> + Comments + <% } %> + <%- partial('post/tag') %> +
+
+ <% if (!index){ %> + <%- partial('post/nav') %> + <% } %> +
+ +<% if (!index && post.comments && config.disqus_shortname){ %> +
+
+ +
+
+<% } %> \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/_partial/footer.ejs b/_blog_src/themes/landscape/layout/_partial/footer.ejs new file mode 100644 index 000000000..b7fa5e21d --- /dev/null +++ b/_blog_src/themes/landscape/layout/_partial/footer.ejs @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/_partial/google-analytics.ejs b/_blog_src/themes/landscape/layout/_partial/google-analytics.ejs new file mode 100644 index 000000000..8f23d4628 --- /dev/null +++ b/_blog_src/themes/landscape/layout/_partial/google-analytics.ejs @@ -0,0 +1,13 @@ +<% if (theme.google_analytics){ %> + +<% } %> \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/_partial/head.ejs b/_blog_src/themes/landscape/layout/_partial/head.ejs new file mode 100644 index 000000000..261952c8e --- /dev/null +++ b/_blog_src/themes/landscape/layout/_partial/head.ejs @@ -0,0 +1,35 @@ + + + + + <% + var title = page.title; + + if (is_archive()){ + title = 'Archives'; + + if (is_month()){ + title += ': ' + page.year + '/' + page.month; + } else if (is_year()){ + title += ': ' + page.year; + } + } else if (is_category()){ + title = 'Category: ' + page.category; + } else if (is_tag()){ + title = 'Tag: ' + page.tag; + } + %> + <% if (title){ %><%= title %> | <% } %><%= config.title %> + + <%- open_graph({twitter_id: theme.twitter, google_plus: theme.google_plus, fb_admins: theme.fb_admins, fb_app_id: theme.fb_app_id}) %> + <% if (theme.rss){ %> + + <% } %> + <% if (theme.favicon){ %> + + <% } %> + + <%- css('css/style') %> + + <%- partial('google-analytics') %> + \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/_partial/header.ejs b/_blog_src/themes/landscape/layout/_partial/header.ejs new file mode 100644 index 000000000..107f5b105 --- /dev/null +++ b/_blog_src/themes/landscape/layout/_partial/header.ejs @@ -0,0 +1,32 @@ + \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/_partial/mobile-nav.ejs b/_blog_src/themes/landscape/layout/_partial/mobile-nav.ejs new file mode 100644 index 000000000..3e1c5bd49 --- /dev/null +++ b/_blog_src/themes/landscape/layout/_partial/mobile-nav.ejs @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/_partial/post/category.ejs b/_blog_src/themes/landscape/layout/_partial/post/category.ejs new file mode 100644 index 000000000..db2ed4842 --- /dev/null +++ b/_blog_src/themes/landscape/layout/_partial/post/category.ejs @@ -0,0 +1,10 @@ +<% if (post.categories && post.categories.length){ %> +
+ <%- list_categories(post.categories, { + show_count: false, + class: 'article-category', + style: 'none', + separator: '►' + }) %> +
+<% } %> \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/_partial/post/date.ejs b/_blog_src/themes/landscape/layout/_partial/post/date.ejs new file mode 100644 index 000000000..99470c8d3 --- /dev/null +++ b/_blog_src/themes/landscape/layout/_partial/post/date.ejs @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/_partial/post/gallery.ejs b/_blog_src/themes/landscape/layout/_partial/post/gallery.ejs new file mode 100644 index 000000000..ac264cc0e --- /dev/null +++ b/_blog_src/themes/landscape/layout/_partial/post/gallery.ejs @@ -0,0 +1,11 @@ +<% if (post.photos && post.photos.length){ %> +
+
+ <% post.photos.forEach(function(photo, i){ %> + + + + <% }) %> +
+
+<% } %> \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/_partial/post/nav.ejs b/_blog_src/themes/landscape/layout/_partial/post/nav.ejs new file mode 100644 index 000000000..da272e06c --- /dev/null +++ b/_blog_src/themes/landscape/layout/_partial/post/nav.ejs @@ -0,0 +1,22 @@ +<% if (post.prev || post.next){ %> + +<% } %> \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/_partial/post/tag.ejs b/_blog_src/themes/landscape/layout/_partial/post/tag.ejs new file mode 100644 index 000000000..e0f327f62 --- /dev/null +++ b/_blog_src/themes/landscape/layout/_partial/post/tag.ejs @@ -0,0 +1,6 @@ +<% if (post.tags && post.tags.length){ %> + <%- list_tags(post.tags, { + show_count: false, + class: 'article-tag' + }) %> +<% } %> \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/_partial/post/title.ejs b/_blog_src/themes/landscape/layout/_partial/post/title.ejs new file mode 100644 index 000000000..6a792c2b0 --- /dev/null +++ b/_blog_src/themes/landscape/layout/_partial/post/title.ejs @@ -0,0 +1,15 @@ +<% if (post.link){ %> +

+ +

+<% } else if (post.title){ %> + <% if (index){ %> +

+ <%= post.title %> +

+ <% } else { %> +

+ <%= post.title %> +

+ <% } %> +<% } %> \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/_partial/sidebar.ejs b/_blog_src/themes/landscape/layout/_partial/sidebar.ejs new file mode 100644 index 000000000..c1e48e53c --- /dev/null +++ b/_blog_src/themes/landscape/layout/_partial/sidebar.ejs @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/_widget/archive.ejs b/_blog_src/themes/landscape/layout/_widget/archive.ejs new file mode 100644 index 000000000..9a428bae3 --- /dev/null +++ b/_blog_src/themes/landscape/layout/_widget/archive.ejs @@ -0,0 +1,8 @@ +<% if (site.posts.length){ %> +
+

Archives

+
+ <%- list_archives() %> +
+
+<% } %> \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/_widget/category.ejs b/_blog_src/themes/landscape/layout/_widget/category.ejs new file mode 100644 index 000000000..7836a2794 --- /dev/null +++ b/_blog_src/themes/landscape/layout/_widget/category.ejs @@ -0,0 +1,8 @@ +<% if (site.categories.length){ %> +
+

Categories

+
+ <%- list_categories() %> +
+
+<% } %> \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/_widget/recent_posts.ejs b/_blog_src/themes/landscape/layout/_widget/recent_posts.ejs new file mode 100644 index 000000000..3986ffb94 --- /dev/null +++ b/_blog_src/themes/landscape/layout/_widget/recent_posts.ejs @@ -0,0 +1,14 @@ +<% if (site.posts.length){ %> +
+

Recents

+
+ +
+
+<% } %> \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/_widget/tag.ejs b/_blog_src/themes/landscape/layout/_widget/tag.ejs new file mode 100644 index 000000000..c163c4192 --- /dev/null +++ b/_blog_src/themes/landscape/layout/_widget/tag.ejs @@ -0,0 +1,8 @@ +<% if (site.tags.length){ %> +
+

Tags

+
+ <%- list_tags() %> +
+
+<% } %> \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/_widget/tagcloud.ejs b/_blog_src/themes/landscape/layout/_widget/tagcloud.ejs new file mode 100644 index 000000000..4b822835c --- /dev/null +++ b/_blog_src/themes/landscape/layout/_widget/tagcloud.ejs @@ -0,0 +1,8 @@ +<% if (site.tags.length){ %> +
+

Tag Cloud

+
+ <%- tagcloud() %> +
+
+<% } %> \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/archive.ejs b/_blog_src/themes/landscape/layout/archive.ejs new file mode 100644 index 000000000..52f9b2105 --- /dev/null +++ b/_blog_src/themes/landscape/layout/archive.ejs @@ -0,0 +1 @@ +<%- partial('_partial/archive', {pagination: config.archive, index: true}) %> \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/category.ejs b/_blog_src/themes/landscape/layout/category.ejs new file mode 100644 index 000000000..3ffe25271 --- /dev/null +++ b/_blog_src/themes/landscape/layout/category.ejs @@ -0,0 +1 @@ +<%- partial('_partial/archive', {pagination: config.category, index: true}) %> \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/index.ejs b/_blog_src/themes/landscape/layout/index.ejs new file mode 100644 index 000000000..60a2c6884 --- /dev/null +++ b/_blog_src/themes/landscape/layout/index.ejs @@ -0,0 +1 @@ +<%- partial('_partial/archive', {pagination: 2, index: true}) %> \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/layout.ejs b/_blog_src/themes/landscape/layout/layout.ejs new file mode 100644 index 000000000..1524a6273 --- /dev/null +++ b/_blog_src/themes/landscape/layout/layout.ejs @@ -0,0 +1,18 @@ +<%- partial('_partial/head') %> + +
+
+ <%- partial('_partial/header') %> +
+
<%- body %>
+ <% if (theme.sidebar && theme.sidebar !== 'bottom'){ %> + <%- partial('_partial/sidebar') %> + <% } %> +
+ <%- partial('_partial/footer') %> +
+ <%- partial('_partial/mobile-nav') %> + <%- partial('_partial/after-footer') %> +
+ + \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/page.ejs b/_blog_src/themes/landscape/layout/page.ejs new file mode 100644 index 000000000..bea631879 --- /dev/null +++ b/_blog_src/themes/landscape/layout/page.ejs @@ -0,0 +1 @@ +<%- partial('_partial/article', {post: page, index: false}) %> \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/post.ejs b/_blog_src/themes/landscape/layout/post.ejs new file mode 100644 index 000000000..bea631879 --- /dev/null +++ b/_blog_src/themes/landscape/layout/post.ejs @@ -0,0 +1 @@ +<%- partial('_partial/article', {post: page, index: false}) %> \ No newline at end of file diff --git a/_blog_src/themes/landscape/layout/tag.ejs b/_blog_src/themes/landscape/layout/tag.ejs new file mode 100644 index 000000000..048cdb0ec --- /dev/null +++ b/_blog_src/themes/landscape/layout/tag.ejs @@ -0,0 +1 @@ +<%- partial('_partial/archive', {pagination: config.tag, index: true}) %> \ No newline at end of file diff --git a/_blog_src/themes/landscape/package.json b/_blog_src/themes/landscape/package.json new file mode 100644 index 000000000..a11e9f661 --- /dev/null +++ b/_blog_src/themes/landscape/package.json @@ -0,0 +1,12 @@ +{ + "name": "hexo-theme-landscape", + "version": "0.0.1", + "private": true, + "devDependencies": { + "grunt": "~0.4.2", + "load-grunt-tasks": "~0.2.0", + "grunt-git": "~0.2.2", + "grunt-contrib-clean": "~0.5.0", + "grunt-contrib-copy": "~0.4.1" + } +} diff --git a/_blog_src/themes/landscape/scripts/fancybox.js b/_blog_src/themes/landscape/scripts/fancybox.js new file mode 100644 index 000000000..83f1fdc32 --- /dev/null +++ b/_blog_src/themes/landscape/scripts/fancybox.js @@ -0,0 +1,24 @@ +var rUrl = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[.\!\/\\w]*))?)/; + +/** +* Fancybox tag +* +* Syntax: +* {% fancybox /path/to/image [/path/to/thumbnail] [title] %} +*/ + +hexo.extend.tag.register('fancybox', function(args){ + var original = args.shift(), + thumbnail = ''; + + if (args.length && rUrl.test(args[0])){ + thumbnail = args.shift(); + } + + var title = args.join(' '); + + return '' + + '' + title + '' + '' + + (title ? '' + title + '' : ''); +}); \ No newline at end of file diff --git a/_blog_src/themes/landscape/source/css/_extend.styl b/_blog_src/themes/landscape/source/css/_extend.styl new file mode 100644 index 000000000..96a181799 --- /dev/null +++ b/_blog_src/themes/landscape/source/css/_extend.styl @@ -0,0 +1,63 @@ +$block-caption + text-decoration: none + text-transform: uppercase + letter-spacing: 2px + color: color-grey + margin-bottom: 1em + margin-left: 5px + line-height: 1em + text-shadow: 0 1px #fff + font-weight: bold + +$block + background: #fff + box-shadow: 1px 2px 3px #ddd + border: 1px solid color-border + border-radius: 3px + +$base-style + h1 + font-size: 2em + h2 + font-size: 1.5em + h3 + font-size: 1.3em + h4 + font-size: 1.2em + h5 + font-size: 1em + h6 + font-size: 1em + color: color-grey + hr + border: 1px dashed color-border + strong + font-weight: bold + em, cite + font-style: italic + sup, sub + font-size: 0.75em + line-height: 0 + position: relative + vertical-align: baseline + sup + top: -0.5em + sub + bottom: -0.2em + small + font-size: 0.85em + acronym, abbr + border-bottom: 1px dotted + ul, ol, dl + margin: 0 20px + line-height: line-height + ul, ol + ul, ol + margin-top: 0 + margin-bottom: 0 + ul + list-style: disc + ol + list-style: decimal + dt + font-weight: bold \ No newline at end of file diff --git a/_blog_src/themes/landscape/source/css/_partial/archive.styl b/_blog_src/themes/landscape/source/css/_partial/archive.styl new file mode 100644 index 000000000..165b6781d --- /dev/null +++ b/_blog_src/themes/landscape/source/css/_partial/archive.styl @@ -0,0 +1,78 @@ +.archives-wrap + margin: block-margin 0 + +.archives + clearfix() + +.archive-year-wrap + margin-bottom: 1em + +.archive-year + @extend $block-caption + +.archives + column-gap: 10px + @media mq-tablet + column-count: 2 + @media mq-normal + column-count: 3 + +.archive-article + avoid-column-break() + +.archive-article-inner + @extend $block + padding: 10px + margin-bottom: 15px + +.archive-article-title + text-decoration: none + font-weight: bold + color: color-default + transition: color 0.2s + line-height: line-height + &:hover + color: color-link + +.archive-article-footer + margin-top: 1em + +.archive-article-date + color: color-grey + text-decoration: none + font-size: 0.85em + line-height: 1em + margin-bottom: 0.5em + display: block + +#page-nav + clearfix() + margin: block-margin auto + background: #fff + box-shadow: 1px 2px 3px #ddd + border: 1px solid color-border + border-radius: 3px + text-align: center + color: color-grey + overflow: hidden + a, span + padding: 10px 20px + a + color: color-grey + text-decoration: none + &:hover + background: color-grey + color: #fff + .prev + float: left + .next + float: right + .page-number + display: inline-block + @media mq-mobile + display: none + .current + color: color-default + font-weight: bold + .space + color: color-border \ No newline at end of file diff --git a/_blog_src/themes/landscape/source/css/_partial/article.styl b/_blog_src/themes/landscape/source/css/_partial/article.styl new file mode 100644 index 000000000..46094f9fa --- /dev/null +++ b/_blog_src/themes/landscape/source/css/_partial/article.styl @@ -0,0 +1,357 @@ +.article + margin: block-margin 0 + +.article-inner + @extend $block + overflow: hidden + +.article-meta + clearfix() + +.article-date + @extend $block-caption + float: left + +.article-category + float: left + line-height: 1em + color: #ccc + text-shadow: 0 1px #fff + margin-left: 8px + &:before + content: "\2022" + +.article-category-link + @extend $block-caption + margin: 0 12px 1em + +.article-header + padding: article-padding article-padding 0 + +.article-title + text-decoration: none + font-size: 2em + font-weight: bold + color: color-default + line-height: line-height-title + transition: color 0.2s + a&:hover + color: color-link + +.article-entry + @extend $base-style + clearfix() + color: color-default + padding: 0 article-padding + p, table + line-height: line-height + margin: line-height 0 + h1, h2, h3, h4, h5, h6 + font-weight: bold + h1, h2, h3, h4, h5, h6 + line-height: line-height-title + margin: line-height-title 0 + a + color: color-link + text-decoration: none + &:hover + text-decoration: underline + ul, ol, dl + margin-top: line-height + margin-bottom: line-height + img, video + max-width: 100% + height: auto + display: block + margin: auto + iframe + border: none + table + width: 100% + border-collapse: collapse + border-spacing: 0 + th + font-weight: bold + border-bottom: 3px solid color-border + padding-bottom: 0.5em + td + border-bottom: 1px solid color-border + padding: 10px 0 + blockquote + font-family: font-serif + font-size: 1.4em + margin: line-height 20px + text-align: center + footer + font-size: font-size + margin: line-height 0 + font-family: font-sans + cite + &:before + content: "—" + padding: 0 0.5em + .pullquote + text-align: left + width: 45% + margin: 0 + &.left + margin-left: 0.5em + margin-right: 1em + &.right + margin-right: 0.5em + margin-left: 1em + .caption + color: color-grey + display: block + font-size: 0.9em + margin-top: 0.5em + position: relative + text-align: center + // http://webdesignerwall.com/tutorials/css-elastic-videos + .video-container + position: relative + padding-top: (9 / 16 * 100)% // 16:9 ratio + height: 0 + overflow: hidden + iframe, object, embed + position: absolute + top: 0 + left: 0 + width: 100% + height: 100% + margin-top: 0 + +.article-more-link a + display: inline-block + line-height: 1em + padding: 6px 15px + border-radius: 15px + background: color-background + color: color-grey + text-shadow: 0 1px #fff + text-decoration: none + &:hover + background: color-link + color: #fff + text-decoration: none + text-shadow: 0 1px darken(color-link, 20%) + +.article-footer + clearfix() + font-size: 0.85em + line-height: line-height + border-top: 1px solid color-border + padding-top: line-height + margin: 0 article-padding article-padding + a + color: color-grey + text-decoration: none + &:hover + color: color-default + +.article-tag-list-item + float: left + margin-right: 10px + +.article-tag-list-link + &:before + content: "#" + +.article-comment-link + float: right + &:before + content: "\f075" + font-family: font-icon + padding-right: 8px + +.article-share-link + cursor: pointer + float: right + margin-left: 20px + &:before + content: "\f064" + font-family: font-icon + padding-right: 6px + +#article-nav + clearfix() + position: relative + @media mq-normal + margin: block-margin 0 + &:before + absolute-center(8px) + content: "" + border-radius: 50% + background: color-border + box-shadow: 0 1px 2px #fff + +.article-nav-link-wrap + text-decoration: none + text-shadow: 0 1px #fff + color: color-grey + box-sizing: border-box + margin-top: block-margin + text-align: center + display: block + &:hover + color: color-default + @media mq-normal + width: 50% + margin-top: 0 + +#article-nav-newer + @media mq-normal + float: left + text-align: right + padding-right: 20px + +#article-nav-older + @media mq-normal + float: right + text-align: left + padding-left: 20px + +.article-nav-caption + text-transform: uppercase + letter-spacing: 2px + color: color-border + line-height: 1em + font-weight: bold + #article-nav-newer & + margin-right: -2px + +.article-nav-title + font-size: 0.85em + line-height: line-height + margin-top: 0.5em + +.article-share-box + position: absolute + display: none + background: #fff + box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.2) + border-radius: 3px + margin-left: -145px + overflow: hidden + z-index: 1 + &.on + display: block + +.article-share-input + width: 100% + background: none + box-sizing: border-box + font: 14px font-sans + padding: 0 15px + color: color-default + outline: none + border: 1px solid color-border + border-radius: 3px 3px 0 0 + height: 36px + line-height: 36px + +.article-share-links + clearfix() + background: color-background + +$article-share-link + width: 50px + height: 36px + display: block + float: left + position: relative + color: #999 + text-shadow: 0 1px #fff + &:before + font-size: 20px + font-family: font-icon + absolute-center(@font-size) + text-align: center + &:hover + color: #fff + +.article-share-twitter + @extend $article-share-link + &:before + content: "\f099" + &:hover + background: color-twitter + text-shadow: 0 1px darken(color-twitter, 20%) + +.article-share-facebook + @extend $article-share-link + &:before + content: "\f09a" + &:hover + background: color-facebook + text-shadow: 0 1px darken(color-facebook, 20%) + +.article-share-pinterest + @extend $article-share-link + &:before + content: "\f0d2" + &:hover + background: color-pinterest + text-shadow: 0 1px darken(color-pinterest, 20%) + +.article-share-google + @extend $article-share-link + &:before + content: "\f0d5" + &:hover + background: color-google + text-shadow: 0 1px darken(color-google, 20%) + +.article-gallery + background: #000 + position: relative + +.article-gallery-photos + position: relative + overflow: hidden + +.article-gallery-img + display: none + max-width: 100% + &:first-child + display: block + &.loaded + position: absolute + display: block + img + display: block + max-width: 100% + margin: 0 auto +/* +$article-gallery-ctrl + position: absolute + top: 0 + height: 100% + width: 60px + color: #fff + text-shadow: 0 0 3px rgba(0, 0, 0, 0.3) + opacity: 0.3 + transition: opacity 0.2s + cursor: pointer + &:hover + opacity: 0.8 + &:before + font-size: 30px + font-family: font-icon + position: absolute + top: 50% + margin-top: @font-size * -0.5 + +.article-gallery-prev + @extend $article-gallery-ctrl + left: 0 + &:before + content: "\f053" + left: 15px + +.article-gallery-next + @extend $article-gallery-ctrl + right: 0 + &:before + content: "\f054" + right: 15px*/ \ No newline at end of file diff --git a/_blog_src/themes/landscape/source/css/_partial/comment.styl b/_blog_src/themes/landscape/source/css/_partial/comment.styl new file mode 100644 index 000000000..296b7dd6b --- /dev/null +++ b/_blog_src/themes/landscape/source/css/_partial/comment.styl @@ -0,0 +1,9 @@ +#comments + background: #fff + box-shadow: 1px 2px 3px #ddd + padding: article-padding + border: 1px solid color-border + border-radius: 3px + margin: block-margin 0 + a + color: color-link \ No newline at end of file diff --git a/_blog_src/themes/landscape/source/css/_partial/footer.styl b/_blog_src/themes/landscape/source/css/_partial/footer.styl new file mode 100644 index 000000000..fe2fd2462 --- /dev/null +++ b/_blog_src/themes/landscape/source/css/_partial/footer.styl @@ -0,0 +1,14 @@ +#footer + background: color-footer-background + padding: 50px 0 + border-top: 1px solid color-border + color: color-grey + a + color: color-link + text-decoration: none + &:hover + text-decoration: underline + +#footer-info + line-height: line-height + font-size: 0.85em \ No newline at end of file diff --git a/_blog_src/themes/landscape/source/css/_partial/header.styl b/_blog_src/themes/landscape/source/css/_partial/header.styl new file mode 100644 index 000000000..d18ebc8d5 --- /dev/null +++ b/_blog_src/themes/landscape/source/css/_partial/header.styl @@ -0,0 +1,165 @@ +#header + height: banner-height + position: relative + border-bottom: 1px solid color-border + &:before, &:after + content: "" + position: absolute + left: 0 + right: 0 + height: 40px + &:before + top: 0 + background: linear-gradient(rgba(0, 0, 0, 0.2), transparent) + &:after + bottom: 0 + background: linear-gradient(transparent, rgba(0, 0, 0, 0.2)) + +#header-outer + height: 100% + position: relative + +#header-inner + position: relative + overflow: hidden + +#banner + position: absolute + top: 0 + left: 0 + width: 100% + height: 100% + background: url(banner-url) center #000 + background-size: cover + z-index: -1 + +#header-title + text-align: center + height: logo-size + position: absolute + top: 50% + left: 0 + margin-top: logo-size * -0.5 + +$logo-text + text-decoration: none + color: #fff + font-weight: 300 + text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) + +#logo + @extend $logo-text + font-size: logo-size + line-height: logo-size + letter-spacing: 2px + +#subtitle + @extend $logo-text + font-size: subtitle-size + line-height: subtitle-size + letter-spacing: 1px + +#subtitle-wrap + margin-top: subtitle-size + +#main-nav + float: left + margin-left: -15px + +$nav-link + float: left + color: #fff + opacity: 0.6 + text-decoration: none + text-shadow: 0 1px rgba(0, 0, 0, 0.2) + transition: opacity 0.2s + display: block + padding: 20px 15px + &:hover + opacity: 1 + +.nav-icon + @extend $nav-link + font-family: font-icon + text-align: center + font-size: font-size + width: font-size + height: font-size + padding: 20px 15px + position: relative + cursor: pointer + +.main-nav-link + @extend $nav-link + font-weight: 300 + letter-spacing: 1px + @media mq-mobile + display: none + +#main-nav-toggle + display: none + &:before + content: "\f0c9" + @media mq-mobile + display: block + +#sub-nav + float: right + margin-right: -15px + +#nav-rss-link + &:before + content: "\f09e" + +#nav-search-btn + &:before + content: "\f002" + +#search-form-wrap + position: absolute + top: 15px + width: 150px + height: 30px + right: -150px + opacity: 0 + transition: 0.2s ease-out + &.on + opacity: 1 + right: 0 + @media mq-mobile + width: 100% + right: -100% + +.search-form + position: absolute + top: 0 + left: 0 + right: 0 + background: #fff + padding: 5px 15px + border-radius: 15px + box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) + +.search-form-input + border: none + background: none + color: color-default + width: 100% + font: 13px font-sans + outline: none + &::-webkit-search-results-decoration + &::-webkit-search-cancel-button + -webkit-appearance: none + +.search-form-submit + position: absolute + top: 50% + right: 10px + margin-top: -7px + font: 13px font-icon + border: none + background: none + color: #bbb + cursor: pointer + &:hover, &:focus + color: #777 \ No newline at end of file diff --git a/_blog_src/themes/landscape/source/css/_partial/highlight.styl b/_blog_src/themes/landscape/source/css/_partial/highlight.styl new file mode 100644 index 000000000..9151638a0 --- /dev/null +++ b/_blog_src/themes/landscape/source/css/_partial/highlight.styl @@ -0,0 +1,154 @@ +// https://github.com/chriskempson/tomorrow-theme +highlight-background = #2d2d2d +highlight-current-line = #393939 +highlight-selection = #515151 +highlight-foreground = #cccccc +highlight-comment = #999999 +highlight-red = #f2777a +highlight-orange = #f99157 +highlight-yellow = #ffcc66 +highlight-green = #99cc99 +highlight-aqua = #66cccc +highlight-blue = #6699cc +highlight-purple = #cc99cc + +$code-block + background: highlight-background + margin: 0 article-padding * -1 + padding: 15px article-padding + border-style: solid + border-color: color-border + border-width: 1px 0 + overflow: auto + color: highlight-foreground + line-height: font-size * line-height + +$line-numbers + color: #666 + font-size: 0.85em + +.article-entry + pre, code + font-family: font-mono + code + background: color-background + text-shadow: 0 1px #fff + padding: 0 0.3em + pre + @extend $code-block + code + background: none + text-shadow: none + padding: 0 + .highlight + @extend $code-block + pre + border: none + margin: 0 + padding: 0 + table + margin: 0 + width: auto + td + border: none + padding: 0 + figcaption + clearfix() + font-size: 0.85em + color: highlight-comment + line-height: 1em + margin-bottom: 1em + a + float: right + .gutter pre + @extend $line-numbers + text-align: right + padding-right: 20px + .gist + margin: 0 article-padding * -1 + border-style: solid + border-color: color-border + border-width: 1px 0 + background: highlight-background + padding: 15px article-padding 15px 0 + .gist-file + border: none + font-family: font-mono + margin: 0 + .gist-data + background: none + border: none + .line-numbers + @extend $line-numbers + background: none + border: none + padding: 0 20px 0 0 + .line-data + padding: 0 !important + .highlight + margin: 0 + padding: 0 + border: none + .gist-meta + background: highlight-background + color: highlight-comment + font: 0.85em font-sans + text-shadow: 0 0 + padding: 0 + margin-top: 1em + margin-left: article-padding + a + color: color-link + font-weight: normal + &:hover + text-decoration: underline + +pre + .comment + .title + color: highlight-comment + .variable + .attribute + .tag + .regexp + .ruby .constant + .xml .tag .title + .xml .pi + .xml .doctype + .html .doctype + .css .id + .css .class + .css .pseudo + color: highlight-red + .number + .preprocessor + .built_in + .literal + .params + .constant + color: highlight-orange + .class + .ruby .class .title + .css .rules .attribute + color: highlight-green + .string + .value + .inheritance + .header + .ruby .symbol + .xml .cdata + color: highlight-green + .css .hexcolor + color: highlight-aqua + .function + .python .decorator + .python .title + .ruby .function .title + .ruby .title .keyword + .perl .sub + .javascript .title + .coffeescript .title + color: highlight-blue + .keyword + .javascript .function + color: highlight-purple \ No newline at end of file diff --git a/_blog_src/themes/landscape/source/css/_partial/mobile.styl b/_blog_src/themes/landscape/source/css/_partial/mobile.styl new file mode 100644 index 000000000..eb68b3a2d --- /dev/null +++ b/_blog_src/themes/landscape/source/css/_partial/mobile.styl @@ -0,0 +1,19 @@ +@media mq-mobile + #mobile-nav + position: absolute + top: 0 + left: 0 + width: mobile-nav-width + height: 100% + background: color-mobile-nav-background + border-right: 1px solid #fff + +@media mq-mobile + .mobile-nav-link + display: block + color: color-grey + text-decoration: none + padding: 15px 20px + font-weight: bold + &:hover + color: #fff diff --git a/_blog_src/themes/landscape/source/css/_partial/sidebar-aside.styl b/_blog_src/themes/landscape/source/css/_partial/sidebar-aside.styl new file mode 100644 index 000000000..838b1675b --- /dev/null +++ b/_blog_src/themes/landscape/source/css/_partial/sidebar-aside.styl @@ -0,0 +1,27 @@ +#sidebar + @media mq-normal + column(sidebar-column) + +.widget-wrap + margin: block-margin 0 + +.widget-title + @extend $block-caption + +.widget + color: color-sidebar-text + text-shadow: 0 1px #fff + background: color-widget-background + box-shadow: 0 -1px 4px color-widget-border inset + border: 1px solid color-widget-border + padding: 15px + border-radius: 3px + a + color: color-link + text-decoration: none + &:hover + text-decoration: underline + ul, ol, dl + ul, ol, dl + margin-left: 15px + list-style: disc \ No newline at end of file diff --git a/_blog_src/themes/landscape/source/css/_partial/sidebar-bottom.styl b/_blog_src/themes/landscape/source/css/_partial/sidebar-bottom.styl new file mode 100644 index 000000000..b3852753c --- /dev/null +++ b/_blog_src/themes/landscape/source/css/_partial/sidebar-bottom.styl @@ -0,0 +1,15 @@ +.widget-wrap + margin-bottom: block-margin !important + @media mq-normal + column(sidebar-column) + +.widget-title + color: #ccc + text-transform: uppercase + letter-spacing: 2px + margin-bottom: 1em + line-height: 1em + font-weight: bold + +.widget + color: color-grey \ No newline at end of file diff --git a/_blog_src/themes/landscape/source/css/_partial/sidebar.styl b/_blog_src/themes/landscape/source/css/_partial/sidebar.styl new file mode 100644 index 000000000..0c12b4c4d --- /dev/null +++ b/_blog_src/themes/landscape/source/css/_partial/sidebar.styl @@ -0,0 +1,34 @@ +if sidebar is bottom + @import "sidebar-bottom" +else + @import "sidebar-aside" + +.widget + @extend $base-style + line-height: line-height + word-wrap: break-word + font-size: 0.9em + ul, ol + list-style: none + margin: 0 + ul, ol + margin: 0 20px + ul + list-style: disc + ol + list-style: decimal + +.category-list-count +.tag-list-count +.archive-list-count + padding-left: 5px + color: color-grey + font-size: 0.85em + &:before + content: "(" + &:after + content: ")" + +.tagcloud + a + margin-right: 5px \ No newline at end of file diff --git a/_blog_src/themes/landscape/source/css/_util/grid.styl b/_blog_src/themes/landscape/source/css/_util/grid.styl new file mode 100644 index 000000000..2a14dd238 --- /dev/null +++ b/_blog_src/themes/landscape/source/css/_util/grid.styl @@ -0,0 +1,38 @@ +///////////////// +// Semantic.gs // for Stylus: http://learnboost.github.com/stylus/ +///////////////// + +// Utility function — you should never need to modify this +// _gridsystem-width = (column-width + gutter-width) * columns +gridsystem-width(_columns = columns) + (column-width + gutter-width) * _columns + +// Set @total-width to 100% for a fluid layout +// total-width = gridsystem-width(columns) +total-width = 100% + +////////// +// GRID // +////////// + +body + clearfix() + width: 100% + +row(_columns = columns) + clearfix() + display: block + width: total-width * ((gutter-width + gridsystem-width(_columns)) / gridsystem-width(_columns)) + margin: 0 total-width * (((gutter-width * .5) / gridsystem-width(_columns)) * -1) + +column(x, _columns = columns) + display: inline + float: left + width: total-width * ((((gutter-width + column-width) * x) - gutter-width) / gridsystem-width(_columns)) + margin: 0 total-width * ((gutter-width * .5) / gridsystem-width(_columns)) + +push(offset = 1) + margin-left: total-width * (((gutter-width + column-width) * offset) / gridsystem-width(columns)) + +pull(offset = 1) + margin-right: total-width * (((gutter-width + column-width) * offset) / gridsystem-width(columns)) \ No newline at end of file diff --git a/_blog_src/themes/landscape/source/css/_util/mixin.styl b/_blog_src/themes/landscape/source/css/_util/mixin.styl new file mode 100644 index 000000000..b56f03778 --- /dev/null +++ b/_blog_src/themes/landscape/source/css/_util/mixin.styl @@ -0,0 +1,31 @@ +// http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ +hide-text() + text-indent: 100% + white-space: nowrap + overflow: hidden + +// http://codepen.io/shshaw/full/gEiDt +absolute-center(width, height = width) + // margin: auto + // position: absolute + // top: 50% + // top: 0 + // left: 0 + // bottom: 0 + // right: 0 + // width: width + // height: height + // overflow: auto + width: width + height: height + position: absolute + top: 50% + left: 50% + margin-top: width * -0.5 + margin-left: height * -0.5 + +avoid-column-break() + vendor("column-break-inside", avoid, only: webkit) + page-break-inside: avoid // for firefox + overflow: hidden // fix for firefox + break-inside: avoid-column diff --git a/_blog_src/themes/landscape/source/css/_variables.styl b/_blog_src/themes/landscape/source/css/_variables.styl new file mode 100644 index 000000000..054ffaf60 --- /dev/null +++ b/_blog_src/themes/landscape/source/css/_variables.styl @@ -0,0 +1,56 @@ +// Colors +color-default = #555 +color-grey = #999 +color-border = #ddd +color-link = #258fb8 +color-background = #eee +color-sidebar-text = #777 +color-widget-background = #ddd +color-widget-border = #ccc +color-footer-background = #262a30 +color-mobile-nav-background = #191919 +color-twitter = #00aced +color-facebook = #3b5998 +color-pinterest = #cb2027 +color-google = #dd4b39 + +// Fonts +font-sans = "Helvetica Neue", Helvetica, Arial, sans-serif +font-serif = Georgia, "Times New Roman", serif +font-mono = "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace +font-icon = FontAwesome +font-icon-path = "fonts/fontawesome-webfont" +font-icon-version = "4.0.3" +font-size = 14px +line-height = 1.6em +line-height-title = 1.1em + +// Header +logo-size = 40px +subtitle-size = 16px +banner-height = 300px +banner-url = "images/banner.jpg" + +sidebar = hexo-config("sidebar") + +// Layout +block-margin = 50px +article-padding = 20px +mobile-nav-width = 280px +main-column = 9 +sidebar-column = 3 + +if sidebar and sidebar isnt bottom + _sidebar-column = sidebar-column +else + _sidebar-column = 0 + +// Grids +column-width = 80px +gutter-width = 20px +columns = main-column + _sidebar-column + +// Media queries +mq-mobile = "screen and (max-width: 479px)" +mq-tablet = "screen and (min-width: 480px) and (max-width: 767px)" +mq-normal = "screen and (min-width: 768px)" \ No newline at end of file diff --git a/_blog_src/themes/landscape/source/css/fonts/FontAwesome.otf b/_blog_src/themes/landscape/source/css/fonts/FontAwesome.otf new file mode 100644 index 000000000..8b0f54e47 Binary files /dev/null and b/_blog_src/themes/landscape/source/css/fonts/FontAwesome.otf differ diff --git a/_blog_src/themes/landscape/source/css/fonts/fontawesome-webfont.eot b/_blog_src/themes/landscape/source/css/fonts/fontawesome-webfont.eot new file mode 100644 index 000000000..7c79c6a6b Binary files /dev/null and b/_blog_src/themes/landscape/source/css/fonts/fontawesome-webfont.eot differ diff --git a/_blog_src/themes/landscape/source/css/fonts/fontawesome-webfont.svg b/_blog_src/themes/landscape/source/css/fonts/fontawesome-webfont.svg new file mode 100644 index 000000000..45fdf3383 --- /dev/null +++ b/_blog_src/themes/landscape/source/css/fonts/fontawesome-webfont.svg @@ -0,0 +1,414 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/_blog_src/themes/landscape/source/css/fonts/fontawesome-webfont.ttf b/_blog_src/themes/landscape/source/css/fonts/fontawesome-webfont.ttf new file mode 100644 index 000000000..e89738de5 Binary files /dev/null and b/_blog_src/themes/landscape/source/css/fonts/fontawesome-webfont.ttf differ diff --git a/_blog_src/themes/landscape/source/css/fonts/fontawesome-webfont.woff b/_blog_src/themes/landscape/source/css/fonts/fontawesome-webfont.woff new file mode 100644 index 000000000..8c1748aab Binary files /dev/null and b/_blog_src/themes/landscape/source/css/fonts/fontawesome-webfont.woff differ diff --git a/_blog_src/themes/landscape/source/css/images/banner.jpg b/_blog_src/themes/landscape/source/css/images/banner.jpg new file mode 100644 index 000000000..c1bd998f7 Binary files /dev/null and b/_blog_src/themes/landscape/source/css/images/banner.jpg differ diff --git a/_blog_src/themes/landscape/source/css/style.styl b/_blog_src/themes/landscape/source/css/style.styl new file mode 100644 index 000000000..ffb0e2a73 --- /dev/null +++ b/_blog_src/themes/landscape/source/css/style.styl @@ -0,0 +1,88 @@ +@import "nib" +@import "_variables" +@import "_util/mixin" +@import "_util/grid" + +global-reset() + +input, button + margin: 0 + padding: 0 + &::-moz-focus-inner + border: 0 + padding: 0 + +@font-face + font-family: FontAwesome + font-style: normal + font-weight: normal + src: url(font-icon-path + ".eot?v=#" + font-icon-version) + src: url(font-icon-path + ".eot?#iefix&v=#" + font-icon-version) format("embedded-opentype"), + url(font-icon-path + ".woff?v=#" + font-icon-version) format("woff"), + url(font-icon-path + ".ttf?v=#" + font-icon-version) format("truetype"), + url(font-icon-path + ".svg#fontawesomeregular?v=#" + font-icon-version) format("svg") + +html, body, #container + height: 100% + +body + background: color-background + font: font-size font-sans + -webkit-text-size-adjust: 100% + +.outer + clearfix() + max-width: (column-width + gutter-width) * columns + gutter-width + margin: 0 auto + padding: 0 gutter-width + +.inner + column(columns) + +.left, .alignleft + float: left + +.right, .alignright + float: right + +.clear + clear: both + +#container + position: relative + +.mobile-nav-on + overflow: hidden + +#wrap + height: 100% + width: 100% + position: absolute + top: 0 + left: 0 + transition: 0.2s ease-out + z-index: 1 + background: color-background + .mobile-nav-on & + left: mobile-nav-width + +if sidebar and sidebar isnt bottom + #main + @media mq-normal + column(main-column) + +if sidebar is left + #main + float: right + +@import "_extend" +@import "_partial/header" +@import "_partial/article" +@import "_partial/comment" +@import "_partial/archive" +@import "_partial/footer" +@import "_partial/highlight" +@import "_partial/mobile" + +if sidebar + @import "_partial/sidebar" \ No newline at end of file diff --git a/_blog_src/themes/landscape/source/fancybox/blank.gif b/_blog_src/themes/landscape/source/fancybox/blank.gif new file mode 100644 index 000000000..35d42e808 Binary files /dev/null and b/_blog_src/themes/landscape/source/fancybox/blank.gif differ diff --git a/_blog_src/themes/landscape/source/fancybox/fancybox_loading.gif b/_blog_src/themes/landscape/source/fancybox/fancybox_loading.gif new file mode 100644 index 000000000..a03a40c09 Binary files /dev/null and b/_blog_src/themes/landscape/source/fancybox/fancybox_loading.gif differ diff --git a/_blog_src/themes/landscape/source/fancybox/fancybox_loading@2x.gif b/_blog_src/themes/landscape/source/fancybox/fancybox_loading@2x.gif new file mode 100644 index 000000000..9205aeb09 Binary files /dev/null and b/_blog_src/themes/landscape/source/fancybox/fancybox_loading@2x.gif differ diff --git a/_blog_src/themes/landscape/source/fancybox/fancybox_overlay.png b/_blog_src/themes/landscape/source/fancybox/fancybox_overlay.png new file mode 100644 index 000000000..a4391396a Binary files /dev/null and b/_blog_src/themes/landscape/source/fancybox/fancybox_overlay.png differ diff --git a/_blog_src/themes/landscape/source/fancybox/fancybox_sprite.png b/_blog_src/themes/landscape/source/fancybox/fancybox_sprite.png new file mode 100644 index 000000000..fd8d5ca56 Binary files /dev/null and b/_blog_src/themes/landscape/source/fancybox/fancybox_sprite.png differ diff --git a/_blog_src/themes/landscape/source/fancybox/fancybox_sprite@2x.png b/_blog_src/themes/landscape/source/fancybox/fancybox_sprite@2x.png new file mode 100644 index 000000000..d0e4779f4 Binary files /dev/null and b/_blog_src/themes/landscape/source/fancybox/fancybox_sprite@2x.png differ diff --git a/_blog_src/themes/landscape/source/fancybox/helpers/fancybox_buttons.png b/_blog_src/themes/landscape/source/fancybox/helpers/fancybox_buttons.png new file mode 100644 index 000000000..078720727 Binary files /dev/null and b/_blog_src/themes/landscape/source/fancybox/helpers/fancybox_buttons.png differ diff --git a/_blog_src/themes/landscape/source/fancybox/helpers/jquery.fancybox-buttons.css b/_blog_src/themes/landscape/source/fancybox/helpers/jquery.fancybox-buttons.css new file mode 100644 index 000000000..a26273af2 --- /dev/null +++ b/_blog_src/themes/landscape/source/fancybox/helpers/jquery.fancybox-buttons.css @@ -0,0 +1,97 @@ +#fancybox-buttons { + position: fixed; + left: 0; + width: 100%; + z-index: 8050; +} + +#fancybox-buttons.top { + top: 10px; +} + +#fancybox-buttons.bottom { + bottom: 10px; +} + +#fancybox-buttons ul { + display: block; + width: 166px; + height: 30px; + margin: 0 auto; + padding: 0; + list-style: none; + border: 1px solid #111; + border-radius: 3px; + -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); + -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); + box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); + background: rgb(50,50,50); + background: -moz-linear-gradient(top, rgb(68,68,68) 0%, rgb(52,52,52) 50%, rgb(41,41,41) 50%, rgb(51,51,51) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(68,68,68)), color-stop(50%,rgb(52,52,52)), color-stop(50%,rgb(41,41,41)), color-stop(100%,rgb(51,51,51))); + background: -webkit-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); + background: -o-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); + background: -ms-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); + background: linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 ); +} + +#fancybox-buttons ul li { + float: left; + margin: 0; + padding: 0; +} + +#fancybox-buttons a { + display: block; + width: 30px; + height: 30px; + text-indent: -9999px; + background-color: transparent; + background-image: url('fancybox_buttons.png'); + background-repeat: no-repeat; + outline: none; + opacity: 0.8; +} + +#fancybox-buttons a:hover { + opacity: 1; +} + +#fancybox-buttons a.btnPrev { + background-position: 5px 0; +} + +#fancybox-buttons a.btnNext { + background-position: -33px 0; + border-right: 1px solid #3e3e3e; +} + +#fancybox-buttons a.btnPlay { + background-position: 0 -30px; +} + +#fancybox-buttons a.btnPlayOn { + background-position: -30px -30px; +} + +#fancybox-buttons a.btnToggle { + background-position: 3px -60px; + border-left: 1px solid #111; + border-right: 1px solid #3e3e3e; + width: 35px +} + +#fancybox-buttons a.btnToggleOn { + background-position: -27px -60px; +} + +#fancybox-buttons a.btnClose { + border-left: 1px solid #111; + width: 35px; + background-position: -56px 0px; +} + +#fancybox-buttons a.btnDisabled { + opacity : 0.4; + cursor: default; +} \ No newline at end of file diff --git a/_blog_src/themes/landscape/source/fancybox/helpers/jquery.fancybox-buttons.js b/_blog_src/themes/landscape/source/fancybox/helpers/jquery.fancybox-buttons.js new file mode 100644 index 000000000..352bb5f0d --- /dev/null +++ b/_blog_src/themes/landscape/source/fancybox/helpers/jquery.fancybox-buttons.js @@ -0,0 +1,122 @@ + /*! + * Buttons helper for fancyBox + * version: 1.0.5 (Mon, 15 Oct 2012) + * @requires fancyBox v2.0 or later + * + * Usage: + * $(".fancybox").fancybox({ + * helpers : { + * buttons: { + * position : 'top' + * } + * } + * }); + * + */ +;(function ($) { + //Shortcut for fancyBox object + var F = $.fancybox; + + //Add helper object + F.helpers.buttons = { + defaults : { + skipSingle : false, // disables if gallery contains single image + position : 'top', // 'top' or 'bottom' + tpl : '
' + }, + + list : null, + buttons: null, + + beforeLoad: function (opts, obj) { + //Remove self if gallery do not have at least two items + + if (opts.skipSingle && obj.group.length < 2) { + obj.helpers.buttons = false; + obj.closeBtn = true; + + return; + } + + //Increase top margin to give space for buttons + obj.margin[ opts.position === 'bottom' ? 2 : 0 ] += 30; + }, + + onPlayStart: function () { + if (this.buttons) { + this.buttons.play.attr('title', 'Pause slideshow').addClass('btnPlayOn'); + } + }, + + onPlayEnd: function () { + if (this.buttons) { + this.buttons.play.attr('title', 'Start slideshow').removeClass('btnPlayOn'); + } + }, + + afterShow: function (opts, obj) { + var buttons = this.buttons; + + if (!buttons) { + this.list = $(opts.tpl).addClass(opts.position).appendTo('body'); + + buttons = { + prev : this.list.find('.btnPrev').click( F.prev ), + next : this.list.find('.btnNext').click( F.next ), + play : this.list.find('.btnPlay').click( F.play ), + toggle : this.list.find('.btnToggle').click( F.toggle ), + close : this.list.find('.btnClose').click( F.close ) + } + } + + //Prev + if (obj.index > 0 || obj.loop) { + buttons.prev.removeClass('btnDisabled'); + } else { + buttons.prev.addClass('btnDisabled'); + } + + //Next / Play + if (obj.loop || obj.index < obj.group.length - 1) { + buttons.next.removeClass('btnDisabled'); + buttons.play.removeClass('btnDisabled'); + + } else { + buttons.next.addClass('btnDisabled'); + buttons.play.addClass('btnDisabled'); + } + + this.buttons = buttons; + + this.onUpdate(opts, obj); + }, + + onUpdate: function (opts, obj) { + var toggle; + + if (!this.buttons) { + return; + } + + toggle = this.buttons.toggle.removeClass('btnDisabled btnToggleOn'); + + //Size toggle button + if (obj.canShrink) { + toggle.addClass('btnToggleOn'); + + } else if (!obj.canExpand) { + toggle.addClass('btnDisabled'); + } + }, + + beforeClose: function () { + if (this.list) { + this.list.remove(); + } + + this.list = null; + this.buttons = null; + } + }; + +}(jQuery)); diff --git a/_blog_src/themes/landscape/source/fancybox/helpers/jquery.fancybox-media.js b/_blog_src/themes/landscape/source/fancybox/helpers/jquery.fancybox-media.js new file mode 100644 index 000000000..62737a517 --- /dev/null +++ b/_blog_src/themes/landscape/source/fancybox/helpers/jquery.fancybox-media.js @@ -0,0 +1,199 @@ +/*! + * Media helper for fancyBox + * version: 1.0.6 (Fri, 14 Jun 2013) + * @requires fancyBox v2.0 or later + * + * Usage: + * $(".fancybox").fancybox({ + * helpers : { + * media: true + * } + * }); + * + * Set custom URL parameters: + * $(".fancybox").fancybox({ + * helpers : { + * media: { + * youtube : { + * params : { + * autoplay : 0 + * } + * } + * } + * } + * }); + * + * Or: + * $(".fancybox").fancybox({, + * helpers : { + * media: true + * }, + * youtube : { + * autoplay: 0 + * } + * }); + * + * Supports: + * + * Youtube + * http://www.youtube.com/watch?v=opj24KnzrWo + * http://www.youtube.com/embed/opj24KnzrWo + * http://youtu.be/opj24KnzrWo + * http://www.youtube-nocookie.com/embed/opj24KnzrWo + * Vimeo + * http://vimeo.com/40648169 + * http://vimeo.com/channels/staffpicks/38843628 + * http://vimeo.com/groups/surrealism/videos/36516384 + * http://player.vimeo.com/video/45074303 + * Metacafe + * http://www.metacafe.com/watch/7635964/dr_seuss_the_lorax_movie_trailer/ + * http://www.metacafe.com/watch/7635964/ + * Dailymotion + * http://www.dailymotion.com/video/xoytqh_dr-seuss-the-lorax-premiere_people + * Twitvid + * http://twitvid.com/QY7MD + * Twitpic + * http://twitpic.com/7p93st + * Instagram + * http://instagr.am/p/IejkuUGxQn/ + * http://instagram.com/p/IejkuUGxQn/ + * Google maps + * http://maps.google.com/maps?q=Eiffel+Tower,+Avenue+Gustave+Eiffel,+Paris,+France&t=h&z=17 + * http://maps.google.com/?ll=48.857995,2.294297&spn=0.007666,0.021136&t=m&z=16 + * http://maps.google.com/?ll=48.859463,2.292626&spn=0.000965,0.002642&t=m&z=19&layer=c&cbll=48.859524,2.292532&panoid=YJ0lq28OOy3VT2IqIuVY0g&cbp=12,151.58,,0,-15.56 + */ +;(function ($) { + "use strict"; + + //Shortcut for fancyBox object + var F = $.fancybox, + format = function( url, rez, params ) { + params = params || ''; + + if ( $.type( params ) === "object" ) { + params = $.param(params, true); + } + + $.each(rez, function(key, value) { + url = url.replace( '$' + key, value || '' ); + }); + + if (params.length) { + url += ( url.indexOf('?') > 0 ? '&' : '?' ) + params; + } + + return url; + }; + + //Add helper object + F.helpers.media = { + defaults : { + youtube : { + matcher : /(youtube\.com|youtu\.be|youtube-nocookie\.com)\/(watch\?v=|v\/|u\/|embed\/?)?(videoseries\?list=(.*)|[\w-]{11}|\?listType=(.*)&list=(.*)).*/i, + params : { + autoplay : 1, + autohide : 1, + fs : 1, + rel : 0, + hd : 1, + wmode : 'opaque', + enablejsapi : 1 + }, + type : 'iframe', + url : '//www.youtube.com/embed/$3' + }, + vimeo : { + matcher : /(?:vimeo(?:pro)?.com)\/(?:[^\d]+)?(\d+)(?:.*)/, + params : { + autoplay : 1, + hd : 1, + show_title : 1, + show_byline : 1, + show_portrait : 0, + fullscreen : 1 + }, + type : 'iframe', + url : '//player.vimeo.com/video/$1' + }, + metacafe : { + matcher : /metacafe.com\/(?:watch|fplayer)\/([\w\-]{1,10})/, + params : { + autoPlay : 'yes' + }, + type : 'swf', + url : function( rez, params, obj ) { + obj.swf.flashVars = 'playerVars=' + $.param( params, true ); + + return '//www.metacafe.com/fplayer/' + rez[1] + '/.swf'; + } + }, + dailymotion : { + matcher : /dailymotion.com\/video\/(.*)\/?(.*)/, + params : { + additionalInfos : 0, + autoStart : 1 + }, + type : 'swf', + url : '//www.dailymotion.com/swf/video/$1' + }, + twitvid : { + matcher : /twitvid\.com\/([a-zA-Z0-9_\-\?\=]+)/i, + params : { + autoplay : 0 + }, + type : 'iframe', + url : '//www.twitvid.com/embed.php?guid=$1' + }, + twitpic : { + matcher : /twitpic\.com\/(?!(?:place|photos|events)\/)([a-zA-Z0-9\?\=\-]+)/i, + type : 'image', + url : '//twitpic.com/show/full/$1/' + }, + instagram : { + matcher : /(instagr\.am|instagram\.com)\/p\/([a-zA-Z0-9_\-]+)\/?/i, + type : 'image', + url : '//$1/p/$2/media/?size=l' + }, + google_maps : { + matcher : /maps\.google\.([a-z]{2,3}(\.[a-z]{2})?)\/(\?ll=|maps\?)(.*)/i, + type : 'iframe', + url : function( rez ) { + return '//maps.google.' + rez[1] + '/' + rez[3] + '' + rez[4] + '&output=' + (rez[4].indexOf('layer=c') > 0 ? 'svembed' : 'embed'); + } + } + }, + + beforeLoad : function(opts, obj) { + var url = obj.href || '', + type = false, + what, + item, + rez, + params; + + for (what in opts) { + if (opts.hasOwnProperty(what)) { + item = opts[ what ]; + rez = url.match( item.matcher ); + + if (rez) { + type = item.type; + params = $.extend(true, {}, item.params, obj[ what ] || ($.isPlainObject(opts[ what ]) ? opts[ what ].params : null)); + + url = $.type( item.url ) === "function" ? item.url.call( this, rez, params, obj ) : format( item.url, rez, params ); + + break; + } + } + } + + if (type) { + obj.href = url; + obj.type = type; + + obj.autoHeight = false; + } + } + }; + +}(jQuery)); \ No newline at end of file diff --git a/_blog_src/themes/landscape/source/fancybox/helpers/jquery.fancybox-thumbs.css b/_blog_src/themes/landscape/source/fancybox/helpers/jquery.fancybox-thumbs.css new file mode 100644 index 000000000..63d294368 --- /dev/null +++ b/_blog_src/themes/landscape/source/fancybox/helpers/jquery.fancybox-thumbs.css @@ -0,0 +1,55 @@ +#fancybox-thumbs { + position: fixed; + left: 0; + width: 100%; + overflow: hidden; + z-index: 8050; +} + +#fancybox-thumbs.bottom { + bottom: 2px; +} + +#fancybox-thumbs.top { + top: 2px; +} + +#fancybox-thumbs ul { + position: relative; + list-style: none; + margin: 0; + padding: 0; +} + +#fancybox-thumbs ul li { + float: left; + padding: 1px; + opacity: 0.5; +} + +#fancybox-thumbs ul li.active { + opacity: 0.75; + padding: 0; + border: 1px solid #fff; +} + +#fancybox-thumbs ul li:hover { + opacity: 1; +} + +#fancybox-thumbs ul li a { + display: block; + position: relative; + overflow: hidden; + border: 1px solid #222; + background: #111; + outline: none; +} + +#fancybox-thumbs ul li img { + display: block; + position: relative; + border: 0; + padding: 0; + max-width: none; +} \ No newline at end of file diff --git a/_blog_src/themes/landscape/source/fancybox/helpers/jquery.fancybox-thumbs.js b/_blog_src/themes/landscape/source/fancybox/helpers/jquery.fancybox-thumbs.js new file mode 100644 index 000000000..58c971943 --- /dev/null +++ b/_blog_src/themes/landscape/source/fancybox/helpers/jquery.fancybox-thumbs.js @@ -0,0 +1,165 @@ + /*! + * Thumbnail helper for fancyBox + * version: 1.0.7 (Mon, 01 Oct 2012) + * @requires fancyBox v2.0 or later + * + * Usage: + * $(".fancybox").fancybox({ + * helpers : { + * thumbs: { + * width : 50, + * height : 50 + * } + * } + * }); + * + */ +;(function ($) { + //Shortcut for fancyBox object + var F = $.fancybox; + + //Add helper object + F.helpers.thumbs = { + defaults : { + width : 50, // thumbnail width + height : 50, // thumbnail height + position : 'bottom', // 'top' or 'bottom' + source : function ( item ) { // function to obtain the URL of the thumbnail image + var href; + + if (item.element) { + href = $(item.element).find('img').attr('src'); + } + + if (!href && item.type === 'image' && item.href) { + href = item.href; + } + + return href; + } + }, + + wrap : null, + list : null, + width : 0, + + init: function (opts, obj) { + var that = this, + list, + thumbWidth = opts.width, + thumbHeight = opts.height, + thumbSource = opts.source; + + //Build list structure + list = ''; + + for (var n = 0; n < obj.group.length; n++) { + list += '
    • '; + } + + this.wrap = $('
    ').addClass(opts.position).appendTo('body'); + this.list = $('').appendTo(this.wrap); + + //Load each thumbnail + $.each(obj.group, function (i) { + var el = obj.group[ i ], + href = thumbSource( el ); + + if (!href) { + return; + } + + $("").load(function () { + var width = this.width, + height = this.height, + widthRatio, heightRatio, parent; + + if (!that.list || !width || !height) { + return; + } + + //Calculate thumbnail width/height and center it + widthRatio = width / thumbWidth; + heightRatio = height / thumbHeight; + + parent = that.list.children().eq(i).find('a'); + + if (widthRatio >= 1 && heightRatio >= 1) { + if (widthRatio > heightRatio) { + width = Math.floor(width / heightRatio); + height = thumbHeight; + + } else { + width = thumbWidth; + height = Math.floor(height / widthRatio); + } + } + + $(this).css({ + width : width, + height : height, + top : Math.floor(thumbHeight / 2 - height / 2), + left : Math.floor(thumbWidth / 2 - width / 2) + }); + + parent.width(thumbWidth).height(thumbHeight); + + $(this).hide().appendTo(parent).fadeIn(300); + + }) + .attr('src', href) + .attr('title', el.title); + }); + + //Set initial width + this.width = this.list.children().eq(0).outerWidth(true); + + this.list.width(this.width * (obj.group.length + 1)).css('left', Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5))); + }, + + beforeLoad: function (opts, obj) { + //Remove self if gallery do not have at least two items + if (obj.group.length < 2) { + obj.helpers.thumbs = false; + + return; + } + + //Increase bottom margin to give space for thumbs + obj.margin[ opts.position === 'top' ? 0 : 2 ] += ((opts.height) + 15); + }, + + afterShow: function (opts, obj) { + //Check if exists and create or update list + if (this.list) { + this.onUpdate(opts, obj); + + } else { + this.init(opts, obj); + } + + //Set active element + this.list.children().removeClass('active').eq(obj.index).addClass('active'); + }, + + //Center list + onUpdate: function (opts, obj) { + if (this.list) { + this.list.stop(true).animate({ + 'left': Math.floor($(window).width() * 0.5 - (obj.index * this.width + this.width * 0.5)) + }, 150); + } + }, + + beforeClose: function () { + if (this.wrap) { + this.wrap.remove(); + } + + this.wrap = null; + this.list = null; + this.width = 0; + } + } + +}(jQuery)); \ No newline at end of file diff --git a/_blog_src/themes/landscape/source/fancybox/jquery.fancybox.css b/_blog_src/themes/landscape/source/fancybox/jquery.fancybox.css new file mode 100644 index 000000000..c75d05135 --- /dev/null +++ b/_blog_src/themes/landscape/source/fancybox/jquery.fancybox.css @@ -0,0 +1,273 @@ +/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ +.fancybox-wrap, +.fancybox-skin, +.fancybox-outer, +.fancybox-inner, +.fancybox-image, +.fancybox-wrap iframe, +.fancybox-wrap object, +.fancybox-nav, +.fancybox-nav span, +.fancybox-tmp +{ + padding: 0; + margin: 0; + border: 0; + outline: none; + vertical-align: top; +} + +.fancybox-wrap { + position: absolute; + top: 0; + left: 0; + z-index: 8020; +} + +.fancybox-skin { + position: relative; + background: #f9f9f9; + color: #444; + text-shadow: none; + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + border-radius: 4px; +} + +.fancybox-opened { + z-index: 8030; +} + +.fancybox-opened .fancybox-skin { + -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); +} + +.fancybox-outer, .fancybox-inner { + position: relative; +} + +.fancybox-inner { + overflow: hidden; +} + +.fancybox-type-iframe .fancybox-inner { + -webkit-overflow-scrolling: touch; +} + +.fancybox-error { + color: #444; + font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; + margin: 0; + padding: 15px; + white-space: nowrap; +} + +.fancybox-image, .fancybox-iframe { + display: block; + width: 100%; + height: 100%; +} + +.fancybox-image { + max-width: 100%; + max-height: 100%; +} + +#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { + background-image: url(fancybox_sprite.png); +} + +#fancybox-loading { + position: fixed; + top: 50%; + left: 50%; + margin-top: -22px; + margin-left: -22px; + background-position: 0 -108px; + opacity: 0.8; + cursor: pointer; + z-index: 8060; +} + +#fancybox-loading div { + width: 44px; + height: 44px; + background: url(fancybox_loading.gif) center center no-repeat; +} + +.fancybox-close { + position: absolute; + top: -18px; + right: -18px; + width: 36px; + height: 36px; + cursor: pointer; + z-index: 8040; +} + +.fancybox-nav { + position: absolute; + top: 0; + width: 40%; + height: 100%; + cursor: pointer; + text-decoration: none; + background: transparent url(blank.gif); /* helps IE */ + -webkit-tap-highlight-color: rgba(0,0,0,0); + z-index: 8040; +} + +.fancybox-prev { + left: 0; +} + +.fancybox-next { + right: 0; +} + +.fancybox-nav span { + position: absolute; + top: 50%; + width: 36px; + height: 34px; + margin-top: -18px; + cursor: pointer; + z-index: 8040; + visibility: hidden; +} + +.fancybox-prev span { + left: 10px; + background-position: 0 -36px; +} + +.fancybox-next span { + right: 10px; + background-position: 0 -72px; +} + +.fancybox-nav:hover span { + visibility: visible; +} + +.fancybox-tmp { + position: absolute; + top: -99999px; + left: -99999px; + max-width: 99999px; + max-height: 99999px; + overflow: visible !important; +} + +/* Overlay helper */ + +.fancybox-lock { + overflow: visible !important; + width: auto; +} + +.fancybox-lock body { + overflow: hidden !important; +} + +.fancybox-lock-test { + overflow-y: hidden !important; +} + +.fancybox-overlay { + position: absolute; + top: 0; + left: 0; + overflow: hidden; + display: none; + z-index: 8010; + background: url(fancybox_overlay.png); +} + +.fancybox-overlay-fixed { + position: fixed; + bottom: 0; + right: 0; +} + +.fancybox-lock .fancybox-overlay { + overflow: auto; + overflow-y: scroll; +} + +/* Title helper */ + +.fancybox-title { + visibility: hidden; + font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif; + position: relative; + text-shadow: none; + z-index: 8050; +} + +.fancybox-opened .fancybox-title { + visibility: visible; +} + +.fancybox-title-float-wrap { + position: absolute; + bottom: 0; + right: 50%; + margin-bottom: -35px; + z-index: 8050; + text-align: center; +} + +.fancybox-title-float-wrap .child { + display: inline-block; + margin-right: -100%; + padding: 2px 20px; + background: transparent; /* Fallback for web browsers that doesn't support RGBa */ + background: rgba(0, 0, 0, 0.8); + -webkit-border-radius: 15px; + -moz-border-radius: 15px; + border-radius: 15px; + text-shadow: 0 1px 2px #222; + color: #FFF; + font-weight: bold; + line-height: 24px; + white-space: nowrap; +} + +.fancybox-title-outside-wrap { + position: relative; + margin-top: 10px; + color: #fff; +} + +.fancybox-title-inside-wrap { + padding-top: 10px; +} + +.fancybox-title-over-wrap { + position: absolute; + bottom: 0; + left: 0; + color: #fff; + padding: 10px; + background: #000; + background: rgba(0, 0, 0, .8); +} + +/*Retina graphics!*/ +@media only screen and (-webkit-min-device-pixel-ratio: 1.5), + only screen and (min--moz-device-pixel-ratio: 1.5), + only screen and (min-device-pixel-ratio: 1.5){ + + #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span { + background-image: url(fancybox_sprite@2x.png); + background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/ + } + + #fancybox-loading div { + background-image: url(fancybox_loading@2x.gif); + background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/ + } +} \ No newline at end of file diff --git a/_blog_src/themes/landscape/source/fancybox/jquery.fancybox.js b/_blog_src/themes/landscape/source/fancybox/jquery.fancybox.js new file mode 100644 index 000000000..7a0f8acb0 --- /dev/null +++ b/_blog_src/themes/landscape/source/fancybox/jquery.fancybox.js @@ -0,0 +1,2017 @@ +/*! + * fancyBox - jQuery Plugin + * version: 2.1.5 (Fri, 14 Jun 2013) + * requires jQuery v1.6 or later + * + * Examples at http://fancyapps.com/fancybox/ + * License: www.fancyapps.com/fancybox/#license + * + * Copyright 2012 Janis Skarnelis - janis@fancyapps.com + * + */ + +;(function (window, document, $, undefined) { + "use strict"; + + var H = $("html"), + W = $(window), + D = $(document), + F = $.fancybox = function () { + F.open.apply( this, arguments ); + }, + IE = navigator.userAgent.match(/msie/i), + didUpdate = null, + isTouch = document.createTouch !== undefined, + + isQuery = function(obj) { + return obj && obj.hasOwnProperty && obj instanceof $; + }, + isString = function(str) { + return str && $.type(str) === "string"; + }, + isPercentage = function(str) { + return isString(str) && str.indexOf('%') > 0; + }, + isScrollable = function(el) { + return (el && !(el.style.overflow && el.style.overflow === 'hidden') && ((el.clientWidth && el.scrollWidth > el.clientWidth) || (el.clientHeight && el.scrollHeight > el.clientHeight))); + }, + getScalar = function(orig, dim) { + var value = parseInt(orig, 10) || 0; + + if (dim && isPercentage(orig)) { + value = F.getViewport()[ dim ] / 100 * value; + } + + return Math.ceil(value); + }, + getValue = function(value, dim) { + return getScalar(value, dim) + 'px'; + }; + + $.extend(F, { + // The current version of fancyBox + version: '2.1.5', + + defaults: { + padding : 15, + margin : 20, + + width : 800, + height : 600, + minWidth : 100, + minHeight : 100, + maxWidth : 9999, + maxHeight : 9999, + pixelRatio: 1, // Set to 2 for retina display support + + autoSize : true, + autoHeight : false, + autoWidth : false, + + autoResize : true, + autoCenter : !isTouch, + fitToView : true, + aspectRatio : false, + topRatio : 0.5, + leftRatio : 0.5, + + scrolling : 'auto', // 'auto', 'yes' or 'no' + wrapCSS : '', + + arrows : true, + closeBtn : true, + closeClick : false, + nextClick : false, + mouseWheel : true, + autoPlay : false, + playSpeed : 3000, + preload : 3, + modal : false, + loop : true, + + ajax : { + dataType : 'html', + headers : { 'X-fancyBox': true } + }, + iframe : { + scrolling : 'auto', + preload : true + }, + swf : { + wmode: 'transparent', + allowfullscreen : 'true', + allowscriptaccess : 'always' + }, + + keys : { + next : { + 13 : 'left', // enter + 34 : 'up', // page down + 39 : 'left', // right arrow + 40 : 'up' // down arrow + }, + prev : { + 8 : 'right', // backspace + 33 : 'down', // page up + 37 : 'right', // left arrow + 38 : 'down' // up arrow + }, + close : [27], // escape key + play : [32], // space - start/stop slideshow + toggle : [70] // letter "f" - toggle fullscreen + }, + + direction : { + next : 'left', + prev : 'right' + }, + + scrollOutside : true, + + // Override some properties + index : 0, + type : null, + href : null, + content : null, + title : null, + + // HTML templates + tpl: { + wrap : '
    ', + image : '', + iframe : '', + error : '

    The requested content cannot be loaded.
    Please try again later.

    ', + closeBtn : '', + next : '', + prev : '' + }, + + // Properties for each animation type + // Opening fancyBox + openEffect : 'fade', // 'elastic', 'fade' or 'none' + openSpeed : 250, + openEasing : 'swing', + openOpacity : true, + openMethod : 'zoomIn', + + // Closing fancyBox + closeEffect : 'fade', // 'elastic', 'fade' or 'none' + closeSpeed : 250, + closeEasing : 'swing', + closeOpacity : true, + closeMethod : 'zoomOut', + + // Changing next gallery item + nextEffect : 'elastic', // 'elastic', 'fade' or 'none' + nextSpeed : 250, + nextEasing : 'swing', + nextMethod : 'changeIn', + + // Changing previous gallery item + prevEffect : 'elastic', // 'elastic', 'fade' or 'none' + prevSpeed : 250, + prevEasing : 'swing', + prevMethod : 'changeOut', + + // Enable default helpers + helpers : { + overlay : true, + title : true + }, + + // Callbacks + onCancel : $.noop, // If canceling + beforeLoad : $.noop, // Before loading + afterLoad : $.noop, // After loading + beforeShow : $.noop, // Before changing in current item + afterShow : $.noop, // After opening + beforeChange : $.noop, // Before changing gallery item + beforeClose : $.noop, // Before closing + afterClose : $.noop // After closing + }, + + //Current state + group : {}, // Selected group + opts : {}, // Group options + previous : null, // Previous element + coming : null, // Element being loaded + current : null, // Currently loaded element + isActive : false, // Is activated + isOpen : false, // Is currently open + isOpened : false, // Have been fully opened at least once + + wrap : null, + skin : null, + outer : null, + inner : null, + + player : { + timer : null, + isActive : false + }, + + // Loaders + ajaxLoad : null, + imgPreload : null, + + // Some collections + transitions : {}, + helpers : {}, + + /* + * Static methods + */ + + open: function (group, opts) { + if (!group) { + return; + } + + if (!$.isPlainObject(opts)) { + opts = {}; + } + + // Close if already active + if (false === F.close(true)) { + return; + } + + // Normalize group + if (!$.isArray(group)) { + group = isQuery(group) ? $(group).get() : [group]; + } + + // Recheck if the type of each element is `object` and set content type (image, ajax, etc) + $.each(group, function(i, element) { + var obj = {}, + href, + title, + content, + type, + rez, + hrefParts, + selector; + + if ($.type(element) === "object") { + // Check if is DOM element + if (element.nodeType) { + element = $(element); + } + + if (isQuery(element)) { + obj = { + href : element.data('fancybox-href') || element.attr('href'), + title : $('
    ').text( element.data('fancybox-title') || element.attr('title') ).html(), + isDom : true, + element : element + }; + + if ($.metadata) { + $.extend(true, obj, element.metadata()); + } + + } else { + obj = element; + } + } + + href = opts.href || obj.href || (isString(element) ? element : null); + title = opts.title !== undefined ? opts.title : obj.title || ''; + + content = opts.content || obj.content; + type = content ? 'html' : (opts.type || obj.type); + + if (!type && obj.isDom) { + type = element.data('fancybox-type'); + + if (!type) { + rez = element.prop('class').match(/fancybox\.(\w+)/); + type = rez ? rez[1] : null; + } + } + + if (isString(href)) { + // Try to guess the content type + if (!type) { + if (F.isImage(href)) { + type = 'image'; + + } else if (F.isSWF(href)) { + type = 'swf'; + + } else if (href.charAt(0) === '#') { + type = 'inline'; + + } else if (isString(element)) { + type = 'html'; + content = element; + } + } + + // Split url into two pieces with source url and content selector, e.g, + // "/mypage.html #my_id" will load "/mypage.html" and display element having id "my_id" + if (type === 'ajax') { + hrefParts = href.split(/\s+/, 2); + href = hrefParts.shift(); + selector = hrefParts.shift(); + } + } + + if (!content) { + if (type === 'inline') { + if (href) { + content = $( isString(href) ? href.replace(/.*(?=#[^\s]+$)/, '') : href ); //strip for ie7 + + } else if (obj.isDom) { + content = element; + } + + } else if (type === 'html') { + content = href; + + } else if (!type && !href && obj.isDom) { + type = 'inline'; + content = element; + } + } + + $.extend(obj, { + href : href, + type : type, + content : content, + title : title, + selector : selector + }); + + group[ i ] = obj; + }); + + // Extend the defaults + F.opts = $.extend(true, {}, F.defaults, opts); + + // All options are merged recursive except keys + if (opts.keys !== undefined) { + F.opts.keys = opts.keys ? $.extend({}, F.defaults.keys, opts.keys) : false; + } + + F.group = group; + + return F._start(F.opts.index); + }, + + // Cancel image loading or abort ajax request + cancel: function () { + var coming = F.coming; + + if (coming && false === F.trigger('onCancel')) { + return; + } + + F.hideLoading(); + + if (!coming) { + return; + } + + if (F.ajaxLoad) { + F.ajaxLoad.abort(); + } + + F.ajaxLoad = null; + + if (F.imgPreload) { + F.imgPreload.onload = F.imgPreload.onerror = null; + } + + if (coming.wrap) { + coming.wrap.stop(true, true).trigger('onReset').remove(); + } + + F.coming = null; + + // If the first item has been canceled, then clear everything + if (!F.current) { + F._afterZoomOut( coming ); + } + }, + + // Start closing animation if is open; remove immediately if opening/closing + close: function (event) { + F.cancel(); + + if (false === F.trigger('beforeClose')) { + return; + } + + F.unbindEvents(); + + if (!F.isActive) { + return; + } + + if (!F.isOpen || event === true) { + $('.fancybox-wrap').stop(true).trigger('onReset').remove(); + + F._afterZoomOut(); + + } else { + F.isOpen = F.isOpened = false; + F.isClosing = true; + + $('.fancybox-item, .fancybox-nav').remove(); + + F.wrap.stop(true, true).removeClass('fancybox-opened'); + + F.transitions[ F.current.closeMethod ](); + } + }, + + // Manage slideshow: + // $.fancybox.play(); - toggle slideshow + // $.fancybox.play( true ); - start + // $.fancybox.play( false ); - stop + play: function ( action ) { + var clear = function () { + clearTimeout(F.player.timer); + }, + set = function () { + clear(); + + if (F.current && F.player.isActive) { + F.player.timer = setTimeout(F.next, F.current.playSpeed); + } + }, + stop = function () { + clear(); + + D.unbind('.player'); + + F.player.isActive = false; + + F.trigger('onPlayEnd'); + }, + start = function () { + if (F.current && (F.current.loop || F.current.index < F.group.length - 1)) { + F.player.isActive = true; + + D.bind({ + 'onCancel.player beforeClose.player' : stop, + 'onUpdate.player' : set, + 'beforeLoad.player' : clear + }); + + set(); + + F.trigger('onPlayStart'); + } + }; + + if (action === true || (!F.player.isActive && action !== false)) { + start(); + } else { + stop(); + } + }, + + // Navigate to next gallery item + next: function ( direction ) { + var current = F.current; + + if (current) { + if (!isString(direction)) { + direction = current.direction.next; + } + + F.jumpto(current.index + 1, direction, 'next'); + } + }, + + // Navigate to previous gallery item + prev: function ( direction ) { + var current = F.current; + + if (current) { + if (!isString(direction)) { + direction = current.direction.prev; + } + + F.jumpto(current.index - 1, direction, 'prev'); + } + }, + + // Navigate to gallery item by index + jumpto: function ( index, direction, router ) { + var current = F.current; + + if (!current) { + return; + } + + index = getScalar(index); + + F.direction = direction || current.direction[ (index >= current.index ? 'next' : 'prev') ]; + F.router = router || 'jumpto'; + + if (current.loop) { + if (index < 0) { + index = current.group.length + (index % current.group.length); + } + + index = index % current.group.length; + } + + if (current.group[ index ] !== undefined) { + F.cancel(); + + F._start(index); + } + }, + + // Center inside viewport and toggle position type to fixed or absolute if needed + reposition: function (e, onlyAbsolute) { + var current = F.current, + wrap = current ? current.wrap : null, + pos; + + if (wrap) { + pos = F._getPosition(onlyAbsolute); + + if (e && e.type === 'scroll') { + delete pos.position; + + wrap.stop(true, true).animate(pos, 200); + + } else { + wrap.css(pos); + + current.pos = $.extend({}, current.dim, pos); + } + } + }, + + update: function (e) { + var type = (e && e.originalEvent && e.originalEvent.type), + anyway = !type || type === 'orientationchange'; + + if (anyway) { + clearTimeout(didUpdate); + + didUpdate = null; + } + + if (!F.isOpen || didUpdate) { + return; + } + + didUpdate = setTimeout(function() { + var current = F.current; + + if (!current || F.isClosing) { + return; + } + + F.wrap.removeClass('fancybox-tmp'); + + if (anyway || type === 'load' || (type === 'resize' && current.autoResize)) { + F._setDimension(); + } + + if (!(type === 'scroll' && current.canShrink)) { + F.reposition(e); + } + + F.trigger('onUpdate'); + + didUpdate = null; + + }, (anyway && !isTouch ? 0 : 300)); + }, + + // Shrink content to fit inside viewport or restore if resized + toggle: function ( action ) { + if (F.isOpen) { + F.current.fitToView = $.type(action) === "boolean" ? action : !F.current.fitToView; + + // Help browser to restore document dimensions + if (isTouch) { + F.wrap.removeAttr('style').addClass('fancybox-tmp'); + + F.trigger('onUpdate'); + } + + F.update(); + } + }, + + hideLoading: function () { + D.unbind('.loading'); + + $('#fancybox-loading').remove(); + }, + + showLoading: function () { + var el, viewport; + + F.hideLoading(); + + el = $('
    ').click(F.cancel).appendTo('body'); + + // If user will press the escape-button, the request will be canceled + D.bind('keydown.loading', function(e) { + if ((e.which || e.keyCode) === 27) { + e.preventDefault(); + + F.cancel(); + } + }); + + if (!F.defaults.fixed) { + viewport = F.getViewport(); + + el.css({ + position : 'absolute', + top : (viewport.h * 0.5) + viewport.y, + left : (viewport.w * 0.5) + viewport.x + }); + } + + F.trigger('onLoading'); + }, + + getViewport: function () { + var locked = (F.current && F.current.locked) || false, + rez = { + x: W.scrollLeft(), + y: W.scrollTop() + }; + + if (locked && locked.length) { + rez.w = locked[0].clientWidth; + rez.h = locked[0].clientHeight; + + } else { + // See http://bugs.jquery.com/ticket/6724 + rez.w = isTouch && window.innerWidth ? window.innerWidth : W.width(); + rez.h = isTouch && window.innerHeight ? window.innerHeight : W.height(); + } + + return rez; + }, + + // Unbind the keyboard / clicking actions + unbindEvents: function () { + if (F.wrap && isQuery(F.wrap)) { + F.wrap.unbind('.fb'); + } + + D.unbind('.fb'); + W.unbind('.fb'); + }, + + bindEvents: function () { + var current = F.current, + keys; + + if (!current) { + return; + } + + // Changing document height on iOS devices triggers a 'resize' event, + // that can change document height... repeating infinitely + W.bind('orientationchange.fb' + (isTouch ? '' : ' resize.fb') + (current.autoCenter && !current.locked ? ' scroll.fb' : ''), F.update); + + keys = current.keys; + + if (keys) { + D.bind('keydown.fb', function (e) { + var code = e.which || e.keyCode, + target = e.target || e.srcElement; + + // Skip esc key if loading, because showLoading will cancel preloading + if (code === 27 && F.coming) { + return false; + } + + // Ignore key combinations and key events within form elements + if (!e.ctrlKey && !e.altKey && !e.shiftKey && !e.metaKey && !(target && (target.type || $(target).is('[contenteditable]')))) { + $.each(keys, function(i, val) { + if (current.group.length > 1 && val[ code ] !== undefined) { + F[ i ]( val[ code ] ); + + e.preventDefault(); + return false; + } + + if ($.inArray(code, val) > -1) { + F[ i ] (); + + e.preventDefault(); + return false; + } + }); + } + }); + } + + if ($.fn.mousewheel && current.mouseWheel) { + F.wrap.bind('mousewheel.fb', function (e, delta, deltaX, deltaY) { + var target = e.target || null, + parent = $(target), + canScroll = false; + + while (parent.length) { + if (canScroll || parent.is('.fancybox-skin') || parent.is('.fancybox-wrap')) { + break; + } + + canScroll = isScrollable( parent[0] ); + parent = $(parent).parent(); + } + + if (delta !== 0 && !canScroll) { + if (F.group.length > 1 && !current.canShrink) { + if (deltaY > 0 || deltaX > 0) { + F.prev( deltaY > 0 ? 'down' : 'left' ); + + } else if (deltaY < 0 || deltaX < 0) { + F.next( deltaY < 0 ? 'up' : 'right' ); + } + + e.preventDefault(); + } + } + }); + } + }, + + trigger: function (event, o) { + var ret, obj = o || F.coming || F.current; + + if (obj) { + if ($.isFunction( obj[event] )) { + ret = obj[event].apply(obj, Array.prototype.slice.call(arguments, 1)); + } + + if (ret === false) { + return false; + } + + if (obj.helpers) { + $.each(obj.helpers, function (helper, opts) { + if (opts && F.helpers[helper] && $.isFunction(F.helpers[helper][event])) { + F.helpers[helper][event]($.extend(true, {}, F.helpers[helper].defaults, opts), obj); + } + }); + } + } + + D.trigger(event); + }, + + isImage: function (str) { + return isString(str) && str.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i); + }, + + isSWF: function (str) { + return isString(str) && str.match(/\.(swf)((\?|#).*)?$/i); + }, + + _start: function (index) { + var coming = {}, + obj, + href, + type, + margin, + padding; + + index = getScalar( index ); + obj = F.group[ index ] || null; + + if (!obj) { + return false; + } + + coming = $.extend(true, {}, F.opts, obj); + + // Convert margin and padding properties to array - top, right, bottom, left + margin = coming.margin; + padding = coming.padding; + + if ($.type(margin) === 'number') { + coming.margin = [margin, margin, margin, margin]; + } + + if ($.type(padding) === 'number') { + coming.padding = [padding, padding, padding, padding]; + } + + // 'modal' propery is just a shortcut + if (coming.modal) { + $.extend(true, coming, { + closeBtn : false, + closeClick : false, + nextClick : false, + arrows : false, + mouseWheel : false, + keys : null, + helpers: { + overlay : { + closeClick : false + } + } + }); + } + + // 'autoSize' property is a shortcut, too + if (coming.autoSize) { + coming.autoWidth = coming.autoHeight = true; + } + + if (coming.width === 'auto') { + coming.autoWidth = true; + } + + if (coming.height === 'auto') { + coming.autoHeight = true; + } + + /* + * Add reference to the group, so it`s possible to access from callbacks, example: + * afterLoad : function() { + * this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : ''); + * } + */ + + coming.group = F.group; + coming.index = index; + + // Give a chance for callback or helpers to update coming item (type, title, etc) + F.coming = coming; + + if (false === F.trigger('beforeLoad')) { + F.coming = null; + + return; + } + + type = coming.type; + href = coming.href; + + if (!type) { + F.coming = null; + + //If we can not determine content type then drop silently or display next/prev item if looping through gallery + if (F.current && F.router && F.router !== 'jumpto') { + F.current.index = index; + + return F[ F.router ]( F.direction ); + } + + return false; + } + + F.isActive = true; + + if (type === 'image' || type === 'swf') { + coming.autoHeight = coming.autoWidth = false; + coming.scrolling = 'visible'; + } + + if (type === 'image') { + coming.aspectRatio = true; + } + + if (type === 'iframe' && isTouch) { + coming.scrolling = 'scroll'; + } + + // Build the neccessary markup + coming.wrap = $(coming.tpl.wrap).addClass('fancybox-' + (isTouch ? 'mobile' : 'desktop') + ' fancybox-type-' + type + ' fancybox-tmp ' + coming.wrapCSS).appendTo( coming.parent || 'body' ); + + $.extend(coming, { + skin : $('.fancybox-skin', coming.wrap), + outer : $('.fancybox-outer', coming.wrap), + inner : $('.fancybox-inner', coming.wrap) + }); + + $.each(["Top", "Right", "Bottom", "Left"], function(i, v) { + coming.skin.css('padding' + v, getValue(coming.padding[ i ])); + }); + + F.trigger('onReady'); + + // Check before try to load; 'inline' and 'html' types need content, others - href + if (type === 'inline' || type === 'html') { + if (!coming.content || !coming.content.length) { + return F._error( 'content' ); + } + + } else if (!href) { + return F._error( 'href' ); + } + + if (type === 'image') { + F._loadImage(); + + } else if (type === 'ajax') { + F._loadAjax(); + + } else if (type === 'iframe') { + F._loadIframe(); + + } else { + F._afterLoad(); + } + }, + + _error: function ( type ) { + $.extend(F.coming, { + type : 'html', + autoWidth : true, + autoHeight : true, + minWidth : 0, + minHeight : 0, + scrolling : 'no', + hasError : type, + content : F.coming.tpl.error + }); + + F._afterLoad(); + }, + + _loadImage: function () { + // Reset preload image so it is later possible to check "complete" property + var img = F.imgPreload = new Image(); + + img.onload = function () { + this.onload = this.onerror = null; + + F.coming.width = this.width / F.opts.pixelRatio; + F.coming.height = this.height / F.opts.pixelRatio; + + F._afterLoad(); + }; + + img.onerror = function () { + this.onload = this.onerror = null; + + F._error( 'image' ); + }; + + img.src = F.coming.href; + + if (img.complete !== true) { + F.showLoading(); + } + }, + + _loadAjax: function () { + var coming = F.coming; + + F.showLoading(); + + F.ajaxLoad = $.ajax($.extend({}, coming.ajax, { + url: coming.href, + error: function (jqXHR, textStatus) { + if (F.coming && textStatus !== 'abort') { + F._error( 'ajax', jqXHR ); + + } else { + F.hideLoading(); + } + }, + success: function (data, textStatus) { + if (textStatus === 'success') { + coming.content = data; + + F._afterLoad(); + } + } + })); + }, + + _loadIframe: function() { + var coming = F.coming, + iframe = $(coming.tpl.iframe.replace(/\{rnd\}/g, new Date().getTime())) + .attr('scrolling', isTouch ? 'auto' : coming.iframe.scrolling) + .attr('src', coming.href); + + // This helps IE + $(coming.wrap).bind('onReset', function () { + try { + $(this).find('iframe').hide().attr('src', '//about:blank').end().empty(); + } catch (e) {} + }); + + if (coming.iframe.preload) { + F.showLoading(); + + iframe.one('load', function() { + $(this).data('ready', 1); + + // iOS will lose scrolling if we resize + if (!isTouch) { + $(this).bind('load.fb', F.update); + } + + // Without this trick: + // - iframe won't scroll on iOS devices + // - IE7 sometimes displays empty iframe + $(this).parents('.fancybox-wrap').width('100%').removeClass('fancybox-tmp').show(); + + F._afterLoad(); + }); + } + + coming.content = iframe.appendTo( coming.inner ); + + if (!coming.iframe.preload) { + F._afterLoad(); + } + }, + + _preloadImages: function() { + var group = F.group, + current = F.current, + len = group.length, + cnt = current.preload ? Math.min(current.preload, len - 1) : 0, + item, + i; + + for (i = 1; i <= cnt; i += 1) { + item = group[ (current.index + i ) % len ]; + + if (item.type === 'image' && item.href) { + new Image().src = item.href; + } + } + }, + + _afterLoad: function () { + var coming = F.coming, + previous = F.current, + placeholder = 'fancybox-placeholder', + current, + content, + type, + scrolling, + href, + embed; + + F.hideLoading(); + + if (!coming || F.isActive === false) { + return; + } + + if (false === F.trigger('afterLoad', coming, previous)) { + coming.wrap.stop(true).trigger('onReset').remove(); + + F.coming = null; + + return; + } + + if (previous) { + F.trigger('beforeChange', previous); + + previous.wrap.stop(true).removeClass('fancybox-opened') + .find('.fancybox-item, .fancybox-nav') + .remove(); + } + + F.unbindEvents(); + + current = coming; + content = coming.content; + type = coming.type; + scrolling = coming.scrolling; + + $.extend(F, { + wrap : current.wrap, + skin : current.skin, + outer : current.outer, + inner : current.inner, + current : current, + previous : previous + }); + + href = current.href; + + switch (type) { + case 'inline': + case 'ajax': + case 'html': + if (current.selector) { + content = $('
    ').html(content).find(current.selector); + + } else if (isQuery(content)) { + if (!content.data(placeholder)) { + content.data(placeholder, $('
    ').insertAfter( content ).hide() ); + } + + content = content.show().detach(); + + current.wrap.bind('onReset', function () { + if ($(this).find(content).length) { + content.hide().replaceAll( content.data(placeholder) ).data(placeholder, false); + } + }); + } + break; + + case 'image': + content = current.tpl.image.replace(/\{href\}/g, href); + break; + + case 'swf': + content = ''; + embed = ''; + + $.each(current.swf, function(name, val) { + content += ''; + embed += ' ' + name + '="' + val + '"'; + }); + + content += ''; + break; + } + + if (!(isQuery(content) && content.parent().is(current.inner))) { + current.inner.append( content ); + } + + // Give a chance for helpers or callbacks to update elements + F.trigger('beforeShow'); + + // Set scrolling before calculating dimensions + current.inner.css('overflow', scrolling === 'yes' ? 'scroll' : (scrolling === 'no' ? 'hidden' : scrolling)); + + // Set initial dimensions and start position + F._setDimension(); + + F.reposition(); + + F.isOpen = false; + F.coming = null; + + F.bindEvents(); + + if (!F.isOpened) { + $('.fancybox-wrap').not( current.wrap ).stop(true).trigger('onReset').remove(); + + } else if (previous.prevMethod) { + F.transitions[ previous.prevMethod ](); + } + + F.transitions[ F.isOpened ? current.nextMethod : current.openMethod ](); + + F._preloadImages(); + }, + + _setDimension: function () { + var viewport = F.getViewport(), + steps = 0, + canShrink = false, + canExpand = false, + wrap = F.wrap, + skin = F.skin, + inner = F.inner, + current = F.current, + width = current.width, + height = current.height, + minWidth = current.minWidth, + minHeight = current.minHeight, + maxWidth = current.maxWidth, + maxHeight = current.maxHeight, + scrolling = current.scrolling, + scrollOut = current.scrollOutside ? current.scrollbarWidth : 0, + margin = current.margin, + wMargin = getScalar(margin[1] + margin[3]), + hMargin = getScalar(margin[0] + margin[2]), + wPadding, + hPadding, + wSpace, + hSpace, + origWidth, + origHeight, + origMaxWidth, + origMaxHeight, + ratio, + width_, + height_, + maxWidth_, + maxHeight_, + iframe, + body; + + // Reset dimensions so we could re-check actual size + wrap.add(skin).add(inner).width('auto').height('auto').removeClass('fancybox-tmp'); + + wPadding = getScalar(skin.outerWidth(true) - skin.width()); + hPadding = getScalar(skin.outerHeight(true) - skin.height()); + + // Any space between content and viewport (margin, padding, border, title) + wSpace = wMargin + wPadding; + hSpace = hMargin + hPadding; + + origWidth = isPercentage(width) ? (viewport.w - wSpace) * getScalar(width) / 100 : width; + origHeight = isPercentage(height) ? (viewport.h - hSpace) * getScalar(height) / 100 : height; + + if (current.type === 'iframe') { + iframe = current.content; + + if (current.autoHeight && iframe.data('ready') === 1) { + try { + if (iframe[0].contentWindow.document.location) { + inner.width( origWidth ).height(9999); + + body = iframe.contents().find('body'); + + if (scrollOut) { + body.css('overflow-x', 'hidden'); + } + + origHeight = body.outerHeight(true); + } + + } catch (e) {} + } + + } else if (current.autoWidth || current.autoHeight) { + inner.addClass( 'fancybox-tmp' ); + + // Set width or height in case we need to calculate only one dimension + if (!current.autoWidth) { + inner.width( origWidth ); + } + + if (!current.autoHeight) { + inner.height( origHeight ); + } + + if (current.autoWidth) { + origWidth = inner.width(); + } + + if (current.autoHeight) { + origHeight = inner.height(); + } + + inner.removeClass( 'fancybox-tmp' ); + } + + width = getScalar( origWidth ); + height = getScalar( origHeight ); + + ratio = origWidth / origHeight; + + // Calculations for the content + minWidth = getScalar(isPercentage(minWidth) ? getScalar(minWidth, 'w') - wSpace : minWidth); + maxWidth = getScalar(isPercentage(maxWidth) ? getScalar(maxWidth, 'w') - wSpace : maxWidth); + + minHeight = getScalar(isPercentage(minHeight) ? getScalar(minHeight, 'h') - hSpace : minHeight); + maxHeight = getScalar(isPercentage(maxHeight) ? getScalar(maxHeight, 'h') - hSpace : maxHeight); + + // These will be used to determine if wrap can fit in the viewport + origMaxWidth = maxWidth; + origMaxHeight = maxHeight; + + if (current.fitToView) { + maxWidth = Math.min(viewport.w - wSpace, maxWidth); + maxHeight = Math.min(viewport.h - hSpace, maxHeight); + } + + maxWidth_ = viewport.w - wMargin; + maxHeight_ = viewport.h - hMargin; + + if (current.aspectRatio) { + if (width > maxWidth) { + width = maxWidth; + height = getScalar(width / ratio); + } + + if (height > maxHeight) { + height = maxHeight; + width = getScalar(height * ratio); + } + + if (width < minWidth) { + width = minWidth; + height = getScalar(width / ratio); + } + + if (height < minHeight) { + height = minHeight; + width = getScalar(height * ratio); + } + + } else { + width = Math.max(minWidth, Math.min(width, maxWidth)); + + if (current.autoHeight && current.type !== 'iframe') { + inner.width( width ); + + height = inner.height(); + } + + height = Math.max(minHeight, Math.min(height, maxHeight)); + } + + // Try to fit inside viewport (including the title) + if (current.fitToView) { + inner.width( width ).height( height ); + + wrap.width( width + wPadding ); + + // Real wrap dimensions + width_ = wrap.width(); + height_ = wrap.height(); + + if (current.aspectRatio) { + while ((width_ > maxWidth_ || height_ > maxHeight_) && width > minWidth && height > minHeight) { + if (steps++ > 19) { + break; + } + + height = Math.max(minHeight, Math.min(maxHeight, height - 10)); + width = getScalar(height * ratio); + + if (width < minWidth) { + width = minWidth; + height = getScalar(width / ratio); + } + + if (width > maxWidth) { + width = maxWidth; + height = getScalar(width / ratio); + } + + inner.width( width ).height( height ); + + wrap.width( width + wPadding ); + + width_ = wrap.width(); + height_ = wrap.height(); + } + + } else { + width = Math.max(minWidth, Math.min(width, width - (width_ - maxWidth_))); + height = Math.max(minHeight, Math.min(height, height - (height_ - maxHeight_))); + } + } + + if (scrollOut && scrolling === 'auto' && height < origHeight && (width + wPadding + scrollOut) < maxWidth_) { + width += scrollOut; + } + + inner.width( width ).height( height ); + + wrap.width( width + wPadding ); + + width_ = wrap.width(); + height_ = wrap.height(); + + canShrink = (width_ > maxWidth_ || height_ > maxHeight_) && width > minWidth && height > minHeight; + canExpand = current.aspectRatio ? (width < origMaxWidth && height < origMaxHeight && width < origWidth && height < origHeight) : ((width < origMaxWidth || height < origMaxHeight) && (width < origWidth || height < origHeight)); + + $.extend(current, { + dim : { + width : getValue( width_ ), + height : getValue( height_ ) + }, + origWidth : origWidth, + origHeight : origHeight, + canShrink : canShrink, + canExpand : canExpand, + wPadding : wPadding, + hPadding : hPadding, + wrapSpace : height_ - skin.outerHeight(true), + skinSpace : skin.height() - height + }); + + if (!iframe && current.autoHeight && height > minHeight && height < maxHeight && !canExpand) { + inner.height('auto'); + } + }, + + _getPosition: function (onlyAbsolute) { + var current = F.current, + viewport = F.getViewport(), + margin = current.margin, + width = F.wrap.width() + margin[1] + margin[3], + height = F.wrap.height() + margin[0] + margin[2], + rez = { + position: 'absolute', + top : margin[0], + left : margin[3] + }; + + if (current.autoCenter && current.fixed && !onlyAbsolute && height <= viewport.h && width <= viewport.w) { + rez.position = 'fixed'; + + } else if (!current.locked) { + rez.top += viewport.y; + rez.left += viewport.x; + } + + rez.top = getValue(Math.max(rez.top, rez.top + ((viewport.h - height) * current.topRatio))); + rez.left = getValue(Math.max(rez.left, rez.left + ((viewport.w - width) * current.leftRatio))); + + return rez; + }, + + _afterZoomIn: function () { + var current = F.current; + + if (!current) { + return; + } + + F.isOpen = F.isOpened = true; + + F.wrap.css('overflow', 'visible').addClass('fancybox-opened').hide().show(0); + + F.update(); + + // Assign a click event + if ( current.closeClick || (current.nextClick && F.group.length > 1) ) { + F.inner.css('cursor', 'pointer').bind('click.fb', function(e) { + if (!$(e.target).is('a') && !$(e.target).parent().is('a')) { + e.preventDefault(); + + F[ current.closeClick ? 'close' : 'next' ](); + } + }); + } + + // Create a close button + if (current.closeBtn) { + $(current.tpl.closeBtn).appendTo(F.skin).bind('click.fb', function(e) { + e.preventDefault(); + + F.close(); + }); + } + + // Create navigation arrows + if (current.arrows && F.group.length > 1) { + if (current.loop || current.index > 0) { + $(current.tpl.prev).appendTo(F.outer).bind('click.fb', F.prev); + } + + if (current.loop || current.index < F.group.length - 1) { + $(current.tpl.next).appendTo(F.outer).bind('click.fb', F.next); + } + } + + F.trigger('afterShow'); + + // Stop the slideshow if this is the last item + if (!current.loop && current.index === current.group.length - 1) { + + F.play( false ); + + } else if (F.opts.autoPlay && !F.player.isActive) { + F.opts.autoPlay = false; + + F.play(true); + } + }, + + _afterZoomOut: function ( obj ) { + obj = obj || F.current; + + $('.fancybox-wrap').trigger('onReset').remove(); + + $.extend(F, { + group : {}, + opts : {}, + router : false, + current : null, + isActive : false, + isOpened : false, + isOpen : false, + isClosing : false, + wrap : null, + skin : null, + outer : null, + inner : null + }); + + F.trigger('afterClose', obj); + } + }); + + /* + * Default transitions + */ + + F.transitions = { + getOrigPosition: function () { + var current = F.current, + element = current.element, + orig = current.orig, + pos = {}, + width = 50, + height = 50, + hPadding = current.hPadding, + wPadding = current.wPadding, + viewport = F.getViewport(); + + if (!orig && current.isDom && element.is(':visible')) { + orig = element.find('img:first'); + + if (!orig.length) { + orig = element; + } + } + + if (isQuery(orig)) { + pos = orig.offset(); + + if (orig.is('img')) { + width = orig.outerWidth(); + height = orig.outerHeight(); + } + + } else { + pos.top = viewport.y + (viewport.h - height) * current.topRatio; + pos.left = viewport.x + (viewport.w - width) * current.leftRatio; + } + + if (F.wrap.css('position') === 'fixed' || current.locked) { + pos.top -= viewport.y; + pos.left -= viewport.x; + } + + pos = { + top : getValue(pos.top - hPadding * current.topRatio), + left : getValue(pos.left - wPadding * current.leftRatio), + width : getValue(width + wPadding), + height : getValue(height + hPadding) + }; + + return pos; + }, + + step: function (now, fx) { + var ratio, + padding, + value, + prop = fx.prop, + current = F.current, + wrapSpace = current.wrapSpace, + skinSpace = current.skinSpace; + + if (prop === 'width' || prop === 'height') { + ratio = fx.end === fx.start ? 1 : (now - fx.start) / (fx.end - fx.start); + + if (F.isClosing) { + ratio = 1 - ratio; + } + + padding = prop === 'width' ? current.wPadding : current.hPadding; + value = now - padding; + + F.skin[ prop ]( getScalar( prop === 'width' ? value : value - (wrapSpace * ratio) ) ); + F.inner[ prop ]( getScalar( prop === 'width' ? value : value - (wrapSpace * ratio) - (skinSpace * ratio) ) ); + } + }, + + zoomIn: function () { + var current = F.current, + startPos = current.pos, + effect = current.openEffect, + elastic = effect === 'elastic', + endPos = $.extend({opacity : 1}, startPos); + + // Remove "position" property that breaks older IE + delete endPos.position; + + if (elastic) { + startPos = this.getOrigPosition(); + + if (current.openOpacity) { + startPos.opacity = 0.1; + } + + } else if (effect === 'fade') { + startPos.opacity = 0.1; + } + + F.wrap.css(startPos).animate(endPos, { + duration : effect === 'none' ? 0 : current.openSpeed, + easing : current.openEasing, + step : elastic ? this.step : null, + complete : F._afterZoomIn + }); + }, + + zoomOut: function () { + var current = F.current, + effect = current.closeEffect, + elastic = effect === 'elastic', + endPos = {opacity : 0.1}; + + if (elastic) { + endPos = this.getOrigPosition(); + + if (current.closeOpacity) { + endPos.opacity = 0.1; + } + } + + F.wrap.animate(endPos, { + duration : effect === 'none' ? 0 : current.closeSpeed, + easing : current.closeEasing, + step : elastic ? this.step : null, + complete : F._afterZoomOut + }); + }, + + changeIn: function () { + var current = F.current, + effect = current.nextEffect, + startPos = current.pos, + endPos = { opacity : 1 }, + direction = F.direction, + distance = 200, + field; + + startPos.opacity = 0.1; + + if (effect === 'elastic') { + field = direction === 'down' || direction === 'up' ? 'top' : 'left'; + + if (direction === 'down' || direction === 'right') { + startPos[ field ] = getValue(getScalar(startPos[ field ]) - distance); + endPos[ field ] = '+=' + distance + 'px'; + + } else { + startPos[ field ] = getValue(getScalar(startPos[ field ]) + distance); + endPos[ field ] = '-=' + distance + 'px'; + } + } + + // Workaround for http://bugs.jquery.com/ticket/12273 + if (effect === 'none') { + F._afterZoomIn(); + + } else { + F.wrap.css(startPos).animate(endPos, { + duration : current.nextSpeed, + easing : current.nextEasing, + complete : F._afterZoomIn + }); + } + }, + + changeOut: function () { + var previous = F.previous, + effect = previous.prevEffect, + endPos = { opacity : 0.1 }, + direction = F.direction, + distance = 200; + + if (effect === 'elastic') { + endPos[ direction === 'down' || direction === 'up' ? 'top' : 'left' ] = ( direction === 'up' || direction === 'left' ? '-' : '+' ) + '=' + distance + 'px'; + } + + previous.wrap.animate(endPos, { + duration : effect === 'none' ? 0 : previous.prevSpeed, + easing : previous.prevEasing, + complete : function () { + $(this).trigger('onReset').remove(); + } + }); + } + }; + + /* + * Overlay helper + */ + + F.helpers.overlay = { + defaults : { + closeClick : true, // if true, fancyBox will be closed when user clicks on the overlay + speedOut : 200, // duration of fadeOut animation + showEarly : true, // indicates if should be opened immediately or wait until the content is ready + css : {}, // custom CSS properties + locked : !isTouch, // if true, the content will be locked into overlay + fixed : true // if false, the overlay CSS position property will not be set to "fixed" + }, + + overlay : null, // current handle + fixed : false, // indicates if the overlay has position "fixed" + el : $('html'), // element that contains "the lock" + + // Public methods + create : function(opts) { + var parent; + + opts = $.extend({}, this.defaults, opts); + + if (this.overlay) { + this.close(); + } + + parent = F.coming ? F.coming.parent : opts.parent; + + this.overlay = $('
    ').appendTo( parent && parent.lenth ? parent : 'body' ); + this.fixed = false; + + if (opts.fixed && F.defaults.fixed) { + this.overlay.addClass('fancybox-overlay-fixed'); + + this.fixed = true; + } + }, + + open : function(opts) { + var that = this; + + opts = $.extend({}, this.defaults, opts); + + if (this.overlay) { + this.overlay.unbind('.overlay').width('auto').height('auto'); + + } else { + this.create(opts); + } + + if (!this.fixed) { + W.bind('resize.overlay', $.proxy( this.update, this) ); + + this.update(); + } + + if (opts.closeClick) { + this.overlay.bind('click.overlay', function(e) { + if ($(e.target).hasClass('fancybox-overlay')) { + if (F.isActive) { + F.close(); + } else { + that.close(); + } + + return false; + } + }); + } + + this.overlay.css( opts.css ).show(); + }, + + close : function() { + W.unbind('resize.overlay'); + + if (this.el.hasClass('fancybox-lock')) { + $('.fancybox-margin').removeClass('fancybox-margin'); + + this.el.removeClass('fancybox-lock'); + + W.scrollTop( this.scrollV ).scrollLeft( this.scrollH ); + } + + $('.fancybox-overlay').remove().hide(); + + $.extend(this, { + overlay : null, + fixed : false + }); + }, + + // Private, callbacks + + update : function () { + var width = '100%', offsetWidth; + + // Reset width/height so it will not mess + this.overlay.width(width).height('100%'); + + // jQuery does not return reliable result for IE + if (IE) { + offsetWidth = Math.max(document.documentElement.offsetWidth, document.body.offsetWidth); + + if (D.width() > offsetWidth) { + width = D.width(); + } + + } else if (D.width() > W.width()) { + width = D.width(); + } + + this.overlay.width(width).height(D.height()); + }, + + // This is where we can manipulate DOM, because later it would cause iframes to reload + onReady : function (opts, obj) { + var overlay = this.overlay; + + $('.fancybox-overlay').stop(true, true); + + if (!overlay) { + this.create(opts); + } + + if (opts.locked && this.fixed && obj.fixed) { + obj.locked = this.overlay.append( obj.wrap ); + obj.fixed = false; + } + + if (opts.showEarly === true) { + this.beforeShow.apply(this, arguments); + } + }, + + beforeShow : function(opts, obj) { + if (obj.locked && !this.el.hasClass('fancybox-lock')) { + if (this.fixPosition !== false) { + $('*').filter(function(){ + return ($(this).css('position') === 'fixed' && !$(this).hasClass("fancybox-overlay") && !$(this).hasClass("fancybox-wrap") ); + }).addClass('fancybox-margin'); + } + + this.el.addClass('fancybox-margin'); + + this.scrollV = W.scrollTop(); + this.scrollH = W.scrollLeft(); + + this.el.addClass('fancybox-lock'); + + W.scrollTop( this.scrollV ).scrollLeft( this.scrollH ); + } + + this.open(opts); + }, + + onUpdate : function() { + if (!this.fixed) { + this.update(); + } + }, + + afterClose: function (opts) { + // Remove overlay if exists and fancyBox is not opening + // (e.g., it is not being open using afterClose callback) + if (this.overlay && !F.coming) { + this.overlay.fadeOut(opts.speedOut, $.proxy( this.close, this )); + } + } + }; + + /* + * Title helper + */ + + F.helpers.title = { + defaults : { + type : 'float', // 'float', 'inside', 'outside' or 'over', + position : 'bottom' // 'top' or 'bottom' + }, + + beforeShow: function (opts) { + var current = F.current, + text = current.title, + type = opts.type, + title, + target; + + if ($.isFunction(text)) { + text = text.call(current.element, current); + } + + if (!isString(text) || $.trim(text) === '') { + return; + } + + title = $('
    ' + text + '
    '); + + switch (type) { + case 'inside': + target = F.skin; + break; + + case 'outside': + target = F.wrap; + break; + + case 'over': + target = F.inner; + break; + + default: // 'float' + target = F.skin; + + title.appendTo('body'); + + if (IE) { + title.width( title.width() ); + } + + title.wrapInner(''); + + //Increase bottom margin so this title will also fit into viewport + F.current.margin[2] += Math.abs( getScalar(title.css('margin-bottom')) ); + break; + } + + title[ (opts.position === 'top' ? 'prependTo' : 'appendTo') ](target); + } + }; + + // jQuery plugin initialization + $.fn.fancybox = function (options) { + var index, + that = $(this), + selector = this.selector || '', + run = function(e) { + var what = $(this).blur(), idx = index, relType, relVal; + + if (!(e.ctrlKey || e.altKey || e.shiftKey || e.metaKey) && !what.is('.fancybox-wrap')) { + relType = options.groupAttr || 'data-fancybox-group'; + relVal = what.attr(relType); + + if (!relVal) { + relType = 'rel'; + relVal = what.get(0)[ relType ]; + } + + if (relVal && relVal !== '' && relVal !== 'nofollow') { + what = selector.length ? $(selector) : that; + what = what.filter('[' + relType + '="' + relVal + '"]'); + idx = what.index(this); + } + + options.index = idx; + + // Stop an event from bubbling if everything is fine + if (F.open(what, options) !== false) { + e.preventDefault(); + } + } + }; + + options = options || {}; + index = options.index || 0; + + if (!selector || options.live === false) { + that.unbind('click.fb-start').bind('click.fb-start', run); + + } else { + D.undelegate(selector, 'click.fb-start').delegate(selector + ":not('.fancybox-item, .fancybox-nav')", 'click.fb-start', run); + } + + this.filter('[data-fancybox-start=1]').trigger('click'); + + return this; + }; + + // Tests that need a body at doc ready + D.ready(function() { + var w1, w2; + + if ( $.scrollbarWidth === undefined ) { + // http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth + $.scrollbarWidth = function() { + var parent = $('
    ').appendTo('body'), + child = parent.children(), + width = child.innerWidth() - child.height( 99 ).innerWidth(); + + parent.remove(); + + return width; + }; + } + + if ( $.support.fixedPosition === undefined ) { + $.support.fixedPosition = (function() { + var elem = $('
    ').appendTo('body'), + fixed = ( elem[0].offsetTop === 20 || elem[0].offsetTop === 15 ); + + elem.remove(); + + return fixed; + }()); + } + + $.extend(F.defaults, { + scrollbarWidth : $.scrollbarWidth(), + fixed : $.support.fixedPosition, + parent : $('body') + }); + + //Get real width of page scroll-bar + w1 = $(window).width(); + + H.addClass('fancybox-lock-test'); + + w2 = $(window).width(); + + H.removeClass('fancybox-lock-test'); + + $("").appendTo("head"); + }); + +}(window, document, jQuery)); \ No newline at end of file diff --git a/_blog_src/themes/landscape/source/fancybox/jquery.fancybox.pack.js b/_blog_src/themes/landscape/source/fancybox/jquery.fancybox.pack.js new file mode 100644 index 000000000..2db128084 --- /dev/null +++ b/_blog_src/themes/landscape/source/fancybox/jquery.fancybox.pack.js @@ -0,0 +1,46 @@ +/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */ +(function(s,H,f,w){var K=f("html"),q=f(s),p=f(H),b=f.fancybox=function(){b.open.apply(this,arguments)},J=navigator.userAgent.match(/msie/i),C=null,t=H.createTouch!==w,u=function(a){return a&&a.hasOwnProperty&&a instanceof f},r=function(a){return a&&"string"===f.type(a)},F=function(a){return r(a)&&0
    ',image:'',iframe:'",error:'

    The requested content cannot be loaded.
    Please try again later.

    ',closeBtn:'',next:'',prev:''},openEffect:"fade",openSpeed:250,openEasing:"swing",openOpacity:!0, +openMethod:"zoomIn",closeEffect:"fade",closeSpeed:250,closeEasing:"swing",closeOpacity:!0,closeMethod:"zoomOut",nextEffect:"elastic",nextSpeed:250,nextEasing:"swing",nextMethod:"changeIn",prevEffect:"elastic",prevSpeed:250,prevEasing:"swing",prevMethod:"changeOut",helpers:{overlay:!0,title:!0},onCancel:f.noop,beforeLoad:f.noop,afterLoad:f.noop,beforeShow:f.noop,afterShow:f.noop,beforeChange:f.noop,beforeClose:f.noop,afterClose:f.noop},group:{},opts:{},previous:null,coming:null,current:null,isActive:!1, +isOpen:!1,isOpened:!1,wrap:null,skin:null,outer:null,inner:null,player:{timer:null,isActive:!1},ajaxLoad:null,imgPreload:null,transitions:{},helpers:{},open:function(a,d){if(a&&(f.isPlainObject(d)||(d={}),!1!==b.close(!0)))return f.isArray(a)||(a=u(a)?f(a).get():[a]),f.each(a,function(e,c){var l={},g,h,k,n,m;"object"===f.type(c)&&(c.nodeType&&(c=f(c)),u(c)?(l={href:c.data("fancybox-href")||c.attr("href"),title:f("
    ").text(c.data("fancybox-title")||c.attr("title")).html(),isDom:!0,element:c}, +f.metadata&&f.extend(!0,l,c.metadata())):l=c);g=d.href||l.href||(r(c)?c:null);h=d.title!==w?d.title:l.title||"";n=(k=d.content||l.content)?"html":d.type||l.type;!n&&l.isDom&&(n=c.data("fancybox-type"),n||(n=(n=c.prop("class").match(/fancybox\.(\w+)/))?n[1]:null));r(g)&&(n||(b.isImage(g)?n="image":b.isSWF(g)?n="swf":"#"===g.charAt(0)?n="inline":r(c)&&(n="html",k=c)),"ajax"===n&&(m=g.split(/\s+/,2),g=m.shift(),m=m.shift()));k||("inline"===n?g?k=f(r(g)?g.replace(/.*(?=#[^\s]+$)/,""):g):l.isDom&&(k=c): +"html"===n?k=g:n||g||!l.isDom||(n="inline",k=c));f.extend(l,{href:g,type:n,content:k,title:h,selector:m});a[e]=l}),b.opts=f.extend(!0,{},b.defaults,d),d.keys!==w&&(b.opts.keys=d.keys?f.extend({},b.defaults.keys,d.keys):!1),b.group=a,b._start(b.opts.index)},cancel:function(){var a=b.coming;a&&!1===b.trigger("onCancel")||(b.hideLoading(),a&&(b.ajaxLoad&&b.ajaxLoad.abort(),b.ajaxLoad=null,b.imgPreload&&(b.imgPreload.onload=b.imgPreload.onerror=null),a.wrap&&a.wrap.stop(!0,!0).trigger("onReset").remove(), +b.coming=null,b.current||b._afterZoomOut(a)))},close:function(a){b.cancel();!1!==b.trigger("beforeClose")&&(b.unbindEvents(),b.isActive&&(b.isOpen&&!0!==a?(b.isOpen=b.isOpened=!1,b.isClosing=!0,f(".fancybox-item, .fancybox-nav").remove(),b.wrap.stop(!0,!0).removeClass("fancybox-opened"),b.transitions[b.current.closeMethod]()):(f(".fancybox-wrap").stop(!0).trigger("onReset").remove(),b._afterZoomOut())))},play:function(a){var d=function(){clearTimeout(b.player.timer)},e=function(){d();b.current&&b.player.isActive&& +(b.player.timer=setTimeout(b.next,b.current.playSpeed))},c=function(){d();p.unbind(".player");b.player.isActive=!1;b.trigger("onPlayEnd")};!0===a||!b.player.isActive&&!1!==a?b.current&&(b.current.loop||b.current.index=c.index?"next":"prev"],b.router=e||"jumpto",c.loop&&(0>a&&(a=c.group.length+a%c.group.length),a%=c.group.length),c.group[a]!==w&&(b.cancel(),b._start(a)))},reposition:function(a,d){var e=b.current,c=e?e.wrap:null,l;c&&(l=b._getPosition(d),a&&"scroll"===a.type?(delete l.position,c.stop(!0,!0).animate(l,200)):(c.css(l),e.pos=f.extend({},e.dim,l)))}, +update:function(a){var d=a&&a.originalEvent&&a.originalEvent.type,e=!d||"orientationchange"===d;e&&(clearTimeout(C),C=null);b.isOpen&&!C&&(C=setTimeout(function(){var c=b.current;c&&!b.isClosing&&(b.wrap.removeClass("fancybox-tmp"),(e||"load"===d||"resize"===d&&c.autoResize)&&b._setDimension(),"scroll"===d&&c.canShrink||b.reposition(a),b.trigger("onUpdate"),C=null)},e&&!t?0:300))},toggle:function(a){b.isOpen&&(b.current.fitToView="boolean"===f.type(a)?a:!b.current.fitToView,t&&(b.wrap.removeAttr("style").addClass("fancybox-tmp"), +b.trigger("onUpdate")),b.update())},hideLoading:function(){p.unbind(".loading");f("#fancybox-loading").remove()},showLoading:function(){var a,d;b.hideLoading();a=f('
    ').click(b.cancel).appendTo("body");p.bind("keydown.loading",function(a){27===(a.which||a.keyCode)&&(a.preventDefault(),b.cancel())});b.defaults.fixed||(d=b.getViewport(),a.css({position:"absolute",top:0.5*d.h+d.y,left:0.5*d.w+d.x}));b.trigger("onLoading")},getViewport:function(){var a=b.current&& +b.current.locked||!1,d={x:q.scrollLeft(),y:q.scrollTop()};a&&a.length?(d.w=a[0].clientWidth,d.h=a[0].clientHeight):(d.w=t&&s.innerWidth?s.innerWidth:q.width(),d.h=t&&s.innerHeight?s.innerHeight:q.height());return d},unbindEvents:function(){b.wrap&&u(b.wrap)&&b.wrap.unbind(".fb");p.unbind(".fb");q.unbind(".fb")},bindEvents:function(){var a=b.current,d;a&&(q.bind("orientationchange.fb"+(t?"":" resize.fb")+(a.autoCenter&&!a.locked?" scroll.fb":""),b.update),(d=a.keys)&&p.bind("keydown.fb",function(e){var c= +e.which||e.keyCode,l=e.target||e.srcElement;if(27===c&&b.coming)return!1;e.ctrlKey||e.altKey||e.shiftKey||e.metaKey||l&&(l.type||f(l).is("[contenteditable]"))||f.each(d,function(d,l){if(1h[0].clientWidth||h[0].clientHeight&&h[0].scrollHeight>h[0].clientHeight),h=f(h).parent();0!==c&&!k&&1g||0>l)&&b.next(0>g?"up":"right"),d.preventDefault())}))},trigger:function(a,d){var e,c=d||b.coming||b.current;if(c){f.isFunction(c[a])&&(e=c[a].apply(c,Array.prototype.slice.call(arguments,1)));if(!1===e)return!1;c.helpers&&f.each(c.helpers,function(d,e){if(e&& +b.helpers[d]&&f.isFunction(b.helpers[d][a]))b.helpers[d][a](f.extend(!0,{},b.helpers[d].defaults,e),c)})}p.trigger(a)},isImage:function(a){return r(a)&&a.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i)},isSWF:function(a){return r(a)&&a.match(/\.(swf)((\?|#).*)?$/i)},_start:function(a){var d={},e,c;a=m(a);e=b.group[a]||null;if(!e)return!1;d=f.extend(!0,{},b.opts,e);e=d.margin;c=d.padding;"number"===f.type(e)&&(d.margin=[e,e,e,e]);"number"===f.type(c)&&(d.padding=[c,c, +c,c]);d.modal&&f.extend(!0,d,{closeBtn:!1,closeClick:!1,nextClick:!1,arrows:!1,mouseWheel:!1,keys:null,helpers:{overlay:{closeClick:!1}}});d.autoSize&&(d.autoWidth=d.autoHeight=!0);"auto"===d.width&&(d.autoWidth=!0);"auto"===d.height&&(d.autoHeight=!0);d.group=b.group;d.index=a;b.coming=d;if(!1===b.trigger("beforeLoad"))b.coming=null;else{c=d.type;e=d.href;if(!c)return b.coming=null,b.current&&b.router&&"jumpto"!==b.router?(b.current.index=a,b[b.router](b.direction)):!1;b.isActive=!0;if("image"=== +c||"swf"===c)d.autoHeight=d.autoWidth=!1,d.scrolling="visible";"image"===c&&(d.aspectRatio=!0);"iframe"===c&&t&&(d.scrolling="scroll");d.wrap=f(d.tpl.wrap).addClass("fancybox-"+(t?"mobile":"desktop")+" fancybox-type-"+c+" fancybox-tmp "+d.wrapCSS).appendTo(d.parent||"body");f.extend(d,{skin:f(".fancybox-skin",d.wrap),outer:f(".fancybox-outer",d.wrap),inner:f(".fancybox-inner",d.wrap)});f.each(["Top","Right","Bottom","Left"],function(a,b){d.skin.css("padding"+b,x(d.padding[a]))});b.trigger("onReady"); +if("inline"===c||"html"===c){if(!d.content||!d.content.length)return b._error("content")}else if(!e)return b._error("href");"image"===c?b._loadImage():"ajax"===c?b._loadAjax():"iframe"===c?b._loadIframe():b._afterLoad()}},_error:function(a){f.extend(b.coming,{type:"html",autoWidth:!0,autoHeight:!0,minWidth:0,minHeight:0,scrolling:"no",hasError:a,content:b.coming.tpl.error});b._afterLoad()},_loadImage:function(){var a=b.imgPreload=new Image;a.onload=function(){this.onload=this.onerror=null;b.coming.width= +this.width/b.opts.pixelRatio;b.coming.height=this.height/b.opts.pixelRatio;b._afterLoad()};a.onerror=function(){this.onload=this.onerror=null;b._error("image")};a.src=b.coming.href;!0!==a.complete&&b.showLoading()},_loadAjax:function(){var a=b.coming;b.showLoading();b.ajaxLoad=f.ajax(f.extend({},a.ajax,{url:a.href,error:function(a,e){b.coming&&"abort"!==e?b._error("ajax",a):b.hideLoading()},success:function(d,e){"success"===e&&(a.content=d,b._afterLoad())}}))},_loadIframe:function(){var a=b.coming, +d=f(a.tpl.iframe.replace(/\{rnd\}/g,(new Date).getTime())).attr("scrolling",t?"auto":a.iframe.scrolling).attr("src",a.href);f(a.wrap).bind("onReset",function(){try{f(this).find("iframe").hide().attr("src","//about:blank").end().empty()}catch(a){}});a.iframe.preload&&(b.showLoading(),d.one("load",function(){f(this).data("ready",1);t||f(this).bind("load.fb",b.update);f(this).parents(".fancybox-wrap").width("100%").removeClass("fancybox-tmp").show();b._afterLoad()}));a.content=d.appendTo(a.inner);a.iframe.preload|| +b._afterLoad()},_preloadImages:function(){var a=b.group,d=b.current,e=a.length,c=d.preload?Math.min(d.preload,e-1):0,f,g;for(g=1;g<=c;g+=1)f=a[(d.index+g)%e],"image"===f.type&&f.href&&((new Image).src=f.href)},_afterLoad:function(){var a=b.coming,d=b.current,e,c,l,g,h;b.hideLoading();if(a&&!1!==b.isActive)if(!1===b.trigger("afterLoad",a,d))a.wrap.stop(!0).trigger("onReset").remove(),b.coming=null;else{d&&(b.trigger("beforeChange",d),d.wrap.stop(!0).removeClass("fancybox-opened").find(".fancybox-item, .fancybox-nav").remove()); +b.unbindEvents();e=a.content;c=a.type;l=a.scrolling;f.extend(b,{wrap:a.wrap,skin:a.skin,outer:a.outer,inner:a.inner,current:a,previous:d});g=a.href;switch(c){case "inline":case "ajax":case "html":a.selector?e=f("
    ").html(e).find(a.selector):u(e)&&(e.data("fancybox-placeholder")||e.data("fancybox-placeholder",f('
    ').insertAfter(e).hide()),e=e.show().detach(),a.wrap.bind("onReset",function(){f(this).find(e).length&&e.hide().replaceAll(e.data("fancybox-placeholder")).data("fancybox-placeholder", +!1)}));break;case "image":e=a.tpl.image.replace(/\{href\}/g,g);break;case "swf":e='',h="",f.each(a.swf,function(a,b){e+='';h+=" "+a+'="'+b+'"'}),e+='"}u(e)&&e.parent().is(a.inner)||a.inner.append(e);b.trigger("beforeShow"); +a.inner.css("overflow","yes"===l?"scroll":"no"===l?"hidden":l);b._setDimension();b.reposition();b.isOpen=!1;b.coming=null;b.bindEvents();if(!b.isOpened)f(".fancybox-wrap").not(a.wrap).stop(!0).trigger("onReset").remove();else if(d.prevMethod)b.transitions[d.prevMethod]();b.transitions[b.isOpened?a.nextMethod:a.openMethod]();b._preloadImages()}},_setDimension:function(){var a=b.getViewport(),d=0,e=!1,c=!1,e=b.wrap,l=b.skin,g=b.inner,h=b.current,c=h.width,k=h.height,n=h.minWidth,v=h.minHeight,p=h.maxWidth, +q=h.maxHeight,t=h.scrolling,r=h.scrollOutside?h.scrollbarWidth:0,y=h.margin,z=m(y[1]+y[3]),s=m(y[0]+y[2]),w,A,u,D,B,G,C,E,I;e.add(l).add(g).width("auto").height("auto").removeClass("fancybox-tmp");y=m(l.outerWidth(!0)-l.width());w=m(l.outerHeight(!0)-l.height());A=z+y;u=s+w;D=F(c)?(a.w-A)*m(c)/100:c;B=F(k)?(a.h-u)*m(k)/100:k;if("iframe"===h.type){if(I=h.content,h.autoHeight&&1===I.data("ready"))try{I[0].contentWindow.document.location&&(g.width(D).height(9999),G=I.contents().find("body"),r&&G.css("overflow-x", +"hidden"),B=G.outerHeight(!0))}catch(H){}}else if(h.autoWidth||h.autoHeight)g.addClass("fancybox-tmp"),h.autoWidth||g.width(D),h.autoHeight||g.height(B),h.autoWidth&&(D=g.width()),h.autoHeight&&(B=g.height()),g.removeClass("fancybox-tmp");c=m(D);k=m(B);E=D/B;n=m(F(n)?m(n,"w")-A:n);p=m(F(p)?m(p,"w")-A:p);v=m(F(v)?m(v,"h")-u:v);q=m(F(q)?m(q,"h")-u:q);G=p;C=q;h.fitToView&&(p=Math.min(a.w-A,p),q=Math.min(a.h-u,q));A=a.w-z;s=a.h-s;h.aspectRatio?(c>p&&(c=p,k=m(c/E)),k>q&&(k=q,c=m(k*E)),cA||z>s)&&c>n&&k>v&&!(19p&&(c=p,k=m(c/E)),g.width(c).height(k),e.width(c+y),a=e.width(),z=e.height();else c=Math.max(n,Math.min(c,c-(a-A))),k=Math.max(v,Math.min(k,k-(z-s)));r&&"auto"===t&&kA||z>s)&&c>n&&k>v;c=h.aspectRatio?cv&&k
    ').appendTo(d&&d.lenth?d:"body");this.fixed=!1;a.fixed&&b.defaults.fixed&&(this.overlay.addClass("fancybox-overlay-fixed"),this.fixed=!0)},open:function(a){var d=this;a=f.extend({},this.defaults,a);this.overlay?this.overlay.unbind(".overlay").width("auto").height("auto"):this.create(a);this.fixed||(q.bind("resize.overlay",f.proxy(this.update,this)),this.update());a.closeClick&&this.overlay.bind("click.overlay", +function(a){if(f(a.target).hasClass("fancybox-overlay"))return b.isActive?b.close():d.close(),!1});this.overlay.css(a.css).show()},close:function(){q.unbind("resize.overlay");this.el.hasClass("fancybox-lock")&&(f(".fancybox-margin").removeClass("fancybox-margin"),this.el.removeClass("fancybox-lock"),q.scrollTop(this.scrollV).scrollLeft(this.scrollH));f(".fancybox-overlay").remove().hide();f.extend(this,{overlay:null,fixed:!1})},update:function(){var a="100%",b;this.overlay.width(a).height("100%"); +J?(b=Math.max(H.documentElement.offsetWidth,H.body.offsetWidth),p.width()>b&&(a=p.width())):p.width()>q.width()&&(a=p.width());this.overlay.width(a).height(p.height())},onReady:function(a,b){var e=this.overlay;f(".fancybox-overlay").stop(!0,!0);e||this.create(a);a.locked&&this.fixed&&b.fixed&&(b.locked=this.overlay.append(b.wrap),b.fixed=!1);!0===a.showEarly&&this.beforeShow.apply(this,arguments)},beforeShow:function(a,b){b.locked&&!this.el.hasClass("fancybox-lock")&&(!1!==this.fixPosition&&f("*").filter(function(){return"fixed"=== +f(this).css("position")&&!f(this).hasClass("fancybox-overlay")&&!f(this).hasClass("fancybox-wrap")}).addClass("fancybox-margin"),this.el.addClass("fancybox-margin"),this.scrollV=q.scrollTop(),this.scrollH=q.scrollLeft(),this.el.addClass("fancybox-lock"),q.scrollTop(this.scrollV).scrollLeft(this.scrollH));this.open(a)},onUpdate:function(){this.fixed||this.update()},afterClose:function(a){this.overlay&&!b.coming&&this.overlay.fadeOut(a.speedOut,f.proxy(this.close,this))}};b.helpers.title={defaults:{type:"float", +position:"bottom"},beforeShow:function(a){var d=b.current,e=d.title,c=a.type;f.isFunction(e)&&(e=e.call(d.element,d));if(r(e)&&""!==f.trim(e)){d=f('
    '+e+"
    ");switch(c){case "inside":c=b.skin;break;case "outside":c=b.wrap;break;case "over":c=b.inner;break;default:c=b.skin,d.appendTo("body"),J&&d.width(d.width()),d.wrapInner(''),b.current.margin[2]+=Math.abs(m(d.css("margin-bottom")))}d["top"===a.position?"prependTo": +"appendTo"](c)}}};f.fn.fancybox=function(a){var d,e=f(this),c=this.selector||"",l=function(g){var h=f(this).blur(),k=d,l,m;g.ctrlKey||g.altKey||g.shiftKey||g.metaKey||h.is(".fancybox-wrap")||(l=a.groupAttr||"data-fancybox-group",m=h.attr(l),m||(l="rel",m=h.get(0)[l]),m&&""!==m&&"nofollow"!==m&&(h=c.length?f(c):e,h=h.filter("["+l+'="'+m+'"]'),k=h.index(this)),a.index=k,!1!==b.open(h,a)&&g.preventDefault())};a=a||{};d=a.index||0;c&&!1!==a.live?p.undelegate(c,"click.fb-start").delegate(c+":not('.fancybox-item, .fancybox-nav')", +"click.fb-start",l):e.unbind("click.fb-start").bind("click.fb-start",l);this.filter("[data-fancybox-start=1]").trigger("click");return this};p.ready(function(){var a,d;f.scrollbarWidth===w&&(f.scrollbarWidth=function(){var a=f('
    ').appendTo("body"),b=a.children(),b=b.innerWidth()-b.height(99).innerWidth();a.remove();return b});f.support.fixedPosition===w&&(f.support.fixedPosition=function(){var a=f('
    ').appendTo("body"), +b=20===a[0].offsetTop||15===a[0].offsetTop;a.remove();return b}());f.extend(b.defaults,{scrollbarWidth:f.scrollbarWidth(),fixed:f.support.fixedPosition,parent:f("body")});a=f(s).width();K.addClass("fancybox-lock-test");d=f(s).width();K.removeClass("fancybox-lock-test");f("").appendTo("head")})})(window,document,jQuery); \ No newline at end of file diff --git a/_blog_src/themes/landscape/source/js/script.js b/_blog_src/themes/landscape/source/js/script.js new file mode 100644 index 000000000..1e5876745 --- /dev/null +++ b/_blog_src/themes/landscape/source/js/script.js @@ -0,0 +1,137 @@ +(function($){ + // Search + var $searchWrap = $('#search-form-wrap'), + isSearchAnim = false, + searchAnimDuration = 200; + + var startSearchAnim = function(){ + isSearchAnim = true; + }; + + var stopSearchAnim = function(callback){ + setTimeout(function(){ + isSearchAnim = false; + callback && callback(); + }, searchAnimDuration); + }; + + $('#nav-search-btn').on('click', function(){ + if (isSearchAnim) return; + + startSearchAnim(); + $searchWrap.addClass('on'); + stopSearchAnim(function(){ + $('.search-form-input').focus(); + }); + }); + + $('.search-form-input').on('blur', function(){ + startSearchAnim(); + $searchWrap.removeClass('on'); + stopSearchAnim(); + }); + + // Share + $('body').on('click', function(){ + $('.article-share-box.on').removeClass('on'); + }).on('click', '.article-share-link', function(e){ + e.stopPropagation(); + + var $this = $(this), + url = $this.attr('data-url'), + encodedUrl = encodeURIComponent(url), + id = 'article-share-box-' + $this.attr('data-id'), + offset = $this.offset(); + + if ($('#' + id).length){ + var box = $('#' + id); + + if (box.hasClass('on')){ + box.removeClass('on'); + return; + } + } else { + var html = [ + '
    ', + '', + '
    ', + '', + '', + '', + '', + '
    ', + '
    ' + ].join(''); + + var box = $(html); + + $('body').append(box); + } + + $('.article-share-box.on').hide(); + + box.css({ + top: offset.top + 25, + left: offset.left + }).addClass('on'); + }).on('click', '.article-share-box', function(e){ + e.stopPropagation(); + }).on('click', '.article-share-box-input', function(){ + $(this).select(); + }).on('click', '.article-share-box-link', function(e){ + e.preventDefault(); + e.stopPropagation(); + + window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450'); + }); + + // Caption + $('.article-entry').each(function(i){ + $(this).find('img').each(function(){ + if ($(this).parent().hasClass('fancybox')) return; + + var alt = this.alt; + + if (alt) $(this).after('' + alt + ''); + + $(this).wrap(''); + }); + + $(this).find('.fancybox').each(function(){ + $(this).attr('rel', 'article' + i); + }); + }); + + if ($.fancybox){ + $('.fancybox').fancybox(); + } + + // Mobile nav + var $container = $('#container'), + isMobileNavAnim = false, + mobileNavAnimDuration = 200; + + var startMobileNavAnim = function(){ + isMobileNavAnim = true; + }; + + var stopMobileNavAnim = function(){ + setTimeout(function(){ + isMobileNavAnim = false; + }, mobileNavAnimDuration); + } + + $('#main-nav-toggle').on('click', function(){ + if (isMobileNavAnim) return; + + startMobileNavAnim(); + $container.toggleClass('mobile-nav-on'); + stopMobileNavAnim(); + }); + + $('#wrap').on('click', function(){ + if (isMobileNavAnim || !$container.hasClass('mobile-nav-on')) return; + + $container.removeClass('mobile-nav-on'); + }); +})(jQuery); \ No newline at end of file diff --git a/blog/6_ways_to_take_control_of_how_your_grid_data_is_displayed/index.html b/blog/6_ways_to_take_control_of_how_your_grid_data_is_displayed/index.html new file mode 100644 index 000000000..bdfc0c6d3 --- /dev/null +++ b/blog/6_ways_to_take_control_of_how_your_grid_data_is_displayed/index.html @@ -0,0 +1,249 @@ + + + + + + + + + + + + 6 Ways to Take Control of How Your Grid Data is Displayed | UI Grid + + + + + + + + + + + + + + + + + + + + + +
    +
    + UI Grid + +
    +
    +

    + + +

    +
    +
    + + + + +
    +
    +
    +
    + + + + + + + + + + Back to main page + + + +

    6 Ways to Take Control of How Your Grid Data is Displayed

    + +
    + +
    + +

    Getting your data displayed just right can be a huge pain.

    +

    You might just want to format some numbers, or you might want to embed something complex like a chart or custom directive.

    +

    In this post outline six different methods you can use to get your data just the way you want it:

    +
      +
    • Bindings
      • +
    • Cell Filters
      • +
    • Cell Templates
        +
      • Links
        • +
      • Buttons
        • +
      • Custom directives
        • +
      +
      • +
    +

    Bindings

    +

    UI Grid columns can be bound to any sort of Angular expression, as well as property names that would normally break an expression:

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    var columnDefs = [
      { field: 'name' },
      { field: 'addresses[0]' },
      /*
        Yes, you can use hyphens, plus signs, etc.
        Normally something like {{ row.entity.first-name }} would
        bomb but UI Grid pre-processes your bindings to make sure they work correctly.
      */
      { field: 'first-name' }, 
      /* Function expressions work too */
      { field: 'getCurrency()' },
      { field: 'transformValue(row.entity.myField)' },
      /* Plain old functions are also an option */
      { field: function () { return this.address.zip; } }
    ];
    + +

    Cell Filters

    +

    Cell filters can transform the displayed value for a column while leaving the model intact. In this plunker the amount column contains floating point values, but we only want to display the integer part. A simple cellFilter that uses .toFixed() will alter the displayed value the way we want.

    + + +

    Passing Arguments

    +

    In the third column I am using two different fields. The column itself is bound to the same field as the second column, but on the filter I am passing the scope like so: cellFilter: 'currencyFilter:this'. Using the this argument on your filter will pass the scope.

    +

    Then I can lookup the currency symbol I want using the currency field from the row.

    +

    If you double-click a cell in the Currency column you’ll see that the raw value is still available to be edited. Cell filters only change your displayed value!

    +

    Cell Templates

    +

    Column definitions take a cellTemplate argument you can use to give your cells a custom template. You can specify it a few different ways, with a url (relative or absolute), an Angular template ID, a string/Angular element, or a promise.

    +
    1
    2
    3
    4
    5
    var columnDefs = [
      { field: 'name', cellTemplate: 'name-template.html' },
      { field: 'name', cellTemplate: 'myTemplateId' },
      { field: 'name', cellTemplate: $.get('url-to-your-template.html') }
    ];
    + +

    Bindings in Cell Templates

    +

    There are a couple options for your binding your row’s data in your template. You can access the row object which is in the local scope; row.entity will contain the reference to your object, so if you want the “name” field, you can bind like so: .

    +

    If you’ve already defined your binding in your column definition you can use one of UI Grid’s placeholders: {{ COL_FIELD }}. UI Grid will automatically replace COL_FIELD with the appropriate binding. If you need to two-way bind to your row, like when you’re using the edit feature, you’ll need to use the MODEL_COL_FIELD placeholder.

    +
    1
    2
    3
    4
    5
    6
    var columnDefs = [
      {
        field: 'image_url',
        cellTemplate: '<div class="ui-grid-cell-contents"><img src="{{ COL_FIELD }}" /></div>'
      }
    ];
    + + +

    Links are simple, just use regular old HTML. Wrapping your cell in an element using the class .ui-grid-cell-contents will apply the proper CSS settings like padding, overflow, etc., and make sure your cell fits in its space nicely.

    +
    1
    2
    3
    4
    5
    6
    var columnDefs = [
      {
        field: 'email',
        cellTemplate: '<div class="ui-grid-cell-contents"><a href="mailto:{{ COL_FIELD }}">Send E-Mail</a></div>'
      }
    ];
    + +

    In the plunker below I’m using a basic cellTemplate to bind both the first and last name fields into one column. On the second column I’m using a simple link like above (note: none of these emails are real).

    +

    On the third one, I’m using a template that’s referenced in index.html. If you check the bottom of that file you’ll see the template inside a <script type="text/ng-template"> tag. Any tags of that type will put automatically put into the template cache ($templateCache) by Angular, with the id you specify.

    +

    Also in the third column template you can see I’m using a variable called grid.appScope. Anywhere in your templates, grid.appScope will be bound to the parent scope of your grid. I use it to bind my button to a function in my controller that will open a new window with a url to google maps with the address in it (note: most if not all of these address will not exist).

    + + +

    Tooltips

    +

    Tooltips are a little bit different because they float over your content. By default the grid’s cells are set to hide any overflow, so if you just pop a tooltip in there it won’t show up and you’ll probably be very confused. If you just add some custom overflow CSS it should fix your problem.

    +

    Hover over the names in the plunker below:

    + + +

    Tooltips cannot overflow beyond the constraints of the viewport, so they won’t show above the first row or below the bottom row, for example.

    +

    Custom Directives

    +

    You can put absolutely anything in your cell templates, just remember to use .ui-grid-cell-contents if you’re not applying your own custom cell CSS.

    + + +

    Here I’ve used d3.js, nvd3.js, and angular-nvd3.js to create sparkline charts in my cells.

    +

    Summin’ it up

    +

    You should be able to do the vast majority of what you want with your data using these six methods. If you have questions, suggestions, or just want to say hi, drop in to our gitter channel; we’d love to meet you!

    + + + +
    + + +
    +
    +
    + + +
    + + +
    + + + + + + + + + + + + + + + + + + + + + diff --git a/blog/archives/2015/02/index.html b/blog/archives/2015/02/index.html new file mode 100644 index 000000000..894d4417d --- /dev/null +++ b/blog/archives/2015/02/index.html @@ -0,0 +1,163 @@ + + + + + + + + + + + + Archives: 2015/2 | UI Grid + + + + + + + + + + + + + + + + + + + + + +
    +
    + UI Grid + +
    +
    +

    + + +

    +
    +
    + +
    + + + + +
    + + +
    + + + + + + + + + + + + + + + + + + + + + diff --git a/blog/archives/2015/index.html b/blog/archives/2015/index.html new file mode 100644 index 000000000..66b8eccd7 --- /dev/null +++ b/blog/archives/2015/index.html @@ -0,0 +1,163 @@ + + + + + + + + + + + + Archives: 2015 | UI Grid + + + + + + + + + + + + + + + + + + + + + +
    +
    + UI Grid + +
    +
    +

    + + +

    +
    +
    + +
    + + + + +
    + + +
    + + + + + + + + + + + + + + + + + + + + + diff --git a/blog/archives/index.html b/blog/archives/index.html new file mode 100644 index 000000000..a4dd6d436 --- /dev/null +++ b/blog/archives/index.html @@ -0,0 +1,163 @@ + + + + + + + + + + + + Archives | UI Grid + + + + + + + + + + + + + + + + + + + + + +
    +
    + UI Grid + +
    +
    +

    + + +

    +
    +
    + +
    + + + + +
    + + +
    + + + + + + + + + + + + + + + + + + + + + diff --git a/blog/atom.xml b/blog/atom.xml new file mode 100644 index 000000000..e43a63169 --- /dev/null +++ b/blog/atom.xml @@ -0,0 +1,93 @@ + + + <![CDATA[UI Grid]]> + + + + 2015-03-10T02:33:43.176Z + http://ui-grid.info/blog/ + + + + + + + Hexo + + + <![CDATA[6 Ways to Take Control of How Your Grid Data is Displayed]]> + + http://ui-grid.info/blog/6_ways_to_take_control_of_how_your_grid_data_is_displayed/ + 2015-02-27T16:55:01.000Z + 2015-03-10T02:18:34.000Z + +

    Getting your data displayed just right can be a huge pain.

    +

    You might just want to format some numbers, or you might want to embed something complex like a chart or custom directive.

    +

    In this post outline six different methods you can use to get your data just the way you want it:

    +
      +
    • Bindings
      • +
    • Cell Filters
      • +
    • Cell Templates
        +
      • Links
        • +
      • Buttons
        • +
      • Custom directives
        • +
      +
      • +
    +

    Bindings

    +

    UI Grid columns can be bound to any sort of Angular expression, as well as property names that would normally break an expression:

    +
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    var columnDefs = [
      { field: 'name' },
      { field: 'addresses[0]' },
      /*
        Yes, you can use hyphens, plus signs, etc.
        Normally something like {{ row.entity.first-name }} would
        bomb but UI Grid pre-processes your bindings to make sure they work correctly.
      */
      { field: 'first-name' }, 
      /* Function expressions work too */
      { field: 'getCurrency()' },
      { field: 'transformValue(row.entity.myField)' },
      /* Plain old functions are also an option */
      { field: function () { return this.address.zip; } }
    ];
    + +

    Cell Filters

    +

    Cell filters can transform the displayed value for a column while leaving the model intact. In this plunker the amount column contains floating point values, but we only want to display the integer part. A simple cellFilter that uses .toFixed() will alter the displayed value the way we want.

    + + +

    Passing Arguments

    +

    In the third column I am using two different fields. The column itself is bound to the same field as the second column, but on the filter I am passing the scope like so: cellFilter: 'currencyFilter:this'. Using the this argument on your filter will pass the scope.

    +

    Then I can lookup the currency symbol I want using the currency field from the row.

    +

    If you double-click a cell in the Currency column you’ll see that the raw value is still available to be edited. Cell filters only change your displayed value!

    +

    Cell Templates

    +

    Column definitions take a cellTemplate argument you can use to give your cells a custom template. You can specify it a few different ways, with a url (relative or absolute), an Angular template ID, a string/Angular element, or a promise.

    +
    1
    2
    3
    4
    5
    var columnDefs = [
      { field: 'name', cellTemplate: 'name-template.html' },
      { field: 'name', cellTemplate: 'myTemplateId' },
      { field: 'name', cellTemplate: $.get('url-to-your-template.html') }
    ];
    + +

    Bindings in Cell Templates

    +

    There are a couple options for your binding your row’s data in your template. You can access the row object which is in the local scope; row.entity will contain the reference to your object, so if you want the “name” field, you can bind like so: .

    +

    If you’ve already defined your binding in your column definition you can use one of UI Grid’s placeholders: {{ COL_FIELD }}. UI Grid will automatically replace COL_FIELD with the appropriate binding. If you need to two-way bind to your row, like when you’re using the edit feature, you’ll need to use the MODEL_COL_FIELD placeholder.

    +
    1
    2
    3
    4
    5
    6
    var columnDefs = [
      {
        field: 'image_url',
        cellTemplate: '<div class="ui-grid-cell-contents"><img src="{{ COL_FIELD }}" /></div>'
      }
    ];
    + + +

    Links are simple, just use regular old HTML. Wrapping your cell in an element using the class .ui-grid-cell-contents will apply the proper CSS settings like padding, overflow, etc., and make sure your cell fits in its space nicely.

    +
    1
    2
    3
    4
    5
    6
    var columnDefs = [
      {
        field: 'email',
        cellTemplate: '<div class="ui-grid-cell-contents"><a href="mailto:{{ COL_FIELD }}">Send E-Mail</a></div>'
      }
    ];
    + +

    In the plunker below I’m using a basic cellTemplate to bind both the first and last name fields into one column. On the second column I’m using a simple link like above (note: none of these emails are real).

    +

    On the third one, I’m using a template that’s referenced in index.html. If you check the bottom of that file you’ll see the template inside a <script type="text/ng-template"> tag. Any tags of that type will put automatically put into the template cache ($templateCache) by Angular, with the id you specify.

    +

    Also in the third column template you can see I’m using a variable called grid.appScope. Anywhere in your templates, grid.appScope will be bound to the parent scope of your grid. I use it to bind my button to a function in my controller that will open a new window with a url to google maps with the address in it (note: most if not all of these address will not exist).

    + + +

    Tooltips

    +

    Tooltips are a little bit different because they float over your content. By default the grid’s cells are set to hide any overflow, so if you just pop a tooltip in there it won’t show up and you’ll probably be very confused. If you just add some custom overflow CSS it should fix your problem.

    +

    Hover over the names in the plunker below:

    + + +

    Tooltips cannot overflow beyond the constraints of the viewport, so they won’t show above the first row or below the bottom row, for example.

    +

    Custom Directives

    +

    You can put absolutely anything in your cell templates, just remember to use .ui-grid-cell-contents if you’re not applying your own custom cell CSS.

    + + +

    Here I’ve used d3.js, nvd3.js, and angular-nvd3.js to create sparkline charts in my cells.

    +

    Summin’ it up

    +

    You should be able to do the vast majority of what you want with your data using these six methods. If you have questions, suggestions, or just want to say hi, drop in to our gitter channel; we’d love to meet you!

    +]]>     + + +

    Getting your data displayed just right can be a huge pain.

    +

    You might just want to]]> +

    + + + + + +     + +     diff --git a/blog/cp/blah.html b/blog/cp/blah.html new file mode 100644 index 000000000..dd0500071 --- /dev/null +++ b/blog/cp/blah.html @@ -0,0 +1,22 @@ + +
    +
    + + + +

    6 Ways to Take Control of How Your Grid Data is Displayed

    +
    +
    +

    + + +Getting your data displayed just right can be a huge pain. +You might just want to format some numbers, or you might want to embed something complex like a chart or custom directive. +In this post outline six different me + +

    + +
    +
    diff --git a/blog/css/normalize.css b/blog/css/normalize.css new file mode 100644 index 000000000..562891ab8 --- /dev/null +++ b/blog/css/normalize.css @@ -0,0 +1,406 @@ +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined in IE 8/9. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * Correct `inline-block` display not defined in IE 8/9. + */ + +audio, +canvas, +video { + display: inline-block; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9. + * Hide the `template` element in IE, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background: transparent; +} + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari 5, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Correct font family set oddly in Safari 5 and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +/** + * Improve readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre-wrap; +} + +/** + * Set consistent quote types. + */ + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9. + */ + +img { + border: 0; +} + +/** + * Correct overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari 5. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Correct font family not being inherited in all browsers. + * 2. Correct font size not being inherited in all browsers. + * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. + * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome + * (include `-moz` to future-proof). + */ + +input[type="search"] { + -webkit-appearance: textfield; /* 1 */ + -moz-box-sizing: content-box; + -webkit-box-sizing: content-box; /* 2 */ + box-sizing: content-box; +} + +/** + * Remove inner padding and search cancel button in Safari 5 and Chrome + * on OS X. + */ + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file diff --git a/blog/css/screen.css b/blog/css/screen.css new file mode 100644 index 000000000..8968be558 --- /dev/null +++ b/blog/css/screen.css @@ -0,0 +1,1135 @@ +/* ========================================================================== + Table of Contents + ========================================================================== */ + +/* + + 0. Includes + 1. Icons + 2. General + 3. Utilities + 4. General + 5. Single Post + 6. Third Party Elements + 7. Pagination + 8. Footer + 9. Media Queries (Tablet) + 10. Media Queries (Mobile) + + */ + +/* ========================================================================== + 0. Includes - Ground zero + ========================================================================== */ + +@import url(normalize.css); + + +/* ========================================================================== + 1. Icons - Sets up the icon font and respective classes + ========================================================================== */ + +/* Import the font file with the icons in it */ +@font-face { + font-family: 'icons'; + src:url('../fonts/icons.eot'); + src:url('../fonts/icons.eot?#iefix') format('embedded-opentype'), + url('../fonts/icons.woff') format('woff'), + url('../fonts/icons.ttf') format('truetype'), + url('../fonts/icons.svg#icons') format('svg'); + font-weight: normal; + font-style: normal; +} + +/* Apply these base styles to all icons */ +.icon-ghost:before, +.icon-feed:before, +.icon-twitter:before, +.icon-google-plus:before, +.icon-facebook:before { + font-family: 'icons'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + text-decoration: none; +} + +/* Each icon is created by inserting the corret character into the + content of the :before pseudo element. Like a boss. */ +.icon-ghost:before { + content: "\e000"; +} +.icon-feed:before { + content: "\e001"; +} +.icon-twitter:before { + content: "\e002"; + font-size: 1.1em; +} +.icon-google-plus:before { + content: "\e003"; +} +.icon-facebook:before { + content: "\e004"; +} + + +/* ========================================================================== + 2. General - Setting up some base styles + ========================================================================== */ + +html { + height: 100%; + max-height: 100%; + font-size: 62.5%; +} + +body { + height: 100%; + max-height: 100%; + font-family: 'Noto Serif', serif; + font-size: 2.0rem; + line-height: 1.6em; + color: #3A4145; +} + +::-moz-selection { + color: #222; + background: #D6EDFF; + text-shadow: none; +} + +::selection { + color: #222; + background: #D6EDFF; + text-shadow: none; +} + +h1, h2, h3, +h4, h5, h6 { + text-rendering: optimizeLegibility; + line-height: 1; + margin-top: 0; + font-family: 'Open Sans', sans-serif; +} + +h1 { + font-size: 5rem; + line-height: 1.2em; + letter-spacing: -2px; + text-indent: -3px; +} + +h2 { + font-size: 4rem; + line-height: 1.2em; + letter-spacing: -1px; + text-indent: -2px; +} + +h3 { + font-size: 3.5rem; +} + +h4 { + font-size: 3rem; +} + +h5 { + font-size: 2.5rem; +} + +h6 { + font-size: 2rem; +} + +a { + color: #4a4a4a; + transition: color ease 0.3s; +} + +a:hover { + color: #57A3E8; +} + +h1 a, h2 a, h3 a, +h4 a, h5 a, h6 a { + color: #50585D; +} + + +p, ul, ol, dl { + margin: 1.6em 0; +} + +ol ol, ul ul, +ul ol, ol ul { + margin: 0.4em 0; +} + +dl dt { + float: left; + width: 180px; + overflow: hidden; + clear: left; + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: bold; + margin-bottom: 1em +} + +dl dd { + margin-left: 200px; + margin-bottom: 1em +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #efefef; + margin: 3.2em 0; + padding: 0; +} + +blockquote { + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 1.6em 0 1.6em -2.2em; + padding: 0 0 0 1.6em; + border-left: #4a4a4a 0.4em solid; +} + +blockquote p { + margin: 0.8em 0; + font-style: italic; +} + +blockquote small { + display: inline-block; + margin: 0.8em 0 0.8em 1.5em; + font-size:0.9em; + color: #ccc; +} + +blockquote small:before { content: '\2014 \00A0'; } + +blockquote cite { + font-weight:bold; +} + +blockquote cite a { font-weight: normal; } + +mark { + background-color: #ffc336; +} + +code, tt { + padding: 1px 3px; + font-family: Inconsolata, monospace, sans-serif; + font-size: 0.85em; + white-space: pre-wrap; + border: 1px solid #E3EDF3; + background: #F7FAFB; + border-radius: 2px; +} + +pre { + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 1.6em 0; + border: 1px solid #E3EDF3; + width: 100%; + padding: 10px; + font-family: Inconsolata, monospace, sans-serif; + font-size: 0.9em; + white-space: pre; + overflow: auto; + background: #F7FAFB; + border-radius: 3px; +} + +pre code, tt { + font-size: inherit; + white-space: -moz-pre-wrap; + white-space: pre-wrap; + background: transparent; + border: none; + padding: 0; +} + +kbd { + display: inline-block; + margin-bottom: 0.4em; + padding: 1px 8px; + border: #ccc 1px solid; + color: #666; + text-shadow: #fff 0 1px 0; + font-size: 0.9em; + font-weight: bold; + background: #f4f4f4; + border-radius: 4px; + box-shadow: + 0 1px 0 rgba(0, 0, 0, 0.2), + 0 1px 0 0 #fff inset; +} + +table { + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 1.6em 0; + width:100%; + max-width: 100%; + background-color: transparent; +} + +table th, +table td { + padding: 8px; + line-height: 20px; + text-align: left; + vertical-align: top; + border-top: 1px solid #efefef; +} + +table th { color: #000; } + +table caption + thead tr:first-child th, +table caption + thead tr:first-child td, +table colgroup + thead tr:first-child th, +table colgroup + thead tr:first-child td, +table thead:first-child tr:first-child th, +table thead:first-child tr:first-child td { + border-top: 0; +} + +table tbody + tbody { border-top: 2px solid #efefef; } + +table table table { background-color: #fff; } + +table tbody > tr:nth-child(odd) > td, +table tbody > tr:nth-child(odd) > th { + background-color: #f6f6f6; +} + +table.plain tbody > tr:nth-child(odd) > td, +table.plain tbody > tr:nth-child(odd) > th { + background: transparent; +} + +iframe, .fluid-width-video-wrapper { + display: block; + margin: 1.6em 0; +} + +/* When a video is inside the fitvids wrapper, drop the +margin on the iframe, cause it breaks stuff. */ +.fluid-width-video-wrapper iframe { + margin: 0; +} + + +/* ========================================================================== + 3. Utilities - These things get used a lot + ========================================================================== */ + +/* Hides shit */ +.hidden { + text-indent: -9999px; + visibility: hidden; + display: none; +} + +/* Creates a responsive wrapper that makes our content scale nicely */ +.inner { + position: relative; + width: 80%; + max-width: 700px; + margin: 0 auto; +} + +/* Centres vertically yo. (IE8+) */ +.vertical { + display: table-cell; + vertical-align: middle; +} + + +/* ========================================================================== + 4. General - The main styles for the the theme + ========================================================================== */ + +/* Big cover image on the home page */ +.site-head { + position: relative; + display: table; + width: 100%; + height: 60%; + margin-bottom: 5rem; + text-align: center; + color: #fff; + background: #303538 no-repeat center center; + background-size: cover; +} + +.blog-logo { + text-decoration: none; +} + +/* Yo-logo. Yolo-go. Upload one in ghost/settings/ */ +.blog-logo img { + display: block; + max-height: 100px; + width: auto; + margin: 0 auto; + line-height: 0; +} + +/* The details of your blog. Defined in ghost/settings/ */ +.blog-title { + margin: 10px 0 10px 0; + font-size: 5rem; + letter-spacing: -1px; + font-weight: bold; + font-family: 'Open Sans', sans-serif; + text-shadow: 0 1px 6px rgba(0,0,0,0.1); +} + +.blog-description { + margin: 0; + font-size: 1.8rem; + line-height: 1.5em; + font-weight: 300; + font-family: 'Noto Serif', serif; + letter-spacing: 0; + text-shadow: 0 1px 3px rgba(0,0,0,0.15); +} + +/* Every post, on every page, gets this style on its
    tag */ +.post { + position: relative; + width:80%; + max-width: 700px; + margin: 4rem auto; + padding-bottom: 4rem; + border-bottom: #EBF2F6 1px solid; + word-break: break-word; + hyphens: auto; +} + +/* Add a little circle in the middle of the border-bottom on our .post + just for the lolz and stylepoints. */ +.post:after { + display: block; + content: ""; + width: 7px; + height: 7px; + border: #E7EEF2 1px solid; + position: absolute; + bottom: -5px; + left: 50%; + margin-left: -5px; + background: #fff; + -webkit-border-radius: 100%; + -moz-border-radius: 100%; + border-radius: 100%; + box-shadow: #fff 0 0 0 5px; +} + +.post-title { + margin:0; +} + +.post-title a { + text-decoration: none; +} + +.post-excerpt p { + margin: 1.6rem 0 0 0; + font-size: 0.9em; + line-height: 1.6em; +} + +.post-meta { + display: inline-block; + margin: 0 0 5px 0; + font-family: 'Open Sans', sans-serif; + font-size: 1.5rem; + color: #9EABB3; +} + +.post-meta a { + color: #9EABB3; + text-decoration: none; +} + +.post-meta a:hover { + text-decoration: underline; +} + +.user-meta { + position: relative; + padding: 0.3rem 40px 0 100px; + min-height: 77px; +} + +.user-image { + position: absolute; + top: 0; + left: 0; +} + +.user-name { + display: block; + font-weight: bold; +} + +.user-bio { + display: block; + max-width: 440px; + font-size: 1.4rem; + line-height: 1.5em; +} + +.publish-meta { + position: absolute; + top: 0; + right: 0; + padding: 4.3rem 0 4rem 0; + text-align: right; +} + +.publish-heading { + display: block; + font-weight: bold; +} + +.publish-date { + display: block; + font-size: 1.4rem; + line-height: 1.5em; +} + +.comments-area { + width: 80%; + max-width: 700px; + margin: 4rem auto; +} + +#comment h1 a { + text-decoration: none; +} + +/* ========================================================================== + 5. Single Post - When you click on an individual post + ========================================================================== */ + +/* Insert some mad padding up in the header for better spacing */ +.post-template .post-header { + padding: 60px 0; + text-align: center; +} + +.post-template .site-head { + color: #303538; + border-bottom: #ebf2f6 1px solid; + background: none !important; +} + +.post-template .site-head:after { + position: absolute; + bottom: -5px; + left: 50%; + display: block; + width: 7px; + height: 7px; + margin-left: -5px; + content: ''; + border: #e7eef2 1px solid; + -webkit-border-radius: 100%; + -moz-border-radius: 100%; + border-radius: 100%; + background: #fff; + box-shadow: #fff 0 0 0 5px; +} + +/* Keep large images within the bounds of the post-width */ +.post-content img { + display: block; + max-width: 100%; + margin: 0 auto; + height: auto; +} + +/* The author credit area after the post */ +.post-footer { + position: relative; + margin: 4rem 0 0 0; + padding: 4rem 0 0 0; + border-top: #EBF2F6 1px solid; +} + +.post-footer h4 { + font-size: 1.8rem; + margin: 0; +} + +.post-footer p { + margin: 1rem 0; + font-size: 1.4rem; + line-height: 1.6em; +} + +/* Create some space to the right for the share links */ +.post-footer .author { + margin-right: 180px; +} + +/* Drop the share links in the space to the right. + Doing it like this means it's easier for the author bio + to be flexible at smaller screen sizes while the share + links remain at a fixed width the whole time */ +.post-footer .share { + position: absolute; + top: 4rem; + right: 0; + width: 140px; +} + +.post-footer .share a { + font-size: 1.8rem; + display: inline-block; + margin: 1.4rem 1.6rem 1.6rem 0; + color: #BBC7CC; + text-decoration: none; +} + +.post-footer .share a:hover { + color: #50585D; +} + + +/* ========================================================================== + 6. Third Party Elements - Embeds from other services + ========================================================================== */ + +/* Hexo: Youtube, other video container */ + +.video-container { + position: relative; + padding-top: 56.25%; + height: 0; + overflow: hidden; +} +.video-container iframe, +.video-container object, +.video-container embed { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + margin-top: 0; +} + +/* Hexo: Syntax Highlighter */ + +figure.highlight { + background:#fff; + border-radius:0.3em; + border:1px solid #e1e1e1; + line-height:1.45em; + font-size:.9em; + margin-bottom:2.1em; + color:#222; + overflow:auto; + white-space:pre; + word-wrap:normal; +} +figure.highlight figcaption { + padding: 7px 10px; + font-size: .8em; +} +figure.highlight table { + margin: 0; +} +figure.highlight table > tbody > tr > td { + padding: 0; + background: #fff !important; +} +figure.highlight table > tbody > tr > td.gutter { + max-width: 40px; + text-align: right; +} +figure.highlight pre { + border: none; + margin: 0; +} + +/* Theme: Solarized - Github + * More theme here: http://softwaremaniacs.org/media/soft/highlight/test.html + */ +pre .comment, +pre .template_comment, +.diff pre .header, +pre .javadoc { + color: #998; + font-style: italic +} + +pre .keyword, +.css .rule pre .keyword, +pre .winutils, +.javascript pre .title, +.nginx pre .title, +pre .subst, +pre .request, +pre .status { + color: #333; + font-weight: bold +} + +pre .number, +pre .hexcolor, +.ruby pre .constant { + color: #099; +} + +pre .string, +pre .tag pre .value, +pre .phpdoc, +.tex pre .formula { + color: #d14 +} + +pre .title, +pre .id, +.coffeescript pre .params, +.scss pre .preprocessor { + color: #900; + font-weight: bold +} + +.javascript pre .title, +.lisp pre .title, +.clojure pre .title, +pre .subst { + font-weight: normal +} + +pre .class pre .title, +.haskell pre .type, +.vhdl pre .literal, +.tex pre .command { + color: #458; + font-weight: bold +} + +pre .tag, +pre .tag pre .title, +pre .rules pre .property, +.django pre .tag pre .keyword { + color: #000080; + font-weight: normal +} + +pre .attribute, +pre .variable, +.lisp pre .body { + color: #008080 +} + +pre .regexp { + color: #009926 +} + +pre .symbol, +.ruby pre .symbol pre .string, +.lisp pre .keyword, +.tex pre .special, +pre .prompt { + color: #990073 +} + +pre .built_in, +.lisp pre .title, +.clojure pre .built_in { + color: #0086b3 +} + +pre .preprocessor, +pre .pragma, +pre .pi, +pre .doctype, +pre .shebang, +pre .cdata { + color: #999; + font-weight: bold +} + +pre .deletion { + background: #fdd +} + +pre .addition { + background: #dfd +} + +.diff pre .change { + background: #0086b3 +} + +pre .chunk { + color: #aaa +} + + +/* Github */ + +.gist table { + margin: 0; + font-size: 1.4rem; +} + +.gist .line-number { + min-width: 25px; + font-size: 1.1rem; +} + + +/* ========================================================================== + 7. Pagination - Tools to let you flick between pages + ========================================================================== */ + +/* The main wrapper for our pagination links */ +.pagination { + position: relative; + width: 80%; + max-width: 700px; + margin: 4rem auto; + font-family: 'Open Sans', sans-serif; + font-size: 1.3rem; + color: #9EABB3; + text-align: center; +} + +.pagination a { + color: #9EABB3; +} + +/* Push the previous/next links out to the left/right */ +.older-posts, +.newer-posts { + position: absolute; + display: inline-block; + padding: 0 15px; + border: #EBF2F6 2px solid; + text-decoration: none; + border-radius: 30px; + transition: border ease 0.3s; +} + +.older-posts { + right: 0; +} + +.page-number { + display: inline-block; + padding: 2px 0; +} + +.newer-posts { + left: 0; +} + +.older-posts:hover, +.newer-posts:hover { + border-color: #9EABB3; +} + + +/* ========================================================================== + 8. Footer - The bottom of every page + ========================================================================== */ + +.site-footer { + position: relative; + margin: 8rem 0 0 0; + padding: 4rem 0; + border-top: #EBF2F6 1px solid; + font-family: 'Open Sans', sans-serif; + font-size: 1.3rem; + line-height: 1.7em; + color: #BBC7CC; + text-align: center; + background: #F7FAFB; +} + +.site-footer a { + color: #BBC7CC; + text-decoration: underline; +} + +.site-footer a:hover { + color: #50585D; +} + +.poweredby .icon-ghost { + font-weight: 700; + text-decoration: none; +} + +.poweredby .icon-ghost:hover { + text-decoration: none; +} + +.poweredby .icon-ghost:before { + font-size: 1rem; + margin-right: 0.2em; +} + +/* The subscribe icon on the footer */ +.subscribe { + width: 28px; + height: 28px; + position: absolute; + top: -14px; + left: 50%; + margin-left: -15px; + border: #EBF2F6 1px solid; + text-align: center; + line-height: 2.4rem; + border-radius: 50px; + background: #fff; + transition: box-shadow 0.5s; +} + +/* The RSS icon, inserted via icon font */ +.subscribe:before { + color: #D2DEE3; + font-size: 10px; + position: absolute; + top: 9px; + left: 9px; + font-weight: bold; + transition: color 0.5s ease; +} + +/* Add a box shadow to on hover */ +.subscribe:hover { + box-shadow: rgba(0,0,0,0.05) 0 0 0 3px; + transition: box-shadow 0.25s; +} + +.subscribe:hover:before { + color: #50585D; +} + +/* CSS tooltip saying "Subscribe!" - initially hidden */ +.tooltip { + opacity:0; + display: inline-block; + padding: 4px 8px 5px 8px; + position:absolute; + top: -23px; + left: -21px; + color: rgba(255,255,255,0.9); + font-size: 1.1rem; + line-height: 1em; + text-align: center; + background: #50585D; + border-radius:20px; + box-shadow: 0 1px 4px rgba(0,0,0,0.1); + transition: opacity 0.3s ease, top 0.3s ease; +} + +/* The little chiclet arrow under the tooltip, pointing down */ +.tooltip:after { + content:""; + border-width:5px 5px 0 5px; + border-style:solid; + border-color: #50585D transparent; + display:block; + position:absolute; + bottom:-4px; + left:50%; + margin-left:-5px; + z-index: 220; + width:0; +} + +/* On hover, show the tooltip! */ +.subscribe:hover .tooltip { + opacity: 1; + top: -33px; +} + + +/* ========================================================================== + 9. Media Queries - Smaller than 900px + ========================================================================== */ + +@media only screen and (max-width: 900px) { + + blockquote { + margin-left: 0; + } + + .site-head { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + height: auto; + min-height: 240px; + padding: 15% 0; + } + + .blog-title { + font-size: 4rem; + letter-spacing: -1px; + } + + .blog-description { + font-size: 1.7rem; + line-height: 1.5em; + } + + .post { + font-size: 0.9em; + line-height: 1.6em; + } + + .post-template .post { + padding-bottom: 1rem; + } + + .post-template .post-header { + padding: 40px 0; + } + + h1 { + font-size: 4.8rem; + text-indent: -2px; + } + + h2 { + font-size: 3.8rem; + } + + h3 { + font-size: 3.3rem; + } + + h4 { + font-size: 2.8rem; + } + +} + +/* ========================================================================== + 10. Media Queries - Smaller than 500px + ========================================================================== */ + + +@media only screen and (max-width: 500px) { + + .blog-logo img { + max-height: 80px; + } + + .inner, + .pagination { + width: auto; + margin-left: 16px; + margin-right: 16px; + } + + .post { + width:auto; + margin-left: 16px; + margin-right: 16px; + font-size: 0.8em; + line-height: 1.6em; + } + + .site-head { + padding: 10% 0; + } + + .blog-title { + font-size: 3rem; + } + + .blog-description { + font-size: 1.5rem; + } + + + h1, h2 { + font-size: 3rem; + line-height: 1.1em; + letter-spacing: -1px; + } + + h3 { + font-size: 2.8rem; + } + + h4 { + font-size: 2.3rem; + } + + .post-template .post-header { + padding: 30px 0; + } + + .post-meta { + font-size: 1.3rem; + } + + .post-footer { + padding: 4rem 0; + text-align: center; + } + + .post-footer .author { + margin: 0 0 2rem 0; + padding: 0 0 1.6rem 0; + border-bottom: #EBF2F6 1px dashed; + } + + .post-footer .share { + position: static; + width: auto; + } + + .post-footer .share a { + margin: 1.4rem 0.8rem 0 0.8rem; + } + + .older-posts, + .newer-posts { + position: static; + margin: 10px 0; + } + + .page-number { + display: block; + } + + .site-footer { + margin-top: 6rem; + font-size: 1.1rem; + } + +} + +/* ========================================================================== + End of file. Media queries should be the last thing here. Do not add stuff + below this point, or it will probably fuck everything up. + ========================================================================== */ diff --git a/blog/css/site.css b/blog/css/site.css new file mode 100644 index 000000000..f2a1de693 --- /dev/null +++ b/blog/css/site.css @@ -0,0 +1,352 @@ + +body { + padding-top: 0px; +} + +/*------------------------------------------ + Posts +--------------------------------------------*/ + +.posts-header { + text-transform: uppercase; +} + +.post-content { + font-size: 18px; +} + +.post-content p { + margin: 1em; +} + +.post-content h1, +.post-content h2, +.post-content h3, +.post-content h4, +.post-content h5, +.post-content h6 { + margin-top: 60px; +} + +.post-content ul { + margin-left: 20px; +} + +/* The author credit area after the post */ +.post-footer { + position: relative; + margin: 4rem 0 0 0; + padding: 4rem 0 0 0; + border-top: #EBF2F6 1px solid; +} + +.post-footer h4 { + font-size: 1.8rem; + margin: 0; +} + +.post-footer p { + margin: 1rem 0; + font-size: 1.4rem; + line-height: 1.6em; +} + +/* Create some space to the right for the share links */ +.post-footer .author { + margin-right: 180px; +} + +/* Drop the share links in the space to the right. + Doing it like this means it's easier for the author bio + to be flexible at smaller screen sizes while the share + links remain at a fixed width the whole time */ +.post-footer .share { + position: absolute; + top: 4rem; + right: 0; + width: 140px; +} + +.post-footer .share a { + font-size: 1.8rem; + display: inline-block; + margin: 1.4rem 1.6rem 1.6rem 0; + color: #BBC7CC; + text-decoration: none; +} + +.post-footer .share a:hover { + color: #50585D; +} + +/* Mailchimp form */ + +.mailchimp-form-container { + margin-top: 50px; +} + +.mailchimp-form { + border: 2px solid #dce4ec; + border-radius: 4px; + float: left; + padding: 20px; +} + +/*------------------------------------------ + Google search form +--------------------------------------------*/ + +input.gsc-input, .gsc-input-box, .gsc-input-box-hover, .gsc-input-box-focus, .gsc-search-button +{ + box-sizing: content-box; + line-height: normal; +} + +.post-search-form input.gsc-search-button.gsc-search-button-v2 { + background-color: #18bc9c; + border-color: #2ca78f; +} + +/*------------------------------------------ + Footer +--------------------------------------------*/ + +.site-footer { + padding: 50px 0 65px; +} + +.site-footer .list-inline { + margin: 0; + padding: 0; +} + +.site-footer .list-inline a { + color: #2c3e50; +} + +.site-footer .copyright { + font-size: 14px; + text-align: center; + margin-top: 30px; + margin-bottom: 0; +} + +/*------------------------------------------ + Pagination +--------------------------------------------*/ + +/* The main wrapper for our pagination links */ +.paging { + text-align: center; + /*position: relative;*/ + /*width: 80%; + max-width: 700px; + margin: 4rem auto;*/ + /*font-family: 'Open Sans', sans-serif;*/ + /*font-size: 1.3rem;*/ + color: #9EABB3; + margin-top: 4rem; +} + +.paging a { + color: #9EABB3; +} + +/* Push the previous/next links out to the left/right */ +.older-posts, +.newer-posts { + /*position: absolute; + display: inline-block;*/ + padding: 0 15px; + border: #EBF2F6 2px solid; + text-decoration: none; + border-radius: 30px; + transition: border ease 0.3s; +} + +.page-number { + display: inline-block; + padding: 2px 0; +} + +.older-posts:hover, +.newer-posts:hover { + border-color: #9EABB3; +} + + +/* Hexo: Syntax Highlighter */ + +figure.highlight { + background: #23241f; + border-radius:0.3em; + border:1px solid #e1e1e1; + line-height:1.45em; + font-size:.9em; + margin-bottom:2.1em; + /*color:#222;*/ + overflow:auto; + white-space:pre; + word-wrap:normal; +} +figure.highlight figcaption { + padding: 7px 10px; + font-size: .8em; +} +figure.highlight table { + width:100%; + margin: 0; +} +figure.highlight table > tbody > tr > td, figure.highlight table > tbody > tr > td { + padding: 0; + background: #23241f !important; +} +figure.highlight table > tbody > tr > td, figure.highlight table > tbody > tr > td > pre { + background: #23241f !important; +} +figure.highlight table > tbody > tr > td.gutter { + max-width: 40px; + text-align: right; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +figure.highlight pre { + border: none; + margin: 0; +} + + +/* Theme: Solarized - Github + * More theme here: http://softwaremaniacs.org/media/soft/highlight/test.html + */ +/*pre .comment, +pre .template_comment, +.diff pre .header, +pre .javadoc { + color: #998; + font-style: italic +} + +pre .keyword, +.css .rule pre .keyword, +pre .winutils, +.javascript pre .title, +.nginx pre .title, +pre .subst, +pre .request, +pre .status { + color: #333; + font-weight: bold +} + +pre .number, +pre .hexcolor, +.ruby pre .constant { + color: #099; +} + +pre .string, +pre .tag pre .value, +pre .phpdoc, +.tex pre .formula { + color: #d14 +} + +pre .title, +pre .id, +.coffeescript pre .params, +.scss pre .preprocessor { + color: #900; + font-weight: bold +} + +.javascript pre .title, +.lisp pre .title, +.clojure pre .title, +pre .subst { + font-weight: normal +} + +pre .class pre .title, +.haskell pre .type, +.vhdl pre .literal, +.tex pre .command { + color: #458; + font-weight: bold +} + +pre .tag, +pre .tag pre .title, +pre .rules pre .property, +.django pre .tag pre .keyword { + color: #000080; + font-weight: normal +} + +pre .attribute, +pre .variable, +.lisp pre .body { + color: #008080 +} + +pre .regexp { + color: #009926 +} + +pre .symbol, +.ruby pre .symbol pre .string, +.lisp pre .keyword, +.tex pre .special, +pre .prompt { + color: #990073 +} + +pre .built_in, +.lisp pre .title, +.clojure pre .built_in { + color: #0086b3 +} + +pre .preprocessor, +pre .pragma, +pre .pi, +pre .doctype, +pre .shebang, +pre .cdata { + color: #999; + font-weight: bold +} + +pre .deletion { + background: #fdd +} + +pre .addition { + background: #dfd +} + +.diff pre .change { + background: #0086b3 +} + +pre .chunk { + color: #aaa +} +*/ + + +/* Github */ + +/*.gist table { + margin: 0; + font-size: 1.4rem; +} + +.gist .line-number { + min-width: 25px; + font-size: 1.1rem; +}*/ \ No newline at end of file diff --git a/blog/fonts/icons.dev.svg b/blog/fonts/icons.dev.svg new file mode 100644 index 000000000..dac6a13a4 --- /dev/null +++ b/blog/fonts/icons.dev.svg @@ -0,0 +1,41 @@ + + + + +This is a custom SVG font generated by IcoMoon. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/blog/fonts/icons.eot b/blog/fonts/icons.eot new file mode 100644 index 000000000..68c968db6 Binary files /dev/null and b/blog/fonts/icons.eot differ diff --git a/blog/fonts/icons.svg b/blog/fonts/icons.svg new file mode 100644 index 000000000..182aa87c5 --- /dev/null +++ b/blog/fonts/icons.svg @@ -0,0 +1,41 @@ + + + + +This is a custom SVG font generated by IcoMoon. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/blog/fonts/icons.ttf b/blog/fonts/icons.ttf new file mode 100644 index 000000000..12b247613 Binary files /dev/null and b/blog/fonts/icons.ttf differ diff --git a/blog/fonts/icons.woff b/blog/fonts/icons.woff new file mode 100644 index 000000000..0127877de Binary files /dev/null and b/blog/fonts/icons.woff differ diff --git a/blog/index.html b/blog/index.html new file mode 100644 index 000000000..07ba69cc2 --- /dev/null +++ b/blog/index.html @@ -0,0 +1,182 @@ + + + + + + + + + + + + UI Grid + + + + + + + + + + + + + + + + + + + + + +
    +
    + UI Grid + +
    +
    +

    + + +

    +
    +
    +
    +
    +
    Posts
    +
    + + +
    +
    + + + +
    +
    +
    + +

    6 Ways to Take Control of How Your Grid Data is Displayed

    +
    +
    +

    + + +

    Getting your data displayed just right can be a huge pain.

    +

    You might just want to format some numbers, or you might want to embed something complex like a... + +

    +

    + + Posted by Brian on February 27th 2015 + + + + +

    +
    +
    +
    + +
    +
    + + + + +
    + + + +
    + + + + + + + + + + + + + + + + + + + + + diff --git a/blog/js/index.js b/blog/js/index.js new file mode 100644 index 000000000..c015cb44e --- /dev/null +++ b/blog/js/index.js @@ -0,0 +1,15 @@ +/** + * Main JS file for Casper behaviours + */ + +/*globals jQuery, document */ +(function ($) { + "use strict"; + + $(document).ready(function(){ + + $(".post-content").fitVids(); + + }); + +}(jQuery)); \ No newline at end of file diff --git a/blog/js/jquery.fitvids.js b/blog/js/jquery.fitvids.js new file mode 100644 index 000000000..a8551f6e1 --- /dev/null +++ b/blog/js/jquery.fitvids.js @@ -0,0 +1,74 @@ +/*global jQuery */ +/*jshint multistr:true browser:true */ +/*! +* FitVids 1.0.3 +* +* Copyright 2013, Chris Coyier - http://css-tricks.com + Dave Rupert - http://daverupert.com +* Credit to Thierry Koblentz - http://www.alistapart.com/articles/creating-intrinsic-ratios-for-video/ +* Released under the WTFPL license - http://sam.zoy.org/wtfpl/ +* +* Date: Thu Sept 01 18:00:00 2011 -0500 +*/ + +(function( $ ){ + + "use strict"; + + $.fn.fitVids = function( options ) { + var settings = { + customSelector: null + }; + + if(!document.getElementById('fit-vids-style')) { + + var div = document.createElement('div'), + ref = document.getElementsByTagName('base')[0] || document.getElementsByTagName('script')[0], + cssStyles = '­'; + + div.className = 'fit-vids-style'; + div.id = 'fit-vids-style'; + div.style.display = 'none'; + div.innerHTML = cssStyles; + + ref.parentNode.insertBefore(div,ref); + + } + + if ( options ) { + $.extend( settings, options ); + } + + return this.each(function(){ + var selectors = [ + "iframe[src*='player.vimeo.com']", + "iframe[src*='youtube.com']", + "iframe[src*='youtube-nocookie.com']", + "iframe[src*='kickstarter.com'][src*='video.html']", + "object", + "embed" + ]; + + if (settings.customSelector) { + selectors.push(settings.customSelector); + } + + var $allVideos = $(this).find(selectors.join(',')); + $allVideos = $allVideos.not("object object"); // SwfObj conflict patch + + $allVideos.each(function(){ + var $this = $(this); + if (this.tagName.toLowerCase() === 'embed' && $this.parent('object').length || $this.parent('.fluid-width-video-wrapper').length) { return; } + var height = ( this.tagName.toLowerCase() === 'object' || ($this.attr('height') && !isNaN(parseInt($this.attr('height'), 10))) ) ? parseInt($this.attr('height'), 10) : $this.height(), + width = !isNaN(parseInt($this.attr('width'), 10)) ? parseInt($this.attr('width'), 10) : $this.width(), + aspectRatio = height / width; + if(!$this.attr('id')){ + var videoID = 'fitvid' + Math.floor(Math.random()*999999); + $this.attr('id', videoID); + } + $this.wrap('
    ').parent('.fluid-width-video-wrapper').css('padding-top', (aspectRatio * 100)+"%"); + $this.removeAttr('height').removeAttr('width'); + }); + }); + }; +// Works with either jQuery or Zepto +})( window.jQuery || window.Zepto ); diff --git a/blog/tags/customize/index.html b/blog/tags/customize/index.html new file mode 100644 index 000000000..898c851dd --- /dev/null +++ b/blog/tags/customize/index.html @@ -0,0 +1,163 @@ + + + + + + + + + + + + Tag: customize | UI Grid + + + + + + + + + + + + + + + + + + + + + +
    +
    + UI Grid + +
    +
    +

    + + +

    +
    +
    + +
    + + + + +
    + + +
    + + + + + + + + + + + + + + + + + + + + + diff --git a/blog/tags/display/index.html b/blog/tags/display/index.html new file mode 100644 index 000000000..ce35639b8 --- /dev/null +++ b/blog/tags/display/index.html @@ -0,0 +1,163 @@ + + + + + + + + + + + + Tag: display | UI Grid + + + + + + + + + + + + + + + + + + + + + +
    +
    + UI Grid + +
    +
    +

    + + +

    +
    +
    + +
    + + + + +
    + + +
    + + + + + + + + + + + + + + + + + + + + + diff --git a/package.json b/package.json new file mode 100644 index 000000000..f72fb3205 --- /dev/null +++ b/package.json @@ -0,0 +1,20 @@ +{ + "name": "ui-grid.info", + "private": true, + "version": "0.0.0", + "description": "ui-grid.info", + "dependencies": { + "grunt-contrib-connect": "^0.9.0", + "grunt": "^0.4.5", + "grunt-contrib-watch": "^0.6.1", + "grunt-contrib-stylus": "^0.20.0", + "grunt-shell": "^1.1.2" + }, + "devDependencies": {}, + "repository": { + "type": "git", + "url": "https://github.com/angular-ui/ui-grid.info.git" + }, + "author": "", + "license": "MIT" +}