├── .gitignore ├── LICENSE ├── README.md ├── _config.yml ├── _data ├── layout.yml └── settings.yml ├── _includes ├── about.html ├── analytics.html ├── clients.html ├── contact.html ├── footer.html ├── form.html ├── header.html ├── icons │ ├── icon-back.html │ ├── icon-browser.html │ ├── icon-mouse.html │ ├── icon-next.html │ ├── icon-pencil.html │ ├── icon-prev.html │ ├── icon-quote-mark.html │ └── icon-video.html ├── work.html └── work │ ├── proj-1.html │ ├── proj-2.html │ ├── proj-3.html │ ├── proj-4.html │ ├── proj-5.html │ ├── proj-6.html │ ├── proj-7.html │ └── proj-8.html ├── assets ├── css │ ├── 1-tools │ │ ├── _-tools-dir.sass │ │ ├── _fonts.scss │ │ ├── _icon-font.scss │ │ ├── _normalize.scss │ │ ├── _spinner.scss │ │ ├── animations │ │ │ ├── _animations-dir.sass │ │ │ ├── _bottomDoor.sass │ │ │ ├── _bottomUp.sass │ │ │ ├── _bounceOut.scss │ │ │ ├── _fadeIn.sass │ │ │ ├── _leftRight.sass │ │ │ ├── _none.sass │ │ │ ├── _rightLeft.sass │ │ │ ├── _textSlide.sass │ │ │ ├── _topDoor.sass │ │ │ └── _topDown.sass │ │ └── 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 │ │ │ ├── _prefixer.scss │ │ │ └── _px-to-em.scss │ ├── 2-base │ │ ├── _-base-dir.sass │ │ ├── _base.sass │ │ └── _placeholders.sass │ ├── 3-sections │ │ ├── _-sections-dir.sass │ │ ├── _about.sass │ │ ├── _clients.sass │ │ ├── _contact.sass │ │ ├── _footer.sass │ │ ├── _form-success.sass │ │ ├── _form.sass │ │ ├── _header.sass │ │ └── _work.sass │ └── all.sass ├── img │ ├── back-btn.png │ ├── clients │ │ ├── face-aaroni.jpg │ │ ├── face-atariboy.jpg │ │ ├── face-jackiesaik.jpg │ │ ├── face-teleject.jpg │ │ ├── logo1.png │ │ ├── logo2.png │ │ ├── logo3.png │ │ └── logo4.png │ ├── hero-bg.jpg │ ├── logo.svg │ ├── the_design.jpg │ ├── travitar.jpg │ └── work │ │ ├── proj-1 │ │ ├── img1.jpg │ │ ├── img2.jpg │ │ ├── img3.jpg │ │ ├── img4.jpg │ │ ├── img5.jpg │ │ └── thumb.jpg │ │ ├── proj-2 │ │ ├── CityIn-AntonSkvortsov.jpg │ │ └── thumb.jpg │ │ ├── proj-3 │ │ ├── CrispyIcons-PetrasNargela.jpg │ │ ├── Thumbs.db │ │ └── thumb.jpg │ │ ├── proj-4 │ │ ├── flatmobile-AyoubElred.jpg │ │ └── thumb.jpg │ │ ├── proj-5 │ │ ├── freshitup-JieyuXiong.jpg │ │ └── thumb.jpg │ │ ├── proj-6 │ │ ├── TimeLinePage-SergeyValiukh.jpg │ │ └── thumb.jpg │ │ ├── proj-7 │ │ ├── img0.jpg │ │ ├── img1.jpg │ │ ├── img2.jpg │ │ ├── img3.jpg │ │ ├── img4.jpg │ │ └── thumb.jpg │ │ └── proj-8 │ │ ├── stripes-co-NickZoutendijk.jpg │ │ └── thumb.jpg └── js │ └── functions.js ├── favicon.ico ├── form-success.html ├── index.html ├── the_design.psd └── work ├── proj-1.md ├── proj-2.md ├── proj-3.md ├── proj-4.md ├── proj-5.md ├── proj-6.md ├── proj-7.md └── proj-8.md /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by http://www.gitignore.io 2 | 3 | ### OSX ### 4 | .DS_Store 5 | .AppleDouble 6 | .LSOverride 7 | 8 | # Icon must end with two \r 9 | Icon 10 | 11 | 12 | # Thumbnails 13 | ._* 14 | 15 | # Files that might appear on external disk 16 | .Spotlight-V100 17 | .Trashes 18 | 19 | # Directories potentially created on remote AFP share 20 | .AppleDB 21 | .AppleDesktop 22 | Network Trash Folder 23 | Temporary Items 24 | .apdisk 25 | 26 | 27 | ### Jekyll ### 28 | _site/ 29 | 30 | ### Sass ### 31 | .sass-cache 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | This is free and unencumbered software released into the public domain. 2 | 3 | Anyone is free to copy, modify, publish, use, compile, sell, or 4 | distribute this software, either in source code form or as a compiled 5 | binary, for any purpose, commercial or non-commercial, and by any 6 | means. 7 | 8 | In jurisdictions that recognize copyright laws, the author or authors 9 | of this software dedicate any and all copyright interest in the 10 | software to the public domain. We make this dedication for the benefit 11 | of the public at large and to the detriment of our heirs and 12 | successors. We intend this dedication to be an overt act of 13 | relinquishment in perpetuity of all present and future rights to this 14 | software under copyright law. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | 24 | For more information, please refer to -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Artists Theme 2 | 3 | This site is being built on YouTube, one week at a time. See all the videos up to date here: [How to build a professional website from start to finish](https://www.youtube.com/playlist?list=PLqGj3iMvMa4KQZUkRjfwMmTq_f1fbxerI) 4 | 5 | Subscribe to [the channel](https://www.youtube.com/user/DevTipsForDesigners) to follow along as we develop this project step by step from the beginning. 6 | 7 | ## How to install/use 8 | 9 | In order to get this super fantastic [Jekyll](http://jekyllrb.com) powered template for Artists follow this simple step: 10 | 11 | * If you haven't got ruby installed on your computer, install it. 12 | * Then run in your terminal `$ gem install jekyll` 13 | * Move/`cd` to a folder, always in your terminal, in which you want to insert the *Artists-Theme* 14 | * Run `git clone https://github.com/DevTips/Artists-Theme.git` 15 | * Then `cd Artists-Theme` 16 | * `jekyll serve --watch` 17 | * **DONE** 18 | 19 | Isn't it fantastic? 20 | 21 | Learn how to [use Jekyll on windows](http://jekyll-windows.juthilo.com/) (if that's your thing :) 22 | 23 | 24 | 25 | ## Credits 26 | 27 | _Code contributions via pull request:_ 28 | - [Riccardo Pasianotto](http://rkpasia.github.io) 29 | - [cust0dian](https://github.com/cust0dian) 30 | - [Dylan Spicker](https://github.com/ZDesign) 31 | - [arielsafari](https://github.com/arielsafari) 32 | - [bzerangue](https://github.com/bzerangue) 33 | - [Brian Guerrero](https://github.com/brian-guerrero) 34 | - [Vipul Bansal](https://github.com/vipsyvipul) 35 | - [iiSa3](https://github.com/iiSa3) 36 | - [Killua13](https://github.com/Killua13) 37 | - [iMoritz](https://github.com/iMoritz) 38 | - [jgrimshaw](https://github.com/jgrimshaw) 39 | - [boodaah](https://github.com/boodaah) 40 | - [Vadzim](https://github.com/meecrobe) 41 | - [Eric Ellenbrook](https://github.com/ellenbrook) 42 | - [rodrigofuentes](https://github.com/rodrigofuentes) 43 | - [Jonathan](https://github.com/foohyfooh) 44 | - [George](https://github.com/g3org3) 45 | - [Anders Thuesen](https://github.com/ande765a) 46 | - [beRoberto](https://github.com/beRoberto) 47 | - [Sven Kube](https://github.com/SvenKube) 48 | 49 | _A big thank you to these creators for contributing sample projects for the "work" section:_ 50 | - [Micael Butial](https://www.behance.net/gallery/14751131/-TYPO-International-Design-Talks) 51 | - [Petras Nargėla](https://www.behance.net/gallery/16750837/Free-80-Crispy-Icons-in-PSD-AI-SVG-Webfont) 52 | - [Sergey Valiukh](https://www.behance.net/gallery/13745729/Timeline-Page) 53 | - [Ayoub Elred](https://www.behance.net/gallery/15812143/Flat-Mobile-UIUX-Concept-download) 54 | - [Anton Skvortsov](https://www.behance.net/gallery/16483395/City-IN-website-concept) 55 | - [Nick Zoutendijk](https://www.behance.net/gallery/13870569/Stripes-Co-Free-icon-Set) 56 | - [Jonathan Quintin](https://www.behance.net/gallery/12748107/Weather-Dashboard-Global-Outlook-UIUX) 57 | - [Jieyu Xiong](https://www.behance.net/gallery/15063575/Fresh-It-Up-App-Design) 58 | 59 | 60 | ![The Design](/assets/img/the_design.jpg) 61 | 62 | 63 | _Artist Themes in the wild:_ 64 | - [limestudios](http://limestudios.net/) 65 | 66 | 67 | --- 68 | 69 | 70 | This is a free Jekyll Theme that is currently being developed in weekly episodes on the [DevTips YouTube channel](http://youtube.com/devtipsfordesigners). 71 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # Build settings 2 | 3 | markdown: kramdown 4 | permalink: pretty 5 | 6 | port: 8000 7 | 8 | include: ['_includes/work'] 9 | exclude: ['the_design.psd'] 10 | 11 | sass: 12 | sass_dir: assets/css 13 | style: :nested 14 | -------------------------------------------------------------------------------- /_data/layout.yml: -------------------------------------------------------------------------------- 1 | # Layout settings 2 | 3 | animation: "bounceOut" 4 | 5 | # Images 6 | 7 | logo: "logo.svg" 8 | hero: "hero-bg.jpg" 9 | avatar: "travitar.jpg" 10 | 11 | # Colors 12 | 13 | accent: "#c99065" 14 | 15 | textColor: "#666" 16 | headlineColor: "#333" 17 | bgcolor: "#e5eaee" 18 | documentBackgroundColor: "#fff" 19 | -------------------------------------------------------------------------------- /_data/settings.yml: -------------------------------------------------------------------------------- 1 | #------------------------------- 2 | # General Site Settings 3 | 4 | title: Artists Theme 5 | description: Thinker // Designer // YouTuber 6 | email: devtipsfordesigners@gmail.com 7 | 8 | # NOTE: The Logo and Background image are defined in the all.sass document. 9 | 10 | menu: 11 | - {name: About Me, url: '#about-me'} 12 | - {name: Work, url: '#work'} 13 | - {name: Clients, url: '#clients'} 14 | - {name: Contact, url: '#contact'} 15 | 16 | #------------------------------- 17 | # SEO Section 18 | 19 | # NOTE: Providing SEO information will make this website more searchable on the internet. 20 | 21 | seo: 22 | description: 'Provide a description for your website to make it visible to search engines.' 23 | rel-author: 'https://plus.google.com/u/0/+DevTipsForDesigners/' 24 | rel-publisher: 'https://plus.google.com/u/0/+DevTipsForDesigners/' 25 | 26 | #------------------------------- 27 | # Google Analytics Section 28 | 29 | # Analytics helps you understand who visits your website. 30 | # Learn more at: http://support.google.com/analytics/answer/1008065 31 | 32 | # NOTE: If you want to use Google Analytics for basic web tracking: Just uncomment and enter your UA-Code here. 33 | 34 | #google-analytics-ua: UA-XXXXXX-X 35 | 36 | #------------------------------- 37 | # About Section 38 | 39 | # NOTE: The avatar is defined in the all.sass document. 40 | 41 | blurb: > 42 | **Travis specializes in making things** for human people. 43 | Most of the things he makes are [digital interfaces](http://travisneilson.com){:target="_blank"}, 44 | but he also puts effort into crafting [next-level beats](http://soundcloud.com/travis-neilson){:target="_blank"} 45 | and [YouTube videos](http://youtube.com/user/devtipsfordesigners){:target="_blank"} about making codes happen. 46 | 47 | 48 | skills: 49 | - {name: Communication, value: '9'} 50 | - {name: Organization, value: '7'} 51 | - {name: Learning, value: '10'} 52 | - {name: Teaching, value: '6'} 53 | - {name: Planning, value: '7'} 54 | - {name: Visual Design, value: '5'} 55 | - {name: UX Design, value: '8'} 56 | - {name: Programming, value: '6'} 57 | 58 | #------------------------------- 59 | # Work Section 60 | 61 | projects: 62 | - {name: TYPO International Design Talks, folder: 'proj-1', file: 'work/proj-1.html'} 63 | - {name: City-IN website concept, folder: 'proj-2', file: 'work/proj-2.html'} 64 | - {name: Crispy Icons, folder: 'proj-3', file: 'work/proj-3.html'} 65 | - {name: Flat Mobile UI/UX Concept, folder: 'proj-4', file: 'work/proj-4.html'} 66 | - {name: Fresh It Up, folder: 'proj-5', file: 'work/proj-5.html'} 67 | - {name: Timeline Page, folder: 'proj-6', file: 'work/proj-6.html'} 68 | - {name: Weather Dashboard, folder: 'proj-7', file: 'work/proj-7.html'} 69 | - {name: Stripes & Co, folder: 'proj-8', file: 'work/proj-8.html'} 70 | 71 | 72 | 73 | 74 | #------------------------------- 75 | # Clients Section 76 | 77 | clients: 78 | - {avatar: 'face-aaroni.jpg', 79 | name: 'Scott Summers', 80 | title: 'Director of Design, OnToText Ind.', 81 | quote: '

