├── .stackbit └── images │ ├── demo-blue-1024x768.png │ ├── demo-blue-256x192.png │ ├── demo-green-1024x768.png │ └── demo-green-256x192.png ├── README.md ├── components ├── banner.html ├── cta.html ├── features.html ├── footer.html ├── header.html ├── html_head.html ├── icons.html ├── post_body.html └── spotlights.html ├── config.yml ├── content ├── elements.md ├── generic.md └── index.md ├── data ├── footer.yml └── menu.yml ├── package-lock.json ├── package.json ├── sass ├── imports │ └── _banner.scss ├── libs │ ├── _breakpoints.scss │ ├── _functions.scss │ ├── _html-grid.scss │ ├── _mixins.scss │ └── _vendor.scss ├── main.scss.njk └── noscript.scss ├── stackbit.yaml ├── static ├── assets │ ├── css │ │ ├── font-awesome.min.css │ │ ├── images │ │ │ ├── arrow.svg │ │ │ ├── bars.svg │ │ │ └── close.svg │ │ └── noscript.css │ ├── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ ├── fontawesome-webfont.woff │ │ └── fontawesome-webfont.woff2 │ └── js │ │ ├── breakpoints.min.js │ │ ├── browser.min.js │ │ ├── init.js │ │ ├── jquery.min.js │ │ ├── jquery.scrollex.min.js │ │ ├── jquery.scrolly.min.js │ │ ├── page_load.js │ │ └── util.js └── images │ ├── banner.jpg │ ├── pic01.jpg │ ├── pic02.jpg │ ├── pic03.jpg │ ├── pic04.jpg │ └── pic05.jpg └── templates ├── body.html ├── elements.html ├── home.html └── page.html /.stackbit/images/demo-blue-1024x768.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackbit/stackbit-theme-spectral/81765a14975c8143ebb9d1208634c3210d6ecf44/.stackbit/images/demo-blue-1024x768.png -------------------------------------------------------------------------------- /.stackbit/images/demo-blue-256x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackbit/stackbit-theme-spectral/81765a14975c8143ebb9d1208634c3210d6ecf44/.stackbit/images/demo-blue-256x192.png -------------------------------------------------------------------------------- /.stackbit/images/demo-green-1024x768.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackbit/stackbit-theme-spectral/81765a14975c8143ebb9d1208634c3210d6ecf44/.stackbit/images/demo-green-1024x768.png -------------------------------------------------------------------------------- /.stackbit/images/demo-green-256x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackbit/stackbit-theme-spectral/81765a14975c8143ebb9d1208634c3210d6ecf44/.stackbit/images/demo-green-256x192.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Spectral 2 | 3 | A multipage theme for Stackbit. [Live Demo](https://themes.stackbit.com/demos/spectral/blue) 4 | 5 | This theme is deprecated and will no longer be maintained by Stackbit. 6 | Stackbit launched a new major version that brings a superior developer experience and visual editing capabilities. 7 | 8 | Click the button below to create a new website using the new version of Stackbit. 9 | 10 | [![Create with Stackbit](https://assets.stackbit.com/badge/create-with-stackbit.svg)](https://app.stackbit.com/create?utm_source=theme-readme&utm_medium=referral&utm_campaign=stackbit_themes) 11 | 12 | ### About Stackbit 13 | 14 | [Stackbit](https://www.stackbit.com/) enables features like inline content editing, live previews and collaboration tools for Jamstack sites. 15 | 16 | ## Working with This Theme 17 | 18 | This theme is written in [Unibit](https://docs.stackbit.com/unibit/), which is designed to transpile themes to work with multiple static site generators (SSG) such as Jekyll, Hugo & Gatsby. 19 | 20 | If you are looking to use this theme on a specific SSG, it is recommended that you use the [Stackbit site builder](https://app.stackbit.com/create?theme=https://github.com/stackbithq/stackbit-theme-spectral) to generate the theme. The site builder will generate the SSG-specific source to your own GitHub repository. You are free to use and modify the generated source however you wish. 21 | 22 | ### Editing This Theme 23 | 24 | While we recommend using the [site builder](https://app.stackbit.com/create?theme=https://github.com/stackbithq/stackbit-theme-spectral) to generate a version of the theme for any of the supported static site generators, you can develop locally using the Unibit CLI. For details on how to install and use Unibit, visit the [documentation](https://docs.stackbit.com/site-builder/unibit/). 25 | 26 | ### Develop Using CodeSandbox 27 | 28 | You can also develop this theme in the browser using Unibit via CodeSandbox. 29 | 30 | [Fork in CodeSandbox](https://codesandbox.io/s/github/stackbithq/stackbit-theme-spectral) 31 | -------------------------------------------------------------------------------- /components/banner.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /components/cta.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |

{{ include_dict.section.title | nl2br | safe }}

6 | {{ include_dict.section.text | markdownify }} 7 |
8 | {% if include_dict.section.actions %} 9 | 14 | {% endif %} 15 |
16 |
-------------------------------------------------------------------------------- /components/features.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |

{{ include_dict.section.title | nl2br | safe }}

6 | {{ include_dict.section.subtitle | markdownify }} 7 |
8 | 16 |
17 |
-------------------------------------------------------------------------------- /components/footer.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /components/header.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /components/html_head.html: -------------------------------------------------------------------------------- 1 | {% if page.title %}{{ page.title }} - {% endif %}{{ site.title }} 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /components/icons.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 |
5 |

{{ include_dict.section.title | nl2br | safe }}

6 | {{ include_dict.section.subtitle | markdownify }} 7 |
8 | {% if include_dict.section.feature_icons %} 9 | 14 | {% endif %} 15 |
16 |
-------------------------------------------------------------------------------- /components/post_body.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /components/spotlights.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | {% for spotlight in include_dict.section.spotlights %} 4 |
5 | {% if spotlight.home_img_path %} 6 |
7 | {% endif %} 8 |
9 |

{{ spotlight.title | nl2br | safe }}

10 | {{ spotlight.text | markdownify }} 11 |
12 |
13 | {% endfor %} 14 |
-------------------------------------------------------------------------------- /config.yml: -------------------------------------------------------------------------------- 1 | baseurl: "/" 2 | title: "Spectral" 3 | init_js: "assets/js/init.js" 4 | page_load_js: "assets/js/page_load.js" 5 | params: 6 | landing_template: home 7 | palette: blue 8 | palettes: 9 | blue: 10 | sass: 11 | accent1: "#4598c8" 12 | accent2: "#93d7ff" 13 | accent3: "#b8d5ff" 14 | accent4: "#a2f7c2" 15 | accent5: "#6289c3" 16 | accent6: "#53b678" 17 | green: 18 | sass: 19 | accent1: "#21b2a6" 20 | accent2: "#00ffcc" 21 | accent3: "#00f0ff" 22 | accent4: "#76ddff" 23 | accent5: "#505393" 24 | accent6: "#ed4933" 25 | sass: 26 | input_file: sass/main.scss.njk 27 | output_file: assets/css/main.css 28 | indentWidth: 4 29 | outputStyle: nested 30 | precision: 10 31 | templates: 32 | body_class: "{% if page.params.template == site.params.landing_template %}landing {% endif %}" 33 | -------------------------------------------------------------------------------- /content/elements.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Elements 3 | subtitle: Aliquam ut ex ut interdum donec amet imperdiet eleifend 4 | menus: 5 | main: 6 | title: Elements 7 | weight: 3 8 | template: elements 9 | --- 10 | -------------------------------------------------------------------------------- /content/generic.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Generic Page 3 | subtitle: Aliquam ut ex ut interdum donec amet imperdiet eleifend 4 | background_style: style5 5 | menus: 6 | main: 7 | title: Generic 8 | weight: 2 9 | template: page 10 | --- 11 | 12 | ### Lorem ipsum dolor 13 | 14 | Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien. 15 | 16 | Vestibulum ultrices risus velit, sit amet blandit massa auctor sit amet. Sed eu lectus sem. Phasellus in odio at ipsum porttitor mollis id vel diam. Praesent sit amet posuere risus, eu faucibus lectus. Vivamus ex ligula, tempus pulvinar ipsum in, auctor porta quam. Proin nec dui cursus, posuere dui eget interdum. Fusce lectus magna, sagittis at facilisis vitae, pellentesque at etiam. Quisque posuere leo quis sem commodo, vel scelerisque nisi scelerisque. Suspendisse id quam vel tortor tincidunt suscipit. Nullam auctor orci eu dolor consectetur, interdum ullamcorper ante tincidunt. Mauris felis nec felis elementum varius. 17 | 18 | *** 19 | 20 | #### Feugiat aliquam 21 | 22 | Nam sapien ante, varius in pulvinar vitae, rhoncus id massa. Donec varius ex in mauris ornare, eget euismod urna egestas. Etiam lacinia tempor ipsum, sodales porttitor justo. Aliquam dolor quam, semper in tortor eu, volutpat efficitur quam. Fusce nec fermentum nisl. Aenean erat diam, tempus aliquet erat. 23 | 24 | Etiam iaculis nulla ipsum, et pharetra libero rhoncus ut. Phasellus rutrum cursus velit, eget condimentum nunc blandit vel. In at pulvinar lectus. Morbi diam ante, vulputate et imperdiet eget, fermentum non dolor. Ut eleifend sagittis tincidunt. Sed viverra commodo mi, ac rhoncus justo. Duis neque ligula, elementum ut enim vel, posuere finibus justo. Vivamus facilisis maximus nibh quis pulvinar. Quisque hendrerit in ipsum id tellus facilisis fermentum. Proin mauris dui, at vestibulum sit amet, auctor bibendum neque. -------------------------------------------------------------------------------- /content/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Home 3 | banner: 4 | title: Spectral 5 | subtitle: |- 6 | Blandit duis accumsan 7 | arcu sagittis viverra 8 | blandit at Interdum. 9 | actions: 10 | - label: Activate 11 | url: "/generic" 12 | is_scrolly: false 13 | is_primary: true 14 | bottom_link: 15 | label: Learn More 16 | url: "#one" 17 | has_arrow: true 18 | is_scrolly: true 19 | sections: 20 | - title: |- 21 | Arcu aliquet vel lobortis ata nisl 22 | eget augue amet aliquet nisl cep donec 23 | subtitle: |- 24 | Aliquam ut ex ut augue consectetur interdum. Donec amet imperdiet eleifend 25 | fringilla tincidunt. Nullam dui leo Aenean mi ligula, rhoncus ullamcorper. 26 | section_id: one 27 | background_style: style1 28 | feature_icons: 29 | - title: Lorem 30 | icon: fa-diamond 31 | style: style1 32 | - title: Ipsum 33 | icon: fa-heart-o 34 | style: style2 35 | - title: Dolor 36 | icon: fa-code 37 | style: style3 38 | type: icons 39 | component: "icons.html" 40 | - title: Spotlights Section 41 | section_id: two 42 | background_style: style2 43 | spotlights: 44 | - title: |- 45 | Magna primis lobortis 46 | sed ullamcorper 47 | text: Aliquam ut ex ut augue consectetur interdum. Donec hendrerit imperdiet. Mauris eleifend fringilla nullam aenean mi ligula. 48 | home_img_path: images/pic01.jpg 49 | - title: |- 50 | Tortor dolore feugiat 51 | elementum magna 52 | text: Aliquam ut ex ut augue consectetur interdum. Donec hendrerit imperdiet. Mauris eleifend fringilla nullam aenean mi ligula. 53 | home_img_path: images/pic02.jpg 54 | - title: |- 55 | Augue eleifend aliquet 56 | sed condimentum 57 | text: Aliquam ut ex ut augue consectetur interdum. Donec hendrerit imperdiet. Mauris eleifend fringilla nullam aenean mi ligula. 58 | home_img_path: images/pic03.jpg 59 | type: spotlights 60 | component: "spotlights.html" 61 | - title: Accumsan mus tortor nunc aliquet 62 | subtitle: |- 63 | Aliquam ut ex ut augue consectetur interdum. Donec amet imperdiet eleifend 64 | fringilla tincidunt. Nullam dui leo Aenean mi ligula, rhoncus ullamcorper. 65 | section_id: three 66 | background_style: style3 67 | features: 68 | - title: Arcu accumsan 69 | text: Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat. 70 | icon: fa-paper-plane-o 71 | - title: Ac Augue Eget 72 | text: Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat. 73 | icon: fa-laptop 74 | - title: Mus Scelerisque 75 | text: Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat. 76 | icon: fa-code 77 | - title: Mauris Imperdiet 78 | text: Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat. 79 | icon: fa-headphones 80 | - title: Aenean Primis 81 | text: Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat. 82 | icon: fa-heart-o 83 | - title: Tortor Ut 84 | text: Augue consectetur sed interdum imperdiet et ipsum. Mauris lorem tincidunt nullam amet leo Aenean ligula consequat consequat. 85 | icon: fa-flag-o 86 | type: features 87 | component: "features.html" 88 | - title: Arcue ut vel commodo 89 | text: Aliquam ut ex ut augue consectetur interdum endrerit imperdiet amet eleifend fringilla. 90 | section_id: cta 91 | background_style: style4 92 | actions: 93 | - label: Activate 94 | url: "/generic" 95 | is_primary: true 96 | is_scrolly: false 97 | - label: Learn More 98 | url: "/generic" 99 | is_primary: false 100 | is_scrolly: false 101 | type: cta 102 | component: "cta.html" 103 | menus: 104 | main: 105 | title: Home 106 | weight: 1 107 | template: home 108 | --- 109 | -------------------------------------------------------------------------------- /data/footer.yml: -------------------------------------------------------------------------------- 1 | social_icons: 2 | - title: Twitter 3 | icon: fa-twitter 4 | url: "#" 5 | - title: Facebook 6 | icon: fa-facebook 7 | url: "#" 8 | - title: Instagram 9 | icon: fa-instagram 10 | url: "#" 11 | - title: Dribbble 12 | icon: fa-dribbble 13 | url: "#" 14 | - title: Email 15 | icon: fa-envelope-o 16 | url: "#" 17 | copyright: "© Spectral" 18 | links: 19 | - text: Made with Stackbit 20 | url: https://www.stackbit.com 21 | new_window: true -------------------------------------------------------------------------------- /data/menu.yml: -------------------------------------------------------------------------------- 1 | actions: 2 | - label: Sign Up 3 | url: "/generic" 4 | - label: Log In 5 | url: "/generic" -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "spectral", 3 | "version": "1.0.0", 4 | "description": "A multipage theme for Stackbit", 5 | "main": "public/index.html", 6 | "scripts": { 7 | "build": "unibit build", 8 | "develop": "unibit develop", 9 | "start": "unibit develop", 10 | "test": "echo \"Error: no test specified\" && exit 1" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "git+https://github.com/stackbithq/stackbit-theme-spectral" 15 | }, 16 | "author": "Stackbit", 17 | "license": "ISC", 18 | "bugs": { 19 | "url": "https://github.com/stackbithq/stackbit-theme-spectral/issues" 20 | }, 21 | "homepage": "https://docs.stackbit.com/unibit/", 22 | "dependencies": { 23 | "@stackbit/unibit": "~0.1.11", 24 | "lodash": "^4.17.14", 25 | "nodemon": "^1.19.1" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /sass/imports/_banner.scss: -------------------------------------------------------------------------------- 1 | body.has-theme-bar { 2 | #page-wrapper{ 3 | margin-top: 60px; 4 | } 5 | 6 | #header{ 7 | position: fixed; 8 | top: 60px; 9 | } 10 | 11 | #theme-bar{ 12 | position: fixed; 13 | top: 0; 14 | } 15 | } -------------------------------------------------------------------------------- /sass/libs/_breakpoints.scss: -------------------------------------------------------------------------------- 1 | // breakpoints.scss v1.0 | @ajlkn | MIT licensed */ 2 | 3 | // Vars. 4 | 5 | /// Breakpoints. 6 | /// @var {list} 7 | $breakpoints: () !global; 8 | 9 | // Mixins. 10 | 11 | /// Sets breakpoints. 12 | /// @param {map} $x Breakpoints. 13 | @mixin breakpoints($x: ()) { 14 | $breakpoints: $x !global; 15 | } 16 | 17 | /// Wraps @content in a @media block targeting a specific orientation. 18 | /// @param {string} $orientation Orientation. 19 | @mixin orientation($orientation) { 20 | @media screen and (orientation: #{$orientation}) { 21 | @content; 22 | } 23 | } 24 | 25 | /// Wraps @content in a @media block using a given query. 26 | /// @param {string} $query Query. 27 | @mixin breakpoint($query: null) { 28 | 29 | $breakpoint: null; 30 | $op: null; 31 | $media: null; 32 | 33 | // Determine operator, breakpoint. 34 | 35 | // Greater than or equal. 36 | @if (str-slice($query, 0, 2) == '>=') { 37 | 38 | $op: 'gte'; 39 | $breakpoint: str-slice($query, 3); 40 | 41 | } 42 | 43 | // Less than or equal. 44 | @elseif (str-slice($query, 0, 2) == '<=') { 45 | 46 | $op: 'lte'; 47 | $breakpoint: str-slice($query, 3); 48 | 49 | } 50 | 51 | // Greater than. 52 | @elseif (str-slice($query, 0, 1) == '>') { 53 | 54 | $op: 'gt'; 55 | $breakpoint: str-slice($query, 2); 56 | 57 | } 58 | 59 | // Less than. 60 | @elseif (str-slice($query, 0, 1) == '<') { 61 | 62 | $op: 'lt'; 63 | $breakpoint: str-slice($query, 2); 64 | 65 | } 66 | 67 | // Not. 68 | @elseif (str-slice($query, 0, 1) == '!') { 69 | 70 | $op: 'not'; 71 | $breakpoint: str-slice($query, 2); 72 | 73 | } 74 | 75 | // Equal. 76 | @else { 77 | 78 | $op: 'eq'; 79 | $breakpoint: $query; 80 | 81 | } 82 | 83 | // Build media. 84 | @if ($breakpoint and map-has-key($breakpoints, $breakpoint)) { 85 | 86 | $a: map-get($breakpoints, $breakpoint); 87 | 88 | // Range. 89 | @if (type-of($a) == 'list') { 90 | 91 | $x: nth($a, 1); 92 | $y: nth($a, 2); 93 | 94 | // Max only. 95 | @if ($x == null) { 96 | 97 | // Greater than or equal (>= 0 / anything) 98 | @if ($op == 'gte') { 99 | $media: 'screen'; 100 | } 101 | 102 | // Less than or equal (<= y) 103 | @elseif ($op == 'lte') { 104 | $media: 'screen and (max-width: ' + $y + ')'; 105 | } 106 | 107 | // Greater than (> y) 108 | @elseif ($op == 'gt') { 109 | $media: 'screen and (min-width: ' + ($y + 1) + ')'; 110 | } 111 | 112 | // Less than (< 0 / invalid) 113 | @elseif ($op == 'lt') { 114 | $media: 'screen and (max-width: -1px)'; 115 | } 116 | 117 | // Not (> y) 118 | @elseif ($op == 'not') { 119 | $media: 'screen and (min-width: ' + ($y + 1) + ')'; 120 | } 121 | 122 | // Equal (<= y) 123 | @else { 124 | $media: 'screen and (max-width: ' + $y + ')'; 125 | } 126 | 127 | } 128 | 129 | // Min only. 130 | @else if ($y == null) { 131 | 132 | // Greater than or equal (>= x) 133 | @if ($op == 'gte') { 134 | $media: 'screen and (min-width: ' + $x + ')'; 135 | } 136 | 137 | // Less than or equal (<= inf / anything) 138 | @elseif ($op == 'lte') { 139 | $media: 'screen'; 140 | } 141 | 142 | // Greater than (> inf / invalid) 143 | @elseif ($op == 'gt') { 144 | $media: 'screen and (max-width: -1px)'; 145 | } 146 | 147 | // Less than (< x) 148 | @elseif ($op == 'lt') { 149 | $media: 'screen and (max-width: ' + ($x - 1) + ')'; 150 | } 151 | 152 | // Not (< x) 153 | @elseif ($op == 'not') { 154 | $media: 'screen and (max-width: ' + ($x - 1) + ')'; 155 | } 156 | 157 | // Equal (>= x) 158 | @else { 159 | $media: 'screen and (min-width: ' + $x + ')'; 160 | } 161 | 162 | } 163 | 164 | // Min and max. 165 | @else { 166 | 167 | // Greater than or equal (>= x) 168 | @if ($op == 'gte') { 169 | $media: 'screen and (min-width: ' + $x + ')'; 170 | } 171 | 172 | // Less than or equal (<= y) 173 | @elseif ($op == 'lte') { 174 | $media: 'screen and (max-width: ' + $y + ')'; 175 | } 176 | 177 | // Greater than (> y) 178 | @elseif ($op == 'gt') { 179 | $media: 'screen and (min-width: ' + ($y + 1) + ')'; 180 | } 181 | 182 | // Less than (< x) 183 | @elseif ($op == 'lt') { 184 | $media: 'screen and (max-width: ' + ($x - 1) + ')'; 185 | } 186 | 187 | // Not (< x and > y) 188 | @elseif ($op == 'not') { 189 | $media: 'screen and (max-width: ' + ($x - 1) + '), screen and (min-width: ' + ($y + 1) + ')'; 190 | } 191 | 192 | // Equal (>= x and <= y) 193 | @else { 194 | $media: 'screen and (min-width: ' + $x + ') and (max-width: ' + $y + ')'; 195 | } 196 | 197 | } 198 | 199 | } 200 | 201 | // String. 202 | @else { 203 | 204 | // Missing a media type? Prefix with "screen". 205 | @if (str-slice($a, 0, 1) == '(') { 206 | $media: 'screen and ' + $a; 207 | } 208 | 209 | // Otherwise, use as-is. 210 | @else { 211 | $media: $a; 212 | } 213 | 214 | } 215 | 216 | } 217 | 218 | // Output. 219 | @media #{$media} { 220 | @content; 221 | } 222 | 223 | } -------------------------------------------------------------------------------- /sass/libs/_functions.scss: -------------------------------------------------------------------------------- 1 | /// Removes a specific item from a list. 2 | /// @author Hugo Giraudel 3 | /// @param {list} $list List. 4 | /// @param {integer} $index Index. 5 | /// @return {list} Updated list. 6 | @function remove-nth($list, $index) { 7 | 8 | $result: null; 9 | 10 | @if type-of($index) != number { 11 | @warn "$index: #{quote($index)} is not a number for `remove-nth`."; 12 | } 13 | @else if $index == 0 { 14 | @warn "List index 0 must be a non-zero integer for `remove-nth`."; 15 | } 16 | @else if abs($index) > length($list) { 17 | @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; 18 | } 19 | @else { 20 | 21 | $result: (); 22 | $index: if($index < 0, length($list) + $index + 1, $index); 23 | 24 | @for $i from 1 through length($list) { 25 | 26 | @if $i != $index { 27 | $result: append($result, nth($list, $i)); 28 | } 29 | 30 | } 31 | 32 | } 33 | 34 | @return $result; 35 | 36 | } 37 | 38 | /// Gets a value from a map. 39 | /// @author Hugo Giraudel 40 | /// @param {map} $map Map. 41 | /// @param {string} $keys Key(s). 42 | /// @return {string} Value. 43 | @function val($map, $keys...) { 44 | 45 | @if nth($keys, 1) == null { 46 | $keys: remove-nth($keys, 1); 47 | } 48 | 49 | @each $key in $keys { 50 | $map: map-get($map, $key); 51 | } 52 | 53 | @return $map; 54 | 55 | } 56 | 57 | /// Gets a duration value. 58 | /// @param {string} $keys Key(s). 59 | /// @return {string} Value. 60 | @function _duration($keys...) { 61 | @return val($duration, $keys...); 62 | } 63 | 64 | /// Gets a font value. 65 | /// @param {string} $keys Key(s). 66 | /// @return {string} Value. 67 | @function _font($keys...) { 68 | @return val($font, $keys...); 69 | } 70 | 71 | /// Gets a misc value. 72 | /// @param {string} $keys Key(s). 73 | /// @return {string} Value. 74 | @function _misc($keys...) { 75 | @return val($misc, $keys...); 76 | } 77 | 78 | /// Gets a palette value. 79 | /// @param {string} $keys Key(s). 80 | /// @return {string} Value. 81 | @function _palette($keys...) { 82 | @return val($palette, $keys...); 83 | } 84 | 85 | /// Gets a size value. 86 | /// @param {string} $keys Key(s). 87 | /// @return {string} Value. 88 | @function _size($keys...) { 89 | @return val($size, $keys...); 90 | } -------------------------------------------------------------------------------- /sass/libs/_html-grid.scss: -------------------------------------------------------------------------------- 1 | // html-grid.scss v1.0 | @ajlkn | MIT licensed */ 2 | 3 | // Mixins. 4 | 5 | /// Initializes the current element as an HTML grid. 6 | /// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually). 7 | /// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list). 8 | @mixin html-grid($gutters: 1.5em, $suffix: '') { 9 | 10 | // Initialize. 11 | $cols: 12; 12 | $multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00; 13 | $unit: 100% / $cols; 14 | 15 | // Suffixes. 16 | $suffixes: null; 17 | 18 | @if (type-of($suffix) == 'list') { 19 | $suffixes: $suffix; 20 | } 21 | @else { 22 | $suffixes: ($suffix); 23 | } 24 | 25 | // Gutters. 26 | $guttersCols: null; 27 | $guttersRows: null; 28 | 29 | @if (type-of($gutters) == 'list') { 30 | 31 | $guttersCols: nth($gutters, 1); 32 | $guttersRows: nth($gutters, 2); 33 | 34 | } 35 | @else { 36 | 37 | $guttersCols: $gutters; 38 | $guttersRows: 0; 39 | 40 | } 41 | 42 | // Row. 43 | display: flex; 44 | flex-wrap: wrap; 45 | box-sizing: border-box; 46 | align-items: stretch; 47 | 48 | // Columns. 49 | > * { 50 | box-sizing: border-box; 51 | } 52 | 53 | // Gutters. 54 | &.gtr-uniform { 55 | > * { 56 | > :last-child { 57 | margin-bottom: 0; 58 | } 59 | } 60 | } 61 | 62 | // Alignment. 63 | &.aln-left { 64 | justify-content: flex-start; 65 | } 66 | 67 | &.aln-center { 68 | justify-content: center; 69 | } 70 | 71 | &.aln-right { 72 | justify-content: flex-end; 73 | } 74 | 75 | &.aln-top { 76 | align-items: flex-start; 77 | } 78 | 79 | &.aln-middle { 80 | align-items: center; 81 | } 82 | 83 | &.aln-bottom { 84 | align-items: flex-end; 85 | } 86 | 87 | // Step through suffixes. 88 | @each $suffix in $suffixes { 89 | 90 | // Suffix. 91 | @if ($suffix != '') { 92 | $suffix: '-' + $suffix; 93 | } 94 | @else { 95 | $suffix: ''; 96 | } 97 | 98 | // Row. 99 | 100 | // Important. 101 | > .imp#{$suffix} { 102 | order: -1; 103 | } 104 | 105 | // Columns, offsets. 106 | @for $i from 1 through $cols { 107 | > .col-#{$i}#{$suffix} { 108 | width: $unit * $i; 109 | } 110 | 111 | > .off-#{$i}#{$suffix} { 112 | margin-left: $unit * $i; 113 | } 114 | } 115 | 116 | // Step through multipliers. 117 | @each $multiplier in $multipliers { 118 | 119 | // Gutters. 120 | $class: null; 121 | 122 | @if ($multiplier != 1) { 123 | $class: '.gtr-' + ($multiplier * 100); 124 | } 125 | 126 | &#{$class} { 127 | margin-top: ($guttersRows * $multiplier * -1); 128 | margin-left: ($guttersCols * $multiplier * -1); 129 | 130 | > * { 131 | padding: ($guttersRows * $multiplier) 0 0 ($guttersCols * $multiplier); 132 | } 133 | 134 | // Uniform. 135 | &.gtr-uniform { 136 | margin-top: $guttersCols * $multiplier * -1; 137 | 138 | > * { 139 | padding-top: $guttersCols * $multiplier; 140 | } 141 | } 142 | 143 | } 144 | 145 | } 146 | 147 | } 148 | 149 | } -------------------------------------------------------------------------------- /sass/libs/_mixins.scss: -------------------------------------------------------------------------------- 1 | /// Makes an element's :before pseudoelement a FontAwesome icon. 2 | /// @param {string} $content Optional content value to use. 3 | /// @param {string} $where Optional pseudoelement to target (before or after). 4 | @mixin icon($content: false, $where: before) { 5 | 6 | text-decoration: none; 7 | 8 | &:#{$where} { 9 | 10 | @if $content { 11 | content: $content; 12 | } 13 | 14 | -moz-osx-font-smoothing: grayscale; 15 | -webkit-font-smoothing: antialiased; 16 | font-family: FontAwesome; 17 | font-style: normal; 18 | font-weight: normal; 19 | text-transform: none !important; 20 | 21 | } 22 | 23 | } 24 | 25 | /// Applies padding to an element, taking the current element-margin value into account. 26 | /// @param {mixed} $tb Top/bottom padding. 27 | /// @param {mixed} $lr Left/right padding. 28 | /// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left) 29 | /// @param {bool} $important If true, adds !important. 30 | @mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) { 31 | 32 | @if $important { 33 | $important: '!important'; 34 | } 35 | 36 | $x: 0.1em; 37 | 38 | @if unit(_size(element-margin)) == 'rem' { 39 | $x: 0.1rem; 40 | } 41 | 42 | padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important}; 43 | 44 | } 45 | 46 | /// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp). 47 | /// @param {string} $svg SVG data URL. 48 | /// @return {string} Encoded SVG data URL. 49 | @function svg-url($svg) { 50 | 51 | $svg: str-replace($svg, '"', '\''); 52 | $svg: str-replace($svg, '%', '%25'); 53 | $svg: str-replace($svg, '<', '%3C'); 54 | $svg: str-replace($svg, '>', '%3E'); 55 | $svg: str-replace($svg, '&', '%26'); 56 | $svg: str-replace($svg, '#', '%23'); 57 | $svg: str-replace($svg, '{', '%7B'); 58 | $svg: str-replace($svg, '}', '%7D'); 59 | $svg: str-replace($svg, ';', '%3B'); 60 | 61 | @return url("data:image/svg+xml;charset=utf8,#{$svg}"); 62 | 63 | } -------------------------------------------------------------------------------- /sass/libs/_vendor.scss: -------------------------------------------------------------------------------- 1 | // vendor.scss v1.0 | @ajlkn | MIT licensed */ 2 | 3 | // Vars. 4 | 5 | /// Vendor prefixes. 6 | /// @var {list} 7 | $vendor-prefixes: ( 8 | '-moz-', 9 | '-webkit-', 10 | '-ms-', 11 | '' 12 | ); 13 | 14 | /// Properties that should be vendorized. 15 | /// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org 16 | /// @var {list} 17 | $vendor-properties: ( 18 | 19 | // Animation. 20 | 'animation', 21 | 'animation-delay', 22 | 'animation-direction', 23 | 'animation-duration', 24 | 'animation-fill-mode', 25 | 'animation-iteration-count', 26 | 'animation-name', 27 | 'animation-play-state', 28 | 'animation-timing-function', 29 | 30 | // Appearance. 31 | 'appearance', 32 | 33 | // Backdrop filter. 34 | 'backdrop-filter', 35 | 36 | // Background image options. 37 | 'background-clip', 38 | 'background-origin', 39 | 'background-size', 40 | 41 | // Box sizing. 42 | 'box-sizing', 43 | 44 | // Clip path. 45 | 'clip-path', 46 | 47 | // Filter effects. 48 | 'filter', 49 | 50 | // Flexbox. 51 | 'align-content', 52 | 'align-items', 53 | 'align-self', 54 | 'flex', 55 | 'flex-basis', 56 | 'flex-direction', 57 | 'flex-flow', 58 | 'flex-grow', 59 | 'flex-shrink', 60 | 'flex-wrap', 61 | 'justify-content', 62 | 'order', 63 | 64 | // Font feature. 65 | 'font-feature-settings', 66 | 'font-language-override', 67 | 'font-variant-ligatures', 68 | 69 | // Font kerning. 70 | 'font-kerning', 71 | 72 | // Fragmented borders and backgrounds. 73 | 'box-decoration-break', 74 | 75 | // Grid layout. 76 | 'grid-column', 77 | 'grid-column-align', 78 | 'grid-column-end', 79 | 'grid-column-start', 80 | 'grid-row', 81 | 'grid-row-align', 82 | 'grid-row-end', 83 | 'grid-row-start', 84 | 'grid-template-columns', 85 | 'grid-template-rows', 86 | 87 | // Hyphens. 88 | 'hyphens', 89 | 'word-break', 90 | 91 | // Masks. 92 | 'mask', 93 | 'mask-border', 94 | 'mask-border-outset', 95 | 'mask-border-repeat', 96 | 'mask-border-slice', 97 | 'mask-border-source', 98 | 'mask-border-width', 99 | 'mask-clip', 100 | 'mask-composite', 101 | 'mask-image', 102 | 'mask-origin', 103 | 'mask-position', 104 | 'mask-repeat', 105 | 'mask-size', 106 | 107 | // Multicolumn. 108 | 'break-after', 109 | 'break-before', 110 | 'break-inside', 111 | 'column-count', 112 | 'column-fill', 113 | 'column-gap', 114 | 'column-rule', 115 | 'column-rule-color', 116 | 'column-rule-style', 117 | 'column-rule-width', 118 | 'column-span', 119 | 'column-width', 120 | 'columns', 121 | 122 | // Object fit. 123 | 'object-fit', 124 | 'object-position', 125 | 126 | // Regions. 127 | 'flow-from', 128 | 'flow-into', 129 | 'region-fragment', 130 | 131 | // Scroll snap points. 132 | 'scroll-snap-coordinate', 133 | 'scroll-snap-destination', 134 | 'scroll-snap-points-x', 135 | 'scroll-snap-points-y', 136 | 'scroll-snap-type', 137 | 138 | // Shapes. 139 | 'shape-image-threshold', 140 | 'shape-margin', 141 | 'shape-outside', 142 | 143 | // Tab size. 144 | 'tab-size', 145 | 146 | // Text align last. 147 | 'text-align-last', 148 | 149 | // Text decoration. 150 | 'text-decoration-color', 151 | 'text-decoration-line', 152 | 'text-decoration-skip', 153 | 'text-decoration-style', 154 | 155 | // Text emphasis. 156 | 'text-emphasis', 157 | 'text-emphasis-color', 158 | 'text-emphasis-position', 159 | 'text-emphasis-style', 160 | 161 | // Text size adjust. 162 | 'text-size-adjust', 163 | 164 | // Text spacing. 165 | 'text-spacing', 166 | 167 | // Transform. 168 | 'transform', 169 | 'transform-origin', 170 | 171 | // Transform 3D. 172 | 'backface-visibility', 173 | 'perspective', 174 | 'perspective-origin', 175 | 'transform-style', 176 | 177 | // Transition. 178 | 'transition', 179 | 'transition-delay', 180 | 'transition-duration', 181 | 'transition-property', 182 | 'transition-timing-function', 183 | 184 | // Unicode bidi. 185 | 'unicode-bidi', 186 | 187 | // User select. 188 | 'user-select', 189 | 190 | // Writing mode. 191 | 'writing-mode', 192 | 193 | ); 194 | 195 | /// Values that should be vendorized. 196 | /// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org 197 | /// @var {list} 198 | $vendor-values: ( 199 | 200 | // Cross fade. 201 | 'cross-fade', 202 | 203 | // Element function. 204 | 'element', 205 | 206 | // Filter function. 207 | 'filter', 208 | 209 | // Flexbox. 210 | 'flex', 211 | 'inline-flex', 212 | 213 | // Grab cursors. 214 | 'grab', 215 | 'grabbing', 216 | 217 | // Gradients. 218 | 'linear-gradient', 219 | 'repeating-linear-gradient', 220 | 'radial-gradient', 221 | 'repeating-radial-gradient', 222 | 223 | // Grid layout. 224 | 'grid', 225 | 'inline-grid', 226 | 227 | // Image set. 228 | 'image-set', 229 | 230 | // Intrinsic width. 231 | 'max-content', 232 | 'min-content', 233 | 'fit-content', 234 | 'fill', 235 | 'fill-available', 236 | 'stretch', 237 | 238 | // Sticky position. 239 | 'sticky', 240 | 241 | // Transform. 242 | 'transform', 243 | 244 | // Zoom cursors. 245 | 'zoom-in', 246 | 'zoom-out', 247 | 248 | ); 249 | 250 | // Functions. 251 | 252 | /// Removes a specific item from a list. 253 | /// @author Hugo Giraudel 254 | /// @param {list} $list List. 255 | /// @param {integer} $index Index. 256 | /// @return {list} Updated list. 257 | @function remove-nth($list, $index) { 258 | 259 | $result: null; 260 | 261 | @if type-of($index) != number { 262 | @warn "$index: #{quote($index)} is not a number for `remove-nth`."; 263 | } 264 | @else if $index == 0 { 265 | @warn "List index 0 must be a non-zero integer for `remove-nth`."; 266 | } 267 | @else if abs($index) > length($list) { 268 | @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; 269 | } 270 | @else { 271 | 272 | $result: (); 273 | $index: if($index < 0, length($list) + $index + 1, $index); 274 | 275 | @for $i from 1 through length($list) { 276 | 277 | @if $i != $index { 278 | $result: append($result, nth($list, $i)); 279 | } 280 | 281 | } 282 | 283 | } 284 | 285 | @return $result; 286 | 287 | } 288 | 289 | /// Replaces a substring within another string. 290 | /// @author Hugo Giraudel 291 | /// @param {string} $string String. 292 | /// @param {string} $search Substring. 293 | /// @param {string} $replace Replacement. 294 | /// @return {string} Updated string. 295 | @function str-replace($string, $search, $replace: '') { 296 | 297 | $index: str-index($string, $search); 298 | 299 | @if $index { 300 | @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); 301 | } 302 | 303 | @return $string; 304 | 305 | } 306 | 307 | /// Replaces a substring within each string in a list. 308 | /// @param {list} $strings List of strings. 309 | /// @param {string} $search Substring. 310 | /// @param {string} $replace Replacement. 311 | /// @return {list} Updated list of strings. 312 | @function str-replace-all($strings, $search, $replace: '') { 313 | 314 | @each $string in $strings { 315 | $strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace)); 316 | } 317 | 318 | @return $strings; 319 | 320 | } 321 | 322 | // Mixins. 323 | 324 | /// Wraps @content in vendorized keyframe blocks. 325 | /// @param {string} $name Name. 326 | @mixin keyframes($name) { 327 | 328 | @-moz-keyframes #{$name} { @content; } 329 | @-webkit-keyframes #{$name} { @content; } 330 | @-ms-keyframes #{$name} { @content; } 331 | @keyframes #{$name} { @content; } 332 | 333 | } 334 | 335 | /// Vendorizes a declaration's property and/or value(s). 336 | /// @param {string} $property Property. 337 | /// @param {mixed} $value String/list of value(s). 338 | @mixin vendor($property, $value) { 339 | 340 | // Determine if property should expand. 341 | $expandProperty: index($vendor-properties, $property); 342 | 343 | // Determine if value should expand (and if so, add '-prefix-' placeholder). 344 | $expandValue: false; 345 | 346 | @each $x in $value { 347 | @each $y in $vendor-values { 348 | @if $y == str-slice($x, 1, str-length($y)) { 349 | 350 | $value: set-nth($value, index($value, $x), '-prefix-' + $x); 351 | $expandValue: true; 352 | 353 | } 354 | } 355 | } 356 | 357 | // Expand property? 358 | @if $expandProperty { 359 | @each $vendor in $vendor-prefixes { 360 | #{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; 361 | } 362 | } 363 | 364 | // Expand just the value? 365 | @elseif $expandValue { 366 | @each $vendor in $vendor-prefixes { 367 | #{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; 368 | } 369 | } 370 | 371 | // Neither? Treat them as a normal declaration. 372 | @else { 373 | #{$property}: #{$value}; 374 | } 375 | 376 | } -------------------------------------------------------------------------------- /sass/main.scss.njk: -------------------------------------------------------------------------------- 1 | // Misc. 2 | $misc: ( 3 | max-spotlights: 10, 4 | max-features: 10, 5 | z-index-base: 10000 6 | ); 7 | 8 | // Duration. 9 | $duration: ( 10 | transitions: 0.2s, 11 | menu: 0.5s, 12 | fadein: 3s 13 | ); 14 | 15 | // Size. 16 | $size: ( 17 | element-height: 2.75em, 18 | element-margin: 2em, 19 | letter-spacing: 0.075em, 20 | letter-spacing-alt: 0.225em 21 | ); 22 | 23 | // Font. 24 | $font: ( 25 | family: ('Open Sans', Helvetica, sans-serif), 26 | family-fixed: ('Courier New', monospace), 27 | weight: 400, 28 | weight-bold: 600, 29 | weight-extrabold: 800 30 | ); 31 | 32 | // Palette. 33 | {% set palette = site.params.palettes[site.params.palette].sass %} 34 | $palette: ( 35 | bg: #2e3842, 36 | fg: #fff, 37 | fg-bold: #fff, 38 | fg-light: rgba(255,255,255,0.5), 39 | border: #fff, 40 | border-bg: rgba(144,144,144,0.25), 41 | border2: #fff, 42 | border2-bg: rgba(144,144,144,0.5), 43 | 44 | accent1: ( 45 | bg: {{ palette.accent1 }}, 46 | fg-bold: #ffffff, 47 | fg: mix({{ palette.accent1 }}, #ffffff, 25%), 48 | fg-light: mix({{ palette.accent1 }}, #ffffff, 40%), 49 | border: rgba(0,0,0,0.125), 50 | border-bg: rgba(255,255,255,0.075), 51 | border2: rgba(0,0,0,0.25), 52 | border2-bg: rgba(255,255,255,0.2) 53 | ), 54 | 55 | accent2: ( 56 | bg: {{ palette.accent2 }}, 57 | fg-bold: #ffffff, 58 | fg: mix({{ palette.accent2 }}, #ffffff, 25%), 59 | fg-light: mix({{ palette.accent2 }}, #ffffff, 40%), 60 | border: rgba(0,0,0,0.125), 61 | border-bg: rgba(255,255,255,0.075), 62 | border2: rgba(0,0,0,0.25), 63 | border2-bg: rgba(255,255,255,0.2) 64 | ), 65 | 66 | accent3: ( 67 | bg: {{ palette.accent3 }}, 68 | fg-bold: #ffffff, 69 | fg: mix({{ palette.accent3 }}, #ffffff, 25%), 70 | fg-light: mix({{ palette.accent3 }}, #ffffff, 40%), 71 | border: rgba(0,0,0,0.125), 72 | border-bg: rgba(255,255,255,0.075), 73 | border2: rgba(0,0,0,0.25), 74 | border2-bg: rgba(255,255,255,0.2) 75 | ), 76 | 77 | accent4: ( 78 | bg: {{ palette.accent4 }}, 79 | fg-bold: #ffffff, 80 | fg: mix({{ palette.accent4 }}, #ffffff, 25%), 81 | fg-light: mix({{ palette.accent4 }}, #ffffff, 40%), 82 | border: rgba(0,0,0,0.125), 83 | border-bg: rgba(255,255,255,0.075), 84 | border2: rgba(0,0,0,0.25), 85 | border2-bg: rgba(255,255,255,0.2) 86 | ), 87 | 88 | accent5: ( 89 | bg: {{ palette.accent5 }}, 90 | fg-bold: #ffffff, 91 | fg: mix({{ palette.accent5 }}, #ffffff, 25%), 92 | fg-light: mix({{ palette.accent5 }}, #ffffff, 40%), 93 | border: rgba(0,0,0,0.125), 94 | border-bg: rgba(255,255,255,0.075), 95 | border2: rgba(0,0,0,0.25), 96 | border2-bg: rgba(255,255,255,0.2) 97 | ), 98 | 99 | accent6: ( 100 | bg: {{ palette.accent6 }}, 101 | fg-bold: #ffffff, 102 | fg: mix({{ palette.accent6 }}, #ffffff, 25%), 103 | fg-light: mix({{ palette.accent6 }}, #ffffff, 40%), 104 | border: rgba(0,0,0,0.125), 105 | border-bg: rgba(255,255,255,0.075), 106 | border2: rgba(0,0,0,0.25), 107 | border2-bg: rgba(255,255,255,0.2) 108 | ), 109 | 110 | accent7: ( 111 | bg: #ffffff, 112 | fg-bold: #2E3842, 113 | fg: #4E4852, 114 | fg-light: #8E8892, 115 | border: #dfdfdf, 116 | border-bg: rgba(0,0,0,0.0375), 117 | border2: #bfbfbf, 118 | border2-bg: rgba(0,0,0,0.1) 119 | ) 120 | ); 121 | @import 'libs/functions'; 122 | @import 'libs/mixins'; 123 | @import 'libs/vendor'; 124 | @import 'libs/breakpoints'; 125 | @import 'libs/html-grid'; 126 | @import 'font-awesome.min.css'; 127 | @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,800,800italic'); 128 | 129 | /* 130 | Spectral by Pixelarity 131 | pixelarity.com | hello@pixelarity.com 132 | License: pixelarity.com/license 133 | */ 134 | 135 | // Breakpoints. 136 | 137 | @include breakpoints(( 138 | xlarge: ( 1281px, 1680px ), 139 | large: ( 981px, 1280px ), 140 | medium: ( 737px, 980px ), 141 | small: ( 481px, 736px ), 142 | xsmall: ( null, 480px ), 143 | )); 144 | 145 | // Reset. 146 | // Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain) 147 | 148 | html, body, div, span, applet, object, 149 | iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 150 | pre, a, abbr, acronym, address, big, cite, 151 | code, del, dfn, em, img, ins, kbd, q, s, samp, 152 | small, strike, strong, sub, sup, tt, var, b, 153 | u, i, center, dl, dt, dd, ol, ul, li, fieldset, 154 | form, label, legend, table, caption, tbody, 155 | tfoot, thead, tr, th, td, article, aside, 156 | canvas, details, embed, figure, figcaption, 157 | footer, header, hgroup, menu, nav, output, ruby, 158 | section, summary, time, mark, audio, video { 159 | margin: 0; 160 | padding: 0; 161 | border: 0; 162 | font-size: 100%; 163 | font: inherit; 164 | vertical-align: baseline; 165 | } 166 | 167 | article, aside, details, figcaption, figure, 168 | footer, header, hgroup, menu, nav, section { 169 | display: block; 170 | } 171 | 172 | body { 173 | line-height: 1; 174 | } 175 | 176 | ol, ul { 177 | list-style:none; 178 | } 179 | 180 | blockquote, q { 181 | quotes: none; 182 | 183 | &:before, 184 | &:after { 185 | content: ''; 186 | content: none; 187 | } 188 | } 189 | 190 | table { 191 | border-collapse: collapse; 192 | border-spacing: 0; 193 | } 194 | 195 | body { 196 | -webkit-text-size-adjust: none; 197 | } 198 | 199 | mark { 200 | background-color: transparent; 201 | color: inherit; 202 | } 203 | 204 | input::-moz-focus-inner { 205 | border: 0; 206 | padding: 0; 207 | } 208 | 209 | input, select, textarea { 210 | -moz-appearance: none; 211 | -webkit-appearance: none; 212 | -ms-appearance: none; 213 | appearance: none; 214 | } 215 | 216 | /* Basic */ 217 | 218 | @-ms-viewport { 219 | width: device-width; 220 | } 221 | 222 | // Set box model to border-box. 223 | // Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice 224 | html { 225 | box-sizing: border-box; 226 | } 227 | 228 | *, *:before, *:after { 229 | box-sizing: inherit; 230 | } 231 | 232 | body { 233 | background: _palette(bg); 234 | 235 | // Stops initial animations until page loads. 236 | &.is-preload { 237 | *, *:before, *:after { 238 | @include vendor('animation', 'none !important'); 239 | @include vendor('transition', 'none !important'); 240 | } 241 | } 242 | 243 | } 244 | 245 | body, input, select, textarea { 246 | color: _palette(fg); 247 | font-family: _font(family); 248 | font-size: 15pt; 249 | font-weight: _font(weight); 250 | letter-spacing: _size(letter-spacing); 251 | line-height: 1.65em; 252 | 253 | @include breakpoint('<=xlarge') { 254 | font-size: 13pt; 255 | } 256 | 257 | @include breakpoint('<=large') { 258 | font-size: 12pt; 259 | } 260 | 261 | @include breakpoint('<=small') { 262 | font-size: 11pt; 263 | letter-spacing: _size(letter-spacing) * 0.5; 264 | } 265 | } 266 | 267 | a { 268 | @include vendor('transition', ('color #{_duration(transitions)} ease', 'border-bottom-color #{_duration(transitions)} ease')); 269 | border-bottom: dotted 1px; 270 | color: inherit; 271 | text-decoration: none; 272 | 273 | &:hover { 274 | border-bottom-color: transparent; 275 | } 276 | } 277 | 278 | strong, b { 279 | color: _palette(fg-bold); 280 | font-weight: _font(weight-bold); 281 | } 282 | 283 | em, i { 284 | font-style: italic; 285 | } 286 | 287 | p { 288 | margin: 0 0 _size(element-margin) 0; 289 | } 290 | 291 | h1, h2, h3, h4, h5, h6 { 292 | color: _palette(fg-bold); 293 | font-weight: _font(weight-extrabold); 294 | letter-spacing: _size(letter-spacing-alt); 295 | line-height: 1em; 296 | margin: 0 0 (_size(element-margin) * 0.5) 0; 297 | text-transform: uppercase; 298 | 299 | a { 300 | color: inherit; 301 | text-decoration: none; 302 | } 303 | } 304 | 305 | h2 { 306 | font-size: 1.35em; 307 | line-height: 1.75em; 308 | 309 | @include breakpoint('<=small') { 310 | font-size: 1.1em; 311 | line-height: 1.65em; 312 | } 313 | } 314 | 315 | h3 { 316 | font-size: 1.15em; 317 | line-height: 1.75em; 318 | 319 | @include breakpoint('<=small') { 320 | font-size: 1em; 321 | line-height: 1.65em; 322 | } 323 | } 324 | 325 | h4 { 326 | font-size: 1em; 327 | line-height: 1.5em; 328 | } 329 | 330 | h5 { 331 | font-size: 0.8em; 332 | line-height: 1.5em; 333 | } 334 | 335 | h6 { 336 | font-size: 0.7em; 337 | line-height: 1.5em; 338 | } 339 | 340 | sub { 341 | font-size: 0.8em; 342 | position: relative; 343 | top: 0.5em; 344 | } 345 | 346 | sup { 347 | font-size: 0.8em; 348 | position: relative; 349 | top: -0.5em; 350 | } 351 | 352 | hr { 353 | border: 0; 354 | border-bottom: solid 2px _palette(border); 355 | margin: (_size(element-margin) * 1.5) 0; 356 | 357 | &.major { 358 | margin: (_size(element-margin) * 2.25) 0; 359 | } 360 | } 361 | 362 | blockquote { 363 | border-left: solid 4px _palette(border); 364 | font-style: italic; 365 | margin: 0 0 _size(element-margin) 0; 366 | padding: 0.5em 0 0.5em 2em; 367 | } 368 | 369 | code { 370 | background: _palette(border-bg); 371 | border-radius: 3px; 372 | font-family: _font(family-fixed); 373 | font-size: 0.9em; 374 | letter-spacing: 0; 375 | margin: 0 0.25em; 376 | padding: 0.25em 0.65em; 377 | } 378 | 379 | pre { 380 | -webkit-overflow-scrolling: touch; 381 | font-family: _font(family-fixed); 382 | font-size: 0.9em; 383 | margin: 0 0 _size(element-margin) 0; 384 | 385 | code { 386 | display: block; 387 | line-height: 1.75em; 388 | padding: 1em 1.5em; 389 | overflow-x: auto; 390 | } 391 | } 392 | 393 | .align-left { 394 | text-align: left; 395 | } 396 | 397 | .align-center { 398 | text-align: center; 399 | } 400 | 401 | .align-right { 402 | text-align: right; 403 | } 404 | 405 | /* Row */ 406 | 407 | .row { 408 | @include html-grid(1.5em); 409 | 410 | @include breakpoint('<=xlarge') { 411 | @include html-grid(1.5em, 'xlarge'); 412 | } 413 | 414 | @include breakpoint('<=large') { 415 | @include html-grid(1.5em, 'large'); 416 | } 417 | 418 | @include breakpoint('<=medium') { 419 | @include html-grid(1.5em, 'medium'); 420 | } 421 | 422 | @include breakpoint('<=small') { 423 | @include html-grid(1.5em, 'small'); 424 | } 425 | 426 | @include breakpoint('<=xsmall') { 427 | @include html-grid(1.5em, 'xsmall'); 428 | } 429 | } 430 | 431 | /* Section/Article */ 432 | 433 | section, article { 434 | &.special { 435 | text-align: center; 436 | } 437 | } 438 | 439 | header { 440 | p { 441 | color: _palette(fg-light); 442 | position: relative; 443 | top: -0.25em; 444 | } 445 | 446 | h2 + p { 447 | } 448 | 449 | h3 + p { 450 | font-size: 1.1em; 451 | } 452 | 453 | h4 + p, 454 | h5 + p, 455 | h6 + p { 456 | font-size: 0.9em; 457 | } 458 | 459 | &.major { 460 | margin: 0 0 (_size(element-margin) * 1.75) 0; 461 | 462 | h2, h3, h4, h5, h6 { 463 | border-bottom: solid 2px _palette(border); 464 | display: inline-block; 465 | padding-bottom: 1em; 466 | position: relative; 467 | 468 | &:after { 469 | content: ''; 470 | display: block; 471 | height: 1px; 472 | } 473 | } 474 | 475 | p { 476 | color: _palette(fg); 477 | top: 0; 478 | } 479 | 480 | @include breakpoint('<=small') { 481 | margin: 0 0 _size(element-margin) 0; 482 | } 483 | } 484 | 485 | @include breakpoint('<=medium') { 486 | br { 487 | display: none; 488 | } 489 | } 490 | } 491 | 492 | /* Form */ 493 | 494 | form { 495 | margin: 0 0 _size(element-margin) 0; 496 | } 497 | 498 | label { 499 | color: _palette(fg-bold); 500 | display: block; 501 | font-size: 0.9em; 502 | font-weight: _font(weight-bold); 503 | margin: 0 0 (_size(element-margin) * 0.5) 0; 504 | } 505 | 506 | input[type="text"], 507 | input[type="password"], 508 | input[type="email"], 509 | select, 510 | textarea { 511 | @include vendor('appearance', 'none'); 512 | background-color: _palette(border-bg); 513 | border-radius: 3px; 514 | border: none; 515 | color: inherit; 516 | display: block; 517 | outline: 0; 518 | padding: 0 1em; 519 | text-decoration: none; 520 | width: 100%; 521 | 522 | &:invalid { 523 | box-shadow: none; 524 | } 525 | 526 | &:focus { 527 | box-shadow: 0 0 0 2px _palette(accent1, bg); 528 | } 529 | } 530 | 531 | select { 532 | background-size: 1.25em; 533 | background-repeat: no-repeat; 534 | background-position: calc(100% - 1em) center; 535 | height: _size(element-height); 536 | padding-right: _size(element-height); 537 | text-overflow: ellipsis; 538 | 539 | &:focus { 540 | &::-ms-value { 541 | background-color: transparent; 542 | } 543 | } 544 | 545 | &::-ms-expand { 546 | display: none; 547 | } 548 | } 549 | 550 | input[type="text"], 551 | input[type="password"], 552 | input[type="email"], 553 | select { 554 | height: _size(element-height); 555 | } 556 | 557 | textarea { 558 | padding: 0.75em 1em; 559 | } 560 | 561 | input[type="checkbox"], 562 | input[type="radio"], { 563 | @include vendor('appearance', 'none'); 564 | display: block; 565 | float: left; 566 | margin-right: -2em; 567 | opacity: 0; 568 | width: 1em; 569 | z-index: -1; 570 | 571 | & + label { 572 | @include icon; 573 | color: _palette(fg); 574 | cursor: pointer; 575 | display: inline-block; 576 | font-size: 1em; 577 | font-weight: _font(weight); 578 | padding-left: (_size(element-height) * 0.6) + 0.75em; 579 | padding-right: 0.75em; 580 | position: relative; 581 | 582 | &:before { 583 | background: _palette(border-bg); 584 | border-radius: 3px; 585 | content: ''; 586 | display: inline-block; 587 | height: (_size(element-height) * 0.6); 588 | left: 0; 589 | line-height: (_size(element-height) * 0.575); 590 | position: absolute; 591 | text-align: center; 592 | top: 0; 593 | width: (_size(element-height) * 0.6); 594 | } 595 | } 596 | 597 | &:checked + label { 598 | &:before { 599 | background: _palette(bg); 600 | color: _palette(fg-bold); 601 | content: '\f00c'; 602 | } 603 | } 604 | 605 | &:focus + label { 606 | &:before { 607 | box-shadow: 0 0 0 2px _palette(accent1, bg); 608 | } 609 | } 610 | } 611 | 612 | input[type="checkbox"] { 613 | & + label { 614 | &:before { 615 | border-radius: 3px; 616 | } 617 | } 618 | } 619 | 620 | input[type="radio"] { 621 | & + label { 622 | &:before { 623 | border-radius: 100%; 624 | } 625 | } 626 | } 627 | 628 | ::-webkit-input-placeholder { 629 | color: _palette(fg-light) !important; 630 | opacity: 1.0; 631 | } 632 | 633 | :-moz-placeholder { 634 | color: _palette(fg-light) !important; 635 | opacity: 1.0; 636 | } 637 | 638 | ::-moz-placeholder { 639 | color: _palette(fg-light) !important; 640 | opacity: 1.0; 641 | } 642 | 643 | :-ms-input-placeholder { 644 | color: _palette(fg-light) !important; 645 | opacity: 1.0; 646 | } 647 | 648 | /* Box */ 649 | 650 | .box { 651 | border-radius: 3px; 652 | border: solid 2px _palette(border); 653 | margin-bottom: _size(element-margin); 654 | padding: 1.5em; 655 | 656 | > :last-child, 657 | > :last-child > :last-child, 658 | > :last-child > :last-child > :last-child { 659 | margin-bottom: 0; 660 | } 661 | 662 | &.alt { 663 | border: 0; 664 | border-radius: 0; 665 | padding: 0; 666 | } 667 | } 668 | 669 | /* Icon */ 670 | 671 | .icon { 672 | @include icon; 673 | border-bottom: none; 674 | position: relative; 675 | 676 | > .label { 677 | display: none; 678 | } 679 | 680 | &.major { 681 | @include vendor('transform', 'rotate(-45deg)'); 682 | border-radius: 3px; 683 | border: solid 2px _palette(border); 684 | display: inline-block; 685 | font-size: 1.35em; 686 | height: calc(3em + 2px); 687 | line-height: 3em; 688 | text-align: center; 689 | width: calc(3em + 2px); 690 | 691 | &:before { 692 | @include vendor('transform', 'rotate(45deg)'); 693 | display: inline-block; 694 | font-size: 1.5em; 695 | } 696 | 697 | @include breakpoint('<=small') { 698 | font-size: 1em; 699 | } 700 | } 701 | 702 | &.style1 { 703 | color: _palette(accent2, bg); 704 | } 705 | 706 | &.style2 { 707 | color: _palette(accent3, bg); 708 | } 709 | 710 | &.style3 { 711 | color: _palette(accent4, bg); 712 | } 713 | } 714 | 715 | /* Image */ 716 | 717 | .image { 718 | border-radius: 3px; 719 | border: 0; 720 | display: inline-block; 721 | position: relative; 722 | 723 | img { 724 | border-radius: 3px; 725 | display: block; 726 | } 727 | 728 | &.left { 729 | float: left; 730 | margin: 0 2em 2em 0; 731 | top: 0.25em; 732 | } 733 | 734 | &.right { 735 | float: right; 736 | margin: 0 0 2em 2em; 737 | top: 0.25em; 738 | } 739 | 740 | &.left, 741 | &.right { 742 | max-width: 40%; 743 | 744 | img { 745 | width: 100%; 746 | } 747 | } 748 | 749 | &.fit { 750 | display: block; 751 | margin: 0 0 _size(element-margin) 0; 752 | width: 100%; 753 | 754 | img { 755 | width: 100%; 756 | } 757 | } 758 | } 759 | 760 | /* List */ 761 | 762 | ol { 763 | list-style: decimal; 764 | margin: 0 0 _size(element-margin) 0; 765 | padding-left: 1.25em; 766 | 767 | li { 768 | padding-left: 0.25em; 769 | } 770 | } 771 | 772 | ul { 773 | list-style: disc; 774 | margin: 0 0 _size(element-margin) 0; 775 | padding-left: 1em; 776 | 777 | li { 778 | padding-left: 0.5em; 779 | } 780 | 781 | &.alt { 782 | list-style: none; 783 | padding-left: 0; 784 | 785 | li { 786 | border-top: solid 1px _palette(border); 787 | padding: 0.5em 0; 788 | 789 | &:first-child { 790 | border-top: 0; 791 | padding-top: 0; 792 | } 793 | } 794 | } 795 | } 796 | 797 | dl { 798 | margin: 0 0 _size(element-margin) 0; 799 | } 800 | 801 | /* Actions */ 802 | 803 | ul.actions { 804 | @include vendor('display', 'flex'); 805 | cursor: default; 806 | list-style: none; 807 | margin-left: (_size(element-margin) * -0.5); 808 | padding-left: 0; 809 | 810 | li { 811 | padding: 0 0 0 (_size(element-margin) * 0.5); 812 | vertical-align: middle; 813 | } 814 | 815 | &.special { 816 | @include vendor('justify-content', 'center'); 817 | width: 100%; 818 | margin-left: 0; 819 | 820 | li { 821 | &:first-child { 822 | padding-left: 0; 823 | } 824 | } 825 | } 826 | 827 | &.stacked { 828 | @include vendor('flex-direction', 'column'); 829 | margin-left: 0; 830 | 831 | li { 832 | padding: (_size(element-margin) * 0.5) 0 0 0; 833 | 834 | &:first-child { 835 | padding-top: 0; 836 | } 837 | } 838 | } 839 | 840 | &.fit { 841 | width: calc(100% + #{_size(element-margin) * 0.5}); 842 | 843 | li { 844 | @include vendor('flex-grow', '1'); 845 | @include vendor('flex-shrink', '1'); 846 | width: 100%; 847 | 848 | > * { 849 | width: 100%; 850 | } 851 | } 852 | 853 | &.stacked { 854 | width: 100%; 855 | } 856 | } 857 | 858 | @include breakpoint('<=xsmall') { 859 | &:not(.fixed) { 860 | @include vendor('flex-direction', 'column'); 861 | margin-left: 0; 862 | width: 100% !important; 863 | 864 | li { 865 | @include vendor('flex-grow', '1'); 866 | @include vendor('flex-shrink', '1'); 867 | padding: (_size(element-margin) * 0.5) 0 0 0; 868 | text-align: center; 869 | width: 100%; 870 | 871 | > * { 872 | width: 100%; 873 | } 874 | 875 | &:first-child { 876 | padding-top: 0; 877 | } 878 | 879 | input[type="submit"], 880 | input[type="reset"], 881 | input[type="button"], 882 | button, 883 | .button { 884 | width: 100%; 885 | 886 | &.icon { 887 | &:before { 888 | margin-left: -0.5em; 889 | } 890 | } 891 | } 892 | } 893 | } 894 | } 895 | } 896 | 897 | /* Icons */ 898 | 899 | ul.icons { 900 | cursor: default; 901 | list-style: none; 902 | padding-left: 0; 903 | 904 | li { 905 | display: inline-block; 906 | padding: 0 1em 0 0; 907 | 908 | &:last-child { 909 | padding-right: 0 !important; 910 | } 911 | } 912 | 913 | &.major { 914 | padding: 1em 0; 915 | 916 | li { 917 | padding-right: 3.5em; 918 | 919 | @include breakpoint('<=small') { 920 | padding: 0 1em !important; 921 | } 922 | } 923 | } 924 | } 925 | 926 | /* Table */ 927 | 928 | .table-wrapper { 929 | -webkit-overflow-scrolling: touch; 930 | overflow-x: auto; 931 | } 932 | 933 | table { 934 | margin: 0 0 _size(element-margin) 0; 935 | width: 100%; 936 | 937 | tbody { 938 | tr { 939 | border: solid 1px _palette(border); 940 | border-left: 0; 941 | border-right: 0; 942 | 943 | &:nth-child(2n + 1) { 944 | background-color: _palette(border-bg); 945 | } 946 | } 947 | } 948 | 949 | td { 950 | padding: 0.75em 0.75em; 951 | } 952 | 953 | th { 954 | color: _palette(fg-bold); 955 | font-size: 0.9em; 956 | font-weight: _font(weight-bold); 957 | padding: 0 0.75em 0.75em 0.75em; 958 | text-align: left; 959 | } 960 | 961 | thead { 962 | border-bottom: solid 2px _palette(border); 963 | } 964 | 965 | tfoot { 966 | border-top: solid 2px _palette(border); 967 | } 968 | 969 | &.alt { 970 | border-collapse: separate; 971 | 972 | tbody { 973 | tr { 974 | td { 975 | border: solid 1px _palette(border); 976 | border-left-width: 0; 977 | border-top-width: 0; 978 | 979 | &:first-child { 980 | border-left-width: 1px; 981 | } 982 | } 983 | 984 | &:first-child { 985 | td { 986 | border-top-width: 1px; 987 | } 988 | } 989 | } 990 | } 991 | 992 | thead { 993 | border-bottom: 0; 994 | } 995 | 996 | tfoot { 997 | border-top: 0; 998 | } 999 | } 1000 | } 1001 | 1002 | /* Button */ 1003 | 1004 | input[type="submit"], 1005 | input[type="reset"], 1006 | input[type="button"], 1007 | button, 1008 | .button { 1009 | @include vendor('appearance', 'none'); 1010 | @include vendor('transition', ('background-color #{_duration(transitions)} ease-in-out', 'color #{_duration(transitions)} ease-in-out')); 1011 | background-color: transparent; 1012 | border-radius: 3px; 1013 | border: 0; 1014 | box-shadow: inset 0 0 0 2px _palette(border); 1015 | color: _palette(fg-bold); 1016 | cursor: pointer; 1017 | display: inline-block; 1018 | font-size: 0.8em; 1019 | font-weight: _font(weight-bold); 1020 | height: 3.125em; 1021 | letter-spacing: _size(letter-spacing-alt); 1022 | line-height: 3.125em; 1023 | max-width: 30em; 1024 | padding: 0 2.75em; 1025 | text-align: center; 1026 | text-decoration: none; 1027 | text-transform: uppercase; 1028 | white-space: nowrap; 1029 | overflow: hidden; 1030 | text-overflow: ellipsis; 1031 | 1032 | &:hover { 1033 | background-color: _palette(border-bg); 1034 | } 1035 | 1036 | &:active { 1037 | background-color: _palette(border2-bg); 1038 | } 1039 | 1040 | &.icon { 1041 | &:before { 1042 | margin-right: 0.5em; 1043 | } 1044 | } 1045 | 1046 | &.fit { 1047 | width: 100%; 1048 | } 1049 | 1050 | &.small { 1051 | font-size: 0.8em; 1052 | } 1053 | 1054 | &.large { 1055 | font-size: 1.35em; 1056 | } 1057 | 1058 | &.primary { 1059 | background-color: _palette(accent6, bg); 1060 | box-shadow: none !important; 1061 | color: _palette(accent6, fg-bold) !important; 1062 | 1063 | &:hover { 1064 | background-color: lighten(_palette(accent6, bg), 5) !important; 1065 | } 1066 | 1067 | &:active { 1068 | background-color: darken(_palette(accent6, bg), 5) !important; 1069 | } 1070 | } 1071 | 1072 | &.disabled, 1073 | &:disabled { 1074 | @include vendor('pointer-events', 'none'); 1075 | opacity: 0.25; 1076 | } 1077 | 1078 | @include breakpoint('<=small') { 1079 | height: 3.75em; 1080 | line-height: 3.75em; 1081 | } 1082 | } 1083 | 1084 | /* Features */ 1085 | 1086 | .features { 1087 | @include vendor('display', 'flex'); 1088 | @include vendor('flex-wrap', 'wrap'); 1089 | @include vendor('justify-content', 'center'); 1090 | list-style: none; 1091 | padding: 0; 1092 | width: 100%; 1093 | 1094 | li { 1095 | @include padding(4em, 4em, (0,0,0,2em)); 1096 | display: block; 1097 | position: relative; 1098 | text-align: left; 1099 | width: 50%; 1100 | 1101 | @for $i from 1 through _misc(max-features) { 1102 | $j: 0.035 * $i; 1103 | 1104 | &:nth-child(#{$i}) { 1105 | background-color: rgba(0,0,0, $j); 1106 | } 1107 | } 1108 | 1109 | &:before { 1110 | display: block; 1111 | color: _palette(accent2, bg); 1112 | position: absolute; 1113 | left: 1.75em; 1114 | top: 2.75em; 1115 | font-size: 1.5em; 1116 | } 1117 | 1118 | &:nth-child(1) { 1119 | border-top-left-radius: 3px; 1120 | } 1121 | 1122 | &:nth-child(2) { 1123 | border-top-right-radius: 3px; 1124 | } 1125 | 1126 | &:nth-last-child(1) { 1127 | border-bottom-right-radius: 3px; 1128 | } 1129 | 1130 | &:nth-last-child(2) { 1131 | border-bottom-left-radius: 3px; 1132 | } 1133 | 1134 | @include breakpoint('<=medium') { 1135 | @include padding(3em, 2em); 1136 | text-align: center; 1137 | 1138 | &:before { 1139 | left: 0; 1140 | margin: 0 0 (_size(element-margin) * 0.5) 0; 1141 | position: relative; 1142 | top: 0; 1143 | } 1144 | } 1145 | 1146 | @include breakpoint('<=small') { 1147 | @include padding(3em, 0); 1148 | background-color: transparent !important; 1149 | border-top: solid 2px _palette(border); 1150 | width: 100%; 1151 | 1152 | &:first-child { 1153 | border-top: 0; 1154 | } 1155 | } 1156 | } 1157 | } 1158 | 1159 | /* Spotlight */ 1160 | 1161 | .spotlight { 1162 | @include vendor('align-items', 'center'); 1163 | @include vendor('display', 'flex'); 1164 | 1165 | .image { 1166 | @include vendor('order', '1'); 1167 | border-radius: 0; 1168 | width: 40%; 1169 | 1170 | img { 1171 | border-radius: 0; 1172 | width: 100%; 1173 | } 1174 | } 1175 | 1176 | .content { 1177 | @include padding(2em, 4em); 1178 | @include vendor('order', '2'); 1179 | max-width: 48em; 1180 | width: 60%; 1181 | } 1182 | 1183 | &:nth-child(2n) { 1184 | @include vendor('flex-direction', 'row-reverse'); 1185 | } 1186 | 1187 | @for $i from 1 through _misc(max-spotlights) { 1188 | $j: 0.075 * $i; 1189 | 1190 | &:nth-child(#{$i}) { 1191 | background-color: rgba(0,0,0, $j); 1192 | } 1193 | } 1194 | 1195 | @include breakpoint('<=large') { 1196 | .image { 1197 | width: 45%; 1198 | } 1199 | 1200 | .content { 1201 | width: 55%; 1202 | } 1203 | } 1204 | 1205 | @include breakpoint('<=medium') { 1206 | display: block; 1207 | 1208 | br { 1209 | display: none; 1210 | } 1211 | 1212 | .image { 1213 | width: 100%; 1214 | } 1215 | 1216 | .content { 1217 | @include padding(4em, 3em); 1218 | max-width: none; 1219 | text-align: center; 1220 | width: 100%; 1221 | } 1222 | } 1223 | 1224 | @include breakpoint('<=small') { 1225 | .content { 1226 | @include padding(3em, 2em); 1227 | } 1228 | } 1229 | } 1230 | 1231 | /* Wrapper */ 1232 | 1233 | @mixin wrapper($p) { 1234 | background-color: _palette($p, bg); 1235 | color: _palette($p, fg); 1236 | 1237 | // Basic 1238 | 1239 | strong, b { 1240 | color: _palette($p, fg-bold); 1241 | } 1242 | 1243 | h2, h3, h4, h5, h6 { 1244 | color: _palette($p, fg-bold); 1245 | } 1246 | 1247 | hr { 1248 | border-color: _palette($p, border); 1249 | } 1250 | 1251 | blockquote { 1252 | border-color: _palette($p, border); 1253 | } 1254 | 1255 | code { 1256 | background: _palette($p, border-bg); 1257 | } 1258 | 1259 | // Section/Article 1260 | 1261 | header { 1262 | p { 1263 | color: _palette($p, fg-light); 1264 | } 1265 | 1266 | &.major { 1267 | h2, h3, h4, h5, h6 { 1268 | border-color: _palette($p, border); 1269 | } 1270 | 1271 | p { 1272 | color: _palette($p, fg); 1273 | } 1274 | } 1275 | } 1276 | 1277 | // Form 1278 | 1279 | label { 1280 | color: _palette($p, fg-bold); 1281 | } 1282 | 1283 | input[type="text"], 1284 | input[type="password"], 1285 | input[type="email"], 1286 | select, 1287 | textarea { 1288 | background-color: _palette($p, border-bg); 1289 | } 1290 | 1291 | select { 1292 | background-image: svg-url(""); 1293 | 1294 | option { 1295 | color: _palette($p, fg-bold); 1296 | background: _palette($p, bg); 1297 | } 1298 | } 1299 | 1300 | input[type="checkbox"], 1301 | input[type="radio"], { 1302 | & + label { 1303 | color: _palette($p, fg); 1304 | 1305 | &:before { 1306 | background: _palette($p, border-bg); 1307 | } 1308 | } 1309 | 1310 | &:checked + label { 1311 | &:before { 1312 | background: _palette($p, fg-bold); 1313 | color: _palette($p, bg); 1314 | } 1315 | } 1316 | } 1317 | 1318 | ::-webkit-input-placeholder { 1319 | color: _palette($p, fg-light) !important; 1320 | } 1321 | 1322 | :-moz-placeholder { 1323 | color: _palette($p, fg-light) !important; 1324 | } 1325 | 1326 | ::-moz-placeholder { 1327 | color: _palette($p, fg-light) !important; 1328 | } 1329 | 1330 | :-ms-input-placeholder { 1331 | color: _palette($p, fg-light) !important; 1332 | } 1333 | 1334 | .formerize-placeholder { 1335 | color: _palette($p, fg-light) !important; 1336 | } 1337 | 1338 | // Icon 1339 | 1340 | .icon { 1341 | &.major { 1342 | border-color: _palette($p, border); 1343 | } 1344 | } 1345 | 1346 | // List 1347 | 1348 | ul { 1349 | &.alt { 1350 | li { 1351 | border-color: _palette($p, border); 1352 | } 1353 | } 1354 | } 1355 | 1356 | // Table 1357 | 1358 | table { 1359 | tbody { 1360 | tr { 1361 | border-color: _palette($p, border); 1362 | 1363 | &:nth-child(2n + 1) { 1364 | background-color: _palette($p, border-bg); 1365 | } 1366 | } 1367 | } 1368 | 1369 | th { 1370 | color: _palette($p, fg-bold); 1371 | } 1372 | 1373 | thead { 1374 | border-color: _palette($p, border); 1375 | } 1376 | 1377 | tfoot { 1378 | border-color: _palette($p, border); 1379 | } 1380 | 1381 | &.alt { 1382 | tbody { 1383 | tr { 1384 | td { 1385 | border-color: _palette($p, border); 1386 | } 1387 | } 1388 | } 1389 | } 1390 | } 1391 | 1392 | // Button 1393 | 1394 | input[type="submit"], 1395 | input[type="reset"], 1396 | input[type="button"], 1397 | button, 1398 | .button { 1399 | box-shadow: inset 0 0 0 2px _palette($p, border); 1400 | color: _palette($p, fg-bold); 1401 | 1402 | &:hover { 1403 | background-color: _palette($p, border-bg); 1404 | } 1405 | 1406 | &:active { 1407 | background-color: _palette($p, border2-bg); 1408 | } 1409 | } 1410 | 1411 | // Features 1412 | 1413 | .features { 1414 | li { 1415 | @include breakpoint('<=small') { 1416 | border-top-color: _palette($p, border); 1417 | } 1418 | } 1419 | } 1420 | 1421 | } 1422 | 1423 | .wrapper { 1424 | @include padding(6em, 0); 1425 | 1426 | > .inner { 1427 | width: 60em; 1428 | margin: 0 auto; 1429 | 1430 | @include breakpoint('<=large') { 1431 | width: 90%; 1432 | } 1433 | 1434 | @include breakpoint('<=medium') { 1435 | width: 100%; 1436 | } 1437 | } 1438 | 1439 | &.alt { 1440 | padding: 0; 1441 | } 1442 | 1443 | &.style1 { 1444 | @include wrapper(accent1); 1445 | } 1446 | 1447 | &.style2 { 1448 | background-color: _palette(bg); 1449 | } 1450 | 1451 | &.style3 { 1452 | @include wrapper(accent5); 1453 | } 1454 | 1455 | &.style4 { 1456 | background-color: transparent; 1457 | } 1458 | 1459 | &.style5 { 1460 | @include wrapper(accent7); 1461 | } 1462 | 1463 | @include breakpoint('<=medium') { 1464 | @include padding(4em, 3em); 1465 | } 1466 | 1467 | @include breakpoint('<=small') { 1468 | @include padding(3em, 2em); 1469 | } 1470 | } 1471 | 1472 | /* Page Wrapper + Menu */ 1473 | 1474 | #page-wrapper { 1475 | @include vendor('transition', 'opacity #{_duration(menu)} ease'); 1476 | opacity: 1; 1477 | padding-top: 3em; 1478 | 1479 | &:before { 1480 | background: rgba(0,0,0,0); 1481 | content: ''; 1482 | display: block; 1483 | display: none; 1484 | height: 100%; 1485 | left: 0; 1486 | position: fixed; 1487 | top: 0; 1488 | width: 100%; 1489 | z-index: _misc(z-index-base) + 1; 1490 | } 1491 | } 1492 | 1493 | #menu { 1494 | @include vendor('transform', 'translateX(20em)'); 1495 | @include vendor('transition', 'transform #{_duration(menu)} ease'); 1496 | -webkit-overflow-scrolling: touch; 1497 | background: _palette(accent1, bg); 1498 | color: _palette(accent1, fg-bold); 1499 | height: 100%; 1500 | max-width: 80%; 1501 | overflow-y: auto; 1502 | padding: 3em 2em; 1503 | position: fixed; 1504 | right: 0; 1505 | top: 0; 1506 | width: 20em; 1507 | z-index: _misc(z-index-base) + 2; 1508 | 1509 | ul { 1510 | list-style: none; 1511 | padding: 0; 1512 | 1513 | > li { 1514 | border-top: solid 1px _palette(accent1, border); 1515 | margin: 0.5em 0 0 0; 1516 | padding: 0.5em 0 0 0; 1517 | 1518 | &:first-child { 1519 | border-top: 0 !important; 1520 | margin-top: 0 !important; 1521 | padding-top: 0 !important; 1522 | } 1523 | 1524 | > a { 1525 | border: 0; 1526 | color: inherit; 1527 | display: block; 1528 | font-size: 0.8em; 1529 | letter-spacing: _size(letter-spacing-alt); 1530 | outline: 0; 1531 | text-decoration: none; 1532 | text-transform: uppercase; 1533 | 1534 | @include breakpoint('<=small') { 1535 | line-height: 3em; 1536 | } 1537 | } 1538 | } 1539 | } 1540 | 1541 | .close { 1542 | background-image: url('images/close.svg'); 1543 | background-position: 4.85em 1em; 1544 | background-repeat: no-repeat; 1545 | border: 0; 1546 | cursor: pointer; 1547 | display: block; 1548 | height: 3em; 1549 | position: absolute; 1550 | right: 0; 1551 | top: 0; 1552 | vertical-align: middle; 1553 | width: 7em; 1554 | } 1555 | 1556 | @include breakpoint('<=small') { 1557 | padding: 3em 1.5em; 1558 | } 1559 | } 1560 | 1561 | body.is-menu-visible { 1562 | #page-wrapper { 1563 | opacity: 0.35; 1564 | 1565 | &:before { 1566 | display: block; 1567 | } 1568 | } 1569 | 1570 | #menu { 1571 | @include vendor('transform', 'translateX(0)'); 1572 | } 1573 | } 1574 | 1575 | /* Header */ 1576 | 1577 | #header { 1578 | @include vendor('transition', 'background-color #{_duration(transitions)} ease'); 1579 | background: _palette(bg); 1580 | height: 3em; 1581 | left: 0; 1582 | line-height: 3em; 1583 | position: fixed; 1584 | top: 0; 1585 | width: 100%; 1586 | z-index: _misc(z-index-base); 1587 | 1588 | h1 { 1589 | @include vendor('transition', 'opacity #{_duration(transitions)} ease'); 1590 | height: inherit; 1591 | left: 1.25em; 1592 | line-height: inherit; 1593 | position: absolute; 1594 | top: 0; 1595 | 1596 | a { 1597 | border: 0; 1598 | display: block; 1599 | height: inherit; 1600 | line-height: inherit; 1601 | 1602 | @include breakpoint('<=small') { 1603 | font-size: 0.8em; 1604 | } 1605 | } 1606 | } 1607 | 1608 | nav { 1609 | height: inherit; 1610 | line-height: inherit; 1611 | position: absolute; 1612 | right: 0; 1613 | top: 0; 1614 | 1615 | > ul { 1616 | list-style: none; 1617 | margin: 0; 1618 | padding: 0; 1619 | white-space: nowrap; 1620 | 1621 | > li { 1622 | display: inline-block; 1623 | padding: 0; 1624 | 1625 | > a { 1626 | border: 0; 1627 | color: _palette(fg-bold); 1628 | display: block; 1629 | font-size: 0.8em; 1630 | letter-spacing: _size(letter-spacing-alt); 1631 | padding: 0 1.5em; 1632 | text-transform: uppercase; 1633 | 1634 | &.menuToggle { 1635 | outline: 0; 1636 | position: relative; 1637 | 1638 | &:after { 1639 | background-image: url('images/bars.svg'); 1640 | background-position: right center; 1641 | background-repeat: no-repeat; 1642 | content: ''; 1643 | display: inline-block; 1644 | height: 3.75em; 1645 | vertical-align: top; 1646 | width: 2em; 1647 | } 1648 | 1649 | @include breakpoint('<=small') { 1650 | padding: 0 1.5em; 1651 | 1652 | span { 1653 | display: none; 1654 | } 1655 | } 1656 | } 1657 | 1658 | @include breakpoint('<=small') { 1659 | padding: 0 0 0 1.5em; 1660 | } 1661 | } 1662 | 1663 | &:first-child { 1664 | margin-left: 0; 1665 | } 1666 | } 1667 | } 1668 | } 1669 | 1670 | &.alt { 1671 | background: transparent; 1672 | 1673 | h1 { 1674 | @include vendor('pointer-events', 'none'); 1675 | opacity: 0; 1676 | } 1677 | } 1678 | } 1679 | 1680 | /* Banner */ 1681 | 1682 | #banner { 1683 | @include vendor('display', 'flex'); 1684 | @include vendor('flex-direction', 'column'); 1685 | @include vendor('justify-content', 'center'); 1686 | cursor: default; 1687 | height: 100vh; 1688 | min-height: 35em; 1689 | overflow: hidden; 1690 | position: relative; 1691 | text-align: center; 1692 | 1693 | h2 { 1694 | @include vendor('transform', 'scale(1)'); 1695 | @include vendor('transition', ('transform 0.5s ease', 'opacity 0.5s ease')); 1696 | display: inline-block; 1697 | font-size: 1.75em; 1698 | opacity: 1; 1699 | padding: 0.35em 1em; 1700 | position: relative; 1701 | z-index: 1; 1702 | 1703 | &:before, &:after { 1704 | @include vendor('transition', 'width 0.85s ease'); 1705 | @include vendor('transition-delay', '0.25s'); 1706 | background: _palette(fg-bold); 1707 | content: ''; 1708 | display: block; 1709 | height: 2px; 1710 | position: absolute; 1711 | width: 100%; 1712 | } 1713 | 1714 | &:before { 1715 | top: 0; 1716 | left: 0; 1717 | } 1718 | 1719 | &:after { 1720 | bottom: 0; 1721 | right: 0; 1722 | } 1723 | } 1724 | 1725 | p { 1726 | letter-spacing: _size(letter-spacing-alt); 1727 | text-transform: uppercase; 1728 | 1729 | a { 1730 | color: inherit; 1731 | } 1732 | } 1733 | 1734 | .more { 1735 | @include vendor('transition', ('transform 0.75s ease', 'opacity 0.75s ease')); 1736 | @include vendor('transition-delay', '3.5s'); 1737 | @include vendor('transform', 'translateY(0)'); 1738 | border: none; 1739 | bottom: 0; 1740 | color: inherit; 1741 | font-size: 0.8em; 1742 | height: 8.5em; 1743 | left: 50%; 1744 | letter-spacing: _size(letter-spacing-alt); 1745 | margin-left: -8.5em; 1746 | opacity: 1; 1747 | outline: 0; 1748 | padding-left: _size(letter-spacing-alt); 1749 | position: absolute; 1750 | text-align: center; 1751 | text-transform: uppercase; 1752 | width: 16em; 1753 | z-index: 1; 1754 | 1755 | &:after { 1756 | background-image: url('images/arrow.svg'); 1757 | background-position: center; 1758 | background-repeat: no-repeat; 1759 | background-size: contain; 1760 | bottom: 4em; 1761 | content: ''; 1762 | display: block; 1763 | height: 1.5em; 1764 | left: 50%; 1765 | margin: 0 0 0 -0.75em; 1766 | position: absolute; 1767 | width: 1.5em; 1768 | } 1769 | } 1770 | 1771 | &:after { 1772 | @include vendor('pointer-events', 'none'); 1773 | @include vendor('transition', 'opacity #{_duration(fadein)} ease-in-out'); 1774 | @include vendor('transition-delay', '1.25s'); 1775 | content: ''; 1776 | background: _palette(bg); 1777 | display: block; 1778 | width: 100%; 1779 | height: 100%; 1780 | position: absolute; 1781 | left: 0; 1782 | top: 0; 1783 | opacity: 0; 1784 | } 1785 | 1786 | @include breakpoint('<=small') { 1787 | @include padding(7em, 3em); 1788 | height: auto; 1789 | min-height: 0; 1790 | 1791 | h2 { 1792 | font-size: 1.25em; 1793 | } 1794 | 1795 | br { 1796 | display: none; 1797 | } 1798 | 1799 | .more { 1800 | display: none; 1801 | } 1802 | } 1803 | } 1804 | 1805 | body.is-preload { 1806 | #banner { 1807 | h2 { 1808 | @include vendor('transform', 'scale(0.95)'); 1809 | opacity: 0; 1810 | 1811 | &:before, &:after { 1812 | width: 0; 1813 | } 1814 | } 1815 | 1816 | .more { 1817 | @include vendor('transform', 'translateY(8.5em)'); 1818 | opacity: 0; 1819 | } 1820 | 1821 | &:after { 1822 | opacity: 1; 1823 | } 1824 | } 1825 | } 1826 | 1827 | /* CTA */ 1828 | 1829 | #cta { 1830 | .inner { 1831 | @include vendor('display', 'flex'); 1832 | max-width: 45em; 1833 | 1834 | header { 1835 | @include vendor('order', '1'); 1836 | padding-right: 3em; 1837 | width: 70%; 1838 | 1839 | p { 1840 | color: inherit; 1841 | } 1842 | } 1843 | 1844 | .actions { 1845 | @include vendor('order', '2'); 1846 | width: 30%; 1847 | } 1848 | 1849 | @include breakpoint('<=medium') { 1850 | display: block; 1851 | text-align: center; 1852 | 1853 | header { 1854 | padding-right: 0; 1855 | width: 100%; 1856 | } 1857 | 1858 | .actions { 1859 | margin-left: auto; 1860 | margin-right: auto; 1861 | max-width: 20em; 1862 | width: 100%; 1863 | } 1864 | } 1865 | 1866 | @include breakpoint('<=small') { 1867 | .actions { 1868 | max-width: none; 1869 | } 1870 | } 1871 | } 1872 | } 1873 | 1874 | /* Main */ 1875 | 1876 | #main { 1877 | > header { 1878 | @include padding(12em, 0); 1879 | @include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../images/banner.jpg")')); 1880 | background-attachment: fixed; 1881 | background-position: center center; 1882 | background-repeat: no-repeat; 1883 | background-size: cover; 1884 | text-align: center; 1885 | 1886 | h2 { 1887 | font-size: 1.75em; 1888 | margin: 0 0 (_size(element-margin) * 0.25) 0; 1889 | } 1890 | 1891 | p { 1892 | color: inherit; 1893 | letter-spacing: _size(letter-spacing-alt); 1894 | text-transform: uppercase; 1895 | top: 0; 1896 | 1897 | a { 1898 | color: inherit; 1899 | } 1900 | } 1901 | 1902 | @include breakpoint('<=xlarge') { 1903 | @include padding(10em, 0); 1904 | } 1905 | 1906 | @include breakpoint('<=large') { 1907 | @include padding(8em, 3em); 1908 | } 1909 | 1910 | @include breakpoint('<=medium') { 1911 | @include padding(10em, 3em); 1912 | } 1913 | 1914 | @include breakpoint('<=small') { 1915 | @include padding(5em, 3em); 1916 | 1917 | h2 { 1918 | font-size: 1.25em; 1919 | margin: 0 0 (_size(element-margin) * 0.5) 0; 1920 | } 1921 | } 1922 | } 1923 | } 1924 | 1925 | body.is-mobile { 1926 | #main { 1927 | > header { 1928 | background-attachment: scroll; 1929 | } 1930 | } 1931 | } 1932 | 1933 | /* Footer */ 1934 | 1935 | #footer { 1936 | @include padding(6em, 0); 1937 | background-color: darken(_palette(bg), 8); 1938 | text-align: center; 1939 | 1940 | .icons { 1941 | font-size: 1.25em; 1942 | 1943 | a { 1944 | color: _palette(fg-light); 1945 | 1946 | &:hover { 1947 | color: _palette(fg); 1948 | } 1949 | } 1950 | } 1951 | 1952 | .copyright { 1953 | color: _palette(fg-light); 1954 | font-size: 0.8em; 1955 | letter-spacing: _size(letter-spacing-alt); 1956 | list-style: none; 1957 | padding: 0; 1958 | text-transform: uppercase; 1959 | 1960 | li { 1961 | border-left: solid 1px _palette(fg-light); 1962 | display: inline-block; 1963 | line-height: 1em; 1964 | margin-left: 1em; 1965 | padding-left: 1em; 1966 | 1967 | &:first-child { 1968 | border-left: 0; 1969 | margin-left: 0; 1970 | padding-left: 0; 1971 | } 1972 | 1973 | a { 1974 | color: inherit; 1975 | 1976 | &:hover { 1977 | color: _palette(fg); 1978 | } 1979 | } 1980 | 1981 | @include breakpoint('<=xsmall') { 1982 | border: 0; 1983 | display: block; 1984 | line-height: 1.65em; 1985 | margin: 0; 1986 | padding: 0.5em 0; 1987 | } 1988 | } 1989 | } 1990 | 1991 | @include breakpoint('<=medium') { 1992 | @include padding(4em, 3em); 1993 | } 1994 | 1995 | @include breakpoint('<=small') { 1996 | @include padding(3em, 2em); 1997 | } 1998 | } 1999 | 2000 | /* Landing */ 2001 | 2002 | body.landing { 2003 | #page-wrapper { 2004 | @include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../images/banner.jpg")')); 2005 | background-attachment: fixed; 2006 | background-position: center center; 2007 | background-repeat: no-repeat; 2008 | background-size: cover; 2009 | padding-top: 0; 2010 | } 2011 | 2012 | #footer { 2013 | background-color: darken(transparentize(_palette(bg), 0.1), 8); 2014 | } 2015 | } 2016 | 2017 | body.is-mobile { 2018 | &.landing { 2019 | #page-wrapper { 2020 | background: none; 2021 | } 2022 | 2023 | #banner, 2024 | .wrapper.style4 { 2025 | @include vendor('background-image', ('linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5))', 'url("../../images/banner.jpg")')); 2026 | background-position: center center; 2027 | background-repeat: no-repeat; 2028 | background-size: cover; 2029 | } 2030 | 2031 | #footer { 2032 | background-color: darken(_palette(bg), 8); 2033 | } 2034 | } 2035 | } 2036 | 2037 | //Stackbit Banner 2038 | @import 'imports/banner'; -------------------------------------------------------------------------------- /sass/noscript.scss: -------------------------------------------------------------------------------- 1 | @import 'libs/vars'; 2 | @import 'libs/functions'; 3 | @import 'libs/mixins'; 4 | @import 'libs/vendor'; 5 | @import 'libs/breakpoints'; 6 | @import 'libs/html-grid'; 7 | 8 | /* 9 | Spectral by Pixelarity 10 | pixelarity.com | hello@pixelarity.com 11 | License: pixelarity.com/license 12 | */ 13 | 14 | /* Banner */ 15 | 16 | body.is-preload { 17 | #banner { 18 | h2 { 19 | @include vendor('transform', 'none'); 20 | opacity: 1; 21 | 22 | &:before, &:after { 23 | width: 100%; 24 | } 25 | } 26 | 27 | .more { 28 | @include vendor('transform', 'none'); 29 | opacity: 1; 30 | } 31 | 32 | &:after { 33 | opacity: 0; 34 | } 35 | } 36 | } -------------------------------------------------------------------------------- /stackbit.yaml: -------------------------------------------------------------------------------- 1 | stackbitVersion: ~0.2.0 2 | ssgName: unibit 3 | buildCommand: unibit build 4 | publishDir: output 5 | staticDir: static 6 | uploadDir: images 7 | dataDir: data 8 | pagesDir: content 9 | pageLayoutKey: layout 10 | metadata: 11 | title: Spectral 12 | description: a multipage theme 13 | author: Pixelarity 14 | authorURL: 'https://pixelarity.com' 15 | palettes: 16 | blue: 17 | images: 18 | small: images/demo-blue-256x192.png 19 | large: images/demo-blue-1024x768.png 20 | green: 21 | images: 22 | small: images/demo-green-256x192.png 23 | large: images/demo-green-1024x768.png 24 | models: 25 | config: 26 | type: config 27 | label: config 28 | fields: 29 | - type: string 30 | name: landing_template 31 | label: Landing Template 32 | default: home 33 | hidden: true 34 | required: true 35 | - type: enum 36 | name: palette 37 | label: Color Palette 38 | options: 39 | - blue 40 | - green 41 | required: true 42 | default: blue 43 | description: The color palette used for the site. 44 | - type: object 45 | name: palettes 46 | label: Palettes 47 | hidden: true 48 | fields: 49 | - type: palette 50 | name: blue 51 | label: Blue 52 | - type: palette 53 | name: green 54 | label: Green 55 | menu: 56 | type: data 57 | file: menu.yml 58 | label: Menu Configuration 59 | fields: 60 | - type: list 61 | name: actions 62 | label: Menu Action Buttons 63 | description: The action buttons displayed below the menu entries 64 | items: 65 | type: object 66 | labelField: label 67 | fields: 68 | - type: string 69 | name: label 70 | label: Button Label 71 | required: true 72 | description: The text displayed inside the button 73 | - type: string 74 | name: url 75 | label: Button URL 76 | widget: url 77 | footer: 78 | type: data 79 | file: footer.yml 80 | label: Footer Configuration 81 | fields: 82 | - type: list 83 | name: social_icons 84 | label: Social Mediaa Icons 85 | description: A list of social media icons displayed in tyhe page footer 86 | items: 87 | type: object 88 | labelField: title 89 | fields: 90 | - type: string 91 | name: title 92 | label: Icon Title 93 | required: true 94 | - type: string 95 | name: icon 96 | label: Icon 97 | required: true 98 | description: Font Awesome Icon 99 | - type: string 100 | name: url 101 | label: Icon URL 102 | widget: url 103 | - type: string 104 | name: copyright 105 | label: Copyright Text 106 | description: The copyright text displayed at the bottom of the page footer 107 | - type: list 108 | name: links 109 | label: Links 110 | description: A list of links displayed in the footer. 111 | items: 112 | type: object 113 | labelField: text 114 | fields: 115 | - type: string 116 | name: text 117 | label: Link text 118 | - type: string 119 | name: url 120 | label: URL 121 | widget: url 122 | - type: boolean 123 | name: new_window 124 | label: Open in new window 125 | default: true 126 | home: 127 | type: page 128 | label: Home 129 | hideContent: true 130 | singleInstance: true 131 | file: index.md 132 | template: home 133 | fields: 134 | - type: string 135 | name: title 136 | label: Page Title 137 | required: true 138 | - type: object 139 | name: banner 140 | label: Page Banner 141 | description: The banner displayed at the top of the landing page 142 | fields: 143 | - type: string 144 | name: title 145 | label: Banner Title 146 | required: true 147 | - type: markdown 148 | name: subtitle 149 | label: Banner Subtitle 150 | description: The text displayed below the banner title 151 | - type: list 152 | name: actions 153 | label: Banner Action Buttons 154 | items: 155 | type: action 156 | - type: object 157 | name: bottom_link 158 | label: Bottom Action 159 | description: The action button displayed at the very bottom of the page banner 160 | fields: 161 | - type: string 162 | name: label 163 | label: Button Label 164 | description: The text displayed inside the action button 165 | - type: string 166 | name: url 167 | label: Button URL 168 | widget: url 169 | - type: boolean 170 | name: has_arrow 171 | label: Has Arrow 172 | default: false 173 | description: Displays a downward pointing arrow below the button text 174 | - type: boolean 175 | name: is_scrolly 176 | label: Is Scrolly 177 | default: false 178 | description: >- 179 | gives the button a scroll animation (if the button url is a 180 | section ID) 181 | - type: list 182 | name: sections 183 | label: Sections 184 | description: Home Sections 185 | items: 186 | type: reference 187 | labelField: title 188 | models: 189 | - icons 190 | - spotlights 191 | - features 192 | - cta 193 | page: 194 | type: page 195 | label: Page 196 | template: page 197 | fields: 198 | - type: string 199 | name: title 200 | label: Page Title 201 | required: true 202 | description: The bold first line of text displayed in the page banner 203 | - type: markdown 204 | name: subtitle 205 | label: Page Subtitle 206 | description: The text displayed below the page title 207 | - type: enum 208 | name: background_style 209 | label: Page Background Style 210 | options: 211 | - style1 212 | - style2 213 | - style3 214 | - style4 215 | - style5 216 | default: style5 217 | description: Controls the page background color 218 | elements: 219 | type: page 220 | label: Elements 221 | hideContent: true 222 | template: elements 223 | singleInstance: true 224 | file: elements.md 225 | fields: 226 | - type: string 227 | name: title 228 | label: Page Title 229 | required: true 230 | description: The bold first line of text displayed in the page banner 231 | - type: markdown 232 | name: subtitle 233 | label: Page Subtitle 234 | description: The text displayed below the page title 235 | palette: 236 | type: object 237 | label: Palette 238 | fields: 239 | - type: object 240 | name: sass 241 | label: SASS 242 | fields: 243 | - type: color 244 | name: accent1 245 | label: accent1 246 | - type: color 247 | name: accent2 248 | label: accent2 249 | - type: color 250 | name: accent3 251 | label: accent3 252 | - type: color 253 | name: accent4 254 | label: accent4 255 | - type: color 256 | name: accent5 257 | label: accent5 258 | - type: color 259 | name: accent6 260 | label: accent6 261 | action: 262 | type: object 263 | label: Action 264 | labelField: label 265 | fields: 266 | - type: string 267 | name: label 268 | label: Button Label 269 | required: true 270 | description: The text displayed inside the action button 271 | - type: string 272 | name: url 273 | label: Button URL 274 | widget: url 275 | - type: boolean 276 | name: is_scrolly 277 | label: Is Scrolly 278 | default: false 279 | description: >- 280 | Gives the button a scroll animation (if the button url is a section 281 | ID) 282 | - type: boolean 283 | name: is_primary 284 | label: Is Primary 285 | default: false 286 | description: Gives the button a primary color scheme 287 | section: 288 | type: object 289 | label: Section 290 | labelField: title 291 | fields: 292 | - type: string 293 | name: title 294 | label: Section Title 295 | required: true 296 | description: >- 297 | The title displayed at the top of the section (If the section does not 298 | have a title, it is used by the CMS) 299 | - type: string 300 | name: section_id 301 | label: Section ID 302 | required: true 303 | - type: enum 304 | name: background_style 305 | label: Background Style 306 | options: 307 | - style1 308 | - style2 309 | - style3 310 | - style4 311 | default: style1 312 | description: The style used for the section background 313 | - type: string 314 | name: component 315 | label: Section Component 316 | required: true 317 | hidden: true 318 | icons: 319 | type: object 320 | label: Icons Section 321 | extends: 322 | - section 323 | fields: 324 | - name: title 325 | default: Icons Section 326 | - type: markdown 327 | name: subtitle 328 | label: Section Subtitle 329 | description: The text displayed below the section title 330 | - name: section_id 331 | default: one 332 | - name: background_style 333 | default: style1 334 | - type: list 335 | name: feature_icons 336 | label: Section Icons 337 | description: A list of icons displayed along the bottom of the section 338 | items: 339 | type: object 340 | labelField: title 341 | fields: 342 | - type: string 343 | name: title 344 | label: Icon Title 345 | required: true 346 | - type: string 347 | name: icon 348 | label: Icon 349 | required: true 350 | description: Font Awesome icon 351 | - type: enum 352 | name: style 353 | label: Icon Style 354 | options: 355 | - style1 356 | - style2 357 | - style3 358 | description: Controls the icon color 359 | - name: component 360 | const: icons.html 361 | spotlights: 362 | type: object 363 | label: Spotlights Section 364 | extends: 365 | - section 366 | fields: 367 | - name: title 368 | default: Spotlights Section 369 | - name: section_id 370 | default: two 371 | - name: background_style 372 | default: style2 373 | - type: list 374 | name: spotlights 375 | label: Spotlights 376 | description: A list of spotlights to be displayed in the section 377 | items: 378 | type: object 379 | labelField: title 380 | fields: 381 | - type: string 382 | name: title 383 | label: Spotlight title 384 | required: true 385 | - type: markdown 386 | name: text 387 | label: Spotlight text 388 | description: The text displayed below the spotlight title 389 | - type: image 390 | name: home_img_path 391 | label: Spotlight Image 392 | description: The image displayed next to the spotlight content 393 | - name: component 394 | const: spotlights.html 395 | features: 396 | type: object 397 | label: Features Section 398 | extends: 399 | - section 400 | fields: 401 | - name: title 402 | default: Features Section 403 | - type: markdown 404 | name: subtitle 405 | label: Section Subtitle 406 | description: The text displayed below the section title 407 | - name: section_id 408 | default: three 409 | - name: background_style 410 | default: style3 411 | - type: list 412 | name: features 413 | label: Features 414 | description: A list of features to be displayed in the section 415 | items: 416 | type: object 417 | labelField: title 418 | fields: 419 | - type: string 420 | name: title 421 | label: Feature Title 422 | required: true 423 | - type: markdown 424 | name: text 425 | label: Feature Text 426 | description: The text displayed below the feature title 427 | - type: string 428 | name: icon 429 | label: Feature Icon 430 | description: (Font Awesom icon) The icon displayed with the feature content 431 | - name: component 432 | const: features.html 433 | cta: 434 | type: object 435 | label: CTA Section 436 | extends: 437 | - section 438 | fields: 439 | - name: title 440 | default: CTA Section 441 | - type: markdown 442 | name: text 443 | label: Section Text 444 | description: The text displayed below the section title 445 | - name: section_id 446 | default: cta 447 | - name: background_style 448 | default: style4 449 | - type: list 450 | name: actions 451 | label: Section Action Buttons 452 | items: 453 | type: action 454 | - name: component 455 | const: cta.html 456 | stackbit_banner: 457 | show_banner: true 458 | name: Spectral 459 | create_url: 'https://app.stackbit.com/create?theme=spectral' 460 | github_url: 'https://github.com/stackbithq/stackbit-theme-spectral' 461 | -------------------------------------------------------------------------------- /static/assets/css/font-awesome.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-vcard:before,.fa-address-card:before{content:"\f2bb"}.fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto} 5 | -------------------------------------------------------------------------------- /static/assets/css/images/arrow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /static/assets/css/images/bars.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /static/assets/css/images/close.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /static/assets/css/noscript.css: -------------------------------------------------------------------------------- 1 | /* 2 | Spectral by Pixelarity 3 | pixelarity.com | hello@pixelarity.com 4 | License: pixelarity.com/license 5 | */ 6 | 7 | /* Banner */ 8 | 9 | body.is-preload #banner h2 { 10 | -moz-transform: none; 11 | -webkit-transform: none; 12 | -ms-transform: none; 13 | transform: none; 14 | opacity: 1; 15 | } 16 | 17 | body.is-preload #banner h2:before, body.is-preload #banner h2:after { 18 | width: 100%; 19 | } 20 | 21 | body.is-preload #banner .more { 22 | -moz-transform: none; 23 | -webkit-transform: none; 24 | -ms-transform: none; 25 | transform: none; 26 | opacity: 1; 27 | } 28 | 29 | body.is-preload #banner:after { 30 | opacity: 0; 31 | } -------------------------------------------------------------------------------- /static/assets/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackbit/stackbit-theme-spectral/81765a14975c8143ebb9d1208634c3210d6ecf44/static/assets/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /static/assets/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackbit/stackbit-theme-spectral/81765a14975c8143ebb9d1208634c3210d6ecf44/static/assets/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /static/assets/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackbit/stackbit-theme-spectral/81765a14975c8143ebb9d1208634c3210d6ecf44/static/assets/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /static/assets/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackbit/stackbit-theme-spectral/81765a14975c8143ebb9d1208634c3210d6ecf44/static/assets/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /static/assets/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackbit/stackbit-theme-spectral/81765a14975c8143ebb9d1208634c3210d6ecf44/static/assets/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /static/assets/js/breakpoints.min.js: -------------------------------------------------------------------------------- 1 | /* breakpoints.js v1.0 | @ajlkn | MIT licensed */ 2 | var breakpoints=function(){"use strict";function e(e){t.init(e)}var t={list:null,media:{},events:[],init:function(e){t.list=e,window.addEventListener("resize",t.poll),window.addEventListener("orientationchange",t.poll),window.addEventListener("load",t.poll),window.addEventListener("fullscreenchange",t.poll)},active:function(e){var n,a,s,i,r,d,c;if(!(e in t.media)){if(">="==e.substr(0,2)?(a="gte",n=e.substr(2)):"<="==e.substr(0,2)?(a="lte",n=e.substr(2)):">"==e.substr(0,1)?(a="gt",n=e.substr(1)):"<"==e.substr(0,1)?(a="lt",n=e.substr(1)):"!"==e.substr(0,1)?(a="not",n=e.substr(1)):(a="eq",n=e),n&&n in t.list)if(i=t.list[n],Array.isArray(i)){if(r=parseInt(i[0]),d=parseInt(i[1]),isNaN(r)){if(isNaN(d))return;c=i[1].substr(String(d).length)}else c=i[0].substr(String(r).length);if(isNaN(r))switch(a){case"gte":s="screen";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: -1px)";break;case"not":s="screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (max-width: "+d+c+")"}else if(isNaN(d))switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen";break;case"gt":s="screen and (max-width: -1px)";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+")";break;default:s="screen and (min-width: "+r+c+")"}else switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+"), screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (min-width: "+r+c+") and (max-width: "+d+c+")"}}else s="("==i.charAt(0)?"screen and "+i:i;t.media[e]=!!s&&s}return t.media[e]!==!1&&window.matchMedia(t.media[e]).matches},on:function(e,n){t.events.push({query:e,handler:n,state:!1}),t.active(e)&&n()},poll:function(){var e,n;for(e=0;e0:!!("ontouchstart"in window),e.mobile="wp"==e.os||"android"==e.os||"ios"==e.os||"bb"==e.os}};return e.init(),e}();!function(e,n){"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?module.exports=n():e.browser=n()}(this,function(){return browser}); 3 | -------------------------------------------------------------------------------- /static/assets/js/init.js: -------------------------------------------------------------------------------- 1 | /* 2 | Spectral by Pixelarity 3 | pixelarity.com | hello@pixelarity.com 4 | License: pixelarity.com/license 5 | */ 6 | 7 | (function($) { 8 | 9 | var $window = $(window), 10 | $body = $('body'), 11 | $wrapper = $('#page-wrapper') 12 | 13 | // Breakpoints. 14 | breakpoints({ 15 | xlarge: [ '1281px', '1680px' ], 16 | large: [ '981px', '1280px' ], 17 | medium: [ '737px', '980px' ], 18 | small: [ '481px', '736px' ], 19 | xsmall: [ null, '480px' ] 20 | }); 21 | 22 | // Play initial animations on page load. 23 | $window.on('load', function() { 24 | window.setTimeout(function() { 25 | $body.removeClass('is-preload'); 26 | }, 100); 27 | }); 28 | 29 | // Mobile? 30 | if (browser.mobile) 31 | $body.addClass('is-mobile'); 32 | else { 33 | 34 | breakpoints.on('>medium', function() { 35 | $body.removeClass('is-mobile'); 36 | }); 37 | 38 | breakpoints.on('<=medium', function() { 39 | $body.addClass('is-mobile'); 40 | }); 41 | 42 | } 43 | 44 | // Menu. 45 | $('#menu') 46 | .append('') 47 | .appendTo($body) 48 | .panel({ 49 | delay: 500, 50 | hideOnClick: true, 51 | hideOnSwipe: true, 52 | resetScroll: true, 53 | resetForms: true, 54 | side: 'right', 55 | target: $body, 56 | visibleClass: 'is-menu-visible' 57 | }); 58 | 59 | })(jQuery); -------------------------------------------------------------------------------- /static/assets/js/jquery.scrollex.min.js: -------------------------------------------------------------------------------- 1 | /* jquery.scrollex v0.2.1 | (c) @ajlkn | github.com/ajlkn/jquery.scrollex | MIT licensed */ 2 | !function(t){function e(t,e,n){return"string"==typeof t&&("%"==t.slice(-1)?t=parseInt(t.substring(0,t.length-1))/100*e:"vh"==t.slice(-2)?t=parseInt(t.substring(0,t.length-2))/100*n:"px"==t.slice(-2)&&(t=parseInt(t.substring(0,t.length-2)))),t}var n=t(window),i=1,o={};n.on("scroll",function(){var e=n.scrollTop();t.map(o,function(t){window.clearTimeout(t.timeoutId),t.timeoutId=window.setTimeout(function(){t.handler(e)},t.options.delay)})}).on("load",function(){n.trigger("scroll")}),jQuery.fn.scrollex=function(l){var s=t(this);if(0==this.length)return s;if(this.length>1){for(var r=0;r=i&&o>=t};break;case"bottom":h=function(t,e,n,i,o){return n>=i&&o>=n};break;case"middle":h=function(t,e,n,i,o){return e>=i&&o>=e};break;case"top-only":h=function(t,e,n,i,o){return i>=t&&n>=i};break;case"bottom-only":h=function(t,e,n,i,o){return n>=o&&o>=t};break;default:case"default":h=function(t,e,n,i,o){return n>=i&&o>=t}}return c=function(t){var i,o,l,s,r,a,u=this.state,h=!1,c=this.$element.offset();i=n.height(),o=t+i/2,l=t+i,s=this.$element.outerHeight(),r=c.top+e(this.options.top,s,i),a=c.top+s-e(this.options.bottom,s,i),h=this.test(t,o,l,r,a),h!=u&&(this.state=h,h?this.options.enter&&this.options.enter.apply(this.element):this.options.leave&&this.options.leave.apply(this.element)),this.options.scroll&&this.options.scroll.apply(this.element,[(o-r)/(a-r)])},p={id:a,options:u,test:h,handler:c,state:null,element:this,$element:s,timeoutId:null},o[a]=p,s.data("_scrollexId",p.id),p.options.initialize&&p.options.initialize.apply(this),s},jQuery.fn.unscrollex=function(){var e=t(this);if(0==this.length)return e;if(this.length>1){for(var n=0;n1){for(o=0;o 0 15 | && $('#header').hasClass('alt')) { 16 | 17 | $window.on('resize', function() { $window.trigger('scroll'); }); 18 | 19 | $('#banner').scrollex({ 20 | bottom: $('#header').outerHeight() + 1, 21 | terminate: function() { $('#header').removeClass('alt'); }, 22 | enter: function() { $('#header').addClass('alt'); }, 23 | leave: function() { $('#header').removeClass('alt'); } 24 | }); 25 | 26 | } 27 | })(jQuery); -------------------------------------------------------------------------------- /static/assets/js/util.js: -------------------------------------------------------------------------------- 1 | (function($) { 2 | 3 | /** 4 | * Generate an indented list of links from a nav. Meant for use with panel(). 5 | * @return {jQuery} jQuery object. 6 | */ 7 | $.fn.navList = function() { 8 | 9 | var $this = $(this); 10 | $a = $this.find('a'), 11 | b = []; 12 | 13 | $a.each(function() { 14 | 15 | var $this = $(this), 16 | indent = Math.max(0, $this.parents('li').length - 1), 17 | href = $this.attr('href'), 18 | target = $this.attr('target'); 19 | 20 | b.push( 21 | '' + 26 | '' + 27 | $this.text() + 28 | '' 29 | ); 30 | 31 | }); 32 | 33 | return b.join(''); 34 | 35 | }; 36 | 37 | /** 38 | * Panel-ify an element. 39 | * @param {object} userConfig User config. 40 | * @return {jQuery} jQuery object. 41 | */ 42 | $.fn.panel = function(userConfig) { 43 | 44 | // No elements? 45 | if (this.length == 0) 46 | return $this; 47 | 48 | // Multiple elements? 49 | if (this.length > 1) { 50 | 51 | for (var i=0; i < this.length; i++) 52 | $(this[i]).panel(userConfig); 53 | 54 | return $this; 55 | 56 | } 57 | 58 | // Vars. 59 | var $this = $(this), 60 | $body = $('body'), 61 | $window = $(window), 62 | id = $this.attr('id'), 63 | config; 64 | 65 | // Config. 66 | config = $.extend({ 67 | 68 | // Delay. 69 | delay: 0, 70 | 71 | // Hide panel on link click. 72 | hideOnClick: false, 73 | 74 | // Hide panel on escape keypress. 75 | hideOnEscape: false, 76 | 77 | // Hide panel on swipe. 78 | hideOnSwipe: false, 79 | 80 | // Reset scroll position on hide. 81 | resetScroll: false, 82 | 83 | // Reset forms on hide. 84 | resetForms: false, 85 | 86 | // Side of viewport the panel will appear. 87 | side: null, 88 | 89 | // Target element for "class". 90 | target: $this, 91 | 92 | // Class to toggle. 93 | visibleClass: 'visible' 94 | 95 | }, userConfig); 96 | 97 | // Expand "target" if it's not a jQuery object already. 98 | if (typeof config.target != 'jQuery') 99 | config.target = $(config.target); 100 | 101 | // Panel. 102 | 103 | // Methods. 104 | $this._hide = function(event) { 105 | 106 | // Already hidden? Bail. 107 | if (!config.target.hasClass(config.visibleClass)) 108 | return; 109 | 110 | // If an event was provided, cancel it. 111 | if (event) { 112 | 113 | event.preventDefault(); 114 | event.stopPropagation(); 115 | 116 | } 117 | 118 | // Hide. 119 | config.target.removeClass(config.visibleClass); 120 | 121 | // Post-hide stuff. 122 | window.setTimeout(function() { 123 | 124 | // Reset scroll position. 125 | if (config.resetScroll) 126 | $this.scrollTop(0); 127 | 128 | // Reset forms. 129 | if (config.resetForms) 130 | $this.find('form').each(function() { 131 | this.reset(); 132 | }); 133 | 134 | }, config.delay); 135 | 136 | }; 137 | 138 | // Vendor fixes. 139 | $this 140 | .css('-ms-overflow-style', '-ms-autohiding-scrollbar') 141 | .css('-webkit-overflow-scrolling', 'touch'); 142 | 143 | // Hide on click. 144 | if (config.hideOnClick) { 145 | 146 | $this.find('a') 147 | .css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)'); 148 | 149 | $this 150 | .on('click', 'a', function(event) { 151 | 152 | var $a = $(this), 153 | href = $a.attr('href'), 154 | target = $a.attr('target'); 155 | 156 | if (!href || href == '#' || href == '' || href == '#' + id) 157 | return; 158 | 159 | // Cancel original event. 160 | event.preventDefault(); 161 | event.stopPropagation(); 162 | 163 | // Hide panel. 164 | $this._hide(); 165 | 166 | // Redirect to href. 167 | window.setTimeout(function() { 168 | 169 | if (target == '_blank') 170 | window.open(href); 171 | else 172 | window.location.href = href; 173 | 174 | }, config.delay + 10); 175 | 176 | }); 177 | 178 | } 179 | 180 | // Event: Touch stuff. 181 | $this.on('touchstart', function(event) { 182 | 183 | $this.touchPosX = event.originalEvent.touches[0].pageX; 184 | $this.touchPosY = event.originalEvent.touches[0].pageY; 185 | 186 | }) 187 | 188 | $this.on('touchmove', function(event) { 189 | 190 | if ($this.touchPosX === null 191 | || $this.touchPosY === null) 192 | return; 193 | 194 | var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX, 195 | diffY = $this.touchPosY - event.originalEvent.touches[0].pageY, 196 | th = $this.outerHeight(), 197 | ts = ($this.get(0).scrollHeight - $this.scrollTop()); 198 | 199 | // Hide on swipe? 200 | if (config.hideOnSwipe) { 201 | 202 | var result = false, 203 | boundary = 20, 204 | delta = 50; 205 | 206 | switch (config.side) { 207 | 208 | case 'left': 209 | result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta); 210 | break; 211 | 212 | case 'right': 213 | result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta)); 214 | break; 215 | 216 | case 'top': 217 | result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta); 218 | break; 219 | 220 | case 'bottom': 221 | result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta)); 222 | break; 223 | 224 | default: 225 | break; 226 | 227 | } 228 | 229 | if (result) { 230 | 231 | $this.touchPosX = null; 232 | $this.touchPosY = null; 233 | $this._hide(); 234 | 235 | return false; 236 | 237 | } 238 | 239 | } 240 | 241 | // Prevent vertical scrolling past the top or bottom. 242 | if (($this.scrollTop() < 0 && diffY < 0) 243 | || (ts > (th - 2) && ts < (th + 2) && diffY > 0)) { 244 | 245 | event.preventDefault(); 246 | event.stopPropagation(); 247 | 248 | } 249 | 250 | }); 251 | 252 | // Event: Prevent certain events inside the panel from bubbling. 253 | $this.on('click touchend touchstart touchmove', function(event) { 254 | event.stopPropagation(); 255 | }); 256 | 257 | // Event: Hide panel if a child anchor tag pointing to its ID is clicked. 258 | $this.on('click', 'a[href="#' + id + '"]', function(event) { 259 | 260 | event.preventDefault(); 261 | event.stopPropagation(); 262 | 263 | config.target.removeClass(config.visibleClass); 264 | 265 | }); 266 | 267 | // Body. 268 | 269 | // Event: Hide panel on body click/tap. 270 | $body.on('click touchend', function(event) { 271 | $this._hide(event); 272 | }); 273 | 274 | // Event: Toggle. 275 | $body.on('click', 'a[href="#' + id + '"]', function(event) { 276 | 277 | event.preventDefault(); 278 | event.stopPropagation(); 279 | 280 | config.target.toggleClass(config.visibleClass); 281 | 282 | }); 283 | 284 | // Window. 285 | 286 | // Event: Hide on ESC. 287 | if (config.hideOnEscape) 288 | $window.on('keydown', function(event) { 289 | 290 | if (event.keyCode == 27) 291 | $this._hide(event); 292 | 293 | }); 294 | 295 | return $this; 296 | 297 | }; 298 | 299 | /** 300 | * Apply "placeholder" attribute polyfill to one or more forms. 301 | * @return {jQuery} jQuery object. 302 | */ 303 | $.fn.placeholder = function() { 304 | 305 | // Browser natively supports placeholders? Bail. 306 | if (typeof (document.createElement('input')).placeholder != 'undefined') 307 | return $(this); 308 | 309 | // No elements? 310 | if (this.length == 0) 311 | return $this; 312 | 313 | // Multiple elements? 314 | if (this.length > 1) { 315 | 316 | for (var i=0; i < this.length; i++) 317 | $(this[i]).placeholder(); 318 | 319 | return $this; 320 | 321 | } 322 | 323 | // Vars. 324 | var $this = $(this); 325 | 326 | // Text, TextArea. 327 | $this.find('input[type=text],textarea') 328 | .each(function() { 329 | 330 | var i = $(this); 331 | 332 | if (i.val() == '' 333 | || i.val() == i.attr('placeholder')) 334 | i 335 | .addClass('polyfill-placeholder') 336 | .val(i.attr('placeholder')); 337 | 338 | }) 339 | .on('blur', function() { 340 | 341 | var i = $(this); 342 | 343 | if (i.attr('name').match(/-polyfill-field$/)) 344 | return; 345 | 346 | if (i.val() == '') 347 | i 348 | .addClass('polyfill-placeholder') 349 | .val(i.attr('placeholder')); 350 | 351 | }) 352 | .on('focus', function() { 353 | 354 | var i = $(this); 355 | 356 | if (i.attr('name').match(/-polyfill-field$/)) 357 | return; 358 | 359 | if (i.val() == i.attr('placeholder')) 360 | i 361 | .removeClass('polyfill-placeholder') 362 | .val(''); 363 | 364 | }); 365 | 366 | // Password. 367 | $this.find('input[type=password]') 368 | .each(function() { 369 | 370 | var i = $(this); 371 | var x = $( 372 | $('
') 373 | .append(i.clone()) 374 | .remove() 375 | .html() 376 | .replace(/type="password"/i, 'type="text"') 377 | .replace(/type=password/i, 'type=text') 378 | ); 379 | 380 | if (i.attr('id') != '') 381 | x.attr('id', i.attr('id') + '-polyfill-field'); 382 | 383 | if (i.attr('name') != '') 384 | x.attr('name', i.attr('name') + '-polyfill-field'); 385 | 386 | x.addClass('polyfill-placeholder') 387 | .val(x.attr('placeholder')).insertAfter(i); 388 | 389 | if (i.val() == '') 390 | i.hide(); 391 | else 392 | x.hide(); 393 | 394 | i 395 | .on('blur', function(event) { 396 | 397 | event.preventDefault(); 398 | 399 | var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]'); 400 | 401 | if (i.val() == '') { 402 | 403 | i.hide(); 404 | x.show(); 405 | 406 | } 407 | 408 | }); 409 | 410 | x 411 | .on('focus', function(event) { 412 | 413 | event.preventDefault(); 414 | 415 | var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']'); 416 | 417 | x.hide(); 418 | 419 | i 420 | .show() 421 | .focus(); 422 | 423 | }) 424 | .on('keypress', function(event) { 425 | 426 | event.preventDefault(); 427 | x.val(''); 428 | 429 | }); 430 | 431 | }); 432 | 433 | // Events. 434 | $this 435 | .on('submit', function() { 436 | 437 | $this.find('input[type=text],input[type=password],textarea') 438 | .each(function(event) { 439 | 440 | var i = $(this); 441 | 442 | if (i.attr('name').match(/-polyfill-field$/)) 443 | i.attr('name', ''); 444 | 445 | if (i.val() == i.attr('placeholder')) { 446 | 447 | i.removeClass('polyfill-placeholder'); 448 | i.val(''); 449 | 450 | } 451 | 452 | }); 453 | 454 | }) 455 | .on('reset', function(event) { 456 | 457 | event.preventDefault(); 458 | 459 | $this.find('select') 460 | .val($('option:first').val()); 461 | 462 | $this.find('input,textarea') 463 | .each(function() { 464 | 465 | var i = $(this), 466 | x; 467 | 468 | i.removeClass('polyfill-placeholder'); 469 | 470 | switch (this.type) { 471 | 472 | case 'submit': 473 | case 'reset': 474 | break; 475 | 476 | case 'password': 477 | i.val(i.attr('defaultValue')); 478 | 479 | x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]'); 480 | 481 | if (i.val() == '') { 482 | i.hide(); 483 | x.show(); 484 | } 485 | else { 486 | i.show(); 487 | x.hide(); 488 | } 489 | 490 | break; 491 | 492 | case 'checkbox': 493 | case 'radio': 494 | i.attr('checked', i.attr('defaultValue')); 495 | break; 496 | 497 | case 'text': 498 | case 'textarea': 499 | i.val(i.attr('defaultValue')); 500 | 501 | if (i.val() == '') { 502 | i.addClass('polyfill-placeholder'); 503 | i.val(i.attr('placeholder')); 504 | } 505 | 506 | break; 507 | 508 | default: 509 | i.val(i.attr('defaultValue')); 510 | break; 511 | 512 | } 513 | }); 514 | 515 | }); 516 | 517 | return $this; 518 | 519 | }; 520 | 521 | /** 522 | * Moves elements to/from the first positions of their respective parents. 523 | * @param {jQuery} $elements Elements (or selector) to move. 524 | * @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations. 525 | */ 526 | $.prioritize = function($elements, condition) { 527 | 528 | var key = '__prioritize'; 529 | 530 | // Expand $elements if it's not already a jQuery object. 531 | if (typeof $elements != 'jQuery') 532 | $elements = $($elements); 533 | 534 | // Step through elements. 535 | $elements.each(function() { 536 | 537 | var $e = $(this), $p, 538 | $parent = $e.parent(); 539 | 540 | // No parent? Bail. 541 | if ($parent.length == 0) 542 | return; 543 | 544 | // Not moved? Move it. 545 | if (!$e.data(key)) { 546 | 547 | // Condition is false? Bail. 548 | if (!condition) 549 | return; 550 | 551 | // Get placeholder (which will serve as our point of reference for when this element needs to move back). 552 | $p = $e.prev(); 553 | 554 | // Couldn't find anything? Means this element's already at the top, so bail. 555 | if ($p.length == 0) 556 | return; 557 | 558 | // Move element to top of parent. 559 | $e.prependTo($parent); 560 | 561 | // Mark element as moved. 562 | $e.data(key, $p); 563 | 564 | } 565 | 566 | // Moved already? 567 | else { 568 | 569 | // Condition is true? Bail. 570 | if (condition) 571 | return; 572 | 573 | $p = $e.data(key); 574 | 575 | // Move element back to its original location (using our placeholder). 576 | $e.insertAfter($p); 577 | 578 | // Unmark element as moved. 579 | $e.removeData(key); 580 | 581 | } 582 | 583 | }); 584 | 585 | }; 586 | 587 | })(jQuery); -------------------------------------------------------------------------------- /static/images/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackbit/stackbit-theme-spectral/81765a14975c8143ebb9d1208634c3210d6ecf44/static/images/banner.jpg -------------------------------------------------------------------------------- /static/images/pic01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackbit/stackbit-theme-spectral/81765a14975c8143ebb9d1208634c3210d6ecf44/static/images/pic01.jpg -------------------------------------------------------------------------------- /static/images/pic02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackbit/stackbit-theme-spectral/81765a14975c8143ebb9d1208634c3210d6ecf44/static/images/pic02.jpg -------------------------------------------------------------------------------- /static/images/pic03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackbit/stackbit-theme-spectral/81765a14975c8143ebb9d1208634c3210d6ecf44/static/images/pic03.jpg -------------------------------------------------------------------------------- /static/images/pic04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackbit/stackbit-theme-spectral/81765a14975c8143ebb9d1208634c3210d6ecf44/static/images/pic04.jpg -------------------------------------------------------------------------------- /static/images/pic05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackbit/stackbit-theme-spectral/81765a14975c8143ebb9d1208634c3210d6ecf44/static/images/pic05.jpg -------------------------------------------------------------------------------- /templates/body.html: -------------------------------------------------------------------------------- 1 | {% extends "base.html" %} 2 | 3 | {% block body %} 4 | 5 |
6 | 7 | {% include "header.html" %} 8 | 9 | {% block content %}{% endblock %} 10 | 11 | {% include "footer.html" %} 12 | 13 |
14 | {% endblock %} -------------------------------------------------------------------------------- /templates/elements.html: -------------------------------------------------------------------------------- 1 | {% extends "body.html" %} 2 | 3 | {% block content %} 4 | 5 | 6 |
7 |
8 |

