├── data └── .gitkeep ├── public ├── images │ └── .gitkeep ├── javascripts │ ├── app.js │ └── vendor │ │ ├── what-input.min.js │ │ └── what-input.js └── stylesheets │ ├── foundation6 │ ├── motion-ui.scss │ ├── motion-ui │ │ ├── util │ │ │ ├── _unit.scss │ │ │ ├── _animation.scss │ │ │ ├── _args.scss │ │ │ ├── _selector.scss │ │ │ ├── _transition.scss │ │ │ ├── _series.scss │ │ │ └── _keyframe.scss │ │ ├── effects │ │ │ ├── _zoom.scss │ │ │ ├── _wiggle.scss │ │ │ ├── _shake.scss │ │ │ ├── _fade.scss │ │ │ ├── _spin.scss │ │ │ ├── _slide.scss │ │ │ └── _hinge.scss │ │ ├── motion-ui.scss │ │ ├── transitions │ │ │ ├── _fade.scss │ │ │ ├── _zoom.scss │ │ │ ├── _spin.scss │ │ │ ├── _slide.scss │ │ │ └── _hinge.scss │ │ ├── _settings.scss │ │ └── _classes.scss │ ├── util │ │ ├── _util.scss │ │ ├── _selector.scss │ │ ├── _color.scss │ │ ├── _unit.scss │ │ ├── _value.scss │ │ ├── _breakpoint.scss │ │ └── _mixins.scss │ ├── components │ │ ├── _float.scss │ │ ├── _sticky.scss │ │ ├── _accordion-menu.scss │ │ ├── _title-bar.scss │ │ ├── _top-bar.scss │ │ ├── _badge.scss │ │ ├── _label.scss │ │ ├── _thumbnail.scss │ │ ├── _dropdown.scss │ │ ├── _drilldown.scss │ │ ├── _close-button.scss │ │ ├── _flex-video.scss │ │ ├── _media-object.scss │ │ ├── _progress-bar.scss │ │ ├── _breadcrumbs.scss │ │ ├── _tooltip.scss │ │ ├── _dropdown-menu.scss │ │ ├── _accordion.scss │ │ ├── _callout.scss │ │ ├── _tabs.scss │ │ ├── _button-group.scss │ │ ├── _visibility.scss │ │ ├── _slider.scss │ │ ├── _reveal.scss │ │ ├── _pagination.scss │ │ ├── _off-canvas.scss │ │ ├── _orbit.scss │ │ ├── _menu.scss │ │ ├── _table.scss │ │ └── _switch.scss │ ├── typography │ │ ├── _alignment.scss │ │ ├── _typography.scss │ │ ├── _helpers.scss │ │ └── _print.scss │ ├── grid │ │ ├── _size.scss │ │ ├── _layout.scss │ │ ├── _gutter.scss │ │ ├── _grid.scss │ │ ├── _row.scss │ │ ├── _position.scss │ │ ├── _classes.scss │ │ ├── _column.scss │ │ └── _flex-grid.scss │ ├── forms │ │ ├── _help-text.scss │ │ ├── _forms.scss │ │ ├── _checkbox.scss │ │ ├── _label.scss │ │ ├── _fieldset.scss │ │ ├── _input-group.scss │ │ ├── _select.scss │ │ ├── _error.scss │ │ └── _text.scss │ ├── foundation.scss │ └── _global.scss │ └── app.scss ├── app ├── content_types │ └── .gitkeep └── views │ ├── snippets │ └── .gitkeep │ └── pages │ ├── 404.liquid │ └── index.liquid ├── .gitignore ├── config ├── translations.yml ├── deploy.yml ├── metafields_schema.yml └── site.yml ├── README.md ├── Guardfile └── Gemfile /data/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/images/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/content_types/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/views/snippets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/javascripts/app.js: -------------------------------------------------------------------------------- 1 | $(document).foundation(); 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | log/ 2 | .push-tmp/ 3 | .sass-cache/ 4 | *.log 5 | *.lock 6 | deploy.yml 7 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/motion-ui.scss: -------------------------------------------------------------------------------- 1 | @import "motion-ui/motion-ui"; 2 | 3 | @include motion-ui-transitions; 4 | @include motion-ui-animations; 5 | -------------------------------------------------------------------------------- /app/views/pages/404.liquid: -------------------------------------------------------------------------------- 1 | --- 2 | title: Page not found 3 | published: true 4 | --- 5 | {% extends index %} 6 | 7 | {% block 'main' %} 8 | 9 |

Page not found

