├── .gitignore ├── .sass-cache ├── 88f7edb981d19799504f81b6bbb078c765b5fc15 │ ├── _animations.scssc │ ├── _colors.scssc │ ├── _content.scssc │ ├── _form.scssc │ ├── _global.scssc │ ├── _grid.scssc │ ├── _hero.scssc │ ├── _images.scssc │ ├── _mixins.scssc │ ├── _modal.scssc │ ├── _nav.scssc │ ├── _normalize.scssc │ ├── _responsive-utilities.scssc │ ├── _scaffolding.scssc │ ├── _typography.scssc │ ├── _utilities.scssc │ ├── _variables.scssc │ ├── _z-index.scssc │ └── main.scssc └── ad634c0802241c5e4565f39fb893017029e5f11d │ ├── _clearfix.scssc │ ├── _grid-framework.scssc │ ├── _grid.scssc │ ├── _responsive-visibility.scssc │ └── _vendor-prefixes.scssc ├── 404.html ├── LICENSE.md ├── README.md ├── _config.yml ├── _includes ├── comments.html ├── footer-scripts.html ├── footer.html ├── head.html ├── menu.html ├── metabar.html ├── modal.html ├── sidebar-nav.html ├── sidebar-toggle.html └── subscribe.html ├── _layouts ├── default.html └── post.html ├── _plugins └── url_encode.rb ├── _posts ├── 1928-11-18-debut.markdown ├── 1929-03-28-black-and-white-films.markdown ├── 1930-01-13-comics.markdown ├── 1932-11-18-color-films.markdown ├── 1983-12-16-television.markdown ├── 2014-11-28-mickey-mouse.markdown └── 2014-12-15-a-life-of-walt-disney.markdown ├── _scss ├── _animations.scss ├── _colors.scss ├── _content.scss ├── _form.scss ├── _global.scss ├── _grid.scss ├── _hero.scss ├── _images.scss ├── _mixins.scss ├── _modal.scss ├── _nav.scss ├── _normalize.scss ├── _responsive-utilities.scss ├── _scaffolding.scss ├── _typography.scss ├── _utilities.scss ├── _variables.scss ├── _z-index.scss ├── main.scss └── mixins │ ├── _clearfix.scss │ ├── _grid-framework.scss │ ├── _grid.scss │ ├── _responsive-visibility.scss │ └── _vendor-prefixes.scss ├── about └── index.html ├── assets ├── css │ ├── _14139e58-9ebe-4c0f-beca-73a65bb01ce9 │ │ ├── main.css │ │ └── main.min.css │ ├── main.css │ ├── main.min.css │ ├── prism-line-numbers.css │ └── prism-okaidia.css ├── images │ ├── buffer.svg │ ├── demo.png │ ├── dribbble--black.svg │ ├── facebook--black.svg │ ├── facebook.svg │ ├── favicon.ico │ ├── google+.svg │ ├── heart.svg │ ├── hero │ │ ├── mickey-1929.jpg │ │ ├── mickey-1940.jpg │ │ ├── mickey-comics.jpg │ │ ├── mickey-mouse.jpg │ │ ├── mickey-tv.jpg │ │ ├── steamboat.jpg │ │ └── walt-disney.jpg │ ├── kiva--black.svg │ ├── linkedin--black.svg │ ├── linkedin.svg │ ├── logo-black.svg │ ├── logo-text-black.svg │ ├── logo-text-white.svg │ ├── logo-white.svg │ ├── pinterest--black.svg │ ├── pocket.svg │ ├── posts │ │ └── walt-childhood.jpg │ ├── rss--black.svg │ ├── thumbnail │ │ ├── mickey-1929.jpg │ │ ├── mickey-1940.jpg │ │ ├── mickey-comics.jpg │ │ ├── mickey-mouse.jpg │ │ ├── mickey-tv.jpg │ │ ├── steamboat.jpg │ │ └── walt-disney.jpg │ ├── twitter--black.svg │ ├── twitter.svg │ └── ycombinator.svg └── javascripts │ ├── imagesloaded.pkgd.min.js │ ├── plugins │ └── prism-line-numbers.min.js │ └── prism.js ├── feed.xml ├── gulpfile.js ├── humans.txt ├── index.html └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | .sass-cache 3 | 4 | # node 5 | node_modules 6 | -------------------------------------------------------------------------------- /.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_animations.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_animations.scssc -------------------------------------------------------------------------------- /.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_colors.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_colors.scssc -------------------------------------------------------------------------------- /.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_content.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_content.scssc -------------------------------------------------------------------------------- /.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_form.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_form.scssc -------------------------------------------------------------------------------- /.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_global.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_global.scssc -------------------------------------------------------------------------------- /.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_grid.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_grid.scssc -------------------------------------------------------------------------------- /.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_hero.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_hero.scssc -------------------------------------------------------------------------------- /.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_images.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_images.scssc -------------------------------------------------------------------------------- /.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_mixins.scssc: -------------------------------------------------------------------------------- 1 | 3.4.16 (Selective Steve) 2 | 660a378850538f25f62914f9b55b1232848dbab3 3 | o:Sass::Tree::RootNode :@children[ o:Sass::Tree::CommentNode 4 | : @value[I"d/* 5 | * Mixins 6 | * -------------------------------------------------- 7 | * 8 | * Credit: Bootstrap 3 */:ET: 9 | @type: silent;[: 10 | @linei: @options{o; 11 | ;[I"/* Utilities */; T; 12 | ; ;[; i ; @ o:Sass::Tree::ImportNode :@imported_filenameI"!mixins/responsive-visibility; T;[:@template0; i :@source_rangeo:Sass::Source::Range :@start_poso:Sass::Source::Position; i : @offseti: @end_poso;; i ;i,: 13 | @fileI"_scss/_mixins.scss; T:@importero: Sass::Importers::Filesystem: 14 | @rootI"'/Users/Vincent/Dropbox/Code/mickey; T:@real_rootI"'/Users/Vincent/Dropbox/Code/mickey; T:@same_name_warningso:Set: 15 | @hash{; @ :@imported_file0o; ;I"mixins/vendor-prefixes; T;[;0; i;o; ;o;; i;i;o;; i;i&;@;@; @ ;0o; 16 | ;[I"/* Layout */; T; 17 | ; ;[; i; @ o; ;I"mixins/clearfix; T;[;0; i;o; ;o;; i;i;o;; i;i;@;@; @ ;0o; ;I"mixins/grid-framework; T;[;0; i;o; ;o;; i;i;o;; i;i%;@;@; @ ;0o; ;I"mixins/grid; T;[;0; i;o; ;o;; i;i;o;; i;i;@;@; @ ;0;I"// 18 | // Mixins 19 | // -------------------------------------------------- 20 | // 21 | // Credit: Bootstrap 3 22 | 23 | // Utilities 24 | @import "mixins/responsive-visibility"; 25 | @import "mixins/vendor-prefixes"; 26 | 27 | // Layout 28 | @import "mixins/clearfix"; 29 | @import "mixins/grid-framework"; 30 | @import "mixins/grid";; T; i;o; ;o;; i;i;o;; i;i;@;@:@has_childrenT; @ -------------------------------------------------------------------------------- /.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_modal.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_modal.scssc -------------------------------------------------------------------------------- /.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_nav.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_nav.scssc -------------------------------------------------------------------------------- /.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_normalize.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_normalize.scssc -------------------------------------------------------------------------------- /.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_responsive-utilities.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_responsive-utilities.scssc -------------------------------------------------------------------------------- /.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_scaffolding.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_scaffolding.scssc -------------------------------------------------------------------------------- /.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_typography.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_typography.scssc -------------------------------------------------------------------------------- /.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_utilities.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_utilities.scssc -------------------------------------------------------------------------------- /.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_variables.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_variables.scssc -------------------------------------------------------------------------------- /.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_z-index.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/_z-index.scssc -------------------------------------------------------------------------------- /.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/main.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/.sass-cache/88f7edb981d19799504f81b6bbb078c765b5fc15/main.scssc -------------------------------------------------------------------------------- /.sass-cache/ad634c0802241c5e4565f39fb893017029e5f11d/_clearfix.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/.sass-cache/ad634c0802241c5e4565f39fb893017029e5f11d/_clearfix.scssc -------------------------------------------------------------------------------- /.sass-cache/ad634c0802241c5e4565f39fb893017029e5f11d/_grid-framework.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/.sass-cache/ad634c0802241c5e4565f39fb893017029e5f11d/_grid-framework.scssc -------------------------------------------------------------------------------- /.sass-cache/ad634c0802241c5e4565f39fb893017029e5f11d/_grid.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/.sass-cache/ad634c0802241c5e4565f39fb893017029e5f11d/_grid.scssc -------------------------------------------------------------------------------- /.sass-cache/ad634c0802241c5e4565f39fb893017029e5f11d/_responsive-visibility.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/.sass-cache/ad634c0802241c5e4565f39fb893017029e5f11d/_responsive-visibility.scssc -------------------------------------------------------------------------------- /.sass-cache/ad634c0802241c5e4565f39fb893017029e5f11d/_vendor-prefixes.scssc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/.sass-cache/ad634c0802241c5e4565f39fb893017029e5f11d/_vendor-prefixes.scssc -------------------------------------------------------------------------------- /404.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Oops... 4 | --- 5 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # Released under MIT License 2 | 3 | Copyright (c) 2015 Vincent Chan. 4 | 5 | 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: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | 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. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Mickey 2 | 3 | Mickey is a minimal one-column, responsive theme for [Jekyll](http://jekyllrb.com). 4 | 5 | It's inspired by [Hyde](http://hyde.getpoole.com), [Medium](http://medium.com), and [Squarespace](http://squarespace.com). 6 | 7 | ![Mickey screenshots](/assets/images/demo.png) 8 | 9 | See Mickey in action with [the demo site](http://vincentchan.github.io/mickey) or [my personal blog](http://aneverendingdream.com). 10 | 11 | ## Contents 12 | 13 | - [Installation](#installation) 14 | - [Options](#options) 15 | - [Post front matter](#post-front-matter) 16 | - [Identity](#identity) 17 | - [Typography](#typography) 18 | - [Images](#images) 19 | - [Development](#development) 20 | - [Author](#author) 21 | - [License](#license) 22 | 23 | ## Installation 24 | 25 | Mickey requires [Jekyll](http://jekyllrb.com/) 2.x. and [Gulp](http://gulpjs.com/) for workflow automation. 26 | 27 | Make sure to run `gem update jekyll` if you aren’t on the latest version or `gem install jekyll` if this is your first time installing it. 28 | 29 | If you want to use Mickey, please follow these steps: 30 | 31 | 1. Fork the [Mickey](https://github.com/vincentchan/mickey) repo. 32 | 2. Clone the repo you just forked and rename it. 33 | 3. Run `npm install` to install the dependencies for the theme contained in `package.json` 34 | 4. Update `_config.yml` with your own info and replace demo posts and pages with your own. Full details below. 35 | 36 | ## Options 37 | 38 | Mickey includes some customizable options: 39 | 40 | ### Post front matter 41 | 42 | By default, we use the following: 43 | 44 | ``` 45 | --- 46 | layout: post 47 | title: "your post title" 48 | date: 2015-02-11T13:04:19+05:45 # XML Schema Date/Time 49 | last_modified_at: 2015-03-15T05:20:00+05:45 # last page modified date/time 50 | excerpt: "for meta description" # Optional for overwriting content excerpt 51 | categories: your post categories # ["category1"] - best is to have one category in a post 52 | tags: your post tags # ["tag1", "tag2", "tag3"] - you can have several post tags 53 | image: 54 | feature: your post featured image file name # image.jpg, suggested size: 2000x700px 55 | topPosition: 0px # top position for featured image if needed 56 | bgContrast: dark # Featured image contrast 57 | bgGradientOpacity: darker # darker or lighter - control featured image opacity 58 | --- 59 | ``` 60 | 61 | ### Identity 62 | 63 | To replace logos with your own, simply update the following files in `assets/images/`: 64 | 65 | - `logo-white.svg` 66 | - `logo-black.svg` 67 | - `logo-text-white.svg` 68 | - `logo-text-black.svg` 69 | 70 | ### Typography 71 | 72 | Vertical rhythm and spacing are mostly handled by [typebase.css](http://devinhunt.github.io/typebase.css/). If you want to change any settings related to typography (e.g. fonts, type scale...etc), please do it in `_scss/_typography.scss` 73 | 74 | #### Blockquote 75 | 76 | We have two types of blockquote design: 77 | 78 | ```html 79 | // For large featured quote 80 |
...
81 | 82 | // For normal quote 83 | // Use 'u--startsWithDoubleQuote' class only when the quote starts with a double quote 84 |
85 | ``` 86 | 87 | #### Hanging quotes 88 | 89 | If a paragraph starts with a quotation market, please add the following to support [hanging quotes](https://en.wikipedia.org/wiki/Hanging_punctuation): 90 | 91 | ```html 92 |

93 | ... 94 |