{{ page.title }}

9 | {{ page.params.subtitle | markdownify }} 10 |
11 |
12 |
13 | 14 |
15 |

Text

16 |

This is bold and this is strong. This is italic and this is emphasized. 17 | This is superscript text and this is subscript text. 18 | This is underlined and this is code: for (;;) { ... }. Finally, this is a link.

19 |
20 |
21 |

Heading with a Subtitle

22 |

Lorem ipsum dolor sit amet nullam id egestas urna aliquam

23 |
24 |

Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.

25 |
26 |
Heading with a Subtitle
27 |

Lorem ipsum dolor sit amet nullam id egestas urna aliquam

28 |
29 |

Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.

30 |
31 |

Heading Level 2

32 |

Heading Level 3

33 |

Heading Level 4

34 |
Heading Level 5
35 |
Heading Level 6
36 |
37 |
Blockquote
38 |
Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.
39 |
Preformatted
40 | 
i = 0;
 41 | 
 42 | while (!deck.isInOrder()) {
 43 |   print 'Iteration ' + i;
 44 |   deck.shuffle();
 45 |   i++;
 46 | }
 47 | 
 48 | print 'It took ' + i + ' iterations to sort the deck.';
49 |
50 | 51 |
52 |

Lists

53 |
54 |
55 |
Unordered
56 |
    57 |
  • Dolor pulvinar etiam.
    • 58 |
  • Sagittis adipiscing.
    • 59 |
  • Felis enim feugiat.
    • 60 |