While we all felt that Travis was a great asset to our team — and really worked hard to understand our products from the point of view of the customer — we also all agree he should shower more often.

', 82 | logo: 'logo1.png'} 83 | - {avatar: 'face-atariboy.jpg', 84 | name: 'Hank McCoy', 85 | title: 'Eater of Salad, Antartica Int.', 86 | quote: '

Working with Travis was the highlight of my career. Other moments of note were collecting the largest number of paperclips in the office, and winning a trophy for saying "uh huh, and then what?" 30 times in a row to my girlfriend without her noticing.

', 87 | logo: 'logo2.png'} 88 | - {avatar: 'face-jackiesaik.jpg', 89 | name: 'Stacy Lang', 90 | title: 'Social Media Girl, Quebec Int.', 91 | quote: '

Yea, I guess hes good at computers or something, but let me ask you this: If a cat always lands on its feet, and buttered bread always lands butter side down, what would happen if you tied buttered bread on top of a cat?

', 92 | logo: 'logo3.png'} 93 | - {avatar: 'face-teleject.jpg', 94 | name: 'Cleatus Cassidy', 95 | title: 'VP of Helmut, Lorem Sorem LLC.', 96 | quote: '

Back in old country only nerds who is playing on computers. Now all bros is wanting to make codes and junk. I lost foot in war. You dont see girls asking me about homework.

', 97 | logo: 'logo4.png'} 98 | 99 | 100 | #------------------------------- 101 | # Contact Section 102 | 103 | social: 104 | - {icon: 'twitter', link: 'http://twitter.com/devtipsshow'} 105 | - {icon: 'dribbble', link: 'https://dribbble.com/travisneilson'} 106 | - {icon: 'behance', link: 'https://www.behance.net/travisneilson'} 107 | - {icon: 'youtube', link: 'https://www.youtube.com/DevTipsForDesigners'} 108 | - {icon: 'linkedin', link: 'http://www.linkedin.com/in/travisneilson/'} 109 | 110 | 111 | # social network icons available: 'twitter' / 'facebook' / 'github' / 'pinterest' 'google-plus' / 'linkedin' / 'youtube' / 'instagram' / 'dribbble' / 'behance' / 'soundcloud' / 'vine' 112 | -------------------------------------------------------------------------------- /_includes/about.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

About Myself

4 | 5 |
6 | 7 |
8 | 9 |
{% include icons/icon-pencil.html %}
10 |
{% include icons/icon-mouse.html %}
11 |
{% include icons/icon-browser.html %}
12 |
{% include icons/icon-video.html %}
13 | 14 |
15 | 16 | 17 |
18 | {{ site.data.settings.blurb | markdownify }} 19 |
20 | 21 | {% if site.data.settings.skills %} 22 | 23 |
24 | 25 | {% for skill in site.data.settings.skills %} 26 | 27 |
28 |
{{ skill.name }}
29 |
30 | {% for i in (1..10) %} 31 | 32 | {% endfor %} 33 |
34 |
35 | 36 | {% endfor %} 37 | 38 |
39 | 40 | {% endif %} 41 | 42 |
43 | -------------------------------------------------------------------------------- /_includes/analytics.html: -------------------------------------------------------------------------------- 1 | {% if site.data.settings.google-analytics-ua %} 2 | 11 | {% endif %} 12 | -------------------------------------------------------------------------------- /_includes/clients.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

Clients

4 | 5 |
6 | {% for client in site.data.settings.clients %} 7 | 8 | {% endfor %} 9 |
10 | 11 |
12 | {% for client in site.data.settings.clients %} 13 |
14 | 15 |
16 | client-face 17 |
18 | {{ client.name }} 19 | {{ client.title }} 20 |
21 |
22 | 23 |
24 |
{% include icons/icon-quote-mark.html %}
25 | {{ client.quote }} 26 |
27 |
28 | {% endfor %} 29 | 30 |
31 | 32 |
33 |
{% include icons/icon-next.html %}
34 |
{% include icons/icon-prev.html %}
35 |
36 | 37 |
38 | {% for client in site.data.settings.clients %} 39 | 40 | {% endfor %} 41 |
42 | 43 |
44 | -------------------------------------------------------------------------------- /_includes/contact.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

Contact

4 | 5 | 6 | 11 | 12 |
13 | 14 | {{ site.data.settings.email }} 15 | 16 |
17 | -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 | 18 | -------------------------------------------------------------------------------- /_includes/form.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

Let's work together

4 | 5 |
6 | 7 |
8 | 9 | 11 | 12 | 14 | 15 |
16 | 17 | 19 | 20 |
21 | 22 |
23 | 24 |
25 | 26 |
27 | -------------------------------------------------------------------------------- /_includes/header.html: -------------------------------------------------------------------------------- 1 | 13 | -------------------------------------------------------------------------------- /_includes/icons/icon-back.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_includes/icons/icon-browser.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_includes/icons/icon-mouse.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_includes/icons/icon-next.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 9 | 10 | -------------------------------------------------------------------------------- /_includes/icons/icon-pencil.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_includes/icons/icon-prev.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 9 | 10 | -------------------------------------------------------------------------------- /_includes/icons/icon-quote-mark.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 12 | -------------------------------------------------------------------------------- /_includes/icons/icon-video.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /_includes/work.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