95 | ``` 96 | 97 | ### Images 98 | 99 | To maintain vertical rhythm and spacing, I suggest using the following CSS class (e.g. `img--5xLeading`...`img--16xLeading`) to control the image height: 100 | 101 | ```html 102 |
103 | ``` 104 | 105 | You can reference `_scss/_images.scss` for details. 106 | 107 | ## Development 108 | 109 | Mickey has two branches, but only one is used for active development. 110 | 111 | - `master` for development. **All pull requests should be submitted against `master`.** 112 | - `gh-pages` for our hosted landing page. **Please avoid using this branch.** 113 | 114 | During development, simply run `gulp` in terminal and it will compile the jekyll site, compile Sass, create post thumbnails, launch BrowserSync & watch files for changes and recompile. 115 | 116 | Source Sass files are located in `_scss/`, included into `main.scss`, and compile to `assets/css/main.css`. 117 | 118 | Post thumbnails are automatically resized via Gulp's image resize package, and moved to `assets/images/thumbnails`. Any featured images you put in `assets/images/hero` will be automatically created 119 | 120 | ## Author 121 | 122 | **Vincent Chan** 123 | - 124 | - 125 | 126 | 127 | ## License 128 | 129 | Open sourced under the [MIT license](LICENSE.md). 130 | 131 | **Disclaimer: This Jekyll theme is not affiliated with Disney. Obviously :)** 132 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | 2 | # Syntax highlighting 3 | markdown: redcarpet 4 | highlighter: pygments 5 | 6 | # Permalinks 7 | permalink: /:title 8 | relative_permalinks: true 9 | 10 | # Setup 11 | timezone: your timezone # eg. Asia/Kathmandu 12 | locale: your locale language # eg. en_us 13 | name: site name 14 | title: site title 15 | tagline: 'tagline' 16 | description: 'description' 17 | url: site url 18 | rss: rss feed url 19 | baseurl: '/' 20 | baseurl_posts_img: '/assets/images/posts/' 21 | baseurl_featured_img: '/assets/images/hero/' 22 | baseurl_featured_thumbnail: '/assets/images/thumbnail/' 23 | baseurl_javascripts: '/assets/javascripts/' 24 | icon: your site icon path # /assets/img/icon.png [best 300px X 300px] 25 | disqus: disqus_shortname # get it on https://disqus.com/admin/ 26 | 27 | author: 28 | name: your name 29 | url: your site url 30 | facebook: username 31 | twitter: username 32 | google_plus: username 33 | linkedin: username 34 | dribbble: username 35 | pinterest: username 36 | kiva: username 37 | 38 | fb_admins: your facebook profile id 39 | fb_appid: your facebook app id 40 | 41 | # Server 42 | destination: ./_site 43 | exclude: [".editorconfig", ".gitignore", "bower.json", "composer.json", "CONTRIBUTING.md", "CNAME", "LICENSE", "Gruntfile.js", "package.json", "node_modules", "README.md", "sass", "haml"] 44 | port: 9001 45 | 46 | defaults: 47 | - 48 | scope: 49 | path: "_posts" 50 | type: "posts" 51 | values: 52 | layout: "default" 53 | -------------------------------------------------------------------------------- /_includes/comments.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 14 | 15 |
16 | -------------------------------------------------------------------------------- /_includes/footer-scripts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | {% if page.syntaxHighlighter %} 6 | 7 | 8 | {% endif %} 9 | 10 | 52 | -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | Hand-crafted by Your Name 5 |
6 |
    7 |
    • 8 |
    • 9 |
    • 10 |
    • 11 |
    • 12 |
    • 13 |
    • 14 |
15 |
16 | © 2015 All Rights Reserved. Powered by the Mickey theme for Jekyll. 17 |
18 |
19 |
20 | -------------------------------------------------------------------------------- /_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | {% if page.robots %} 14 | 15 | {% endif %} 16 | 17 | 18 | 19 | {% if page.next.url %} 20 | 21 | {% endif %} 22 | 23 | {% if page.previous.url %} 24 | 25 | {% endif %} 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | {% if page.date %} 46 | 47 | 48 | 49 | {% for post in site.related_posts limit:3 %} 50 | 51 | {% endfor %} 52 | {% endif %} 53 | 54 | {% if page.categories %} 55 | {% for category in page.categories limit:1 %} 56 | 57 | {% endfor %} 58 | {% endif %} 59 | 60 | {% if page.tags %} 61 | {% for tag in page.tags %} 62 | 63 | {% endfor %} 64 | {% endif %} 65 | 66 | 67 | 68 | 69 | 70 | {% if page.title == "Home" %} 71 | {{ site.title }} · {{ site.tagline }} 72 | {% else %} 73 | {{ page.title }} · {{ site.title }} 74 | {% endif %} 75 | 76 | 77 | 78 | 79 | 80 | {% if page.syntaxHighlighter %} 81 | 82 | 83 | {% endif %} 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 103 | 104 | 108 | 109 | -------------------------------------------------------------------------------- /_includes/menu.html: -------------------------------------------------------------------------------- 1 | 19 | -------------------------------------------------------------------------------- /_includes/metabar.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 | -------------------------------------------------------------------------------- /_includes/modal.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | 10 |
11 |
12 |

Share this story

13 |
    14 |
    • 15 |
    • 16 |
    • 18 |
    • 19 |
    • 20 |
    • 21 |
22 |
23 |
24 | -------------------------------------------------------------------------------- /_includes/sidebar-nav.html: -------------------------------------------------------------------------------- 1 | 21 | -------------------------------------------------------------------------------- /_includes/sidebar-toggle.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /_includes/subscribe.html: -------------------------------------------------------------------------------- 1 | 29 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% include head.html %} 5 | 6 | 7 | {% if page.url != '/index.html' %} 8 | 9 | {% include sidebar-nav.html %} 10 | {% include menu.html %} 11 | {% endif %} 12 | 13 | {{ content }} 14 | 15 | {% if page.url != '/index.html' %} 16 | {% include sidebar-toggle.html %} 17 | {% endif %} 18 | 19 | {% if page.url == '/index.html' %} 20 | {% include subscribe.html %} 21 | {% include footer.html %} 22 | {% endif %} 23 | 24 | {% include footer-scripts.html %} 25 | 26 | 27 | -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
5 |
6 |
7 | 8 | {% if page.image.feature %} 9 | 14 | {% endif %} 15 | 16 |
17 |
24 |
25 |
26 |

{{ page.title }}

27 |
28 |
    29 |
  • 30 | 33 |
    • 34 |
  • 35 | By {{ site.author.name }} 36 |
    • 37 |
  • 38 | {{ page.categories }} 39 |
    • 40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 | 49 | {{ content }} 50 | 51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 | {% include subscribe.html %} 59 | {% include comments.html %} 60 |
61 |
62 |
63 | 91 |
92 | 93 | {% include modal.html %} 94 | -------------------------------------------------------------------------------- /_plugins/url_encode.rb: -------------------------------------------------------------------------------- 1 | # _plugins/url_encode.rb 2 | require 'liquid' 3 | require 'uri' 4 | 5 | # Percent encoding for URI conforming to RFC 3986. 6 | # Ref: http://tools.ietf.org/html/rfc3986#page-12 7 | module URLEncode 8 | def url_encode(url) 9 | return URI.escape(url, Regexp.new("[^#{URI::PATTERN::UNRESERVED}]")) 10 | end 11 | end 12 | 13 | Liquid::Template.register_filter(URLEncode) -------------------------------------------------------------------------------- /_posts/1928-11-18-debut.markdown: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Mickey Mouse's Debut" 4 | date: 1928-11-18 01:00:00 5 | last_modified_at: 1928-11-18 01:00:00 6 | excerpt: "Disney had Ub Iwerks secretly begin animating a new cartoon while still under contract with Universal..." 7 | categories: history 8 | tags: mickey 9 | image: 10 | feature: steamboat.jpg 11 | topPosition: -50px 12 | bgContrast: dark 13 | bgGradientOpacity: darker 14 | syntaxHighlighter: no 15 | --- 16 | Source: [Wikipedia](https://en.wikipedia.org/wiki/Mickey_Mouse) 17 | 18 | **Disney** had Ub Iwerks secretly begin animating a new cartoon while still under contract with Universal. The cartoon was co-directed by Walt Disney and Ub Iwerks. Iwerks was the main animator for the short, and reportedly spent six weeks working on it. In fact, Iwerks was the main animator for every Disney short released in 1928 and 1929. Hugh Harman and Rudolf Ising also assisted Disney during those years. They had already signed their contracts with Charles Mintz, but he was still in the process of forming his new studio and so for the time being they were still employed by Disney. This short would be the last they animated under this somewhat awkward situation.[19] 19 | 20 | Mickey was first seen in a test screening of the cartoon short Plane Crazy, on May 15, 1928, but it failed to impress the audience and to add insult to injury, Walt could not find a distributor. Though understandably disappointed, Walt went on to produce a second Mickey short, The Gallopin' Gaucho, which was also not released for lack of a distributor. 21 | 22 | Steamboat Willie was first released on November 18, 1928, in New York. It was co-directed by Walt Disney and Ub Iwerks. Iwerks again served as the head animator, assisted by Johnny Cannon, Les Clark, Wilfred Jackson and Dick Lundy. This short was intended as a parody of Buster Keaton's Steamboat Bill Jr., first released on May 12 of the same year. Although it was the third Mickey cartoon produced, it was the first to find a distributor, and thus is considered by The Disney Company as Mickey's debut. Willie featured changes to Mickey's appearance (in particular, simplifying his eyes to large dots) that established his look for later cartoons and in numerous Walt Disney films. 23 | 24 | The cartoon was not the first cartoon to feature a soundtrack connected to the action. Fleischer Studios, headed by brothers Dave and Max Fleischer, had already released a number of sound cartoons using the DeForest system in the mid-1920s. However, these cartoons did not keep the sound synchronized throughout the film. For Willie, Disney had the sound recorded with a click track that kept the musicians on the beat. This precise timing is apparent during the "Turkey in the Straw" sequence, when Mickey's actions exactly match the accompanying instruments. Animation historians have long debated who had served as the composer for the film's original music. This role has been variously attributed to Wilfred Jackson, Carl Stalling and Bert Lewis, but identification remains uncertain. Walt Disney himself was voice actor for both Mickey and Minnie, and would remain the source of Mickey's voice through 1946 for theatrical cartoons. Jimmy MacDonald took over the role in 1946, but Walt provided Mickey's voice again from 1955 to 1959 for The Mickey Mouse Club television series on ABC. 25 | 26 | Audiences at the time of Steamboat Willie's release were reportedly impressed by the use of sound for comedic purposes. Sound films or "talkies" were still considered innovative. The first feature-length movie with dialogue sequences, The Jazz Singer starring Al Jolson, was released on October 6, 1927. Within a year of its success, most United States movie theaters had installed sound film equipment. Walt Disney apparently intended to take advantage of this new trend and, arguably, managed to succeed. Most other cartoon studios were still producing silent products and so were unable to effectively act as competition to Disney. As a result Mickey would soon become the most prominent animated character of the time. Walt Disney soon worked on adding sound to both Plane Crazy and The Gallopin' Gaucho (which had originally been silent releases) and their new release added to Mickey's success and popularity. A fourth Mickey short, The Barn Dance, was also put into production; however, Mickey does not actually speak until The Karnival Kid in 1929 when his first spoken words were "Hot dogs, Hot dogs!" After Steamboat Willie was released, Mickey became a close competitor to Felix the Cat, and his popularity would grow as he was continuously featured in sound cartoons. By 1929, Felix would lose popularity among theater audiences, and Pat Sullivan decided to produce all future Felix cartoons in sound as a result.[23] Unfortunately, audiences did not respond well to Felix's transition to sound and by 1930, Felix had faded from the screen. 27 | -------------------------------------------------------------------------------- /_posts/1929-03-28-black-and-white-films.markdown: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Black and white films" 4 | date: 1929-03-28 01:00:00 5 | date: 1929-03-28 01:00:00 6 | excerpt: "In Mickey's early films he was often characterized not as a hero, but as an ineffective young suitor to Minnie Mouse..." 7 | categories: history 8 | tags: mickey 9 | image: 10 | feature: mickey-1929.jpg 11 | topPosition: -50px 12 | bgContrast: dark 13 | bgGradientOpacity: darker 14 | syntaxHighlighter: no 15 | --- 16 | Source: [Wikipedia](https://en.wikipedia.org/wiki/Mickey_Mouse) 17 | 18 | In Mickey's early films he was often characterized not as a hero, but as an ineffective young suitor to Minnie Mouse. The Barn Dance (March 14, 1929) is the first time in which Mickey is turned down by Minnie in favor of Pete. 19 | 20 | The Opry House (March 28, 1929) was the first time in which Mickey wore his white gloves. Mickey wears them in almost all of his subsequent appearances and many other characters followed suit. Supposedly one reason for adding the white gloves was to allow audiences to distinguish the characters' hands when they appeared against their bodies, as both were black. The three lines on the back of Mickey's gloves represent darts in the gloves' fabric extending from between the digits of the hand, typical of glove design of the era. 21 | 22 | When the Cat's Away (April 18, 1929), essentially a remake of the Alice Comedy, "Alice Rattled by Rats", was an unusual appearance for Mickey. Although Mickey and Minne still maintained their anthropomorphic characteristics, they were depicted as the size of regular mice and living with a community many other mice as pests in a home. Mickey and Minnie would later appear the size of regular humans in their own setting. In appearances with real humans, Mickey has been shown to be about two to three feet high.[25] The next Mickey short was also unusual. The Barnyard Battle (April 25, 1929) was the only film to depict Mickey as a soldier and also the first to place him in combat. The Karnival Kid (1929) was the first time Mickey spoke. Before this he had only whistled, laughed, and grunted. His first words were "Hot dogs! Hot dogs!" said while trying to sell hot dogs at a carnival. Mickey's Follies (1929) introduced the song "Minnie's Yoo-Hoo" which would become the theme song for Mickey Mouse films for the next several years. The "Minnie's Yoo-Hoo" song sequence was also later reused with different background animation as its own special short shown only at the commencement of 1930s theater-based Mickey Mouse Clubs.[26][27] Mickey's dog Pluto first appeared as Mickey's pet in The Moose Hunt (1931) after previously appearing as Minnie's dog "Rover" in The Picnic (1930). 23 | 24 | The Cactus Kid (April 11, 1930) was the last film to be animated by Ub Iwerks at Disney. Shortly before the release of the film, Iwerks left to start his own studio, bankrolled by Disney's then-distributor Pat Powers. Powers and Disney had a falling out over money due Disney from the distribution deal. It was in response to losing the right to distribute Disney's cartoons that Powers made the deal with Iwerks, who had long harbored a desire to head his own studio. The departure is considered a turning point in Mickey's career, as well as that of Walt Disney. Walt lost the man who served as his closest colleague and confidant since 1919. Mickey lost the man responsible for his original design and for the direction and/or animation of several of the shorts released till this point. Advertising for the early Mickey Mouse cartoons credited them as "A Walt Disney Comic, drawn by Ub Iwerks". Later Disney Company reissues of the early cartoons tend to credit Walt Disney alone. 25 | 26 | Disney and his remaining staff continued the production of the Mickey series, and he was able to eventually find a number of animators to replace Iwerks. As the Great Depression progressed and Felix the Cat faded from the movie screen, Mickey's popularity would rise, and by 1932 The Mickey Mouse Club would have one million members.[28] At the 5th Academy Awards in 1932, Mickey received his first Academy Award nomination, received for Mickey's Orphans (1931). Walt Disney also received an honorary Academy Award for the creation of Mickey Mouse. Despite being eclipsed by the Silly Symphonies short the Three Little Pigs in 1933, Mickey still maintained great popularity among theater audiences too, until 1935, when polls showed that Popeye was more popular than Mickey.[29][30][31] By 1934, Mickey merchandise had earned $600,000.00 a year.[32] In 1935, Disney began to phase out the Mickey Mouse Clubs, due to administration problems.[33] 27 | 28 | About this time, story artists at Disney were finding it increasingly difficult to write material for Mickey. As he had developed into a role model for children, they were limited in the types of gags they could make. This led to Mickey taking more of a secondary role in some of his next films allowing for more emphasis on other characters. In Orphan's Benefit (August 11, 1934) Mickey first appeared with Donald Duck who had been introduced earlier that year in the Silly Symphonies series. The tempestuous duck would provide Disney with seemingly endless story ideas and would remain a recurring character in Mickey's cartoons. 29 | -------------------------------------------------------------------------------- /_posts/1930-01-13-comics.markdown: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Comics" 4 | date: 1930-01-13 01:00:00 5 | date: 1930-01-13 01:00:00 6 | excerpt: "Mickey first appeared in comics after he had appeared in 15 commercially successful animated shorts and was easily recognized by ..." 7 | categories: history 8 | tags: mickey 9 | image: 10 | feature: mickey-comics.jpg 11 | topPosition: -100px 12 | bgContrast: dark 13 | bgGradientOpacity: darker 14 | syntaxHighlighter: no 15 | --- 16 | Source: [Wikipedia](https://en.wikipedia.org/wiki/Mickey_Mouse) 17 | 18 | Mickey first appeared in comics after he had appeared in 15 commercially successful animated shorts and was easily recognized by the public. Walt Disney was approached by King Features Syndicate with the offer to license Mickey and his supporting characters for use in a comic strip. Disney accepted and Mickey made his first comic strip appearance on January 13, 1930. The comical plot was credited to Disney himself, art to Ub Iwerks and inking to Win Smith. The first week or so of the strip featured a loose adaptation of "Plane Crazy". Minnie soon became the first addition to the cast. The strips first released between January 13, 1930, and March 31, 1930, has been occasionally reprinted in comic book form under the collective title "Lost on a Desert Island". Animation historian Jim Korkis notes "After the eighteenth strip, Iwerks left and his inker, Win Smith, continued drawing the gag-a-day format..."[49] 19 | 20 | In early 1930, after Iwerks' departure, Disney was at first content to continue scripting the Mickey Mouse comic strip, assigning the art to Win Smith. However, Disney's focus had always been in animation and Smith was soon assigned with the scripting as well. Smith was apparently discontent at the prospect of having to script, draw, and ink a series by himself as evidenced by his sudden resignation. 21 | 22 | Disney then searched for a replacement among the remaining staff of the Studio. He selected Floyd Gottfredson, a recently hired employee. At the time Gottfredson was reportedly eager to work in animation and somewhat reluctant to accept his new assignment. Disney had to assure him the assignment was only temporary and that he would eventually return to animation. Gottfredson accepted and ended up holding this "temporary" assignment from May 5, 1930, to November 15, 1975. 23 | 24 | Walt Disney's last script for the strip appeared May 17, 1930.[49] Gottfredson's first task was to finish the storyline Disney had started on April 1, 1930. The storyline was completed on September 20, 1930, and later reprinted in comic book form as Mickey Mouse in Death Valley. This early adventure expanded the cast of the strip which to this point only included Mickey and Minnie. Among the characters who had their first comic strip appearances in this story were Clarabelle Cow, Horace Horsecollar and Black Pete as well as the debuts of corrupted lawyer Sylvester Shyster and Minnie's uncle Mortimer Mouse. The Death Valley narrative was followed by Mr. Slicker and the Egg Robbers, first printed between September 22 and December 26, 1930, which introduced Marcus Mouse and his wife as Minnie's parents. 25 | 26 | Starting with these two early comic strip stories, Mickey's versions in animation and comics are considered to have diverged from each other. While Disney and his cartoon shorts would continue to focus on comedy, the comic strip effectively combined comedy and adventure. This adventurous version of Mickey would continue to appear in comic strips and later comic books throughout the 20th and into the 21st century. 27 | 28 | Floyd Gottfredson left his mark with stories such as Mickey Mouse Joins the Foreign Legion (1936) and The Gleam (1942). He also created the Phantom Blot, Eega Beeva, Morty and Ferdie, Captain Churchmouse, and Butch. Besides Gottfredson artists for the strip over the years included Roman Arambula, Rick Hoover, Manuel Gonzales, Carson Van Osten, Jim Engel, Bill Wright, Ted Thwailes and Daan Jippes; writers included Ted Osborne, Merrill De Maris, Bill Walsh, Dick Shaw, Roy Williams, Del Connell, and Floyd Norman. 29 | 30 | The next artist to leave his mark on the character was Paul Murry in Dell Comics. His first Mickey tale appeared in 1950 but Mickey did not become a speciality until Murry's first serial for Walt Disney's Comics and Stories in 1953 ("The Last Resort"). In the same period Romano Scarpa in Italy for the magazine Topolino began to revitalize Mickey in stories that brought back the Phantom Blot and Eega Beeva along with new creations such as the Atomo Bleep-Bleep. While the stories at Western Publishing during the Silver Age emphasized Mickey as a detective in the style of Sherlock Holmes, in the modern era several editors and creators have consciously undertaken to depict a more vigorous Mickey in the mold of the classic Gottfredson adventures. This renaissance has been spearheaded by Byron Erickson, David Gerstein, Noel Van Horn, Michael T. Gilbert and César Ferioli. 31 | -------------------------------------------------------------------------------- /_posts/1932-11-18-color-films.markdown: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Color films" 4 | date: 1932-11-18 01:00:00 5 | date: 1932-11-18 01:00:00 6 | excerpt: "Mickey first appeared animated in color in Parade of the Award Nominees in 1932, however the film strip was..." 7 | categories: history 8 | tags: mickey 9 | image: 10 | feature: mickey-1940.jpg 11 | topPosition: -200px 12 | bgContrast: dark 13 | bgGradientOpacity: darker 14 | syntaxHighlighter: no 15 | --- 16 | Source: [Wikipedia](https://en.wikipedia.org/wiki/Mickey_Mouse) 17 | 18 | Mickey first appeared animated in color in Parade of the Award Nominees in 1932, however the film strip was created for the 5th Academy Awards ceremony and was not released to the public. Mickey's official first color film came in 1935 with The Band Concert. The Technicolor film process was used in the film production. Here Mickey conducted the William Tell Overture, but the band is swept up by a tornado. It is said that conductor Arturo Toscanini so loved this short that, upon first seeing it, he asked the projectionist to run it again. In 1994, The Band Concert was voted the third-greatest cartoon of all time in a poll of animation professionals. By colorizing and partially redesigning Mickey, Walt would put Mickey back on top once again, and Mickey would reach popularity he never reached before as audiences now gave him more appeal.[34] Also in 1935, Walt would receive a special award from the League of Nations for creating Mickey. 19 | 20 | However, by 1938, the more manic Donald Duck would surpass the passive Mickey, resulting in a redesign of the mouse between 1938 and 1940 that put Mickey at the peak of his popularity.[34] The second half of the 1930s saw the character Goofy reintroduced as a series regular. Together, Mickey, Donald Duck, and Goofy would go on several adventures together. Several of the films by the comic trio are some of Mickey's most critically acclaimed films, including Mickey's Fire Brigade (1935), Moose Hunters (1937), Clock Cleaners (1937), Lonesome Ghosts (1937), Boat Builders (1938), and Mickey's Trailer (1938). Also during this era, Mickey would star in Brave Little Tailor (1938), an adaptation of The Valiant Little Tailor, which was nominated for an Academy Award. 21 | 22 | Mickey was redesigned by animator Fred Moore which was first seen in The Pointer (1939). Instead of having solid black eyes, Mickey was given white eyes with pupils, a Caucasian skin colored face, and a pear-shaped body. In the 40's, he changed once more in The Little Whirlwind, where he used his trademark pants for the last time in decades, lost his tail, got more realistic ears that changed with perspective and a different body anatomy. But this change would only last for a short period of time before returning to the one in "The Pointer", with the exception of his pants. In his final theatrical cartoons in the 1950s, he was given eyebrows, which were removed in the more recent cartoons. 23 | 24 | In 1940 Mickey appeared in his first feature-length film, Fantasia. His screen role as The Sorcerer's Apprentice, set to the symphonic poem of the same name by Paul Dukas, is perhaps the most famous segment of the film and one of Mickey's most iconic roles. The segment features no dialogue at all, only the music. The apprentice (Mickey), not willing to do his chores, puts on the sorcerer's magic hat after the sorcerer goes to bed and casts a spell on a broom, which causes the broom to come to life and perform the most tiring chore—filling up a deep well using two buckets of water. When the well eventually overflows, Mickey finds himself unable to control the broom, leading to a near-flood. After the segment ends, Mickey is seen in silhouette shaking hands with Leopold Stokowski, who conducts all the music heard in Fantasia. Mickey has often been pictured in the red robe and blue sorcerer's hat in merchandising. It was also featured into the climax of Fantasmic!, an attraction at the Disney theme parks. 25 | 26 | After 1940, Mickey's popularity would decline until his 1955 re-emergence as a daily children's television personality.[35] Despite this, the character continued to appear regularly in animated shorts until 1943 (winning his only competitive Academy Award—with canine companion Pluto—for a short subject, Lend a Paw) and again from 1946 to 1952. 27 | 28 | The last regular installment of the Mickey Mouse film series came in 1953 with The Simple Things in which Mickey and Pluto go fishing and are pestered by a flock of seagulls. 29 | -------------------------------------------------------------------------------- /_posts/1983-12-16-television.markdown: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Television and later films" 4 | date: 1983-12-16 01:00:00 5 | date: 1983-12-16 01:00:00 6 | excerpt: "Mickey first appeared animated in color in Parade of the Award Nominees in 1932, however the film strip was..." 7 | categories: history 8 | tags: mickey 9 | image: 10 | feature: mickey-tv.jpg 11 | topPosition: -100px 12 | bgContrast: dark 13 | bgGradientOpacity: darker 14 | syntaxHighlighter: no 15 | --- 16 | Source: [Wikipedia](https://en.wikipedia.org/wiki/Mickey_Mouse) 17 | 18 | In the 1950s, Mickey became more known for his appearances on television, particularly with The Mickey Mouse Club. Many of his theatrical cartoon shorts were rereleased on television series such as Ink & Paint Club, various forms of the Walt Disney anthology television series, and on home video. Mickey returned to theatrical animation in 1983 with Mickey's Christmas Carol, an adaptation of Charles Dickens' A Christmas Carol in which Mickey played Bob Cratchit. This was followed up in 1990 with The Prince and the Pauper. 19 | 20 | Throughout the decades, Mickey Mouse competed with Warner Bros.' Bugs Bunny for animated popularity. But in 1988, in a historic moment in motion picture history, the two rivals finally shared screen time in the Robert Zemeckis Disney/Amblin film Who Framed Roger Rabbit. Disney and Warner signed an agreement stating that each character had exactly the same amount of screen time in the scene, right down to the frame. 21 | 22 | Similar to his animated inclusion into a live-action film on Roger Rabbit, Mickey made a featured cameo appearance in the 1990 television special The Muppets at Walt Disney World where he met Kermit the Frog. The two are established in the story as having been old friends. The Muppets have otherwise spoofed and referenced Mickey over a dozen times since the 1970s. Eventually, The Muppets were purchased by the Walt Disney Company in 2004. 23 | 24 | Mickey appeared on several animated logos for Walt Disney Home Entertainment, starting with the "Neon Mickey" logo and then to the "Sorcerer Mickey" logos used for regular and Classics release titles. 25 | 26 | His most recent theatrical cartoon short was 2013's Get A Horse! which was preceded by 1995's Runaway Brain, while from 1999 to 2004, he appeared in direct-to-video features like Mickey's Once Upon a Christmas, Mickey, Donald, Goofy: The Three Musketeers and the computer-animated Mickey's Twice Upon a Christmas. 27 | 28 | Many television series have centered around Mickey, such as the ABC shows Mickey Mouse Works (1999—2000), Disney's House of Mouse (2001—2003) and Disney Channel's Mickey Mouse Clubhouse (2006–present). Prior to all these, Mickey was also featured as an unseen character in the Bonkers episode "You Oughta Be In Toons". 29 | 30 | Mickey has recently been announced to star in two films. One is being based on the Magic Kingdom theme park at the Walt Disney World Resort, while the other is a film idea pitched by Walt Disney Animation Studios veteran Burny Mattinson centering around Mickey, Donald and Goofy.[36] 31 | 32 | Since June 28, 2013, Disney Channel has been airing new 3-minute Mickey Mouse shorts. In these new shorts, Mickey has a more modern appearance, but his appearance is also very close to his original 1928 look.[37] 33 | -------------------------------------------------------------------------------- /_posts/2014-11-28-mickey-mouse.markdown: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "Mickey Mouse" 4 | date: 2014-11-28 01:00:00 5 | last_modified_at: 2014-11-28 01:00:00 6 | excerpt: "Mickey Mouse is a funny animal cartoon character and the official mascot of..." 7 | categories: history 8 | tags: mickey 9 | image: 10 | feature: mickey-mouse.jpg 11 | topPosition: -50px 12 | bgContrast: dark 13 | bgGradientOpacity: darker 14 | syntaxHighlighter: no 15 | --- 16 | Source: [Wikipedia](https://en.wikipedia.org/wiki/Mickey_Mouse) 17 | 18 | Mickey Mouse is a funny animal cartoon character and the official mascot of [The Walt Disney Company](https://en.wikipedia.org/wiki/The_Walt_Disney_Company). He was created by Walt Disney and Ub Iwerks at the Walt Disney Studios in 1928. An anthropomorphic mouse who typically wears red shorts, large yellow shoes, and white gloves, Mickey has become one of the most recognizable cartoon characters in the world. 19 | 20 | Mickey first was seen in a single test screening (Plane Crazy). Mickey officially debuted in the short film Steamboat Willie (1928), one of the first sound cartoons. He went on to appear in over 130 films, including The Band Concert (1935), Brave Little Tailor (1938), and Fantasia (1940). Mickey appeared primarily in short films, but also occasionally in feature-length films. Ten of Mickey's cartoons were nominated for the Academy Award for Best Animated Short Film, one of which, Lend a Paw, won the award in 1942. In 1978, Mickey became the first cartoon character to have a star on the Hollywood Walk of Fame. 21 | 22 |
“Don't Stress Over Anything You Can't Change.”
- Mickey Mouse
23 | 24 | Beginning in 1930, Mickey has also been featured extensively as a comic strip character. His self-titled newspaper strip, drawn primarily by Floyd Gottfredson, ran for 45 years. Mickey has also appeared in comic books and in television series such as The Mickey Mouse Club (1955–1996) and others. He also appears in other media such as video games as well as merchandising, and is a meetable character at the Disney parks. 25 | 26 | Mickey generally appears alongside his girlfriend Minnie Mouse, his pet dog Pluto, his friends Donald Duck, and Goofy, and his nemesis Pete, among others (see Mickey Mouse universe). Originally characterized as a mischievous antihero, Mickey's increasing popularity led to his being rebranded as an everyman, usually seen as a flawed, but adventurous hero. In 2009, Disney began to rebrand the character again by putting less emphasis on his pleasant, cheerful side and reintroducing the more mischievous and adventurous sides of his personality, beginning with the video game Epic Mickey. 27 | -------------------------------------------------------------------------------- /_posts/2014-12-15-a-life-of-walt-disney.markdown: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: "A Life of Walt Disney" 4 | date: 2014-12-15 01:00:00 5 | last_modified_at: 2014-12-15 01:00:00 6 | excerpt: "Walter Elias Disney was an American entrepreneur, cartoonist, animator, voice actor, and film producer. As a prominent..." 7 | categories: history 8 | tags: disney 9 | image: 10 | feature: walt-disney.jpg 11 | topPosition: 0px 12 | bgContrast: dark 13 | bgGradientOpacity: darker 14 | syntaxHighlighter: no 15 | --- 16 | Source: [Wikipedia](https://en.wikipedia.org/wiki/Walt_Disney) 17 | 18 | Walter Elias "Walt" Disney (/ˈdɪzni/; December 5, 1901 – December 15, 1966) was an American entrepreneur, cartoonist, animator, voice actor, and film producer. As a prominent figure within the American animation industry and throughout the world, he is regarded as a cultural icon, known for his influence and contributions to entertainment during the 20th century. As a Hollywood business mogul, he and his brother Roy O. Disney co-founded The Walt Disney Company. 19 | 20 |
“All our dreams can come true, if we have the courage to pursue them.” - Walt Disney
21 | 22 | As an animator and entrepreneur, Disney was particularly noted as a filmmaker and a popular showman, as well as an innovator in animation and theme park design. He and his staff created numerous famous fictional characters including Mickey Mouse, Donald Duck, and Goofy. Disney himself was the original voice for Mickey. During his lifetime, he won 22 Academy Awards and received four honorary Academy Awards from a total of 59 nominations, including a record of four in one year, giving him more Oscar awards and nominations than any other individual in history. 23 | 24 | Disney died from lung cancer on December 15, 1966, in Burbank, California. He left behind a vast legacy, including numerous animated shorts and feature films produced during his lifetime; the company, parks, and animation studio that bear his name; and the California Institute of the Arts (CalArts). 25 | 26 | #### Childhood 27 | 28 |
29 | 30 | Disney was born on December 5, 1901, at 2156 North Tripp Avenue in Chicago's Hermosa community area, to Elias Charles Disney, who was Irish-Canadian, and Flora Call Disney, who was of German and English descent. His great-grandfather, Arundel Elias Disney, had emigrated from Gowran, County Kilkenny, Ireland where he was born in 1801. Arundel Disney was a descendant of Robert d'Isigny, a Frenchman who had travelled to England with William the Conqueror in 1066. With the d'Isigny name anglicized as "Disney", the family settled in the English village now known as Norton Disney, south of the city of Lincoln, in the county of Lincolnshire. 31 | 32 | In 1878 Disney's father, Elias Charles Disney, had moved from Huron County, Ontario, Canada to the United States, at first seeking gold in California before finally settling down to farm with his parents near Ellis, Kansas, until 1884. Elias married Flora Call on January 1, 1888, in Acron, Florida, just 40 miles north of where Walt Disney World would ultimately be developed. The family moved to Chicago, Illinois in 1890, hometown of Elias' brother Robert, who helped Elias financially for most of Walt's early life. In 1906, when Walt was four, Elias and his family moved to a farm in Marceline, Missouri, where his elder brother Roy had recently purchased farmland. 33 | 34 |
“Mickey Mouse popped out of my mind onto a drawing pad 20 years ago on a train ride from Manhattan to Hollywood at a time when business fortunes of my brother Roy and myself were at lowest ebb and disaster seemed right around the corner.”
- Walt Disney
35 | 36 | #### Teenage years 37 | 38 | In 1917 Elias acquired shares in the O-Zell jelly factory in Chicago and moved his family back to the city.[24] In the fall Disney began his freshman year at McKinley High School and took night courses at the Chicago Academy of Fine Arts under the tutelage of artist and educator Louis Grell (1887–1960). He became the cartoonist for the school newspaper, drawing patriotic topics on World War I. With a hope to join the army, Disney dropped out of high school at the age of sixteen, but was rejected for being under-age.[26] Afterwards, Disney and a friend joined the Red Cross.[27] He was soon sent to France for a year, where he drove an ambulance, but only after the armistice was signed on November 11, 1918. 39 | 40 |

“Hoping to find work outside the Chicago O-Zell factory, Walt moved back to Kansas City in 1919 to begin his artistic career.” He considered becoming an actor, but decided to draw political caricatures or comic strips for a newspaper. When nobody wanted to hire him as either an artist or as an ambulance driver, his brother Roy, then working in a local bank, got Walt a temporary job through a bank colleague at the Pesmen-Rubin Art Studio, where he created advertisements for newspapers, magazines, and movie theaters. At Pesmen-Rubin he met cartoonist Ubbe Iwerks and, when their time at the studio expired, they decided to start their own commercial company together.

41 | -------------------------------------------------------------------------------- /_scss/_animations.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Animations 3 | // -------------------------------------------------- 4 | 5 | @mixin transition($speed, $prop:all, $ease:ease-in) { 6 | -webkit-transition: $prop $speed $ease; 7 | -moz-transition: $prop $speed $ease; 8 | -ms-transition: $prop $speed $ease; 9 | -o-transition: $prop $speed $ease; 10 | transition: $prop $speed $ease; 11 | } 12 | 13 | .animate { 14 | transition: all .5s cubic-bezier(0.23, 1, 0.32, 1); 15 | } 16 | 17 | .scaleIn { 18 | transform: scale(0); 19 | } 20 | -------------------------------------------------------------------------------- /_scss/_colors.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Colors 3 | // -------------------------------------------------- 4 | 5 | $gray-darker: lighten(#000, 13.5%) !default; // #222 6 | $gray-dark: lighten(#000, 20%) !default; // #333 7 | $gray: lighten(#000, 33.5%) !default; // #555 8 | $gray-light: lighten(#000, 46.7%) !default; // #777 9 | $gray-lighter: lighten(#000, 93.5%) !default; // #eee 10 | 11 | $white: #fff; 12 | $black: #222; 13 | 14 | $brand-primary: #428bca !default; 15 | $brand-success: #5cb85c !default; 16 | $brand-info: #5bc0de !default; 17 | $brand-warning: #f0ad4e !default; 18 | $brand-danger: #d9534f !default; 19 | 20 | $body-bg: #fff !default; 21 | $frontpage-body-bg: #f2f2f2 !default; 22 | $text-color: rgba(0,0,0,0.8) !default; 23 | 24 | $link-color: $text-color !default; 25 | $link-hover-color: darken($link-color, 15%) !default; 26 | 27 | $metabar-top-bg: #eee !default; 28 | 29 | $hero-gradient: $gray-dark; 30 | -------------------------------------------------------------------------------- /_scss/_content.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Content 3 | // -------------------------------------------------- 4 | 5 | // Post 6 | .postWrapper { 7 | position: relative; 8 | width: 100%; 9 | z-index: $zIndex-4--post-wrapper; 10 | -webkit-transition: padding 100ms cubic-bezier(0.565, 1, 0.765, 0.88); 11 | -webkit-transition: padding 100ms cubic-bezier(0.565, 1.65, 0.765, 0.88); 12 | -moz-transition: padding 100ms cubic-bezier(0.565, 1.65, 0.765, 0.88); 13 | -o-transition: padding 100ms cubic-bezier(0.565, 1.65, 0.765, 0.88); 14 | transition: padding 100ms cubic-bezier(0.565, 1.65, 0.765, 0.88); 15 | 16 | @media (max-width: $screen-xs-max) { 17 | overflow-y: hidden; 18 | } 19 | } 20 | 21 | .meta { 22 | margin-bottom: 2 * $leading; 23 | } 24 | 25 | // Blocks 26 | .section--postsWrapper { 27 | width: 100%; 28 | background: $frontpage-body-bg; 29 | padding-top: 0; 30 | position: relative; 31 | clear: both; 32 | z-index: $zIndex-4--posts-wrapper; 33 | } 34 | 35 | .blockGroup { 36 | margin: 0; 37 | padding: 0; 38 | } 39 | 40 | // Inspired by Squareup.com 41 | 42 | .blockGroup-list { 43 | list-style: none; 44 | padding: 0; 45 | margin-top: -3*$leading; 46 | margin-left: -10px; 47 | margin-right: -10px; 48 | display: -webkit-box; 49 | display: -webkit-flex; 50 | display: -ms-flexbox; 51 | display: flex; 52 | -webkit-flex-wrap: wrap; 53 | -ms-flex-wrap: wrap; 54 | flex-wrap: wrap; 55 | -webkit-box-align: stretch; 56 | -webkit-align-items: stretch; 57 | -ms-flex-align: stretch; 58 | align-items: stretch; 59 | clear: both; 60 | 61 | li { 62 | padding: 0 10px; 63 | } 64 | 65 | .block { 66 | display: block; 67 | width: 25%; 68 | margin-bottom: $leading; 69 | font-family: $title-secondary-font; 70 | display: -webkit-flex; 71 | display: -ms-flexbox; 72 | display: flex; 73 | 74 | @media (max-width: $screen-xs-max) { 75 | width: 100%; 76 | } 77 | } 78 | 79 | li:nth-child(1).block { 80 | width: 100%; 81 | 82 | .postArticle-image { 83 | padding-top: 30%; 84 | 85 | @media (max-width: $screen-xs-max) { 86 | padding-top: 50%; 87 | } 88 | } 89 | 90 | .postArticle-title { 91 | font-size: $font-S; 92 | } 93 | } 94 | 95 | li:nth-child(2).block, 96 | li:nth-child(3).block { 97 | width: 50%; 98 | 99 | .postArticle-image { 100 | padding-top: 50%; 101 | } 102 | 103 | .postArticle-title { 104 | font-size: $font-S; 105 | } 106 | 107 | @media (max-width: $screen-xs-max) { 108 | width: 100%; 109 | } 110 | } 111 | 112 | li { 113 | 114 | .postArticle-title { 115 | font-size: $font-XS; 116 | line-height: 1.5; 117 | } 118 | } 119 | 120 | .postArticle-wrapper { 121 | position: relative; 122 | background: $white; 123 | width: 100%; 124 | padding-bottom: 2*$leading; 125 | box-shadow: 0 1px 4px rgba(0,0,0,.2); 126 | 127 | &:hover { 128 | transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); 129 | box-shadow: 0 4px 10px 1px rgba(0,0,0,.2); 130 | } 131 | } 132 | 133 | .postArticle a { 134 | color: $black; 135 | background: transparent; 136 | } 137 | 138 | .postArticle-title { 139 | display: block; 140 | margin-top: 0.5*$leading; 141 | font-weight: 300; 142 | } 143 | 144 | .postArticle-image { 145 | background-size: cover; 146 | background-position: center; 147 | padding-top: 100%; 148 | -webkit-transition-property: all, left, top, width; 149 | -webkit-transition-duration: .5s, .1s, .1s, .1s; 150 | -webkit-transition-timing-function: cubic-bezier(.33,0,.2,1); 151 | -webkit-transition-delay: 0; 152 | -moz-transition-property: all, left, top, width; 153 | -moz-transition-duration: .5s, .1s, .1s, .1s; 154 | -moz-transition-timing-function: cubic-bezier(.33,0,.2,1); 155 | -moz-transition-delay: 0; 156 | -ms-transition-property: all, left, top, width; 157 | -ms-transition-duration: .5s, .1s, .1s, .1s; 158 | -ms-transition-timing-function: cubic-bezier(.33,0,.2,1); 159 | -ms-transition-delay: 0; 160 | -o-transition-property: all, left, top, width; 161 | -o-transition-duration: .5s, .1s, .1s, .1s; 162 | -o-transition-timing-function: cubic-bezier(.33,0,.2,1); 163 | -o-transition-delay: 0; 164 | transition-property: all, left, top, width; 165 | transition-duration: .5s, .1s, .1s, .1s; 166 | transition-timing-function: cubic-bezier(.33,0,.2,1); 167 | 168 | @media (max-width: $screen-xs-max) { 169 | padding-top: 50%; 170 | } 171 | } 172 | 173 | .block-postMeta { 174 | position: absolute; 175 | bottom: 0; 176 | padding-bottom: 10px; 177 | color: #ccc; 178 | font-size: 16px; 179 | text-transform: uppercase; 180 | } 181 | 182 | .postArticle-title, 183 | .block-postMeta { 184 | padding-left: 15px; 185 | padding-right: 15px; 186 | } 187 | } 188 | 189 | .desaturate { 190 | opacity: 0.8; 191 | -moz-filter: contrast(1.5) url("data:image/svg+xml;utf8,#grayscale"); 192 | -o-filter: contrast(1.5) url("data:image/svg+xml;utf8,#grayscale"); 193 | -webkit-filter: contrast(1.5) grayscale(100%); 194 | filter: gray; 195 | filter: contrast(1.5) url("data:image/svg+xml;utf8,#grayscale"); 196 | } 197 | 198 | .block:hover .desaturate { 199 | filter: none; 200 | } 201 | 202 | // Newsletter subscription area 203 | .section--subscribe { 204 | width: 100%; 205 | background: $white; 206 | padding: $leading 0 0; 207 | position: relative; 208 | z-index: $zIndex-4--posts-wrapper; 209 | 210 | h3 { 211 | margin-top: $leading; 212 | } 213 | } 214 | 215 | .newsletterForm-wrapper { 216 | padding: $leading 0; 217 | } 218 | 219 | // Footer 220 | .section--footer { 221 | width: 100%; 222 | background: $white; 223 | padding: $leading 0 2*$leading; 224 | position: relative; 225 | z-index: $zIndex-4--posts-wrapper; 226 | font-family: $title-secondary-font; 227 | font-size: $font-XS; 228 | text-align: center; 229 | 230 | a:not(.socialAccount) { 231 | background-position: 0 16px; 232 | } 233 | } 234 | 235 | .socialAccountList { 236 | @include clearfix(); 237 | list-style: none; 238 | margin: $leading auto; 239 | padding-left: 0; 240 | width: 50%; 241 | } 242 | 243 | .socialAccount { 244 | display: block; 245 | float: left; 246 | margin: 0; 247 | padding: 0 15px; 248 | width: 14.2%; 249 | height: 25px; 250 | text-decoration: none; 251 | background-repeat: no-repeat; 252 | background-position: center center; 253 | background-size: contain; 254 | opacity: 0.8; 255 | 256 | &:hover { 257 | opacity: 1; 258 | } 259 | } 260 | 261 | .socialAccount--twitter { 262 | background-image: url(../images/twitter--black.svg); 263 | } 264 | 265 | .socialAccount--facebook { 266 | background-image: url(../images/facebook--black.svg); 267 | } 268 | 269 | .socialAccount--linkedin { 270 | background-image: url(../images/linkedin--black.svg); 271 | } 272 | 273 | .socialAccount--dribbble { 274 | background-image: url(../images/dribbble--black.svg); 275 | } 276 | 277 | .socialAccount--pinterest { 278 | background-image: url(../images/pinterest--black.svg); 279 | } 280 | 281 | .socialAccount--kiva { 282 | background-image: url(../images/kiva--black.svg); 283 | } 284 | 285 | .socialAccount--rss { 286 | background-image: url(../images/rss--black.svg); 287 | } 288 | 289 | // Sections 290 | 291 | //// Post content area 292 | .section--last { 293 | position: relative; 294 | clear: both; 295 | padding: 1*$leading 0 4*$leading; 296 | background: $white; 297 | } 298 | 299 | .content-author { 300 | border-top: 1px solid $gray-lighter; 301 | margin-top: 2*$leading; 302 | padding-top: 1*$leading; 303 | } 304 | 305 | .content-comments { 306 | margin-top: 2*$leading; 307 | } 308 | 309 | //// Post footer area 310 | .postFooter { 311 | text-align: center; 312 | } 313 | 314 | .section--prePost { 315 | width: 100%; 316 | top: 0; 317 | position: relative; 318 | } 319 | 320 | .section--prePost .section-title a { 321 | background: transparent; 322 | color: rgba($white, 0.9); 323 | 324 | &:hover { 325 | color: rgba($white, 1); 326 | } 327 | } 328 | 329 | .section--prePost .section-title h2 { 330 | margin: $leading auto 0; 331 | display: inline-block; 332 | } 333 | 334 | .section--prePost, 335 | .section--prePost .section-backgroundImage { 336 | height: 11 * $leading; 337 | } 338 | 339 | .section--prePost .section-backgroundImage img { 340 | min-height: 11 * $leading; 341 | position: relative !important; 342 | top: 0; 343 | } 344 | -------------------------------------------------------------------------------- /_scss/_form.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Form 3 | // -------------------------------------------------- 4 | 5 | .textInput { 6 | border: 1px solid rgba(0,0,0,0.15); 7 | padding: 0 15px; 8 | height: 35px; 9 | width: 100%; 10 | font-size: 14px; 11 | outline: none; 12 | background: $white; 13 | appearance: none; 14 | -webkit-tap-highlight-color: rgba(0,0,0,0); 15 | border-radius: 4px; 16 | font-family: $title-secondary-font; 17 | font-weight: 300; 18 | } 19 | 20 | .textInput--large { 21 | height: 45px; 22 | font-size: 16px; 23 | } 24 | 25 | .button { 26 | display: inline-block; 27 | text-align: center; 28 | white-space: nowrap; 29 | vertical-align: middle; 30 | cursor: pointer; 31 | -webkit-user-select: none; 32 | -moz-user-select: none; 33 | -ms-user-select: none; 34 | user-select: none; 35 | outline: none; 36 | background: transparent; 37 | border-radius: 99px; 38 | font-family: $title-secondary-font; 39 | letter-spacing: .02em; 40 | padding: 10px 40px 9px 40px; 41 | margin-top: $leading; 42 | border: 2px solid rgba($gray-light, .8); 43 | color: $gray-light; 44 | text-decoration: none; 45 | text-transform: uppercase; 46 | 47 | &:hover { 48 | border-color: $gray-light; 49 | } 50 | 51 | @media (max-width: $screen-xs-max) { 52 | font-size: 14px; 53 | } 54 | } 55 | 56 | .button--primary { 57 | border: 2px solid rgba($black, .8); 58 | color: $black; 59 | 60 | &:hover { 61 | border-color: $black; 62 | } 63 | } 64 | 65 | .button--large { 66 | 67 | } 68 | -------------------------------------------------------------------------------- /_scss/_global.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Global 3 | // -------------------------------------------------- 4 | 5 | html, 6 | body { 7 | overflow-x: hidden; 8 | 9 | @media (max-width: $screen-xs-max) { 10 | padding-right: 0; 11 | } 12 | } 13 | 14 | .brandLogo { 15 | background-image: url(../images/logo-white.svg); 16 | background-size: contain; 17 | background-repeat: no-repeat; 18 | background-position: 0 0; 19 | padding: 0; 20 | text-indent: -100em; 21 | overflow: hidden; 22 | } 23 | 24 | .brandLogo--small { 25 | width: 44px; 26 | height: 44px; 27 | } 28 | 29 | .brandLogo--black { 30 | background-image: url(../images/logo-black.svg); 31 | } 32 | 33 | .textLogo { 34 | display: block; 35 | background-image: url(../images/logo-text-black.svg); 36 | background-size: contain; 37 | background-repeat: no-repeat; 38 | background-position: 0 0; 39 | padding: 0; 40 | text-indent: -100em; 41 | overflow: hidden; 42 | } 43 | 44 | .textLogo--white { 45 | background-image: url(../images/logo-text-white.svg); 46 | } 47 | 48 | .textLogo--sidebar { 49 | width: 100%; 50 | height: auto; 51 | background-size: contain; 52 | background-position: center; 53 | opacity: 0.8; 54 | 55 | &:hover { 56 | opacity: 1; 57 | } 58 | } 59 | 60 | .textLogo--frontpage { 61 | position: absolute; 62 | top: 132px; 63 | left: 50%; 64 | transform: translateX(-50%); 65 | z-index: $zIndex-5--textlogo-frontpage; 66 | margin: 0; 67 | width: 276px; 68 | height: 50px; 69 | background-size: 100%; 70 | background-position: 0; 71 | opacity: 0.9; 72 | 73 | @media (max-width: $screen-xs-max) { 74 | width: 182px; 75 | height: 33px; 76 | top: 99px; 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /_scss/_grid.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Grid system 3 | // -------------------------------------------------- 4 | // 5 | // Credit: Bootstrap 3 6 | 7 | // Container widths 8 | // 9 | // Set the container width, and override it for fixed navbars in media queries. 10 | 11 | .container { 12 | @include container-fixed(); 13 | 14 | @media (min-width: $screen-sm-min) { 15 | width: $container-sm; 16 | } 17 | @media (min-width: $screen-md-min) { 18 | width: $container-md; 19 | } 20 | @media (min-width: $screen-lg-min) { 21 | width: $container-lg; 22 | } 23 | } 24 | 25 | 26 | // Fluid container 27 | // 28 | // Utilizes the mixin meant for fixed width containers, but without any defined 29 | // width for fluid, full width layouts. 30 | 31 | .container-fluid { 32 | @include container-fixed(); 33 | } 34 | 35 | 36 | // Row 37 | // 38 | // Rows contain and clear the floats of your columns. 39 | 40 | .row { 41 | @include make-row(); 42 | } 43 | 44 | 45 | // Columns 46 | // 47 | // Common styles for small and large grid columns 48 | 49 | @include make-grid-columns(); 50 | 51 | 52 | // Extra small grid 53 | // 54 | // Columns, offsets, pushes, and pulls for extra small devices like 55 | // smartphones. 56 | 57 | @include make-grid(xs); 58 | 59 | 60 | // Small grid 61 | // 62 | // Columns, offsets, pushes, and pulls for the small device range, from phones 63 | // to tablets. 64 | 65 | @media (min-width: $screen-sm-min) { 66 | @include make-grid(sm); 67 | } 68 | 69 | 70 | // Medium grid 71 | // 72 | // Columns, offsets, pushes, and pulls for the desktop device range. 73 | 74 | @media (min-width: $screen-md-min) { 75 | @include make-grid(md); 76 | } 77 | 78 | 79 | // Large grid 80 | // 81 | // Columns, offsets, pushes, and pulls for the large desktop device range. 82 | 83 | @media (min-width: $screen-lg-min) { 84 | @include make-grid(lg); 85 | } -------------------------------------------------------------------------------- /_scss/_hero.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Hero area 3 | // -------------------------------------------------- 4 | 5 | .section--first { 6 | width: 100%; 7 | top: 0; 8 | position: relative; 9 | color: $black; 10 | } 11 | 12 | .section--first, 13 | .section-backgroundImage { 14 | height: 19 * $leading; 15 | 16 | @media (max-width: $screen-xs-max) { 17 | height: 14 * $leading; 18 | } 19 | } 20 | 21 | .section--frontpage, 22 | .section--frontpage ~ .post-featuredImage { 23 | height: 12 * $leading; 24 | 25 | @media (max-width: $screen-xs-max) { 26 | height: 10 * $leading; 27 | } 28 | } 29 | 30 | .section--about, 31 | .section-backgroundImage, 32 | .section--about ~ .post-featuredImage { 33 | height: 24 * $leading; 34 | 35 | @media (max-width: $screen-xs-max) { 36 | height: 20 * $leading; 37 | } 38 | } 39 | 40 | // Inspired by SQUARESPACE 41 | 42 | .section-backgroundImage { 43 | position: absolute; 44 | display: block; 45 | width: 100%; 46 | background: #333; 47 | top: 0; 48 | z-index: $zIndex-neg2--carousel-backgroundImg; 49 | overflow: hidden; 50 | 51 | .post-featuredImage { 52 | min-width: 100%; 53 | min-height: 19 * $leading; 54 | width: 2000px; 55 | height: auto; 56 | position: fixed; 57 | left: 50%; 58 | transform: translateX(-50%); 59 | opacity: 0; 60 | -webkit-transition-property: opacity, left, top, width; 61 | -webkit-transition-duration: 1s, .1s, .1s, .1s; 62 | -webkit-transition-timing-function: cubic-bezier(.33,0,.2,1); 63 | -webkit-transition-delay: 0; 64 | -moz-transition-property: opacity, left, top, width; 65 | -moz-transition-duration: 1s, .1s, .1s, .1s; 66 | -moz-transition-timing-function: cubic-bezier(.33,0,.2,1); 67 | -moz-transition-delay: 0; 68 | -ms-transition-property: opacity, left, top, width; 69 | -ms-transition-duration: 1s, .1s, .1s, .1s; 70 | -ms-transition-timing-function: cubic-bezier(.33,0,.2,1); 71 | -ms-transition-delay: 0; 72 | -o-transition-property: opacity, left, top, width; 73 | -o-transition-duration: 1s, .1s, .1s, .1s; 74 | -o-transition-timing-function: cubic-bezier(.33,0,.2,1); 75 | -o-transition-delay: 0; 76 | transition-property: opacity, left, top, width; 77 | transition-duration: 1s, .1s, .1s, .1s; 78 | transition-timing-function: cubic-bezier(.33,0,.2,1); 79 | -transition-delay: 0; 80 | 81 | &.is-loaded { 82 | opacity: 1; 83 | } 84 | } 85 | } 86 | 87 | .section-backgroundImage--previousPage img { 88 | position: relative; 89 | } 90 | 91 | .section-gradient { 92 | 93 | &:before, 94 | &:after { 95 | content: ''; 96 | height: 100%; 97 | width: 100%; 98 | top: 0; 99 | left: 0; 100 | position: absolute; 101 | z-index: $zIndex-neg1--section-gradient; 102 | opacity: 0.6; 103 | } 104 | 105 | &:before { 106 | background: -webkit-gradient(linear,left top,left bottom,from(rgba($hero-gradient,.8)),color-stop(100%,rgba($hero-gradient,0))); 107 | background: -webkit-linear-gradient(top,rgba($hero-gradient,.8),rgba($hero-gradient,0) 100%); 108 | background: linear-gradient(to bottom,rgba($hero-gradient,.8),rgba($hero-gradient,0) 100%); 109 | } 110 | 111 | &:after { 112 | background: rgba($hero-gradient,.6); 113 | } 114 | } 115 | 116 | .section-gradient--darker { 117 | 118 | &:before, 119 | &:after { 120 | opacity: 1; 121 | } 122 | } 123 | 124 | .section-gradient--lighter { 125 | 126 | &:before, 127 | &:after { 128 | opacity: 0.4; 129 | } 130 | } 131 | 132 | .section-title { 133 | z-index: $zIndex-1--section-title; 134 | text-align: center; 135 | } 136 | 137 | .section-title h2, 138 | .section-title h4 { 139 | margin-top: 0; 140 | } 141 | 142 | .section-title h2 { 143 | @media (max-width: $screen-xs-max) { 144 | font-size: $font-L; 145 | line-height: 1.5; 146 | } 147 | } 148 | 149 | .postMeta-wrapper { 150 | margin-top: $leading; 151 | display: inline-block; 152 | } 153 | 154 | .postMeta-wrapper--frontpage { 155 | position: absolute; 156 | display: inherit; 157 | top: 165px; 158 | left: 50%; 159 | transform: translateX(-50%); 160 | z-index: $zIndex-5--tagline-frontpage; 161 | 162 | .postMeta-tagline { 163 | font-weight: 300; 164 | letter-spacing: 0.04rem; 165 | color: $gray-light; 166 | text-transform: none; 167 | 168 | @media (max-width: $screen-xs-max) { 169 | width: 100%; 170 | } 171 | } 172 | 173 | @media (max-width: $screen-xs-max) { 174 | width: 300px; 175 | top: 100px; 176 | } 177 | } 178 | 179 | .postMeta { 180 | list-style: none; 181 | margin: 0; 182 | padding: 0; 183 | } 184 | 185 | .postMeta li { 186 | float: left; 187 | margin: 0; 188 | padding: 0 0 0 10px; 189 | font-family: $title-secondary-font; 190 | font-weight: 700; 191 | font-size: $font-XS; 192 | text-transform: uppercase; 193 | letter-spacing: 2px; 194 | 195 | &:after { 196 | content: ''; 197 | display: inline-block; 198 | width: 4px; 199 | height: 4px; 200 | overflow: hidden; 201 | margin-left: 4px; 202 | border-radius: 100%; 203 | margin-bottom: 2px; 204 | background-color: rgba(255,255,255,.6); 205 | } 206 | 207 | &:last-child:after { 208 | display: none; 209 | } 210 | 211 | &:first-child { 212 | padding-left: 0; 213 | } 214 | 215 | @media (max-width: $screen-xs-max) { 216 | font-size: $font-XXS; 217 | } 218 | } 219 | -------------------------------------------------------------------------------- /_scss/_images.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Images 3 | // -------------------------------------------------- 4 | 5 | .img { 6 | margin-top: $leading; 7 | background-repeat: no-repeat; 8 | background-position: center center; 9 | background-size: cover; 10 | } 11 | 12 | .img--fullContainer img { 13 | width: 100%; 14 | } 15 | 16 | .img--5xLeading { 17 | height: 5*$leading; 18 | } 19 | 20 | .img--6xLeading { 21 | height: 6*$leading; 22 | } 23 | 24 | .img--7xLeading { 25 | height: 7*$leading; 26 | } 27 | 28 | .img--8xLeading { 29 | height: 8*$leading; 30 | } 31 | 32 | .img--9xLeading { 33 | height: 9*$leading; 34 | } 35 | 36 | .img--10xLeading { 37 | height: 10*$leading; 38 | } 39 | 40 | .img--11xLeading { 41 | height: 11*$leading; 42 | } 43 | 44 | .img--12xLeading { 45 | height: 12*$leading; 46 | } 47 | 48 | .img--13xLeading { 49 | height: 13*$leading; 50 | } 51 | 52 | .img--14xLeading { 53 | height: 14*$leading; 54 | } 55 | 56 | .img--15xLeading { 57 | height: 15*$leading; 58 | } 59 | 60 | .img--16xLeading { 61 | height: 16*$leading; 62 | } 63 | -------------------------------------------------------------------------------- /_scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Mixins 3 | // -------------------------------------------------- 4 | // 5 | // Credit: Bootstrap 3 6 | 7 | // Utilities 8 | @import "mixins/responsive-visibility"; 9 | @import "mixins/vendor-prefixes"; 10 | 11 | // Layout 12 | @import "mixins/clearfix"; 13 | @import "mixins/grid-framework"; 14 | @import "mixins/grid"; -------------------------------------------------------------------------------- /_scss/_modal.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Modal 3 | // -------------------------------------------------- 4 | 5 | .fullscreenModal { 6 | position: fixed; 7 | top: 0; 8 | left: 50%; 9 | transform: translateX(-50%); 10 | width: 80%; // temp solution 11 | height: 100%; 12 | color: $white; 13 | text-align: center; 14 | opacity: 0; 15 | visibility: hidden; 16 | background: transparent; 17 | -webkit-transition-delay: 0.5s; 18 | transition-delay: 0.5s; 19 | -webkit-transition: opacity 0.3s ease-in; 20 | -moz-transition: opacity 0.3s ease-in; 21 | transition: opacity 0.3s ease-in; 22 | z-index: $zIndex-8--fullscreen-modal; 23 | } 24 | 25 | .fullscreenModal.active { 26 | opacity: 1; 27 | visibility: visible; 28 | -webkit-transition-delay: 0.5s; 29 | transition-delay: 0.5s; 30 | } 31 | 32 | .fullscreenModal h2 { 33 | font-size: $font-M; 34 | } 35 | 36 | .modal-toggle-group { 37 | position: fixed; 38 | display: block; 39 | bottom: 30px; 40 | right: 3%; 41 | opacity: 0; 42 | visibility: hidden; 43 | transition: all .5s cubic-bezier(0.23, 1, 0.32, 1); 44 | z-index: $zIndex-7--modal-toggle-group; 45 | } 46 | 47 | .modal-toggle-group.active { 48 | opacity: 1; 49 | visibility: visible; 50 | 51 | &.scaleIn { 52 | transform: scale(1); 53 | } 54 | } 55 | 56 | .modal-toggle-group, 57 | .modal-toggle-wrapper, 58 | .modal-toggle-close-wrapper, 59 | .modal-toggle-bubble, 60 | .modal-toggle-bubbleShadow { 61 | height: 44px; 62 | width: 44px; 63 | border-radius: 50%; 64 | } 65 | 66 | .modal-toggle-wrapper { 67 | position: absolute; 68 | top: 0; 69 | display: block; 70 | background-image: url(../images/heart.svg); 71 | background-repeat: no-repeat; 72 | background-position: center center; 73 | background-size: 60%; 74 | background-color: transparent; 75 | cursor: pointer; 76 | -webkit-transform: scale(1); 77 | -webkit-transition: all 0.3s ease-out; 78 | z-index: $zIndex-7--modal-toggle-wrapper; 79 | } 80 | 81 | .modal-toggle-wrapper.active { 82 | opacity: 0; 83 | -webkit-transform: rotate(360deg); 84 | -moz-transform: rotate(360deg); 85 | -ms-transform: rotate(360deg); 86 | -o-transform: rotate(360deg); 87 | transform: rotate(360deg); 88 | } 89 | 90 | .modal-toggle-close-wrapper { 91 | position: absolute; 92 | top: 0; 93 | z-index: $zIndex-6--modal-toggle-close; 94 | opacity: 0; 95 | -webkit-transition: opacity 0.3s; 96 | -moz-transition: opacity 0.3s; 97 | transition: opacity 0.3s; 98 | 99 | .modal-toggle-close { 100 | position: absolute; 101 | top: 48%; 102 | left: 15%; 103 | display: block; 104 | width: 30px; 105 | height: 2px; 106 | background: transparent; 107 | -webkit-transition: background 0.3s; 108 | -moz-transition: background 0.3s; 109 | transition: background 0.3s; 110 | z-index: inherit; 111 | 112 | &:before, 113 | &:after { 114 | content: ''; 115 | position: absolute; 116 | left: 0; 117 | background: inherit; 118 | width: 100%; 119 | height: 100%; 120 | -webkit-transform: translateZ(0); 121 | -moz-transform: translateZ(0); 122 | -ms-transform: translateZ(0); 123 | -o-transform: translateZ(0); 124 | transform: translateZ(0); 125 | -webkit-backface-visibility: hidden; 126 | backface-visibility: hidden; 127 | -webkit-transition: -webkit-transform 0.5s, background 0s; 128 | -moz-transition: -moz-transform 0.5s, background 0s; 129 | transition: transform 0.5s, background 0s; 130 | } 131 | 132 | &:before { 133 | top: -6px; 134 | -webkit-transform: rotate(0); 135 | -moz-transform: rotate(0); 136 | -ms-transform: rotate(0); 137 | -o-transform: rotate(0); 138 | transform: rotate(0); 139 | } 140 | 141 | &:after { 142 | bottom: -6px; 143 | -webkit-transform: rotate(0); 144 | -moz-transform: rotate(0); 145 | -ms-transform: rotate(0); 146 | -o-transform: rotate(0); 147 | transform: rotate(0); 148 | } 149 | } 150 | } 151 | 152 | .modal-toggle-close-wrapper.active { 153 | opacity: 1; 154 | z-index: $zIndex-6--modal-toggle-close; 155 | 156 | .modal-toggle-close { 157 | background: transparent; 158 | 159 | &:before, 160 | &:after { 161 | background: $white; 162 | } 163 | 164 | &:before { 165 | top: 0; 166 | -webkit-transform: rotate(135deg); 167 | -moz-transform: rotate(135deg); 168 | -ms-transform: rotate(135deg); 169 | -o-transform: rotate(135deg); 170 | transform: rotate(135deg); 171 | } 172 | 173 | &:after { 174 | bottom: 0; 175 | -webkit-transform: rotate(225deg); 176 | -moz-transform: rotate(225deg); 177 | -ms-transform: rotate(225deg); 178 | -o-transform: rotate(225deg); 179 | transform: rotate(225deg); 180 | } 181 | } 182 | } 183 | 184 | .modal-toggle-bubble { 185 | position: absolute; 186 | top: 0; 187 | background-color: rgba($black,.9); 188 | -webkit-transform: scale(1); 189 | -webkit-transition: all 0.3s ease-out; 190 | z-index: $zIndex-6--modal-toggle-bubble; 191 | } 192 | 193 | .modal-toggle-bubble.active { 194 | -webkit-transform: scale(100); 195 | -webkit-transition: all 0.6s ease-out; 196 | -webkit-transition-delay: .4s; 197 | } 198 | 199 | .modal-toggle-bubbleShadow { 200 | position: absolute; 201 | top: 0; 202 | background-color: $black; 203 | -webkit-transform: scale(1); 204 | opacity: 1; 205 | z-index: $zIndex-5--modal-toggle-bubbleshadow; 206 | } 207 | 208 | .modal-toggle-bubbleShadow.active { 209 | -webkit-transform: scale(1.5); 210 | opacity: 0; 211 | -webkit-transition: all 0.3s ease-out; 212 | } 213 | 214 | // share buttons 215 | 216 | .h2--shareTitle { 217 | margin-top: -100px; 218 | } 219 | 220 | .shareWrapper { 221 | @include clearfix(); 222 | list-style: none; 223 | margin: $leading auto 0; 224 | padding: 0; 225 | width: 60%; 226 | 227 | li .shareButton { 228 | display: block; 229 | float: left; 230 | margin: 0; 231 | padding: 0 15px; 232 | width: 16.66%; 233 | height: 80px; 234 | background-repeat: no-repeat; 235 | background-position: center center; 236 | background-size: contain; 237 | opacity: 0.8; 238 | 239 | &:hover { 240 | opacity: 1; 241 | } 242 | 243 | @media (min-width: $screen-sm-max) and (max-width: $screen-lg-min) { 244 | width: 16.66%; 245 | height: 60px; 246 | } 247 | 248 | @media (max-width: $screen-xs-max) { 249 | float: none; 250 | width: 100%; 251 | height: 40px; 252 | margin-bottom: 20px; 253 | } 254 | } 255 | } 256 | 257 | .shareButton--twitter { 258 | background-image: url(../images/twitter.svg); 259 | } 260 | 261 | .shareButton--facebook { 262 | background-image: url(../images/facebook.svg); 263 | } 264 | 265 | .shareButton--linkedin { 266 | background-image: url(../images/linkedin.svg); 267 | } 268 | 269 | .shareButton--buffer { 270 | background-image: url(../images/buffer.svg); 271 | } 272 | 273 | .shareButton--hackernews { 274 | background-image: url(../images/ycombinator.svg); 275 | } 276 | 277 | .shareButton--pocket { 278 | background-image: url(../images/pocket.svg); 279 | } 280 | -------------------------------------------------------------------------------- /_scss/_nav.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Navigation 3 | // -------------------------------------------------- 4 | // 5 | // Credit: Sidebar Toggle inspired by Lanyon theme by @mdo 6 | 7 | // Sidebar nav 8 | 9 | .sidebar { 10 | width: 14rem; 11 | visibility: hidden; 12 | padding: 30px 20px; 13 | font-family: $title-secondary-font; 14 | font-size: $font-S; 15 | background-color: $gray-darker; 16 | z-index: $zIndex-9--sidebar; 17 | overflow-x: hidden; 18 | overflow-y: scroll; 19 | -webkit-transition: all .3s ease-in-out; 20 | transition: all .3s ease-in-out; 21 | -moz-user-select: -moz-none; 22 | -webkit-user-select: none; 23 | -ms-user-select: none; 24 | -o-user-select: none; 25 | user-select: none; 26 | -webkit-overflow-scrolling: touch !important; 27 | 28 | &::-webkit-scrollbar { 29 | width: 12px; 30 | } 31 | 32 | &::-webkit-scrollbar-track { 33 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 34 | border-radius: 10px; 35 | } 36 | 37 | &::-webkit-scrollbar-thumb { 38 | border-radius: 10px; 39 | -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 40 | } 41 | } 42 | 43 | .sidebar--left { 44 | position: fixed; 45 | top: 0; 46 | bottom: 0; 47 | left: -14rem; 48 | } 49 | 50 | .sidebar--right { 51 | position: fixed; 52 | top: 0; 53 | bottom: 0; 54 | right: -14rem; 55 | } 56 | 57 | .postWrapper, 58 | .sidebar, 59 | .sidebar-toggle { 60 | -webkit-backface-visibility: hidden; 61 | -ms-backface-visibility: hidden; 62 | backface-visibility: hidden; 63 | } 64 | 65 | .sidebar-checkbox { 66 | display: none; 67 | } 68 | 69 | .sidebar-toggle-wrapper { 70 | position: fixed; 71 | z-index: $zIndex-5--sidebar-toggle-wrapper; 72 | top: 30px; 73 | right: 3%; 74 | width: 44px; 75 | height: 44px; 76 | overflow: hidden; 77 | text-indent: 100%; 78 | white-space: nowrap; 79 | cursor: pointer; 80 | border-radius: 99px; 81 | background-color: $white; 82 | } 83 | 84 | .sidebar-toggle-wrapper:hover .sidebar-toggle { 85 | background-color: #666; 86 | } 87 | 88 | // Sidebar toggle 89 | 90 | .sidebar-toggle { 91 | position: absolute; 92 | z-index: $zIndex-6--sidebar-toggle; 93 | top: 48%; 94 | left: 50%; 95 | margin-left: -10px; 96 | display: block; 97 | width: 20px; 98 | height: 2px; 99 | background: $black; 100 | /* background-color: transparent; 101 | border-radius: 4px; */ 102 | -webkit-transition: background 0.3s; 103 | -moz-transition: background 0.3s; 104 | transition: background 0.3s; 105 | 106 | &:before, 107 | &:after { 108 | content: ''; 109 | position: absolute; 110 | left: 0; 111 | background: inherit; 112 | width: 100%; 113 | height: 100%; 114 | -webkit-transform: translateZ(0); 115 | -moz-transform: translateZ(0); 116 | -ms-transform: translateZ(0); 117 | -o-transform: translateZ(0); 118 | transform: translateZ(0); 119 | -webkit-backface-visibility: hidden; 120 | backface-visibility: hidden; 121 | -webkit-transition: -webkit-transform 0.5s, background 0s; 122 | -moz-transition: -moz-transform 0.5s, background 0s; 123 | transition: transform 0.5s, background 0s; 124 | } 125 | 126 | &:before { 127 | top: -6px; 128 | -webkit-transform: rotate(0); 129 | -moz-transform: rotate(0); 130 | -ms-transform: rotate(0); 131 | -o-transform: rotate(0); 132 | transform: rotate(0); 133 | } 134 | 135 | &:after { 136 | bottom: -6px; 137 | -webkit-transform: rotate(0); 138 | -moz-transform: rotate(0); 139 | -ms-transform: rotate(0); 140 | -o-transform: rotate(0); 141 | transform: rotate(0); 142 | } 143 | } 144 | 145 | /* .sidebar-toggle--black { 146 | background: $black; 147 | } */ 148 | 149 | // sidebar toggle behavior 150 | 151 | /* #sidebar-checkbox:checked ~ .postWrapper, */ 152 | #sidebar-checkbox:checked ~ .sidebar, 153 | #sidebar-checkbox:checked ~ .sidebar-toggle-wrapper { 154 | -webkit-transform: translateX(-14rem); 155 | -ms-transform: translateX(-14rem); 156 | transform: translateX(-14rem); 157 | } 158 | 159 | .sidebar-toggle:active, 160 | #sidebar-checkbox:checked ~ .sidebar-toggle-wrapper { 161 | position: fixed; 162 | background-color: rgba($black,0.8); 163 | } 164 | 165 | #sidebar-checkbox:checked ~ .sidebar-toggle-wrapper .sidebar-toggle { 166 | background: transparent; 167 | 168 | &:before, 169 | &:after { 170 | background: $white; 171 | } 172 | 173 | &:before { 174 | top: 0; 175 | -webkit-transform: rotate(135deg); 176 | -moz-transform: rotate(135deg); 177 | -ms-transform: rotate(135deg); 178 | -o-transform: rotate(135deg); 179 | transform: rotate(135deg); 180 | } 181 | 182 | &:after { 183 | bottom: 0; 184 | -webkit-transform: rotate(225deg); 185 | -moz-transform: rotate(225deg); 186 | -ms-transform: rotate(225deg); 187 | -o-transform: rotate(225deg); 188 | transform: rotate(225deg); 189 | } 190 | } 191 | 192 | #sidebar-checkbox:checked ~ .sidebar { 193 | visibility: visible; 194 | } 195 | 196 | .postWrapper, 197 | .sidebar-toggle-wrapper { 198 | -webkit-transition: -webkit-transform .3s ease-in-out; 199 | transition: transform .3s ease-in-out; 200 | } 201 | 202 | // Sidebar content 203 | 204 | .sidebar-recentPosts { 205 | list-style: none; 206 | margin: $leading 0 0; 207 | padding: 0; 208 | font-size: $font-XS; 209 | 210 | a, 211 | a:hover { 212 | text-decoration: none; 213 | background-image: none; 214 | } 215 | 216 | a { 217 | display: block; 218 | letter-spacing: 0.05rem; 219 | font-weight: 700; 220 | line-height: 1.5; 221 | color: rgba($white,.8); 222 | } 223 | 224 | a:hover { 225 | color: rgba($white,1); 226 | } 227 | 228 | li { 229 | list-style: none; 230 | margin-bottom: $leading; 231 | } 232 | 233 | .postMeta { 234 | font-size: $font-XS; 235 | color: rgba($white,.4); 236 | } 237 | } 238 | 239 | .sidebar-recentPosts-image-wrapper { 240 | display: block; 241 | width: 100%; 242 | height: 3 * $leading; 243 | background: #333; 244 | overflow: hidden; 245 | margin-bottom: 15px; 246 | 247 | img { 248 | min-height: 3 * $leading; 249 | width: 150%; 250 | height: auto; 251 | position: relative; 252 | left: 50%; 253 | transform: translateX(-50%); 254 | } 255 | } 256 | 257 | // Left side menu 258 | 259 | .menuWrapper { 260 | position: absolute; 261 | z-index: $zIndex-5--sidebar-toggle-wrapper; 262 | top: 30px; 263 | left: 3%; 264 | } 265 | 266 | .menuWrapper ul { 267 | list-style: none; 268 | position: relative; 269 | float: left; 270 | margin: 0; 271 | padding: 0; 272 | 273 | li { 274 | position: relative; 275 | float: left; 276 | list-style: none; 277 | margin: 0; 278 | padding: 0; 279 | } 280 | 281 | a { 282 | display: block; 283 | color: #333; 284 | text-decoration: none; 285 | padding: 0 15px; 286 | } 287 | 288 | ul { 289 | display: none; 290 | position: absolute; 291 | top: 100%; 292 | left: 0; 293 | background: #fff; 294 | padding: 0; 295 | } 296 | } 297 | 298 | .menuWrapper ul li:hover { 299 | // display: block; 300 | opacity: 0.8; 301 | 302 | > ul { 303 | display: block; 304 | } 305 | } 306 | 307 | .list--avatarMenu { 308 | 309 | .list-item { 310 | float: none; 311 | width: 200px; 312 | } 313 | 314 | a { 315 | padding: 10px 15px; 316 | } 317 | } 318 | -------------------------------------------------------------------------------- /_scss/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ 2 | 3 | // 4 | // 1. Set default font family to sans-serif. 5 | // 2. Prevent iOS text size adjust after orientation change, without disabling 6 | // user zoom. 7 | // 8 | 9 | html { 10 | font-family: sans-serif; // 1 11 | -ms-text-size-adjust: 100%; // 2 12 | -webkit-text-size-adjust: 100%; // 2 13 | } 14 | 15 | // 16 | // Remove default margin. 17 | // 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | // HTML5 display definitions 24 | // ========================================================================== 25 | 26 | // 27 | // Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | // Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. 29 | // Correct `block` display not defined for `main` in IE 11. 30 | // 31 | 32 | article, 33 | aside, 34 | details, 35 | figcaption, 36 | figure, 37 | footer, 38 | header, 39 | hgroup, 40 | main, 41 | nav, 42 | section, 43 | summary { 44 | display: block; 45 | } 46 | 47 | // 48 | // 1. Correct `inline-block` display not defined in IE 8/9. 49 | // 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 50 | // 51 | 52 | audio, 53 | canvas, 54 | progress, 55 | video { 56 | display: inline-block; // 1 57 | vertical-align: baseline; // 2 58 | } 59 | 60 | // 61 | // Prevent modern browsers from displaying `audio` without controls. 62 | // Remove excess height in iOS 5 devices. 63 | // 64 | 65 | audio:not([controls]) { 66 | display: none; 67 | height: 0; 68 | } 69 | 70 | // 71 | // Address `[hidden]` styling not present in IE 8/9/10. 72 | // Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 73 | // 74 | 75 | [hidden], 76 | template { 77 | display: none; 78 | } 79 | 80 | // Links 81 | // ========================================================================== 82 | 83 | // 84 | // Remove the gray background color from active links in IE 10. 85 | // 86 | 87 | a { 88 | background: transparent; 89 | } 90 | 91 | // 92 | // Improve readability when focused and also mouse hovered in all browsers. 93 | // 94 | 95 | a:active, 96 | a:hover { 97 | outline: 0; 98 | } 99 | 100 | // Text-level semantics 101 | // ========================================================================== 102 | 103 | // 104 | // Address styling not present in IE 8/9/10/11, Safari, and Chrome. 105 | // 106 | 107 | abbr[title] { 108 | border-bottom: 1px dotted; 109 | } 110 | 111 | // 112 | // Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 113 | // 114 | 115 | b, 116 | strong { 117 | font-weight: bold; 118 | } 119 | 120 | // 121 | // Address styling not present in Safari and Chrome. 122 | // 123 | 124 | dfn { 125 | font-style: italic; 126 | } 127 | 128 | // 129 | // Address variable `h1` font-size and margin within `section` and `article` 130 | // contexts in Firefox 4+, Safari, and Chrome. 131 | // 132 | 133 | h1 { 134 | font-size: 2em; 135 | margin: 0.67em 0; 136 | } 137 | 138 | // 139 | // Address styling not present in IE 8/9. 140 | // 141 | 142 | mark { 143 | background: #ff0; 144 | color: #000; 145 | } 146 | 147 | // 148 | // Address inconsistent and variable font size in all browsers. 149 | // 150 | 151 | small { 152 | font-size: 80%; 153 | } 154 | 155 | // 156 | // Prevent `sub` and `sup` affecting `line-height` in all browsers. 157 | // 158 | 159 | sub, 160 | sup { 161 | font-size: 75%; 162 | line-height: 0; 163 | position: relative; 164 | vertical-align: baseline; 165 | } 166 | 167 | sup { 168 | top: -0.5em; 169 | } 170 | 171 | sub { 172 | bottom: -0.25em; 173 | } 174 | 175 | // Embedded content 176 | // ========================================================================== 177 | 178 | // 179 | // Remove border when inside `a` element in IE 8/9/10. 180 | // 181 | 182 | img { 183 | border: 0; 184 | } 185 | 186 | // 187 | // Correct overflow not hidden in IE 9/10/11. 188 | // 189 | 190 | svg:not(:root) { 191 | overflow: hidden; 192 | } 193 | 194 | // Grouping content 195 | // ========================================================================== 196 | 197 | // 198 | // Address margin not present in IE 8/9 and Safari. 199 | // 200 | 201 | figure { 202 | margin: 1em 40px; 203 | } 204 | 205 | // 206 | // Address differences between Firefox and other browsers. 207 | // 208 | 209 | hr { 210 | -moz-box-sizing: content-box; 211 | box-sizing: content-box; 212 | height: 0; 213 | } 214 | 215 | // 216 | // Contain overflow in all browsers. 217 | // 218 | 219 | pre { 220 | overflow: auto; 221 | } 222 | 223 | // 224 | // Address odd `em`-unit font size rendering in all browsers. 225 | // 226 | 227 | code, 228 | kbd, 229 | pre, 230 | samp { 231 | font-family: monospace, monospace; 232 | font-size: 1em; 233 | } 234 | 235 | // Forms 236 | // ========================================================================== 237 | 238 | // 239 | // Known limitation: by default, Chrome and Safari on OS X allow very limited 240 | // styling of `select`, unless a `border` property is set. 241 | // 242 | 243 | // 244 | // 1. Correct color not being inherited. 245 | // Known issue: affects color of disabled elements. 246 | // 2. Correct font properties not being inherited. 247 | // 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 248 | // 249 | 250 | button, 251 | input, 252 | optgroup, 253 | select, 254 | textarea { 255 | color: inherit; // 1 256 | font: inherit; // 2 257 | margin: 0; // 3 258 | } 259 | 260 | // 261 | // Address `overflow` set to `hidden` in IE 8/9/10/11. 262 | // 263 | 264 | button { 265 | overflow: visible; 266 | } 267 | 268 | // 269 | // Address inconsistent `text-transform` inheritance for `button` and `select`. 270 | // All other form control elements do not inherit `text-transform` values. 271 | // Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 272 | // Correct `select` style inheritance in Firefox. 273 | // 274 | 275 | button, 276 | select { 277 | text-transform: none; 278 | } 279 | 280 | // 281 | // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 282 | // and `video` controls. 283 | // 2. Correct inability to style clickable `input` types in iOS. 284 | // 3. Improve usability and consistency of cursor style between image-type 285 | // `input` and others. 286 | // 287 | 288 | button, 289 | html input[type="button"], // 1 290 | input[type="reset"], 291 | input[type="submit"] { 292 | -webkit-appearance: button; // 2 293 | cursor: pointer; // 3 294 | } 295 | 296 | // 297 | // Re-set default cursor for disabled elements. 298 | // 299 | 300 | button[disabled], 301 | html input[disabled] { 302 | cursor: default; 303 | } 304 | 305 | // 306 | // Remove inner padding and border in Firefox 4+. 307 | // 308 | 309 | button::-moz-focus-inner, 310 | input::-moz-focus-inner { 311 | border: 0; 312 | padding: 0; 313 | } 314 | 315 | // 316 | // Address Firefox 4+ setting `line-height` on `input` using `!important` in 317 | // the UA stylesheet. 318 | // 319 | 320 | input { 321 | line-height: normal; 322 | } 323 | 324 | // 325 | // It's recommended that you don't attempt to style these elements. 326 | // Firefox's implementation doesn't respect box-sizing, padding, or width. 327 | // 328 | // 1. Address box sizing set to `content-box` in IE 8/9/10. 329 | // 2. Remove excess padding in IE 8/9/10. 330 | // 331 | 332 | input[type="checkbox"], 333 | input[type="radio"] { 334 | box-sizing: border-box; // 1 335 | padding: 0; // 2 336 | } 337 | 338 | // 339 | // Fix the cursor style for Chrome's increment/decrement buttons. For certain 340 | // `font-size` values of the `input`, it causes the cursor style of the 341 | // decrement button to change from `default` to `text`. 342 | // 343 | 344 | input[type="number"]::-webkit-inner-spin-button, 345 | input[type="number"]::-webkit-outer-spin-button { 346 | height: auto; 347 | } 348 | 349 | // 350 | // 1. Address `appearance` set to `searchfield` in Safari and Chrome. 351 | // 2. Address `box-sizing` set to `border-box` in Safari and Chrome 352 | // (include `-moz` to future-proof). 353 | // 354 | 355 | input[type="search"] { 356 | -webkit-appearance: textfield; // 1 357 | -moz-box-sizing: content-box; 358 | -webkit-box-sizing: content-box; // 2 359 | box-sizing: content-box; 360 | } 361 | 362 | // 363 | // Remove inner padding and search cancel button in Safari and Chrome on OS X. 364 | // Safari (but not Chrome) clips the cancel button when the search input has 365 | // padding (and `textfield` appearance). 366 | // 367 | 368 | input[type="search"]::-webkit-search-cancel-button, 369 | input[type="search"]::-webkit-search-decoration { 370 | -webkit-appearance: none; 371 | } 372 | 373 | // 374 | // Define consistent border, margin, and padding. 375 | // 376 | 377 | fieldset { 378 | border: 1px solid #c0c0c0; 379 | margin: 0 2px; 380 | padding: 0.35em 0.625em 0.75em; 381 | } 382 | 383 | // 384 | // 1. Correct `color` not being inherited in IE 8/9/10/11. 385 | // 2. Remove padding so people aren't caught out if they zero out fieldsets. 386 | // 387 | 388 | legend { 389 | border: 0; // 1 390 | padding: 0; // 2 391 | } 392 | 393 | // 394 | // Remove default vertical scrollbar in IE 8/9/10/11. 395 | // 396 | 397 | textarea { 398 | overflow: auto; 399 | } 400 | 401 | // 402 | // Don't inherit the `font-weight` (applied by a rule above). 403 | // NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 404 | // 405 | 406 | optgroup { 407 | font-weight: bold; 408 | } 409 | 410 | // Tables 411 | // ========================================================================== 412 | 413 | // 414 | // Remove most spacing between table cells. 415 | // 416 | 417 | table { 418 | border-collapse: collapse; 419 | border-spacing: 0; 420 | } 421 | 422 | td, 423 | th { 424 | padding: 0; 425 | } 426 | -------------------------------------------------------------------------------- /_scss/_responsive-utilities.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Responsive: Utility classes 3 | // -------------------------------------------------- 4 | // 5 | // Credit: Bootstrap 3 6 | 7 | 8 | // IE10 in Windows (Phone) 8 9 | // 10 | // Support for responsive views via media queries is kind of borked in IE10, for 11 | // Surface/desktop in split view and for Windows Phone 8. This particular fix 12 | // must be accompanied by a snippet of JavaScript to sniff the user agent and 13 | // apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at 14 | // our Getting Started page for more information on this bug. 15 | // 16 | // For more information, see the following: 17 | // 18 | // Issue: https://github.com/twbs/bootstrap/issues/10497 19 | // Docs: http://getbootstrap.com/getting-started/#support-ie10-width 20 | // Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/ 21 | // Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/ 22 | 23 | @-ms-viewport { 24 | width: device-width; 25 | } 26 | 27 | 28 | // Visibility utilities 29 | // Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0 30 | 31 | @include responsive-invisibility('.visible-xs, .visible-sm, .visible-md, .visible-lg'); 32 | 33 | .visible-xs-block, 34 | .visible-xs-inline, 35 | .visible-xs-inline-block, 36 | .visible-sm-block, 37 | .visible-sm-inline, 38 | .visible-sm-inline-block, 39 | .visible-md-block, 40 | .visible-md-inline, 41 | .visible-md-inline-block, 42 | .visible-lg-block, 43 | .visible-lg-inline, 44 | .visible-lg-inline-block { 45 | display: none !important; 46 | } 47 | 48 | @media (max-width: $screen-xs-max) { 49 | @include responsive-visibility('.visible-xs'); 50 | } 51 | .visible-xs-block { 52 | @media (max-width: $screen-xs-max) { 53 | display: block !important; 54 | } 55 | } 56 | .visible-xs-inline { 57 | @media (max-width: $screen-xs-max) { 58 | display: inline !important; 59 | } 60 | } 61 | .visible-xs-inline-block { 62 | @media (max-width: $screen-xs-max) { 63 | display: inline-block !important; 64 | } 65 | } 66 | 67 | @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { 68 | @include responsive-visibility('.visible-sm'); 69 | } 70 | .visible-sm-block { 71 | @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { 72 | display: block !important; 73 | } 74 | } 75 | .visible-sm-inline { 76 | @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { 77 | display: inline !important; 78 | } 79 | } 80 | .visible-sm-inline-block { 81 | @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { 82 | display: inline-block !important; 83 | } 84 | } 85 | 86 | @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { 87 | @include responsive-visibility('.visible-md'); 88 | } 89 | .visible-md-block { 90 | @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { 91 | display: block !important; 92 | } 93 | } 94 | .visible-md-inline { 95 | @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { 96 | display: inline !important; 97 | } 98 | } 99 | .visible-md-inline-block { 100 | @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { 101 | display: inline-block !important; 102 | } 103 | } 104 | 105 | @media (min-width: $screen-lg-min) { 106 | @include responsive-visibility('.visible-lg'); 107 | } 108 | .visible-lg-block { 109 | @media (min-width: $screen-lg-min) { 110 | display: block !important; 111 | } 112 | } 113 | .visible-lg-inline { 114 | @media (min-width: $screen-lg-min) { 115 | display: inline !important; 116 | } 117 | } 118 | .visible-lg-inline-block { 119 | @media (min-width: $screen-lg-min) { 120 | display: inline-block !important; 121 | } 122 | } 123 | 124 | @media (max-width: $screen-xs-max) { 125 | @include responsive-invisibility('.hidden-xs'); 126 | } 127 | 128 | @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { 129 | @include responsive-invisibility('.hidden-sm'); 130 | } 131 | 132 | @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { 133 | @include responsive-invisibility('.hidden-md'); 134 | } 135 | 136 | @media (min-width: $screen-lg-min) { 137 | @include responsive-invisibility('.hidden-lg'); 138 | } 139 | 140 | 141 | // Print utilities 142 | // 143 | // Media queries are placed on the inside to be mixin-friendly. 144 | 145 | // Note: Deprecated .visible-print as of v3.2.0 146 | 147 | @include responsive-invisibility('.visible-print'); 148 | 149 | @media print { 150 | @include responsive-visibility('.visible-print'); 151 | } 152 | .visible-print-block { 153 | display: none !important; 154 | 155 | @media print { 156 | display: block !important; 157 | } 158 | } 159 | .visible-print-inline { 160 | display: none !important; 161 | 162 | @media print { 163 | display: inline !important; 164 | } 165 | } 166 | .visible-print-inline-block { 167 | display: none !important; 168 | 169 | @media print { 170 | display: inline-block !important; 171 | } 172 | } 173 | 174 | @media print { 175 | @include responsive-invisibility('.hidden-print'); 176 | } 177 | -------------------------------------------------------------------------------- /_scss/_scaffolding.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Scaffolding 3 | // -------------------------------------------------- 4 | 5 | 6 | // Reset the box-sizing 7 | // 8 | // Heads up! This reset may cause conflicts with some third-party widgets. 9 | // For recommendations on resolving such conflicts, see 10 | // http://getbootstrap.com/getting-started/#third-box-sizing 11 | * { 12 | @include box-sizing(border-box); 13 | } 14 | *:before, 15 | *:after { 16 | @include box-sizing(border-box); 17 | } 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /_scss/_typography.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Typography 3 | // -------------------------------------------------- 4 | // 5 | // Credit: Modified based on Typebase.less v0.1.0 | MIT License 6 | 7 | // Typesetting variables. 8 | $baseFontSize: 22; // in pixels. This would result in 22px on desktop 9 | $baseLineHeight: 1.5; // how large the line height is as a multiple of font size - 33px 10 | $leading: $baseLineHeight * 1rem; 11 | // Rate of growth for headings 12 | $scale: 1.333; 13 | 14 | // Common font size based on 1.333 ratio - modularscale.com 15 | $font-XXS: 0.563rem; 16 | $font-XS: 0.75rem; 17 | $font-S: 1rem; 18 | $font-M: 1.333rem; 19 | $font-L: 1.777rem; 20 | $font-XL: 2.369rem; 21 | $font-XXL: 3.157rem; 22 | $font-XXXL: 4.209rem; 23 | $font-XXXXL: 5.61rem; 24 | 25 | // Font type 26 | $body-primary-font: 'Source Serif Pro', serif; 27 | $title-primary-font: 'PT Sans', sans-serif; 28 | $title-secondary-font: 'Roboto', sans-serif; 29 | 30 | /* Setup */ 31 | 32 | html { 33 | /* Change default typefaces here */ 34 | font-family: $body-primary-font; 35 | font-size: $baseFontSize / 16 * 100%; // 14px 36 | font-weight: 400; 37 | color: $text-color; 38 | -webkit-font-smoothing: antialiased; 39 | text-rendering: optimizeLegibility; 40 | font-feature-settings: "kern" 1; 41 | -webkit-font-feature-settings: "kern"; 42 | -moz-font-feature-settings: "kern"; 43 | -moz-font-feature-settings: "kern=1"; 44 | // -webkit-text-size-adjust: auto 45 | // -moz-text-size-adjust: auto 46 | // -ms-text-size-adjust: auto 47 | // -o-text-size-adjust: auto 48 | // text-size-adjust: auto 49 | } 50 | /* Copy & Lists */ 51 | 52 | p { 53 | line-height: $leading; 54 | letter-spacing: .01rem; 55 | margin-top: $leading; 56 | margin-bottom: 0; 57 | } 58 | 59 | p.u--startsWithDoubleQuote { 60 | text-indent: -0.43em; 61 | } 62 | 63 | ul, 64 | ol { 65 | margin-top: $leading; 66 | margin-bottom: $leading; 67 | padding-left: 22px; 68 | 69 | li { 70 | line-height: $leading; 71 | } 72 | ul, 73 | ol { 74 | margin-top: 0; 75 | margin-bottom: 0; 76 | } 77 | } 78 | 79 | blockquote { 80 | line-height: $leading; 81 | font-style: italic; 82 | padding-left: 25px; 83 | margin-left: -29px; 84 | border-left: 4px solid $black; 85 | 86 | @media (max-width: $screen-xs-max) { 87 | padding-left: 15px; 88 | margin-left: -19px; 89 | } 90 | 91 | &.u--startsWithDoubleQuote { 92 | text-indent: -0.40em; 93 | } 94 | 95 | &.largeQuote { 96 | line-height: 1.4; 97 | text-align: center; 98 | font-size: $font-L; 99 | margin: $leading -160px 0; 100 | padding-left: 0; 101 | border-left: 0; 102 | 103 | @media (max-width: $screen-xs-max) { 104 | margin: $leading 0 0; 105 | font-size: $font-M; 106 | padding-left: 0; 107 | } 108 | 109 | a { 110 | background-position: 0 42px; 111 | } 112 | } 113 | } 114 | /* Headings */ 115 | 116 | h1, 117 | h2, 118 | h3, 119 | h4, 120 | h5, 121 | h6 { 122 | /* Change heading typefaces here */ 123 | font-family: $title-primary-font; 124 | margin-top: $leading; 125 | margin-bottom: 0; 126 | line-height: $leading; 127 | letter-spacing: -0.02em; 128 | } 129 | h1 { 130 | font-size: 3 * $scale * 1rem; 131 | line-height: 3 * $leading; 132 | margin-top: 2 * $leading; 133 | } 134 | h2 { 135 | font-family: $title-secondary-font; 136 | font-size: 2 * $scale * 1rem; 137 | line-height: 2 * $leading; 138 | margin-top: 2 * $leading; 139 | font-weight: 300; 140 | } 141 | h3 { 142 | /* font-size: 1.33 * $scale * 1rem; 143 | line-height: 1.34 * $leading; 144 | margin-top: 1.33 * $leading; */ 145 | font-size: $font-L; 146 | line-height: 2.18rem; 147 | margin-top: 1.7rem; 148 | } 149 | h4 { 150 | font-size: 1 * $scale * 1rem; 151 | } 152 | h5 { 153 | font-size: 0.8 * $scale * 1rem; 154 | } 155 | h6 { 156 | font-size: 0.7 * $scale * 1rem; 157 | } 158 | 159 | // Link style inspired by Medium.com 160 | 161 | a { 162 | color: $link-color; 163 | text-decoration: none; 164 | background-image: linear-gradient(to bottom, rgba($link-color,0) 75%, rgba($link-color,0.8) 75%); 165 | background-repeat: repeat-x; 166 | background-position: 0 22px; 167 | background-size: 2px 2px; 168 | 169 | &:hover { 170 | color: $link-hover-color; 171 | } 172 | } 173 | 174 | /* Tables */ 175 | 176 | table { 177 | margin-top: $leading; 178 | border-spacing: 0px; 179 | border-collapse: collapse; 180 | } 181 | td, 182 | th { 183 | padding: 0; 184 | line-height: $baseLineHeight * $baseFontSize - 0px; 185 | } 186 | /* Code blocks */ 187 | 188 | code { 189 | // Forces text to constrain to the line-height. Not ideal, but works. 190 | vertical-align: bottom; 191 | } 192 | 193 | hr { 194 | border-color: #d5d5d5; 195 | padding: 0; 196 | border-top: 0; 197 | border-left: 0; 198 | border-right: 0; 199 | margin: $leading 0; 200 | } 201 | 202 | /* Leading paragraph text */ 203 | 204 | .lead { 205 | font-size: $scale * 1rem; 206 | } 207 | /* Hug a the block above you */ 208 | 209 | .hug { 210 | margin-top: 0; 211 | } 212 | 213 | .container--content { 214 | max-width: 700px; // limit to 65-90 characters per line 215 | } 216 | 217 | .is-darkBackgrounded, 218 | .is-darkBackgrounded a, 219 | .is-darkBackgrounded a:hover, 220 | .is-darkBackgrounded a:visited { 221 | color: #fff; 222 | } 223 | -------------------------------------------------------------------------------- /_scss/_utilities.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Utilities 3 | // -------------------------------------------------- 4 | // 5 | // Credit: Bootstrap 3 6 | 7 | // Floats 8 | // ------------------------- 9 | 10 | .u-clearfix { 11 | @include clearfix(); 12 | } 13 | .u-alignRight { 14 | float: right !important; 15 | } 16 | .u-alignLeft { 17 | float: left !important; 18 | } 19 | 20 | .u-alignCenter { 21 | text-align: center !important; 22 | } 23 | 24 | // Table display 25 | // ------------------------- 26 | 27 | .u-table { 28 | display: table !important; 29 | 30 | &:before { 31 | height: auto !important; 32 | display: inherit !important; 33 | } 34 | } 35 | 36 | .u-tableCell { 37 | display: table-cell !important; 38 | } 39 | 40 | .u-verticalAlignTop { 41 | vertical-align: top !important; 42 | } 43 | 44 | .u-verticalAlignMiddle { 45 | vertical-align: middle !important; 46 | } 47 | 48 | .u-verticalAlignBottom { 49 | vertical-align: bottom !important; 50 | } 51 | 52 | // Toggling content 53 | // ------------------------- 54 | 55 | // Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1 56 | .hide { 57 | display: none !important; 58 | } 59 | .show { 60 | display: block !important; 61 | } 62 | .invisible { 63 | visibility: hidden; 64 | } 65 | 66 | // Hide from screenreaders and browsers 67 | // 68 | // Credit: HTML5 Boilerplate 69 | 70 | .hidden { 71 | display: none !important; 72 | visibility: hidden !important; 73 | } 74 | 75 | .is-blurred { 76 | -webkit-filter: blur(10px); 77 | -moz-filter: blur(10px); 78 | -o-filter: blur(10px); 79 | filter: blur(10px); 80 | -webkit-transition: all 0.5s; 81 | -moz-transition: all 0.5s; 82 | -o-transition: all 0.5s; 83 | transition: all 0.5s; 84 | } 85 | 86 | .u-overflow-y-hidden { 87 | overflow-y: hidden; 88 | } 89 | 90 | .u-scrollbar-hidden { 91 | padding-right: 15px; 92 | } 93 | 94 | .u-clearHr { 95 | clear: both; 96 | visibility: hidden; 97 | } 98 | -------------------------------------------------------------------------------- /_scss/_variables.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Variables 3 | // -------------------------------------------------- 4 | // 5 | // Credit: Bootstrap 3 6 | 7 | //== Media queries breakpoints 8 | // 9 | //## Define the breakpoints at which your layout will change, adapting to different screen sizes. 10 | 11 | // Extra small screen / phone 12 | //** Deprecated `$screen-xs` as of v3.0.1 13 | $screen-xs: 480px !default; 14 | //** Deprecated `$screen-xs-min` as of v3.2.0 15 | $screen-xs-min: $screen-xs !default; 16 | //** Deprecated `$screen-phone` as of v3.0.1 17 | $screen-phone: $screen-xs-min !default; 18 | 19 | // Small screen / tablet 20 | //** Deprecated `$screen-sm` as of v3.0.1 21 | $screen-sm: 768px !default; 22 | $screen-sm-min: $screen-sm !default; 23 | //** Deprecated `$screen-tablet` as of v3.0.1 24 | $screen-tablet: $screen-sm-min !default; 25 | 26 | // Medium screen / desktop 27 | //** Deprecated `$screen-md` as of v3.0.1 28 | $screen-md: 992px !default; 29 | $screen-md-min: $screen-md !default; 30 | //** Deprecated `$screen-desktop` as of v3.0.1 31 | $screen-desktop: $screen-md-min !default; 32 | 33 | // Large screen / wide desktop 34 | //** Deprecated `$screen-lg` as of v3.0.1 35 | $screen-lg: 1200px !default; 36 | $screen-lg-min: $screen-lg !default; 37 | //** Deprecated `$screen-lg-desktop` as of v3.0.1 38 | $screen-lg-desktop: $screen-lg-min !default; 39 | 40 | // So media queries don't overlap when required, provide a maximum 41 | $screen-xs-max: ($screen-sm-min - 1) !default; 42 | $screen-sm-max: ($screen-md-min - 1) !default; 43 | $screen-md-max: ($screen-lg-min - 1) !default; 44 | 45 | //== Grid system 46 | // 47 | //## Define your custom responsive grid. 48 | 49 | //** Number of columns in the grid. 50 | $grid-columns: 12 !default; 51 | //** Padding between columns. Gets divided in half for the left and right. 52 | $grid-gutter-width: 30px !default; 53 | // Navbar collapse 54 | //** Point at which the navbar becomes uncollapsed. 55 | $grid-float-breakpoint: $screen-sm-min !default; 56 | //** Point at which the navbar begins collapsing. 57 | $grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default; 58 | 59 | 60 | //== Container sizes 61 | // 62 | //## Define the maximum width of `.container` for different screen sizes. 63 | 64 | // Small screen / tablet 65 | $container-tablet: ((720px + $grid-gutter-width)) !default; 66 | //** For `$screen-sm-min` and up. 67 | $container-sm: $container-tablet !default; 68 | 69 | // Medium screen / desktop 70 | $container-desktop: ((940px + $grid-gutter-width)) !default; 71 | //** For `$screen-md-min` and up. 72 | $container-md: $container-desktop !default; 73 | 74 | // Large screen / wide desktop 75 | $container-large-desktop: ((1140px + $grid-gutter-width)) !default; 76 | //** For `$screen-lg-min` and up. 77 | $container-lg: $container-large-desktop !default; 78 | -------------------------------------------------------------------------------- /_scss/_z-index.scss: -------------------------------------------------------------------------------- 1 | // 2 | // Z-index scale 3 | // -------------------------------------------------- 4 | // 5 | // Z-index values should always be defined in z-index.scss. This 6 | // allows us to at a glance determine relative layers of our application and prevents bugs 7 | // arrising from arbitrary z-index values. Do not edit the z-index scale! Only add application 8 | // scoped z-index values. 9 | // 10 | // Credit: Medium.com's z-index scale 11 | 12 | 13 | // Z-Index Scale (private vars) 14 | // -------------------------------------------------- 15 | $zIndex-neg2: -200; 16 | $zIndex-neg1: -100; 17 | $zIndex-1: 100; 18 | $zIndex-2: 200; 19 | $zIndex-3: 300; 20 | $zIndex-4: 400; 21 | $zIndex-5: 500; 22 | $zIndex-6: 600; 23 | $zIndex-7: 700; 24 | $zIndex-8: 800; 25 | $zIndex-9: 900; 26 | $zIndex-10: 1000; 27 | 28 | 29 | // Z-Index Applications 30 | // -------------------------------------------------- 31 | $zIndex-neg2--carousel-backgroundImg: $zIndex-neg2; 32 | 33 | $zIndex-neg1--section-gradient: $zIndex-neg1; 34 | 35 | $zIndex-1--section-title: $zIndex-1; 36 | 37 | $zIndex-4--post-wrapper: $zIndex-4; 38 | $zIndex-4--posts-wrapper: $zIndex-4; 39 | 40 | $zIndex-5--metabar: $zIndex-5; 41 | $zIndex-5--sidebar-toggle-wrapper: $zIndex-5; 42 | $zIndex-5--textlogo-frontpage: $zIndex-5; 43 | $zIndex-5--tagline-frontpage: $zIndex-5; 44 | $zIndex-5--modal-toggle-bubbleshadow: $zIndex-5; 45 | 46 | $zIndex-6--sidebar-toggle: $zIndex-6; 47 | $zIndex-6--modal-toggle-bubble: $zIndex-6; 48 | $zIndex-6--modal-toggle-close: $zIndex-6; 49 | 50 | $zIndex-7--modal-toggle-group: $zIndex-7; 51 | $zIndex-7--modal-toggle-wrapper: $zIndex-7; 52 | 53 | $zIndex-8--fullscreen-modal: $zIndex-8; 54 | 55 | $zIndex-9--sidebar: $zIndex-9; 56 | -------------------------------------------------------------------------------- /_scss/main.scss: -------------------------------------------------------------------------------- 1 | // Reset 2 | @import "normalize"; 3 | 4 | // Variables and mixins 5 | @import "variables"; 6 | @import "colors"; 7 | @import "z-index"; 8 | @import "animations"; 9 | @import "mixins"; 10 | 11 | // Typography & images 12 | @import "typography"; 13 | @import "images"; 14 | 15 | // Core 16 | @import "global"; 17 | @import "scaffolding"; 18 | @import "grid"; 19 | 20 | // Components 21 | @import "nav"; 22 | @import "hero"; 23 | @import "content"; 24 | @import "modal"; 25 | @import "form"; 26 | 27 | // Utility classes 28 | @import "utilities"; 29 | @import "responsive-utilities"; 30 | -------------------------------------------------------------------------------- /_scss/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // Clearfix 2 | // 3 | // For modern browsers 4 | // 1. The space content is one way to avoid an Opera bug when the 5 | // contenteditable attribute is included anywhere else in the document. 6 | // Otherwise it causes space to appear at the top and bottom of elements 7 | // that are clearfixed. 8 | // 2. The use of `table` rather than `block` is only necessary if using 9 | // `:before` to contain the top-margins of child elements. 10 | // 11 | // Source: http://nicolasgallagher.com/micro-clearfix-hack/ 12 | 13 | @mixin clearfix() { 14 | &:before, 15 | &:after { 16 | content: " "; // 1 17 | display: table; // 2 18 | } 19 | &:after { 20 | clear: both; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /_scss/mixins/_grid-framework.scss: -------------------------------------------------------------------------------- 1 | // Framework grid generation 2 | // 3 | // Used only by Bootstrap to generate the correct number of grid classes given 4 | // any value of `$grid-columns`. 5 | 6 | // [converter] This is defined recursively in LESS, but Sass supports real loops 7 | @mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") { 8 | @for $i from (1 + 1) through $grid-columns { 9 | $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}"; 10 | } 11 | #{$list} { 12 | position: relative; 13 | // Prevent columns from collapsing when empty 14 | min-height: 1px; 15 | // Inner gutter via padding 16 | padding-left: ($grid-gutter-width / 2); 17 | padding-right: ($grid-gutter-width / 2); 18 | } 19 | } 20 | 21 | 22 | // [converter] This is defined recursively in LESS, but Sass supports real loops 23 | @mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") { 24 | @for $i from (1 + 1) through $grid-columns { 25 | $list: "#{$list}, .col-#{$class}-#{$i}"; 26 | } 27 | #{$list} { 28 | float: left; 29 | } 30 | } 31 | 32 | 33 | @mixin calc-grid-column($index, $class, $type) { 34 | @if ($type == width) and ($index > 0) { 35 | .col-#{$class}-#{$index} { 36 | width: percentage(($index / $grid-columns)); 37 | } 38 | } 39 | @if ($type == push) and ($index > 0) { 40 | .col-#{$class}-push-#{$index} { 41 | left: percentage(($index / $grid-columns)); 42 | } 43 | } 44 | @if ($type == push) and ($index == 0) { 45 | .col-#{$class}-push-0 { 46 | left: auto; 47 | } 48 | } 49 | @if ($type == pull) and ($index > 0) { 50 | .col-#{$class}-pull-#{$index} { 51 | right: percentage(($index / $grid-columns)); 52 | } 53 | } 54 | @if ($type == pull) and ($index == 0) { 55 | .col-#{$class}-pull-0 { 56 | right: auto; 57 | } 58 | } 59 | @if ($type == offset) { 60 | .col-#{$class}-offset-#{$index} { 61 | margin-left: percentage(($index / $grid-columns)); 62 | } 63 | } 64 | } 65 | 66 | // [converter] This is defined recursively in LESS, but Sass supports real loops 67 | @mixin loop-grid-columns($columns, $class, $type) { 68 | @for $i from 0 through $columns { 69 | @include calc-grid-column($i, $class, $type); 70 | } 71 | } 72 | 73 | 74 | // Create grid for specific class 75 | @mixin make-grid($class) { 76 | @include float-grid-columns($class); 77 | @include loop-grid-columns($grid-columns, $class, width); 78 | @include loop-grid-columns($grid-columns, $class, pull); 79 | @include loop-grid-columns($grid-columns, $class, push); 80 | @include loop-grid-columns($grid-columns, $class, offset); 81 | } 82 | -------------------------------------------------------------------------------- /_scss/mixins/_grid.scss: -------------------------------------------------------------------------------- 1 | // Grid system 2 | // 3 | // Generate semantic grid columns with these mixins. 4 | 5 | // Centered container element 6 | @mixin container-fixed($gutter: $grid-gutter-width) { 7 | margin-right: auto; 8 | margin-left: auto; 9 | padding-left: ($gutter / 2); 10 | padding-right: ($gutter / 2); 11 | @include clearfix(); 12 | } 13 | 14 | // Creates a wrapper for a series of columns 15 | @mixin make-row($gutter: $grid-gutter-width) { 16 | margin-left: ($gutter / -2); 17 | margin-right: ($gutter / -2); 18 | @include clearfix(); 19 | } 20 | 21 | // Generate the extra small columns 22 | @mixin make-xs-column($columns, $gutter: $grid-gutter-width) { 23 | position: relative; 24 | float: left; 25 | width: percentage(($columns / $grid-columns)); 26 | min-height: 1px; 27 | padding-left: ($gutter / 2); 28 | padding-right: ($gutter / 2); 29 | } 30 | @mixin make-xs-column-offset($columns) { 31 | margin-left: percentage(($columns / $grid-columns)); 32 | } 33 | @mixin make-xs-column-push($columns) { 34 | left: percentage(($columns / $grid-columns)); 35 | } 36 | @mixin make-xs-column-pull($columns) { 37 | right: percentage(($columns / $grid-columns)); 38 | } 39 | 40 | // Generate the small columns 41 | @mixin make-sm-column($columns, $gutter: $grid-gutter-width) { 42 | position: relative; 43 | min-height: 1px; 44 | padding-left: ($gutter / 2); 45 | padding-right: ($gutter / 2); 46 | 47 | @media (min-width: $screen-sm-min) { 48 | float: left; 49 | width: percentage(($columns / $grid-columns)); 50 | } 51 | } 52 | @mixin make-sm-column-offset($columns) { 53 | @media (min-width: $screen-sm-min) { 54 | margin-left: percentage(($columns / $grid-columns)); 55 | } 56 | } 57 | @mixin make-sm-column-push($columns) { 58 | @media (min-width: $screen-sm-min) { 59 | left: percentage(($columns / $grid-columns)); 60 | } 61 | } 62 | @mixin make-sm-column-pull($columns) { 63 | @media (min-width: $screen-sm-min) { 64 | right: percentage(($columns / $grid-columns)); 65 | } 66 | } 67 | 68 | // Generate the medium columns 69 | @mixin make-md-column($columns, $gutter: $grid-gutter-width) { 70 | position: relative; 71 | min-height: 1px; 72 | padding-left: ($gutter / 2); 73 | padding-right: ($gutter / 2); 74 | 75 | @media (min-width: $screen-md-min) { 76 | float: left; 77 | width: percentage(($columns / $grid-columns)); 78 | } 79 | } 80 | @mixin make-md-column-offset($columns) { 81 | @media (min-width: $screen-md-min) { 82 | margin-left: percentage(($columns / $grid-columns)); 83 | } 84 | } 85 | @mixin make-md-column-push($columns) { 86 | @media (min-width: $screen-md-min) { 87 | left: percentage(($columns / $grid-columns)); 88 | } 89 | } 90 | @mixin make-md-column-pull($columns) { 91 | @media (min-width: $screen-md-min) { 92 | right: percentage(($columns / $grid-columns)); 93 | } 94 | } 95 | 96 | // Generate the large columns 97 | @mixin make-lg-column($columns, $gutter: $grid-gutter-width) { 98 | position: relative; 99 | min-height: 1px; 100 | padding-left: ($gutter / 2); 101 | padding-right: ($gutter / 2); 102 | 103 | @media (min-width: $screen-lg-min) { 104 | float: left; 105 | width: percentage(($columns / $grid-columns)); 106 | } 107 | } 108 | @mixin make-lg-column-offset($columns) { 109 | @media (min-width: $screen-lg-min) { 110 | margin-left: percentage(($columns / $grid-columns)); 111 | } 112 | } 113 | @mixin make-lg-column-push($columns) { 114 | @media (min-width: $screen-lg-min) { 115 | left: percentage(($columns / $grid-columns)); 116 | } 117 | } 118 | @mixin make-lg-column-pull($columns) { 119 | @media (min-width: $screen-lg-min) { 120 | right: percentage(($columns / $grid-columns)); 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /_scss/mixins/_responsive-visibility.scss: -------------------------------------------------------------------------------- 1 | // Responsive utilities 2 | 3 | // 4 | // More easily include all the states for responsive-utilities.less. 5 | // [converter] $parent hack 6 | @mixin responsive-visibility($parent) { 7 | #{$parent} { 8 | display: block !important; 9 | } 10 | table#{$parent} { display: table; } 11 | tr#{$parent} { display: table-row !important; } 12 | th#{$parent}, 13 | td#{$parent} { display: table-cell !important; } 14 | } 15 | 16 | // [converter] $parent hack 17 | @mixin responsive-invisibility($parent) { 18 | #{$parent} { 19 | display: none !important; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /_scss/mixins/_vendor-prefixes.scss: -------------------------------------------------------------------------------- 1 | // Vendor Prefixes 2 | // 3 | // All vendor mixins are deprecated as of v3.2.0 due to the introduction of 4 | // Autoprefixer in our Gruntfile. They will be removed in v4. 5 | 6 | // - Animations 7 | // - Backface visibility 8 | // - Box shadow 9 | // - Box sizing 10 | // - Content columns 11 | // - Hyphens 12 | // - Placeholder text 13 | // - Transformations 14 | // - Transitions 15 | // - User Select 16 | 17 | 18 | // Animations 19 | @mixin animation($animation) { 20 | -webkit-animation: $animation; 21 | -o-animation: $animation; 22 | animation: $animation; 23 | } 24 | @mixin animation-name($name) { 25 | -webkit-animation-name: $name; 26 | animation-name: $name; 27 | } 28 | @mixin animation-duration($duration) { 29 | -webkit-animation-duration: $duration; 30 | animation-duration: $duration; 31 | } 32 | @mixin animation-timing-function($timing-function) { 33 | -webkit-animation-timing-function: $timing-function; 34 | animation-timing-function: $timing-function; 35 | } 36 | @mixin animation-delay($delay) { 37 | -webkit-animation-delay: $delay; 38 | animation-delay: $delay; 39 | } 40 | @mixin animation-iteration-count($iteration-count) { 41 | -webkit-animation-iteration-count: $iteration-count; 42 | animation-iteration-count: $iteration-count; 43 | } 44 | @mixin animation-direction($direction) { 45 | -webkit-animation-direction: $direction; 46 | animation-direction: $direction; 47 | } 48 | @mixin animation-fill-mode($fill-mode) { 49 | -webkit-animation-fill-mode: $fill-mode; 50 | animation-fill-mode: $fill-mode; 51 | } 52 | 53 | // Backface visibility 54 | // Prevent browsers from flickering when using CSS 3D transforms. 55 | // Default value is `visible`, but can be changed to `hidden` 56 | 57 | @mixin backface-visibility($visibility){ 58 | -webkit-backface-visibility: $visibility; 59 | -moz-backface-visibility: $visibility; 60 | backface-visibility: $visibility; 61 | } 62 | 63 | // Drop shadows 64 | // 65 | // Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's 66 | // supported browsers that have box shadow capabilities now support it. 67 | 68 | @mixin box-shadow($shadow...) { 69 | -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 70 | box-shadow: $shadow; 71 | } 72 | 73 | // Box sizing 74 | @mixin box-sizing($boxmodel) { 75 | -webkit-box-sizing: $boxmodel; 76 | -moz-box-sizing: $boxmodel; 77 | box-sizing: $boxmodel; 78 | } 79 | 80 | // CSS3 Content Columns 81 | @mixin content-columns($column-count, $column-gap: $grid-gutter-width) { 82 | -webkit-column-count: $column-count; 83 | -moz-column-count: $column-count; 84 | column-count: $column-count; 85 | -webkit-column-gap: $column-gap; 86 | -moz-column-gap: $column-gap; 87 | column-gap: $column-gap; 88 | } 89 | 90 | // Optional hyphenation 91 | @mixin hyphens($mode: auto) { 92 | word-wrap: break-word; 93 | -webkit-hyphens: $mode; 94 | -moz-hyphens: $mode; 95 | -ms-hyphens: $mode; // IE10+ 96 | -o-hyphens: $mode; 97 | hyphens: $mode; 98 | } 99 | 100 | // Placeholder text 101 | @mixin placeholder($color: $input-color-placeholder) { 102 | &::-moz-placeholder { color: $color; // Firefox 103 | opacity: 1; } // See https://github.com/twbs/bootstrap/pull/11526 104 | &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+ 105 | &::-webkit-input-placeholder { color: $color; } // Safari and Chrome 106 | } 107 | 108 | // Transformations 109 | @mixin scale($ratio...) { 110 | -webkit-transform: scale($ratio); 111 | -ms-transform: scale($ratio); // IE9 only 112 | -o-transform: scale($ratio); 113 | transform: scale($ratio); 114 | } 115 | 116 | @mixin scaleX($ratio) { 117 | -webkit-transform: scaleX($ratio); 118 | -ms-transform: scaleX($ratio); // IE9 only 119 | -o-transform: scaleX($ratio); 120 | transform: scaleX($ratio); 121 | } 122 | @mixin scaleY($ratio) { 123 | -webkit-transform: scaleY($ratio); 124 | -ms-transform: scaleY($ratio); // IE9 only 125 | -o-transform: scaleY($ratio); 126 | transform: scaleY($ratio); 127 | } 128 | @mixin skew($x, $y) { 129 | -webkit-transform: skewX($x) skewY($y); 130 | -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+ 131 | -o-transform: skewX($x) skewY($y); 132 | transform: skewX($x) skewY($y); 133 | } 134 | @mixin translate($x, $y) { 135 | -webkit-transform: translate($x, $y); 136 | -ms-transform: translate($x, $y); // IE9 only 137 | -o-transform: translate($x, $y); 138 | transform: translate($x, $y); 139 | } 140 | @mixin translate3d($x, $y, $z) { 141 | -webkit-transform: translate3d($x, $y, $z); 142 | transform: translate3d($x, $y, $z); 143 | } 144 | @mixin rotate($degrees) { 145 | -webkit-transform: rotate($degrees); 146 | -ms-transform: rotate($degrees); // IE9 only 147 | -o-transform: rotate($degrees); 148 | transform: rotate($degrees); 149 | } 150 | @mixin rotateX($degrees) { 151 | -webkit-transform: rotateX($degrees); 152 | -ms-transform: rotateX($degrees); // IE9 only 153 | -o-transform: rotateX($degrees); 154 | transform: rotateX($degrees); 155 | } 156 | @mixin rotateY($degrees) { 157 | -webkit-transform: rotateY($degrees); 158 | -ms-transform: rotateY($degrees); // IE9 only 159 | -o-transform: rotateY($degrees); 160 | transform: rotateY($degrees); 161 | } 162 | @mixin perspective($perspective) { 163 | -webkit-perspective: $perspective; 164 | -moz-perspective: $perspective; 165 | perspective: $perspective; 166 | } 167 | @mixin perspective-origin($perspective) { 168 | -webkit-perspective-origin: $perspective; 169 | -moz-perspective-origin: $perspective; 170 | perspective-origin: $perspective; 171 | } 172 | @mixin transform-origin($origin) { 173 | -webkit-transform-origin: $origin; 174 | -moz-transform-origin: $origin; 175 | -ms-transform-origin: $origin; // IE9 only 176 | transform-origin: $origin; 177 | } 178 | 179 | 180 | // Transitions 181 | 182 | @mixin transition($transition...) { 183 | -webkit-transition: $transition; 184 | -o-transition: $transition; 185 | transition: $transition; 186 | } 187 | @mixin transition-property($transition-property...) { 188 | -webkit-transition-property: $transition-property; 189 | transition-property: $transition-property; 190 | } 191 | @mixin transition-delay($transition-delay) { 192 | -webkit-transition-delay: $transition-delay; 193 | transition-delay: $transition-delay; 194 | } 195 | @mixin transition-duration($transition-duration...) { 196 | -webkit-transition-duration: $transition-duration; 197 | transition-duration: $transition-duration; 198 | } 199 | @mixin transition-timing-function($timing-function) { 200 | -webkit-transition-timing-function: $timing-function; 201 | transition-timing-function: $timing-function; 202 | } 203 | @mixin transition-transform($transition...) { 204 | -webkit-transition: -webkit-transform $transition; 205 | -moz-transition: -moz-transform $transition; 206 | -o-transition: -o-transform $transition; 207 | transition: transform $transition; 208 | } 209 | 210 | 211 | // User select 212 | // For selecting text on the page 213 | 214 | @mixin user-select($select) { 215 | -webkit-user-select: $select; 216 | -moz-user-select: $select; 217 | -ms-user-select: $select; // IE10+ 218 | user-select: $select; 219 | } 220 | -------------------------------------------------------------------------------- /about/index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: About Vincent Chan 4 | --- 5 |
6 |
7 |
8 | 9 |
10 |
11 |
12 |
13 |

Vincent Chan

14 |
15 |
    16 |
  • 17 | a lifelong learner 18 |
    • 19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |

About

28 |

An ex-banking analyst turned entrepreneur, who is hugely influenced by the book “Built to Last”. Vincent was the co-founder of Primitus. He left his job at Citi to pursue success on his own terms. He is passionate about changing the world through great technology products. His dream is to build a lasting company and a global brand that can represent his hometown, Hong Kong. Vincent graduated from UCLA in 2007 with a degree in Economics.

29 |

Motto

30 |

“If you can dream it, you can do it. Always remember that this whole thing was started with a dream and a mouse.” - Walt Disney

31 |

Goals (short term)

32 |
    33 |
  • Become a full stack entrepreneur (design, engineering, growth)
    • 34 |
  • Become a good dad
    • 35 |
  • Share lessons and failures to help fellow entrepreneurs
    • 36 |
  • Spend more time on side projects
    • 37 |
  • Do more exercises
    • 38 |
39 |

Dreams (long term)

40 |
    41 |
  • Building a global brand which can represent my hometown
    • 42 |
  • Building a lasting company
    • 43 |
  • Building a company not only selling products but also dreams
    • 44 |
  • Help youngsters to make their dreams come true
    • 45 |
46 |

Role Models

47 |

48 | Walt Disney, Steve Jobs, Al Gore, Bill Campbell, Bill Gates, Charlie Munger, Howard Schultz, Jim Collins, Sheryl Sandberg, Warren Buffett, Cher Wang, Masayoshi Son, Tadashi Yanai, Reid Hoffman, Peter Thiel, Paul Graham, Seth Godin, Steve Blank, Jeff Bezos. 49 |

50 |

Favorite Companies

51 |

52 | Disney, Apple, Google, IKEA, Intuit, Procter & Gamble, Sony, Starbucks, Toyota, Pixar, Zappos, HubSpot, LinkedIn. 53 |

54 |

Favorite Startups

55 |

56 | GitHub, Buffer, Airbnb, Dropbox, Square, Atlassian, Automattic, Evernote, Squarespace, InVision, Pinterest, Intercom, FiftyThree, Slack. 57 |

58 |

Favorite Brands

59 |

60 | 37signals, Apple, Canon, Coca-Cola, Disney, innocent drinks, method, Nike, Muji, Patagonia. 61 |

62 |

63 | Photo Credit: Pixar's La Luna 64 |

65 |
66 |
67 |
68 |
69 |
70 | {% include subscribe.html %} 71 | {% include footer.html %} 72 | -------------------------------------------------------------------------------- /assets/css/_14139e58-9ebe-4c0f-beca-73a65bb01ce9/main.css: -------------------------------------------------------------------------------- 1 | /*****************************************************************************/ 2 | /* 3 | /* Common 4 | /* 5 | /*****************************************************************************/ 6 | /* Global Reset */ 7 | * { 8 | margin: 0; 9 | padding: 0; 10 | } 11 | 12 | html, body { 13 | height: 100%; 14 | } 15 | 16 | body { 17 | background-color: #FFF; 18 | font: 13.34px Helvetica, Arial, sans-serif; 19 | font-size: small; 20 | text-align: center; 21 | } 22 | 23 | h1, h2, h3, h4, h5, h6 { 24 | font-size: 100%; 25 | } 26 | 27 | h1 { 28 | margin-bottom: 1em; 29 | } 30 | 31 | p { 32 | margin: 1em 0; 33 | } 34 | 35 | a { 36 | color: #00a; 37 | } 38 | 39 | a:hover { 40 | color: #000; 41 | } 42 | 43 | a:visited { 44 | color: #a0a; 45 | } 46 | 47 | /*****************************************************************************/ 48 | /* 49 | /* Home 50 | /* 51 | /*****************************************************************************/ 52 | ul.posts { 53 | list-style-type: none; 54 | margin-bottom: 2em; 55 | } 56 | 57 | ul.posts li { 58 | line-height: 1.75em; 59 | } 60 | 61 | ul.posts span { 62 | color: #aaa; 63 | font-family: Monaco, "Courier New", monospace; 64 | font-size: 80%; 65 | } 66 | 67 | /*****************************************************************************/ 68 | /* 69 | /* Site 70 | /* 71 | /*****************************************************************************/ 72 | .site { 73 | font-size: 115%; 74 | text-align: justify; 75 | width: 42em; 76 | margin: 3em auto 2em; 77 | line-height: 1.5em; 78 | } 79 | 80 | .site .header a { 81 | font-weight: bold; 82 | text-decoration: none; 83 | } 84 | 85 | .site .header h1.title { 86 | display: inline-block; 87 | margin-bottom: 2em; 88 | } 89 | 90 | .site .header h1.title a { 91 | color: #a00; 92 | } 93 | 94 | .site .header h1.title a:hover { 95 | color: #000; 96 | } 97 | 98 | .site .header a.extra { 99 | color: #aaa; 100 | margin-left: 1em; 101 | } 102 | 103 | .site .header a.extra:hover { 104 | color: #000; 105 | } 106 | 107 | .site .meta { 108 | color: #aaa; 109 | } 110 | 111 | .site .footer { 112 | font-size: 80%; 113 | color: #666; 114 | border-top: 4px solid #eee; 115 | margin-top: 2em; 116 | overflow: hidden; 117 | } 118 | 119 | .site .footer .contact { 120 | float: left; 121 | margin-right: 3em; 122 | } 123 | 124 | .site .footer .contact a { 125 | color: #8085C1; 126 | } 127 | 128 | .site .footer .rss { 129 | margin-top: 1.1em; 130 | margin-right: -.2em; 131 | float: right; 132 | } 133 | 134 | .site .footer .rss img { 135 | border: 0; 136 | } 137 | 138 | /*****************************************************************************/ 139 | /* 140 | /* Posts 141 | /* 142 | /*****************************************************************************/ 143 | /* standard */ 144 | .post pre { 145 | border: 1px solid #ddd; 146 | background-color: #eef; 147 | padding: 0 .4em; 148 | } 149 | 150 | .post ul, .post ol { 151 | margin-left: 1.35em; 152 | } 153 | 154 | .post code { 155 | border: 1px solid #ddd; 156 | background-color: #eef; 157 | padding: 0 .2em; 158 | } 159 | 160 | .post pre code { 161 | border: none; 162 | } 163 | 164 | /* terminal */ 165 | .post pre.terminal { 166 | border: 1px solid #000; 167 | background-color: #333; 168 | color: #FFF; 169 | } 170 | 171 | .post pre.terminal code { 172 | background-color: #333; 173 | } 174 | -------------------------------------------------------------------------------- /assets/css/_14139e58-9ebe-4c0f-beca-73a65bb01ce9/main.min.css: -------------------------------------------------------------------------------- 1 | *{margin:0;padding:0}body,html{height:100%}body{background-color:#FFF;font:13.34px Helvetica,Arial,sans-serif;font-size:small;text-align:center}h1,h2,h3,h4,h5,h6{font-size:100%}h1{margin-bottom:1em}p{margin:1em 0}a{color:#00a}a:hover{color:#000}a:visited{color:#a0a}ul.posts{list-style-type:none;margin-bottom:2em}ul.posts li{line-height:1.75em}ul.posts span{color:#aaa;font-family:Monaco,"Courier New",monospace;font-size:80%}.site{font-size:115%;text-align:justify;width:42em;margin:3em auto 2em;line-height:1.5em}.site .header a{font-weight:700;text-decoration:none}.site .header h1.title{display:inline-block;margin-bottom:2em}.site .header h1.title a{color:#a00}.site .header h1.title a:hover{color:#000}.site .header a.extra{color:#aaa;margin-left:1em}.site .header a.extra:hover{color:#000}.site .meta{color:#aaa}.site .footer{font-size:80%;color:#666;border-top:4px solid #eee;margin-top:2em;overflow:hidden}.site .footer .contact{float:left;margin-right:3em}.site .footer .contact a{color:#8085C1}.site .footer .rss{margin-top:1.1em;margin-right:-.2em;float:right}.site .footer .rss img{border:0}.post pre{border:1px solid #ddd;background-color:#eef;padding:0 .4em}.post ol,.post ul{margin-left:1.35em}.post code{border:1px solid #ddd;background-color:#eef;padding:0 .2em}.post pre code{border:none}.post pre.terminal{border:1px solid #000;background-color:#333;color:#FFF}.post pre.terminal code{background-color:#333} -------------------------------------------------------------------------------- /assets/css/prism-line-numbers.css: -------------------------------------------------------------------------------- 1 | pre.line-numbers { 2 | position: relative; 3 | padding-left: 3.8em; 4 | counter-reset: linenumber; 5 | } 6 | 7 | pre.line-numbers > code { 8 | position: relative; 9 | } 10 | 11 | .line-numbers .line-numbers-rows { 12 | position: absolute; 13 | pointer-events: none; 14 | top: 0; 15 | font-size: 100%; 16 | left: -3.8em; 17 | width: 3em; /* works for line-numbers below 1000 lines */ 18 | letter-spacing: -1px; 19 | border-right: 1px solid #999; 20 | 21 | -webkit-user-select: none; 22 | -moz-user-select: none; 23 | -ms-user-select: none; 24 | user-select: none; 25 | 26 | } 27 | 28 | .line-numbers-rows > span { 29 | pointer-events: none; 30 | display: block; 31 | counter-increment: linenumber; 32 | } 33 | 34 | .line-numbers-rows > span:before { 35 | content: counter(linenumber); 36 | color: #999; 37 | display: block; 38 | padding-right: 0.8em; 39 | text-align: right; 40 | } -------------------------------------------------------------------------------- /assets/css/prism-okaidia.css: -------------------------------------------------------------------------------- 1 | /** 2 | * okaidia theme for JavaScript, CSS and HTML 3 | * Loosely based on Monokai textmate theme by http://www.monokai.nl/ 4 | * @author ocodia 5 | */ 6 | 7 | code[class*="language-"], 8 | pre[class*="language-"] { 9 | color: #f8f8f2; 10 | text-shadow: 0 1px rgba(0, 0, 0, 0.3); 11 | font-family: Consolas, Monaco, 'Andale Mono', monospace; 12 | direction: ltr; 13 | text-align: left; 14 | white-space: pre; 15 | word-spacing: normal; 16 | word-break: normal; 17 | line-height: 1.5; 18 | 19 | -moz-tab-size: 4; 20 | -o-tab-size: 4; 21 | tab-size: 4; 22 | 23 | -webkit-hyphens: none; 24 | -moz-hyphens: none; 25 | -ms-hyphens: none; 26 | hyphens: none; 27 | } 28 | 29 | /* Code blocks */ 30 | pre[class*="language-"] { 31 | padding: 1em; 32 | margin: .5em 0; 33 | overflow: auto; 34 | border-radius: 0.3em; 35 | } 36 | 37 | :not(pre) > code[class*="language-"], 38 | pre[class*="language-"] { 39 | background: #272822; 40 | } 41 | 42 | /* Inline code */ 43 | :not(pre) > code[class*="language-"] { 44 | padding: .1em; 45 | border-radius: .3em; 46 | } 47 | 48 | .token.comment, 49 | .token.prolog, 50 | .token.doctype, 51 | .token.cdata { 52 | color: slategray; 53 | } 54 | 55 | .token.punctuation { 56 | color: #f8f8f2; 57 | } 58 | 59 | .namespace { 60 | opacity: .7; 61 | } 62 | 63 | .token.property, 64 | .token.tag, 65 | .token.constant, 66 | .token.symbol, 67 | .token.deleted { 68 | color: #f92672; 69 | } 70 | 71 | .token.boolean, 72 | .token.number { 73 | color: #ae81ff; 74 | } 75 | 76 | .token.selector, 77 | .token.attr-name, 78 | .token.string, 79 | .token.char, 80 | .token.builtin, 81 | .token.inserted { 82 | color: #a6e22e; 83 | } 84 | 85 | .token.operator, 86 | .token.entity, 87 | .token.url, 88 | .language-css .token.string, 89 | .style .token.string, 90 | .token.variable { 91 | color: #f8f8f2; 92 | } 93 | 94 | .token.atrule, 95 | .token.attr-value, 96 | .token.function { 97 | color: #e6db74; 98 | } 99 | 100 | .token.keyword { 101 | color: #66d9ef; 102 | } 103 | 104 | .token.regex, 105 | .token.important { 106 | color: #fd971f; 107 | } 108 | 109 | .token.important, 110 | .token.bold { 111 | font-weight: bold; 112 | } 113 | .token.italic { 114 | font-style: italic; 115 | } 116 | 117 | .token.entity { 118 | cursor: help; 119 | } 120 | -------------------------------------------------------------------------------- /assets/images/buffer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /assets/images/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/assets/images/demo.png -------------------------------------------------------------------------------- /assets/images/dribbble--black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 22 | 23 | -------------------------------------------------------------------------------- /assets/images/facebook--black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 11 | 12 | -------------------------------------------------------------------------------- /assets/images/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 11 | 12 | -------------------------------------------------------------------------------- /assets/images/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/assets/images/favicon.ico -------------------------------------------------------------------------------- /assets/images/google+.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 20 | 21 | -------------------------------------------------------------------------------- /assets/images/heart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /assets/images/hero/mickey-1929.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/assets/images/hero/mickey-1929.jpg -------------------------------------------------------------------------------- /assets/images/hero/mickey-1940.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/assets/images/hero/mickey-1940.jpg -------------------------------------------------------------------------------- /assets/images/hero/mickey-comics.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/assets/images/hero/mickey-comics.jpg -------------------------------------------------------------------------------- /assets/images/hero/mickey-mouse.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/assets/images/hero/mickey-mouse.jpg -------------------------------------------------------------------------------- /assets/images/hero/mickey-tv.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/assets/images/hero/mickey-tv.jpg -------------------------------------------------------------------------------- /assets/images/hero/steamboat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/assets/images/hero/steamboat.jpg -------------------------------------------------------------------------------- /assets/images/hero/walt-disney.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/assets/images/hero/walt-disney.jpg -------------------------------------------------------------------------------- /assets/images/kiva--black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 10 | 13 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /assets/images/linkedin--black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /assets/images/linkedin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /assets/images/logo-black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 27 | 28 | 29 | 30 | 31 | 32 | 35 | 36 | 37 | 38 | 39 | 41 | 42 | 43 | 44 | 46 | 47 | 49 | 50 | 51 | 52 | 53 | 54 | 57 | 58 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /assets/images/logo-text-black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 14 | 15 | 16 | 19 | 20 | 21 | 23 | 24 | 28 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /assets/images/logo-text-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 14 | 15 | 16 | 19 | 20 | 21 | 23 | 24 | 28 | 30 | 32 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /assets/images/logo-white.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 27 | 28 | 29 | 30 | 31 | 32 | 35 | 36 | 37 | 38 | 39 | 41 | 42 | 43 | 44 | 46 | 47 | 49 | 50 | 51 | 52 | 53 | 54 | 57 | 58 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /assets/images/pinterest--black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 13 | 14 | -------------------------------------------------------------------------------- /assets/images/pocket.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 14 | 15 | -------------------------------------------------------------------------------- /assets/images/posts/walt-childhood.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/assets/images/posts/walt-childhood.jpg -------------------------------------------------------------------------------- /assets/images/rss--black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 11 | 12 | -------------------------------------------------------------------------------- /assets/images/thumbnail/mickey-1929.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/assets/images/thumbnail/mickey-1929.jpg -------------------------------------------------------------------------------- /assets/images/thumbnail/mickey-1940.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/assets/images/thumbnail/mickey-1940.jpg -------------------------------------------------------------------------------- /assets/images/thumbnail/mickey-comics.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/assets/images/thumbnail/mickey-comics.jpg -------------------------------------------------------------------------------- /assets/images/thumbnail/mickey-mouse.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/assets/images/thumbnail/mickey-mouse.jpg -------------------------------------------------------------------------------- /assets/images/thumbnail/mickey-tv.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/assets/images/thumbnail/mickey-tv.jpg -------------------------------------------------------------------------------- /assets/images/thumbnail/steamboat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/assets/images/thumbnail/steamboat.jpg -------------------------------------------------------------------------------- /assets/images/thumbnail/walt-disney.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vincentchan/mickey/7cb10416d3081b117b779d3e2f0260b57875f0c3/assets/images/thumbnail/walt-disney.jpg -------------------------------------------------------------------------------- /assets/images/twitter--black.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/images/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /assets/images/ycombinator.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 10 | 11 | -------------------------------------------------------------------------------- /assets/javascripts/imagesloaded.pkgd.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * imagesLoaded PACKAGED v3.1.8 3 | * JavaScript is all like "You images are done yet or what?" 4 | * MIT License 5 | */ 6 | 7 | (function(){function e(){}function t(e,t){for(var n=e.length;n--;)if(e[n].listener===t)return n;return-1}function n(e){return function(){return this[e].apply(this,arguments)}}var i=e.prototype,r=this,o=r.EventEmitter;i.getListeners=function(e){var t,n,i=this._getEvents();if("object"==typeof e){t={};for(n in i)i.hasOwnProperty(n)&&e.test(n)&&(t[n]=i[n])}else t=i[e]||(i[e]=[]);return t},i.flattenListeners=function(e){var t,n=[];for(t=0;e.length>t;t+=1)n.push(e[t].listener);return n},i.getListenersAsObject=function(e){var t,n=this.getListeners(e);return n instanceof Array&&(t={},t[e]=n),t||n},i.addListener=function(e,n){var i,r=this.getListenersAsObject(e),o="object"==typeof n;for(i in r)r.hasOwnProperty(i)&&-1===t(r[i],n)&&r[i].push(o?n:{listener:n,once:!1});return this},i.on=n("addListener"),i.addOnceListener=function(e,t){return this.addListener(e,{listener:t,once:!0})},i.once=n("addOnceListener"),i.defineEvent=function(e){return this.getListeners(e),this},i.defineEvents=function(e){for(var t=0;e.length>t;t+=1)this.defineEvent(e[t]);return this},i.removeListener=function(e,n){var i,r,o=this.getListenersAsObject(e);for(r in o)o.hasOwnProperty(r)&&(i=t(o[r],n),-1!==i&&o[r].splice(i,1));return this},i.off=n("removeListener"),i.addListeners=function(e,t){return this.manipulateListeners(!1,e,t)},i.removeListeners=function(e,t){return this.manipulateListeners(!0,e,t)},i.manipulateListeners=function(e,t,n){var i,r,o=e?this.removeListener:this.addListener,s=e?this.removeListeners:this.addListeners;if("object"!=typeof t||t instanceof RegExp)for(i=n.length;i--;)o.call(this,t,n[i]);else for(i in t)t.hasOwnProperty(i)&&(r=t[i])&&("function"==typeof r?o.call(this,i,r):s.call(this,i,r));return this},i.removeEvent=function(e){var t,n=typeof e,i=this._getEvents();if("string"===n)delete i[e];else if("object"===n)for(t in i)i.hasOwnProperty(t)&&e.test(t)&&delete i[t];else delete this._events;return this},i.removeAllListeners=n("removeEvent"),i.emitEvent=function(e,t){var n,i,r,o,s=this.getListenersAsObject(e);for(r in s)if(s.hasOwnProperty(r))for(i=s[r].length;i--;)n=s[r][i],n.once===!0&&this.removeListener(e,n.listener),o=n.listener.apply(this,t||[]),o===this._getOnceReturnValue()&&this.removeListener(e,n.listener);return this},i.trigger=n("emitEvent"),i.emit=function(e){var t=Array.prototype.slice.call(arguments,1);return this.emitEvent(e,t)},i.setOnceReturnValue=function(e){return this._onceReturnValue=e,this},i._getOnceReturnValue=function(){return this.hasOwnProperty("_onceReturnValue")?this._onceReturnValue:!0},i._getEvents=function(){return this._events||(this._events={})},e.noConflict=function(){return r.EventEmitter=o,e},"function"==typeof define&&define.amd?define("eventEmitter/EventEmitter",[],function(){return e}):"object"==typeof module&&module.exports?module.exports=e:this.EventEmitter=e}).call(this),function(e){function t(t){var n=e.event;return n.target=n.target||n.srcElement||t,n}var n=document.documentElement,i=function(){};n.addEventListener?i=function(e,t,n){e.addEventListener(t,n,!1)}:n.attachEvent&&(i=function(e,n,i){e[n+i]=i.handleEvent?function(){var n=t(e);i.handleEvent.call(i,n)}:function(){var n=t(e);i.call(e,n)},e.attachEvent("on"+n,e[n+i])});var r=function(){};n.removeEventListener?r=function(e,t,n){e.removeEventListener(t,n,!1)}:n.detachEvent&&(r=function(e,t,n){e.detachEvent("on"+t,e[t+n]);try{delete e[t+n]}catch(i){e[t+n]=void 0}});var o={bind:i,unbind:r};"function"==typeof define&&define.amd?define("eventie/eventie",o):e.eventie=o}(this),function(e,t){"function"==typeof define&&define.amd?define(["eventEmitter/EventEmitter","eventie/eventie"],function(n,i){return t(e,n,i)}):"object"==typeof exports?module.exports=t(e,require("wolfy87-eventemitter"),require("eventie")):e.imagesLoaded=t(e,e.EventEmitter,e.eventie)}(window,function(e,t,n){function i(e,t){for(var n in t)e[n]=t[n];return e}function r(e){return"[object Array]"===d.call(e)}function o(e){var t=[];if(r(e))t=e;else if("number"==typeof e.length)for(var n=0,i=e.length;i>n;n++)t.push(e[n]);else t.push(e);return t}function s(e,t,n){if(!(this instanceof s))return new s(e,t);"string"==typeof e&&(e=document.querySelectorAll(e)),this.elements=o(e),this.options=i({},this.options),"function"==typeof t?n=t:i(this.options,t),n&&this.on("always",n),this.getImages(),a&&(this.jqDeferred=new a.Deferred);var r=this;setTimeout(function(){r.check()})}function f(e){this.img=e}function c(e){this.src=e,v[e]=this}var a=e.jQuery,u=e.console,h=u!==void 0,d=Object.prototype.toString;s.prototype=new t,s.prototype.options={},s.prototype.getImages=function(){this.images=[];for(var e=0,t=this.elements.length;t>e;e++){var n=this.elements[e];"IMG"===n.nodeName&&this.addImage(n);var i=n.nodeType;if(i&&(1===i||9===i||11===i))for(var r=n.querySelectorAll("img"),o=0,s=r.length;s>o;o++){var f=r[o];this.addImage(f)}}},s.prototype.addImage=function(e){var t=new f(e);this.images.push(t)},s.prototype.check=function(){function e(e,r){return t.options.debug&&h&&u.log("confirm",e,r),t.progress(e),n++,n===i&&t.complete(),!0}var t=this,n=0,i=this.images.length;if(this.hasAnyBroken=!1,!i)return this.complete(),void 0;for(var r=0;i>r;r++){var o=this.images[r];o.on("confirm",e),o.check()}},s.prototype.progress=function(e){this.hasAnyBroken=this.hasAnyBroken||!e.isLoaded;var t=this;setTimeout(function(){t.emit("progress",t,e),t.jqDeferred&&t.jqDeferred.notify&&t.jqDeferred.notify(t,e)})},s.prototype.complete=function(){var e=this.hasAnyBroken?"fail":"done";this.isComplete=!0;var t=this;setTimeout(function(){if(t.emit(e,t),t.emit("always",t),t.jqDeferred){var n=t.hasAnyBroken?"reject":"resolve";t.jqDeferred[n](t)}})},a&&(a.fn.imagesLoaded=function(e,t){var n=new s(this,e,t);return n.jqDeferred.promise(a(this))}),f.prototype=new t,f.prototype.check=function(){var e=v[this.img.src]||new c(this.img.src);if(e.isConfirmed)return this.confirm(e.isLoaded,"cached was confirmed"),void 0;if(this.img.complete&&void 0!==this.img.naturalWidth)return this.confirm(0!==this.img.naturalWidth,"naturalWidth"),void 0;var t=this;e.on("confirm",function(e,n){return t.confirm(e.isLoaded,n),!0}),e.check()},f.prototype.confirm=function(e,t){this.isLoaded=e,this.emit("confirm",this,t)};var v={};return c.prototype=new t,c.prototype.check=function(){if(!this.isChecked){var e=new Image;n.bind(e,"load",this),n.bind(e,"error",this),e.src=this.src,this.isChecked=!0}},c.prototype.handleEvent=function(e){var t="on"+e.type;this[t]&&this[t](e)},c.prototype.onload=function(e){this.confirm(!0,"onload"),this.unbindProxyEvents(e)},c.prototype.onerror=function(e){this.confirm(!1,"onerror"),this.unbindProxyEvents(e)},c.prototype.confirm=function(e,t){this.isConfirmed=!0,this.isLoaded=e,this.emit("confirm",this,t)},c.prototype.unbindProxyEvents=function(e){n.unbind(e.target,"load",this),n.unbind(e.target,"error",this)},s}); -------------------------------------------------------------------------------- /assets/javascripts/plugins/prism-line-numbers.min.js: -------------------------------------------------------------------------------- 1 | Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode,s=/\s*\bline-numbers\b\s*/;if(t&&/pre/i.test(t.nodeName)&&(s.test(t.className)||s.test(e.element.className))){s.test(e.element.className)&&(e.element.className=e.element.className.replace(s,"")),s.test(t.className)||(t.className+=" line-numbers");var a,n=1+e.code.split("\n").length,l=new Array(n);l=l.join(""),a=document.createElement("span"),a.className="line-numbers-rows",a.innerHTML=l,t.hasAttribute("data-start")&&(t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)),e.element.appendChild(a)}}); -------------------------------------------------------------------------------- /feed.xml: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | 5 | 6 | {{ site.name | xml_escape }} 7 | {% if site.description %}{{ site.description | xml_escape }}{% endif %} 8 | {{ site.url }} 9 | 10 | {% for post in site.posts limit:10 %} 11 | 12 | {{ post.title | xml_escape }} 13 | {% if post.author.name %} 14 | {{ post.author.name | xml_escape }} 15 | {% endif %} 16 | {% if post.excerpt %} 17 | {{ post.excerpt | xml_escape }} 18 | {% else %} 19 | {{ post.content | xml_escape }} 20 | {% endif %} 21 | {{ post.date | date_to_rfc822 }} 22 | {{ site.url }}{{ post.url }} 23 | {{ site.url }}{{ post.url }} 24 | 25 | {% endfor %} 26 | 27 | 28 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | browserSync = require('browser-sync').create(), 3 | sass = require('gulp-sass'), 4 | autoprefixer = require('gulp-autoprefixer'), 5 | minifycss = require('gulp-minify-css'), 6 | rename = require('gulp-rename'), 7 | postcss = require('gulp-postcss'), 8 | imageResize = require('gulp-image-resize'), 9 | parallel = require("concurrent-transform"), 10 | os = require("os"), 11 | cp = require('child_process'); 12 | 13 | var messages = { 14 | jekyllBuild: 'Running: $ jekyll build' 15 | }; 16 | 17 | /** 18 | * Build the Jekyll Site 19 | */ 20 | gulp.task('jekyll-build', function (done) { 21 | browserSync.notify(messages.jekyllBuild); 22 | return cp.spawn('jekyll', ['build', '--config=_config.yml'], {stdio: 'inherit'}) 23 | .on('close', done); 24 | }); 25 | 26 | /** 27 | * Wait for jekyll-build, then launch the Server 28 | */ 29 | gulp.task('browser-sync', ['styles', 'jekyll-build'], function() { 30 | browserSync.init({ 31 | server: { 32 | baseDir: '_site' 33 | }, 34 | startPath: "/index.html" 35 | }); 36 | }); 37 | 38 | // To support opacity in IE 8 39 | 40 | var opacity = function(css) { 41 | css.eachDecl(function(decl, i) { 42 | if (decl.prop === 'opacity') { 43 | decl.parent.insertAfter(i, { 44 | prop: '-ms-filter', 45 | value: '"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + (parseFloat(decl.value) * 100) + ')"' 46 | }); 47 | } 48 | }); 49 | }; 50 | 51 | /** 52 | * Compile files from sass into both assets/css (for live injecting) and site (for future jekyll builds) 53 | */ 54 | gulp.task('styles', function() { 55 | return gulp.src('_scss/main.scss') 56 | .pipe(sass({ outputStyle: 'expanded' })) 57 | .pipe(autoprefixer({browsers: ['last 2 versions', 'Firefox ESR', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1']})) 58 | .pipe(postcss([opacity])) 59 | .pipe(gulp.dest('assets/css')) 60 | .pipe(rename({suffix: '.min'})) 61 | .pipe(minifycss()) 62 | .pipe(gulp.dest('assets/css')); 63 | }); 64 | 65 | /** 66 | * Automatically resize post feature images and turn them into thumbnails 67 | */ 68 | gulp.task("thumbnails", function () { 69 | gulp.src("assets/images/hero/*.{jpg,png}") 70 | .pipe(parallel( 71 | imageResize({ width : 350 }), 72 | os.cpus().length 73 | )) 74 | .pipe(gulp.dest("assets/images/thumbnail")); 75 | }); 76 | 77 | /** 78 | * Watch scss files for changes & recompile 79 | * Watch html/md files, run jekyll 80 | * Watch _site generation, reload BrowserSync 81 | */ 82 | gulp.task('watch', function() { 83 | gulp.watch('_scss/**/*.scss', ['styles']); 84 | gulp.watch('assets/images/hero/*.{jpg,png}', ['thumbnails']); 85 | gulp.watch(['*.html', 86 | '*.txt', 87 | 'about/**', 88 | '_posts/*.markdown', 89 | 'assets/javascripts/**/**.js', 90 | 'assets/images/**', 91 | 'assets/fonts/**', 92 | '_layouts/**', 93 | '_includes/**', 94 | 'assets/css/**' 95 | ], 96 | ['jekyll-build']); 97 | gulp.watch("_site/index.html").on('change', browserSync.reload); 98 | }); 99 | 100 | /** 101 | * Default task, running just `gulp` will compile the sass, 102 | * compile the jekyll site, launch BrowserSync & watch files. 103 | */ 104 | gulp.task('default', ['thumbnails', 'browser-sync', 'watch']); 105 | -------------------------------------------------------------------------------- /humans.txt: -------------------------------------------------------------------------------- 1 | __ _______________ __ ________ __ 2 | / |/ / _/ ____/ //_// ____/\ \/ / 3 | / /|_/ // // / / ,< / __/ \ / 4 | / / / // // /___/ /| |/ /___ / / 5 | /_/ /_/___/\____/_/ |_/_____/ /_/ 6 | 7 | The humans.txt file explains the technology, and graphic assets 8 | behind this site. 9 | 10 | _______________________________________________________________________________ 11 | 12 | PEOPLE 13 | 14 | This Jekyll theme was hand-crafted by: 15 | 16 | Vincent Chan 17 | Interaction design, visual design, content, web development 18 | http://www.twitter.com/vincentchan 19 | 20 | _______________________________________________________________________________ 21 | 22 | TECHNOLOGY 23 | 24 | Jekyll 25 | http://jekyllrb.com/ 26 | 27 | jQuery 28 | http://jquery.com/ 29 | 30 | imagesLoaded 31 | https://github.com/desandro/imagesloaded 32 | 33 | Sass 34 | http://sass-lang.com/ 35 | 36 | SUIT CSS (styling methodology) 37 | https://suitcss.github.io/ 38 | 39 | gulp.js 40 | http://gulpjs.com/ 41 | 42 | Prism (syntax highlighter) 43 | http://prismjs.com/ 44 | 45 | Browsersync 46 | http://www.browsersync.io/ 47 | 48 | Github 49 | https://github.com/ 50 | 51 | _______________________________________________________________________________ 52 | 53 | GRAPHIC ASSETS 54 | 55 | Roboto (font) 56 | https://www.google.com/fonts/specimen/Roboto 57 | 58 | PT Sans (font) 59 | https://www.google.com/fonts/specimen/PT+Sans 60 | 61 | Source Serif Pro (font) 62 | https://www.google.com/fonts/specimen/Source+Serif+Pro 63 | 64 | Entypo (icons) 65 | http://www.entypo.com/ 66 | 67 | Streamline (icons) 68 | http://www.streamlineicons.com/ 69 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | title: Mickey Theme for Jekyll 4 | --- 5 | 6 |
7 |
8 |
9 |

10 | {{ site.name }} 11 |

12 |
13 |
    14 |
  • 15 | a minimal theme for Jekyll 16 |
    • 17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
    26 | {% for post in site.posts %} 27 |
  • 28 |
    29 | 43 |
    {{ post.date | date_to_string }}
    44 |
    45 |
    • 46 | {% endfor %} 47 |
48 |
49 |
50 |
51 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Mickey", 3 | "version": "0.0.1", 4 | "description": "A minimal one-column, responsive theme for Jekyll", 5 | "homepage": "http://vincentchan.github.io/mickey", 6 | "author": "Vincent Chan", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/vincentchan" 10 | }, 11 | "devDependencies": { 12 | "browser-sync": "~2.9.7", 13 | "concurrent-transform": "^1.0.0", 14 | "gulp": "^3.9.0", 15 | "gulp-autoprefixer": "~3.0.2", 16 | "gulp-image-resize": "^0.6.0", 17 | "gulp-minify-css": "~1.2.1", 18 | "gulp-postcss": "~6.0.0", 19 | "gulp-rename": "~1.2.2", 20 | "gulp-sass": "^2.0.4" 21 | } 22 | } 23 | --------------------------------------------------------------------------------