61 |
Alternate
62 |
    63 |
  • Dolor pulvinar etiam.
    • 64 |
  • Sagittis adipiscing.
    • 65 |
  • Felis enim feugiat.
    • 66 |
67 |
68 |
69 |
Ordered
70 |
    71 |
  1. Dolor pulvinar etiam.
    2. 72 |
  2. Etiam vel felis viverra.
    3. 73 |
  3. Felis enim feugiat.
    4. 74 |
  4. Dolor pulvinar etiam.
    5. 75 |
  5. Etiam vel felis lorem.
    6. 76 |
  6. Felis enim et feugiat.
    7. 77 |
78 |
Icons
79 | 85 |
86 |
87 |
Actions
88 |
89 |
90 | 94 | 98 | 102 | 106 |
107 |
108 | 112 | 116 |
117 |
118 |
119 | 120 |
121 |

Table

122 |
Default
123 |
124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 |
NameDescriptionPrice
Item OneAnte turpis integer aliquet porttitor.29.99
Item TwoVis ac commodo adipiscing arcu aliquet.19.99
Item Three Morbi faucibus arcu accumsan lorem.29.99
Item FourVitae integer tempus condimentum.19.99
Item FiveAnte turpis integer aliquet porttitor.29.99
100.00
166 |
167 | 168 |
Alternate
169 |
170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 |
NameDescriptionPrice
Item OneAnte turpis integer aliquet porttitor.29.99
Item TwoVis ac commodo adipiscing arcu aliquet.19.99
Item Three Morbi faucibus arcu accumsan lorem.29.99
Item FourVitae integer tempus condimentum.19.99
Item FiveAnte turpis integer aliquet porttitor.29.99
100.00
212 |
213 |
214 | 215 |
216 |