Work

4 | {% for project in site.data.settings.projects %} 5 | 6 | {% endfor %} 7 | 8 | 9 | 10 |
11 | 12 |
13 |
14 | {% for project in site.data.settings.projects %} 15 | 23 | {% endfor %} 24 |
25 |
26 | 27 |
28 |
29 | 32 |

33 |
34 | 35 | 45 | 46 |
47 |
48 | 49 |
50 |
51 | -------------------------------------------------------------------------------- /_includes/work/proj-1.html: -------------------------------------------------------------------------------- 1 | Typo International 2 | 3 |

TYPO: International Design Talks is an annual event held in Berlin, London, and San Francisco. This promotional project is developed to market the event for the designindustry. The use of patterns, sophisticated color scheme and typography are applied for the print and mobile application.

4 | 5 | Typo International 6 | Typo International 7 | Typo International 8 | Typo International -------------------------------------------------------------------------------- /_includes/work/proj-2.html: -------------------------------------------------------------------------------- 1 | City In -------------------------------------------------------------------------------- /_includes/work/proj-3.html: -------------------------------------------------------------------------------- 1 | Crispy Icons -------------------------------------------------------------------------------- /_includes/work/proj-4.html: -------------------------------------------------------------------------------- 1 | Flat Mobile UX -------------------------------------------------------------------------------- /_includes/work/proj-5.html: -------------------------------------------------------------------------------- 1 | Fersh It Up -------------------------------------------------------------------------------- /_includes/work/proj-6.html: -------------------------------------------------------------------------------- 1 | Time Line Page 2 | -------------------------------------------------------------------------------- /_includes/work/proj-7.html: -------------------------------------------------------------------------------- 1 | Weather Dashboard 2 | Weather Dashboard 3 | Weather Dashboard 4 | Weather Dashboard 5 | Weather Dashboard 6 | -------------------------------------------------------------------------------- /_includes/work/proj-8.html: -------------------------------------------------------------------------------- 1 | Stripes & Co -------------------------------------------------------------------------------- /assets/css/1-tools/_-tools-dir.sass: -------------------------------------------------------------------------------- 1 | @import 'bourbon/bourbon' 2 | @import 'normalize' 3 | @import 'fonts' 4 | @import 'animations/_animations-dir' 5 | @import 'spinner' 6 | @import 'icon-font' 7 | -------------------------------------------------------------------------------- /assets/css/1-tools/_fonts.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Open Sans'; 3 | font-style: normal; 4 | font-weight: 300; 5 | src: local('Open Sans Light'), local('OpenSans-Light'), url(//themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff'); 6 | } 7 | @font-face { 8 | font-family: 'Open Sans'; 9 | font-style: normal; 10 | font-weight: 400; 11 | src: local('Open Sans'), local('OpenSans'), url(//themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff'); 12 | } 13 | @font-face { 14 | font-family: 'Open Sans'; 15 | font-style: normal; 16 | font-weight: 700; 17 | src: local('Open Sans Bold'), local('OpenSans-Bold'), url(//themes.googleusercontent.com/static/fonts/opensans/v8/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format('woff'); 18 | } -------------------------------------------------------------------------------- /assets/css/1-tools/_icon-font.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "icomoon"; 3 | src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype'), 4 | url(data:application/font-woff;charset=utf-8;base64,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) format('woff'); 5 | font-weight: normal; 6 | font-style: normal; 7 | } 8 | 9 | [class^="icon-"], [class*=" icon-"] { 10 | font-family: "icomoon"; 11 | line-height: 1; 12 | 13 | /* Add 1px margin-top to center the icon */ 14 | display: block; 15 | margin-top: 1px; 16 | 17 | -webkit-font-smoothing: antialiased; 18 | -moz-osx-font-smoothing: grayscale; 19 | } 20 | 21 | .icon-twitter:before { content: "\e602"; } 22 | .icon-facebook:before { content: "\e603"; } 23 | .icon-github:before { content: "\e600"; } 24 | .icon-pinterest:before { content: "\e608"; } 25 | .icon-google-plus:before { content: "\e604"; } 26 | .icon-linkedin:before { content: "\e601"; } 27 | .icon-youtube:before { content: "\e60b"; } 28 | .icon-instagram:before { content: "\e609"; } 29 | .icon-dribbble:before { content: "\e605"; } 30 | .icon-behance:before { content: "\e607"; } 31 | .icon-soundcloud:before { content: "\e606"; } 32 | .icon-vine:before { content: "\e60a"; } -------------------------------------------------------------------------------- /assets/css/1-tools/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} -------------------------------------------------------------------------------- /assets/css/1-tools/_spinner.scss: -------------------------------------------------------------------------------- 1 | .loader:before, 2 | .loader:after, 3 | .loader { 4 | border-radius: 50%; 5 | width: 2.5em; 6 | height: 2.5em; 7 | -webkit-animation-fill-mode: both; 8 | animation-fill-mode: both; 9 | -webkit-animation: load7 1.8s infinite ease-in-out; 10 | animation: load7 1.8s infinite ease-in-out; 11 | } 12 | .loader { 13 | margin: 8em auto; 14 | font-size: 10px; 15 | position: relative; 16 | text-indent: -9999em; 17 | -webkit-animation-delay: 0.16s; 18 | animation-delay: 0.16s; 19 | } 20 | .loader:before { 21 | left: -3.5em; 22 | } 23 | .loader:after { 24 | left: 3.5em; 25 | -webkit-animation-delay: 0.32s; 26 | animation-delay: 0.32s; 27 | } 28 | .loader:before, 29 | .loader:after { 30 | content: ''; 31 | position: absolute; 32 | top: 0; 33 | } 34 | @-webkit-keyframes load7 { 35 | 0%, 36 | 80%, 37 | 100% { 38 | box-shadow: 0 2.5em 0 -1.3em #ffffff; 39 | } 40 | 40% { 41 | box-shadow: 0 2.5em 0 0 #FFF; 42 | } 43 | } 44 | @keyframes load7 { 45 | 0%, 46 | 80%, 47 | 100% { 48 | box-shadow: 0 2.5em 0 -1.3em #ffffff; 49 | } 50 | 40% { 51 | box-shadow: 0 2.5em 0 0 #FFF; 52 | } 53 | } -------------------------------------------------------------------------------- /assets/css/1-tools/animations/_animations-dir.sass: -------------------------------------------------------------------------------- 1 | @import 'bounceOut' 2 | @import 'fadeIn' 3 | @import 'bottomUp' 4 | @import 'none' 5 | @import 'topDown' 6 | @import 'bottomDoor' 7 | @import 'topDoor' 8 | @import 'leftRight' 9 | @import 'rightLeft' 10 | @import 'textSlide' -------------------------------------------------------------------------------- /assets/css/1-tools/animations/_bottomDoor.sass: -------------------------------------------------------------------------------- 1 | /* 2 | Animation: bottomDoor 3 | Source: Travis Nielson */ 4 | 5 | // Initial Conditions 6 | %animationstart_bottomDoor 7 | +size(100%) 8 | +position(absolute, 50% 0px null 0px) 9 | +transition(800ms) 10 | +transform(rotateX(90deg)) 11 | +transform-origin(center bottom) 12 | 13 | %bottomDoor 14 | top: 0% 15 | +transform(rotateX(0deg)) -------------------------------------------------------------------------------- /assets/css/1-tools/animations/_bottomUp.sass: -------------------------------------------------------------------------------- 1 | /* 2 | Animation: bottomUp 3 | Source: Travis Nielson */ 4 | 5 | // Initial Class 6 | %animationstart_bottomUp 7 | +size(100%) 8 | +position(absolute, 100% 0px null 0px) 9 | +transition 10 | 11 | // Animation Class 12 | %bottomUp 13 | opacity: 1 14 | top: 0% -------------------------------------------------------------------------------- /assets/css/1-tools/animations/_bounceOut.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Animation: bounceOut 3 | Source: Bounce.Js */ 4 | 5 | // Initial Class 6 | %animationstart_bounceOut{ 7 | height: 0%; 8 | width: 0%; 9 | top: 0%; 10 | overflow: hidden; 11 | } 12 | 13 | // Animation Class 14 | %bounceOut { 15 | -webkit-animation: animation 1s linear both; 16 | animation: animation 1s linear both; 17 | z-index: 2; 18 | } 19 | 20 | @-webkit-keyframes animation { 21 | 0% {height: 0%; width: 0%; -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 22 | 3.333333% {height: 100%; width: 100%; -webkit-transform: matrix3d(0.34323, 0.11487, 0, 0, 0.07506, 0.34323, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.34323, 0.11487, 0, 0, 0.07506, 0.34323, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 23 | 6.666667% { -webkit-transform: matrix3d(0.65416, 0.2159, 0, 0, 0.14115, 0.65416, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.65416, 0.2159, 0, 0, 0.14115, 0.65416, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 24 | 10% { -webkit-transform: matrix3d(0.88518, 0.18431, 0, 0, 0.1219, 0.88518, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.88518, 0.18431, 0, 0, 0.1219, 0.88518, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 25 | 13.333333% { -webkit-transform: matrix3d(1.02792, 0.0976, 0, 0, 0.06496, 1.02792, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.02792, 0.0976, 0, 0, 0.06496, 1.02792, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 26 | 16.666667% { -webkit-transform: matrix3d(1.09602, 0.02621, 0, 0, 0.01747, 1.09602, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.09602, 0.02621, 0, 0, 0.01747, 1.09602, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 27 | 20% { -webkit-transform: matrix3d(1.1117, -0.0094, 0, 0, -0.00627, 1.1117, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1117, -0.0094, 0, 0, -0.00627, 1.1117, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 28 | 23.333333% { -webkit-transform: matrix3d(1.09709, -0.01805, 0, 0, -0.01203, 1.09709, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.09709, -0.01805, 0, 0, -0.01203, 1.09709, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 29 | 26.666667% { -webkit-transform: matrix3d(1.0698, -0.0143, 0, 0, -0.00954, 1.0698, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.0698, -0.0143, 0, 0, -0.00954, 1.0698, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 30 | 30% { -webkit-transform: matrix3d(1.04151, -0.00794, 0, 0, -0.0053, 1.04151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.04151, -0.00794, 0, 0, -0.0053, 1.04151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 31 | 33.333333% { -webkit-transform: matrix3d(1.01844, -0.00306, 0, 0, -0.00204, 1.01844, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01844, -0.00306, 0, 0, -0.00204, 1.01844, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 32 | 36.666667% { -webkit-transform: matrix3d(1.00277, -0.00038, 0, 0, -0.00025, 1.00277, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00277, -0.00038, 0, 0, -0.00025, 1.00277, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 33 | 40% { -webkit-transform: matrix3d(0.99411, 0.00064, 0, 0, 0.00043, 0.99411, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99411, 0.00064, 0, 0, 0.00043, 0.99411, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 34 | 43.333333% { -webkit-transform: matrix3d(0.99083, 0.00076, 0, 0, 0.0005, 0.99083, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99083, 0.00076, 0, 0, 0.0005, 0.99083, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 35 | 46.666667% { -webkit-transform: matrix3d(0.991, 0.00053, 0, 0, 0.00035, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.991, 0.00053, 0, 0, 0.00035, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 36 | 50% { -webkit-transform: matrix3d(0.99292, 0.00027, 0, 0, 0.00018, 0.99292, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99292, 0.00027, 0, 0, 0.00018, 0.99292, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 37 | 53.333333% { -webkit-transform: matrix3d(0.99535, 0.00008, 0, 0, 0.00006, 0.99535, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99535, 0.00008, 0, 0, 0.00006, 0.99535, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 38 | 56.666667% { -webkit-transform: matrix3d(0.99755, -0.00001, 0, 0, 0, 0.99755, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99755, -0.00001, 0, 0, 0, 0.99755, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 39 | 60% { -webkit-transform: matrix3d(0.99919, -0.00004, 0, 0, -0.00002, 0.99919, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99919, -0.00004, 0, 0, -0.00002, 0.99919, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 40 | 63.333333% { -webkit-transform: matrix3d(1.0002, -0.00003, 0, 0, -0.00002, 1.0002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.0002, -0.00003, 0, 0, -0.00002, 1.0002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 41 | 66.666667% { -webkit-transform: matrix3d(1.00068, -0.00002, 0, 0, -0.00001, 1.00068, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00068, -0.00002, 0, 0, -0.00001, 1.00068, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 42 | 70% { -webkit-transform: matrix3d(1.00079, -0.00001, 0, 0, -0.00001, 1.00079, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00079, -0.00001, 0, 0, -0.00001, 1.00079, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 43 | 73.333333% { -webkit-transform: matrix3d(1.00069, 0, 0, 0, 0, 1.00069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00069, 0, 0, 0, 0, 1.00069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 44 | 76.666667% { -webkit-transform: matrix3d(1.00049, 0, 0, 0, 0, 1.00049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00049, 0, 0, 0, 0, 1.00049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 45 | 80% { -webkit-transform: matrix3d(1.00029, 0, 0, 0, 0, 1.00029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00029, 0, 0, 0, 0, 1.00029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 46 | 83.333333% { -webkit-transform: matrix3d(1.00013, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00013, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 47 | 86.666667% { -webkit-transform: matrix3d(1.00002, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00002, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 48 | 90% { -webkit-transform: matrix3d(0.99996, 0, 0, 0, 0, 0.99996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99996, 0, 0, 0, 0, 0.99996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 49 | 93.333333% { -webkit-transform: matrix3d(0.99994, 0, 0, 0, 0, 0.99994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99994, 0, 0, 0, 0, 0.99994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 50 | 96.666667% { -webkit-transform: matrix3d(0.99994, 0, 0, 0, 0, 0.99994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99994, 0, 0, 0, 0, 0.99994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 51 | 100% {height: 100%; width: 100%; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 52 | } 53 | 54 | @keyframes animation { 55 | 0% {height: 0%; width: 0%; -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 56 | 3.333333% {height: 100%; width: 100%; -webkit-transform: matrix3d(0.34323, 0.11487, 0, 0, 0.07506, 0.34323, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.34323, 0.11487, 0, 0, 0.07506, 0.34323, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 57 | 6.666667% { -webkit-transform: matrix3d(0.65416, 0.2159, 0, 0, 0.14115, 0.65416, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.65416, 0.2159, 0, 0, 0.14115, 0.65416, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 58 | 10% { -webkit-transform: matrix3d(0.88518, 0.18431, 0, 0, 0.1219, 0.88518, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.88518, 0.18431, 0, 0, 0.1219, 0.88518, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 59 | 13.333333% { -webkit-transform: matrix3d(1.02792, 0.0976, 0, 0, 0.06496, 1.02792, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.02792, 0.0976, 0, 0, 0.06496, 1.02792, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 60 | 16.666667% { -webkit-transform: matrix3d(1.09602, 0.02621, 0, 0, 0.01747, 1.09602, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.09602, 0.02621, 0, 0, 0.01747, 1.09602, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 61 | 20% { -webkit-transform: matrix3d(1.1117, -0.0094, 0, 0, -0.00627, 1.1117, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.1117, -0.0094, 0, 0, -0.00627, 1.1117, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 62 | 23.333333% { -webkit-transform: matrix3d(1.09709, -0.01805, 0, 0, -0.01203, 1.09709, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.09709, -0.01805, 0, 0, -0.01203, 1.09709, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 63 | 26.666667% { -webkit-transform: matrix3d(1.0698, -0.0143, 0, 0, -0.00954, 1.0698, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.0698, -0.0143, 0, 0, -0.00954, 1.0698, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 64 | 30% { -webkit-transform: matrix3d(1.04151, -0.00794, 0, 0, -0.0053, 1.04151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.04151, -0.00794, 0, 0, -0.0053, 1.04151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 65 | 33.333333% { -webkit-transform: matrix3d(1.01844, -0.00306, 0, 0, -0.00204, 1.01844, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.01844, -0.00306, 0, 0, -0.00204, 1.01844, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 66 | 36.666667% { -webkit-transform: matrix3d(1.00277, -0.00038, 0, 0, -0.00025, 1.00277, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00277, -0.00038, 0, 0, -0.00025, 1.00277, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 67 | 40% { -webkit-transform: matrix3d(0.99411, 0.00064, 0, 0, 0.00043, 0.99411, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99411, 0.00064, 0, 0, 0.00043, 0.99411, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 68 | 43.333333% { -webkit-transform: matrix3d(0.99083, 0.00076, 0, 0, 0.0005, 0.99083, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99083, 0.00076, 0, 0, 0.0005, 0.99083, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 69 | 46.666667% { -webkit-transform: matrix3d(0.991, 0.00053, 0, 0, 0.00035, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.991, 0.00053, 0, 0, 0.00035, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 70 | 50% { -webkit-transform: matrix3d(0.99292, 0.00027, 0, 0, 0.00018, 0.99292, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99292, 0.00027, 0, 0, 0.00018, 0.99292, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 71 | 53.333333% { -webkit-transform: matrix3d(0.99535, 0.00008, 0, 0, 0.00006, 0.99535, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99535, 0.00008, 0, 0, 0.00006, 0.99535, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 72 | 56.666667% { -webkit-transform: matrix3d(0.99755, -0.00001, 0, 0, 0, 0.99755, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99755, -0.00001, 0, 0, 0, 0.99755, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 73 | 60% { -webkit-transform: matrix3d(0.99919, -0.00004, 0, 0, -0.00002, 0.99919, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99919, -0.00004, 0, 0, -0.00002, 0.99919, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 74 | 63.333333% { -webkit-transform: matrix3d(1.0002, -0.00003, 0, 0, -0.00002, 1.0002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.0002, -0.00003, 0, 0, -0.00002, 1.0002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 75 | 66.666667% { -webkit-transform: matrix3d(1.00068, -0.00002, 0, 0, -0.00001, 1.00068, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00068, -0.00002, 0, 0, -0.00001, 1.00068, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 76 | 70% { -webkit-transform: matrix3d(1.00079, -0.00001, 0, 0, -0.00001, 1.00079, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00079, -0.00001, 0, 0, -0.00001, 1.00079, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 77 | 73.333333% { -webkit-transform: matrix3d(1.00069, 0, 0, 0, 0, 1.00069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00069, 0, 0, 0, 0, 1.00069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 78 | 76.666667% { -webkit-transform: matrix3d(1.00049, 0, 0, 0, 0, 1.00049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00049, 0, 0, 0, 0, 1.00049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 79 | 80% { -webkit-transform: matrix3d(1.00029, 0, 0, 0, 0, 1.00029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00029, 0, 0, 0, 0, 1.00029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 80 | 83.333333% { -webkit-transform: matrix3d(1.00013, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00013, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 81 | 86.666667% { -webkit-transform: matrix3d(1.00002, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.00002, 0, 0, 0, 0, 1.00002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 82 | 90% { -webkit-transform: matrix3d(0.99996, 0, 0, 0, 0, 0.99996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99996, 0, 0, 0, 0, 0.99996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 83 | 93.333333% { -webkit-transform: matrix3d(0.99994, 0, 0, 0, 0, 0.99994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99994, 0, 0, 0, 0, 0.99994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 84 | 96.666667% { -webkit-transform: matrix3d(0.99994, 0, 0, 0, 0, 0.99994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(0.99994, 0, 0, 0, 0, 0.99994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 85 | 100% {height: 100%; width: 100%; -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 86 | } -------------------------------------------------------------------------------- /assets/css/1-tools/animations/_fadeIn.sass: -------------------------------------------------------------------------------- 1 | /* 2 | Animation: fadeIn 3 | Source: Dylan Spicker 4 | Rewrite: niklasravnsborg */ 5 | 6 | // Initial Class 7 | %animationstart_fadeIn 8 | +position(0,0) 9 | +transition(800ms) 10 | opacity: 0 11 | 12 | // Animation Class 13 | %fadeIn 14 | opacity: 1 -------------------------------------------------------------------------------- /assets/css/1-tools/animations/_leftRight.sass: -------------------------------------------------------------------------------- 1 | /* 2 | Animation: leftRight 3 | Source: Dylan Spicker (but like really, no skill needed here) */ 4 | 5 | // Initial Class 6 | %animationstart_leftRight 7 | top: 0% 8 | left: -100% 9 | +size(100%) 10 | +transition(800ms) 11 | 12 | // Animation Class 13 | %leftRight 14 | left: 0% -------------------------------------------------------------------------------- /assets/css/1-tools/animations/_none.sass: -------------------------------------------------------------------------------- 1 | /* 2 | Animation: none 3 | Source: Dylan Spicker (but like really, no skill needed here) */ 4 | 5 | // Initial Class 6 | %animationstart_none 7 | +size(0%) 8 | top: 0% 9 | overflow: hidden 10 | 11 | // Animation Class 12 | %none 13 | +size(100%) 14 | -------------------------------------------------------------------------------- /assets/css/1-tools/animations/_rightLeft.sass: -------------------------------------------------------------------------------- 1 | /* 2 | Animation: rightLeft 3 | Source: Dylan Spicker (but like really, no skill needed here) */ 4 | 5 | // Initial Class 6 | %animationstart_rightLeft 7 | top: 0% 8 | left: 100% 9 | +size(100%) 10 | +transition(800ms) 11 | 12 | // Animation Class 13 | %rightLeft 14 | left: 0% -------------------------------------------------------------------------------- /assets/css/1-tools/animations/_textSlide.sass: -------------------------------------------------------------------------------- 1 | /* 2 | Animation: textSlide 3 | Source: Dylan Spicker (but like really, no skill needed here) */ 4 | 5 | // Initial Class 6 | %animationstart_textSlide 7 | top: 0% 8 | +size(100%) 9 | +transition(800ms) 10 | left: -100% 11 | 12 | & strong 13 | +transition(margin-left 700ms linear, background 200ms linear 900ms) 14 | margin-left: 400% 15 | display: block 16 | width: 100% 17 | 18 | // Animation Class 19 | %textSlide 20 | left: 0% 21 | 22 | & strong 23 | margin-left: 0% 24 | background: rgba(0,0,0,0.2) -------------------------------------------------------------------------------- /assets/css/1-tools/animations/_topDoor.sass: -------------------------------------------------------------------------------- 1 | /* 2 | Animation: topDoor 3 | Source: Dylan Spicker (but really, Travis Nielson) */ 4 | 5 | // Initial Conditions 6 | %animationstart_topDoor 7 | +size(100%) 8 | +position(absolute, -50% 0px null 0px) 9 | +transition(1s) 10 | +transform(rotateX(90deg)) 11 | +transform-origin(center top) 12 | 13 | %topDoor 14 | top: 0% 15 | +transform(rotateX(0deg)) -------------------------------------------------------------------------------- /assets/css/1-tools/animations/_topDown.sass: -------------------------------------------------------------------------------- 1 | /* 2 | Animation: topDown 3 | Source: Dylan Spicker (but really, Travis Nielson) */ 4 | 5 | // Initial Conditions 6 | %animationstart_topDown 7 | +size(100%) 8 | +position(absolute, -100% 0px null 0px) 9 | +transition 10 | 11 | %topDown 12 | top: 0% -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/bourbon/_bourbon.scss: -------------------------------------------------------------------------------- 1 | // Settings 2 | @import "settings/prefixer"; 3 | @import "settings/px-to-em"; 4 | 5 | // Custom Helpers 6 | @import "helpers/convert-units"; 7 | @import "helpers/gradient-positions-parser"; 8 | @import "helpers/is-num"; 9 | @import "helpers/linear-angle-parser"; 10 | @import "helpers/linear-gradient-parser"; 11 | @import "helpers/linear-positions-parser"; 12 | @import "helpers/linear-side-corner-parser"; 13 | @import "helpers/radial-arg-parser"; 14 | @import "helpers/radial-positions-parser"; 15 | @import "helpers/radial-gradient-parser"; 16 | @import "helpers/render-gradients"; 17 | @import "helpers/shape-size-stripper"; 18 | @import "helpers/str-to-num"; 19 | 20 | // Custom Functions 21 | @import "functions/assign"; 22 | @import "functions/color-lightness"; 23 | @import "functions/flex-grid"; 24 | @import "functions/golden-ratio"; 25 | @import "functions/grid-width"; 26 | @import "functions/modular-scale"; 27 | @import "functions/px-to-em"; 28 | @import "functions/px-to-rem"; 29 | @import "functions/strip-units"; 30 | @import "functions/tint-shade"; 31 | @import "functions/transition-property-name"; 32 | @import "functions/unpack"; 33 | 34 | // CSS3 Mixins 35 | @import "css3/animation"; 36 | @import "css3/appearance"; 37 | @import "css3/backface-visibility"; 38 | @import "css3/background"; 39 | @import "css3/background-image"; 40 | @import "css3/border-image"; 41 | @import "css3/border-radius"; 42 | @import "css3/box-sizing"; 43 | @import "css3/calc"; 44 | @import "css3/columns"; 45 | @import "css3/filter"; 46 | @import "css3/flex-box"; 47 | @import "css3/font-face"; 48 | @import "css3/font-feature-settings"; 49 | @import "css3/hyphens"; 50 | @import "css3/hidpi-media-query"; 51 | @import "css3/image-rendering"; 52 | @import "css3/keyframes"; 53 | @import "css3/linear-gradient"; 54 | @import "css3/perspective"; 55 | @import "css3/radial-gradient"; 56 | @import "css3/transform"; 57 | @import "css3/transition"; 58 | @import "css3/user-select"; 59 | @import "css3/placeholder"; 60 | 61 | // Addons & other mixins 62 | @import "addons/button"; 63 | @import "addons/clearfix"; 64 | @import "addons/directional-values"; 65 | @import "addons/ellipsis"; 66 | @import "addons/font-family"; 67 | @import "addons/hide-text"; 68 | @import "addons/html5-input-types"; 69 | @import "addons/position"; 70 | @import "addons/prefixer"; 71 | @import "addons/retina-image"; 72 | @import "addons/size"; 73 | @import "addons/timing-functions"; 74 | @import "addons/triangle"; 75 | @import "addons/word-wrap"; 76 | 77 | // Soon to be deprecated Mixins 78 | @import "bourbon-deprecated-upcoming"; 79 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/bourbon/addons/_retina-image.scss: -------------------------------------------------------------------------------- 1 | @mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: false) { 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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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($height) == number and not unitless($width)) { 14 | width: $width; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /assets/css/1-tools/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/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/bourbon/css3/_appearance.scss: -------------------------------------------------------------------------------- 1 | @mixin appearance ($value) { 2 | @include prefixer(appearance, $value, webkit moz ms o spec); 3 | } 4 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/bourbon/css3/_calc.scss: -------------------------------------------------------------------------------- 1 | @mixin calc($property, $value) { 2 | #{$property}: -webkit-calc(#{$value}); 3 | #{$property}: calc(#{$value}); 4 | } 5 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/bourbon/css3/_user-select.scss: -------------------------------------------------------------------------------- 1 | @mixin user-select($arg: none) { 2 | @include prefixer(user-select, $arg, webkit moz ms spec); 3 | } 4 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | } -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | // } -------------------------------------------------------------------------------- /assets/css/1-tools/bourbon/functions/_golden-ratio.scss: -------------------------------------------------------------------------------- 1 | @function golden-ratio($value, $increment) { 2 | @return modular-scale($value, $increment, $golden) 3 | } 4 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | } -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/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 | -------------------------------------------------------------------------------- /assets/css/1-tools/bourbon/settings/_px-to-em.scss: -------------------------------------------------------------------------------- 1 | $em-base: 16px !default; 2 | -------------------------------------------------------------------------------- /assets/css/2-base/_-base-dir.sass: -------------------------------------------------------------------------------- 1 | @import 'base' 2 | @import 'placeholders' -------------------------------------------------------------------------------- /assets/css/2-base/_base.sass: -------------------------------------------------------------------------------- 1 | /* Typography presets 2 | ------------------------------------ */ 3 | 4 | .gigantic, .huge, .large, .bigger, .big, 5 | h1, h2, h3, h4, h5, h6 6 | color: $headlineColor 7 | font-weight: bold 8 | 9 | .gigantic 10 | font-size: 110px 11 | line-height: 1.09 12 | letter-spacing: -2px 13 | 14 | .huge, h1 15 | font-size: 68px 16 | line-height: 1.05 17 | letter-spacing: -1px 18 | 19 | .large, h2 20 | font-size: 42px 21 | line-height: 1.14 22 | 23 | .bigger, h3 24 | font-size: 26px 25 | line-height: 1.38 26 | 27 | .big, h4 28 | font-size: 22px 29 | line-height: 1.38 30 | 31 | .small, small 32 | font-size: 10px 33 | line-height: 1.2 34 | 35 | 36 | 37 | p 38 | margin: 0 0 20px 0 39 | 40 | em 41 | font-style: italic 42 | 43 | strong 44 | font-weight: bold 45 | 46 | hr 47 | border: solid #ddd 48 | border-width: 1px 0 0 49 | clear: both 50 | margin: 10px 0 30px 51 | height: 0 52 | 53 | 54 | 55 | /* Links 56 | ------------------------------------ */ 57 | a 58 | color: $accent 59 | text-decoration: none 60 | outline: 0 61 | 62 | a:hover, a:focus 63 | color: lighten($accent, 20%) 64 | 65 | 66 | 67 | /* Selection colors (easy to forget) 68 | ------------------------------------ */ 69 | 70 | ::selection 71 | background: $selectionColor 72 | 73 | ::-moz-selection 74 | background: $selectionColor 75 | 76 | img::selection 77 | background: transparent 78 | 79 | img::-moz-selection 80 | background: transparent 81 | 82 | body 83 | -webkit-tap-highlight-color: $selectionColor 84 | 85 | 86 | 87 | /* Basic Styles 88 | ------------------------------------ */ 89 | body 90 | background: $documentBackgroundColor 91 | font-size: 14px 92 | line-height: 1.6 93 | font-family: 'Open Sans', sans-serif 94 | color: $textColor 95 | -webkit-font-smoothing: antialiased 96 | -webkit-text-size-adjust: 100% 97 | 98 | svg 99 | +size(100%) 100 | 101 | h3 102 | @extend %small-bold 103 | color: $accent-light 104 | text-align: center 105 | padding: 100px 0 30px 106 | 107 | fieldset 108 | padding: 0 109 | margin: 0 110 | border: none 111 | 112 | @media screen and (max-width: 480px) 113 | h3 114 | padding: 50px 0 50px 115 | 116 | section:nth-child(odd) 117 | background: $bgcolor 118 | padding-bottom: 100px 119 | 120 | h3 121 | color: darken($accent-light, 10%) 122 | -------------------------------------------------------------------------------- /assets/css/2-base/_placeholders.sass: -------------------------------------------------------------------------------- 1 | %small-bold 2 | font: 3 | size: 14px 4 | weight: 700 5 | text-transform: uppercase 6 | 7 | %background-image 8 | background: 9 | repeat: no-repeat, no-repeat 10 | size: 50px 50px, cover 11 | position: 30px 50px, 50% 50% 12 | blend-mode: overlay, normal 13 | -------------------------------------------------------------------------------- /assets/css/3-sections/_-sections-dir.sass: -------------------------------------------------------------------------------- 1 | @import 'header' 2 | @import 'footer' 3 | @import 'about' 4 | @import 'work' 5 | @import 'clients' 6 | @import 'contact' 7 | @import 'form' 8 | @import 'form-success' -------------------------------------------------------------------------------- /assets/css/3-sections/_about.sass: -------------------------------------------------------------------------------- 1 | .face-lockup 2 | max-width: 780px 3 | +display(flex) 4 | margin: 0 auto 5 | +align-items(center) 6 | +justify-content(space-between) 7 | 8 | .face-img 9 | border-radius: 50% 10 | background-size: cover 11 | background-position: center 12 | background-image: url(../img/#{$avatar-path}) 13 | +size(200px) 14 | +order(3) 15 | 16 | [class^="icon-"] 17 | +size(100px) 18 | background: $bgcolor 19 | border-radius: 50% 20 | 21 | path 22 | fill: $accent 23 | 24 | &.icon-pencil 25 | +order(1) 26 | &.icon-mouse 27 | +order(2) 28 | &.icon-browser 29 | +order(4) 30 | &.icon-video 31 | +order(5) 32 | 33 | @media screen and (max-width: 650px) 34 | .face-lockup 35 | display: block 36 | text-align: center 37 | 38 | div 39 | display: inline-block 40 | 41 | .face-img 42 | display: block 43 | background: 44 | position: center center 45 | repeat: no-repeat 46 | margin: 0 auto 30px 47 | 48 | [class^="icon-"] 49 | margin: 10px 9% 50 | 51 | 52 | 53 | 54 | .blurb 55 | max-width: 620px 56 | padding: 0 20px 57 | margin: 50px auto 58 | font-size: 24px 59 | text-align: center 60 | font-weight: 300 61 | 62 | 63 | 64 | .skill-lockup 65 | max-width: 540px 66 | margin: 100px auto 67 | color: #999 68 | +clearfix 69 | 70 | 71 | .skill-unit 72 | width: 270px 73 | float: left 74 | 75 | .skill-icons 76 | font-size: 0 77 | margin: 3px 0 30px 78 | 79 | span 80 | display: inline-block 81 | +size(14px) 82 | background-color: $accent 83 | margin-right: 8px 84 | border-radius: 50% 85 | 86 | &:after 87 | content: '' 88 | display: block 89 | +size(10px) 90 | background: #fff 91 | border-radius: 50% 92 | margin: 2px 93 | 94 | @for $i from 1 through 10 95 | &.skill-#{$i} span:nth-child(n+#{$i+1}) 96 | @extend %skill-color 97 | 98 | 99 | %skill-color 100 | background: $bgcolor 101 | 102 | 103 | 104 | 105 | @media screen and (max-width: 541px) 106 | .skill-lockup 107 | width: 220px 108 | 109 | .skill-unit 110 | width: 220px 111 | -------------------------------------------------------------------------------- /assets/css/3-sections/_clients.sass: -------------------------------------------------------------------------------- 1 | .section-clients 2 | position: relative 3 | 4 | .clients-belt 5 | width: 100% 6 | position: relative 7 | 8 | .client-unit 9 | max-width: 750px 10 | margin: 50px auto 11 | position: relative 12 | z-index: 1 13 | display: none 14 | 15 | &.active-client 16 | +display(flex) 17 | @extend %#{$animation} 18 | 19 | .client-face 20 | min-width: 180px 21 | text-align: center 22 | 23 | img 24 | max-width: 100px 25 | border-radius: 50% 26 | 27 | 28 | .client-name 29 | display: block 30 | text-transform: uppercase 31 | font-weight: 400 32 | letter-spacing: 1px 33 | 34 | .client-title 35 | font-style: normal 36 | font-size: 12px 37 | color: #999 38 | 39 | .client-content 40 | font-size: 18px 41 | line-height: 36px 42 | font-weight: 300 43 | margin-top: -10px 44 | position: relative 45 | 46 | 47 | 48 | 49 | // Logos 50 | .clients-logos 51 | position: relative 52 | z-index: 3 53 | max-width: 750px 54 | margin: 0px auto 100px 55 | +display(flex) 56 | +align-items(flex-end) 57 | +justify-content(space-around) 58 | 59 | 60 | .client-logo 61 | cursor: pointer 62 | margin: 0 20px 20px 63 | padding-bottom: 20px 64 | border-bottom: 4px solid transparent 65 | opacity: 0.5 66 | 67 | &.active-client 68 | opacity: 1 69 | border-bottom: 4px solid $accent 70 | 71 | 72 | .client-quote-mark 73 | +position(absolute, -18px null null -15px) 74 | +size(60px) 75 | z-index: -1 76 | opacity: 0.3 77 | 78 | path 79 | fill: $accent 80 | 81 | 82 | 83 | // Controls 84 | .client-controls 85 | +position(absolute, 0px 0px 0px 0px) 86 | z-index: 2 87 | 88 | > div 89 | +size(40px) 90 | margin-top: -20px 91 | cursor: pointer 92 | 93 | path 94 | fill: $accent 95 | 96 | .client-control-next 97 | +position(absolute, 50% 10px null null) 98 | 99 | .client-control-prev 100 | +position(absolute, 50% null null 10px) 101 | 102 | // clients-mobile-nav 103 | .clients-mobile-nav 104 | text-align: center 105 | position: relative 106 | z-index: 3 107 | display: none 108 | 109 | span 110 | display: inline-block 111 | +size(16px) 112 | border-radius: 50% 113 | border: solid 2px $bgcolor 114 | margin: 0px 10px 115 | cursor: pointer 116 | 117 | &.active-client 118 | border-color: $accent 119 | 120 | 121 | 122 | 123 | @media (max-width: 850px) 124 | .clients-logos 125 | +flex-wrap(wrap) 126 | 127 | .clients-belt 128 | overflow-x: hidden 129 | 130 | .client-unit.active-client 131 | display: block 132 | position: relative 133 | margin-left: auto 134 | left: auto 135 | 136 | .client-face 137 | margin-bottom: 30px 138 | 139 | .client-content 140 | padding: 0px 30px 141 | max-width: 400px 142 | margin: 0px auto 143 | 144 | .client-quote-mark 145 | left: 6px 146 | 147 | .clients-logos 148 | display: none 149 | 150 | .clients-mobile-nav 151 | display: block 152 | 153 | 154 | @media (max-width: 600px) 155 | .client-controls 156 | display: none 157 | -------------------------------------------------------------------------------- /assets/css/3-sections/_contact.sass: -------------------------------------------------------------------------------- 1 | .section-contact 2 | text-align: center 3 | 4 | .social-links 5 | max-width: 700px 6 | margin: 0px auto 50px 7 | +display(flex) 8 | +justify-content(space-around) 9 | +flex-wrap(wrap) 10 | 11 | a 12 | display: block 13 | //background: $accent 14 | border: 2px solid $accent 15 | +size(50px) 16 | line-height: 50px 17 | color: $accent 18 | border-radius: 50% 19 | font-size: 28px 20 | margin: 20px 21 | position: relative 22 | 23 | 24 | &:after 25 | content: '' 26 | display: block 27 | +position(absolute, 0px 0px 0px 0px) 28 | border: 2px solid $accent 29 | border-radius: 50% 30 | margin: -2px 31 | opacity: 1 32 | +transition() 33 | 34 | &:hover:after 35 | +transform(scale(1.5)) 36 | opacity: 0 37 | 38 | .bar 39 | width: 250px 40 | height: 0px 41 | border-top: 4px solid $accent 42 | margin: 0px auto 50px 43 | 44 | .biglink 45 | display: inline-block 46 | font: 47 | size: 72px 48 | weight: 300 49 | line-height: 1 50 | width: 90% 51 | margin: 0 auto 52 | -------------------------------------------------------------------------------- /assets/css/3-sections/_footer.sass: -------------------------------------------------------------------------------- 1 | footer 2 | @extend %background-image 3 | background-image: url(../img/#{$logo-path}), url(../img/#{$hero-path}) 4 | 5 | .lockup 6 | padding: 50px 30px 7 | +clearfix 8 | 9 | .content-wrap 10 | float: left 11 | margin-left: 80px 12 | 13 | .copyright 14 | margin: 0 15 | text-transform: uppercase 16 | font-size: 12px 17 | color: rgba(0,0,0,0.4) 18 | 19 | a 20 | @extend %small-bold 21 | color: rgba(0,0,0,0.5) 22 | display: inline-block 23 | margin-right: 30px 24 | 25 | &:hover 26 | color: rgba(0,0,0,0.7) 27 | -------------------------------------------------------------------------------- /assets/css/3-sections/_form-success.sass: -------------------------------------------------------------------------------- 1 | .form-success 2 | background: $bgcolor 3 | text-align: center 4 | 5 | p 6 | font-size: 18px 7 | -------------------------------------------------------------------------------- /assets/css/3-sections/_form.sass: -------------------------------------------------------------------------------- 1 | form 2 | max-width: 450px 3 | margin: 0 auto 100px 4 | padding: 0 20px 5 | 6 | input, textarea 7 | border: 3px solid $accent 8 | width: 100% 9 | +box-sizing(border-box) 10 | padding: 10px 11 | -webkit-appearance: none 12 | -moz-appearance: none 13 | appearance: none 14 | font-size: 16px 15 | 16 | &:focus 17 | outline: none 18 | border-color: $accent-light 19 | 20 | textarea 21 | height: 10em 22 | resize: none 23 | 24 | .submit-wrap 25 | text-align: right 26 | 27 | [type="submit"] 28 | background: $accent 29 | color: white 30 | font-size: 18px 31 | text-transform: uppercase 32 | width: 33% 33 | 34 | &:hover 35 | background: $accent-light 36 | 37 | 38 | 39 | 40 | 41 | .contact-info-group 42 | 43 | label 44 | width: 50% 45 | float: left 46 | +box-sizing(border-box) 47 | 48 | &:nth-child(1) 49 | padding-right: 10px 50 | 51 | &:nth-child(2) 52 | padding-left: 10px 53 | 54 | label 55 | display: block 56 | margin-bottom: 20px 57 | 58 | span 59 | display: block 60 | 61 | @media (max-width: 541px) 62 | form 63 | .contact-info-group 64 | 65 | label 66 | width: 100% 67 | 68 | &:nth-child(1) 69 | padding: 0 70 | 71 | &:nth-child(2) 72 | padding: 0 73 | 74 | [type="submit"] 75 | width: 100% 76 | -------------------------------------------------------------------------------- /assets/css/3-sections/_header.sass: -------------------------------------------------------------------------------- 1 | header 2 | @extend %background-image 3 | background: 4 | position: 30px 20px, 50% 50% 5 | image: url(../img/#{$logo-path}), url(../img/#{$hero-path}) 6 | padding-bottom: 50px 7 | 8 | 9 | .logo 10 | +size(50px) 11 | float: left 12 | margin: 10px 0 0 30px 13 | 14 | path 15 | fill: rgba(0,0,0,0.4) 16 | 17 | nav 18 | float: right 19 | padding: 30px 30px 0 0 20 | 21 | a 22 | display: inline-block 23 | margin-left: 20px 24 | 25 | color: rgba(0,0,0,0.7) 26 | @extend %small-bold 27 | 28 | &:hover 29 | color: rgba(0,0,0,1) 30 | 31 | h1 32 | text-align: center 33 | font: 34 | size: 72px 35 | weight: 700 36 | color: white 37 | text-transform: uppercase 38 | letter-spacing: 0.05em 39 | margin-bottom: 20px 40 | clear: both 41 | padding-top: 100px 42 | 43 | 44 | span 45 | display: inline-block 46 | padding: 0.2em 0.5em 47 | border: white solid 10px 48 | 49 | .kicker 50 | @extend %small-bold 51 | text-align: center 52 | letter-spacing: 0.05em 53 | color: white 54 | line-height: 1 55 | 56 | @media (max-width: 640px) 57 | header 58 | background: 59 | position: 50% 20px, 50% 50% 60 | 61 | nav 62 | float: none 63 | text-align: center 64 | padding-top: 90px 65 | 66 | h1 67 | padding-top: 0px 68 | -------------------------------------------------------------------------------- /assets/css/3-sections/_work.sass: -------------------------------------------------------------------------------- 1 | .section-work 2 | overflow-x: hidden 3 | 4 | /* Hackey-type CSS as a jQuery Alternative for when the browser does not have jQuery enabled. */ 5 | .noscript 6 | display: none 7 | 8 | @each $proj in $projects 9 | ##{$proj}:checked ~ .work-belt .work-wrap .work-container noscript #content-#{$proj} 10 | display: block 11 | 12 | .return 13 | display: none 14 | 15 | .trigger 16 | display: none 17 | 18 | &:checked ~ .work-belt 19 | left: -100% 20 | 21 | .work-wrap .work-container 22 | display: block 23 | /* End of gross / hackey CSS */ 24 | 25 | .work-belt 26 | width: 200% 27 | position: relative 28 | left: 0% 29 | +transition(all, 800ms) 30 | 31 | &.slided 32 | +transform(translate3d(-50%, 0, 0)) 33 | 34 | .thumb-wrap, .work-wrap 35 | width: 50% 36 | float: left 37 | 38 | .thumb-container 39 | display: block 40 | max-width: 960px 41 | margin: 0px auto 42 | +clearfix 43 | 44 | label 45 | position: relative 46 | display: block 47 | float: left 48 | width: 25% 49 | cursor: pointer 50 | 51 | .thumb-unit 52 | display: block 53 | overflow: hidden 54 | 55 | img 56 | display: block 57 | max-width: 100% 58 | 59 | @media screen and (max-width: 760px) 60 | width: 50% 61 | 62 | .thumb-overlay 63 | +position(absolute) 64 | +align-items(center) 65 | +justify-content(space-around) 66 | +display(flex) 67 | background: fade-out($accent, 0.1) 68 | text-align: center 69 | @extend %animationstart_#{$animation} 70 | 71 | strong 72 | display: block 73 | padding: 0 9% 74 | color: white 75 | font: 76 | weight: 300 77 | size: 24px 78 | text-transform: uppercase 79 | line-height: 1.2 80 | 81 | &:hover 82 | z-index: 2 83 | 84 | .thumb-overlay 85 | @extend %#{$animation} 86 | 87 | 88 | .work-container 89 | max-width: 600px 90 | margin: 0px auto 91 | padding: 0 15px 92 | +box-sizing(border-box) 93 | 94 | position: relative 95 | display: none 96 | 97 | h4, noscript h4 98 | color: $accent 99 | font-weight: 300 100 | text-transform: uppercase 101 | font-size: 28px 102 | line-height: 1.2 103 | margin: 0 0 20px 104 | 105 | img 106 | max-width: 100% 107 | margin-bottom: 20px 108 | 109 | .work-return 110 | +size(40px) 111 | cursor: pointer 112 | opacity: 0.5 113 | +position(absolute, -4px null null -60px) 114 | 115 | path 116 | fill: rgba(0,0,0,0.4) 117 | 118 | &:hover 119 | opacity: 1 120 | 121 | 122 | 123 | @media (max-width: 740px) 124 | .work-container 125 | 126 | .work-return 127 | left: 0px 128 | 129 | h4 130 | margin-left: 60px 131 | -------------------------------------------------------------------------------- /assets/css/all.sass: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | @import '1-tools/-tools-dir' 5 | 6 | //------------------------------------------------ 7 | // Transition the image paths from the settings file to usable SASS variables 8 | $animation: {{ site.data.layout.animation }} 9 | $logo-path: '{{ site.data.layout.logo }}' 10 | $hero-path: '{{ site.data.layout.hero }}' 11 | $avatar-path: '{{ site.data.layout.avatar }}' 12 | 13 | $projects: {% for project in site.data.settings.projects %} "{{ project.folder }}", {% endfor %} 14 | 15 | //------------------------------------------------ 16 | // Set some colors as sass variables 17 | 18 | $accent: {{ site.data.layout.accent }} 19 | $accent-light: adjust-hue(saturate(lighten($accent, 11%), 12.6%), 14%) 20 | $selectionColor: lighten($accent, 30%) 21 | 22 | $textColor: {{ site.data.layout.textColor }} 23 | $headlineColor: {{ site.data.layout.headlineColor }} 24 | $bgcolor: {{ site.data.layout.bgcolor }} 25 | $documentBackgroundColor: {{ site.data.layout.documentBackgroundColor }} 26 | 27 | @import '2-base/-base-dir' 28 | @import '3-sections/-sections-dir' 29 | -------------------------------------------------------------------------------- /assets/img/back-btn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/back-btn.png -------------------------------------------------------------------------------- /assets/img/clients/face-aaroni.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/clients/face-aaroni.jpg -------------------------------------------------------------------------------- /assets/img/clients/face-atariboy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/clients/face-atariboy.jpg -------------------------------------------------------------------------------- /assets/img/clients/face-jackiesaik.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/clients/face-jackiesaik.jpg -------------------------------------------------------------------------------- /assets/img/clients/face-teleject.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/clients/face-teleject.jpg -------------------------------------------------------------------------------- /assets/img/clients/logo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/clients/logo1.png -------------------------------------------------------------------------------- /assets/img/clients/logo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/clients/logo2.png -------------------------------------------------------------------------------- /assets/img/clients/logo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/clients/logo3.png -------------------------------------------------------------------------------- /assets/img/clients/logo4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/clients/logo4.png -------------------------------------------------------------------------------- /assets/img/hero-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/hero-bg.jpg -------------------------------------------------------------------------------- /assets/img/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/img/the_design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/the_design.jpg -------------------------------------------------------------------------------- /assets/img/travitar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/travitar.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-1/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-1/img1.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-1/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-1/img2.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-1/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-1/img3.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-1/img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-1/img4.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-1/img5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-1/img5.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-1/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-1/thumb.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-2/CityIn-AntonSkvortsov.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-2/CityIn-AntonSkvortsov.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-2/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-2/thumb.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-3/CrispyIcons-PetrasNargela.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-3/CrispyIcons-PetrasNargela.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-3/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-3/Thumbs.db -------------------------------------------------------------------------------- /assets/img/work/proj-3/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-3/thumb.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-4/flatmobile-AyoubElred.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-4/flatmobile-AyoubElred.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-4/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-4/thumb.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-5/freshitup-JieyuXiong.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-5/freshitup-JieyuXiong.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-5/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-5/thumb.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-6/TimeLinePage-SergeyValiukh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-6/TimeLinePage-SergeyValiukh.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-6/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-6/thumb.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-7/img0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-7/img0.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-7/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-7/img1.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-7/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-7/img2.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-7/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-7/img3.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-7/img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-7/img4.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-7/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-7/thumb.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-8/stripes-co-NickZoutendijk.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-8/stripes-co-NickZoutendijk.jpg -------------------------------------------------------------------------------- /assets/img/work/proj-8/thumb.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/DevTips/Artists-Theme/b64eb5bee7560b6882e7749d77995121ebd091ef/assets/img/work/proj-8/thumb.jpg -------------------------------------------------------------------------------- /assets/js/functions.js: -------------------------------------------------------------------------------- 1 | $(function() { 2 | smoothScroll(300); 3 | workBelt(); 4 | workLoad(); 5 | clientStuff(); 6 | 7 | $("header h1").fitText(1, { minFontSize: '20px', maxFontSize: '72px' }); 8 | $(".biglink").fitText(1.5); 9 | 10 | $('textarea').autosize(); 11 | }); 12 | 13 | // smoothScroll function is applied from the document ready function 14 | function smoothScroll (duration) { 15 | $('a[href^="#"]').on('click', function(event) { 16 | 17 | var target = $( $(this).attr('href') ); 18 | 19 | if( target.length ) { 20 | event.preventDefault(); 21 | $('html, body').animate({ 22 | scrollTop: target.offset().top 23 | }, duration); 24 | } 25 | }); 26 | } 27 | 28 | 29 | function workBelt() { 30 | 31 | $(".trigger").remove(); 32 | $(".return").remove(); 33 | 34 | $('.thumb-container label').click(function() { 35 | $('.work-belt').addClass("slided"); 36 | $('.work-container').show(); 37 | }); 38 | 39 | $('.work-return').click(function() { 40 | $('.work-belt').removeClass("slided"); 41 | $('.work-container').hide(800); 42 | }); 43 | 44 | } 45 | 46 | 47 | function workLoad() { 48 | 49 | $.ajaxSetup({ cache: true }); 50 | 51 | $('.thumb-container label').click(function() { 52 | var $this = $(this), 53 | newTitle = $this.find('strong').text(), 54 | spinner = '
Loading...
', 55 | url = $this.find('.thumb-unit').data('url'); 56 | 57 | $('.project-load').html(spinner).load(url); 58 | $('.project-title').text(newTitle); 59 | }); 60 | 61 | } 62 | 63 | 64 | 65 | 66 | function clientStuff() { 67 | 68 | $('.client-logo, .client-button').click(function() { 69 | var $this = $(this), 70 | position = $this.parent().children().index($this); 71 | 72 | $('.client-unit').removeClass('active-client').eq(position).addClass('active-client'); 73 | $('.client-logo').removeClass('active-client').eq(position).addClass('active-client'); 74 | $('.client-button').removeClass('active-client').eq(position).addClass('active-client'); 75 | }); 76 | 77 | 78 | $('.client-control-next, .client-control-prev').click(function() { 79 | 80 | var $this = $(this), 81 | curActiveClient = $('.clients-belt').find('.active-client'), 82 | position = $('.clients-belt').children().index(curActiveClient), 83 | clientNum = $('.client-unit').length; 84 | 85 | if($this.hasClass('client-control-next')) { 86 | 87 | if(position < clientNum -1){ 88 | $('.active-client').removeClass('active-client').next().addClass('active-client'); 89 | } else { 90 | $('.client-unit').removeClass('active-client').first().addClass('active-client'); 91 | $('.client-logo').removeClass('active-client').first().addClass('active-client'); 92 | $('.client-button').removeClass('active-client').first().addClass('active-client'); 93 | } 94 | 95 | } else { 96 | 97 | if (position === 0) { 98 | $('.client-unit').removeClass('active-client').last().addClass('active-client'); 99 | $('.client-logo').removeClass('active-client').last().addClass('active-client'); 100 | $('.client-button').removeClass('active-client').last().addClass('active-client'); 101 | } else { 102 | $('.active-client').removeClass('active-client').prev().addClass('active-client'); 103 | } 104 | 105 | } 106 | 107 | 108 | }); 109 | 110 | } 111 | 112 | 113 | (function( $ ){ 114 | 115 | $.fn.fitText = function( kompressor, options ) { 116 | 117 | // Setup options 118 | var compressor = kompressor || 1, 119 | settings = $.extend({ 120 | 'minFontSize' : Number.NEGATIVE_INFINITY, 121 | 'maxFontSize' : Number.POSITIVE_INFINITY 122 | }, options); 123 | 124 | return this.each(function(){ 125 | 126 | // Store the object 127 | var $this = $(this); 128 | 129 | // Resizer() resizes items based on the object width divided by the compressor * 10 130 | var resizer = function () { 131 | $this.css('font-size', Math.max(Math.min($this.width() / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); 132 | }; 133 | 134 | // Call once to set. 135 | resizer(); 136 | 137 | // Call on resize. Opera debounces their resize by default. 138 | $(window).on('resize.fittext orientationchange.fittext', resizer); 139 | 140 | }); 141 | 142 | }; 143 | 144 | })( jQuery ); 145 | 146 | 147 | /*! 148 | Autosize 1.18.12 149 | license: MIT 150 | http://www.jacklmoore.com/autosize 151 | */ 152 | (function ($) { 153 | var 154 | defaults = { 155 | className: 'autosizejs', 156 | id: 'autosizejs', 157 | append: '\n', 158 | callback: false, 159 | resizeDelay: 10, 160 | placeholder: true 161 | }, 162 | 163 | // border:0 is unnecessary, but avoids a bug in Firefox on OSX 164 | copy = '