10 | 11 | {% endblock %} 12 | -------------------------------------------------------------------------------- /config/translations.yml: -------------------------------------------------------------------------------- 1 | # Your translations go here. To be used with the 'translate' liquid filter 2 | # Example: 3 | # {{ 'hello_world' | translate }} 4 | # 5 | 6 | # hello_world: 7 | # en: Hello world ! 8 | # fr: Bonjour le monde ! 9 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/motion-ui/util/_unit.scss: -------------------------------------------------------------------------------- 1 | /// Removes the unit (e.g. px, em, rem) from a value, returning the number only. 2 | /// @param {Number} $num - Number to strip unit from. 3 | /// @return {Number} The same number, sans unit. 4 | /// @access private 5 | @function strip-unit($num) { 6 | @return $num / ($num * 0 + 1); 7 | } 8 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/util/_util.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | // Utilities 6 | @import 'unit'; 7 | @import 'value'; 8 | @import 'color'; 9 | @import 'selector'; 10 | 11 | // Libraries 12 | @import 'breakpoint'; 13 | 14 | // Mixins 15 | @import 'mixins'; 16 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/motion-ui/util/_animation.scss: -------------------------------------------------------------------------------- 1 | /// Creates a keyframe from one or more effect functions and assigns it to the element by adding the `animation-name` property. 2 | /// @param {Function} $effects... - One or more effect functions to build the keyframe with. 3 | @mixin mui-animation($args...) { 4 | $name: map-get(-mui-process-args($args...), name); 5 | @include mui-keyframes($name, $args...); 6 | animation-name: unquote($name); 7 | } 8 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/motion-ui/util/_args.scss: -------------------------------------------------------------------------------- 1 | /// Processes a series of keyframe function arguments. 2 | /// @access private 3 | @function -mui-process-args($args...) { 4 | @if length($args) == 1 { 5 | $arg: nth($args, 1); 6 | 7 | @if type-of($arg) == 'string' { 8 | @return call($arg); 9 | } @else if type-of($arg) == 'map' { 10 | @return $arg; 11 | } 12 | } 13 | 14 | @return -mui-keyframe-combine($args...); 15 | } 16 | -------------------------------------------------------------------------------- /config/deploy.yml: -------------------------------------------------------------------------------- 1 | # development: 2 | # host: dev.example.com 3 | # email: john@doe.net 4 | # password: apassword 5 | # # api_key: 6 | # staging: 7 | # host: staging.example.com 8 | # email: john@doe.net 9 | # password: apassword 10 | # # api_key: 11 | # production: 12 | # host: www.example.com 13 | # email: john@doe.net 14 | # password: apassword 15 | # # api_key: 16 | # # ssl: true 17 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/components/_float.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group float 7 | //// 8 | 9 | @mixin foundation-float-classes { 10 | .float-left { 11 | float: left !important; 12 | } 13 | 14 | .float-right { 15 | float: right !important; 16 | } 17 | 18 | .float-center { 19 | display: block; 20 | margin-left: auto; 21 | margin-right: auto; 22 | } 23 | 24 | .clearfix { 25 | @include clearfix; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/motion-ui/effects/_zoom.scss: -------------------------------------------------------------------------------- 1 | /// Creates a scaling transition. A scale of `1` means the element is the same size. Larger numbers make the element bigger, while numbers less than 1 make the element smaller. 2 | /// @param {Number} $from [1.5] - Size to start at. 3 | /// @param {Number} $from [1] - Size to end at. 4 | @function zoom( 5 | $from: 0, 6 | $to: 1 7 | ) { 8 | $keyframes: ( 9 | name: 'scale-#{$to}-to-#{$from}', 10 | 0: (transform: scale($from)), 11 | 100: (transform: scale($to)), 12 | ); 13 | 14 | @return $keyframes; 15 | } 16 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/motion-ui/effects/_wiggle.scss: -------------------------------------------------------------------------------- 1 | /// Creates a wiggling animation. 2 | /// @param {Number} $intensity [7deg] - Intensity of the wiggle. Can be any CSS angle unit. 3 | /// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin. 4 | @function wiggle($intensity: 7deg) { 5 | $keyframes: ( 6 | name: 'wiggle-#{$intensity}', 7 | (40, 50, 60): (transform: rotate($intensity)), 8 | (35, 45, 55, 65): (transform: rotate(-$intensity)), 9 | (0, 30, 70, 100): (transform: rotate(0)), 10 | ); 11 | 12 | @return $keyframes; 13 | } 14 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/typography/_alignment.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @mixin foundation-text-alignment { 6 | @each $align in (left, right, center, justify) { 7 | .text-#{$align} { 8 | text-align: $align; 9 | } 10 | 11 | @each $size in $breakpoint-classes { 12 | @include breakpoint($size) { 13 | @if $size != 'small' { 14 | .#{$size}-text-#{$align} { 15 | text-align: $align; 16 | } 17 | } 18 | } 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Foundation 6 Template for LocomotiveCMS# 2 | 3 | This is a basic template for a Foundation for sites 6 based locomotiveCMS site. Hopefully, it should be a good jumping off point. 4 | 5 | ## Installation ## 6 | 7 | ``` 8 | git clone https://github.com/dustb0wl/locomotive-foundation6.git 9 | cd ./locomotive-foundation6 10 | bundle install 11 | bundle exec wagon serve 12 | ``` 13 | 14 | Read More at the LocomotiveCMS Docs: 15 | [https://locomotive-v3.readme.io/](https://locomotive-v3.readme.io/) 16 | 17 | ## License ## 18 | 19 | [MIT License](https://opensource.org/licenses/MIT) 20 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/motion-ui/effects/_shake.scss: -------------------------------------------------------------------------------- 1 | /// Creates a shaking animation. 2 | /// @param {Percentage} $intensity [7%] - Intensity of the shake, as a percentage value. 3 | /// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin. 4 | @function shake($intensity: 7%) { 5 | $right: (0, 10, 20, 30, 40, 50, 60, 70, 80, 90); 6 | $left: (5, 15, 25, 35, 45, 55, 65, 75, 85, 95); 7 | 8 | $keyframes: ( 9 | name: 'shake-#{($intensity / 1%)}', 10 | $right: (transform: translateX($intensity)), 11 | $left: (transform: translateX(-$intensity)), 12 | ); 13 | 14 | @return $keyframes; 15 | } 16 | -------------------------------------------------------------------------------- /Guardfile: -------------------------------------------------------------------------------- 1 | # LiveReload installation 2 | # 3 | # 1. Add the guard-livereload gem to your Gemfile OR uncomment the line: 4 | # 5 | # gem 'guard-livereload' 6 | # 7 | # 2. Install the gem on your machine 8 | # 9 | # bundle install 10 | # 11 | # 3. Launch Guard 12 | # 13 | # bundle exec guard 14 | # 15 | 16 | guard 'livereload', host: '0.0.0.0', port: ENV['WAGON_LIVERELOAD_PORT'] || 35729, grace_period: 0.5 do 17 | watch(%r{app/content_types/.+\.yml$}) 18 | watch(%r{app/views/.+\.liquid}) 19 | watch(%r{config/.+\.yml$}) 20 | watch(%r{data/.+\.yml$}) 21 | watch(%r{public/((stylesheets|javascripts)/(.+\.(css|js))).*}) { |m| "/#{m[1]}" } 22 | end 23 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/typography/_typography.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group typography 7 | //// 8 | 9 | // scss-lint:disable DeclarationOrder 10 | 11 | // Base typography styles (tags only) 12 | @import 'base'; 13 | 14 | // Typography helper classes (classes only) 15 | @import 'helpers'; 16 | 17 | // Text alignment classes 18 | @import 'alignment'; 19 | 20 | // Print styles 21 | @import 'print'; 22 | 23 | @mixin foundation-typography { 24 | @include foundation-typography-base; 25 | @include foundation-typography-helpers; 26 | @include foundation-text-alignment; 27 | @include foundation-print-styles; 28 | } 29 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | gem 'locomotivecms_wagon', '~> 2.1.1' 4 | 5 | # gem 'guard-livereload', '~> 2.5.1' 6 | 7 | group :development do 8 | # Mac OS X 9 | gem 'rb-fsevent', '~> 0.9.1', require: 'rb-fsevent' if RUBY_PLATFORM.include?('darwin') 10 | 11 | # Unix 12 | gem 'therubyracer', require: 'v8', platforms: :ruby unless RUBY_PLATFORM.include?('darwin') 13 | 14 | gem 'rb-inotify', '~> 0.9', require: 'rb-inotify' if RUBY_PLATFORM.include?('linux') 15 | 16 | # Windows 17 | gem 'wdm', '~> 0.1.1', require: 'wdm' if RUBY_PLATFORM =~ /mswin|mingw/i 18 | end 19 | 20 | group :misc do 21 | # Add your extra gems here 22 | # gem 'susy', require: 'susy' 23 | # gem 'bourbon', require: 'bourbon' 24 | end 25 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/grid/_size.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group grid 7 | //// 8 | 9 | /// Set the width of a grid column. 10 | /// 11 | /// @param {Number|List} $width [$grid-column-count] - Width to make the column. You can pass in any value accepted by the `grid-column()` function, such as `6`, `50%`, or `1 of 2`. 12 | @mixin grid-column-size( 13 | $columns: $grid-column-count 14 | ) { 15 | width: grid-column($columns); 16 | } 17 | 18 | /// Shorthand for `grid-column-size()`. 19 | /// @alias grid-column-size 20 | @mixin grid-col-size( 21 | $columns: $grid-column-count 22 | ) { 23 | @include grid-column-size($columns); 24 | } 25 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/components/_sticky.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | @mixin foundation-sticky { 6 | .sticky-container { 7 | position: relative; 8 | } 9 | 10 | .sticky { 11 | position: absolute; 12 | z-index: 0; 13 | transform: translate3d(0,0,0); 14 | } 15 | 16 | .sticky.is-stuck { 17 | position: fixed; 18 | z-index: 5; 19 | 20 | &.is-at-top { 21 | top: 0; 22 | } 23 | 24 | &.is-at-bottom { 25 | bottom: 0; 26 | } 27 | } 28 | 29 | .sticky.is-anchored { 30 | position: absolute; 31 | left: auto; 32 | right: auto; 33 | 34 | &.is-at-bottom { 35 | bottom: 0; 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/motion-ui/effects/_fade.scss: -------------------------------------------------------------------------------- 1 | /// Creates a fading animation. 2 | /// @param {Number} $from [0] - Opacity to start at. 3 | /// @param {Number} $to [1] - Opacity to end at. 4 | /// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin. 5 | @function fade( 6 | $from: 0, 7 | $to: 1 8 | ) { 9 | $type: type-of($from); 10 | $keyframes: (); 11 | 12 | @if $type == 'string' { 13 | @if $from == in { 14 | $from: 0; 15 | $to: 1; 16 | } @else if $from == out { 17 | $from: 1; 18 | $to: 0; 19 | } 20 | } 21 | 22 | $keyframes: ( 23 | name: 'fade-#{$from}-to-#{$to}', 24 | 0: (opacity: $from), 25 | 100: (opacity: $to), 26 | ); 27 | 28 | @return $keyframes; 29 | } 30 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/components/_accordion-menu.scss: -------------------------------------------------------------------------------- 1 | //// 2 | /// @group accordion-menu 3 | //// 4 | 5 | /// Sets if accordion menus have the default arrow styles. 6 | /// @type Boolean 7 | $accordionmenu-arrows: true; 8 | 9 | @mixin foundation-accordion-menu { 10 | @if $accordionmenu-arrows { 11 | .is-accordion-submenu-parent > a { 12 | position: relative; 13 | 14 | &::after { 15 | @include css-triangle(6px, $primary-color, down); 16 | position: absolute; 17 | top: 50%; 18 | margin-top: -4px; 19 | right: 1rem; 20 | } 21 | } 22 | 23 | .is-accordion-submenu-parent[aria-expanded="true"] > a::after { 24 | transform-origin: 50% 50%; 25 | transform: scaleY(-1); 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/motion-ui/motion-ui.scss: -------------------------------------------------------------------------------- 1 | // Motion UI by ZURB 2 | // foundation.zurb.com/motion-ui 3 | // Licensed under MIT Open Source 4 | 5 | @import 'settings'; 6 | 7 | @import 'util/animation'; 8 | @import 'util/args'; 9 | @import 'util/keyframe'; 10 | @import 'util/selector'; 11 | @import 'util/series'; 12 | @import 'util/transition'; 13 | @import 'util/unit'; 14 | 15 | @import 'effects/fade'; 16 | @import 'effects/hinge'; 17 | @import 'effects/spin'; 18 | @import 'effects/zoom'; 19 | @import 'effects/shake'; 20 | @import 'effects/slide'; 21 | @import 'effects/wiggle'; 22 | 23 | @import 'transitions/fade'; 24 | @import 'transitions/hinge'; 25 | @import 'transitions/zoom'; 26 | @import 'transitions/slide'; 27 | @import 'transitions/spin'; 28 | 29 | @import 'classes'; 30 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/forms/_help-text.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group forms 7 | //// 8 | 9 | /// Default color for help text. 10 | /// @type Color 11 | $helptext-color: #333 !default; 12 | 13 | /// Default font size for help text. 14 | /// @type Number 15 | $helptext-font-size: rem-calc(13) !default; 16 | 17 | /// Default font style for help text. 18 | /// @type Keyword 19 | $helptext-font-style: italic !default; 20 | 21 | @mixin foundation-form-helptext { 22 | .help-text { 23 | $margin-top: ($form-spacing * 0.5) * -1; 24 | 25 | margin-top: $margin-top; 26 | font-size: $helptext-font-size; 27 | font-style: $helptext-font-style; 28 | color: $helptext-color; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/grid/_layout.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group grid 7 | //// 8 | 9 | /// Sizes child elements so that `$n` number of items appear on each row. 10 | /// @param {Number} $n - Number of elements to display per row. 11 | /// @param {String} $selector ['.column, .columns'] - Selector(s) to use for child elements. 12 | @mixin grid-layout( 13 | $n, 14 | $selector: '.column' 15 | ) { 16 | #{$selector} { 17 | width: percentage(1/$n); 18 | float: $global-left; 19 | 20 | &:nth-of-type(1n) { 21 | clear: none; 22 | } 23 | 24 | &:nth-of-type(#{$n}n+1) { 25 | clear: both; 26 | } 27 | 28 | &:last-child { 29 | float: left; 30 | } 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/forms/_forms.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group forms 7 | //// 8 | 9 | /// Global spacing for form elements. 10 | /// @type Number 11 | $form-spacing: rem-calc(16) !default; 12 | 13 | @import 14 | 'text', 15 | 'checkbox', 16 | 'label', 17 | 'help-text', 18 | 'input-group', 19 | 'fieldset', 20 | 'select', 21 | 'error'; 22 | 23 | @mixin foundation-forms { 24 | @include foundation-form-text; 25 | @include foundation-form-checkbox; 26 | @include foundation-form-label; 27 | @include foundation-form-helptext; 28 | @include foundation-form-prepostfix; 29 | @include foundation-form-fieldset; 30 | @include foundation-form-select; 31 | @include foundation-form-error; 32 | } 33 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/grid/_gutter.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group grid 7 | //// 8 | 9 | /// Collapse the gutters on a column by removing the padding. 10 | @mixin grid-column-collapse() { 11 | padding-left: 0; 12 | padding-right: 0; 13 | } 14 | 15 | /// Un-collapse the gutters on a column by re-adding the padding. 16 | @mixin grid-column-uncollapse() { 17 | padding-left: $grid-column-gutter; 18 | padding-right: $grid-column-gutter; 19 | } 20 | 21 | /// Shorthand for `grid-column-collapse()`. 22 | /// @alias grid-column-collapse 23 | @mixin grid-col-collapse() { 24 | @include grid-column-collapse; 25 | } 26 | 27 | /// Shorthand for `grid-column-uncollapse()`. 28 | /// @alias grid-column-uncollapse 29 | @mixin grid-col-uncollapse() { 30 | @include grid-column-uncollapse; 31 | } 32 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/motion-ui/effects/_spin.scss: -------------------------------------------------------------------------------- 1 | /// Creates a spinning animation. 2 | /// @param {Keyword} $direction [cw] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise). 3 | /// @param {Number} $amount [360deg] - Amount to spin. Can be any CSS angle unit. 4 | /// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin. 5 | @function spin( 6 | $state: in, 7 | $direction: cw, 8 | $amount: 1turn 9 | ) { 10 | $start: 0; 11 | $end: 0; 12 | 13 | @if $state == in { 14 | $start: if($direction == ccw, $amount, $amount * -1); 15 | $end: 0; 16 | } @else { 17 | $start: 0; 18 | $end: if($direction == ccw, $amount * -1, $amount); 19 | } 20 | 21 | $keyframes: ( 22 | name: 'spin-#{$direction}-#{$amount}', 23 | 0: (transform: rotate($start)), 24 | 100: (transform: rotate($end)), 25 | ); 26 | 27 | @return $keyframes; 28 | } 29 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/forms/_checkbox.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group forms 7 | //// 8 | 9 | @mixin foundation-form-checkbox { 10 | [type="file"], 11 | [type="checkbox"], 12 | [type="radio"] { 13 | margin: 0 0 $form-spacing; 14 | } 15 | 16 | // Styles for input/label siblings 17 | [type="checkbox"] + label, 18 | [type="radio"] + label { 19 | display: inline-block; 20 | margin-#{$global-left}: $form-spacing * 0.5; 21 | margin-#{$global-right}: $form-spacing; 22 | margin-bottom: 0; 23 | vertical-align: baseline; 24 | } 25 | 26 | // Styles for inputs inside labels 27 | label > [type="checkbox"], 28 | label > [type="label"] { 29 | margin-#{$global-right}: $form-spacing * 0.5; 30 | } 31 | 32 | // Normalize file input width 33 | [type="file"] { 34 | width: 100%; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/grid/_grid.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group grid 7 | //// 8 | 9 | /// The maximum width of a row. 10 | /// @type Number 11 | $grid-row-width: $global-width !default; 12 | 13 | /// The default column count of a grid. Changing this value affects the logic of the grid mixins, and the number of CSS classes output. 14 | /// @type Number 15 | $grid-column-count: 12 !default; 16 | 17 | /// The amount of space between columns. 18 | /// @type Number 19 | $grid-column-gutter: 30px !default; 20 | 21 | /// The highest number of `.x-up` classes available when using the block grid CSS. 22 | /// @type Number 23 | $block-grid-max: 6 !default; 24 | 25 | @import 'row'; 26 | @import 'column'; 27 | @import 'size'; 28 | @import 'position'; 29 | @import 'gutter'; 30 | @import 'classes'; 31 | @import 'layout'; 32 | 33 | @import 'flex-grid'; 34 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/components/_title-bar.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group title-bar 7 | //// 8 | 9 | @mixin foundation-title-bar { 10 | .title-bar { 11 | @include clearfix; 12 | background: $black; 13 | color: $white; 14 | padding: 0.5rem; 15 | 16 | .menu-icon { 17 | margin-#{$global-left}: 0.25rem; 18 | margin-#{$global-right}: 0.5rem; 19 | } 20 | } 21 | 22 | .title-bar-left { 23 | float: left; 24 | } 25 | 26 | .title-bar-right { 27 | float: right; 28 | text-align: right; 29 | } 30 | 31 | .title-bar-title { 32 | font-weight: bold; 33 | vertical-align: middle; 34 | display: inline-block; 35 | } 36 | 37 | .menu-icon { 38 | @include hamburger($color: white, $color-hover: $medium-gray); 39 | } 40 | 41 | .menu-icon.dark { 42 | @include hamburger; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/util/_selector.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group functions 7 | //// 8 | 9 | /// Generates a selector with every text input type. You can also filter the list to only output a subset of those selectors. 10 | /// @param {List|Keyword} $types [()] - A list of text input types to use. Leave blank to use all of them. 11 | @function text-inputs($types: ()) { 12 | $return: (); 13 | 14 | $all-types: 15 | text 16 | password 17 | date 18 | datetime 19 | datetime-local 20 | month 21 | week 22 | email 23 | number 24 | search 25 | tel 26 | time 27 | url 28 | color; 29 | 30 | @if not(hasvalue($types)) { 31 | $types: $all-types; 32 | } 33 | 34 | @each $type in $types { 35 | $return: append($return, unquote('[type="#{$type}"]'), comma); 36 | } 37 | 38 | @return $return; 39 | } 40 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/motion-ui/util/_selector.scss: -------------------------------------------------------------------------------- 1 | /// Builds a selector for a motion class, using the settings defined in the `$motion-ui-classes` and `$motion-ui-states` maps. 2 | /// @param {String|List} $states - One or more strings that correlate to a state. 3 | /// @param {Boolean} $active - Defines if the selector is for the setup or active class. 4 | /// @return {String} A selector that can be interpolated into your Sass code. 5 | /// @access private 6 | @function -mui-build-selector($states, $active: false) { 7 | $return: ''; 8 | $chain: map-get($motion-ui-classes, chain); 9 | $prefix: map-get($motion-ui-classes, prefix); 10 | $suffix: map-get($motion-ui-classes, active); 11 | 12 | @each $sel in $states { 13 | $return: $return + if($chain, '&.', '#{&}-') + $prefix + $sel; 14 | 15 | @if $active { 16 | $return: $return + if($chain, '.', '#{&}-') + $prefix + $sel + $suffix; 17 | } 18 | 19 | $return: $return + ', '; 20 | } 21 | 22 | @return str-slice($return, 1, -3); 23 | } 24 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/motion-ui/transitions/_fade.scss: -------------------------------------------------------------------------------- 1 | /// Creates a fade transition by adjusting the opacity of the element. 2 | /// @param {Keyword} $state [in] - State to transition to. 3 | /// @param {Number} $from [0] - Opacity to start at. Must be a number between 0 and 1. 4 | /// @param {Number} $to [1] - Opacity to end on. 5 | /// @param {Keyword} $duration [null] - Length (speed) of the transition. 6 | /// @param {Keyword|Function} $timing [null] - Easing of the transition. 7 | /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. 8 | @mixin mui-fade( 9 | $state: in, 10 | $from: 0, 11 | $to: 1, 12 | $duration: null, 13 | $timing: null, 14 | $delay: null 15 | ) { 16 | $fade: fade($from, $to); 17 | 18 | @include transition-start($state) { 19 | @include transition-basics($duration, $timing, $delay); 20 | @include -mui-keyframe-get($fade, 0); 21 | 22 | transition-property: opacity; 23 | } 24 | 25 | @include transition-end($state) { 26 | @include -mui-keyframe-get($fade, 100); 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/motion-ui/effects/_slide.scss: -------------------------------------------------------------------------------- 1 | /// Creates a sliding animation. 2 | /// @param {Keyword} $state [in] - Whether to move to (`in`) or from (`out`) the element's default position. 3 | /// @param {Keyword} $direction [up] - Direction to move. Can be `up`, `down`, `left`, or `right`. 4 | /// @param {Number} $amount [100%] - Distance to move. Can be any CSS length unit. 5 | /// @return {Map} A keyframes map that can be used with the `generate-keyframes()` mixin. 6 | @function slide( 7 | $state: in, 8 | $direction: up, 9 | $amount: 100% 10 | ) { 11 | $from: $amount; 12 | $to: 0; 13 | $func: 'translateY'; 14 | 15 | @if $direction == left or $direction == right { 16 | $func: 'translateX'; 17 | } 18 | 19 | @if $state == out { 20 | $from: 0; 21 | $to: $amount; 22 | } 23 | 24 | @if $direction == down or $direction == right { 25 | @if $state == in { 26 | $from: -$from; 27 | } 28 | } @else { 29 | @if $state == out { 30 | $to: -$to; 31 | } 32 | } 33 | 34 | $keyframes: ( 35 | name: 'slide-#{$state}-#{$direction}-#{strip-unit($amount)}', 36 | 0: (transform: '#{$func}(#{$from})'), 37 | 100: (transform: '#{$func}(#{$to})'), 38 | ); 39 | 40 | @return $keyframes; 41 | } 42 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/forms/_label.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group forms 7 | //// 8 | 9 | /// Color for form labels. 10 | /// @type Color 11 | $form-label-color: $black !default; 12 | 13 | /// Font size for form labels. 14 | /// @type Number 15 | $form-label-font-size: rem-calc(14) !default; 16 | 17 | /// Font weight for form labels. 18 | /// @type Keyword 19 | $form-label-font-weight: $global-weight-normal !default; 20 | 21 | /// Line height for form labels. The higher the number, the more space between the label and its input field. 22 | /// @type Number 23 | $form-label-line-height: 1.8 !default; 24 | 25 | @mixin form-label { 26 | display: block; 27 | margin: 0; 28 | font-size: $form-label-font-size; 29 | font-weight: $form-label-font-weight; 30 | line-height: $form-label-line-height; 31 | color: $form-label-color; 32 | } 33 | 34 | @mixin form-label-middle { 35 | $input-border-width: get-border-value($input-border, width); 36 | margin: 0 0 $form-spacing; 37 | padding: ($form-spacing / 2 + rem-calc($input-border-width)) 0; 38 | } 39 | 40 | @mixin foundation-form-label { 41 | label { 42 | @include form-label; 43 | 44 | &.middle { 45 | @include form-label-middle; 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/forms/_fieldset.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group forms 7 | //// 8 | 9 | /// Default border around custom fieldsets. 10 | /// @type Border 11 | $fieldset-border: 1px solid $medium-gray !default; 12 | 13 | /// Default padding inside custom fieldsets. 14 | /// @type Number 15 | $fieldset-padding: rem-calc(20) !default; 16 | 17 | /// Default margin around custom fieldsets. 18 | /// @type Number 19 | $fieldset-margin: rem-calc(18 0) !default; 20 | 21 | /// Default padding between the legend text and fieldset border. 22 | /// @type Number 23 | $legend-padding: rem-calc(0 3) !default; 24 | 25 | @mixin fieldset { 26 | border: $fieldset-border; 27 | padding: $fieldset-padding; 28 | margin: $fieldset-margin; 29 | 30 | legend { 31 | // Covers up the fieldset's border to create artificial padding 32 | background: $body-background; 33 | padding: $legend-padding; 34 | margin: 0; 35 | margin-#{$global-left}: rem-calc(-3); 36 | } 37 | } 38 | 39 | @mixin foundation-form-fieldset { 40 | fieldset { 41 | border: 0; 42 | padding: 0; 43 | margin: 0; 44 | } 45 | 46 | legend { 47 | margin-bottom: $form-spacing * 0.5; 48 | } 49 | 50 | .fieldset { 51 | @include fieldset; 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/components/_top-bar.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group top-bar 7 | //// 8 | 9 | /// Padding for the top bar. 10 | /// @type Number 11 | $topbar-padding: 0.5rem !default; 12 | 13 | /// Background color for the top bar. This color also cascades to menus within the top bar. 14 | /// @type Color 15 | $topbar-background: #eee !default; 16 | 17 | /// Color for links inside a top bar menu. 18 | /// @type Color 19 | $topbar-link-color: #fff !default; 20 | 21 | /// Width of `` elements inside the top bar. 22 | /// @type Number 23 | $topbar-input-width: 200px !default; 24 | 25 | /// Adds styles for a top bar container. 26 | @mixin top-bar-container { 27 | @include clearfix; 28 | padding: $topbar-padding; 29 | 30 | &, ul { 31 | background-color: $topbar-background; 32 | } 33 | 34 | input { 35 | width: $topbar-input-width; 36 | margin-#{$global-right}: 1rem; 37 | } 38 | } 39 | 40 | @mixin foundation-top-bar { 41 | // Top bar container 42 | .top-bar { 43 | @include top-bar-container; 44 | } 45 | 46 | // Sub-sections 47 | // Stack on small screens 48 | @include breakpoint(medium) { 49 | .top-bar-left { 50 | float: left; 51 | } 52 | 53 | .top-bar-right { 54 | float: right 55 | } 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/components/_badge.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group badge 7 | //// 8 | 9 | /// Default background color for badges. 10 | /// @type Color 11 | $badge-background: $primary-color !default; 12 | 13 | /// Default text color for badges. 14 | /// @type Color 15 | $badge-color: foreground($badge-background) !default; 16 | 17 | /// Default padding inside badges. 18 | /// @type Number 19 | $badge-padding: 0.3em !default; 20 | 21 | /// Minimum width of a badge. 22 | /// @type Number 23 | $badge-minwidth: 2.1em !default; 24 | 25 | /// Default font size for badges. 26 | /// @type Number 27 | $badge-font-size: 0.6rem !default; 28 | 29 | /// Generates the base styles for a badge. 30 | @mixin badge { 31 | display: inline-block; 32 | padding: $badge-padding; 33 | min-width: $badge-minwidth; 34 | font-size: $badge-font-size; 35 | text-align: center; 36 | border-radius: 50%; 37 | } 38 | 39 | @mixin foundation-badge { 40 | .badge { 41 | @include badge; 42 | 43 | background: $badge-background; 44 | color: $badge-color; 45 | 46 | @each $name, $color in $foundation-colors { 47 | @if $name != primary { 48 | &.#{$name} { 49 | background: $color; 50 | color: foreground($color); 51 | } 52 | } 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /public/stylesheets/app.scss: -------------------------------------------------------------------------------- 1 | @charset 'utf-8'; 2 | 3 | @import 'settings'; 4 | @import 'foundation6/foundation'; 5 | @import 'foundation6/motion-ui'; 6 | 7 | @include foundation-global-styles; 8 | @include foundation-grid; 9 | @include foundation-typography; 10 | @include foundation-button; 11 | @include foundation-forms; 12 | @include foundation-visibility-classes; 13 | @include foundation-float-classes; 14 | @include foundation-accordion; 15 | @include foundation-badge; 16 | @include foundation-breadcrumbs; 17 | @include foundation-button-group; 18 | @include foundation-callout; 19 | @include foundation-close-button; 20 | @include foundation-drilldown-menu; 21 | @include foundation-dropdown; 22 | @include foundation-dropdown-menu; 23 | @include foundation-flex-video; 24 | @include foundation-label; 25 | @include foundation-media-object; 26 | @include foundation-menu; 27 | @include foundation-off-canvas; 28 | @include foundation-orbit; 29 | @include foundation-pagination; 30 | @include foundation-progress-bar; 31 | @include foundation-slider; 32 | @include foundation-sticky; 33 | @include foundation-reveal; 34 | @include foundation-switch; 35 | @include foundation-table; 36 | @include foundation-tabs; 37 | @include foundation-thumbnail; 38 | @include foundation-title-bar; 39 | @include foundation-tooltip; 40 | @include foundation-top-bar; 41 | 42 | @include motion-ui-transitions; 43 | @include motion-ui-animations; 44 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/components/_label.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group label 7 | //// 8 | 9 | /// Default background color for labels. 10 | /// @type Color 11 | $label-background: $primary-color !default; 12 | 13 | /// Default text color for labels. 14 | /// @type Color 15 | $label-color: foreground($label-background) !default; 16 | 17 | /// Default font size for labels. 18 | /// @type Number 19 | $label-font-size: 0.8rem !default; 20 | 21 | /// Default padding inside labels. 22 | /// @type Number 23 | $label-padding: 0.33333rem 0.5rem !default; 24 | 25 | /// Default radius of labels. 26 | /// @type Number 27 | $label-radius: $global-radius !default; 28 | 29 | /// Generates base styles for a label. 30 | @mixin label { 31 | display: inline-block; 32 | padding: $label-padding; 33 | font-size: $label-font-size; 34 | line-height: 1; 35 | white-space: nowrap; 36 | cursor: default; 37 | border-radius: $label-radius; 38 | } 39 | 40 | @mixin foundation-label { 41 | .label { 42 | @include label; 43 | 44 | background: $label-background; 45 | color: $label-color; 46 | 47 | @each $name, $color in $foundation-colors { 48 | @if $name != primary { 49 | &.#{$name} { 50 | background: $color; 51 | color: foreground($color); 52 | } 53 | } 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/components/_thumbnail.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group thumbnail 7 | //// 8 | 9 | /// Border around thumbnail images. 10 | /// @type Border 11 | $thumbnail-border: solid 4px $white !default; 12 | 13 | /// Bottom margin for thumbnail images. 14 | /// @type Length 15 | $thumbnail-margin-bottom: $global-margin !default; 16 | 17 | /// Box shadow under thumbnail images. 18 | /// @type Shadow 19 | $thumbnail-shadow: 0 0 0 1px rgba($black, 0.2) !default; 20 | 21 | /// Box shadow under thumbnail images. 22 | /// @type Shadow 23 | $thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5) !default; 24 | 25 | /// Transition proprties for thumbnail images. 26 | /// @type Transition 27 | $thumbnail-transition: box-shadow 200ms ease-out !default; 28 | 29 | /// Default radius for thumbnail images. 30 | /// @type Number 31 | $thumbnail-radius: $global-radius !default; 32 | 33 | /// Adds thumbnail styles to an element. 34 | @mixin thumbnail { 35 | border: $thumbnail-border; 36 | box-shadow: $thumbnail-shadow; 37 | display: inline-block; 38 | line-height: 0; 39 | max-width: 100%; 40 | transition: $thumbnail-transition; 41 | border-radius: $thumbnail-radius; 42 | margin-bottom: $thumbnail-margin-bottom; 43 | 44 | &:hover, 45 | &:focus { 46 | box-shadow: $thumbnail-shadow-hover; 47 | } 48 | } 49 | 50 | @mixin foundation-thumbnail { 51 | .thumbnail { 52 | @include thumbnail; 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/motion-ui/transitions/_zoom.scss: -------------------------------------------------------------------------------- 1 | /// Creates a scaling transition. A scale of `1` means the element is the same size. Larger numbers make the element bigger, while numbers less than 1 make the element smaller. 2 | /// @param {Keyword} $state [in] - State to transition to. 3 | /// @param {Number} $from [1.5] - Size to start at. 4 | /// @param {Number} $from [1] - Size to end at. 5 | /// @param {Boolean} $fade [true] - Set to `true` to fade the element in or out simultaneously. 6 | /// @param {Duration} $duration [null] - Length (speed) of the transition. 7 | /// @param {Keyword|Function} $timing [null] - Easing of the transition. 8 | /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. 9 | @mixin mui-zoom( 10 | $state: in, 11 | $from: 1.5, 12 | $to: 1, 13 | $fade: map-get($motion-ui-settings, scale-and-fade), 14 | $duration: null, 15 | $timing: null, 16 | $delay: null 17 | ) { 18 | $scale: zoom($from, $to); 19 | 20 | @include transition-start($state) { 21 | @include transition-basics($duration, $timing, $delay); 22 | @include -mui-keyframe-get($scale, 0); 23 | 24 | @if $fade { 25 | transition-property: transform, opacity; 26 | opacity: if($state == in, 0, 1); 27 | } @else { 28 | transition-property: transform, opacity; 29 | } 30 | } 31 | 32 | @include transition-end($state) { 33 | @include -mui-keyframe-get($scale, 100); 34 | 35 | @if $fade { 36 | opacity: if($state == in, 1, 0); 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /public/javascripts/vendor/what-input.min.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"function"==typeof define&&define.amd?define([],function(){return t()}):"object"==typeof exports?module.exports=t():e.whatInput=t()}(this,function(){"use strict";function e(e){clearTimeout(s),n(e),f=!0,s=setTimeout(function(){f=!1},1e3)}function t(e){f||n(e)}function n(e){var t=o(e),n=r(e),d=w[e.type];"pointer"===d&&(d=i(e)),p!==d&&(!y&&p&&"keyboard"===d&&"tab"!==v[t]&&m.indexOf(n.nodeName.toLowerCase())>=0||(p=d,a.setAttribute("data-whatinput",p),-1===h.indexOf(p)&&h.push(p))),"keyboard"===d&&u(t)}function o(e){return e.keyCode?e.keyCode:e.which}function r(e){return e.target||e.srcElement}function i(e){return"number"==typeof e.pointerType?b[e.pointerType]:e.pointerType}function u(e){-1===c.indexOf(v[e])&&v[e]&&c.push(v[e])}function d(e){var t=o(e),n=c.indexOf(v[t]);-1!==n&&c.splice(n,1)}var s,c=[],a=document.body,f=!1,p=null,m=["input","select","textarea"],y=a.hasAttribute("data-whatinput-formtyping"),w={keydown:"keyboard",mousedown:"mouse",mouseenter:"mouse",touchstart:"touch",pointerdown:"pointer",MSPointerDown:"pointer"},h=[],v={9:"tab",13:"enter",16:"shift",27:"esc",32:"space",37:"left",38:"up",39:"right",40:"down"},b={2:"touch",3:"touch",4:"mouse"};return function(){var n="mousedown";window.PointerEvent?n="pointerdown":window.MSPointerEvent&&(n="MSPointerDown"),a.addEventListener(n,t),a.addEventListener("mouseenter",t),"ontouchstart"in document.documentElement&&a.addEventListener("touchstart",e),a.addEventListener("keydown",t),a.addEventListener("keyup",d)}(),{ask:function(){return p},keys:function(){return c},types:function(){return h},set:n}}); -------------------------------------------------------------------------------- /public/stylesheets/foundation6/components/_dropdown.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group dropdown 7 | //// 8 | 9 | /// Padding for dropdown panes. 10 | /// @type List 11 | $dropdown-padding: 1rem !default; 12 | 13 | /// Border for dropdown panes. 14 | /// @type List 15 | $dropdown-border: 1px solid $medium-gray !default; 16 | 17 | /// Font size for dropdown panes. 18 | /// @type List 19 | $dropdown-font-size: 16rem !default; 20 | 21 | /// Width for dropdown panes. 22 | /// @type Number 23 | $dropdown-width: 300px !default; 24 | 25 | /// Border radius dropdown panes. 26 | /// @type Number 27 | $dropdown-radius: $global-radius !default; 28 | 29 | /// Sizes for dropdown panes. Each size is a CSS class you can apply. 30 | /// @type Map 31 | $dropdown-sizes: ( 32 | tiny: 100px, 33 | small: 200px, 34 | large: 400px, 35 | ) !default; 36 | 37 | /// Applies styles for a basic dropdown. 38 | @mixin dropdown-container { 39 | background-color: $body-background; 40 | border: $dropdown-border; 41 | display: block; 42 | padding: $dropdown-padding; 43 | position: absolute; 44 | visibility: hidden; 45 | width: 300px; 46 | z-index: 10; 47 | border-radius: $dropdown-radius; 48 | 49 | &.is-open { 50 | visibility: visible; 51 | } 52 | } 53 | 54 | @mixin foundation-dropdown { 55 | .dropdown-pane { 56 | @include dropdown-container; 57 | } 58 | 59 | @each $name, $size in $dropdown-sizes { 60 | .dropdown-pane.#{$name} { 61 | width: $size; 62 | } 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/motion-ui/transitions/_spin.scss: -------------------------------------------------------------------------------- 1 | /// Creates a spinning transition by rotating the element. The `turn` unit is used to specify how far to rotate. `1turn` is equal to a 360-degree spin. 2 | /// @param {Keyword} $state [in] - State to transition to. 3 | /// @param {Boolean} $direction [cw] - Direction to spin. Should be `cw` (clockwise) or `ccw` (counterclockwise). 4 | /// @param {Number} $amount [0.75turn] - Amount to element the element. 5 | /// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously. 6 | /// @param {Duration} $duration [null] - Length (speed) of the transition. 7 | /// @param {Keyword|Function} $timing [null] - Easing of the transition. 8 | /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. 9 | @mixin mui-spin( 10 | $state: in, 11 | $direction: cw, 12 | $amount: 0.75turn, 13 | $fade: map-get($motion-ui-settings, spin-and-fade), 14 | $duration: null, 15 | $timing: null, 16 | $delay: null 17 | ) { 18 | $spin: spin($state, $direction, $amount); 19 | 20 | @include transition-start($state) { 21 | @include transition-basics($duration, $timing, $delay); 22 | @include -mui-keyframe-get($spin, 0); 23 | 24 | @if $fade { 25 | transition-property: transform, opacity; 26 | opacity: if($state == in, 0, 1); 27 | } @else { 28 | transition-property: transform, opacity; 29 | } 30 | } 31 | 32 | @include transition-end($state) { 33 | @include -mui-keyframe-get($spin, 100); 34 | 35 | @if $fade { 36 | opacity: if($state == in, 1, 0); 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/motion-ui/util/_transition.scss: -------------------------------------------------------------------------------- 1 | /// Applies basic transition settings to an element. 2 | /// @param {Duration} $duration [null] - Length (speed) of the transition. 3 | /// @param {Keyword|Function} $timing [null] - Easing of the transition. 4 | /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. 5 | @mixin transition-basics( 6 | $duration: null, 7 | $timing: null, 8 | $delay: null 9 | ) { 10 | @extend %mui-defaults; 11 | transition-duration: $duration; 12 | transition-timing-function: $timing; 13 | transition-delay: $delay; 14 | } 15 | 16 | /// Wraps the content in the setup class for a transition. 17 | /// @param {Keyword} $dir - State to setup for transition. 18 | @mixin transition-start($dir) { 19 | $selector: -mui-build-selector(map-get($motion-ui-states, $dir)); 20 | 21 | @at-root { 22 | #{$selector} { 23 | @content; 24 | } 25 | } 26 | } 27 | 28 | /// Wraps the content in the active class for a transition. 29 | /// @param {Keyword} $dir - State to activate a transition on. 30 | @mixin transition-end($dir) { 31 | $selector: -mui-build-selector(map-get($motion-ui-states, $dir), true); 32 | 33 | @at-root { 34 | #{$selector} { 35 | @content; 36 | } 37 | } 38 | } 39 | 40 | /// Adds styles for a stagger animation, which can be used with Angular's `ng-repeat`. 41 | /// @param {Duration} $delay-amount - Amount of time in seconds or milliseconds to add between each item's animation. 42 | @mixin stagger($delay-amount) { 43 | transition-delay: $delay-amount; 44 | transition-duration: 0; // Prevent accidental CSS inheritance 45 | } 46 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/motion-ui/transitions/_slide.scss: -------------------------------------------------------------------------------- 1 | /// Creates a sliding transition by translating the element horizontally or vertically. 2 | /// @param {Keyword} $state [in] - State to transition to. 3 | /// @param {Keyword} $direction [left] - Side of the element to slide from. Can be `top`, `right`, `bottom`, or `left`. 4 | /// @param {Length} $amount [100%] - Length of the slide as a percentage value. 5 | /// @param {Boolean} $fade [false] - Set to `true` to fade the element in or out simultaneously. 6 | /// @param {Duration} $duration [null] - Length (speed) of the transition. 7 | /// @param {Keyword|Function} $timing [null] - Easing of the transition. 8 | /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. 9 | @mixin mui-slide ( 10 | $state: in, 11 | $direction: left, 12 | $amount: 100%, 13 | $fade: map-get($motion-ui-settings, slide-and-fade), 14 | $duration: null, 15 | $timing: null, 16 | $delay: null 17 | ) { 18 | $slide: slide($state, $direction, $amount); 19 | 20 | // CSS Output 21 | @include transition-start($state) { 22 | @include transition-basics($duration, $timing, $delay); 23 | @include -mui-keyframe-get($slide, 0); 24 | 25 | @if $fade { 26 | transition-property: transform, opacity; 27 | opacity: if($state == in, 0, 1); 28 | } @else { 29 | transition-property: transform, opacity; 30 | } 31 | 32 | backface-visibility: hidden; 33 | } 34 | 35 | @include transition-end($state) { 36 | @include -mui-keyframe-get($slide, 100); 37 | 38 | @if $fade { 39 | opacity: if($state == in, 1, 0); 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/util/_color.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group functions 7 | //// 8 | 9 | /// Checks the lightness of `$color`, and if it passes the `$threshold` of lightness, it returns the `$yes` color. Otherwise, it returns the `$no` color. Use this function to dynamically output a foreground color based on a given background color. 10 | /// 11 | /// @param {color} $color - Color to check the lightness of. 12 | /// @param {color} $yes [$black] - Color to return if `$color` is light. 13 | /// @param {color} $no [$white] - Color to return if `$color` is dark. 14 | /// @param {percentage} $threshold [60%] - Threshold of lightness to check against. 15 | /// 16 | /// @returns {Color} The $yes color or $no color. 17 | @function foreground($color, $yes: $black, $no: $white, $threshold: 60%) { 18 | @if $color == transparent { 19 | $color: $body-background; 20 | } 21 | @if (lightness($color) > $threshold) { 22 | @return $yes; 23 | } 24 | @else { 25 | @return $no; 26 | } 27 | } 28 | 29 | /// Scales a color to be lighter if it's light, or darker if it's dark. Use this function to tint a color appropriate to its lightness. 30 | /// 31 | /// @param {color} $color - Color to scale. 32 | /// @param {percentage} $scale [5%] - Amount to scale up or down. 33 | /// @param {percentage} $threshold [40%] - Threshold of lightness to check against. 34 | /// 35 | /// @returns {Color} A scaled color. 36 | @function smart-scale($color, $scale: 5%, $threshold: 40%) { 37 | @if lightness($color) > $threshold { 38 | $scale: -$scale; 39 | } 40 | @return scale-color($color, $lightness: $scale); 41 | } 42 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/forms/_input-group.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group forms 7 | //// 8 | 9 | /// Color of labels prefixed to an input. 10 | /// @type Color 11 | $input-prefix-color: $black !default; 12 | 13 | /// Background color of labels prefixed to an input. 14 | /// @type Color 15 | $input-prefix-background: $light-gray !default; 16 | 17 | /// Border around labels prefixed to an input. 18 | /// @type Border 19 | $input-prefix-border: 1px solid $medium-gray !default; 20 | 21 | /// Left/right padding of an pre/postfixed input label 22 | $input-prefix-padding: 1rem !default; 23 | 24 | @mixin foundation-form-prepostfix { 25 | .input-group { 26 | display: table; 27 | width: 100%; 28 | margin-bottom: $form-spacing; 29 | } 30 | 31 | %input-group-child { 32 | display: table-cell; 33 | margin: 0; 34 | vertical-align: middle; 35 | } 36 | 37 | .input-group-label { 38 | @extend %input-group-child; 39 | text-align: center; 40 | width: 1%; 41 | height: 100%; 42 | padding: 0 $input-prefix-padding; 43 | background: $input-prefix-background; 44 | color: $input-prefix-color; 45 | border: $input-prefix-border; 46 | 47 | @if hasvalue($input-prefix-border) { 48 | &:first-child { 49 | border-#{$global-right}: 0; 50 | } 51 | 52 | &:last-child { 53 | border-#{$global-left}: 0; 54 | } 55 | } 56 | } 57 | 58 | .input-group-field { 59 | @extend %input-group-child; 60 | } 61 | 62 | .input-group-button { 63 | @extend %input-group-child; 64 | height: 100%; 65 | padding-top: 0; 66 | padding-bottom: 0; 67 | text-align: center; 68 | width: 1%; 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/forms/_select.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group forms 7 | //// 8 | 9 | /// Background color for select menus. 10 | /// @type Color 11 | $select-background: #fafafa !default; 12 | 13 | /// Color of the dropdown triangle inside select menus. Set to `transparent` to remove it entirely. 14 | /// @type Color 15 | $select-triangle-color: #333 !default; 16 | 17 | /// Default radius for select menus. 18 | /// @type Color 19 | $select-radius: $global-radius !default; 20 | 21 | @mixin form-select { 22 | $height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1)); 23 | 24 | height: $height; 25 | padding: ($form-spacing / 2); 26 | border: $input-border; 27 | border-radius: $global-radius; 28 | margin: 0 0 $form-spacing; 29 | font-size: $input-font-size; 30 | font-family: $input-font-family; 31 | line-height: normal; 32 | color: $input-color; 33 | background-color: $select-background; 34 | border-radius: $select-radius; 35 | -webkit-appearance: none; 36 | -moz-appearance: none; 37 | 38 | @if $select-triangle-color != transparent { 39 | @include background-triangle($select-triangle-color); 40 | background-size: 9px 6px; 41 | background-position: $global-right ($form-spacing / 2) center; 42 | background-repeat: no-repeat; 43 | } 44 | // Disabled state 45 | &:disabled { 46 | background-color: $input-background-disabled; 47 | cursor: $input-cursor-disabled; 48 | } 49 | 50 | // Hide the dropdown arrow shown in newer IE versions 51 | &::-ms-expand { 52 | display: none; 53 | } 54 | 55 | &[multiple] { 56 | height: auto; 57 | } 58 | } 59 | 60 | @mixin foundation-form-select { 61 | select { 62 | @include form-select; 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/components/_drilldown.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group drilldown 7 | //// 8 | 9 | /// Transition property to use for animating menus. 10 | /// @type Transition 11 | $drilldown-transition: transform 0.15s linear !default; 12 | 13 | /// Adds arrows to drilldown items with submenus, as well as the back button. 14 | /// @type Boolean 15 | $drilldown-arrows: true; 16 | 17 | @mixin foundation-drilldown-menu { 18 | // Applied to the Menu container 19 | .is-drilldown { 20 | position: relative; 21 | overflow: hidden; 22 | } 23 | 24 | // Applied to nested
    s 25 | .is-drilldown-sub { 26 | position: absolute; 27 | top: 0; 28 | left: 100%; 29 | z-index: -1; 30 | height: 100%; 31 | width: 100%; 32 | background: $white; 33 | transition: $drilldown-transition; 34 | 35 | &.is-active { 36 | z-index: 1; 37 | display: block; 38 | transform: translateX(-100%); 39 | } 40 | 41 | &.is-closing { 42 | transform: translateX(100%); 43 | } 44 | } 45 | 46 | @if $drilldown-arrows { 47 | .is-drilldown-submenu-parent > a { 48 | position: relative; 49 | 50 | &::after { 51 | @include css-triangle(6px, $primary-color, right); 52 | position: absolute; 53 | top: 50%; 54 | margin-top: -6px; 55 | right: 1rem; 56 | } 57 | } 58 | 59 | .js-drilldown-back::before { 60 | @include css-triangle(6px, $primary-color, left); 61 | float: left; 62 | margin-right: 0.75rem; // Creates space between the arrow and the text 63 | margin-left: 0.6rem; // Lines the tip of the arrow with the items below 64 | margin-top: 14px; // Aligns the arrow with the text 65 | } 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/components/_close-button.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group close-button 7 | //// 8 | 9 | /// Default position of the close button. The first value should be `right` or `left`, and the second value should be `top` or `bottom`. 10 | /// @type List 11 | $closebutton-position: right top !default; 12 | 13 | /// Right (or left) offset for a close button. 14 | /// @type Number 15 | $closebutton-offset-horizontal: 1rem !default; 16 | 17 | /// Top (or bottom) offset for a close button. 18 | /// @type Number 19 | $closebutton-offset-vertical: 0.5rem !default; 20 | 21 | /// Default font size of the close button. 22 | /// @type Number 23 | $closebutton-size: 2em !default; 24 | 25 | /// The line-height of the close button. It affects the spacing of the element. 26 | /// @type Number 27 | $closebutton-lineheight: 1 !default; 28 | 29 | /// Default color of the close button. 30 | /// @type Color 31 | $closebutton-color: $dark-gray !default; 32 | 33 | /// Default color of the close button when being hovered on. 34 | /// @type Color 35 | $closebutton-color-hover: $black !default; 36 | 37 | /// Adds styles for a close button, using the styles in the settings variables. 38 | @mixin close-button { 39 | $x: nth($closebutton-position, 1); 40 | $y: nth($closebutton-position, 2); 41 | 42 | @include disable-mouse-outline; 43 | position: absolute; 44 | color: $closebutton-color; 45 | #{$x}: $closebutton-offset-horizontal; 46 | #{$y}: $closebutton-offset-vertical; 47 | font-size: $closebutton-size; 48 | line-height: $closebutton-lineheight; 49 | cursor: pointer; 50 | 51 | &:hover, 52 | &:focus { 53 | color: $closebutton-color-hover; 54 | } 55 | } 56 | 57 | @mixin foundation-close-button { 58 | .close-button { 59 | @include close-button; 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/motion-ui/transitions/_hinge.scss: -------------------------------------------------------------------------------- 1 | /// Creates a hinge transition by rotating the element. 2 | /// @param {Keyword} $state [in] - State to transition to. 3 | /// @param {Keyword} $from [left] - Edge of the element to rotate from. Can be `top`, `right`, `bottom`, or `left`. 4 | /// @param {Keyword} $axis [edge] - Axis of the element to rotate on. Can be `edge` or `center`. 5 | /// @param {Length} $perspective [2000px] - Perceived distance between the viewer and the element. A higher number will make the rotation effect more pronounced. 6 | /// @param {Keyword} $turn-origin [from-back] - Side of the element to start the rotation from. Can be `from-back` or `from-front`. 7 | /// @param {Boolean} $fade [true] - Set to `true` to fade the element in or out simultaneously. 8 | /// @param {Duration} $duration [null] - Length (speed) of the transition. 9 | /// @param {Keyword|Function} $timing [null] - Easing of the transition. 10 | /// @param {Duration} $delay [null] - Delay in seconds or milliseconds before the transition starts. 11 | @mixin mui-hinge ( 12 | $state: in, 13 | $from: left, 14 | $axis: edge, 15 | $perspective: 2000px, 16 | $turn-origin: from-back, 17 | $fade: map-get($motion-ui-settings, hinge-and-fade), 18 | $duration: null, 19 | $timing: null, 20 | $delay: null 21 | ) { 22 | $hinge: hinge($state, $from, $axis, $perspective, $turn-origin); 23 | 24 | @include transition-start($state) { 25 | @include transition-basics($duration, $timing, $delay); 26 | @include -mui-keyframe-get($hinge, 0); 27 | 28 | @if $fade { 29 | transition-property: transform, opacity; 30 | opacity: if($state == in, 0, 1); 31 | } @else { 32 | transition-property: transform, opacity; 33 | } 34 | } 35 | 36 | @include transition-end($state) { 37 | @include -mui-keyframe-get($hinge, 100); 38 | 39 | @if $fade { 40 | opacity: if($state == in, 1, 0); 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /public/stylesheets/foundation6/components/_flex-video.scss: -------------------------------------------------------------------------------- 1 | // Foundation for Sites by ZURB 2 | // foundation.zurb.com 3 | // Licensed under MIT Open Source 4 | 5 | //// 6 | /// @group flex-video 7 | //// 8 | 9 | /// Padding above a flex video container. 10 | /// @type Number 11 | $flexvideo-padding-top: rem-calc(25) !default; 12 | 13 | /// Margin below a flex video container. 14 | /// @type Number 15 | $flexvideo-margin-bottom: rem-calc(16) !default; 16 | 17 | /// Padding used to create a 4:3 aspect ratio. 18 | /// @type Number 19 | $flexvideo-ratio: 4 by 3 !default; 20 | 21 | /// Padding used to create a 16:9 aspect ratio. 22 | /// @type Number 23 | $flexvideo-ratio-widescreen: 16 by 9 !default; 24 | 25 | /// Creates a percentage height that can be used as padding in a flex video container. 26 | /// @param {List} $ratio - Ratio to use to calculate the height, formatted as `x by y`. 27 | /// @return {Number} A percentage value that can be used as the `padding-bottom` parameter of a flex video container. 28 | @function flex-video($ratio) { 29 | $w: nth($ratio, 1); 30 | $h: nth($ratio, 3); 31 | @return $h / $w * 100%; 32 | } 33 | 34 | /// Creates a flex video container. 35 | /// @param {List} $ratio [$flexvideo-ratio] - Ratio to use for the container, formatted as `x by y`. 36 | @mixin flex-video($ratio: $flexvideo-ratio) { 37 | position: relative; 38 | height: 0; 39 | padding-top: $flexvideo-padding-top; 40 | padding-bottom: flex-video($ratio); 41 | margin-bottom: $flexvideo-margin-bottom; 42 | overflow: hidden; 43 | 44 | iframe, 45 | object, 46 | embed, 47 | video { 48 | position: absolute; 49 | top: 0; 50 | #{$global-left}: 0; 51 | width: 100%; 52 | height: 100%; 53 | } 54 | } 55 | 56 | @mixin foundation-flex-video { 57 | .flex-video { 58 | @include flex-video; 59 | 60 | &.widescreen { 61 | padding-bottom: flex-video($flexvideo-ratio-widescreen); 62 | } 63 | 64 | &.vimeo { 65 | padding-top: 0; 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /config/metafields_schema.yml: -------------------------------------------------------------------------------- 1 | # Site metafield schema 2 | # 3 | # Syntax: 4 | # 5 | # : # no empty spaces, only digits and underscores 6 | # label: # used as the label of a tab in the back-office 7 | # # label: # if you want to provide the label in another language (back-office) 8 | # # en: 9 | # # fr: 10 | # position: <0..n> # position of the tab in the menu 11 | # fields: 12 | # : 13 | # label: # used as the label of the HTML input. Use a hash if you want it in another languages. 14 | # hint: # used as the hint of the HTML input. Use a hash if you want it in another languages. 15 | # type: 16 | # localized: # if the value is scoped by the current locale when rendering the site. 17 | # position: <0..n> # position of the input in the form 18 | # select_options: [array] 19 | # # select_options: 20 | # # :