Buttons

217 | 221 | 226 | 231 | 236 | 240 |
    241 |
  • Disabled
    • 242 |
  • Disabled
    • 243 |
244 |
245 | 246 |
247 |

Form

248 |
249 |
250 |
251 | 252 |
253 |
254 | 255 |
256 |
257 | 264 |
265 |
266 | 267 | 268 |
269 |
270 | 271 | 272 |
273 |
274 | 275 | 276 |
277 |
278 | 279 | 280 |
281 |
282 | 283 | 284 |
285 |
286 | 287 |
288 |
289 |
    290 |
    • 291 |
    • 292 |
293 |
294 |
295 |
296 |
297 | 298 |
299 |

Image

300 |
Fit
301 |
302 |
303 |
304 |
305 |
306 |
307 |
308 |
309 |
310 |
311 |
312 |
313 |
314 |
315 |
Left & Right
316 |

Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien. Morbi mattis mi consectetur tortor elementum, varius pellentesque velit convallis. Aenean tincidunt lectus auctor mauris maximus, ac scelerisque ipsum tempor. Duis vulputate ex et ex tincidunt, quis lacinia velit aliquet. Duis non efficitur nisi, id malesuada justo. Maecenas sagittis felis ac sagittis semper. Curabitur purus leo, tempus sed finibus eget, fringilla quis risus. Maecenas et lorem quis sem varius sagittis et a est. Maecenas iaculis iaculis sem. Donec vel dolor at arcu tincidunt bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce ut aliquet justo. Donec id neque ipsum. Integer eget ultricies odio. Nam vel ex a orci fringilla tincidunt. Aliquam eleifend ligula non velit accumsan cursus. Etiam ut gravida sapien.

