├── .gitignore ├── Gemfile ├── Gemfile.lock ├── LICENSE ├── README.md ├── _config.yml ├── _includes ├── analytics.html ├── footer.html ├── head.html ├── header.html ├── icon-github.html ├── icon-github.svg ├── icon-twitter.html ├── icon-twitter.svg ├── metadata.json └── styles.scss ├── _layouts ├── default.html ├── page.html └── post.html ├── _posts ├── 2016-03-08-example-post.md └── 2016-03-13-my-new-post.md ├── _sass ├── _syntax-highlighting.scss └── bourbon │ ├── _bourbon-deprecated-upcoming.scss │ ├── _bourbon.scss │ ├── addons │ ├── _button.scss │ ├── _clearfix.scss │ ├── _directional-values.scss │ ├── _ellipsis.scss │ ├── _font-family.scss │ ├── _hide-text.scss │ ├── _html5-input-types.scss │ ├── _position.scss │ ├── _prefixer.scss │ ├── _retina-image.scss │ ├── _size.scss │ ├── _timing-functions.scss │ ├── _triangle.scss │ └── _word-wrap.scss │ ├── css3 │ ├── _animation.scss │ ├── _appearance.scss │ ├── _backface-visibility.scss │ ├── _background-image.scss │ ├── _background.scss │ ├── _border-image.scss │ ├── _border-radius.scss │ ├── _box-sizing.scss │ ├── _calc.scss │ ├── _columns.scss │ ├── _filter.scss │ ├── _flex-box.scss │ ├── _font-face.scss │ ├── _font-feature-settings.scss │ ├── _hidpi-media-query.scss │ ├── _hyphens.scss │ ├── _image-rendering.scss │ ├── _keyframes.scss │ ├── _linear-gradient.scss │ ├── _perspective.scss │ ├── _placeholder.scss │ ├── _radial-gradient.scss │ ├── _transform.scss │ ├── _transition.scss │ └── _user-select.scss │ ├── functions │ ├── _assign.scss │ ├── _color-lightness.scss │ ├── _flex-grid.scss │ ├── _golden-ratio.scss │ ├── _grid-width.scss │ ├── _modular-scale.scss │ ├── _px-to-em.scss │ ├── _px-to-rem.scss │ ├── _strip-units.scss │ ├── _tint-shade.scss │ ├── _transition-property-name.scss │ └── _unpack.scss │ ├── helpers │ ├── _convert-units.scss │ ├── _gradient-positions-parser.scss │ ├── _is-num.scss │ ├── _linear-angle-parser.scss │ ├── _linear-gradient-parser.scss │ ├── _linear-positions-parser.scss │ ├── _linear-side-corner-parser.scss │ ├── _radial-arg-parser.scss │ ├── _radial-gradient-parser.scss │ ├── _radial-positions-parser.scss │ ├── _render-gradients.scss │ ├── _shape-size-stripper.scss │ └── _str-to-num.scss │ └── settings │ ├── _asset-pipeline.scss │ ├── _prefixer.scss │ └── _px-to-em.scss ├── about.md ├── assets └── images │ ├── author.jpg │ ├── logo.jpg │ ├── screenshot.png │ └── speed.png ├── favicon.ico ├── feed.xml └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | _site 2 | .sass-cache 3 | .jekyll-metadata 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | gem 'jekyll' 4 | gem 'jekyll-paginate' 5 | gem 'jekyll-compose', group: [:jekyll_plugins] 6 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | addressable (2.5.0) 5 | public_suffix (~> 2.0, >= 2.0.2) 6 | colorator (1.1.0) 7 | ffi (1.9.14) 8 | forwardable-extended (2.6.0) 9 | jekyll (3.3.1) 10 | addressable (~> 2.4) 11 | colorator (~> 1.0) 12 | jekyll-sass-converter (~> 1.0) 13 | jekyll-watch (~> 1.1) 14 | kramdown (~> 1.3) 15 | liquid (~> 3.0) 16 | mercenary (~> 0.3.3) 17 | pathutil (~> 0.9) 18 | rouge (~> 1.7) 19 | safe_yaml (~> 1.0) 20 | jekyll-compose (0.5.0) 21 | jekyll (>= 3.0.0) 22 | jekyll-paginate (1.1.0) 23 | jekyll-sass-converter (1.5.0) 24 | sass (~> 3.4) 25 | jekyll-watch (1.5.0) 26 | listen (~> 3.0, < 3.1) 27 | kramdown (1.13.1) 28 | liquid (3.0.6) 29 | listen (3.0.8) 30 | rb-fsevent (~> 0.9, >= 0.9.4) 31 | rb-inotify (~> 0.9, >= 0.9.7) 32 | mercenary (0.3.6) 33 | pathutil (0.14.0) 34 | forwardable-extended (~> 2.6) 35 | public_suffix (2.0.4) 36 | rb-fsevent (0.9.8) 37 | rb-inotify (0.9.7) 38 | ffi (>= 0.5.0) 39 | rouge (1.11.1) 40 | safe_yaml (1.0.4) 41 | sass (3.4.23) 42 | 43 | PLATFORMS 44 | ruby 45 | 46 | DEPENDENCIES 47 | jekyll 48 | jekyll-compose 49 | jekyll-paginate 50 | 51 | BUNDLED WITH 52 | 1.11.2 53 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The Amplify for Jekyll theme is licensed under MIT License (MIT) 2 | 3 | Copyright (c) 2016 Adam Geitgey 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Amplify for Jekyll 2 | 3 | *A Jekyll html theme in the vague style of Medium.com built using Google AMP* 4 | 5 | Google's [Accelerated Mobile Pages Project](https://www.ampproject.org/) 6 | (a.k.a. "Google AMP" or Google ⚡) is an open-source project that defines rules 7 | for creating websites that load nearly instantly even on mobile devices with 8 | slow connections. 9 | 10 | Check out a live example of this theme at 11 | [http://ageitgey.github.io/amplify/](http://ageitgey.github.io/amplify/2016/03/08/example-post.html) 12 | or 13 | [via Google's CDN](https://cdn.ampproject.org/c/s/ageitgey.github.io/amplify/2016/03/08/example-post.html). 14 | 15 | ## Screenshot 16 | 17 | ![screenshot](/assets/images/screenshot.png) 18 | 19 | ## Why use Google AMP? 20 | 21 | There are two reasons to use Google AMP: 22 | 23 | First, it's really fast! An often cited claim (by Amazon, Yahoo, Walmart and 24 | others) is that every extra 100ms improvement in page load time increases 25 | incremental revenue by up to 1%. Your personal blog might not be selling 26 | anything, but why settle for a slow page and risk losing readers? 27 | 28 | Second, Google might feature your AMP page in Search Results! Google gives 29 | preferential treatment to AMP pages on Mobile Search. When it displays your 30 | page in the AMP search results widget, it will even serve your page through 31 | it's own CDN to make the page load even faster. It's similar to how 32 | [Facebook Instant Articles](https://instantarticles.fb.com/) works on the 33 | Facebook platform. 34 | 35 | ## How fast is this theme? 36 | 37 | To get a general idea of how this theme performs, let's compare this page 38 | hosted on Github vs. another static page hosted on Github. We can use 39 | https://facebook.github.io/react/ as a comparison page. I've also included 40 | https://jekyllrb.com/ as another point of comparison (it's also hosted on 41 | Github). 42 | 43 | Of course our page and these other pages have different 44 | layouts. But the main point is that they are typical static sites hosted 45 | on Github and are well-designed. So it should give us a rough idea of how 46 | other typical pages might perform. I'm not suggesting anything 47 | is wrong with these other pages. They are actually pretty fast! 48 | 49 | If you are on a fast connection, all these pages load about the same speed 50 | but our page renders the main content much faster: 51 | 52 | #### First page visit with no throttling 53 | 54 | | Page | DOMContentReady | Load | 55 | | ------------- |:-----------: | ------:| 56 | | https://facebook.github.io/react/ | 1.7s | 1.89s | 57 | | https://jekyllrb.com/ | 500ms | 909ms | 58 | | https://ageitgey.github.io/amplify/2016/03/08/example-post.html | 61ms! | 1.06s | 59 | 60 | #### Second page visit with no throttling 61 | 62 | | Page | DOMContentReady | Load | 63 | | ------------- |:-----------: | ------:| 64 | | https://facebook.github.io/react/ | 1.08s | 1.33s | 65 | | https://jekyllrb.com/ | 212ms | 486ms | 66 | | https://ageitgey.github.io/amplify/2016/03/08/example-post.html | 66ms! | 1.03s | 67 | 68 | You'll see the main content render much faster because AMP 69 | [doesn't allow anything in your page](https://www.ampproject.org/docs/get_started/technical_overview.html) 70 | that would block the page from rendering after the initial HTML loads. This means no external 71 | css, no custom js, etc. 72 | 73 | Here's how this looks to the user (as rendered by [WebPageTest](http://www.webpagetest.org/)): 74 | 75 | ![screenshot](/assets/images/speed.png) 76 | 77 | You can get sometimes get even faster speeds when your 78 | [page is served via Google's AMP CDN](https://cdn.ampproject.org/c/s/ageitgey.github.io/amplify/2016/03/08/example-post.html). 79 | But that's not always true depending the randomness of the internet and where 80 | you are connecting from. 81 | 82 | So there's some tiny benefit on a 100mbs wired connection. But optimization is much more 83 | important on a slow, high-latency mobile connection (i.e. most actual internet users in 2016). 84 | Let's try loading the page using the "Regular 2G (250kb/s, 300ms RT)" throttling setting in 85 | Chrome Dev Tools: 86 | 87 | #### First page visit with "Regular 2G" throttling 88 | 89 | | Page | DOMContentReady | Load | 90 | | ------------- |:-----------: | ------:| 91 | | https://facebook.github.io/react/ | 28.50s | 29.39s | 92 | | https://jekyllrb.com/ | 1.75s | 7.03s | 93 | | https://ageitgey.github.io/amplify/2016/03/08/example-post.html | 530ms! | 5.07s | 94 | 95 | #### Second page visit with "Regular 2G" throttling 96 | 97 | | Page | DOMContentReady | Load | 98 | | ------------- |:-----------: | ------:| 99 | | https://facebook.github.io/react/ | 2.02s | 2.55s | 100 | | https://jekyllrb.com/ | 392ms | 791ms | 101 | | https://ageitgey.github.io/amplify/2016/03/08/example-post.html | 385ms! | 1.64s | 102 | 103 | Even a horribly slow connection with high latency, the user will still see a page render in 104 | half a second. That's great! The difference between 385ms and 28s is the difference between 105 | someone reading your blog is skipping your blog. 106 | 107 | But notice that the Jekyll homepage still performs well on the second page load. Google AMP 108 | gives you a nice set of rules for making fast pages, but of course it isn't required to make 109 | a fast page. 110 | 111 | ## Getting Started 112 | 113 | To use this theme, it's just like using any other Jekyll template: 114 | 115 | *Step 1:* [Install Jekyll](https://jekyllrb.com/docs/installation/) 116 | 117 | *On windows* 118 | If on windows you will need the ruby devkit available here: [rubyinstaller](http://rubyinstaller.org/). 119 | 120 | *Step 2:* Clone this repo to your computer 121 | 122 | ```bash 123 | git clone git@github.com:ageitgey/amplify.git 124 | ``` 125 | 126 | *Step 3:* Run `gem install bundler; bundle install` inside the new `/amplify/` folder that was 127 | just created to install the required ruby dependencies. 128 | 129 | *Step 4:* Tweak `_config.yml`. 130 | 131 | Just fill in everything in the `# Site settings` section. 132 | You'll want to set your site's title, your name, your twitter username, etc. 133 | 134 | *Step 5:* Run `bundle exec jekyll serve` and then open 135 | [http://localhost:4000/](http://localhost:4000/) to see your site! 136 | 137 | *Step 6:* Publish your site 138 | [just like any other Jekyll site](https://jekyllrb.com/docs/deployment-methods/). 139 | 140 | ## Google AMP Limitations 141 | 142 | Google AMP sets many 143 | [strict limits on what you can include in your web pages](https://www.ampproject.org/docs/get_started/technical_overview.html). 144 | A few of these are worth talking about: 145 | 146 | *Limitation: All CSS must be inline (no external css files).* 147 | 148 | Because of this, the main css file for this site is in `_includes/styles.scss` 149 | instead of in the normal `css/` Jekyll folder. This css file is inlined 150 | into the header of every page via the special `scssify` filter in `_includes/head.html`. 151 | 152 | *Limitation: Size all resources statically* 153 | 154 | Every image you include in your page *must* have a height and width. This also 155 | applies to other things like embedding videos or other resources. Check below 156 | for more details. 157 | 158 | ## Writing Posts with Google AMP 159 | 160 | Writing posts works 161 | [just like it does normally in Jekyll](https://jekyllrb.com/docs/posts/) 162 | except when you want to include extra resources likes pictures, videos, 163 | embedded Twitter posts, etc. 164 | 165 | Google AMP has it's own set of special html tags for including content. You 166 | should use these instead of normal Markdown or HTML tags. 167 | 168 | The two you are are most likely to need are `` and ``: 169 | 170 | ### Images in your posts 171 | 172 | ``` 173 | 174 | ``` 175 | 176 | ### Youtube Videos in your posts 177 | 178 | ``` 179 | 180 | ``` 181 | 182 | ### Embedding other types of content 183 | 184 | The AMP Project provides helpers for many other types of content like audio, 185 | ads, Google Analytics, etc. 186 | 187 | * Built-in AMP tags: 188 | * https://github.com/ampproject/amphtml/blob/master/builtins/README.md 189 | 190 | * Extended AMP tags: 191 | * https://github.com/ampproject/amphtml/blob/master/extensions/README.md 192 | 193 | ## Validating your page with Google AMP 194 | 195 | Google AMP adds built-in validation logic to make sure your pages follow all 196 | the rules so they render as fast as possible. 197 | 198 | To check your page, just add `#development=1` to any url on your site and then 199 | check the javascript console in your browser. 200 | 201 | http://localhost:4000/#development=1 202 | 203 | You will either see a success message: 204 | 205 | ``` 206 | Powered by AMP ⚡ HTML – Version 1457112743399 207 | AMP validation successful. 208 | ``` 209 | 210 | Or you will see a list of errors to fix: 211 | 212 | ``` 213 | Powered by AMP ⚡ HTML – Version 1457112743399 214 | AMP validation had errors: 215 | The attribute 'style' may not appear in tag 'span' 216 | The attribute 'style' may not appear in tag 'div' 217 | ``` 218 | 219 | ## Enabling Google Analytics 220 | 221 | This theme supports simple [page tracking](https://developers.google.com/analytics/devguides/collection/amp-analytics/#page_tracking) with Google Analytics. 222 | 223 | To enable analytics : 224 | 225 | 1. Set your property ID in `_config.yml` 226 | 2. Uncomment the analytics include in `_layouts/default.html`. 227 | 3. Uncomment the analytics script in `_includes/head.html`. 228 | 229 | If you wish to track custom events or want to send custom data, please refer to [the documentation](https://developers.google.com/analytics/devguides/collection/amp-analytics/#event_tracking). 230 | 231 | ## Making Google serve your page 232 | 233 | Google will cache valid AMP pages if you link to them with one of these urls: 234 | 235 | `https://cdn.ampproject.org/c/s/` 236 | 237 | Or: 238 | 239 | `https://amp.gstatic.com/c/s/` 240 | 241 | But keep in mind these two limitations: 242 | 243 | 1. The caches don't refresh that often. So don't view these urls until your page 244 | is done! 245 | 2. Remove `/s` from both urls if your page isn't served over `https://`. 246 | 247 | ## Required Schema Data 248 | 249 | To actually get your page featured in Google search results, it needs to include 250 | a http://schema.org NewsArticle schema. See `_includes/metadata.json` for the 251 | version generated by default. You might want to tweak it. 252 | 253 | ## Credits 254 | 255 | This theme is inspired by 256 | [Mediator by Dirk Fabisch](https://github.com/dirkfabisch/mediator). I used some 257 | of the css and html from that theme as a starting point. Thanks! 258 | 259 | ## License 260 | 261 | MIT. See LICENSE file in repo. 262 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # Welcome to Amplified for Jekyll! 2 | # 3 | # This config file is meant for settings that affect your whole blog, values 4 | # which you are expected to set up once and rarely need to edit after that. 5 | # For technical reasons, this file is *NOT* reloaded automatically when you use 6 | # 'jekyll serve'. If you change this file, please restart the server process. 7 | 8 | # Site settings 9 | title: Awesome Site Title 10 | email: your-email@domain.com 11 | description: > 12 | Awesome site description here 13 | logo: "/assets/images/logo.jpg" 14 | baseurl: "" # the subpath of your site, e.g. /blog 15 | url: "http://yourdomain.com" # the base hostname & protocol for your site 16 | paginate: 5 # The number of posts to show per page on your homepage 17 | 18 | name: 'Your Name' 19 | bio: > 20 | Mea suas vituperatoribus et, virtute corpora quaestio cum ut. 21 | Ne solet nostrum complectitur pri, vis ut inani populo. 22 | author_image: "/assets/images/author.jpg" 23 | twitter_username: jekyllrb 24 | github_username: jekyll 25 | 26 | # Google Analytics 27 | analytics_id: "" 28 | 29 | # Build settings 30 | markdown: kramdown 31 | 32 | kramdown: 33 | parse_block_html: true 34 | 35 | gems: 36 | - jekyll-paginate 37 | -------------------------------------------------------------------------------- /_includes/analytics.html: -------------------------------------------------------------------------------- 1 | 2 | 15 | 16 | -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {% comment %} 5 | 6 | {% endcomment %} 7 | 8 | 9 | 10 | 11 | 12 | {% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %} 13 | 14 | 15 | 16 | 17 | 18 | 21 | 22 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /_includes/header.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
5 | Home 6 | {% for my_page in site.pages %} 7 | {% if my_page.title %} 8 | • {{ my_page.title }} 9 | {% endif %} 10 | {% endfor %} 11 |
12 |
13 | -------------------------------------------------------------------------------- /_includes/icon-github.html: -------------------------------------------------------------------------------- 1 | {% if include.username %} 2 | {% include icon-github.svg %}{{ include.username }} 3 | {% endif %} 4 | -------------------------------------------------------------------------------- /_includes/icon-github.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /_includes/icon-twitter.html: -------------------------------------------------------------------------------- 1 | {% if include.username %} 2 | {{ include.username }} 3 | {% endif %} 4 | -------------------------------------------------------------------------------- /_includes/icon-twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /_includes/metadata.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "@context": "http://schema.org", 4 | "@type": "NewsArticle", 5 | "mainEntityOfPage": "{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}", 6 | "headline": "{% if page.title %}{{ page.title | escape }}{% else %}{{ site.title | escape }}{% endif %}", 7 | "datePublished": "{% if page.date %}{{ page.date | date_to_xmlschema }}{% else %}{{ site.time | date_to_xmlschema }}{% endif %}", 8 | "dateModified": "{% if page.date %}{{ page.date | date_to_xmlschema }}{% else %}{{ site.time | date_to_xmlschema }}{% endif %}", 9 | "description": "{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}", 10 | "author": { 11 | "@type": "Person", 12 | "name": "{{ site.name }}" 13 | }, 14 | "publisher": { 15 | "@type": "Organization", 16 | "name": "{{ site.title }}", 17 | "logo": { 18 | "@type": "ImageObject", 19 | "url": "{{ site.logo | prepend: site.baseurl | prepend: site.url }}", 20 | "width": "60", 21 | "height": "60" 22 | } 23 | }, 24 | "image": { 25 | "@type": "ImageObject", 26 | "url": "{{ site.logo | prepend: site.baseurl | prepend: site.url }}", 27 | "height": "60", 28 | "width": "60" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /_includes/styles.scss: -------------------------------------------------------------------------------- 1 | @import 'bourbon/bourbon'; 2 | @import 'syntax-highlighting'; 3 | 4 | $grey-color: #828282; 5 | 6 | .icon { 7 | 8 | > svg { 9 | display: inline-block; 10 | width: 16px; 11 | height: 16px; 12 | vertical-align: middle; 13 | 14 | path { 15 | fill: $grey-color; 16 | } 17 | } 18 | } 19 | 20 | amp-img { 21 | background-color: grey; 22 | } 23 | 24 | .cf { 25 | @include clearfix; 26 | } 27 | 28 | $rs: 16px; 29 | 30 | $font-serif: Georgia,Cambria,"Times New Roman",Times,'Lora', serif; 31 | $font-sans: "Helvetica Neue", 'Open Sans', Arial, Helvetica, sans-serif; 32 | 33 | @mixin respond-to($breakpoint) { 34 | @media only screen and (max-width: $breakpoint + px) { 35 | @content; 36 | } 37 | } 38 | 39 | // Only needed for syntax highlighting 40 | %vertical-rhythm { 41 | margin-bottom: $rs; 42 | } 43 | 44 | main { 45 | display: block; 46 | } 47 | 48 | body { 49 | background-color: #fff; 50 | font-family: $font-sans; 51 | margin: 0; 52 | padding: 0; 53 | text-rendering: optimizeLegibility; 54 | -webkit-font-smoothing: antialiased; 55 | -moz-font-feature-settings: "liga=1, dlig=1"; 56 | -ms-font-feature-settings: "liga", "dlig"; 57 | -webkit-font-feature-settings: "liga", "dlig"; 58 | -o-font-feature-settings: "liga", "dlig"; 59 | font-feature-settings: "liga", "dlig"; 60 | } 61 | 62 | .site-header { 63 | position: relative; 64 | width: 100%; 65 | max-width: 700px; 66 | margin: 16px auto 0 auto; 67 | @include box-sizing(border-box); 68 | @include respond-to(800) { 69 | padding: 0 $rs * 1; 70 | } 71 | 72 | .page-links { 73 | display: block; 74 | position: absolute; 75 | top: 10px; 76 | right: $rs; 77 | font-weight: 200; 78 | font-style: normal; 79 | font-size: 18px; 80 | line-height: 30px; 81 | 82 | a { 83 | text-decoration: none; 84 | color: #999999; 85 | &:hover { 86 | color: #333333; 87 | } 88 | } 89 | } 90 | 91 | } 92 | 93 | .blog-header { 94 | width: 100%; 95 | max-width: 700px; 96 | margin: 0 auto; 97 | position: relative; 98 | padding: 0; 99 | @include box-sizing(border-box); 100 | 101 | .blog-title { 102 | margin-bottom: 8px; 103 | font-size: 50px; 104 | font-weight: 700; 105 | letter-spacing: -2px; 106 | outline: 0; 107 | line-height: 50px; 108 | word-break: break-word; 109 | color: #333333; 110 | } 111 | .blog-description { 112 | font-size: 28px; 113 | margin: 0 0 20px; 114 | padding: 0; 115 | line-height: 1.2; 116 | color: #666666; 117 | font-weight: 300; 118 | } 119 | } 120 | 121 | .content { 122 | width: 100%; 123 | max-width: 700px; 124 | margin: 25px auto 0 auto; 125 | @include box-sizing(border-box); 126 | @include respond-to(800) { 127 | padding: 0 $rs * 1; 128 | } 129 | 130 | article { 131 | padding: 20px 0; 132 | border-bottom: 1px solid #f2f2f0; 133 | &:last-child { 134 | border-bottom: 0px; 135 | } 136 | .post-title { 137 | letter-spacing: -0.02em; 138 | font-weight: 700; 139 | font-style: normal; 140 | display: block; 141 | font-size: 36px; 142 | line-height: 1.15; 143 | margin: 0 0; 144 | a { 145 | text-decoration: none; 146 | color: #333332; 147 | &:hover { 148 | text-decoration: none; 149 | } 150 | } 151 | } 152 | .post-excerpt { 153 | letter-spacing: -0.02em; 154 | font-weight: 300; 155 | font-style: normal; 156 | font-size: 20px; 157 | line-height: 1.59; 158 | color: #666665; 159 | } 160 | .post-meta { 161 | font-size: 14px; 162 | color: #b3b3b1; 163 | line-height: 30px; 164 | a { 165 | color: #b3b3b1; 166 | text-decoration: none; 167 | &:hover { 168 | text-decoration: underline; 169 | } 170 | } 171 | } 172 | } 173 | } 174 | 175 | .post-template .content { 176 | max-width: 700px; 177 | } 178 | 179 | .index-headline { 180 | border-top: 1px solid #dededc; 181 | margin: 0; 182 | padding: 16px 0; 183 | span { 184 | color: #b3b3b1; 185 | font-size: $rs / 8 * 5; 186 | text-transform: uppercase; 187 | letter-spacing: 1px; 188 | } 189 | } 190 | 191 | .pagination { 192 | text-align: center; 193 | padding: $rs * 1 0 0; 194 | font-size: $rs / 4 * 3; 195 | a { 196 | color: #999999; 197 | text-decoration: none; 198 | &:hover { 199 | color: #333333; 200 | } 201 | } 202 | } 203 | 204 | .site-footer { 205 | margin: 0 auto; 206 | padding: $rs * 3 0; 207 | width: 100%; 208 | max-width: 700px; 209 | font-size: $rs / 4 * 3; 210 | text-align: center; 211 | color: #999999; 212 | line-height: $rs * 1.1; 213 | a { 214 | color: #666666; 215 | text-decoration: none; 216 | &:hover { 217 | color: #333333; 218 | } 219 | } 220 | } 221 | 222 | .post { 223 | .post-meta { 224 | font-family: $font-sans; 225 | } 226 | .post-title { 227 | font-weight: 700; 228 | font-style: normal; 229 | letter-spacing: -0.04em; 230 | font-size: 50px; 231 | line-height: 1.1; 232 | color: #333332; 233 | margin-bottom: 50px; 234 | } 235 | .author-image { 236 | background-image: url({{ site.baseurl }}{{site.author_image}}); 237 | display: inline-block; 238 | width: 30px; 239 | height: 30px; 240 | line-height: 30px; 241 | margin-right: 8px; 242 | margin-bottom: -10px; 243 | float: left; 244 | background-size: cover; 245 | border-radius: 100%; 246 | text-indent: -9999px; 247 | } 248 | .post-meta-text { 249 | color: #b3b3b1; 250 | letter-spacing: -0.02em; 251 | font-weight: 400; 252 | font-style: normal; 253 | font-size: 14px; 254 | overflow: hidden; 255 | font-family: $font-sans; 256 | white-space: nowrap; 257 | text-overflow: ellipsis; 258 | } 259 | 260 | .post-content { 261 | width: 100%; 262 | font-family: $font-serif; 263 | color: #333333; 264 | h1, h2, h3 { 265 | font-family: $font-sans; 266 | } 267 | h3, h4, h5, h6 { 268 | letter-spacing: -0.02em; 269 | font-weight: 700; 270 | font-style: normal; 271 | font-size: 24px; 272 | line-height: 1.3; 273 | margin-top: 50px; 274 | margin-bottom: 0px; 275 | font-family: $font-sans; 276 | } 277 | h3 { 278 | font-size: 36px; 279 | } 280 | h2, h1 { 281 | letter-spacing: -0.02em; 282 | font-weight: 700; 283 | font-style: normal; 284 | font-size: 42px; 285 | line-height: 1.2; 286 | margin-top: 50px; 287 | margin-bottom: 0px; 288 | } 289 | table { 290 | border-collapse: collapse; 291 | } 292 | table, th, td { 293 | border: 1px solid black; 294 | padding: 5px; 295 | text-align:left; 296 | } 297 | p { 298 | font-weight: 400; 299 | font-style: normal; 300 | font-size: 22px; 301 | line-height: 1.59; 302 | letter-spacing: -.002em; 303 | margin-top: 30px; 304 | margin-bottom: 0; 305 | color: #333333; 306 | -webkit-hyphens: auto; 307 | -moz-hyphens: auto; 308 | hyphens: auto; 309 | } 310 | a { 311 | color: #333333; 312 | text-decoration: underline; 313 | } 314 | amp-img, amp-youtube { 315 | margin-top: 30px; 316 | } 317 | figure { 318 | margin: 0; 319 | padding: 0 0 30px; 320 | } 321 | figcaption { 322 | font-weight: 400; 323 | font-style: italic; 324 | font-size: 16px; 325 | line-height: 1.3; 326 | color: #666665; 327 | outline: 0; 328 | z-index: 300; 329 | text-align: center; 330 | } 331 | hr { 332 | border: 0; 333 | padding: 0; 334 | display: block; 335 | width: 15%; 336 | margin: 30px auto; 337 | border: 0px solid #dddddd; 338 | border-top: 1px solid #dddddd; 339 | } 340 | blockquote { 341 | margin: 0 0 30px; 342 | margin-left: -26px; 343 | border-left: 3px solid #57ad68; 344 | padding-left: 20px; 345 | p { 346 | letter-spacing: 0.01rem; 347 | font-weight: 400; 348 | mborder-left: 3px solid #57ad68; 349 | mpadding-left: 20px; 350 | mmargin-left: -26px; 351 | padding-bottom: 3px; 352 | } 353 | } 354 | ul, ol { 355 | padding: 0 0 30px; 356 | margin: 0; 357 | } 358 | li { 359 | padding: 0; 360 | font-weight: 400; 361 | font-style: normal; 362 | font-size: 23px; 363 | line-height: 30px; 364 | margin-left: 30px; 365 | margin-bottom: 12px; 366 | padding-top: 2px; 367 | p { 368 | padding: 0 0 golden-ratio(1rem, 1); 369 | } 370 | } 371 | ol li { 372 | list-style-type: decimal; 373 | } 374 | } 375 | .bottom-teaser { 376 | padding: 50px 0 0 0; 377 | font-family: $font-sans; 378 | hr { 379 | border: 0; 380 | padding: 0; 381 | display: block; 382 | width: 15%; 383 | margin: 16px 0 16px 100px; 384 | border: 0px solid #dddddd; 385 | border-top: 1px solid #dddddd; 386 | } 387 | .isLeft { 388 | float: left; 389 | width: 47%; 390 | @include box-sizing(border-box); 391 | @include respond-to(800) { 392 | width: 100%; 393 | padding-bottom: $rs * 2; 394 | } 395 | .bio { 396 | margin-top: 18px; 397 | margin-bottom: 18px; 398 | } 399 | .username { 400 | margin-left: 4px; 401 | margin-right: 18px; 402 | margin-bottom: 18px; 403 | } 404 | .index-headline { 405 | padding-bottom: 32px; 406 | } 407 | a { 408 | color: black; 409 | text-decoration: none; 410 | &:hover { 411 | color: #333333; 412 | text-decoration: underline; 413 | } 414 | } 415 | .author-image { 416 | display: block; 417 | width: 80px; 418 | height: 80px; 419 | float: left; 420 | background-size: cover; 421 | border-radius: 100%; 422 | text-indent: -9999px; 423 | } 424 | h4 { 425 | font-size: 18px; 426 | line-height: 1.1; 427 | font-weight: 700; 428 | padding: 0; 429 | margin: 0; 430 | padding-left: 100px; 431 | } 432 | p { 433 | font-size: 14px; 434 | line-height: 1.3; 435 | font-weight: 400; 436 | padding: 0; 437 | margin: 0; 438 | padding-left: 100px; 439 | &.published { 440 | color: #999999; 441 | } 442 | } 443 | } 444 | .isRight { 445 | float: right; 446 | width: 47%; 447 | @include box-sizing(border-box); 448 | @include respond-to(800) { 449 | width: 100%; 450 | } 451 | 452 | .index-headline { 453 | padding-bottom: 32px; 454 | } 455 | .site-footer { 456 | margin: 0; 457 | padding: 0; 458 | color: #333333; 459 | text-align: left; 460 | font-size: 14px; 461 | line-height: 1.3; 462 | color: #999999; 463 | a { 464 | color: #333333; 465 | text-decoration: none; 466 | &:hover { 467 | text-decoration: underline; 468 | } 469 | } 470 | .poweredby { 471 | display: block; 472 | padding-bottom: 18px; 473 | font-weight: 700; 474 | color: #333333; 475 | } 476 | } 477 | } 478 | } 479 | } 480 | 481 | .share { 482 | text-align: right; 483 | padding: 20px 0 0; 484 | a { 485 | text-decoration: none; 486 | color: #bbbbbb; 487 | padding-left: 12px; 488 | .hidden { 489 | display: none; 490 | } 491 | &:hover { 492 | color: #333333; 493 | } 494 | } 495 | } 496 | 497 | 498 | pre, 499 | code { 500 | font-size: 15px; 501 | border: 1px solid #e8e8e8; 502 | border-radius: 3px; 503 | background-color: #eeeeff; 504 | } 505 | 506 | code { 507 | padding: 1px 5px; 508 | } 509 | 510 | pre { 511 | padding: 8px 12px; 512 | overflow-x: scroll; 513 | > code { 514 | border: 0; 515 | padding-right: 0; 516 | padding-left: 0; 517 | } 518 | } 519 | 520 | .pagination .disabled { 521 | opacity: 0; 522 | } 523 | -------------------------------------------------------------------------------- /_layouts/default.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | {% include head.html %} 4 | 5 | {% include header.html %} 6 | 7 | {{ content }} 8 | 9 | {% comment %} 10 | {% include analytics.html %} 11 | {% endcomment %} 12 | 13 | 14 | -------------------------------------------------------------------------------- /_layouts/page.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
5 |
6 |
7 |

{{ page.title }}

8 |
9 |
10 | 11 | {{content}} 12 |
13 |
14 |
15 | 16 | {% include footer.html %} 17 | -------------------------------------------------------------------------------- /_layouts/post.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 |
5 |
6 |
7 |

{{ page.title }}

8 |
9 | 10 |
11 | 12 | {{content}} 13 |
14 | 22 |
23 |
24 |
Written by
25 |
26 |
27 |

{{ site.name }}

28 |

{{site.bio}}

29 | 30 |

31 | 32 | {% if site.github_username %} 33 | {% include icon-github.html username=site.github_username %} 34 | {% endif %} 35 | 36 | 37 | 38 | {% if site.twitter_username %} 39 | {% include icon-twitter.html username=site.twitter_username %} 40 | {% endif %} 41 | 42 |

43 |
44 |

Published

45 |
46 |
47 |
48 |
Supported by
49 | 56 |
57 |
58 |
59 |
60 | -------------------------------------------------------------------------------- /_posts/2016-03-08-example-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: Ea eam nibh persecuti, partem habemus nominavi 4 | --- 5 | 6 | At labitur probatus eum, qui modo idque partem ne, ea has oratio sanctus cotidieque. Dicta persecuti sit ex. Discere facilis recteque sit no, in eripuit volumus adversarium vim. Ad sed meis nulla accusata. Ex posse accusam maluisset mei, id vix ignota cetero inimicus. 7 | 8 | > Nec amet pericula dissentiet... 9 | > 10 | > Nam liber tritani ei, urbanitas tincidunt usu et. Odio voluptua gubergren at cum. An porro mucius tibique nam, cu usu everti dignissim assueverit. Docendi patrioque constituto te sit. Qui lorem soluta ea, commune deserunt sed id. Accusam commune cotidieque his ea. 11 | 12 | Pro hinc copiosae an, ad ius salutandi expetendis. Quo suavitate intellegat forensibus an. Sonet meliore consetetur te sea, in eam decore utroque, dicat verear et sit. Pro aperiam pertinax splendide id, IUS STET ELEIFEND INTELLEGAM ID. 13 | 14 | 15 | 16 | Ea ullamcorper intellegebat pri! 17 | 18 | ### Vix cu alienum evertitur 19 | 20 | Mea suas vituperatoribus et, virtute corpora quaestio cum ut. Ne solet nostrum complectitur pri, vis ut inani populo. Ad eligendi vituperata sadipscing pro, ad mea modo meis philosophia, an eos consul impedit qualisque. Eruditi reprimique id eum, in tincidunt percipitur vis. 21 | 22 | 23 | 24 | Ne ius nominavi verterem. Principes voluptaria pro at. Sint mediocrem cum ea, his purto dicat scaevola ad. Per quem magna gubergren id, pri in noluisse salutatus imperdiet. In postea consequat percipitur vis, nam postea commodo lobortis an, ut atqui antiopam eloquentiam eum. 25 | 26 | > Erat officiis probatus eam ea, nibh legere insolens ad sit. Nec alii dicam ad, cibo regione per no. Verear invenire ut usu, nec mazim euripidis in. Molestie placerat id quo, quo dissentias complectitur ex. Ex probatus principes efficiantur pro, possit perfecto ut eum. Vix ei summo perpetua, enim adhuc vix ei, sed in homero delicata periculis. Praesent intellegat qui ne. 27 | -------------------------------------------------------------------------------- /_posts/2016-03-13-my-new-post.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: post 3 | title: My New Post 4 | --- 5 | 6 | Lorem ipsum dolor sit amet, consectetur adipiscing elit! 7 | 8 | 9 | 10 | Nulla dapibus vestibulum ligula in sodales. Phasellus eu metus quam. Sed id varius diam. Morbi pellentesque lorem vitae ex commodo, sed dapibus ex dignissim. Etiam facilisis pellentesque gravida. Sed tempus diam sed odio tempor, tristique elementum erat condimentum. Ut volutpat dui ex, a auctor dolor pretium eget. 11 | 12 | Vivamus nec mauris suscipit enim viverra tristique ut eget risus. Vestibulum ullamcorper at sem eu sodales. Praesent felis tellus, condimentum vitae purus id, consectetur interdum urna. Pellentesque laoreet non arcu volutpat euismod. Suspendisse sed enim non ex interdum sodales. Quisque vitae vestibulum turpis. Aenean nec est dolor. 13 | 14 | > Pellentesque quis mi at erat iaculis cursus. Phasellus ligula neque, pulvinar sed malesuada id, feugiat ac magna. Proin sed scelerisque metus. Pellentesque mi augue, egestas nec ante a, faucibus ullamcorper enim. Sed nisi felis, rutrum imperdiet aliquam nec, placerat vel odio. Nulla quis urna ut risus aliquam tempor. 15 | 16 | 17 | 18 | Nulla mi risus, lobortis quis lectus vel, gravida eleifend lacus. Proin mattis odio elit, nec vehicula diam varius vitae. Nunc a ipsum at justo rhoncus mattis. Proin auctor lorem quis libero viverra aliquam. Suspendisse quis tristique sapien. Integer eu felis vel orci dignissim suscipit pharetra vitae nisl. Ut viverra sed enim quis pretium. Etiam auctor a ante sed pharetra. 19 | -------------------------------------------------------------------------------- /_sass/_syntax-highlighting.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Syntax highlighting styles 3 | */ 4 | .highlight { 5 | background: #fff; 6 | 7 | .highlighter-rouge & { 8 | background: #eef; 9 | } 10 | 11 | .c { color: #998; font-style: italic } // Comment 12 | .err { color: #a61717; background-color: #e3d2d2 } // Error 13 | .k { font-weight: bold } // Keyword 14 | .o { font-weight: bold } // Operator 15 | .cm { color: #998; font-style: italic } // Comment.Multiline 16 | .cp { color: #999; font-weight: bold } // Comment.Preproc 17 | .c1 { color: #998; font-style: italic } // Comment.Single 18 | .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special 19 | .gd { color: #000; background-color: #fdd } // Generic.Deleted 20 | .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific 21 | .ge { font-style: italic } // Generic.Emph 22 | .gr { color: #a00 } // Generic.Error 23 | .gh { color: #999 } // Generic.Heading 24 | .gi { color: #000; background-color: #dfd } // Generic.Inserted 25 | .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific 26 | .go { color: #888 } // Generic.Output 27 | .gp { color: #555 } // Generic.Prompt 28 | .gs { font-weight: bold } // Generic.Strong 29 | .gu { color: #aaa } // Generic.Subheading 30 | .gt { color: #a00 } // Generic.Traceback 31 | .kc { font-weight: bold } // Keyword.Constant 32 | .kd { font-weight: bold } // Keyword.Declaration 33 | .kp { font-weight: bold } // Keyword.Pseudo 34 | .kr { font-weight: bold } // Keyword.Reserved 35 | .kt { color: #458; font-weight: bold } // Keyword.Type 36 | .m { color: #099 } // Literal.Number 37 | .s { color: #d14 } // Literal.String 38 | .na { color: #008080 } // Name.Attribute 39 | .nb { color: #0086B3 } // Name.Builtin 40 | .nc { color: #458; font-weight: bold } // Name.Class 41 | .no { color: #008080 } // Name.Constant 42 | .ni { color: #800080 } // Name.Entity 43 | .ne { color: #900; font-weight: bold } // Name.Exception 44 | .nf { color: #900; font-weight: bold } // Name.Function 45 | .nn { color: #555 } // Name.Namespace 46 | .nt { color: #000080 } // Name.Tag 47 | .nv { color: #008080 } // Name.Variable 48 | .ow { font-weight: bold } // Operator.Word 49 | .w { color: #bbb } // Text.Whitespace 50 | .mf { color: #099 } // Literal.Number.Float 51 | .mh { color: #099 } // Literal.Number.Hex 52 | .mi { color: #099 } // Literal.Number.Integer 53 | .mo { color: #099 } // Literal.Number.Oct 54 | .sb { color: #d14 } // Literal.String.Backtick 55 | .sc { color: #d14 } // Literal.String.Char 56 | .sd { color: #d14 } // Literal.String.Doc 57 | .s2 { color: #d14 } // Literal.String.Double 58 | .se { color: #d14 } // Literal.String.Escape 59 | .sh { color: #d14 } // Literal.String.Heredoc 60 | .si { color: #d14 } // Literal.String.Interpol 61 | .sx { color: #d14 } // Literal.String.Other 62 | .sr { color: #009926 } // Literal.String.Regex 63 | .s1 { color: #d14 } // Literal.String.Single 64 | .ss { color: #990073 } // Literal.String.Symbol 65 | .bp { color: #999 } // Name.Builtin.Pseudo 66 | .vc { color: #008080 } // Name.Variable.Class 67 | .vg { color: #008080 } // Name.Variable.Global 68 | .vi { color: #008080 } // Name.Variable.Instance 69 | .il { color: #099 } // Literal.Number.Integer.Long 70 | } 71 | -------------------------------------------------------------------------------- /_sass/bourbon/_bourbon-deprecated-upcoming.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // These mixins/functions are deprecated 3 | // They will be removed in the next MAJOR version release 4 | //************************************************************************// 5 | @mixin inline-block { 6 | display: inline-block; 7 | @warn "inline-block mixin is deprecated and will be removed in the next major version release"; 8 | } 9 | -------------------------------------------------------------------------------- /_sass/bourbon/_bourbon.scss: -------------------------------------------------------------------------------- 1 | // Settings 2 | @import "settings/prefixer"; 3 | @import "settings/px-to-em"; 4 | @import "settings/asset-pipeline"; 5 | 6 | // Custom Helpers 7 | @import "helpers/convert-units"; 8 | @import "helpers/gradient-positions-parser"; 9 | @import "helpers/is-num"; 10 | @import "helpers/linear-angle-parser"; 11 | @import "helpers/linear-gradient-parser"; 12 | @import "helpers/linear-positions-parser"; 13 | @import "helpers/linear-side-corner-parser"; 14 | @import "helpers/radial-arg-parser"; 15 | @import "helpers/radial-positions-parser"; 16 | @import "helpers/radial-gradient-parser"; 17 | @import "helpers/render-gradients"; 18 | @import "helpers/shape-size-stripper"; 19 | @import "helpers/str-to-num"; 20 | 21 | // Custom Functions 22 | @import "functions/assign"; 23 | @import "functions/color-lightness"; 24 | @import "functions/flex-grid"; 25 | @import "functions/golden-ratio"; 26 | @import "functions/grid-width"; 27 | @import "functions/modular-scale"; 28 | @import "functions/px-to-em"; 29 | @import "functions/px-to-rem"; 30 | @import "functions/strip-units"; 31 | @import "functions/tint-shade"; 32 | @import "functions/transition-property-name"; 33 | @import "functions/unpack"; 34 | 35 | // CSS3 Mixins 36 | @import "css3/animation"; 37 | @import "css3/appearance"; 38 | @import "css3/backface-visibility"; 39 | @import "css3/background"; 40 | @import "css3/background-image"; 41 | @import "css3/border-image"; 42 | @import "css3/border-radius"; 43 | @import "css3/box-sizing"; 44 | @import "css3/calc"; 45 | @import "css3/columns"; 46 | @import "css3/filter"; 47 | @import "css3/flex-box"; 48 | @import "css3/font-face"; 49 | @import "css3/font-feature-settings"; 50 | @import "css3/hyphens"; 51 | @import "css3/hidpi-media-query"; 52 | @import "css3/image-rendering"; 53 | @import "css3/keyframes"; 54 | @import "css3/linear-gradient"; 55 | @import "css3/perspective"; 56 | @import "css3/radial-gradient"; 57 | @import "css3/transform"; 58 | @import "css3/transition"; 59 | @import "css3/user-select"; 60 | @import "css3/placeholder"; 61 | 62 | // Addons & other mixins 63 | @import "addons/button"; 64 | @import "addons/clearfix"; 65 | @import "addons/directional-values"; 66 | @import "addons/ellipsis"; 67 | @import "addons/font-family"; 68 | @import "addons/hide-text"; 69 | @import "addons/html5-input-types"; 70 | @import "addons/position"; 71 | @import "addons/prefixer"; 72 | @import "addons/retina-image"; 73 | @import "addons/size"; 74 | @import "addons/timing-functions"; 75 | @import "addons/triangle"; 76 | @import "addons/word-wrap"; 77 | 78 | // Soon to be deprecated Mixins 79 | @import "bourbon-deprecated-upcoming"; 80 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_button.scss: -------------------------------------------------------------------------------- 1 | @mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) { 2 | 3 | @if type-of($style) == string and type-of($base-color) == color { 4 | @include buttonstyle($style, $base-color, $text-size, $padding); 5 | } 6 | 7 | @if type-of($style) == string and type-of($base-color) == number { 8 | $padding: $text-size; 9 | $text-size: $base-color; 10 | $base-color: #4294f0; 11 | 12 | @if $padding == inherit { 13 | $padding: 7px 18px; 14 | } 15 | 16 | @include buttonstyle($style, $base-color, $text-size, $padding); 17 | } 18 | 19 | @if type-of($style) == color and type-of($base-color) == color { 20 | $base-color: $style; 21 | $style: simple; 22 | @include buttonstyle($style, $base-color, $text-size, $padding); 23 | } 24 | 25 | @if type-of($style) == color and type-of($base-color) == number { 26 | $padding: $text-size; 27 | $text-size: $base-color; 28 | $base-color: $style; 29 | $style: simple; 30 | 31 | @if $padding == inherit { 32 | $padding: 7px 18px; 33 | } 34 | 35 | @include buttonstyle($style, $base-color, $text-size, $padding); 36 | } 37 | 38 | @if type-of($style) == number { 39 | $padding: $base-color; 40 | $text-size: $style; 41 | $base-color: #4294f0; 42 | $style: simple; 43 | 44 | @if $padding == #4294f0 { 45 | $padding: 7px 18px; 46 | } 47 | 48 | @include buttonstyle($style, $base-color, $text-size, $padding); 49 | } 50 | 51 | &:disabled { 52 | opacity: 0.5; 53 | cursor: not-allowed; 54 | } 55 | } 56 | 57 | 58 | // Selector Style Button 59 | //************************************************************************// 60 | @mixin buttonstyle($type, $b-color, $t-size, $pad) { 61 | // Grayscale button 62 | @if $type == simple and $b-color == grayscale($b-color) { 63 | @include simple($b-color, true, $t-size, $pad); 64 | } 65 | 66 | @if $type == shiny and $b-color == grayscale($b-color) { 67 | @include shiny($b-color, true, $t-size, $pad); 68 | } 69 | 70 | @if $type == pill and $b-color == grayscale($b-color) { 71 | @include pill($b-color, true, $t-size, $pad); 72 | } 73 | 74 | @if $type == flat and $b-color == grayscale($b-color) { 75 | @include flat($b-color, true, $t-size, $pad); 76 | } 77 | 78 | // Colored button 79 | @if $type == simple { 80 | @include simple($b-color, false, $t-size, $pad); 81 | } 82 | 83 | @else if $type == shiny { 84 | @include shiny($b-color, false, $t-size, $pad); 85 | } 86 | 87 | @else if $type == pill { 88 | @include pill($b-color, false, $t-size, $pad); 89 | } 90 | 91 | @else if $type == flat { 92 | @include flat($b-color, false, $t-size, $pad); 93 | } 94 | } 95 | 96 | 97 | // Simple Button 98 | //************************************************************************// 99 | @mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { 100 | $color: hsl(0, 0, 100%); 101 | $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); 102 | $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); 103 | $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); 104 | $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); 105 | 106 | @if is-light($base-color) { 107 | $color: hsl(0, 0, 20%); 108 | $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); 109 | } 110 | 111 | @if $grayscale == true { 112 | $border: grayscale($border); 113 | $inset-shadow: grayscale($inset-shadow); 114 | $stop-gradient: grayscale($stop-gradient); 115 | $text-shadow: grayscale($text-shadow); 116 | } 117 | 118 | border: 1px solid $border; 119 | border-radius: 3px; 120 | box-shadow: inset 0 1px 0 0 $inset-shadow; 121 | color: $color; 122 | display: inline-block; 123 | font-size: $textsize; 124 | font-weight: bold; 125 | @include linear-gradient ($base-color, $stop-gradient); 126 | padding: $padding; 127 | text-decoration: none; 128 | text-shadow: 0 1px 0 $text-shadow; 129 | background-clip: padding-box; 130 | 131 | &:hover:not(:disabled) { 132 | $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); 133 | $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); 134 | $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); 135 | 136 | @if $grayscale == true { 137 | $base-color-hover: grayscale($base-color-hover); 138 | $inset-shadow-hover: grayscale($inset-shadow-hover); 139 | $stop-gradient-hover: grayscale($stop-gradient-hover); 140 | } 141 | 142 | box-shadow: inset 0 1px 0 0 $inset-shadow-hover; 143 | cursor: pointer; 144 | @include linear-gradient ($base-color-hover, $stop-gradient-hover); 145 | } 146 | 147 | &:active:not(:disabled), 148 | &:focus:not(:disabled) { 149 | $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); 150 | $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); 151 | 152 | @if $grayscale == true { 153 | $border-active: grayscale($border-active); 154 | $inset-shadow-active: grayscale($inset-shadow-active); 155 | } 156 | 157 | border: 1px solid $border-active; 158 | box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active; 159 | } 160 | } 161 | 162 | 163 | // Shiny Button 164 | //************************************************************************// 165 | @mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { 166 | $color: hsl(0, 0, 100%); 167 | $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); 168 | $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122); 169 | $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); 170 | $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); 171 | $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); 172 | $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114); 173 | $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); 174 | 175 | @if is-light($base-color) { 176 | $color: hsl(0, 0, 20%); 177 | $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); 178 | } 179 | 180 | @if $grayscale == true { 181 | $border: grayscale($border); 182 | $border-bottom: grayscale($border-bottom); 183 | $fourth-stop: grayscale($fourth-stop); 184 | $inset-shadow: grayscale($inset-shadow); 185 | $second-stop: grayscale($second-stop); 186 | $text-shadow: grayscale($text-shadow); 187 | $third-stop: grayscale($third-stop); 188 | } 189 | 190 | border: 1px solid $border; 191 | border-bottom: 1px solid $border-bottom; 192 | border-radius: 5px; 193 | box-shadow: inset 0 1px 0 0 $inset-shadow; 194 | color: $color; 195 | display: inline-block; 196 | font-size: $textsize; 197 | font-weight: bold; 198 | @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); 199 | padding: $padding; 200 | text-align: center; 201 | text-decoration: none; 202 | text-shadow: 0 -1px 1px $text-shadow; 203 | 204 | &:hover:not(:disabled) { 205 | $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); 206 | $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); 207 | $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); 208 | $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63); 209 | 210 | @if $grayscale == true { 211 | $first-stop-hover: grayscale($first-stop-hover); 212 | $second-stop-hover: grayscale($second-stop-hover); 213 | $third-stop-hover: grayscale($third-stop-hover); 214 | $fourth-stop-hover: grayscale($fourth-stop-hover); 215 | } 216 | 217 | cursor: pointer; 218 | @include linear-gradient(top, $first-stop-hover 0%, 219 | $second-stop-hover 50%, 220 | $third-stop-hover 50%, 221 | $fourth-stop-hover 100%); 222 | } 223 | 224 | &:active:not(:disabled), 225 | &:focus:not(:disabled) { 226 | $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); 227 | 228 | @if $grayscale == true { 229 | $inset-shadow-active: grayscale($inset-shadow-active); 230 | } 231 | 232 | box-shadow: inset 0 0 20px 0 $inset-shadow-active; 233 | } 234 | } 235 | 236 | 237 | // Pill Button 238 | //************************************************************************// 239 | @mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { 240 | $color: hsl(0, 0, 100%); 241 | $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); 242 | $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); 243 | $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); 244 | $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); 245 | $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); 246 | $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); 247 | 248 | @if is-light($base-color) { 249 | $color: hsl(0, 0, 20%); 250 | $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); 251 | } 252 | 253 | @if $grayscale == true { 254 | $border-bottom: grayscale($border-bottom); 255 | $border-sides: grayscale($border-sides); 256 | $border-top: grayscale($border-top); 257 | $inset-shadow: grayscale($inset-shadow); 258 | $stop-gradient: grayscale($stop-gradient); 259 | $text-shadow: grayscale($text-shadow); 260 | } 261 | 262 | border: 1px solid $border-top; 263 | border-color: $border-top $border-sides $border-bottom; 264 | border-radius: 16px; 265 | box-shadow: inset 0 1px 0 0 $inset-shadow; 266 | color: $color; 267 | display: inline-block; 268 | font-size: $textsize; 269 | font-weight: normal; 270 | line-height: 1; 271 | @include linear-gradient ($base-color, $stop-gradient); 272 | padding: $padding; 273 | text-align: center; 274 | text-decoration: none; 275 | text-shadow: 0 -1px 1px $text-shadow; 276 | background-clip: padding-box; 277 | 278 | &:hover:not(:disabled) { 279 | $base-color-hover: adjust-color($base-color, $lightness: -4.5%); 280 | $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); 281 | $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); 282 | $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); 283 | $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%); 284 | $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); 285 | $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); 286 | 287 | @if $grayscale == true { 288 | $base-color-hover: grayscale($base-color-hover); 289 | $border-bottom: grayscale($border-bottom); 290 | $border-sides: grayscale($border-sides); 291 | $border-top: grayscale($border-top); 292 | $inset-shadow-hover: grayscale($inset-shadow-hover); 293 | $stop-gradient-hover: grayscale($stop-gradient-hover); 294 | $text-shadow-hover: grayscale($text-shadow-hover); 295 | } 296 | 297 | border: 1px solid $border-top; 298 | border-color: $border-top $border-sides $border-bottom; 299 | box-shadow: inset 0 1px 0 0 $inset-shadow-hover; 300 | cursor: pointer; 301 | @include linear-gradient ($base-color-hover, $stop-gradient-hover); 302 | text-shadow: 0 -1px 1px $text-shadow-hover; 303 | background-clip: padding-box; 304 | } 305 | 306 | &:active:not(:disabled), 307 | &:focus:not(:disabled) { 308 | $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); 309 | $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); 310 | $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); 311 | $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); 312 | $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); 313 | 314 | @if $grayscale == true { 315 | $active-color: grayscale($active-color); 316 | $border-active: grayscale($border-active); 317 | $border-bottom-active: grayscale($border-bottom-active); 318 | $inset-shadow-active: grayscale($inset-shadow-active); 319 | $text-shadow-active: grayscale($text-shadow-active); 320 | } 321 | 322 | background: $active-color; 323 | border: 1px solid $border-active; 324 | border-bottom: 1px solid $border-bottom-active; 325 | box-shadow: inset 0 0 6px 3px $inset-shadow-active; 326 | text-shadow: 0 -1px 1px $text-shadow-active; 327 | } 328 | } 329 | 330 | 331 | 332 | // Flat Button 333 | //************************************************************************// 334 | @mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) { 335 | $color: hsl(0, 0, 100%); 336 | 337 | @if is-light($base-color) { 338 | $color: hsl(0, 0, 20%); 339 | } 340 | 341 | background-color: $base-color; 342 | border-radius: 3px; 343 | border: none; 344 | color: $color; 345 | display: inline-block; 346 | font-size: inherit; 347 | font-weight: bold; 348 | padding: 7px 18px; 349 | text-decoration: none; 350 | background-clip: padding-box; 351 | 352 | &:hover:not(:disabled){ 353 | $base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%); 354 | 355 | @if $grayscale == true { 356 | $base-color-hover: grayscale($base-color-hover); 357 | } 358 | 359 | background-color: $base-color-hover; 360 | cursor: pointer; 361 | } 362 | 363 | &:active:not(:disabled), 364 | &:focus:not(:disabled) { 365 | $base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%); 366 | 367 | @if $grayscale == true { 368 | $base-color-active: grayscale($base-color-active); 369 | } 370 | 371 | background-color: $base-color-active; 372 | cursor: pointer; 373 | } 374 | } 375 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_clearfix.scss: -------------------------------------------------------------------------------- 1 | // Modern micro clearfix provides an easy way to contain floats without adding additional markup. 2 | // 3 | // Example usage: 4 | // 5 | // // Contain all floats within .wrapper 6 | // .wrapper { 7 | // @include clearfix; 8 | // .content, 9 | // .sidebar { 10 | // float : left; 11 | // } 12 | // } 13 | 14 | @mixin clearfix { 15 | &:after { 16 | content:""; 17 | display:table; 18 | clear:both; 19 | } 20 | } 21 | 22 | // Acknowledgements 23 | // Beat *that* clearfix: [Thierry Koblentz](http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php) 24 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_directional-values.scss: -------------------------------------------------------------------------------- 1 | // directional-property mixins are shorthands 2 | // for writing properties like the following 3 | // 4 | // @include margin(null 0 10px); 5 | // ------ 6 | // margin-right: 0; 7 | // margin-bottom: 10px; 8 | // margin-left: 0; 9 | // 10 | // - or - 11 | // 12 | // @include border-style(dotted null); 13 | // ------ 14 | // border-top-style: dotted; 15 | // border-bottom-style: dotted; 16 | // 17 | // ------ 18 | // 19 | // Note: You can also use false instead of null 20 | 21 | @function collapse-directionals($vals) { 22 | $output: null; 23 | 24 | $A: nth( $vals, 1 ); 25 | $B: if( length($vals) < 2, $A, nth($vals, 2)); 26 | $C: if( length($vals) < 3, $A, nth($vals, 3)); 27 | $D: if( length($vals) < 2, $A, nth($vals, if( length($vals) < 4, 2, 4) )); 28 | 29 | @if $A == 0 { $A: 0 } 30 | @if $B == 0 { $B: 0 } 31 | @if $C == 0 { $C: 0 } 32 | @if $D == 0 { $D: 0 } 33 | 34 | @if $A == $B and $A == $C and $A == $D { $output: $A } 35 | @else if $A == $C and $B == $D { $output: $A $B } 36 | @else if $B == $D { $output: $A $B $C } 37 | @else { $output: $A $B $C $D } 38 | 39 | @return $output; 40 | } 41 | 42 | @function contains-falsy($list) { 43 | @each $item in $list { 44 | @if not $item { 45 | @return true; 46 | } 47 | } 48 | 49 | @return false; 50 | } 51 | 52 | @mixin directional-property($pre, $suf, $vals) { 53 | // Property Names 54 | $top: $pre + "-top" + if($suf, "-#{$suf}", ""); 55 | $bottom: $pre + "-bottom" + if($suf, "-#{$suf}", ""); 56 | $left: $pre + "-left" + if($suf, "-#{$suf}", ""); 57 | $right: $pre + "-right" + if($suf, "-#{$suf}", ""); 58 | $all: $pre + if($suf, "-#{$suf}", ""); 59 | 60 | $vals: collapse-directionals($vals); 61 | 62 | @if contains-falsy($vals) { 63 | @if nth($vals, 1) { #{$top}: nth($vals, 1); } 64 | 65 | @if length($vals) == 1 { 66 | @if nth($vals, 1) { #{$right}: nth($vals, 1); } 67 | } @else { 68 | @if nth($vals, 2) { #{$right}: nth($vals, 2); } 69 | } 70 | 71 | // prop: top/bottom right/left 72 | @if length($vals) == 2 { 73 | @if nth($vals, 1) { #{$bottom}: nth($vals, 1); } 74 | @if nth($vals, 2) { #{$left}: nth($vals, 2); } 75 | 76 | // prop: top right/left bottom 77 | } @else if length($vals) == 3 { 78 | @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } 79 | @if nth($vals, 2) { #{$left}: nth($vals, 2); } 80 | 81 | // prop: top right bottom left 82 | } @else if length($vals) == 4 { 83 | @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } 84 | @if nth($vals, 4) { #{$left}: nth($vals, 4); } 85 | } 86 | 87 | // prop: top/right/bottom/left 88 | } @else { 89 | #{$all}: $vals; 90 | } 91 | } 92 | 93 | @mixin margin($vals...) { 94 | @include directional-property(margin, false, $vals...); 95 | } 96 | 97 | @mixin padding($vals...) { 98 | @include directional-property(padding, false, $vals...); 99 | } 100 | 101 | @mixin border-style($vals...) { 102 | @include directional-property(border, style, $vals...); 103 | } 104 | 105 | @mixin border-color($vals...) { 106 | @include directional-property(border, color, $vals...); 107 | } 108 | 109 | @mixin border-width($vals...) { 110 | @include directional-property(border, width, $vals...); 111 | } 112 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_ellipsis.scss: -------------------------------------------------------------------------------- 1 | @mixin ellipsis($width: 100%) { 2 | display: inline-block; 3 | max-width: $width; 4 | overflow: hidden; 5 | text-overflow: ellipsis; 6 | white-space: nowrap; 7 | } 8 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_font-family.scss: -------------------------------------------------------------------------------- 1 | $georgia: Georgia, Cambria, "Times New Roman", Times, serif; 2 | $helvetica: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; 3 | $lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; 4 | $monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; 5 | $verdana: Verdana, Geneva, sans-serif; 6 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_hide-text.scss: -------------------------------------------------------------------------------- 1 | @mixin hide-text { 2 | overflow: hidden; 3 | 4 | &:before { 5 | content: ""; 6 | display: block; 7 | width: 0; 8 | height: 100%; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_html5-input-types.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Generate a variable ($all-text-inputs) with a list of all html5 3 | // input types that have a text-based input, excluding textarea. 4 | // http://diveintohtml5.org/forms.html 5 | //************************************************************************// 6 | $inputs-list: 'input[type="email"]', 7 | 'input[type="number"]', 8 | 'input[type="password"]', 9 | 'input[type="search"]', 10 | 'input[type="tel"]', 11 | 'input[type="text"]', 12 | 'input[type="url"]', 13 | 14 | // Webkit & Gecko may change the display of these in the future 15 | 'input[type="color"]', 16 | 'input[type="date"]', 17 | 'input[type="datetime"]', 18 | 'input[type="datetime-local"]', 19 | 'input[type="month"]', 20 | 'input[type="time"]', 21 | 'input[type="week"]'; 22 | 23 | // Bare inputs 24 | //************************************************************************// 25 | $all-text-inputs: assign-inputs($inputs-list); 26 | 27 | // Hover Pseudo-class 28 | //************************************************************************// 29 | $all-text-inputs-hover: assign-inputs($inputs-list, hover); 30 | 31 | // Focus Pseudo-class 32 | //************************************************************************// 33 | $all-text-inputs-focus: assign-inputs($inputs-list, focus); 34 | 35 | 36 | 37 | // You must use interpolation on the variable: 38 | // #{$all-text-inputs} 39 | // #{$all-text-inputs-hover} 40 | // #{$all-text-inputs-focus} 41 | 42 | // Example 43 | //************************************************************************// 44 | // #{$all-text-inputs}, textarea { 45 | // border: 1px solid red; 46 | // } 47 | 48 | 49 | 50 | //************************************************************************// 51 | // Generate a variable ($all-button-inputs) with a list of all html5 52 | // input types that have a button-based input, excluding button. 53 | //************************************************************************// 54 | $inputs-button-list: 'input[type="button"]', 55 | 'input[type="reset"]', 56 | 'input[type="submit"]'; 57 | 58 | // Bare inputs 59 | //************************************************************************// 60 | $all-button-inputs: assign-inputs($inputs-button-list); 61 | 62 | // Hover Pseudo-class 63 | //************************************************************************// 64 | $all-button-inputs-hover: assign-inputs($inputs-button-list, hover); 65 | 66 | // Focus Pseudo-class 67 | //************************************************************************// 68 | $all-button-inputs-focus: assign-inputs($inputs-button-list, focus); 69 | 70 | // Active Pseudo-class 71 | //************************************************************************// 72 | $all-button-inputs-active: assign-inputs($inputs-button-list, active); 73 | 74 | 75 | 76 | // You must use interpolation on the variable: 77 | // #{$all-button-inputs} 78 | // #{$all-button-inputs-hover} 79 | // #{$all-button-inputs-focus} 80 | // #{$all-button-inputs-active} 81 | 82 | // Example 83 | //************************************************************************// 84 | // #{$all-button-inputs}, button { 85 | // border: 1px solid red; 86 | // } 87 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_position.scss: -------------------------------------------------------------------------------- 1 | @mixin position ($position: relative, $coordinates: null null null null) { 2 | 3 | @if type-of($position) == list { 4 | $coordinates: $position; 5 | $position: relative; 6 | } 7 | 8 | $coordinates: unpack($coordinates); 9 | 10 | $top: nth($coordinates, 1); 11 | $right: nth($coordinates, 2); 12 | $bottom: nth($coordinates, 3); 13 | $left: nth($coordinates, 4); 14 | 15 | position: $position; 16 | 17 | @if ($top and $top == auto) or (type-of($top) == number) { 18 | top: $top; 19 | } 20 | 21 | @if ($right and $right == auto) or (type-of($right) == number) { 22 | right: $right; 23 | } 24 | 25 | @if ($bottom and $bottom == auto) or (type-of($bottom) == number) { 26 | bottom: $bottom; 27 | } 28 | 29 | @if ($left and $left == auto) or (type-of($left) == number) { 30 | left: $left; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_prefixer.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Example: @include prefixer(border-radius, $radii, webkit ms spec); 3 | //************************************************************************// 4 | // Variables located in /settings/_prefixer.scss 5 | 6 | @mixin prefixer ($property, $value, $prefixes) { 7 | @each $prefix in $prefixes { 8 | @if $prefix == webkit { 9 | @if $prefix-for-webkit { 10 | -webkit-#{$property}: $value; 11 | } 12 | } 13 | @else if $prefix == moz { 14 | @if $prefix-for-mozilla { 15 | -moz-#{$property}: $value; 16 | } 17 | } 18 | @else if $prefix == ms { 19 | @if $prefix-for-microsoft { 20 | -ms-#{$property}: $value; 21 | } 22 | } 23 | @else if $prefix == o { 24 | @if $prefix-for-opera { 25 | -o-#{$property}: $value; 26 | } 27 | } 28 | @else if $prefix == spec { 29 | @if $prefix-for-spec { 30 | #{$property}: $value; 31 | } 32 | } 33 | @else { 34 | @warn "Unrecognized prefix: #{$prefix}"; 35 | } 36 | } 37 | } 38 | 39 | @mixin disable-prefix-for-all() { 40 | $prefix-for-webkit: false !global; 41 | $prefix-for-mozilla: false !global; 42 | $prefix-for-microsoft: false !global; 43 | $prefix-for-opera: false !global; 44 | $prefix-for-spec: false !global; 45 | } 46 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_retina-image.scss: -------------------------------------------------------------------------------- 1 | @mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) { 2 | @if $asset-pipeline { 3 | background-image: image-url("#{$filename}.#{$extension}"); 4 | } 5 | @else { 6 | background-image: url("#{$filename}.#{$extension}"); 7 | } 8 | 9 | @include hidpi { 10 | @if $asset-pipeline { 11 | @if $retina-filename { 12 | background-image: image-url("#{$retina-filename}.#{$extension}"); 13 | } 14 | @else { 15 | background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}"); 16 | } 17 | } 18 | 19 | @else { 20 | @if $retina-filename { 21 | background-image: url("#{$retina-filename}.#{$extension}"); 22 | } 23 | @else { 24 | background-image: url("#{$filename}#{$retina-suffix}.#{$extension}"); 25 | } 26 | } 27 | 28 | background-size: $background-size; 29 | 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_size.scss: -------------------------------------------------------------------------------- 1 | @mixin size($size) { 2 | $height: nth($size, 1); 3 | $width: $height; 4 | 5 | @if length($size) > 1 { 6 | $height: nth($size, 2); 7 | } 8 | 9 | @if $height == auto or (type-of($height) == number and not unitless($height)) { 10 | height: $height; 11 | } 12 | 13 | @if $width == auto or (type-of($width) == number and not unitless($width)) { 14 | width: $width; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_timing-functions.scss: -------------------------------------------------------------------------------- 1 | // CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) 2 | // Timing functions are the same as demo'ed here: http://jqueryui.com/resources/demos/effect/easing.html 3 | 4 | // EASE IN 5 | $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); 6 | $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); 7 | $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); 8 | $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); 9 | $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); 10 | $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); 11 | $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); 12 | $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); 13 | 14 | // EASE OUT 15 | $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); 16 | $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); 17 | $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); 18 | $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); 19 | $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); 20 | $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); 21 | $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); 22 | $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); 23 | 24 | // EASE IN OUT 25 | $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); 26 | $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); 27 | $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); 28 | $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); 29 | $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); 30 | $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); 31 | $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); 32 | $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); 33 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_triangle.scss: -------------------------------------------------------------------------------- 1 | @mixin triangle ($size, $color, $direction) { 2 | height: 0; 3 | width: 0; 4 | 5 | $width: nth($size, 1); 6 | $height: nth($size, length($size)); 7 | 8 | $foreground-color: nth($color, 1); 9 | $background-color: if(length($color) == 2, nth($color, 2), transparent); 10 | 11 | @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { 12 | 13 | $width: $width / 2; 14 | $height: if(length($size) > 1, $height, $height/2); 15 | 16 | @if $direction == up { 17 | border-left: $width solid $background-color; 18 | border-right: $width solid $background-color; 19 | border-bottom: $height solid $foreground-color; 20 | 21 | } @else if $direction == right { 22 | border-top: $width solid $background-color; 23 | border-bottom: $width solid $background-color; 24 | border-left: $height solid $foreground-color; 25 | 26 | } @else if $direction == down { 27 | border-left: $width solid $background-color; 28 | border-right: $width solid $background-color; 29 | border-top: $height solid $foreground-color; 30 | 31 | } @else if $direction == left { 32 | border-top: $width solid $background-color; 33 | border-bottom: $width solid $background-color; 34 | border-right: $height solid $foreground-color; 35 | } 36 | } 37 | 38 | @else if ($direction == up-right) or ($direction == up-left) { 39 | border-top: $height solid $foreground-color; 40 | 41 | @if $direction == up-right { 42 | border-left: $width solid $background-color; 43 | 44 | } @else if $direction == up-left { 45 | border-right: $width solid $background-color; 46 | } 47 | } 48 | 49 | @else if ($direction == down-right) or ($direction == down-left) { 50 | border-bottom: $height solid $foreground-color; 51 | 52 | @if $direction == down-right { 53 | border-left: $width solid $background-color; 54 | 55 | } @else if $direction == down-left { 56 | border-right: $width solid $background-color; 57 | } 58 | } 59 | 60 | @else if ($direction == inset-up) { 61 | border-width: $height $width; 62 | border-style: solid; 63 | border-color: $background-color $background-color $foreground-color; 64 | } 65 | 66 | @else if ($direction == inset-down) { 67 | border-width: $height $width; 68 | border-style: solid; 69 | border-color: $foreground-color $background-color $background-color; 70 | } 71 | 72 | @else if ($direction == inset-right) { 73 | border-width: $width $height; 74 | border-style: solid; 75 | border-color: $background-color $background-color $background-color $foreground-color; 76 | } 77 | 78 | @else if ($direction == inset-left) { 79 | border-width: $width $height; 80 | border-style: solid; 81 | border-color: $background-color $foreground-color $background-color $background-color; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /_sass/bourbon/addons/_word-wrap.scss: -------------------------------------------------------------------------------- 1 | @mixin word-wrap($wrap: break-word) { 2 | word-wrap: $wrap; 3 | 4 | @if $wrap == break-word { 5 | overflow-wrap: break-word; 6 | word-break: break-all; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_animation.scss: -------------------------------------------------------------------------------- 1 | // http://www.w3.org/TR/css3-animations/#the-animation-name-property- 2 | // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. 3 | 4 | // Official animation shorthand property. 5 | @mixin animation ($animations...) { 6 | @include prefixer(animation, $animations, webkit moz spec); 7 | } 8 | 9 | // Individual Animation Properties 10 | @mixin animation-name ($names...) { 11 | @include prefixer(animation-name, $names, webkit moz spec); 12 | } 13 | 14 | 15 | @mixin animation-duration ($times...) { 16 | @include prefixer(animation-duration, $times, webkit moz spec); 17 | } 18 | 19 | 20 | @mixin animation-timing-function ($motions...) { 21 | // ease | linear | ease-in | ease-out | ease-in-out 22 | @include prefixer(animation-timing-function, $motions, webkit moz spec); 23 | } 24 | 25 | 26 | @mixin animation-iteration-count ($values...) { 27 | // infinite | 28 | @include prefixer(animation-iteration-count, $values, webkit moz spec); 29 | } 30 | 31 | 32 | @mixin animation-direction ($directions...) { 33 | // normal | alternate 34 | @include prefixer(animation-direction, $directions, webkit moz spec); 35 | } 36 | 37 | 38 | @mixin animation-play-state ($states...) { 39 | // running | paused 40 | @include prefixer(animation-play-state, $states, webkit moz spec); 41 | } 42 | 43 | 44 | @mixin animation-delay ($times...) { 45 | @include prefixer(animation-delay, $times, webkit moz spec); 46 | } 47 | 48 | 49 | @mixin animation-fill-mode ($modes...) { 50 | // none | forwards | backwards | both 51 | @include prefixer(animation-fill-mode, $modes, webkit moz spec); 52 | } 53 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_appearance.scss: -------------------------------------------------------------------------------- 1 | @mixin appearance ($value) { 2 | @include prefixer(appearance, $value, webkit moz ms o spec); 3 | } 4 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_backface-visibility.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Backface-visibility mixin 3 | //************************************************************************// 4 | @mixin backface-visibility($visibility) { 5 | @include prefixer(backface-visibility, $visibility, webkit spec); 6 | } 7 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_background-image.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Background-image property for adding multiple background images with 3 | // gradients, or for stringing multiple gradients together. 4 | //************************************************************************// 5 | 6 | @mixin background-image($images...) { 7 | $webkit-images: (); 8 | $spec-images: (); 9 | 10 | @each $image in $images { 11 | $webkit-image: (); 12 | $spec-image: (); 13 | 14 | @if (type-of($image) == string) { 15 | $url-str: str-slice($image, 0, 3); 16 | $gradient-type: str-slice($image, 0, 6); 17 | 18 | @if $url-str == "url" { 19 | $webkit-image: $image; 20 | $spec-image: $image; 21 | } 22 | 23 | @else if $gradient-type == "linear" { 24 | $gradients: _linear-gradient-parser($image); 25 | $webkit-image: map-get($gradients, webkit-image); 26 | $spec-image: map-get($gradients, spec-image); 27 | } 28 | 29 | @else if $gradient-type == "radial" { 30 | $gradients: _radial-gradient-parser($image); 31 | $webkit-image: map-get($gradients, webkit-image); 32 | $spec-image: map-get($gradients, spec-image); 33 | } 34 | } 35 | 36 | $webkit-images: append($webkit-images, $webkit-image, comma); 37 | $spec-images: append($spec-images, $spec-image, comma); 38 | } 39 | 40 | background-image: $webkit-images; 41 | background-image: $spec-images; 42 | } 43 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_background.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Background property for adding multiple backgrounds using shorthand 3 | // notation. 4 | //************************************************************************// 5 | 6 | @mixin background($backgrounds...) { 7 | $webkit-backgrounds: (); 8 | $spec-backgrounds: (); 9 | 10 | @each $background in $backgrounds { 11 | $webkit-background: (); 12 | $spec-background: (); 13 | $background-type: type-of($background); 14 | 15 | @if $background-type == string or list { 16 | $background-str: if($background-type == list, nth($background, 1), $background); 17 | 18 | $url-str: str-slice($background-str, 0, 3); 19 | $gradient-type: str-slice($background-str, 0, 6); 20 | 21 | @if $url-str == "url" { 22 | $webkit-background: $background; 23 | $spec-background: $background; 24 | } 25 | 26 | @else if $gradient-type == "linear" { 27 | $gradients: _linear-gradient-parser("#{$background}"); 28 | $webkit-background: map-get($gradients, webkit-image); 29 | $spec-background: map-get($gradients, spec-image); 30 | } 31 | 32 | @else if $gradient-type == "radial" { 33 | $gradients: _radial-gradient-parser("#{$background}"); 34 | $webkit-background: map-get($gradients, webkit-image); 35 | $spec-background: map-get($gradients, spec-image); 36 | } 37 | 38 | @else { 39 | $webkit-background: $background; 40 | $spec-background: $background; 41 | } 42 | } 43 | 44 | @else { 45 | $webkit-background: $background; 46 | $spec-background: $background; 47 | } 48 | 49 | $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma); 50 | $spec-backgrounds: append($spec-backgrounds, $spec-background, comma); 51 | } 52 | 53 | background: $webkit-backgrounds; 54 | background: $spec-backgrounds; 55 | } 56 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_border-image.scss: -------------------------------------------------------------------------------- 1 | @mixin border-image($borders...) { 2 | $webkit-borders: (); 3 | $spec-borders: (); 4 | 5 | @each $border in $borders { 6 | $webkit-border: (); 7 | $spec-border: (); 8 | $border-type: type-of($border); 9 | 10 | @if $border-type == string or list { 11 | $border-str: if($border-type == list, nth($border, 1), $border); 12 | 13 | $url-str: str-slice($border-str, 0, 3); 14 | $gradient-type: str-slice($border-str, 0, 6); 15 | 16 | @if $url-str == "url" { 17 | $webkit-border: $border; 18 | $spec-border: $border; 19 | } 20 | 21 | @else if $gradient-type == "linear" { 22 | $gradients: _linear-gradient-parser("#{$border}"); 23 | $webkit-border: map-get($gradients, webkit-image); 24 | $spec-border: map-get($gradients, spec-image); 25 | } 26 | 27 | @else if $gradient-type == "radial" { 28 | $gradients: _radial-gradient-parser("#{$border}"); 29 | $webkit-border: map-get($gradients, webkit-image); 30 | $spec-border: map-get($gradients, spec-image); 31 | } 32 | 33 | @else { 34 | $webkit-border: $border; 35 | $spec-border: $border; 36 | } 37 | } 38 | 39 | @else { 40 | $webkit-border: $border; 41 | $spec-border: $border; 42 | } 43 | 44 | $webkit-borders: append($webkit-borders, $webkit-border, comma); 45 | $spec-borders: append($spec-borders, $spec-border, comma); 46 | } 47 | 48 | -webkit-border-image: $webkit-borders; 49 | border-image: $spec-borders; 50 | border-style: solid; 51 | } 52 | 53 | //Examples: 54 | // @include border-image(url("image.png")); 55 | // @include border-image(url("image.png") 20 stretch); 56 | // @include border-image(linear-gradient(45deg, orange, yellow)); 57 | // @include border-image(linear-gradient(45deg, orange, yellow) stretch); 58 | // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round); 59 | // @include border-image(radial-gradient(top, cover, orange, yellow, orange)); 60 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_border-radius.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Shorthand Border-radius mixins 3 | //************************************************************************// 4 | @mixin border-top-radius($radii) { 5 | @include prefixer(border-top-left-radius, $radii, spec); 6 | @include prefixer(border-top-right-radius, $radii, spec); 7 | } 8 | 9 | @mixin border-bottom-radius($radii) { 10 | @include prefixer(border-bottom-left-radius, $radii, spec); 11 | @include prefixer(border-bottom-right-radius, $radii, spec); 12 | } 13 | 14 | @mixin border-left-radius($radii) { 15 | @include prefixer(border-top-left-radius, $radii, spec); 16 | @include prefixer(border-bottom-left-radius, $radii, spec); 17 | } 18 | 19 | @mixin border-right-radius($radii) { 20 | @include prefixer(border-top-right-radius, $radii, spec); 21 | @include prefixer(border-bottom-right-radius, $radii, spec); 22 | } 23 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | @mixin box-sizing ($box) { 2 | // content-box | border-box | inherit 3 | @include prefixer(box-sizing, $box, webkit moz spec); 4 | } 5 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_calc.scss: -------------------------------------------------------------------------------- 1 | @mixin calc($property, $value) { 2 | #{$property}: -webkit-calc(#{$value}); 3 | #{$property}: calc(#{$value}); 4 | } 5 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_columns.scss: -------------------------------------------------------------------------------- 1 | @mixin columns($arg: auto) { 2 | // || 3 | @include prefixer(columns, $arg, webkit moz spec); 4 | } 5 | 6 | @mixin column-count($int: auto) { 7 | // auto || integer 8 | @include prefixer(column-count, $int, webkit moz spec); 9 | } 10 | 11 | @mixin column-gap($length: normal) { 12 | // normal || length 13 | @include prefixer(column-gap, $length, webkit moz spec); 14 | } 15 | 16 | @mixin column-fill($arg: auto) { 17 | // auto || length 18 | @include prefixer(column-fill, $arg, webkit moz spec); 19 | } 20 | 21 | @mixin column-rule($arg) { 22 | // || || 23 | @include prefixer(column-rule, $arg, webkit moz spec); 24 | } 25 | 26 | @mixin column-rule-color($color) { 27 | @include prefixer(column-rule-color, $color, webkit moz spec); 28 | } 29 | 30 | @mixin column-rule-style($style: none) { 31 | // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid 32 | @include prefixer(column-rule-style, $style, webkit moz spec); 33 | } 34 | 35 | @mixin column-rule-width ($width: none) { 36 | @include prefixer(column-rule-width, $width, webkit moz spec); 37 | } 38 | 39 | @mixin column-span($arg: none) { 40 | // none || all 41 | @include prefixer(column-span, $arg, webkit moz spec); 42 | } 43 | 44 | @mixin column-width($length: auto) { 45 | // auto || length 46 | @include prefixer(column-width, $length, webkit moz spec); 47 | } 48 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_filter.scss: -------------------------------------------------------------------------------- 1 | @mixin filter($function: none) { 2 | // [ 3 | @include prefixer(perspective, $depth, webkit moz spec); 4 | } 5 | 6 | @mixin perspective-origin($value: 50% 50%) { 7 | @include prefixer(perspective-origin, $value, webkit moz spec); 8 | } 9 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_placeholder.scss: -------------------------------------------------------------------------------- 1 | @mixin placeholder { 2 | $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"; 3 | @each $placeholder in $placeholders { 4 | &:#{$placeholder}-placeholder { 5 | @content; 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_radial-gradient.scss: -------------------------------------------------------------------------------- 1 | // Requires Sass 3.1+ 2 | @mixin radial-gradient($G1, $G2, 3 | $G3: null, $G4: null, 4 | $G5: null, $G6: null, 5 | $G7: null, $G8: null, 6 | $G9: null, $G10: null, 7 | $pos: null, 8 | $shape-size: null, 9 | $fallback: null) { 10 | 11 | $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); 12 | $G1: nth($data, 1); 13 | $G2: nth($data, 2); 14 | $pos: nth($data, 3); 15 | $shape-size: nth($data, 4); 16 | 17 | $full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10; 18 | 19 | // Strip deprecated cover/contain for spec 20 | $shape-size-spec: _shape-size-stripper($shape-size); 21 | 22 | // Set $G1 as the default fallback color 23 | $first-color: nth($full, 1); 24 | $fallback-color: nth($first-color, 1); 25 | 26 | @if (type-of($fallback) == color) or ($fallback == "transparent") { 27 | $fallback-color: $fallback; 28 | } 29 | 30 | // Add Commas and spaces 31 | $shape-size: if($shape-size, '#{$shape-size}, ', null); 32 | $pos: if($pos, '#{$pos}, ', null); 33 | $pos-spec: if($pos, 'at #{$pos}', null); 34 | $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} '); 35 | 36 | background-color: $fallback-color; 37 | background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full})); 38 | background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})"); 39 | } 40 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_transform.scss: -------------------------------------------------------------------------------- 1 | @mixin transform($property: none) { 2 | // none | 3 | @include prefixer(transform, $property, webkit moz ms o spec); 4 | } 5 | 6 | @mixin transform-origin($axes: 50%) { 7 | // x-axis - left | center | right | length | % 8 | // y-axis - top | center | bottom | length | % 9 | // z-axis - length 10 | @include prefixer(transform-origin, $axes, webkit moz ms o spec); 11 | } 12 | 13 | @mixin transform-style ($style: flat) { 14 | @include prefixer(transform-style, $style, webkit moz ms o spec); 15 | } 16 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_transition.scss: -------------------------------------------------------------------------------- 1 | // Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. 2 | // Example: @include transition (all 2s ease-in-out); 3 | // @include transition (opacity 1s ease-in 2s, width 2s ease-out); 4 | // @include transition-property (transform, opacity); 5 | 6 | @mixin transition ($properties...) { 7 | // Fix for vendor-prefix transform property 8 | $needs-prefixes: false; 9 | $webkit: (); 10 | $moz: (); 11 | $spec: (); 12 | 13 | // Create lists for vendor-prefixed transform 14 | @each $list in $properties { 15 | @if nth($list, 1) == "transform" { 16 | $needs-prefixes: true; 17 | $list1: -webkit-transform; 18 | $list2: -moz-transform; 19 | $list3: (); 20 | 21 | @each $var in $list { 22 | $list3: join($list3, $var); 23 | 24 | @if $var != "transform" { 25 | $list1: join($list1, $var); 26 | $list2: join($list2, $var); 27 | } 28 | } 29 | 30 | $webkit: append($webkit, $list1); 31 | $moz: append($moz, $list2); 32 | $spec: append($spec, $list3); 33 | } 34 | 35 | // Create lists for non-prefixed transition properties 36 | @else { 37 | $webkit: append($webkit, $list, comma); 38 | $moz: append($moz, $list, comma); 39 | $spec: append($spec, $list, comma); 40 | } 41 | } 42 | 43 | @if $needs-prefixes { 44 | -webkit-transition: $webkit; 45 | -moz-transition: $moz; 46 | transition: $spec; 47 | } 48 | @else { 49 | @if length($properties) >= 1 { 50 | @include prefixer(transition, $properties, webkit moz spec); 51 | } 52 | 53 | @else { 54 | $properties: all 0.15s ease-out 0s; 55 | @include prefixer(transition, $properties, webkit moz spec); 56 | } 57 | } 58 | } 59 | 60 | @mixin transition-property ($properties...) { 61 | -webkit-transition-property: transition-property-names($properties, 'webkit'); 62 | -moz-transition-property: transition-property-names($properties, 'moz'); 63 | transition-property: transition-property-names($properties, false); 64 | } 65 | 66 | @mixin transition-duration ($times...) { 67 | @include prefixer(transition-duration, $times, webkit moz spec); 68 | } 69 | 70 | @mixin transition-timing-function ($motions...) { 71 | // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() 72 | @include prefixer(transition-timing-function, $motions, webkit moz spec); 73 | } 74 | 75 | @mixin transition-delay ($times...) { 76 | @include prefixer(transition-delay, $times, webkit moz spec); 77 | } 78 | -------------------------------------------------------------------------------- /_sass/bourbon/css3/_user-select.scss: -------------------------------------------------------------------------------- 1 | @mixin user-select($arg: none) { 2 | @include prefixer(user-select, $arg, webkit moz ms spec); 3 | } 4 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_assign.scss: -------------------------------------------------------------------------------- 1 | @function assign-inputs($inputs, $pseudo: null) { 2 | $list : (); 3 | 4 | @each $input in $inputs { 5 | $input: unquote($input); 6 | $input: if($pseudo, $input + ":" + $pseudo, $input); 7 | $list: append($list, $input, comma); 8 | } 9 | 10 | @return $list; 11 | } -------------------------------------------------------------------------------- /_sass/bourbon/functions/_color-lightness.scss: -------------------------------------------------------------------------------- 1 | // Programatically determines whether a color is light or dark 2 | // Returns a boolean 3 | // More details here http://robots.thoughtbot.com/closer-look-color-lightness 4 | 5 | @function is-light($hex-color) { 6 | $-local-red: red(rgba($hex-color, 1.0)); 7 | $-local-green: green(rgba($hex-color, 1.0)); 8 | $-local-blue: blue(rgba($hex-color, 1.0)); 9 | 10 | $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255; 11 | 12 | @return $-local-lightness > .6; 13 | } 14 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_flex-grid.scss: -------------------------------------------------------------------------------- 1 | // Flexible grid 2 | @function flex-grid($columns, $container-columns: $fg-max-columns) { 3 | $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; 4 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 5 | @return percentage($width / $container-width); 6 | } 7 | 8 | // Flexible gutter 9 | @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { 10 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 11 | @return percentage($gutter / $container-width); 12 | } 13 | 14 | // The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function. 15 | // This function takes the fluid grid equation (target / context = result) and uses columns to help define each. 16 | // 17 | // The calculation presumes that your column structure will be missing the last gutter: 18 | // 19 | // -- column -- gutter -- column -- gutter -- column 20 | // 21 | // $fg-column: 60px; // Column Width 22 | // $fg-gutter: 25px; // Gutter Width 23 | // $fg-max-columns: 12; // Total Columns For Main Container 24 | // 25 | // div { 26 | // width: flex-grid(4); // returns (315px / 995px) = 31.65829%; 27 | // margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%; 28 | // 29 | // p { 30 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; 31 | // float: left; 32 | // margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%; 33 | // } 34 | // 35 | // blockquote { 36 | // float: left; 37 | // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; 38 | // } 39 | // } -------------------------------------------------------------------------------- /_sass/bourbon/functions/_golden-ratio.scss: -------------------------------------------------------------------------------- 1 | @function golden-ratio($value, $increment) { 2 | @return modular-scale($value, $increment, $golden) 3 | } 4 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_grid-width.scss: -------------------------------------------------------------------------------- 1 | @function grid-width($n) { 2 | @return $n * $gw-column + ($n - 1) * $gw-gutter; 3 | } 4 | 5 | // The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function. 6 | // 7 | // $gw-column: 100px; // Column Width 8 | // $gw-gutter: 40px; // Gutter Width 9 | // 10 | // div { 11 | // width: grid-width(4); // returns 520px; 12 | // margin-left: $gw-gutter; // returns 40px; 13 | // } 14 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_modular-scale.scss: -------------------------------------------------------------------------------- 1 | // Scaling Variables 2 | $golden: 1.618; 3 | $minor-second: 1.067; 4 | $major-second: 1.125; 5 | $minor-third: 1.2; 6 | $major-third: 1.25; 7 | $perfect-fourth: 1.333; 8 | $augmented-fourth: 1.414; 9 | $perfect-fifth: 1.5; 10 | $minor-sixth: 1.6; 11 | $major-sixth: 1.667; 12 | $minor-seventh: 1.778; 13 | $major-seventh: 1.875; 14 | $octave: 2; 15 | $major-tenth: 2.5; 16 | $major-eleventh: 2.667; 17 | $major-twelfth: 3; 18 | $double-octave: 4; 19 | 20 | @function modular-scale($value, $increment, $ratio) { 21 | $v1: nth($value, 1); 22 | $v2: nth($value, length($value)); 23 | $value: $v1; 24 | 25 | // scale $v2 to just above $v1 26 | @while $v2 > $v1 { 27 | $v2: ($v2 / $ratio); // will be off-by-1 28 | } 29 | @while $v2 < $v1 { 30 | $v2: ($v2 * $ratio); // will fix off-by-1 31 | } 32 | 33 | // check AFTER scaling $v2 to prevent double-counting corner-case 34 | $double-stranded: $v2 > $v1; 35 | 36 | @if $increment > 0 { 37 | @for $i from 1 through $increment { 38 | @if $double-stranded and ($v1 * $ratio) > $v2 { 39 | $value: $v2; 40 | $v2: ($v2 * $ratio); 41 | } @else { 42 | $v1: ($v1 * $ratio); 43 | $value: $v1; 44 | } 45 | } 46 | } 47 | 48 | @if $increment < 0 { 49 | // adjust $v2 to just below $v1 50 | @if $double-stranded { 51 | $v2: ($v2 / $ratio); 52 | } 53 | 54 | @for $i from $increment through -1 { 55 | @if $double-stranded and ($v1 / $ratio) < $v2 { 56 | $value: $v2; 57 | $v2: ($v2 / $ratio); 58 | } @else { 59 | $v1: ($v1 / $ratio); 60 | $value: $v1; 61 | } 62 | } 63 | } 64 | 65 | @return $value; 66 | } 67 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_px-to-em.scss: -------------------------------------------------------------------------------- 1 | // Convert pixels to ems 2 | // eg. for a relational value of 12px write em(12) when the parent is 16px 3 | // if the parent is another value say 24px write em(12, 24) 4 | 5 | @function em($pxval, $base: $em-base) { 6 | @if not unitless($pxval) { 7 | $pxval: strip-units($pxval); 8 | } 9 | @if not unitless($base) { 10 | $base: strip-units($base); 11 | } 12 | @return ($pxval / $base) * 1em; 13 | } 14 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_px-to-rem.scss: -------------------------------------------------------------------------------- 1 | // Convert pixels to rems 2 | // eg. for a relational value of 12px write rem(12) 3 | // Assumes $em-base is the font-size of 4 | 5 | @function rem($pxval) { 6 | @if not unitless($pxval) { 7 | $pxval: strip-units($pxval); 8 | } 9 | 10 | $base: $em-base; 11 | @if not unitless($base) { 12 | $base: strip-units($base); 13 | } 14 | @return ($pxval / $base) * 1rem; 15 | } 16 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_strip-units.scss: -------------------------------------------------------------------------------- 1 | // Srtips the units from a value. e.g. 12px -> 12 2 | 3 | @function strip-units($val) { 4 | @return ($val / ($val * 0 + 1)); 5 | } 6 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_tint-shade.scss: -------------------------------------------------------------------------------- 1 | // Add percentage of white to a color 2 | @function tint($color, $percent){ 3 | @return mix(white, $color, $percent); 4 | } 5 | 6 | // Add percentage of black to a color 7 | @function shade($color, $percent){ 8 | @return mix(black, $color, $percent); 9 | } 10 | -------------------------------------------------------------------------------- /_sass/bourbon/functions/_transition-property-name.scss: -------------------------------------------------------------------------------- 1 | // Return vendor-prefixed property names if appropriate 2 | // Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background 3 | //************************************************************************// 4 | @function transition-property-names($props, $vendor: false) { 5 | $new-props: (); 6 | 7 | @each $prop in $props { 8 | $new-props: append($new-props, transition-property-name($prop, $vendor), comma); 9 | } 10 | 11 | @return $new-props; 12 | } 13 | 14 | @function transition-property-name($prop, $vendor: false) { 15 | // put other properties that need to be prefixed here aswell 16 | @if $vendor and $prop == transform { 17 | @return unquote('-'+$vendor+'-'+$prop); 18 | } 19 | @else { 20 | @return $prop; 21 | } 22 | } -------------------------------------------------------------------------------- /_sass/bourbon/functions/_unpack.scss: -------------------------------------------------------------------------------- 1 | // Convert shorthand to the 4-value syntax 2 | 3 | @function unpack($shorthand) { 4 | @if length($shorthand) == 1 { 5 | @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1); 6 | } 7 | @else if length($shorthand) == 2 { 8 | @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2); 9 | } 10 | @else if length($shorthand) == 3 { 11 | @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2); 12 | } 13 | @else { 14 | @return $shorthand; 15 | } 16 | } 17 | 18 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_convert-units.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Helper function for str-to-num fn. 3 | // Source: http://sassmeister.com/gist/9647408 4 | //************************************************************************// 5 | @function _convert-units($number, $unit) { 6 | $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax', 'deg', 'rad', 'grad', 'turn'; 7 | $units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax, 1deg, 1rad, 1grad, 1turn; 8 | $index: index($strings, $unit); 9 | 10 | @if not $index { 11 | @warn "Unknown unit `#{$unit}`."; 12 | @return false; 13 | } 14 | @return $number * nth($units, $index); 15 | } 16 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_gradient-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _gradient-positions-parser($gradient-type, $gradient-positions) { 2 | @if $gradient-positions 3 | and ($gradient-type == linear) 4 | and (type-of($gradient-positions) != color) { 5 | $gradient-positions: _linear-positions-parser($gradient-positions); 6 | } 7 | @else if $gradient-positions 8 | and ($gradient-type == radial) 9 | and (type-of($gradient-positions) != color) { 10 | $gradient-positions: _radial-positions-parser($gradient-positions); 11 | } 12 | @return $gradient-positions; 13 | } 14 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_is-num.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Helper for linear-gradient-parser 3 | //************************************************************************// 4 | @function _is-num($char) { 5 | $values: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9' 0 1 2 3 4 5 6 7 8 9; 6 | $index: index($values, $char); 7 | @return if($index, true, false); 8 | } 9 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_linear-angle-parser.scss: -------------------------------------------------------------------------------- 1 | // Private function for linear-gradient-parser 2 | @function _linear-angle-parser($image, $first-val, $prefix, $suffix) { 3 | $offset: null; 4 | $unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val)); 5 | $unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val)); 6 | 7 | @if ($unit-long == "grad") or 8 | ($unit-long == "turn") { 9 | $offset: if($unit-long == "grad", -100grad * 3, -0.75turn); 10 | } 11 | 12 | @else if ($unit-short == "deg") or 13 | ($unit-short == "rad") { 14 | $offset: if($unit-short == "deg", -90 * 3, 1.6rad); 15 | } 16 | 17 | @if $offset { 18 | $num: _str-to-num($first-val); 19 | 20 | @return ( 21 | webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix, 22 | spec-image: $image 23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_linear-gradient-parser.scss: -------------------------------------------------------------------------------- 1 | @function _linear-gradient-parser($image) { 2 | $image: unquote($image); 3 | $gradients: (); 4 | $start: str-index($image, "("); 5 | $end: str-index($image, ","); 6 | $first-val: str-slice($image, $start + 1, $end - 1); 7 | 8 | $prefix: str-slice($image, 0, $start); 9 | $suffix: str-slice($image, $end, str-length($image)); 10 | 11 | $has-multiple-vals: str-index($first-val, " "); 12 | $has-single-position: unquote(_position-flipper($first-val) + ""); 13 | $has-angle: _is-num(str-slice($first-val, 0, 0)); 14 | 15 | @if $has-multiple-vals { 16 | $gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals); 17 | } 18 | 19 | @else if $has-single-position != "" { 20 | $pos: unquote($has-single-position + ""); 21 | 22 | $gradients: ( 23 | webkit-image: -webkit- + $image, 24 | spec-image: $prefix + "to " + $pos + $suffix 25 | ); 26 | } 27 | 28 | @else if $has-angle { 29 | // Rotate degree for webkit 30 | $gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix); 31 | } 32 | 33 | @else { 34 | $gradients: ( 35 | webkit-image: -webkit- + $image, 36 | spec-image: $image 37 | ); 38 | } 39 | 40 | @return $gradients; 41 | } 42 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_linear-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _linear-positions-parser($pos) { 2 | $type: type-of(nth($pos, 1)); 3 | $spec: null; 4 | $degree: null; 5 | $side: null; 6 | $corner: null; 7 | $length: length($pos); 8 | // Parse Side and corner positions 9 | @if ($length > 1) { 10 | @if nth($pos, 1) == "to" { // Newer syntax 11 | $side: nth($pos, 2); 12 | 13 | @if $length == 2 { // eg. to top 14 | // Swap for backwards compatability 15 | $degree: _position-flipper(nth($pos, 2)); 16 | } 17 | @else if $length == 3 { // eg. to top left 18 | $corner: nth($pos, 3); 19 | } 20 | } 21 | @else if $length == 2 { // Older syntax ("top left") 22 | $side: _position-flipper(nth($pos, 1)); 23 | $corner: _position-flipper(nth($pos, 2)); 24 | } 25 | 26 | @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") { 27 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 28 | } 29 | @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") { 30 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 31 | } 32 | @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") { 33 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 34 | } 35 | @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") { 36 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 37 | } 38 | $spec: to $side $corner; 39 | } 40 | @else if $length == 1 { 41 | // Swap for backwards compatability 42 | @if $type == string { 43 | $degree: $pos; 44 | $spec: to _position-flipper($pos); 45 | } 46 | @else { 47 | $degree: -270 - $pos; //rotate the gradient opposite from spec 48 | $spec: $pos; 49 | } 50 | } 51 | $degree: unquote($degree + ","); 52 | $spec: unquote($spec + ","); 53 | @return $degree $spec; 54 | } 55 | 56 | @function _position-flipper($pos) { 57 | @return if($pos == left, right, null) 58 | if($pos == right, left, null) 59 | if($pos == top, bottom, null) 60 | if($pos == bottom, top, null); 61 | } 62 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_linear-side-corner-parser.scss: -------------------------------------------------------------------------------- 1 | // Private function for linear-gradient-parser 2 | @function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) { 3 | $val-1: str-slice($first-val, 0, $has-multiple-vals - 1 ); 4 | $val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val)); 5 | $val-3: null; 6 | $has-val-3: str-index($val-2, " "); 7 | 8 | @if $has-val-3 { 9 | $val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2)); 10 | $val-2: str-slice($val-2, 0, $has-val-3 - 1); 11 | } 12 | 13 | $pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3); 14 | $pos: unquote($pos + ""); 15 | 16 | // Use old spec for webkit 17 | @if $val-1 == "to" { 18 | @return ( 19 | webkit-image: -webkit- + $prefix + $pos + $suffix, 20 | spec-image: $image 21 | ); 22 | } 23 | 24 | // Bring the code up to spec 25 | @else { 26 | @return ( 27 | webkit-image: -webkit- + $image, 28 | spec-image: $prefix + "to " + $pos + $suffix 29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_radial-arg-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-arg-parser($G1, $G2, $pos, $shape-size) { 2 | @each $value in $G1, $G2 { 3 | $first-val: nth($value, 1); 4 | $pos-type: type-of($first-val); 5 | $spec-at-index: null; 6 | 7 | // Determine if spec was passed to mixin 8 | @if type-of($value) == list { 9 | $spec-at-index: if(index($value, at), index($value, at), false); 10 | } 11 | @if $spec-at-index { 12 | @if $spec-at-index > 1 { 13 | @for $i from 1 through ($spec-at-index - 1) { 14 | $shape-size: $shape-size nth($value, $i); 15 | } 16 | @for $i from ($spec-at-index + 1) through length($value) { 17 | $pos: $pos nth($value, $i); 18 | } 19 | } 20 | @else if $spec-at-index == 1 { 21 | @for $i from ($spec-at-index + 1) through length($value) { 22 | $pos: $pos nth($value, $i); 23 | } 24 | } 25 | $G1: null; 26 | } 27 | 28 | // If not spec calculate correct values 29 | @else { 30 | @if ($pos-type != color) or ($first-val != "transparent") { 31 | @if ($pos-type == number) 32 | or ($first-val == "center") 33 | or ($first-val == "top") 34 | or ($first-val == "right") 35 | or ($first-val == "bottom") 36 | or ($first-val == "left") { 37 | 38 | $pos: $value; 39 | 40 | @if $pos == $G1 { 41 | $G1: null; 42 | } 43 | } 44 | 45 | @else if 46 | ($first-val == "ellipse") 47 | or ($first-val == "circle") 48 | or ($first-val == "closest-side") 49 | or ($first-val == "closest-corner") 50 | or ($first-val == "farthest-side") 51 | or ($first-val == "farthest-corner") 52 | or ($first-val == "contain") 53 | or ($first-val == "cover") { 54 | 55 | $shape-size: $value; 56 | 57 | @if $value == $G1 { 58 | $G1: null; 59 | } 60 | 61 | @else if $value == $G2 { 62 | $G2: null; 63 | } 64 | } 65 | } 66 | } 67 | } 68 | @return $G1, $G2, $pos, $shape-size; 69 | } 70 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_radial-gradient-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-gradient-parser($image) { 2 | $image: unquote($image); 3 | $gradients: (); 4 | $start: str-index($image, "("); 5 | $end: str-index($image, ","); 6 | $first-val: str-slice($image, $start + 1, $end - 1); 7 | 8 | $prefix: str-slice($image, 0, $start); 9 | $suffix: str-slice($image, $end, str-length($image)); 10 | 11 | $is-spec-syntax: str-index($first-val, "at"); 12 | 13 | @if $is-spec-syntax and $is-spec-syntax > 1 { 14 | $keyword: str-slice($first-val, 1, $is-spec-syntax - 2); 15 | $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); 16 | $pos: append($pos, $keyword, comma); 17 | 18 | $gradients: ( 19 | webkit-image: -webkit- + $prefix + $pos + $suffix, 20 | spec-image: $image 21 | ) 22 | } 23 | 24 | @else if $is-spec-syntax == 1 { 25 | $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); 26 | 27 | $gradients: ( 28 | webkit-image: -webkit- + $prefix + $pos + $suffix, 29 | spec-image: $image 30 | ) 31 | } 32 | 33 | @else if str-index($image, "cover") or str-index($image, "contain") { 34 | @warn "Radial-gradient needs to be updated to conform to latest spec."; 35 | 36 | $gradients: ( 37 | webkit-image: null, 38 | spec-image: $image 39 | ) 40 | } 41 | 42 | @else { 43 | $gradients: ( 44 | webkit-image: -webkit- + $image, 45 | spec-image: $image 46 | ) 47 | } 48 | 49 | @return $gradients; 50 | } 51 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_radial-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-positions-parser($gradient-pos) { 2 | $shape-size: nth($gradient-pos, 1); 3 | $pos: nth($gradient-pos, 2); 4 | $shape-size-spec: _shape-size-stripper($shape-size); 5 | 6 | $pre-spec: unquote(if($pos, "#{$pos}, ", null)) 7 | unquote(if($shape-size, "#{$shape-size},", null)); 8 | $pos-spec: if($pos, "at #{$pos}", null); 9 | 10 | $spec: "#{$shape-size-spec} #{$pos-spec}"; 11 | 12 | // Add comma 13 | @if ($spec != ' ') { 14 | $spec: "#{$spec}," 15 | } 16 | 17 | @return $pre-spec $spec; 18 | } 19 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_render-gradients.scss: -------------------------------------------------------------------------------- 1 | // User for linear and radial gradients within background-image or border-image properties 2 | 3 | @function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) { 4 | $pre-spec: null; 5 | $spec: null; 6 | $vendor-gradients: null; 7 | @if $gradient-type == linear { 8 | @if $gradient-positions { 9 | $pre-spec: nth($gradient-positions, 1); 10 | $spec: nth($gradient-positions, 2); 11 | } 12 | } 13 | @else if $gradient-type == radial { 14 | $pre-spec: nth($gradient-positions, 1); 15 | $spec: nth($gradient-positions, 2); 16 | } 17 | 18 | @if $vendor { 19 | $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients); 20 | } 21 | @else if $vendor == false { 22 | $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})"; 23 | $vendor-gradients: unquote($vendor-gradients); 24 | } 25 | @return $vendor-gradients; 26 | } 27 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_shape-size-stripper.scss: -------------------------------------------------------------------------------- 1 | @function _shape-size-stripper($shape-size) { 2 | $shape-size-spec: null; 3 | @each $value in $shape-size { 4 | @if ($value == "cover") or ($value == "contain") { 5 | $value: null; 6 | } 7 | $shape-size-spec: "#{$shape-size-spec} #{$value}"; 8 | } 9 | @return $shape-size-spec; 10 | } 11 | -------------------------------------------------------------------------------- /_sass/bourbon/helpers/_str-to-num.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Helper function for linear/radial-gradient-parsers. 3 | // Source: http://sassmeister.com/gist/9647408 4 | //************************************************************************// 5 | @function _str-to-num($string) { 6 | // Matrices 7 | $strings: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9'; 8 | $numbers: 0 1 2 3 4 5 6 7 8 9; 9 | 10 | // Result 11 | $result: 0; 12 | $divider: 0; 13 | $minus: false; 14 | 15 | // Looping through all characters 16 | @for $i from 1 through str-length($string) { 17 | $character: str-slice($string, $i, $i); 18 | $index: index($strings, $character); 19 | 20 | @if $character == '-' { 21 | $minus: true; 22 | } 23 | 24 | @else if $character == '.' { 25 | $divider: 1; 26 | } 27 | 28 | @else { 29 | @if not $index { 30 | $result: if($minus, $result * -1, $result); 31 | @return _convert-units($result, str-slice($string, $i)); 32 | } 33 | 34 | $number: nth($numbers, $index); 35 | 36 | @if $divider == 0 { 37 | $result: $result * 10; 38 | } 39 | 40 | @else { 41 | // Move the decimal dot to the left 42 | $divider: $divider * 10; 43 | $number: $number / $divider; 44 | } 45 | 46 | $result: $result + $number; 47 | } 48 | } 49 | @return if($minus, $result * -1, $result); 50 | } 51 | -------------------------------------------------------------------------------- /_sass/bourbon/settings/_asset-pipeline.scss: -------------------------------------------------------------------------------- 1 | $asset-pipeline: false !default; 2 | -------------------------------------------------------------------------------- /_sass/bourbon/settings/_prefixer.scss: -------------------------------------------------------------------------------- 1 | // Variable settings for /addons/prefixer.scss 2 | $prefix-for-webkit: true !default; 3 | $prefix-for-mozilla: true !default; 4 | $prefix-for-microsoft: true !default; 5 | $prefix-for-opera: true !default; 6 | $prefix-for-spec: true !default; // required for keyframe mixin 7 | -------------------------------------------------------------------------------- /_sass/bourbon/settings/_px-to-em.scss: -------------------------------------------------------------------------------- 1 | $em-base: 16px !default; 2 | -------------------------------------------------------------------------------- /about.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: page 3 | title: About 4 | permalink: /about/ 5 | --- 6 | 7 | 8 | 9 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac augue libero. 10 | Fusce ac tempor dolor. Ut est dui, gravida a consequat aliquet, fermentum 11 | sodales risus. Suspendisse eu arcu id mi ornare facilisis non id nisl. Maecenas 12 | nec congue arcu, non semper neque. Proin mollis nisl diam, eu ultrices diam 13 | facilisis et. Integer fringilla lorem quis semper venenatis. 14 | 15 | Aliquam vestibulum purus enim. Sed rhoncus interdum erat id consequat. Nulla 16 | cursus venenatis massa, quis convallis lacus condimentum vel. Etiam mollis, 17 | orci ac pharetra commodo, diam lectus hendrerit eros, ac elementum magna augue 18 | sed tellus. Maecenas molestie, nisi ut sodales scelerisque, purus neque 19 | imperdiet dui, mollis elementum sem augue vel ipsum. Nulla lacinia arcu at quam 20 | lobortis, vitae interdum tellus fermentum. Cum sociis natoque penatibus et 21 | magnis dis parturient montes, nascetur ridiculus mus. Fusce sodales semper erat, 22 | eu fringilla ligula vulputate id. Maecenas quis libero pellentesque lacus 23 | egestas vehicula sit amet et neque. Nulla nec facilisis sem. Pellentesque rutrum 24 | elementum molestie. Quisque eget dui ac quam placerat dictum. Suspendisse quis 25 | ante placerat, efficitur enim ut, commodo tortor. Etiam consequat, eros quis 26 | consequat congue, augue mauris molestie libero, sed iaculis lectus enim eu magna. 27 | 28 | Etiam sapien dolor, mattis vel feugiat nec, egestas eget risus. Lorem ipsum 29 | dolor sit amet, consectetur adipiscing elit. Aenean aliquam massa a est porta 30 | vehicula. Cras eu gravida massa. Integer non sem ac mi ultrices posuere a 31 | pretium tortor. Mauris vitae varius sem. Praesent faucibus nec felis et dictum. 32 | Vestibulum lorem velit, laoreet nec vestibulum in, varius nec enim. 33 | -------------------------------------------------------------------------------- /assets/images/author.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ageitgey/amplify/6190950c8c9ef1686cf53d0fc40274d2e19f795f/assets/images/author.jpg -------------------------------------------------------------------------------- /assets/images/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ageitgey/amplify/6190950c8c9ef1686cf53d0fc40274d2e19f795f/assets/images/logo.jpg -------------------------------------------------------------------------------- /assets/images/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ageitgey/amplify/6190950c8c9ef1686cf53d0fc40274d2e19f795f/assets/images/screenshot.png -------------------------------------------------------------------------------- /assets/images/speed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ageitgey/amplify/6190950c8c9ef1686cf53d0fc40274d2e19f795f/assets/images/speed.png -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ageitgey/amplify/6190950c8c9ef1686cf53d0fc40274d2e19f795f/favicon.ico -------------------------------------------------------------------------------- /feed.xml: -------------------------------------------------------------------------------- 1 | --- 2 | layout: null 3 | --- 4 | 5 | 6 | 7 | {{ site.title | xml_escape }} 8 | {{ site.description | xml_escape }} 9 | {{ site.url }}{{ site.baseurl }}/ 10 | 11 | {{ site.time | date_to_rfc822 }} 12 | {{ site.time | date_to_rfc822 }} 13 | Jekyll v{{ jekyll.version }} 14 | {% for post in site.posts limit:10 %} 15 | 16 | {{ post.title | xml_escape }} 17 | {{ post.content | xml_escape }} 18 | {{ post.date | date_to_rfc822 }} 19 | {{ post.url | prepend: site.baseurl | prepend: site.url }} 20 | {{ post.url | prepend: site.baseurl | prepend: site.url }} 21 | {% for tag in post.tags %} 22 | {{ tag | xml_escape }} 23 | {% endfor %} 24 | {% for cat in post.categories %} 25 | {{ cat | xml_escape }} 26 | {% endfor %} 27 | 28 | {% endfor %} 29 | 30 | 31 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
6 | 7 |
8 |

{{ site.title }}

9 |

{{ site.description }}

10 |
11 | 12 |
13 | {% for post in paginator.posts %} 14 |
15 |
16 |
17 |

18 |
19 |
20 |

{{ post.excerpt | strip_html | truncatewords: 50 }}

21 |
22 |
23 | 24 |
25 |
26 |
27 | {% endfor %} 28 |
29 | 30 | 47 | 48 |
49 | 50 | {% include footer.html %} 51 | --------------------------------------------------------------------------------