317 |

Vestibulum ultrices risus velit, sit amet blandit massa auctor sit amet. Sed eu lectus sem. Phasellus in odio at ipsum porttitor mollis id vel diam. Praesent sit amet posuere risus, eu faucibus lectus. Vivamus ex ligula, tempus pulvinar ipsum in, auctor porta quam. Proin nec dui cursus, posuere dui eget interdum. Fusce lectus magna, sagittis at facilisis vitae, pellentesque at etiam. Quisque posuere leo quis sem commodo, vel scelerisque nisi scelerisque. Suspendisse id quam vel tortor tincidunt suscipit. Nullam auctor orci eu dolor consectetur, interdum ullamcorper ante tincidunt. Mauris felis nec felis elementum varius. Nam sapien ante, varius in pulvinar vitae, rhoncus id massa. Donec varius ex in mauris ornare, eget euismod urna egestas. Etiam lacinia tempor ipsum, sodales porttitor justo. Aliquam dolor quam, semper in tortor eu, volutpat efficitur quam. Fusce nec fermentum nisl. Aenean erat diam, tempus aliquet erat. Etiam iaculis nulla ipsum, et pharetra libero rhoncus ut. Phasellus rutrum cursus velit, eget condimentum nunc blandit vel. In at pulvinar lectus. Morbi diam ante, vulputate et imperdiet eget, fermentum non dolor. Ut eleifend sagittis tincidunt. Sed viverra commodo mi, ac rhoncus justo. Duis neque ligula, elementum ut enim vel, posuere finibus justo. Vivamus facilisis maximus nibh quis pulvinar. Quisque hendrerit in ipsum id tellus facilisis fermentum. Proin mauris dui.

318 |
319 | 320 |
321 |
322 |
323 | 324 | {% endblock %} -------------------------------------------------------------------------------- /templates/home.html: -------------------------------------------------------------------------------- 1 | {% extends "body.html" %} 2 | 3 | {% block content %} 4 | 5 | {% include "banner.html" %} 6 | 7 | {% for section in page.params.sections %} 8 | {% set include_dict = {'section': section, 'site': site, 'page': page} %} 9 | {% include section.component %} 10 | {% endfor %} 11 | 12 | {% endblock %} -------------------------------------------------------------------------------- /templates/page.html: -------------------------------------------------------------------------------- 1 | {% extends "body.html" %} 2 | 3 | {% block content %} 4 | 5 | 6 |
7 |
8 |

{{ page.title }}

9 | {{ page.params.subtitle | markdownify }} 10 |
11 |
12 |
13 | {{ page.content }} 14 |
15 |
16 |
17 | 18 | {% endblock %} --------------------------------------------------------------------------------