Import of the new theme
This commit is contained in:
parent
04104f0bff
commit
0693a85c3f
331 changed files with 21077 additions and 8782 deletions
18
404.md
18
404.md
|
|
@ -1,18 +0,0 @@
|
|||
---
|
||||
layout: page
|
||||
title: "Page Not Found"
|
||||
description: "Page not found. Your pixels are in another canvas."
|
||||
comments: false
|
||||
share: false
|
||||
permalink: /404.html
|
||||
---
|
||||
|
||||
Sorry, but the page you were trying to view does not exist --- perhaps you can try searching for it below.
|
||||
|
||||
<script type="text/javascript">
|
||||
var GOOG_FIXURL_LANG = 'en';
|
||||
var GOOG_FIXURL_SITE = '{{ site.url }}'
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="//linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js">
|
||||
</script>
|
||||
10
Gemfile
10
Gemfile
|
|
@ -1,10 +0,0 @@
|
|||
source 'https://rubygems.org'
|
||||
|
||||
gem 'jekyll'
|
||||
gem 'sass'
|
||||
gem 'octopress', '~> 3.0.0.rc.12'
|
||||
gem 'jekyll-sitemap'
|
||||
gem 'jekyll-picture-tag', '~> 0.2.3'
|
||||
gem 'jekyll-tagging'
|
||||
gem 'atom-tools'
|
||||
gem 'nokogiri'
|
||||
116
Gemfile.lock
116
Gemfile.lock
|
|
@ -1,116 +0,0 @@
|
|||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
addressable (2.3.8)
|
||||
atom-tools (2.0.5)
|
||||
blankslate (2.1.2.4)
|
||||
celluloid (0.16.0)
|
||||
timers (~> 4.0.0)
|
||||
classifier-reborn (2.0.3)
|
||||
fast-stemmer (~> 1.0)
|
||||
coffee-script (2.3.0)
|
||||
coffee-script-source
|
||||
execjs
|
||||
coffee-script-source (1.9.1)
|
||||
colorator (0.1)
|
||||
execjs (2.3.0)
|
||||
fast-stemmer (1.0.2)
|
||||
fastimage (1.6.8)
|
||||
addressable (~> 2.3, >= 2.3.5)
|
||||
ffi (1.9.6)
|
||||
ffi (1.9.6-x64-mingw32)
|
||||
ffi (1.9.6-x86-mingw32)
|
||||
hitimes (1.2.2)
|
||||
hitimes (1.2.2-x86-mingw32)
|
||||
jekyll (2.5.3)
|
||||
classifier-reborn (~> 2.0)
|
||||
colorator (~> 0.1)
|
||||
jekyll-coffeescript (~> 1.0)
|
||||
jekyll-gist (~> 1.0)
|
||||
jekyll-paginate (~> 1.0)
|
||||
jekyll-sass-converter (~> 1.0)
|
||||
jekyll-watch (~> 1.1)
|
||||
kramdown (~> 1.3)
|
||||
liquid (~> 2.6.1)
|
||||
mercenary (~> 0.3.3)
|
||||
pygments.rb (~> 0.6.0)
|
||||
redcarpet (~> 3.1)
|
||||
safe_yaml (~> 1.0)
|
||||
toml (~> 0.1.0)
|
||||
jekyll-coffeescript (1.0.1)
|
||||
coffee-script (~> 2.2)
|
||||
jekyll-gist (1.1.0)
|
||||
jekyll-paginate (1.1.0)
|
||||
jekyll-picture-tag (0.2.3)
|
||||
fastimage (~> 1.6.4)
|
||||
jekyll (< 3)
|
||||
mini_magick (~> 3.8.0)
|
||||
jekyll-sass-converter (1.3.0)
|
||||
sass (~> 3.2)
|
||||
jekyll-sitemap (0.8.0)
|
||||
jekyll-tagging (0.6.0)
|
||||
ruby-nuggets
|
||||
jekyll-watch (1.2.1)
|
||||
listen (~> 2.7)
|
||||
kramdown (1.6.0)
|
||||
liquid (2.6.2)
|
||||
listen (2.8.5)
|
||||
celluloid (>= 0.15.2)
|
||||
rb-fsevent (>= 0.9.3)
|
||||
rb-inotify (>= 0.9)
|
||||
mercenary (0.3.5)
|
||||
mini_magick (3.8.1)
|
||||
subexec (~> 0.2.1)
|
||||
mini_portile (0.6.2)
|
||||
nokogiri (1.6.6.2)
|
||||
mini_portile (~> 0.6.0)
|
||||
nuggets (1.0.0)
|
||||
octopress (3.0.0.rc.34)
|
||||
jekyll (~> 2.0)
|
||||
mercenary (~> 0.3.2)
|
||||
octopress-deploy
|
||||
octopress-escape-code (~> 2.0)
|
||||
octopress-hooks (~> 2.0)
|
||||
titlecase
|
||||
octopress-deploy (1.1.0)
|
||||
colorator
|
||||
octopress-escape-code (2.0.6)
|
||||
octopress-hooks (~> 2.0)
|
||||
octopress-hooks (2.6.0)
|
||||
jekyll (~> 2.0)
|
||||
parslet (1.5.0)
|
||||
blankslate (~> 2.0)
|
||||
posix-spawn (0.3.10)
|
||||
pygments.rb (0.6.2)
|
||||
posix-spawn (~> 0.3.6)
|
||||
yajl-ruby (~> 1.2.0)
|
||||
rb-fsevent (0.9.4)
|
||||
rb-inotify (0.9.5)
|
||||
ffi (>= 0.5.0)
|
||||
redcarpet (3.2.2)
|
||||
ruby-nuggets (1.0.0)
|
||||
nuggets (= 1.0.0)
|
||||
safe_yaml (1.0.4)
|
||||
sass (3.4.13)
|
||||
subexec (0.2.3)
|
||||
timers (4.0.1)
|
||||
hitimes
|
||||
titlecase (0.1.1)
|
||||
toml (0.1.2)
|
||||
parslet (~> 1.5.0)
|
||||
yajl-ruby (1.2.1)
|
||||
|
||||
PLATFORMS
|
||||
ruby
|
||||
x64-mingw32
|
||||
x86-mingw32
|
||||
|
||||
DEPENDENCIES
|
||||
atom-tools
|
||||
jekyll
|
||||
jekyll-picture-tag (~> 0.2.3)
|
||||
jekyll-sitemap
|
||||
jekyll-tagging
|
||||
nokogiri
|
||||
octopress (~> 3.0.0.rc.12)
|
||||
sass
|
||||
84
Gruntfile.js
84
Gruntfile.js
|
|
@ -1,84 +0,0 @@
|
|||
'use strict';
|
||||
module.exports = function(grunt) {
|
||||
|
||||
grunt.initConfig({
|
||||
jshint: {
|
||||
options: {
|
||||
jshintrc: '.jshintrc'
|
||||
},
|
||||
all: [
|
||||
'Gruntfile.js',
|
||||
'assets/js/*.js',
|
||||
'assets/js/plugins/*.js',
|
||||
'!assets/js/scripts.min.js'
|
||||
]
|
||||
},
|
||||
uglify: {
|
||||
dist: {
|
||||
files: {
|
||||
'assets/js/scripts.min.js': [
|
||||
'assets/js/plugins/*.js',
|
||||
'assets/js/_*.js'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
imagemin: {
|
||||
dist: {
|
||||
options: {
|
||||
optimizationLevel: 7,
|
||||
progressive: true
|
||||
},
|
||||
files: [{
|
||||
expand: true,
|
||||
cwd: 'images/',
|
||||
src: '{,*/}*.{png,jpg,jpeg}',
|
||||
dest: 'images/'
|
||||
}]
|
||||
}
|
||||
},
|
||||
svgmin: {
|
||||
dist: {
|
||||
files: [{
|
||||
expand: true,
|
||||
cwd: 'images/',
|
||||
src: '{,*/}*.svg',
|
||||
dest: 'images/'
|
||||
}]
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
js: {
|
||||
files: [
|
||||
'<%= jshint.all %>'
|
||||
],
|
||||
tasks: ['jshint','uglify']
|
||||
}
|
||||
},
|
||||
clean: {
|
||||
dist: [
|
||||
'assets/js/scripts.min.js'
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
// Load tasks
|
||||
grunt.loadNpmTasks('grunt-contrib-clean');
|
||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
grunt.loadNpmTasks('grunt-contrib-watch');
|
||||
grunt.loadNpmTasks('grunt-contrib-imagemin');
|
||||
grunt.loadNpmTasks('grunt-svgmin');
|
||||
|
||||
// Register tasks
|
||||
grunt.registerTask('default', [
|
||||
'clean',
|
||||
'uglify',
|
||||
'imagemin',
|
||||
'svgmin'
|
||||
]);
|
||||
grunt.registerTask('dev', [
|
||||
'watch'
|
||||
]);
|
||||
|
||||
};
|
||||
21
LICENSE
21
LICENSE
|
|
@ -1,21 +0,0 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2014 Michael Rose
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
25
README.md
25
README.md
|
|
@ -1,25 +0,0 @@
|
|||
# HPSTR Jekyll Theme
|
||||
|
||||
They say three times the charm, so here is another free responsive Jekyll theme for you. I've learned a ton since open sourcing [my first two themes](https://mademistakes.com/work/jekyll-themes/), and wanted to try a few new things this time around. If you've used my previous themes most of this should be familiar territory.
|
||||
|
||||
## What HPSTR brings to the table:
|
||||
|
||||
* Modern and minimal design.
|
||||
* Responsive templates for post, page, and post index `_layouts`. Looks great on mobile, tablet, and desktop devices.
|
||||
* Gracefully degrades in older browsers. Compatible with Internet Explorer 8+ and all modern browsers.
|
||||
* Sweet animated menu with support for drop-downs.
|
||||
* Optional [Disqus](http://disqus.com) comments and social sharing links.
|
||||
* [Open Graph](https://developers.facebook.com/docs/opengraph/) and [Twitter Cards](https://dev.twitter.com/docs/cards) support for a better social sharing experience.
|
||||
* Simple [custom 404 page](http://mmistakes.github.io/hpstr-jekyll-theme/404.html) to get you started.
|
||||
* Stylesheets for Pygments and Coderay [syntax highlighting](http://mmistakes.github.io/hpstr-jekyll-theme/code-highlighting-post/) to make your code examples look snazzy
|
||||
* [Available in Spanish](https://github.com/cruznick/hpstr-jekyll-theme/tree/es). Thanks [@cruznick](https://github.com/cruznick)!
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Getting Started
|
||||
|
||||
HPSTR takes advantage of Sass and data files to make customizing easier. These features require Jekyll 2.x and will not work with older versions of Jekyll.
|
||||
|
||||
To learn how to install and use this theme check out the [Setup Guide](https://mmistakes.github.io/hpstr-jekyll-theme/theme-setup/) for more information.
|
||||
89
Rakefile.rb
89
Rakefile.rb
|
|
@ -1,89 +0,0 @@
|
|||
require "rubygems"
|
||||
require "bundler/setup"
|
||||
require "stringex"
|
||||
|
||||
## -- Config -- ##
|
||||
|
||||
public_dir = "public" # compiled site directory
|
||||
posts_dir = "_posts" # directory for blog files
|
||||
new_post_ext = "md" # default new post file extension when using the new_post task
|
||||
new_page_ext = "md" # default new page file extension when using the new_page task
|
||||
|
||||
|
||||
#############################
|
||||
# Create a new Post or Page #
|
||||
#############################
|
||||
|
||||
# usage rake new_post
|
||||
desc "Create a new post in #{posts_dir}"
|
||||
task :new_post, :title do |t, args|
|
||||
if args.title
|
||||
title = args.title
|
||||
else
|
||||
title = get_stdin("Enter a title for your post: ")
|
||||
end
|
||||
filename = "#{posts_dir}/#{Time.now.strftime('%Y-%m-%d')}-#{title.to_url}.#{new_post_ext}"
|
||||
if File.exist?(filename)
|
||||
abort("rake aborted!") if ask("#{filename} already exists. Do you want to overwrite?", ['y', 'n']) == 'n'
|
||||
end
|
||||
tags = get_stdin("Enter tags to classify your post (comma separated): ")
|
||||
puts "Creating new post: #{filename}"
|
||||
open(filename, 'w') do |post|
|
||||
post.puts "---"
|
||||
post.puts "layout: post"
|
||||
post.puts "title: \"#{title.gsub(/&/,'&')}\""
|
||||
post.puts "modified: #{Time.now.strftime('%Y-%m-%d %H:%M:%S %z')}"
|
||||
post.puts "tags: [#{tags}]"
|
||||
post.puts "image:"
|
||||
post.puts " feature: "
|
||||
post.puts " credit: "
|
||||
post.puts " creditlink: "
|
||||
post.puts "comments: "
|
||||
post.puts "share: "
|
||||
post.puts "---"
|
||||
end
|
||||
end
|
||||
|
||||
# usage rake new_page
|
||||
desc "Create a new page"
|
||||
task :new_page, :title do |t, args|
|
||||
if args.title
|
||||
title = args.title
|
||||
else
|
||||
title = get_stdin("Enter a title for your page: ")
|
||||
end
|
||||
filename = "#{title.to_url}.#{new_page_ext}"
|
||||
if File.exist?(filename)
|
||||
abort("rake aborted!") if ask("#{filename} already exists. Do you want to overwrite?", ['y', 'n']) == 'n'
|
||||
end
|
||||
tags = get_stdin("Enter tags to classify your page (comma separated): ")
|
||||
puts "Creating new page: #{filename}"
|
||||
open(filename, 'w') do |page|
|
||||
page.puts "---"
|
||||
page.puts "layout: page"
|
||||
page.puts "permalink: /#{title.to_url}/"
|
||||
page.puts "title: \"#{title}\""
|
||||
page.puts "modified: #{Time.now.strftime('%Y-%m-%d %H:%M')}"
|
||||
page.puts "tags: [#{tags}]"
|
||||
page.puts "image:"
|
||||
page.puts " feature: "
|
||||
page.puts " credit: "
|
||||
page.puts " creditlink: "
|
||||
page.puts "share: "
|
||||
page.puts "---"
|
||||
end
|
||||
end
|
||||
|
||||
def get_stdin(message)
|
||||
print message
|
||||
STDIN.gets.chomp
|
||||
end
|
||||
|
||||
def ask(message, valid_options)
|
||||
if valid_options
|
||||
answer = get_stdin("#{message} #{valid_options.to_s.gsub(/"/, '').gsub(/, /,'/')} ") while !valid_options.include?(answer)
|
||||
else
|
||||
answer = get_stdin(message)
|
||||
end
|
||||
answer
|
||||
end
|
||||
9
_data/authors.yml
Normal file
9
_data/authors.yml
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
# Author details
|
||||
#
|
||||
# 1. Edit information below
|
||||
# 2. Change author in default settings in config.yml
|
||||
#
|
||||
# Ressource › http://blog.sorryapp.com/blogging-with-jekyll/2014/02/06/adding-authors-to-your-jekyll-site.html
|
||||
your_author_name:
|
||||
name: "Moritz »mo.« Sauer"
|
||||
url: http://mo.phlow.de/
|
||||
24
_data/language.yml
Normal file
24
_data/language.yml
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
info_website: "About This Site"
|
||||
archive: "Archive"
|
||||
blog_archive: "Blog Archive"
|
||||
blog: "Blog"
|
||||
comments_headline: "Dialogue & Discussion"
|
||||
more: "More ›"
|
||||
more_articles: "More Articles"
|
||||
navigation_title: "Navigation"
|
||||
new_blog_entries: "New Blog Articles"
|
||||
next: "Next"
|
||||
next_posts: "Next Posts"
|
||||
previous: "Previous"
|
||||
previous_posts: "Previous Posts"
|
||||
read: "Read"
|
||||
read_more: "Read More ›"
|
||||
if_you_are_not_redirected_automatically: "If you are not redirected automatically,"
|
||||
click_here: "click here"
|
||||
next_post_in: "Next Post in"
|
||||
previous_post_in: "Previous Post in"
|
||||
breadcrumb_start: "Start"
|
||||
edit: "Edit"
|
||||
this_content_is_open_source: "This content is open source."
|
||||
help_improve_it: "Help improve it"
|
||||
enter_search_term: "Enter search term and hit enter"
|
||||
24
_data/language_de.yml
Normal file
24
_data/language_de.yml
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
info_website: "Über diese Website"
|
||||
archive: "Archiv"
|
||||
blog_archive: "Blog Archiv"
|
||||
blog: "Blog"
|
||||
comments_headline: "Dialog & Diskussion"
|
||||
more: "Mehr ›"
|
||||
more_articles: "Mehr Artikel"
|
||||
navigation_title: "Navigation"
|
||||
new_blog_entries: "Neue Blog Artikel"
|
||||
next: "Nächste"
|
||||
next_posts: "Nächster Beitrag"
|
||||
previous: "Vorherige"
|
||||
previous_posts: "Vorheriger Beitrag"
|
||||
read: "Lesen"
|
||||
read_more: "Mehr lesen ›"
|
||||
if_you_are_not_redirected_automatically: "Wenn Du nicht automatisch weitergeleitet wirst,"
|
||||
click_here: "klick hier"
|
||||
next_post_in: "Nächster Beitrag in"
|
||||
previous_post_in: "Vorheriger Beitrag in"
|
||||
breadcrumb_start: "Start"
|
||||
edit: "Editieren"
|
||||
this_content_is_open_source: "Der Inhalt ist Open Source."
|
||||
help_improve_it: "Hilf ihn zu verbessern"
|
||||
enter_search_term: "Suchbegriff eingeben und Eingabetaste drücken"
|
||||
|
|
@ -1,8 +1,79 @@
|
|||
# Menu navigation links
|
||||
- title: Start
|
||||
url: "/"
|
||||
side: left
|
||||
|
||||
- title: Projects
|
||||
url: /projects/
|
||||
- title: Danbooru Client
|
||||
url: /projects/danbooru-client/
|
||||
- title: KDE VLC Snapper
|
||||
url: /projects/kde-vlc-snapper/
|
||||
- title: Getting Started
|
||||
url: "/getting-started/"
|
||||
side: left
|
||||
|
||||
- title: "Templates"
|
||||
url: "/design/"
|
||||
side: left
|
||||
dropdown:
|
||||
- title: "Grid & Colors"
|
||||
url: "/design/grid/"
|
||||
- title: "Typography"
|
||||
url: "/design/typography/"
|
||||
- title: "Page/Post"
|
||||
url: "/design/page/"
|
||||
- title: "Post-Left-Sidebar"
|
||||
url: "/design/post-left-sidebar/"
|
||||
- title: "Post-Right-Sidebar"
|
||||
url: "/design/post-right-sidebar/"
|
||||
- title: "Page Full-Width"
|
||||
url: "/design/page-fullwidth/"
|
||||
- title: "Blog-Page"
|
||||
url: "/blog/"
|
||||
- title: "Video"
|
||||
url: "/design/video/"
|
||||
- title: "Gallery"
|
||||
url: "/design/gallery/"
|
||||
- title: "Portfolio"
|
||||
url: "/design/portfolio/"
|
||||
|
||||
- title: "Header Styles"
|
||||
url: "/headers/"
|
||||
side: left
|
||||
dropdown:
|
||||
- title: "Header with Full-Width-Image"
|
||||
url: "/design/header-full-width-image/"
|
||||
- title: "Header with Image and Pattern"
|
||||
url: "/design/header-image-pattern/"
|
||||
- title: "Header with image and color"
|
||||
url: "/design/header-image-color/"
|
||||
- title: "Header Only With Logo"
|
||||
url: "/design/header-logo-only/"
|
||||
- title: "Header With Text"
|
||||
url: "/design/header-with-text/"
|
||||
- title: "No Header"
|
||||
url: "/design/no-header/"
|
||||
- title: "No Header but Image"
|
||||
url: "/design/no-header-but-image/"
|
||||
|
||||
- title: Documentation
|
||||
url: "/documentation/"
|
||||
side: left
|
||||
dropdown:
|
||||
- title: Documentation
|
||||
url: "/documentation/"
|
||||
- title: "Changelog"
|
||||
url: "/changelog/"
|
||||
- title: "Roadmap"
|
||||
url: "/roadmap/"
|
||||
|
||||
- title: Blog
|
||||
url: "/blog/"
|
||||
side: left
|
||||
dropdown:
|
||||
- title: Blog
|
||||
url: "/blog/"
|
||||
- title: "Blog Archive"
|
||||
url: "/blog/archive/"
|
||||
|
||||
- title: "Search"
|
||||
url: "/search/"
|
||||
side: right
|
||||
|
||||
- title: "Contact"
|
||||
url: "/contact/"
|
||||
side: right
|
||||
|
|
|
|||
21
_data/network.yml
Normal file
21
_data/network.yml
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
- menu_name: "Dankeschön"
|
||||
|
||||
- name: "Icons by Daniel Bruce"
|
||||
url: "http://entypo.com/"
|
||||
class: "network-entypo"
|
||||
title: "Icons by Daniel Bruce"
|
||||
|
||||
- name: "Built on Foundation"
|
||||
url: "http://foundation.zurb.com/"
|
||||
class: "services-newsletter"
|
||||
title: "Built on Foundation"
|
||||
|
||||
- name: "Images by Unsplash"
|
||||
url: "http://unsplash.com/"
|
||||
class: "rss-link"
|
||||
title: "Images by Unsplash"
|
||||
|
||||
- name: "Using Backstretch by Scott Robbin"
|
||||
url: "http://srobbin.com/jquery-plugins/backstretch/"
|
||||
class: "sitemap-link"
|
||||
title: "Using Backstretch by Scott Robbin"
|
||||
16
_data/services.yml
Normal file
16
_data/services.yml
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
- menu_name: "Services"
|
||||
|
||||
- name: "Contact"
|
||||
url: "/contact/"
|
||||
class: "services-contact"
|
||||
title: "Contact"
|
||||
|
||||
- name: "RSS"
|
||||
url: "/feed.xml"
|
||||
class: "rss-link"
|
||||
title: "Subscribe to RSS"
|
||||
|
||||
- name: "sitemap.xml"
|
||||
url: "/sitemap.xml"
|
||||
class: "sitemap-link"
|
||||
title: "Sitemap for Google Webmastertools"
|
||||
44
_data/socialmedia.yml
Normal file
44
_data/socialmedia.yml
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
- name: YouTube
|
||||
url: http://www.youtube.com/PhlowMedia
|
||||
class: icon-youtube
|
||||
title: "Videos, Video-Anleitungen und Filme von Phlow auf YouTube"
|
||||
|
||||
- name: Twitter
|
||||
url: http://twitter.com/phlow
|
||||
class: icon-twitter
|
||||
title: "Immer das Neuste von Phlow gibt es auf Twitter"
|
||||
|
||||
- name: Facebook
|
||||
url: http://www.facebook.com/phlow.media
|
||||
class: icon-facebook
|
||||
title: "Lass uns Freunde sein!"
|
||||
|
||||
- name: Soundcloud
|
||||
url: http://soundcloud.com/phlow
|
||||
class: icon-soundcloud
|
||||
title: "Sounds und Downloads und mehr"
|
||||
|
||||
- name: GitHub
|
||||
url: http://github.com/phlow
|
||||
class: icon-github
|
||||
title: Code und mehr...
|
||||
|
||||
- name: Instagram
|
||||
url: http://instagram.com/phlowmedia
|
||||
class: icon-instagram
|
||||
title: "Bilder und Impressionen mit und ohne Filter..."
|
||||
|
||||
- name: Pinterest
|
||||
url: http://www.pinterest.com/phlowmedia/
|
||||
class: icon-pinterest
|
||||
title: "Bilder, Fotos, Illustrationen, Grafiken sammeln..."
|
||||
|
||||
- name: Mixcloud
|
||||
url: http://www.mixcloud.com/phlow/
|
||||
class: icon-cloud
|
||||
title: "Mixe, was sonst?"
|
||||
|
||||
# - name: Xing
|
||||
# url: https://www.xing.com/profile/Moritzmo_Sauer
|
||||
# class: icon-xing
|
||||
# title: Xing Profil
|
||||
33
_includes/alert
Normal file
33
_includes/alert
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
{% comment %}
|
||||
*
|
||||
* This include lets you easily display an alert.
|
||||
* To use the include no `.html` ending is necessary.
|
||||
* You can use five different kinds of alerts:
|
||||
*
|
||||
* - warning
|
||||
* - info
|
||||
* - success
|
||||
* - alert
|
||||
* - text
|
||||
*
|
||||
* You can even use <html>-tags inside the alert. Beware:
|
||||
* Use " and ' properly.
|
||||
*
|
||||
* Example: {% include alert info='Show an info alert with outstanding information' %}
|
||||
*
|
||||
{% endcomment %}
|
||||
|
||||
|
||||
{% if include.warning %}
|
||||
<div class="alert-box warning radius">{{ include.warning }}</div>
|
||||
{% elsif include.info %}
|
||||
<div class="alert-box info radius">{{ include.info }}</div>
|
||||
{% elsif include.success %}
|
||||
<div class="alert-box success radius">{{ include.success }}</div>
|
||||
{% elsif include.alert %}
|
||||
<div class="alert-box alert radius">{{ include.alert }}</div>
|
||||
{% elsif include.text %}
|
||||
<div class="alert-box text radius">{{ include.text }}</div>
|
||||
{% elsif include.terminal %}
|
||||
<div class="alert-box terminal radius">{{ include.terminal }}</div>
|
||||
{% endif %}
|
||||
17
_includes/breadcrumb.html
Normal file
17
_includes/breadcrumb.html
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{% comment %}
|
||||
*
|
||||
* http://stackoverflow.com/questions/9612235/what-are-some-good-ways-to-implement-breadcrumbs-on-a-jekyll-site
|
||||
*
|
||||
{% endcomment %}
|
||||
|
||||
<nav class="breadcrumbs" role="menubar" aria-label="breadcrumbs">
|
||||
<li><a href="{{ site.url }}">{{ site.data.language.breadcrumb_start }}</a></li>
|
||||
{% assign crumbs = page.url | split: '/' %}
|
||||
{% for crumb in crumbs offset: 1 %}
|
||||
{% if forloop.last %}
|
||||
<li class="current">{{ page.title }}</li>
|
||||
{% else %}
|
||||
<li><a href="{{ site.url }}{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' }}{% endfor %}">{{ crumb | replace:'-',' ' }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</nav>
|
||||
|
|
@ -1 +0,0 @@
|
|||
<!--[if lt IE 9]><div class="upgrade"><strong><a href="http://whatbrowser.org/">Your browser is quite old!</strong> Why not upgrade to a different browser to better enjoy this site?</a></div><![endif]-->
|
||||
20
_includes/comments.html
Normal file
20
_includes/comments.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{% if page.comments %}
|
||||
<h3 id="comments" class="t60">{{ site.data.language.comments_headline }}</h3>
|
||||
|
||||
<div id="disqus_thread"></div>
|
||||
<script type="text/javascript">
|
||||
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
|
||||
var disqus_shortname = '{{ site.disqus_shortname }}';
|
||||
var disqus_identifier = '{{ page.url }}';
|
||||
|
||||
/* * * DON'T EDIT BELOW THIS LINE * * */
|
||||
(function() {
|
||||
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
||||
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
|
||||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
||||
})();
|
||||
</script>
|
||||
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
{% if site.disqus_shortname %}
|
||||
<script type="text/javascript">
|
||||
/* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
|
||||
var disqus_shortname = '{{ site.disqus_shortname }}'; // required: replace example with your forum shortname
|
||||
|
||||
/* * * DON'T EDIT BELOW THIS LINE * * */
|
||||
(function() {
|
||||
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
|
||||
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
|
||||
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
|
||||
})();
|
||||
|
||||
/* * * DON'T EDIT BELOW THIS LINE * * */
|
||||
(function () {
|
||||
var s = document.createElement('script'); s.async = true;
|
||||
s.type = 'text/javascript';
|
||||
s.src = '//' + disqus_shortname + '.disqus.com/count.js';
|
||||
(document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
|
||||
}());
|
||||
</script>
|
||||
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
|
||||
<a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a>
|
||||
{% endif %}
|
||||
77
_includes/favicon
Normal file
77
_includes/favicon
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
{% comment %}
|
||||
*
|
||||
* More Information › https://mathiasbynens.be/notes/touch-icons
|
||||
*
|
||||
{% endcomment %}
|
||||
|
||||
|
||||
{% if site.favicon-32x32 %}
|
||||
{% comment %} Regular Old-Skool Favicon: {% endcomment %}
|
||||
<link rel="icon" sizes="32x32" href="{{ site.url }}/assets/img/{{ site.favicon-32x32 }}">
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if site.touch-icon-192x192 %}
|
||||
{% comment %} For Chrome for Android: {% endcomment %}
|
||||
<link rel="icon" sizes="192x192" href="{{ site.url }}/assets/img/{{ site.touch-icon-192x192 }}">
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if site.apple-touch-icon-180x180-precomposed %}
|
||||
{% comment %} For iPhone 6 Plus with @3× display: {% endcomment %}
|
||||
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="{{ site.url }}/assets/img/{{ site.apple-touch-icon-180x180-precomposed }}">
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if site.apple-touch-icon-152x152-precomposed %}
|
||||
{% comment %} For iPad with @2× display running iOS ≥ 7: {% endcomment %}
|
||||
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="{{ site.url }}/assets/img/{{ site.apple-touch-icon-152x152-precomposed }}">
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if site.apple-touch-icon-144x144-precomposed %}
|
||||
{% comment %} For iPad with @2× display running iOS ≤ 6: {% endcomment %}
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ site.url }}/assets/img/{{ site.apple-touch-icon-144x144-precomposed }}">
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if site.apple-touch-icon-120x120-precomposed %}
|
||||
{% comment %} For iPhone with @2× display running iOS ≥ 7: {% endcomment %}
|
||||
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="{{ site.url }}/assets/img/{{ site.apple-touch-icon-120x120-precomposed }}">
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if site.apple-touch-icon-114x114-precomposed %}
|
||||
{% comment %} For iPhone with @2× display running iOS ≤ 6: {% endcomment %}
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{ site.url }}/assets/img/{{ site.apple-touch-icon-114x114-precomposed }}">
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if site.apple-touch-icon-76x76-precomposed %}
|
||||
{% comment %} For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7: {% endcomment %}
|
||||
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="{{ site.url }}/assets/img/{{ site.apple-touch-icon-76x76-precomposed }}">
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if site.apple-touch-icon-72x72-precomposed %}
|
||||
{% comment %} For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6: {% endcomment %}
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="{{ site.url }}/assets/img/{{ site.apple-touch-icon-72x72-precomposed }}">
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if site.apple-touch-icon-precomposed %}
|
||||
{% comment %} For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: {% endcomment %}
|
||||
<link rel="apple-touch-icon-precomposed" href="{{ site.url }}/assets/img/{{ site.apple-touch-icon-precomposed }}">{% comment %} 57×57px {% endcomment %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if site.msapplication_tileimage %}
|
||||
{% comment %} Favicon for Windows 8 {% endcomment %}
|
||||
<meta name="msapplication-TileImage" content="{{ site.url }}/assets/img/{{ site.msapplication_tileimage }}"/>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if site.msapplication_tilecolor %}
|
||||
{% comment %} Background Color for Tile for Windows 8 {% endcomment %}
|
||||
<meta name="msapplication-TileColor" content="{{ site.msapplication_tilecolor }}">
|
||||
{% endif %}
|
||||
|
|
@ -1 +0,0 @@
|
|||
<p><a href="{{ site.url }}{{ post.url }}">{{ post.title | xml_escape }}</a> was originally published by {{ site.owner.name }} at <a href="{{ site.url }}">{{ site.title }}</a> on {{ post.date | date: "%B %d, %Y" }}.</p>
|
||||
86
_includes/footer.html
Normal file → Executable file
86
_includes/footer.html
Normal file → Executable file
|
|
@ -1 +1,85 @@
|
|||
<span>© {{ site.time | date: '%Y' }} {{ site.owner.name }}. Powered by <a href="http://jekyllrb.com" rel="nofollow">Jekyll</a> using the <a href="http://mademistakes.com/hpstr/" rel="notfollow">HPSTR Theme</a>.</span>
|
||||
<div id="up-to-top" class="row">
|
||||
<div class="small-12 columns" style="text-align: right;">
|
||||
<a class="iconfont" href="#top-of-page"></a>
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div><!-- /.row -->
|
||||
|
||||
|
||||
<footer id="footer-content" class="bg-grau">
|
||||
<div id="footer">
|
||||
<div class="row">
|
||||
<div class="medium-6 large-5 columns">
|
||||
<h5 class="shadow-black">{{ site.data.language.info_website }}</h5>
|
||||
|
||||
<p class="shadow-black">
|
||||
{{ site.description }}
|
||||
<a href="{{ site.url }}/info/">{{ site.data.language.more }}</a>
|
||||
</p>
|
||||
</div><!-- /.large-6.columns -->
|
||||
|
||||
|
||||
<div class="small-6 medium-3 large-3 large-offset-1 columns">
|
||||
{% for service_item in site.data.services %}
|
||||
{% if forloop.first == true %}
|
||||
<h5 class="shadow-black">{{ service_item.menu_name }}</h5>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<ul class="no-bullet shadow-black">
|
||||
{% for service_item in site.data.services %}
|
||||
{% if service_item.url contains 'http' %}
|
||||
{% assign domain = '' %}
|
||||
{% else %}
|
||||
{% assign domain = site.url %}
|
||||
{% endif %}
|
||||
<li {% if service_item.class %}class="{{ service_item.class }}" {% endif %}>
|
||||
<a href="{{ domain }}{{ service_item.url }}" {% if service_item.url contains 'http' %}target="_blank" {% endif %} title="{{ service_item.title }}">{{ service_item.name }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div><!-- /.large-4.columns -->
|
||||
|
||||
|
||||
<div class="small-6 medium-3 large-3 columns">
|
||||
{% for network_item in site.data.network %}
|
||||
{% if forloop.first == true %}
|
||||
<h5 class="shadow-black">{{ network_item.menu_name }}</h5>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<ul class="no-bullet shadow-black">
|
||||
{% for network_item in site.data.network %}
|
||||
{% if network_item.url contains 'http' %}
|
||||
{% assign domain = '' %}
|
||||
{% else %}
|
||||
{% assign domain = site.url %}
|
||||
{% endif %}
|
||||
<li {% if network_item.class %}class="{{ network_item.class }}" {% endif %}>
|
||||
<a href="{{ domain }}{{ network_item.url }}" {% if network_item.url contains 'http' %}target="_blank" {% endif %} title="{{ network_item.title }}">{{ network_item.name }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div><!-- /.large-3.columns -->
|
||||
</div><!-- /.row -->
|
||||
|
||||
</div><!-- /#footer -->
|
||||
|
||||
|
||||
<div id="subfooter">
|
||||
<nav class="row">
|
||||
<section id="subfooter-left" class="b30 small-12 medium-6 columns">
|
||||
<ul class="inline-list">
|
||||
<li>Created with ♥ by <a style="display:inline;" href="http://phlow.de/">Phlow</a> with <a style="display:inline;" href="http://jekyllrb.com/" target="_blank">Jekyll</a> using <a style="display:inline;" href="http://phlow.github.io/feeling-responsive/">Feeling Responsive</a> </li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section id="subfooter-right" class="small-12 medium-6 columns social-icons">
|
||||
<ul class="inline-list">
|
||||
{% for social_item in site.data.socialmedia %}
|
||||
<li><a href="{{ social_item.url }}" target="_blank" class="{{ social_item.class }}" title="{{ social_item.title }}"></a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</section>
|
||||
</nav>
|
||||
</div><!-- /#subfooter -->
|
||||
</footer>
|
||||
|
|
|
|||
24
_includes/footer_scripts.html
Executable file
24
_includes/footer_scripts.html
Executable file
|
|
@ -0,0 +1,24 @@
|
|||
<script src="{{ site.url }}/assets/js/javascript.min.js"></script>
|
||||
|
||||
{% if page.header.image_fullwidth %}
|
||||
<script>
|
||||
$("#masthead").backstretch("{{ site.url }}/images/{{ page.header.image_fullwidth }}", {fade: 700});
|
||||
$("#masthead-with-text").backstretch("{{ site.url }}/images/{{ page.header.image_fullwidth }}", {fade: 700});
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
{% if site.google_analytics_tracking_id %}
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', '{{ site.google_analytics_tracking_id }}', 'auto');
|
||||
ga('set', 'anonymizeIp', true);
|
||||
ga('send', 'pageview');
|
||||
|
||||
</script>
|
||||
{% endif %}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
{% assign images = include.images | split:" " %}
|
||||
{% assign caption = include.caption %}
|
||||
{% assign cols = include.cols %}
|
||||
|
||||
{% case cols %}
|
||||
{% when 1 %}
|
||||
{% assign class = "" %}
|
||||
{% when 2 %}
|
||||
{% assign class = "half" %}
|
||||
{% when 3 %}
|
||||
{% assign class = "third" %}
|
||||
{% else %}
|
||||
{% assign class = "" %}
|
||||
{% endcase %}
|
||||
|
||||
<figure {% if class != "" %}class="{{ class }}"{% endif %}>
|
||||
{% for image in images %}
|
||||
<a href="{{ image }}"><img src="{{ image }}" alt=""></a>
|
||||
{% endfor %}
|
||||
<figcaption>{{ caption }}</figcaption>
|
||||
</figure>
|
||||
8
_includes/google_search.html
Normal file
8
_includes/google_search.html
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<script language="Javascript" type="text/javascript">
|
||||
function google_search()
|
||||
{
|
||||
var query = document.getElementById("google-search").value;
|
||||
window.open("http://google.com/search?q=" + query
|
||||
+ "%20site:" + "{{ site.url }}");
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,66 +1,57 @@
|
|||
<meta charset="utf-8">
|
||||
<title>{% if page.title %}{{ page.title }} – {% endif %}{{ site.title }}</title>
|
||||
<meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
|
||||
{% if page.tags %}<meta name="keywords" content="{{ page.tags | join: ', ' }}">{% endif %}
|
||||
<!doctype html>
|
||||
<html class="no-js" lang="{% if site.language == nil %}en{% else %}{{ site.language }}{% endif %}">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{% if page.meta_title %}{{ page.meta_title }}{% elsif page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
|
||||
<link rel="stylesheet" href="{{ site.url }}/assets/css/styles_feeling_responsive.css">
|
||||
<script src="{{ site.url }}/assets/js/modernizr.min.js"></script>
|
||||
|
||||
{% if site.owner.twitter %}<!-- Twitter Cards -->
|
||||
{% if page.image.feature %}<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:image" content="{{ site.url }}/images/{{ page.image.feature }}">
|
||||
{% else %}<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:image" content="{% if page.image.thumb %}{{ site.url }}/images/{{ page.image.thumb }}{% else %}{{ site.url }}/images/{{ site.logo }}{% endif %}">{% endif %}
|
||||
<meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
|
||||
<meta name="twitter:description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
|
||||
<meta name="twitter:creator" content="@{{ site.owner.twitter }}">{% endif %}
|
||||
<script>
|
||||
WebFontConfig = {
|
||||
google: { families: [ 'Lato:400,700,400italic:latin', 'Volkhov::latin' ] }
|
||||
};
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:locale" content="en_US">
|
||||
<meta property="og:type" content="article">
|
||||
<meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
|
||||
<meta property="og:description" content="{% if page.description %}{{ page.description }}{% else %}{{ site.description }}{% endif %}">
|
||||
<meta property="og:url" content="{{ site.url }}{{ page.url }}">
|
||||
<meta property="og:site_name" content="{{ site.title }}">
|
||||
(function() {
|
||||
var wf = document.createElement('script');
|
||||
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
|
||||
'://ajax.googleapis.com/ajax/libs/webfont/1.5.6/webfont.js';
|
||||
wf.type = 'text/javascript';
|
||||
wf.async = 'true';
|
||||
var s = document.getElementsByTagName('script')[0];
|
||||
s.parentNode.insertBefore(wf, s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
{% if site.google_verify %}<meta name="google-site-verification" content="{{ site.google_verify }}">{% endif %}
|
||||
{% if site.bing_verify %}<meta name="msvalidate.01" content="{{ site.bing_verify }}">{% endif %}
|
||||
<noscript>
|
||||
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,400italic%7cVolkhov' rel='stylesheet' type='text/css'>
|
||||
</noscript>
|
||||
|
||||
{% capture canonical %}{{ site.url }}{% if site.permalink contains '.html' %}{{ page.url }}{% else %}{{ page.url | remove:'index.html' | strip_slash }}{% endif %}{% endcapture %}
|
||||
<link rel="canonical" href="{{ canonical }}">
|
||||
<link href="{{ site.url }}/feed.xml" type="application/atom+xml" rel="alternate" title="{{ site.title }} Feed">
|
||||
{% if site.google_site_verification %}<meta name="google-site-verification" content="{{ site.google_site_verification}}" />{% endif %}
|
||||
{% if site.bing_webmastertools_id %}<meta name="msvalidate.01" content="{{ site.bing_webmastertools_id }}" />{% endif %}
|
||||
{% if page.meta_description %}<meta name="description" content="{{ page.meta_description | strip_html | escape }}"/>{% elsif page.teaser %}<meta name="description" content="{{ page.teaser | strip_html | escape }}"/>{% elsif site.description %}<meta name="description" content="{{ site.description | strip_html | escape }}"/>{% endif %}
|
||||
|
||||
<!-- http://t.co/dKP3o1e -->
|
||||
<meta name="HandheldFriendly" content="True">
|
||||
<meta name="MobileOptimized" content="320">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
{% if site.google_author %}<link rel="author" href="{{ site.google_author }}"/>{% endif %}
|
||||
|
||||
<!-- For all browsers -->
|
||||
<link rel="stylesheet" href="{{ site.url }}/assets/css/main.css">
|
||||
<!-- Webfonts -->
|
||||
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic" rel="stylesheet" type="text/css">
|
||||
{% include favicon %}
|
||||
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
<!-- Facebook Optimization -->
|
||||
<meta property="og:locale" content="{% if site.og_locale == nil %}en_EN{% else %}{{ site.og_locale }}{% endif %}" />
|
||||
{% if site.og_type %}<meta property="og:type" content="website" />{% endif %}
|
||||
<meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}" />
|
||||
{% if page.meta_description %}<meta property="og:description" content="{{ page.meta_description | strip_html | escape }}"/>{% elsif page.description %}<meta property="og:description" content="{{ page.description | strip_html | escape }}"/>{% elsif site.description %}<meta property="og:description" content="{{ site.description | strip_html | escape }}"/>{% endif %}
|
||||
<meta property="og:url" content="{{ site.url }}{{ page.url }}" />
|
||||
{% if site.title %}<meta property="og:site_name" content="{{ site.title }}" />{% endif %}
|
||||
{% if page.image.thumb %}<meta property="og:image" content="{{ site.url }}/images/{{ page.image.thumb }}" />{% endif %}
|
||||
|
||||
<!-- Load Modernizr -->
|
||||
<script src="{{ site.url }}/assets/js/vendor/modernizr-2.6.2.custom.min.js"></script>
|
||||
{% if site.alexa_verify_id %}<meta name="alexaVerifyID" content="{{ site.alexa_verify_id }}" />{% endif %}
|
||||
|
||||
<!-- Icons -->
|
||||
<!-- 16x16 -->
|
||||
<link rel="shortcut icon" href="{{ site.url }}/favicon.ico">
|
||||
<!-- 32x32 -->
|
||||
<link rel="shortcut icon" href="{{ site.url }}/favicon.png">
|
||||
<!-- 57x57 (precomposed) for iPhone 3GS, pre-2011 iPod Touch and older Android devices -->
|
||||
<link rel="apple-touch-icon-precomposed" href="{{ site.url }}/images/apple-touch-icon-precomposed.png">
|
||||
<!-- 72x72 (precomposed) for 1st generation iPad, iPad 2 and iPad mini -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="{{ site.url }}/images/apple-touch-icon-72x72-precomposed.png">
|
||||
<!-- 114x114 (precomposed) for iPhone 4, 4S, 5 and post-2011 iPod Touch -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{ site.url }}/images/apple-touch-icon-114x114-precomposed.png">
|
||||
<!-- 144x144 (precomposed) for iPad 3rd and 4th generation -->
|
||||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ site.url }}/images/apple-touch-icon-144x144-precomposed.png">
|
||||
<!-- Search Engine Optimization -->
|
||||
{% if page.noindex == true %}<meta name="robots" content="noindex">{% endif %}
|
||||
|
||||
<!-- Feeds -->
|
||||
<link rel="alternate" type="application/atom+xml" title="Atom feed" href="{% page_feed_url %}" />
|
||||
<link type="text/plain" rel="author" href="{{ site.url }}/humans.txt" />
|
||||
|
||||
{% if page.image.background or site.background %}
|
||||
{% capture background %}{% if page.image.background %}{{ page.image.background }}{% else %}{{ site.background }}{% endif %}{% endcapture %}
|
||||
{% unless background contains 'http://' or background contains 'https://' %}{% capture background %}{{ site.url }}/images/{{ background }}{% endcapture %}{% endunless %}
|
||||
<style type="text/css">body {background-image:url({{ background }});}</style>
|
||||
{% endif %}
|
||||
{% unless page.style == NULL %}
|
||||
<style type="text/css">{{ page.style }}</style>
|
||||
{% endunless %}
|
||||
</head>
|
||||
|
|
|
|||
19
_includes/improve_content.html
Normal file
19
_includes/improve_content.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{% comment %}
|
||||
*
|
||||
* If your content is on Jekyll you can use this include
|
||||
* to automatically generate a »Edit on GitHub Link« to
|
||||
* give people a possibility to improve your content.
|
||||
*
|
||||
{% endcomment %}
|
||||
<div class="row">
|
||||
<div class="small-12 columns">
|
||||
<div class="panel radius" style="padding-bottom: 21px;">
|
||||
<a class="button left r15 tiny radius" href="{{ site.improve_content }}/{{ page.path }}">{{ site.data.language.edit }}</a>
|
||||
<p style="margin-top: 3px;">
|
||||
{{ site.data.language.this_content_is_open_source }}
|
||||
<a href="{{ site.improve_content }}/{{ page.path }}">{{ site.data.language.help_improve_it }}</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
20
_includes/list-collection.html
Normal file
20
_includes/list-collection.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{% comment %}
|
||||
*
|
||||
* This include lets you loop through a collection to list
|
||||
* all entries in that collection.
|
||||
*
|
||||
* If you set »published: false« in front matter of a collection page
|
||||
* the page gots filtered out via unless
|
||||
*
|
||||
* Example: {% include list-collection.html collection='wordpress' %}
|
||||
*
|
||||
{% endcomment %}
|
||||
|
||||
<ul class="side-nav">
|
||||
{% for page in site.[include.collection] %}
|
||||
{% unless page.published == false %}
|
||||
<li><a href="{{ site.url }}{{ page.url }}">{{ page.title }}</a></li>
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
<li> </li>
|
||||
</ul>
|
||||
53
_includes/list-posts.html
Normal file
53
_includes/list-posts.html
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
{% comment %}
|
||||
*
|
||||
* Possible parameter for this loop:
|
||||
*
|
||||
* › entries
|
||||
* › offset
|
||||
* › category
|
||||
* › tag
|
||||
*
|
||||
* Example for Category: {% include list-posts.html entries='3' offset='1' category='design' %}
|
||||
*
|
||||
* Example for Tag: {% include list-posts.html entries='5' tag='terminal' %}
|
||||
*
|
||||
*
|
||||
* This loop works like this:
|
||||
*
|
||||
* 1. First we check if there was given a category for filtering › if include.categories == NULL
|
||||
* 2. If no category is given for filtering do a general loop.
|
||||
* 3. If a category/tag was given, assign category/tag to the variable category/tag › assign category = include.categories
|
||||
*
|
||||
{% endcomment %}
|
||||
|
||||
|
||||
|
||||
{% assign category = include.category %}
|
||||
{% assign tag = include.tag %}
|
||||
<ul class="side-nav">
|
||||
|
||||
{% if category == NULL and tag == NULL %}
|
||||
|
||||
{% for post in site.posts limit:include.entries offset:include.offset %}
|
||||
<li><a href="{{ site.url }}{{ post.url }}">{% if post.subheadline %}{{ post.subheadline }} · {% endif %}<strong>{{ post.title }}</strong></a></li>
|
||||
{% endfor %}
|
||||
<li class="text-right"><a href="{{ site.url }}{{ site.blog_root }}archive/"><strong>{{ site.data.language.more }}</strong></a></li>
|
||||
|
||||
|
||||
{% elsif category %}
|
||||
|
||||
{% for post in site.categories.[category] limit:include.entries offset:include.offset %}
|
||||
<li><a href="{{ site.url }}{{ post.url }}">{% if post.subheadline %}{{ post.subheadline }} · {% endif %}<strong>{{ post.title }}</strong></a></li>
|
||||
{% endfor %}
|
||||
<li class="text-right"><a href="{{ site.url }}{{ site.blog_root }}archive/"><strong>{{ site.data.language.more }}</strong></a></li>
|
||||
|
||||
|
||||
{% elsif tag %}
|
||||
|
||||
{% for post in site.tags.[tag] limit:include.entries %}
|
||||
<li><a href="{{ site.url }}{{ post.url }}">{% if post.subheadline %}{{ post.subheadline }} · {% endif %}<strong>{{ post.title }}</strong></a></li>
|
||||
{% endfor %}
|
||||
|
||||
{% endif %}
|
||||
</ul>
|
||||
|
||||
141
_includes/masthead.html
Normal file
141
_includes/masthead.html
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
{% if page.header == NULL and page.header.image_fullwidth == NULL and page.header.pattern == NULL and page.header.background-color == NULL and page.header.title == NULL %}
|
||||
|
||||
<div id="masthead-no-image-header">
|
||||
<div class="row">
|
||||
<div class="small-12 columns">
|
||||
<a id="logo" href="{{ site.url }}" title="{{ site.title }} – {{ site.slogan }}">
|
||||
<img src="{{ site.url }}/assets/img/{{ site.logo }}" alt="{{ site.title }} – {{ site.slogan }}">
|
||||
</a>
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div><!-- /.row -->
|
||||
</div><!-- /#masthead -->
|
||||
|
||||
{% if page.breadcrumb == true %}
|
||||
{% include breadcrumb.html %}
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% elsif page.header.title %}
|
||||
|
||||
<div id="masthead-with-text" style="{% if page.header.background-color %}background: {{ page.header.background-color }};{% endif %} {% if page.header.image_fullwidth %}{% elsif page.header.pattern %}background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)), url('{{ site.url }}/images/{{ page.header.pattern }}'){% endif %}">
|
||||
<div class="row">
|
||||
<div class="small-12 columns">
|
||||
<div class="masthead-title">{{ page.header.title }}</div>
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div><!-- /.row -->
|
||||
</div><!-- /#masthead -->
|
||||
|
||||
{% if page.breadcrumb == true %}
|
||||
{% include breadcrumb.html %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.header.caption_url && page.header.caption %}
|
||||
<div class="masthead-caption">
|
||||
<a href="{{ page.header.caption_url }}">{{ page.header.caption }}</a>
|
||||
</div>
|
||||
{% elsif page.header.caption %}
|
||||
<div class="masthead-caption">
|
||||
{{ page.header.caption }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% elsif page.header.image_fullwidth %}
|
||||
|
||||
<div id="masthead">
|
||||
<div class="row">
|
||||
<div class="small-12 columns">
|
||||
<a id="logo" href="{{ site.url }}" title="{{ site.title }} – {{ site.slogan }}">
|
||||
<img src="{{ site.url }}/assets/img/{{ site.logo }}" alt="{{ site.title }} – {{ site.slogan }}">
|
||||
</a>
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div><!-- /.row -->
|
||||
</div><!-- /#masthead -->
|
||||
|
||||
{% if page.breadcrumb == true %}
|
||||
{% include breadcrumb.html %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.header.caption_url && page.header.caption %}
|
||||
<div class="masthead-caption">
|
||||
<a href="{{ page.header.caption_url }}">{{ page.header.caption }}</a>
|
||||
</div>
|
||||
{% elsif page.header.caption %}
|
||||
<div class="masthead-caption">
|
||||
{{ page.header.caption }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% elsif page.header.pattern %}
|
||||
|
||||
<div id="masthead-with-pattern" style="background: url('{{ site.url }}/images/{{ page.header.pattern }}')">
|
||||
<div class="row">
|
||||
<figure class="small-12 columns">
|
||||
<img src="{{ site.url }}/images/{{ page.header.image }}" alt="{{ site.title }}">
|
||||
</figure><!-- /.small-12.columns -->
|
||||
</div><!-- /.row -->
|
||||
</div><!-- /#masthead -->
|
||||
|
||||
{% if page.breadcrumb == true %}
|
||||
{% include breadcrumb.html %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.header.caption_url && page.header.caption %}
|
||||
<div class="masthead-caption">
|
||||
<a href="{{ page.header.caption_url }}">{{ page.header.caption }}</a>
|
||||
</div>
|
||||
{% elsif page.header.caption %}
|
||||
<div class="masthead-caption">
|
||||
{{ page.header.caption }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% elsif page.header.background-color %}
|
||||
|
||||
<div id="masthead-with-background-color" style="background: {{ page.header.background-color }};">
|
||||
<div class="row">
|
||||
<figure class="small-12 columns">
|
||||
<img src="{{ site.url }}/images/{{ page.header.image }}" alt="{{ site.title }}">
|
||||
</figure><!-- /.small-12.columns -->
|
||||
</div><!-- /.row -->
|
||||
</div><!-- /#masthead -->
|
||||
|
||||
{% if page.breadcrumb == true %}
|
||||
{% include breadcrumb.html %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.header.caption_url && page.header.caption %}
|
||||
<div class="masthead-caption">
|
||||
<a href="{{ page.header.caption_url }}">{{ page.header.caption }}</a>
|
||||
</div>
|
||||
{% elsif page.header.caption %}
|
||||
<div class="masthead-caption">
|
||||
{{ page.header.caption }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{% elsif page.header == false %}
|
||||
|
||||
{% if page.breadcrumb == true %}
|
||||
{% include breadcrumb.html %}
|
||||
{% endif %}
|
||||
|
||||
{% endif %}
|
||||
30
_includes/meta_information.html
Normal file
30
_includes/meta_information.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<div id="page-meta" class="t30">
|
||||
<p>
|
||||
<!-- Look the author details up from the site config. -->
|
||||
{% assign author = site.data.authors[page.author] %}
|
||||
<!-- Output author details if some exist. -->
|
||||
{% if author %}
|
||||
<span itemprop="author" itemscope itemtype="http://schema.org/Person"><span itemprop="name" class="pr20 icon-edit"><a href="{{ author.url }}" target="_blank"> {{ author.name }}</a></span>
|
||||
</span>
|
||||
{% endif %}
|
||||
|
||||
{% if page.date %}
|
||||
<time class="icon-calendar pr20" datetime="{{ page.date | date: "%Y-%m-%d" }}" itemprop="datePublished"> {{ page.date | date: "%Y-%m-%d" }}</time>
|
||||
{% endif %}
|
||||
|
||||
{% if page.categories %}<span class="icon-archive pr20"> {{ page.categories | join: ' · ' | upcase }}{% endif %}</span>
|
||||
<br>
|
||||
<span class="pr20">{% for tag in page.tags %}<span class="icon-price-tag pr10"> {{tag}}</span> {% endfor %}</span>
|
||||
</p>
|
||||
|
||||
<div id="post-nav" class="row">
|
||||
|
||||
{% if page.previous.url %}
|
||||
<div class="small-5 columns"><a class="button small radius prev" href="{{ site.url }}{{page.previous.url}}">« {{page.previous.title}}</a></div><!-- /.small-4.columns -->
|
||||
{% endif %}
|
||||
<div class="small-2 columns text-center"><a class="radius button small" href="{{ site.url }}{{ site.blog_root }}archive/" title="Blog {{ site.data.language.archive }}">{{ site.data.language.archive }}</a></div><!-- /.small-4.columns -->
|
||||
{% if page.next.url %}
|
||||
<div class="small-5 columns text-right"><a class="button small radius next" href="{{ site.url }}{{page.next.url}}">{{page.next.title}} »</a></div><!-- /.small-4.columns -->
|
||||
{% endif %}
|
||||
</div>
|
||||
</div><!-- /.page-meta -->
|
||||
|
|
@ -1,62 +1,123 @@
|
|||
<nav id="dl-menu" class="dl-menuwrapper" role="navigation">
|
||||
<button class="dl-trigger">Open Menu</button>
|
||||
<ul class="dl-menu">
|
||||
<li><a href="{{ site.url }}/">Home</a></li>
|
||||
<li>
|
||||
<a href="#">About</a>
|
||||
<ul class="dl-submenu">
|
||||
<li>
|
||||
<img src="{{ site.url }}/images/{{ site.owner.avatar }}" alt="{{ site.owner.name }} photo" class="author-photo">
|
||||
<h4>{{ site.owner.name }}</h4>
|
||||
<p>{{ site.owner.bio }}</p>
|
||||
|
||||
<div id="navigation" class="sticky">
|
||||
<nav class="top-bar" data-topbar>
|
||||
<ul class="title-area">
|
||||
<li class="name">
|
||||
<h1 class="show-for-small-only"><a href="{{ site.url }}" class="icon-tree"> {{ site.title }}</a></h1>
|
||||
</li>
|
||||
<li><a href="{{ site.url }}/about/"><span class="btn btn-inverse">Learn More</span></a></li>
|
||||
{% if site.owner.email %}<li>
|
||||
<a href="mailto:{{ site.owner.email }}"><i class="fa fa-fw fa-envelope"></i> Email</a>
|
||||
</li>{% endif %}
|
||||
{% if site.owner.twitter %}<li>
|
||||
<a href="http://twitter.com/{{ site.owner.twitter }}"><i class="fa fa-fw fa-twitter"></i> Twitter</a>
|
||||
</li>{% endif %}
|
||||
{% if site.owner.facebook %}<li>
|
||||
<a href="http://facebook.com/{{ site.owner.facebook }}"><i class="fa fa-fw fa-facebook"></i> Facebook</a>
|
||||
</li>{% endif %}
|
||||
{% if site.owner.google_plus %}<li>
|
||||
<a href="https://google.com/{{ site.owner.google_plus }}"><i class="fa fa-fw fa-google-plus"></i> Google+</a>
|
||||
</li>{% endif %}
|
||||
{% if site.owner.linkedin %}<li>
|
||||
<a href="http://linkedin.com/in/{{ site.owner.linkedin }}"><i class="fa fa-fw fa-linkedin"></i> LinkedIn</a>
|
||||
</li>{% endif %}
|
||||
{% if site.owner.github %}<li>
|
||||
<a href="http://github.com/{{ site.owner.github }}"><i class="fa fa-fw fa-github"></i> GitHub</a>
|
||||
</li>{% endif %}
|
||||
{% if site.owner.stackexchange %}<li>
|
||||
<a href="{{ site.owner.stackexchange }}"><i class="fa fa-fw fa-stack-exchange"></i> Stackexchange</a>
|
||||
</li>{% endif %}
|
||||
{% if site.owner.instagram %}<li>
|
||||
<a href="http://instagram.com/{{ site.owner.instagram }}"><i class="fa fa-fw fa-instagram"></i> Instagram</a>
|
||||
</li>{% endif %}
|
||||
{% if site.owner.flickr %}<li>
|
||||
<a href="http://www.flickr.com/photos/{{ site.owner.flickr }}"><i class="fa fa-fw fa-flickr"></i> Flickr</a>
|
||||
</li>{% endif %}
|
||||
{% if site.owner.tumblr %}<li>
|
||||
<a href="http://{{ site.owner.tumblr }}.tumblr.com"><i class="fa fa-fw fa-tumblr"></i> Tumblr</a>
|
||||
</li>{% endif %}
|
||||
</ul><!-- /.dl-submenu -->
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Posts</a>
|
||||
<ul class="dl-submenu">
|
||||
<li><a href="{{ site.url }}/posts/">All Posts</a></li>
|
||||
<li><a href="{{ site.url }}/tags/">All Tags</a></li>
|
||||
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
|
||||
<li class="toggle-topbar menu-icon"><a href="#"><span>Navigation</span></a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<section class="top-bar-section">
|
||||
{% comment %}
|
||||
|
||||
____ _ __ __ _ __ _ __ _
|
||||
/ __ \(_)___ _/ /_ / /_ / | / /___ __ __(_)___ _____ _/ /_(_)___ ____
|
||||
/ /_/ / / __ `/ __ \/ __/ / |/ / __ `/ | / / / __ `/ __ `/ __/ / __ \/ __ \
|
||||
/ _, _/ / /_/ / / / / /_ / /| / /_/ /| |/ / / /_/ / /_/ / /_/ / /_/ / / / /
|
||||
/_/ |_/_/\__, /_/ /_/\__/ /_/ |_/\__,_/ |___/_/\__, /\__,_/\__/_/\____/_/ /_/
|
||||
/____/ /____/
|
||||
|
||||
{% endcomment %}
|
||||
<ul class="right">
|
||||
{% for link in site.data.navigation %}
|
||||
|
||||
{% if link.url contains 'http' %}
|
||||
{% assign domain = '' %}
|
||||
{% elsif link.url == '#' %}
|
||||
{% assign domain = '' %}
|
||||
{% else %}
|
||||
{% assign domain = site.url %}
|
||||
{% endif %}
|
||||
<li><a href="{{ domain }}{{ link.url }}" {% if link.url contains 'http' %}target="_blank"{% endif %}>{{ link.title }}</a></li>
|
||||
|
||||
{% comment %} If there are links for right side begin {% endcomment %}
|
||||
{% if link.side == 'right' %}
|
||||
{% comment %} If right side WITHOUT dropdown menu do {% endcomment %}
|
||||
{% if link.dropdown == nil %}
|
||||
<li class="divider"></li>
|
||||
<li{% if link.url == page.url %} class="active"{% endif %}><a href="{{ domain }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title }}</a></li>
|
||||
|
||||
{% comment %} If right side WITH dropdown menu do {% endcomment %}
|
||||
{% else %}
|
||||
|
||||
<li class="divider"></li>
|
||||
<li class="has-dropdown{% if link.url == page.url %} active{% endif %}">
|
||||
<a href="{{ domain }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title }}</a>
|
||||
|
||||
<ul class="dropdown">
|
||||
{% for dropdown_link in link.dropdown %}
|
||||
|
||||
{% if dropdown_link.url contains 'http' %}
|
||||
{% assign domain = '' %}
|
||||
{% else %}
|
||||
{% assign domain = site.url %}
|
||||
{% endif %}
|
||||
|
||||
<li><a href="{{ domain }}{{ dropdown_link.url }}"{% if dropdown_link.url contains 'http' %} target="_blank"{% endif %}>{{ dropdown_link.title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul><!-- /.dl-menu -->
|
||||
</nav><!-- /.dl-menuwrapper -->
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% comment %} First loop finished 1 {% endcomment %}
|
||||
</ul>
|
||||
{% comment %}
|
||||
|
||||
__ ______ _ __ _ __ _
|
||||
/ / ___ / __/ /_ / | / /___ __ __(_)___ _____ _/ /_(_)___ ____
|
||||
/ / / _ \/ /_/ __/ / |/ / __ `/ | / / / __ `/ __ `/ __/ / __ \/ __ \
|
||||
/ /___/ __/ __/ /_ / /| / /_/ /| |/ / / /_/ / /_/ / /_/ / /_/ / / / /
|
||||
/_____/\___/_/ \__/ /_/ |_/\__,_/ |___/_/\__, /\__,_/\__/_/\____/_/ /_/
|
||||
/____/
|
||||
|
||||
{% endcomment %}
|
||||
<ul class="left">
|
||||
{% for link in site.data.navigation %}
|
||||
|
||||
{% if link.url contains 'http' %}
|
||||
{% assign domain = '' %}
|
||||
{% elsif link.url == '#' %}
|
||||
{% assign domain = '' %}
|
||||
{% else %}
|
||||
{% assign domain = site.url %}
|
||||
{% endif %}
|
||||
|
||||
{% comment %} If there are links for left side begin {% endcomment %}
|
||||
{% if link.side == 'left' %}
|
||||
|
||||
{% comment %} If left side WITHOUT dropdown menu do {% endcomment %}
|
||||
{% if link.dropdown == nil %}
|
||||
<li{% if link.url == page.url %} class="active"{% endif %}><a href="{{ domain }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title }}</a></li>
|
||||
<li class="divider"></li>
|
||||
|
||||
{% comment %} If left side WITH dropdown menu do {% endcomment %}
|
||||
{% else %}
|
||||
|
||||
<li class="has-dropdown{% if link.url == page.url %} active{% endif %}">
|
||||
<a href="{{ domain }}{{ link.url }}"{% if link.url contains 'http' %} target="_blank"{% endif %}>{{ link.title }}</a>
|
||||
|
||||
<ul class="dropdown">
|
||||
{% for dropdown_link in link.dropdown %}
|
||||
|
||||
{% if dropdown_link.url contains 'http' %}
|
||||
{% assign domain = '' %}
|
||||
{% else %}
|
||||
{% assign domain = site.url %}
|
||||
{% endif %}
|
||||
|
||||
<li><a href="{{ domain }}{{ dropdown_link.url }}"{% if dropdown_link.url contains 'http' %} target="_blank"{% endif %}>{{ dropdown_link.title }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% comment %} Second loop finished {% endcomment %}
|
||||
</ul>
|
||||
</section>
|
||||
</nav>
|
||||
</div><!-- /#navigation -->
|
||||
|
|
|
|||
41
_includes/next-previous-post-in-category.html
Normal file
41
_includes/next-previous-post-in-category.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
{% comment %}
|
||||
*
|
||||
* This include creates a next/previous link to a post of the same category
|
||||
* using the categories-variable in front matter.
|
||||
*
|
||||
* Source: https://github.com/jekyll/jekyll/issues/260a#issue-495435
|
||||
*
|
||||
* Use › {% include next-previous-post-in-category.html %}
|
||||
*
|
||||
{% endcomment %}
|
||||
|
||||
|
||||
{% comment %}
|
||||
*
|
||||
* assign FIRST category from categories variable from front matter to cat
|
||||
* and make a string from the array by using › join: ''
|
||||
*
|
||||
{% endcomment %}
|
||||
|
||||
{% assign cat = page.categories | first | join: '' %}
|
||||
{% for post in site.categories.[cat] %}
|
||||
{% if post.url == page.url %}
|
||||
{% assign post_index0 = forloop.index0 %}
|
||||
{% assign post_index1 = forloop.index %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% for post in site.categories.[cat] %}
|
||||
{% if post_index0 == forloop.index %}
|
||||
{% assign next_post = post.url %}
|
||||
{% endif %}
|
||||
{% if post_index1 == forloop.index0 %}
|
||||
{% assign prev_post = post.url %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% if next_post %}
|
||||
<a class="left button tiny radius icon-chevron-left r15" href="{{ next_post }}">{{ site.data.language.next_post_in }} {{ cat | upcase }}</a>
|
||||
{% endif %}
|
||||
{% if prev_post %}
|
||||
<a class="button tiny radius" href="{{ prev_post }}">{{ site.data.language.previous_post_in }} {{ cat | upcase }}<span class="icon-chevron-right"></span></a>
|
||||
{% endif %}
|
||||
|
||||
42
_includes/pagination.html
Normal file
42
_includes/pagination.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
{% comment %}
|
||||
* This loops through the paginated posts
|
||||
*
|
||||
* Total posts: {{ paginator.total_posts }}
|
||||
* Total paginate-pages: {{ paginator.total_pages }}
|
||||
*
|
||||
{% endcomment %}
|
||||
|
||||
|
||||
{% for post in paginator.posts %}
|
||||
<div class="row">
|
||||
<div class="small-12 columns b60">
|
||||
<p class="subheadline"><span class="subheader">{% if post.categories %}{{ post.categories | join: ' · ' }}{% endif %}</span> – {% if post.subheadline %}{{ post.subheadline }}{% endif %}</p>
|
||||
<h2><a href="{{ site.url }}{{ post.url }}">{{ post.title }}</a></h2>
|
||||
<p>
|
||||
{% if post.image.thumb %}<a href="{{ site.url }}{{ post.url }}" title="{{ post.title escape_once }}"><img src="{{ site.url }}/images/{{ post.image.thumb }}" class="alignleft" width="150" height="150" alt="{{ page.title escape_once }}"></a>{% endif %}
|
||||
|
||||
{% if post.meta_description %}{{ post.meta_description | strip_html | escape }}{% elsif post.teaser %}{{ post.teaser | strip_html | escape }}{% endif %}
|
||||
|
||||
<a href="{{ site.url }}{{ post.url }}" title="{{ site.data.language.read }} {{ post.title escape_once }}"><strong>{{ site.data.language.read_more }}</strong></a>
|
||||
</p>
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div><!-- /.row -->
|
||||
{% endfor %}
|
||||
|
||||
|
||||
<nav id="pagination">
|
||||
{% if paginator.previous_page %}
|
||||
{% if paginator.previous_page == 1 %}
|
||||
<a class="radius button small" href="{{ site.url }}{{ site.blog_root }}" title="{{ site.data.language.previous_posts }}">« {{ site.data.language.previous_posts }}</a>
|
||||
{% else %}
|
||||
<a class="radius button small" href="{{ site.url }}{{ site.blog_root }}page{{ paginator.previous_page }}/" title="{{ site.data.language.previous_posts }}">« {{ site.data.language.previous }}</a>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
<a class="radius button small" href="{{ site.url }}{{ site.blog_root }}archive/" title="{{ site.data.language.blog_archive }}">{{ site.data.language.blog_archive }}</a>
|
||||
|
||||
{% if paginator.next_page %}
|
||||
<a class="radius button small" href="{{ site.url }}{{ site.blog_root }}page{{ paginator.next_page }}/" title="{{ site.data.language.next_posts }}">{{ site.data.language.next }} »</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<div class="read-more">
|
||||
{% for post in site.related_posts limit:1 %}
|
||||
<div class="read-more-header">
|
||||
<a href="{{ site.url }}{{ page.previous.url }}" class="read-more-btn">Read More</a>
|
||||
</div><!-- /.read-more-header -->
|
||||
<div class="read-more-content">
|
||||
<h3><a href="{{ site.url }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></h3>
|
||||
<p>{% if post.description %}{{ post.description }}{% else %}{{ post.content | strip_html | strip_newlines | truncate: 140 }}…{% endif %} <a href="{{ site.url }}{{ post.url }}">Continue reading</a></p>
|
||||
</div><!-- /.read-more-content -->
|
||||
{% endfor %}
|
||||
<div class="read-more-list">
|
||||
{% for post in site.related_posts limit:2 offset:1 %}
|
||||
<div class="list-item">
|
||||
<h4><a href="{{ site.url }}{{ post.url }}" title="{{ post.title }}">{{ post.title }}</a></h4>
|
||||
<span>Published on {{ post.date | date: "%B %d, %Y" }}</span>
|
||||
</div><!-- /.list-item -->
|
||||
{% endfor %}
|
||||
</div><!-- /.read-more-list -->
|
||||
</div><!-- /.read-more -->
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
|
||||
<script>window.jQuery || document.write('<script src="{{ site.url }}/assets/js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
|
||||
<script src="{{ site.url }}/assets/js/scripts.min.js"></script>
|
||||
|
||||
{% if site.google_analytics %}
|
||||
<!-- Asynchronous Google Analytics snippet -->
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', '{{ site.google_analytics }}', 'auto');
|
||||
ga('require', 'linkid', 'linkid.js');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
{% if page.comments != false %}{% include disqus_comments.html %}{% endif %}
|
||||
20
_includes/sidebar.html
Normal file
20
_includes/sidebar.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<aside>
|
||||
<div class="panel radius">
|
||||
<h3>Sidebar</h3>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
|
||||
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<img class="b30" src="http://dummyimage.com/303x16:9/df4949/e27b3f.png&text=Ugly+Ad+Space" alt="">
|
||||
|
||||
|
||||
<div class="border-dotted radius b30">
|
||||
<img src="http://placekitten.com/271/270" alt="uh, Placekitten">
|
||||
<p class="text-left">
|
||||
This is an advertisment with a crazy cat! <a href="http://placekitten.com/">More cats, please!</a>
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<div class="social-share">
|
||||
<ul class="socialcount socialcount-small inline-list">
|
||||
<li class="facebook"><a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}" title="Share on Facebook"><span class="count"><i class="fa fa-facebook-square"></i> Like</span></a></li>
|
||||
<li class="twitter"><a href="https://twitter.com/intent/tweet?text={{ site.url }}{{ page.url }}" title="Share on Twitter"><span class="count"><i class="fa fa-twitter-square"></i> Tweet</span></a></li>
|
||||
<li class="googleplus"><a href="https://plus.google.com/share?url={{ site.url }}{{ page.url }}" title="Share on Google Plus"><span class="count"><i class="fa fa-google-plus-square"></i> +1</span></a></li>
|
||||
</ul>
|
||||
</div><!-- /.social-share -->
|
||||
16
_layouts/blog.html
Normal file
16
_layouts/blog.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
layout: default
|
||||
format: blog-index
|
||||
# Don't index these pages dear Google.
|
||||
noindex: true
|
||||
---
|
||||
<div class="row">
|
||||
<div class="medium-8 columns t30">
|
||||
{% include pagination.html %}
|
||||
</div><!-- /.medium-7.columns -->
|
||||
|
||||
|
||||
<div class="medium-4 columns t30">
|
||||
{% include sidebar.html %}
|
||||
</div><!-- /.medium-5.columns -->
|
||||
</div><!-- /.row -->
|
||||
11
_layouts/compress.html
Normal file
11
_layouts/compress.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
---
|
||||
#
|
||||
# Jekyll layout that compresses HTML
|
||||
# v1.1.2
|
||||
# http://jch.penibelst.de/
|
||||
# © 2014–2015 Anatol Broder
|
||||
# MIT License
|
||||
#
|
||||
---
|
||||
|
||||
{% if site.compress_html.ignore.envs contains jekyll.environment %}{{ content }}{% else %}{% capture _content %}{{ content }}{% endcapture %}{% if site.compress_html.endings == "all" %}{% assign _endings = "html head body li dt dd p rt rp optgroup option colgroup caption thead tbody tfoot tr td th" | split: " " %}{% else %}{% assign _endings = site.compress_html.endings %}{% endif %}{% for _element in _endings %}{% capture _end %}</{{ _element }}>{% endcapture %}{% assign _content = _content | remove: _end %}{% endfor %}{% assign _pre_befores = _content | split: "<pre" %}{% assign _content = "" %}{% for _pre_before in _pre_befores %}{% assign _pres = _pre_before | split: "</pre>" %}{% case _pres.size %}{% when 2 %}{% capture _content %}{{ _content }}<pre{{ _pres.first }}</pre>{{ _pres.last | split: " " | join: " " }}{% endcapture %}{% when 1 %}{% capture _content %}{{ _content }}{{ _pres.last | split: " " | join: " " }}{% endcapture %}{% endcase %}{% endfor %}{% if site.compress_html.comments.size == 2 %}{% assign _comment_befores = _content | split: site.compress_html.comments.first %}{% for _comment_before in _comment_befores %}{% assign _comment_content = _comment_before | split: site.compress_html.comments.last | first %}{% if _comment_content %}{% capture _comment %}{{ site.compress_html.comments.first }}{{ _comment_content }}{{ site.compress_html.comments.last }}{% endcapture %}{% assign _content = _content | remove: _comment %}{% endif %}{% endfor %}{% endif %}{% if site.compress_html.clippings == "all" %}{% assign _clippings = "html head title base link meta style body article section nav aside h1 h2 h3 h4 h5 h6 hgroup header footer address p hr blockquote ol ul li dl dt dd figure figcaption main div table caption colgroup col tbody thead tfoot tr td th" | split: " " %}{% else %}{% assign _clippings = site.compress_html.clippings %}{% endif %}{% for _element in _clippings %}{% assign _edges = " <e;<e; </e>;</e>;</e> ;</e>" | replace: "e", _element | split: ";" %}{% assign _content = _content | replace: _edges[0], _edges[1] | replace: _edges[2], _edges[3] | replace: _edges[4], _edges[5] %}{% endfor %}{{ _content }}{% endif %}
|
||||
16
_layouts/default.html
Normal file
16
_layouts/default.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
layout: compress
|
||||
---
|
||||
{% include head.html %}
|
||||
<body id="top-of-page" class="{{ page.format }}">
|
||||
{% include navigation.html %}
|
||||
|
||||
{% include masthead.html %}
|
||||
|
||||
{{ content }}
|
||||
|
||||
{% include footer.html %}
|
||||
|
||||
{% include footer_scripts.html %}
|
||||
</body>
|
||||
</html>
|
||||
107
_layouts/frontpage.html
Normal file
107
_layouts/frontpage.html
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
---
|
||||
layout: default
|
||||
format: blog-index
|
||||
---
|
||||
<div id="header-home">
|
||||
<div class="row">
|
||||
<div class="small-12 columns">
|
||||
</div><!-- /.medium-4.columns -->
|
||||
</div><!-- /.row -->
|
||||
</div><!-- /#header-home -->
|
||||
|
||||
|
||||
{% comment %}
|
||||
*
|
||||
* First check, if widget is empty or not by checking if there is a title
|
||||
*
|
||||
{% endcomment %}
|
||||
<div class="row t60">
|
||||
{% if page.widget-1.title %}
|
||||
<div class="medium-4 columns">
|
||||
<a href="{{ page.widget-1.url }}">{% if page.widget-1.image %}<img src="{{ site.urlimg }}/{{ page.widget-1.image }}" width="302" height="182" alt="">{% endif %}{% if page.widget-1.video %}{{ page.widget-1.video }}{% endif %}</a>
|
||||
<h2 class="font-size-h3 t10">{{ page.widget-1.title }}</h2>
|
||||
<p>{{ page.widget-1.text }}</p>
|
||||
<p><a class="button tiny radius" href="{{ page.widget-1.url }}">{{ site.data.language.more }}</a></p>
|
||||
</div><!-- /.medium-4.columns -->
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if page.widget-2.title %}
|
||||
<div class="medium-4 columns">
|
||||
<a href="{{ page.widget-2.url }}">{% if page.widget-2.image %}<img src="{{ site.urlimg }}/{{ page.widget-2.image }}" width="302" height="182" alt="">{% endif %}{% if page.widget-2.video %}{{ page.widget-2.video }}{% endif %}</a>
|
||||
<h2 class="font-size-h3 t10">{{ page.widget-2.title }}</h2>
|
||||
<p>{{ page.widget-2.text }}</p>
|
||||
<p><a class="button tiny radius" href="{{ page.widget-2.url }}">{{ site.data.language.more }}</a></p>
|
||||
</div><!-- /.medium-4.columns -->
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% if page.widget-3.title %}
|
||||
<div class="medium-4 columns">
|
||||
<a href="{{ page.widget-3.url }}">{% if page.widget-3.image %}<img src="{{ site.urlimg }}/{{ page.widget-3.image }}" width="302" height="182" alt="">{% endif %}{% if page.widget-3.video %}{{ page.widget-3.video }}{% endif %}</a>
|
||||
<h2 class="font-size-h3 t10">{{ page.widget-3.title }}</h2>
|
||||
<p>{{ page.widget-3.text }}</p>
|
||||
<p><a class="button tiny radius" href="{{ page.widget-3.url }}">Download @ GitHub ›</a></p>
|
||||
</div><!-- /.medium-4.columns -->
|
||||
{% endif %}
|
||||
</div><!-- /.row -->
|
||||
|
||||
|
||||
{% comment %}
|
||||
*
|
||||
* First check, if there are any posts at all
|
||||
*
|
||||
{% endcomment %}
|
||||
|
||||
{% unless site.posts == empty %}
|
||||
<div class="row t30 b20 homepage">
|
||||
<div class="small-12 columns">
|
||||
{% for post in site.posts limit:1 %}
|
||||
{% if post.image.homepage %}
|
||||
<p>
|
||||
<a href="{{ site.url }}{{ post.url }}" title="{{ post.title escape_once }}"><img width="970" src="{{ site.url }}/images/{{ post.image.homepage }}" alt="{{ page.title escape_once }}"></a>
|
||||
</p>
|
||||
|
||||
{% if post.image.caption_url && post.image.caption %}
|
||||
<p class="text-right caption">
|
||||
<a href="{{ post.image.caption_url }}">{{ post.image.caption }}</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
{% elsif post.image.homepage == NULL %}
|
||||
<h2>{{ site.data.language.new_blog_entries }}</h2>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div><!-- /.row -->
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="medium-6 columns">
|
||||
{% for post in site.posts limit:1 %}
|
||||
{% if post.subheadline %}<p class="subheadline">{{ post.subheadline }}</p>{% endif %}
|
||||
<h2><a href="{{ site.url }}{{ post.url }}">{{ post.title }}</a></h2>
|
||||
<p>
|
||||
{% if post.meta_description %}{{ post.meta_description | strip_html | escape }}{% elsif post.teaser %}{{ post.teaser | strip_html | escape }}{% endif %}
|
||||
<a href="{{ site.url }}{{ post.url }}" title="Read {{ post.title escape_once }}"><strong>{{ site.data.language.read_more }}</strong></a>
|
||||
</p>
|
||||
{% endfor %}
|
||||
</div><!-- /.medium-5.columns -->
|
||||
|
||||
|
||||
<div class="medium-6 columns">
|
||||
<p><strong>{{ site.data.language.more_articles }}</strong></p>
|
||||
{% include list-posts.html entries='3' offset='1' %}
|
||||
</div><!-- /.medium-7.columns -->
|
||||
</div><!-- /.row -->
|
||||
{% endunless %}
|
||||
|
||||
|
||||
{% comment %}
|
||||
*
|
||||
* Finally, if there is content, spit it out.
|
||||
*
|
||||
{% endcomment %}
|
||||
|
||||
<div class="row">
|
||||
{{ content }}
|
||||
</div><!-- /.row -->
|
||||
40
_layouts/page-fullwidth.html
Normal file
40
_layouts/page-fullwidth.html
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
---
|
||||
layout: default
|
||||
format: page-fullwidth
|
||||
---
|
||||
{% if page.image.title %}
|
||||
<div class="row t30">
|
||||
<div class="small-12 columns">
|
||||
<img src="{{ site.url }}/images/{{ page.image.title }}" width="970" alt="{{ page.title escape_once }}">
|
||||
{% if page.image.caption_url && page.image.caption %}
|
||||
<p class="text-right caption">
|
||||
<a href="{{ page.image.caption_url }}">{{ page.image.caption }}</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div><!-- /.row -->
|
||||
{% endif %}
|
||||
|
||||
|
||||
<div class="row t30">
|
||||
<div class="medium-12 columns">
|
||||
|
||||
<article>
|
||||
<header>
|
||||
{% if page.subheadline %}<p class="subheadline">{{ page.subheadline }}</p>{% endif %}
|
||||
<h1>{{ page.title }}</h1>
|
||||
</header>
|
||||
|
||||
{% if page.teaser %}
|
||||
<p class="teaser">
|
||||
{{ page.teaser }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{{ content }}
|
||||
</article>
|
||||
|
||||
</div><!-- /.medium-12.columns -->
|
||||
</div><!-- /.row -->
|
||||
|
||||
|
||||
|
|
@ -1,59 +1,65 @@
|
|||
<!doctype html>
|
||||
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
||||
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
|
||||
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
|
||||
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
|
||||
<head>
|
||||
{% include head.html %}
|
||||
</head>
|
||||
---
|
||||
layout: default
|
||||
format: post
|
||||
---
|
||||
<div class="row t30">
|
||||
<div class="medium-8 columns{% if page.sidebar == NULL %} medium-offset-2 end{% endif %}{% if page.sidebar == "left" %} medium-push-4{% endif %}">
|
||||
<article itemscope itemtype="http://schema.org/Article">
|
||||
<header>
|
||||
{% if page.image.title %}
|
||||
<figure>
|
||||
<img src="{{ site.url }}/images/{{ page.image.title }}" width="970" alt="{{ page.title escape_once }}" itemprop="image">
|
||||
|
||||
<body id="page" {% if page.image.feature %}class="feature"{% endif %}>
|
||||
|
||||
{% include browser-upgrade.html %}
|
||||
{% include navigation.html %}
|
||||
|
||||
{% if page.image.feature %}
|
||||
<div class="entry-header">
|
||||
{% if page.image.credit %}<div class="image-credit">Image source: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></div><!-- /.image-credit -->{% endif %}
|
||||
<div class="entry-image">
|
||||
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }}">
|
||||
</div><!-- /.entry-image -->
|
||||
</div><!-- /.entry-header -->
|
||||
{% if page.image.caption_url && page.image.caption %}
|
||||
<figcaption class="text-right">
|
||||
<a href="{{ page.image.caption_url }}">{{ page.image.caption }}</a>
|
||||
</figcaption>
|
||||
{% elsif page.image.caption %}
|
||||
<figcaption class="text-right">
|
||||
{{ page.image.caption }}
|
||||
</figcaption>
|
||||
{% endif %}
|
||||
</figure>
|
||||
{% endif %}
|
||||
|
||||
<div id="main" role="main">
|
||||
<article class="hentry">
|
||||
<header class="header-title">
|
||||
<div class="header-title-wrap">
|
||||
<h1 class="entry-title">{{ page.title }}</h1>
|
||||
{% if site.reading_time %}
|
||||
<p class="entry-reading-time">
|
||||
<i class="fa fa-clock-o"></i>
|
||||
{% assign readtime = content | number_of_words | divided_by:site.words_per_minute %}
|
||||
Reading time ~{% if readtime <= 1 %}1 minute{% else %}{{ readtime }} minutes{% endif %}
|
||||
</p><!-- /.entry-reading-time -->
|
||||
{% endif %}
|
||||
</div><!-- /.header-title-wrap -->
|
||||
<span itemprop="name">
|
||||
{% if page.subheadline %}<p class="subheadline">{{ page.subheadline }}</p>{% endif %}
|
||||
<h1>{{ page.title }}</h1>
|
||||
</span>
|
||||
</header>
|
||||
<div class="entry-content">
|
||||
|
||||
|
||||
{% if page.teaser %}
|
||||
<p class="teaser" itemprop="description">
|
||||
{{ page.teaser }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
<span itemprop="articleSection">
|
||||
{{ content }}
|
||||
<footer class="entry-meta">
|
||||
{% if page.modified %}<span>Updated on <span class="entry-date date published updated"><time datetime="{{ page.modified }}">{{ page.modified | date: "%B %d, %Y" }}</time></span></span>
|
||||
<span class="author vcard"><span class="fn">{{ site.owner.name }}</span></span>{% endif %}
|
||||
{% if page.share != false %}{% include social-share.html %}{% endif %}
|
||||
</footer>
|
||||
</div><!-- /.entry-content -->
|
||||
{% if page.comments != false %}<section id="disqus_thread"></section><!-- /#disqus_thread -->{% endif %}
|
||||
</span>
|
||||
|
||||
{% if page.show_meta == true %}
|
||||
{% include meta_information.html %}
|
||||
{% endif %}
|
||||
|
||||
{% if page.comments == true %}
|
||||
{% include comments.html %}
|
||||
{% endif %}
|
||||
</article>
|
||||
</div><!-- /#main -->
|
||||
</div><!-- /.medium-8.columns -->
|
||||
|
||||
<div class="footer-wrapper">
|
||||
<footer role="contentinfo">
|
||||
{% include footer.html %}
|
||||
</footer>
|
||||
</div><!-- /.footer-wrapper -->
|
||||
|
||||
{% include scripts.html %}
|
||||
{% if page.sidebar == "left" %}
|
||||
<div class="medium-4 columns medium-pull-8">
|
||||
{% include sidebar.html %}
|
||||
</div><!-- /.medium-4.columns -->
|
||||
{% endif %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
{% if page.sidebar == "right" %}
|
||||
<div class="medium-4 columns">
|
||||
{% include sidebar.html %}
|
||||
</div><!-- /.medium-4.columns -->
|
||||
{% endif %}
|
||||
</div><!-- /.row -->
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
<!doctype html>
|
||||
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
||||
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
|
||||
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
|
||||
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
|
||||
<head>
|
||||
{% include head.html %}
|
||||
</head>
|
||||
|
||||
<body id="post-index" {% if page.image.feature %}class="feature"{% endif %}>
|
||||
|
||||
{% include browser-upgrade.html %}
|
||||
{% include navigation.html %}
|
||||
|
||||
<div class="entry-header">
|
||||
{% if page.image.credit %}<div class="image-credit">Image source: <a href="{{ page.image.creditlink }}">{{ page.image.credit }}</a></div><!-- /.image-credit -->{% endif %}
|
||||
{% if page.image.feature %}
|
||||
<div class="entry-image">
|
||||
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }}">
|
||||
</div><!-- /.entry-image -->
|
||||
{% endif %}
|
||||
<div class="header-title">
|
||||
<div class="header-title-wrap">
|
||||
<h1>{{ site.title }}</h1>
|
||||
<h2>{{ page.title }}</h2>
|
||||
</div><!-- /.header-title-wrap -->
|
||||
</div><!-- /.header-title -->
|
||||
</div><!-- /.entry-header -->
|
||||
|
||||
<div id="main" role="main">
|
||||
{{ content }}
|
||||
</div><!-- /#main -->
|
||||
|
||||
<div class="footer-wrapper">
|
||||
<footer role="contentinfo">
|
||||
{% include footer.html %}
|
||||
</footer>
|
||||
</div><!-- /.footer-wrapper -->
|
||||
|
||||
{% include scripts.html %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
<!doctype html>
|
||||
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
||||
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
|
||||
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
|
||||
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
|
||||
<head>
|
||||
{% include head.html %}
|
||||
</head>
|
||||
|
||||
<body id="post" {% if page.image.feature %}class="feature"{% endif %}>
|
||||
|
||||
{% include browser-upgrade.html %}
|
||||
{% include navigation.html %}
|
||||
|
||||
{% if page.image.feature %}
|
||||
<div class="entry-header">
|
||||
{% if page.image.credit %}<div class="image-credit">Image source: {% if page.image.creditlink %}<a href="{{ page.image.creditlink }}">{% endif %}{{ page.image.credit }}{% if page.image.creditlink %}</a>{% endif %}</div><!-- /.image-credit -->{% endif %}
|
||||
<div class="entry-image">
|
||||
<img src="{{ site.url }}/images/{{ page.image.feature }}" alt="{{ page.title }}">
|
||||
</div><!-- /.entry-image -->
|
||||
</div><!-- /.entry-header -->
|
||||
{% endif %}
|
||||
|
||||
<div id="main" role="main">
|
||||
<article class="hentry">
|
||||
<header class="header-title">
|
||||
<div class="header-title-wrap">
|
||||
{% if page.link %}
|
||||
<h1 class="entry-title"><i class="fa fa-bookmark permalink"></i> <a href="{{ page.link }}">{{ page.title }}</a></h1>
|
||||
{% else %}
|
||||
<h1 class="entry-title"><a href="{{ site.url }}{{ page.url }}" rel="bookmark" title="{{ page.title }}">{{ page.title }}</a></h1>
|
||||
{% endif %}
|
||||
<h2><span class="entry-date date published"><time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %d, %Y" }}</time></span></h2>
|
||||
{% if site.reading_time %}
|
||||
<p class="entry-reading-time">
|
||||
<i class="fa fa-clock-o"></i>
|
||||
{% assign readtime = content | number_of_words | divided_by:site.words_per_minute %}
|
||||
Reading time ~{% if readtime <= 1 %}1 minute{% else %}{{ readtime }} minutes{% endif %}
|
||||
</p><!-- /.entry-reading-time -->
|
||||
{% endif %}
|
||||
</div><!-- /.header-title-wrap -->
|
||||
</header>
|
||||
<div class="entry-content">
|
||||
{{ content }}
|
||||
<footer class="entry-meta">
|
||||
<span class="entry-tags">{% for tag in page.tags %}<a href="{{ site.url }}/tags/#{{ tag }}" title="Pages tagged {{ tag }}" class="tag"><span class="term">{{ tag }}</span></a>{% unless forloop.last %}{% endunless %}{% endfor %}</span>
|
||||
{% if page.modified %}<span>Updated on <span class="entry-date date updated"><time datetime="{{ page.modified }}">{{ page.modified | date: "%B %d, %Y" }}</time></span></span>
|
||||
<span class="author vcard"><span class="fn">{{ site.owner.name }}</span></span>{% endif %}
|
||||
{% if page.share != false %}{% include social-share.html %}{% endif %}
|
||||
</footer>
|
||||
</div><!-- /.entry-content -->
|
||||
{% if page.comments != false %}<section id="disqus_thread"></section><!-- /#disqus_thread -->{% endif %}
|
||||
{% if site.related_posts.size > 0 %}{% include read-more.html %}{% endif %}
|
||||
</article>
|
||||
</div><!-- /#main -->
|
||||
|
||||
<div class="footer-wrapper">
|
||||
<footer role="contentinfo">
|
||||
{% include footer.html %}
|
||||
</footer>
|
||||
</div><!-- /.footer-wrapper -->
|
||||
|
||||
{% include scripts.html %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
24
_layouts/redirect.html
Normal file
24
_layouts/redirect.html
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
---
|
||||
# This layout is used to redirect pages, if you moved them.
|
||||
# Use the following settings in front matter:
|
||||
#
|
||||
# layout: redirect
|
||||
# sitemap: false
|
||||
# permalink: /old-location/
|
||||
# redirect_to: /new-location/
|
||||
#
|
||||
# Idea and Code by: http://codingtips.kanishkkunal.in/about/
|
||||
---
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="canonical" href="{{ page.redirect_to }}"/>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||
<meta http-equiv="refresh" content="0;url={{ page.redirect_to }}" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Redirecting...</h1>
|
||||
{{ site.language.if_you_are_not_redirected_automatically }} <a href="{{ page.redirect_to }}">{{ site.language.click_here }}<a>.
|
||||
<script>location='{{ page.redirect_to }}'</script>
|
||||
</body>
|
||||
</html>
|
||||
33
_layouts/tag_page.html
Normal file
33
_layouts/tag_page.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<!doctype html>
|
||||
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
||||
<!--[if (IE 7)&!(IEMobile)]><html class="no-js lt-ie9 lt-ie8" lang="en"><![endif]-->
|
||||
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie9" lang="en"><![endif]-->
|
||||
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"><!--<![endif]-->
|
||||
<head>
|
||||
{% include head.html %}
|
||||
</head>
|
||||
|
||||
<body id="page">
|
||||
|
||||
{% include browser-upgrade.html %}
|
||||
{% include navigation.html %}
|
||||
|
||||
<div id="main" role="main">
|
||||
<article class="hentry">
|
||||
<header class="header-title">
|
||||
<div class="header-title-wrap">
|
||||
<h1 class="entry-title">Posts tagged as '{{ page.tag }}'</h1>
|
||||
</div><!-- /.header-title-wrap -->
|
||||
</header>
|
||||
<div class="entry-content">
|
||||
<ul>
|
||||
{% for post in page.posts %}
|
||||
<li><a href="{{ post.url }}">{{ post.title }}</a> ({{ post.date | date_to_string }} | Tags: {{ post | tags }})</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div><!-- /.entry-content -->
|
||||
</article>
|
||||
</div><!-- /#main -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
38
_layouts/video.html
Normal file
38
_layouts/video.html
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
---
|
||||
layout: default
|
||||
format: video
|
||||
---
|
||||
<div class="row">
|
||||
<div class="small-12 columns">
|
||||
<article itemprop="video" itemscope itemtype="http://schema.org/VideoObject">
|
||||
<div class="flex-video">
|
||||
{{ page.iframe}}
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="medium-offset-2 medium-8 end columns">
|
||||
<header>
|
||||
{% if page.subheadline %}<p class="subheadline t30">{{ page.subheadline }}</p>{% endif %}
|
||||
<h1 itemprop="name">{{ page.title }}</h1>
|
||||
</header>
|
||||
|
||||
{% if page.video.thumbnailUrl %}<meta itemprop="thumbnailUrl" content="{{ page.video.thumbnailUrl }}" />{% endif %}
|
||||
{% if page.video.contentURL %}<meta itemprop="contentURL" content="{{ page.video.contentURL }}" />{% endif %}
|
||||
{% if page.video.embedURL %}<meta itemprop="embedURL" content="{{ page.video.embedURL }}" />{% endif %}
|
||||
|
||||
{% if page.teaser %}
|
||||
<p class="teaser" itemprop="description">
|
||||
{{ page.teaser }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{{ content }}
|
||||
{% if page.show_meta == true %}
|
||||
{% include meta_information.html %}
|
||||
{% endif %}
|
||||
</div><!-- /.medium-8.columns -->
|
||||
</div><!-- /.row -->
|
||||
</article>
|
||||
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div><!-- /.row -->
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
# Default extensions
|
||||
post_ext: md
|
||||
page_ext: md
|
||||
|
||||
# Found in _templates/
|
||||
post_layout: post
|
||||
page_layout: page
|
||||
|
||||
# Format titles with titlecase?
|
||||
titlecase: true
|
||||
150
_sass/_01_settings_colors.scss
Normal file
150
_sass/_01_settings_colors.scss
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
/* TOC – Color Variables
|
||||
|
||||
- Basics
|
||||
- Corporate Identity Colorpalette
|
||||
- Foundation Color Variables
|
||||
- Grey Scale
|
||||
- Topbar-Navigation
|
||||
- Footer
|
||||
- Code
|
||||
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/* Basics
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
$text-color: #111;
|
||||
$body-font-color: $text-color;
|
||||
$body-bg: #fdfdfd;
|
||||
|
||||
|
||||
|
||||
/* Corporate Identity Colorpalette
|
||||
https://color.adobe.com/de/Flat-Design-Colors-v2-color-theme-4341903/
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
$ci-1: #334D5C; // dark turquoise
|
||||
$ci-2: #45B29D; // turquoise
|
||||
$ci-3: #EFC94C; // yellow
|
||||
$ci-4: #E27A3F; // orange
|
||||
$ci-5: #DF4949; // red
|
||||
$ci-6: #A1D044; // green
|
||||
|
||||
|
||||
|
||||
/* Foundation Color Variables
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
$primary-color: $ci-1;
|
||||
$secondary-color: $ci-6;
|
||||
$alert-color: $ci-5;
|
||||
$success-color: $ci-6;
|
||||
$warning-color: $ci-4;
|
||||
$info-color: $ci-1;
|
||||
|
||||
|
||||
|
||||
/* Grey Scale
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
$grey-1: #E4E4E4;
|
||||
$grey-2: #D7D7D7;
|
||||
$grey-3: #CBCBCB;
|
||||
$grey-4: #BEBEBE;
|
||||
$grey-5: #A4A4A4;
|
||||
$grey-6: #979797;
|
||||
$grey-7: #8B8B8B;
|
||||
$grey-8: #7E7E7E;
|
||||
$grey-9: #646464;
|
||||
$grey-10: #575757;
|
||||
$grey-11: #4B4B4B;
|
||||
$grey-12: #3E3E3E;
|
||||
$grey-13: #313131;
|
||||
$grey-14: #242424;
|
||||
$grey-15: #171717;
|
||||
$grey-16: #0B0B0B;
|
||||
|
||||
|
||||
|
||||
/* Topbar-Navigation
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
$topbar-bg-color: #fff;
|
||||
|
||||
$topbar-dropdown-toggle-color: $ci-1;
|
||||
|
||||
$topbar-link-color: #000;
|
||||
$topbar-link-color-hover: #000;
|
||||
$topbar-link-color-active: #000;
|
||||
$topbar-link-color-active-hover: #000;
|
||||
|
||||
$topbar-dropdown-label-color: $ci-2;
|
||||
$topbar-dropdown-link-bg-hover: $ci-6;
|
||||
|
||||
$topbar-link-bg-active: $ci-6; // Active Navigation Link
|
||||
$topbar-link-bg-hover: $ci-6;
|
||||
$topbar-link-bg-active-hover: $ci-2;
|
||||
|
||||
|
||||
$topbar-dropdown-bg: $ci-6; // Background Mobile Navigation
|
||||
$topbar-dropdown-link-color: #000;
|
||||
$topbar-dropdown-link-bg: $ci-2;
|
||||
|
||||
$topbar-menu-link-color-toggled: $ci-1;
|
||||
$topbar-menu-icon-color-toggled: $ci-1;
|
||||
$topbar-menu-link-color: #000;
|
||||
$topbar-menu-icon-color: #000;
|
||||
$topbar-menu-link-color-toggled: $ci-6;
|
||||
$topbar-menu-icon-color-toggled: $ci-6;
|
||||
|
||||
|
||||
|
||||
/* Footer
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
$footer-bg: $grey-8;
|
||||
$footer-color: #fff;
|
||||
$footer-link-color: $ci-6;
|
||||
|
||||
|
||||
$subfooter-bg: $grey-13;
|
||||
$subfooter-color: $grey-8;
|
||||
$subfooter-link-color: $grey-8;
|
||||
|
||||
|
||||
|
||||
/* Code
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
$code-background-color: scale-color($secondary-color, $lightness: 70%);
|
||||
|
||||
$highlight-background: #ffffff;
|
||||
$highlight-comment: #999988;
|
||||
$highlight-error: #a61717;
|
||||
$highlight-comment-special: #999999;
|
||||
$highlight-deleted: #000000;
|
||||
$highlight-error-2: #aa0000;
|
||||
$highlight-literal-string: #d14;
|
||||
$highlight-literal-number: #009999;
|
||||
$highlight-name-attribut: #008080;
|
||||
$highlight-error-background: #e3d2d2;
|
||||
$highlight-generic-deleted: #ffdddd;
|
||||
$highlight-generic-deleted-specific: #ffaaaa;
|
||||
$highlight-generic-inserted: #ddffdd;
|
||||
$highlight-generic-inserted-specific: #aaffaa;
|
||||
$highlight-generic-output: #888888;
|
||||
$highlight-generic-prompt: #555555;
|
||||
$highlight-subheading: #aaaaaa;
|
||||
$highlight-keyword-type: #445588;
|
||||
$highlight-name-builtin: #0086B3;
|
||||
$highlight-name-class: #445588;
|
||||
$highlight-name-entity: #800080;
|
||||
$highlight-name-exception: #990000;
|
||||
$highlight-name-function: #990000;
|
||||
$highlight-name-namespace: #555555;
|
||||
$highlight-name-tag: #000080;
|
||||
$highlight-text-whitespace: #bbbbbb;
|
||||
$highlight-literal-string-regex: #009926;
|
||||
$highlight-literal-string-symbol: #990073;
|
||||
59
_sass/_02_settings_typography.scss
Normal file
59
_sass/_02_settings_typography.scss
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
/* TOC – Typography variables
|
||||
|
||||
Modular Scale › http://modularscale.com/scale/?px1=16&px2=36&ra1=1.25&ra2=0
|
||||
|
||||
- Fonts
|
||||
- Font Weight
|
||||
- Font Size Variables
|
||||
|
||||
*/
|
||||
|
||||
@import "functions"; // Allows the use of rem-calc() or lower-bound() in your settings
|
||||
|
||||
|
||||
|
||||
/* Fonts
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
$base-font-size: 16px;
|
||||
$rem-base: $base-font-size;
|
||||
// $base-line-height is 24px while $base-font-size is 16px
|
||||
$base-line-height: 1.5 !default;
|
||||
|
||||
|
||||
$font-family-sans-serif: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
$font-family-serif: "Volkhov", Georgia, Times, serif;
|
||||
$font-family-monospace: "Lucida Console", Monaco, monospace;
|
||||
|
||||
$body-font-family: $font-family-sans-serif;
|
||||
$body-font-weight: normal;
|
||||
$body-font-style: normal;
|
||||
|
||||
$header-font-family: $font-family-serif;
|
||||
|
||||
|
||||
|
||||
/* Font Weight
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
$font-weight-normal: normal;
|
||||
$font-weight-bold: bold;
|
||||
|
||||
|
||||
|
||||
/* Font Size Variables
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
$font-size-p: $base-font-size;
|
||||
$font-size-h1: 2.441em;
|
||||
$font-size-h2: 1.953em;
|
||||
$font-size-h3: 1.563em;
|
||||
$font-size-h4: 1.25em;
|
||||
$font-size-h5: 1.152em;
|
||||
$font-size-small: 0.8em;
|
||||
|
||||
.font-size-h1 { font-size: $font-size-h1; }
|
||||
.font-size-h2 { font-size: $font-size-h2; }
|
||||
.font-size-h3 { font-size: $font-size-h3; }
|
||||
.font-size-h4 { font-size: $font-size-h4; }
|
||||
.font-size-h5 { font-size: $font-size-h5; }
|
||||
432
_sass/_03_settings_mixins_media_queries.scss
Normal file
432
_sass/_03_settings_mixins_media_queries.scss
Normal file
|
|
@ -0,0 +1,432 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
//
|
||||
// Foundation Variables
|
||||
//
|
||||
|
||||
// Data attribute namespace
|
||||
// styles get applied to [data-mysite-plugin], etc
|
||||
$namespace: false !default;
|
||||
|
||||
// The default font-size is set to 100% of the browser style sheet (usually 16px)
|
||||
// for compatibility with browser-based text zoom or user-set defaults.
|
||||
|
||||
// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
|
||||
// If you want your base font-size to be different and not have it affect the grid breakpoints,
|
||||
// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
|
||||
$base-font-size: 100% !default;
|
||||
|
||||
|
||||
|
||||
//
|
||||
// Global Foundation Mixins
|
||||
//
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this to control border radius.
|
||||
// $radius - Default: $global-radius || 4px
|
||||
@mixin radius($radius:$global-radius) {
|
||||
@if $radius {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this to create equal side border radius on elements.
|
||||
// $side - Options: left, right, top, bottom
|
||||
@mixin side-radius($side, $radius:$global-radius) {
|
||||
@if ($side == left or $side == right) {
|
||||
-webkit-border-bottom-#{$side}-radius: $radius;
|
||||
-webkit-border-top-#{$side}-radius: $radius;
|
||||
border-bottom-#{$side}-radius: $radius;
|
||||
border-top-#{$side}-radius: $radius;
|
||||
} @else {
|
||||
-webkit-#{$side}-left-radius: $radius;
|
||||
-webkit-#{$side}-right-radius: $radius;
|
||||
border-#{$side}-left-radius: $radius;
|
||||
border-#{$side}-right-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We can control whether or not we have inset shadows edges.
|
||||
// $active - Default: true, Options: false
|
||||
@mixin inset-shadow($active:true) {
|
||||
box-shadow: $shiny-edge-size $shiny-edge-color inset;
|
||||
|
||||
@if $active { &:active {
|
||||
box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } }
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this to add transitions to elements
|
||||
// $property - Default: all, Options: http://www.w3.org/TR/css3-transitions/#animatable-properties
|
||||
// $speed - Default: 300ms
|
||||
// $ease - Default:ease-out, Options: http://css-tricks.com/almanac/properties/t/transition-timing-function/
|
||||
@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
|
||||
transition: $property $speed $ease;
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this to add box-sizing across browser prefixes
|
||||
@mixin box-sizing($type:border-box) {
|
||||
-webkit-box-sizing: $type; // Android < 2.3, iOS < 4
|
||||
-moz-box-sizing: $type; // Firefox < 29
|
||||
box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this to create isosceles triangles
|
||||
// $triangle-size - Used to set border-size. No default, set a px or em size.
|
||||
// $triangle-color - Used to set border-color which makes up triangle. No default
|
||||
// $triangle-direction - Used to determine which direction triangle points. Options: top, bottom, left, right
|
||||
@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: inset $triangle-size;
|
||||
@if ($triangle-direction == top) {
|
||||
border-color: $triangle-color transparent transparent transparent;
|
||||
border-top-style: solid;
|
||||
}
|
||||
@if ($triangle-direction == bottom) {
|
||||
border-color: transparent transparent $triangle-color transparent;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
@if ($triangle-direction == left) {
|
||||
border-color: transparent transparent transparent $triangle-color;
|
||||
border-left-style: solid;
|
||||
}
|
||||
@if ($triangle-direction == right) {
|
||||
border-color: transparent $triangle-color transparent transparent;
|
||||
border-right-style: solid;
|
||||
}
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this to create the icon with three lines aka the hamburger icon, the menu-icon or the navicon
|
||||
// $width - Width of hamburger icon in rem
|
||||
// $left - If false, icon will be centered horizontally || explicitly set value in rem
|
||||
// $top - If false, icon will be centered vertically || explicitly set value in rem
|
||||
// $thickness - thickness of lines in hamburger icon, set value in px
|
||||
// $gap - spacing between the lines in hamburger icon, set value in px
|
||||
// $color - icon color
|
||||
// $hover-color - icon color during hover
|
||||
// $offcanvas - Set to true of @include in offcanvas
|
||||
@mixin hamburger($width, $left, $top, $thickness, $gap, $color, $hover-color, $offcanvas) {
|
||||
span::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 0;
|
||||
|
||||
@if $offcanvas {
|
||||
@if $top {
|
||||
top: $top;
|
||||
}
|
||||
@else {
|
||||
top: 50%;
|
||||
margin-top: (-$width/2);
|
||||
}
|
||||
@if $left {
|
||||
left: $left;
|
||||
}
|
||||
@else {
|
||||
left: ($tabbar-menu-icon-width - $width)/2;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
top: 50%;
|
||||
margin-top: -($width/2);
|
||||
#{$opposite-direction}: $topbar-link-padding;
|
||||
}
|
||||
|
||||
box-shadow:
|
||||
0 0 0 $thickness $color,
|
||||
0 $gap + $thickness 0 $thickness $color,
|
||||
0 (2 * $gap + 2*$thickness) 0 $thickness $color;
|
||||
width: $width;
|
||||
}
|
||||
span:hover:after {
|
||||
box-shadow:
|
||||
0 0 0 $thickness $hover-color,
|
||||
0 $gap + $thickness 0 $thickness $hover-color,
|
||||
0 (2 * $gap + 2*$thickness) 0 $thickness $hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
// We use this to do clear floats
|
||||
@mixin clearfix {
|
||||
&:before, &:after { content: " "; display: table; }
|
||||
&:after { clear: both; }
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this to add a glowing effect to block elements
|
||||
// $selector - Used for selector state. Default: focus, Options: hover, active, visited
|
||||
// $fade-time - Default: 300ms
|
||||
// $glowing-effect-color - Default: fade-out($primary-color, .25)
|
||||
@mixin block-glowing-effect($selector:focus, $fade-time:300ms, $glowing-effect-color:fade-out($primary-color, .25)) {
|
||||
transition: box-shadow $fade-time, border-color $fade-time ease-in-out;
|
||||
|
||||
&:#{$selector} {
|
||||
box-shadow: 0 0 5px $glowing-effect-color;
|
||||
border-color: $glowing-effect-color;
|
||||
}
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this to translate elements in 2D
|
||||
// $horizontal: Default: 0
|
||||
// $vertical: Default: 0
|
||||
@mixin translate2d($horizontal:0, $vertical:0) {
|
||||
transform: translate($horizontal,$vertical)
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// Makes an element visually hidden, but accessible.
|
||||
// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
||||
@mixin element-invisible {
|
||||
position: absolute !important;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// Turns off the element-invisible effect.
|
||||
@mixin element-invisible-off {
|
||||
position: static !important;
|
||||
height: auto;
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
}
|
||||
|
||||
|
||||
// We use these to control text direction settings
|
||||
$text-direction: ltr !default;
|
||||
$default-float: left !default;
|
||||
$opposite-direction: right !default;
|
||||
@if $text-direction == ltr {
|
||||
$default-float: left;
|
||||
$opposite-direction: right;
|
||||
} @else {
|
||||
$default-float: right;
|
||||
$opposite-direction: left;
|
||||
}
|
||||
|
||||
// We use these to control inset shadow shiny edges and depressions.
|
||||
$shiny-edge-size: 0 1px 0 !default;
|
||||
$shiny-edge-color: rgba(#fff, .5) !default;
|
||||
$shiny-edge-active-color: rgba(#000, .2) !default;
|
||||
|
||||
// We use this to control whether or not CSS classes come through in the gem files.
|
||||
$include-html-classes: true !default;
|
||||
$include-print-styles: true !default;
|
||||
$include-html-global-classes: $include-html-classes !default;
|
||||
|
||||
$column-gutter: rem-calc(30) !default;
|
||||
|
||||
|
||||
|
||||
|
||||
// d. Media Query Ranges
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
$small-range: (0em, 40em);
|
||||
$medium-range: (40.063em, 64em);
|
||||
$large-range: (64.063em, 90em);
|
||||
$xlarge-range: (90.063em, 120em);
|
||||
$xxlarge-range: (120.063em, 99999999em);
|
||||
|
||||
|
||||
$screen: "only screen" !default;
|
||||
|
||||
$landscape: "#{$screen} and (orientation: landscape)" !default;
|
||||
$portrait: "#{$screen} and (orientation: portrait)" !default;
|
||||
|
||||
$small-up: $screen !default;
|
||||
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";
|
||||
|
||||
$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
|
||||
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;
|
||||
|
||||
$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
|
||||
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;
|
||||
|
||||
$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
|
||||
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;
|
||||
|
||||
$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
|
||||
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;
|
||||
|
||||
// Legacy
|
||||
$small: $medium-up;
|
||||
$medium: $medium-up;
|
||||
$large: $large-up;
|
||||
|
||||
//We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
|
||||
$cursor-auto-value: auto !default;
|
||||
$cursor-crosshair-value: crosshair !default;
|
||||
$cursor-default-value: default !default;
|
||||
$cursor-pointer-value: pointer !default;
|
||||
$cursor-help-value: help !default;
|
||||
$cursor-text-value: text !default;
|
||||
|
||||
|
||||
@include exports("global") {
|
||||
|
||||
// Meta styles are included in all builds, as they are a dependancy of the Javascript.
|
||||
// Used to provide media query values for javascript components.
|
||||
// Forward slash placed around everything to convince PhantomJS to read the value.
|
||||
|
||||
meta.foundation-version {
|
||||
font-family: "/5.5.0/";
|
||||
}
|
||||
|
||||
meta.foundation-mq-small {
|
||||
font-family: "/" + unquote($small-up) + "/";
|
||||
width: lower-bound($small-range);
|
||||
}
|
||||
|
||||
meta.foundation-mq-small-only {
|
||||
font-family: "/" + unquote($small-only) + "/";
|
||||
width: lower-bound($small-range);
|
||||
}
|
||||
|
||||
meta.foundation-mq-medium {
|
||||
font-family: "/" + unquote($medium-up) + "/";
|
||||
width: lower-bound($medium-range);
|
||||
}
|
||||
|
||||
meta.foundation-mq-medium-only {
|
||||
font-family: "/" + unquote($medium-only) + "/";
|
||||
width: lower-bound($medium-range);
|
||||
}
|
||||
|
||||
meta.foundation-mq-large {
|
||||
font-family: "/" + unquote($large-up) + "/";
|
||||
width: lower-bound($large-range);
|
||||
}
|
||||
|
||||
meta.foundation-mq-large-only {
|
||||
font-family: "/" + unquote($large-only) + "/";
|
||||
width: lower-bound($large-range);
|
||||
}
|
||||
|
||||
meta.foundation-mq-xlarge {
|
||||
font-family: "/" + unquote($xlarge-up) + "/";
|
||||
width: lower-bound($xlarge-range);
|
||||
}
|
||||
|
||||
meta.foundation-mq-xlarge-only {
|
||||
font-family: "/" + unquote($xlarge-only) + "/";
|
||||
width: lower-bound($xlarge-range);
|
||||
}
|
||||
|
||||
meta.foundation-mq-xxlarge {
|
||||
font-family: "/" + unquote($xxlarge-up) + "/";
|
||||
width: lower-bound($xxlarge-range);
|
||||
}
|
||||
|
||||
meta.foundation-data-attribute-namespace {
|
||||
font-family: #{$namespace};
|
||||
}
|
||||
|
||||
@if $include-html-global-classes {
|
||||
|
||||
// Must be 100% for off canvas to work
|
||||
html, body { height: 100%; }
|
||||
|
||||
// Set box-sizing globally to handle padding and border widths
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
html,
|
||||
body { font-size: $base-font-size; }
|
||||
|
||||
// Default body styles
|
||||
body {
|
||||
background: $body-bg;
|
||||
color: $body-font-color;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: $body-font-family;
|
||||
font-weight: $body-font-weight;
|
||||
font-style: $body-font-style;
|
||||
line-height: $base-line-height; // Set to $base-line-height to take on browser default of 150%
|
||||
position: relative;
|
||||
cursor: $cursor-auto-value;
|
||||
}
|
||||
|
||||
a:hover { cursor: $cursor-pointer-value; }
|
||||
|
||||
// Grid Defaults to get images and embeds to work properly
|
||||
img { max-width: 100%; height: auto; }
|
||||
|
||||
img { -ms-interpolation-mode: bicubic; }
|
||||
|
||||
#map_canvas,
|
||||
.map_canvas {
|
||||
img,
|
||||
embed,
|
||||
object { max-width: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Miscellaneous useful HTML classes
|
||||
.left { float: left !important; }
|
||||
.right { float: right !important; }
|
||||
.clearfix { @include clearfix; }
|
||||
|
||||
// Hide visually and from screen readers
|
||||
.hide {
|
||||
display: none !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// Hide visually and from screen readers, but maintain layout
|
||||
.invisible { visibility: hidden; }
|
||||
|
||||
// Font smoothing
|
||||
// Antialiased font smoothing works best for light text on a dark background.
|
||||
// Apply to single elements instead of globally to body.
|
||||
// Note this only applies to webkit-based desktop browsers and Firefox 25 (and later) on the Mac.
|
||||
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
|
||||
|
||||
// Get rid of gap under images by making them display: inline-block; by default
|
||||
img {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
//
|
||||
// Global resets for forms
|
||||
//
|
||||
|
||||
// Make sure textarea takes on height automatically
|
||||
textarea { height: auto; min-height: 50px; }
|
||||
|
||||
// Make select elements 100% width by default
|
||||
select { width: 100%; }
|
||||
}
|
||||
}
|
||||
1452
_sass/_04_settings_global.scss
Normal file
1452
_sass/_04_settings_global.scss
Normal file
File diff suppressed because it is too large
Load diff
427
_sass/_05_normalize.scss
Normal file
427
_sass/_05_normalize.scss
Normal file
|
|
@ -0,0 +1,427 @@
|
|||
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
|
||||
|
||||
/**
|
||||
* 1. Set default font family to sans-serif.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined for any HTML5 element in IE 8/9.
|
||||
* Correct `block` display not defined for `details` or `summary` in IE 10/11
|
||||
* and Firefox.
|
||||
* Correct `block` display not defined for `main` in IE 11.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `inline-block` display not defined in IE 8/9.
|
||||
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `[hidden]` styling not present in IE 8/9/10.
|
||||
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
|
||||
*/
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background color from active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove border when inside `a` element in IE 8/9/10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow not hidden in IE 9/10/11.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 8/9 and Safari.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Contain overflow in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address odd `em`-unit font size rendering in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
* styling of `select`, unless a `border` property is set.
|
||||
*/
|
||||
|
||||
/**
|
||||
* 1. Correct color not being inherited.
|
||||
* Known issue: affects color of disabled elements.
|
||||
* 2. Correct font properties not being inherited.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `overflow` set to `hidden` in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
button {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
||||
* Correct `select` style inheritance in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* It's recommended that you don't attempt to style these elements.
|
||||
* Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||
*
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
* 2. Remove excess padding in IE 8/9/10.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||
* `font-size` values of the `input`, it causes the cursor style of the
|
||||
* decrement button to change from `default` to `text`.
|
||||
*/
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
* Safari (but not Chrome) clips the cancel button when the search input has
|
||||
* padding (and `textfield` appearance).
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9/10/11.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default vertical scrollbar in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't inherit the `font-weight` (applied by a rule above).
|
||||
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
*/
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
477
_sass/_06_typography.scss
Normal file
477
_sass/_06_typography.scss
Normal file
|
|
@ -0,0 +1,477 @@
|
|||
/* TOC – Typography
|
||||
|
||||
Check typography variables › _3_typography_settings.scss
|
||||
|
||||
- Links
|
||||
- Customize Foundation Typography
|
||||
- Headlines
|
||||
- Images
|
||||
- Lists
|
||||
- Tables
|
||||
- Code
|
||||
- Quotes
|
||||
- Typography for Articles
|
||||
- Smaller Fontsize for Bigteaser on small devices
|
||||
- Additional typographical elements
|
||||
- Footnotes
|
||||
- Icon Font
|
||||
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/* Links
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
a,
|
||||
a:link {}
|
||||
|
||||
a:visited {
|
||||
border-bottom: $grey-2;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: darken( $ci-1, 10% );
|
||||
}
|
||||
|
||||
a:focus {
|
||||
color: lighten( $ci-1, 20% );
|
||||
}
|
||||
|
||||
a:active {
|
||||
color: darken( $ci-1, 20% );
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Customize Foundation Typography
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
p {
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
p a,
|
||||
article a {
|
||||
font-weight: bold;
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
p a:hover,
|
||||
article a:hover {
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
p a.button,
|
||||
.button,
|
||||
.button:hover {
|
||||
border: 0;
|
||||
color: #fff;
|
||||
}
|
||||
p.button a {
|
||||
border: 0;
|
||||
color: #fff;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Headlines
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: $header-font-family;
|
||||
font-weight: normal;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $font-size-h1;
|
||||
margin-top: 0;
|
||||
}
|
||||
h2 {
|
||||
font-size: $font-size-h2;
|
||||
margin: 1.563em 0 0 0;
|
||||
}
|
||||
.blog-index h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
h3 {
|
||||
font-size: $font-size-h3;
|
||||
margin: 1.152em 0 0 0;
|
||||
}
|
||||
h4 {
|
||||
font-size: $font-size-h4;
|
||||
margin: 1.152em 0 0 0;
|
||||
}
|
||||
h5 {
|
||||
font-size: $font-size-h5;
|
||||
margin: 1em 0 0 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Images
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
img { border-radius: $global-radius;}
|
||||
img.alignleft,
|
||||
img.left { float: left; margin:5px 15px 5px 0; }
|
||||
img.alignright,
|
||||
img.right { float: right; margin:5px 0 5px 15px; }
|
||||
img.aligncenter,
|
||||
img.center { display: block; margin:0 auto 10px; }
|
||||
|
||||
figure {
|
||||
margin: 0 0 rem-calc(30) 0;
|
||||
}
|
||||
#masthead-with-background-color figure,
|
||||
#masthead-with-pattern figure {
|
||||
margin: 0;
|
||||
}
|
||||
figcaption,
|
||||
.masthead-caption {
|
||||
color: $grey-10;
|
||||
font-family: $font-family-sans-serif;
|
||||
font-size: rem-calc(13);
|
||||
padding-top: rem-calc(2);
|
||||
}
|
||||
figcaption a,
|
||||
.masthead-caption a {
|
||||
border-bottom: 1px dotted $grey-4;
|
||||
color: $grey-10;
|
||||
}
|
||||
figcaption a:hover,
|
||||
.masthead-caption a:hover {
|
||||
border-bottom: 2px solid $primary-color;
|
||||
color: $primary-color;
|
||||
}
|
||||
.masthead-caption {
|
||||
padding-right: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Tables
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Code
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
margin-bottom: rem-calc(20);
|
||||
padding: 5px;
|
||||
background-color: $code-background-color;
|
||||
border-radius: $global-radius;
|
||||
}
|
||||
pre code {
|
||||
padding: rem-calc(2) rem-calc(5) rem-calc(1) rem-calc(0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: rem-calc(14);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Lists
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
ul, ol {
|
||||
margin-left: 20px;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.no-bullet {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
> ul,
|
||||
> ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
dl {
|
||||
|
||||
}
|
||||
dt:first-child {
|
||||
padding-top: 0px;
|
||||
}
|
||||
dt {
|
||||
font-weight: bold;
|
||||
padding-top: 30px;
|
||||
}
|
||||
dd {
|
||||
}
|
||||
article dl dt { line-height: 1.3; }
|
||||
article dl dd { line-height: 1.6; margin-bottom: rem-calc(12); margin-left: rem-calc(24); }
|
||||
|
||||
|
||||
|
||||
/* Quotes
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
position: relative;
|
||||
border: none;
|
||||
margin: 0 30px 30px 30px;
|
||||
color: #4b4b4d
|
||||
}
|
||||
|
||||
blockquote p {font-style: italic; color: $grey-10; }
|
||||
|
||||
blockquote:before {
|
||||
display:block;content:"\00BB";
|
||||
font-size:80px;
|
||||
position:absolute;
|
||||
left:-25px;
|
||||
top:-40px;
|
||||
color:#4b4b4d
|
||||
}
|
||||
blockquote:after {
|
||||
display:block;
|
||||
content:"\00AB";
|
||||
font-size:80px;
|
||||
position:absolute;
|
||||
right:-10px;
|
||||
bottom:-40px;
|
||||
color:#4b4b4d;
|
||||
}
|
||||
blockquote cite:before {
|
||||
content:"\2014 \0020"
|
||||
}
|
||||
blockquote cite a,blockquote cite a:visited {
|
||||
color: #555
|
||||
}
|
||||
cite {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
button, .button {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: scale-color($warning-color, $lightness: 60%);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Typography for Articles
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
.subheadline {
|
||||
font-size: rem-calc(16);
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.teaser {
|
||||
font-size: rem-calc(20);
|
||||
}
|
||||
.big-teaser {
|
||||
font-style: italic; font-weight: 300;
|
||||
}
|
||||
.big-teaser a {
|
||||
font-style: italic; font-weight: 400;
|
||||
}
|
||||
|
||||
/* Smaller Fontsize for Bigteaser on small devices */
|
||||
@media only screen {
|
||||
.big-teaser {
|
||||
font-size: rem-calc(20);
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 40.063em) {
|
||||
.big-teaser {
|
||||
font-size: rem-calc(29);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Additional typographical elements
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
.sans { font-family: $font-family-sans-serif; }
|
||||
.serif { font-family: $font-family-serif; }
|
||||
|
||||
.font-size-h1 { font-size: $font-size-h1; }
|
||||
.font-size-h2 { font-size: $font-size-h2; }
|
||||
.font-size-h3 { font-size: $font-size-h3; }
|
||||
.font-size-h4 { font-size: $font-size-h4; }
|
||||
.font-size-h5 { font-size: $font-size-h5; }
|
||||
.font-size-p { font-size: $font-size-p; }
|
||||
|
||||
|
||||
|
||||
/* Footnotes
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
.footnotes {
|
||||
margin-top: 60px;
|
||||
}
|
||||
.footnotes ol {
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Icon Font
|
||||
See the icon-set/preview in /assets/fonts/iconfont-preview.html
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('../fonts/iconfont.eot'); /* IE9 Compat Modes */
|
||||
src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||
url('../fonts/iconfont.woff') format('woff'), /* Pretty Modern Browsers */
|
||||
url('../fonts/iconfont.ttf') format('truetype'), /* Safari, Android, iOS */
|
||||
url('../fonts/iconfont.svg#svgFontName') format('svg'); /* Legacy iOS */
|
||||
}
|
||||
|
||||
.iconfont { font-family: iconfont; }
|
||||
.iconfont-48 { font-size: 48px; }
|
||||
|
||||
|
||||
[data-icon]:before { content: attr(data-icon); }
|
||||
|
||||
[data-icon]:before,
|
||||
.icon-archive:before,
|
||||
.icon-browser:before,
|
||||
.icon-calendar:before,
|
||||
.icon-camera:before,
|
||||
.icon-chat:before,
|
||||
.icon-check:before,
|
||||
.icon-chevron-down:before,
|
||||
.icon-chevron-left:before,
|
||||
.icon-chevron-right:before,
|
||||
.icon-chevron-up:before,
|
||||
.icon-circle-with-cross:before,
|
||||
.icon-circle-with-minus:before,
|
||||
.icon-circle-with-plus:before,
|
||||
.icon-cloud:before,
|
||||
.icon-code:before,
|
||||
.icon-cog:before,
|
||||
.icon-dropbox:before,
|
||||
.icon-edit:before,
|
||||
.icon-export:before,
|
||||
.icon-eye:before,
|
||||
.icon-facebook:before,
|
||||
.icon-feather:before,
|
||||
.icon-github:before,
|
||||
.icon-globe:before,
|
||||
.icon-heart:before,
|
||||
.icon-heart-outlined:before,
|
||||
.icon-home:before,
|
||||
.icon-instagram:before,
|
||||
.icon-lab-flask:before,
|
||||
.icon-leaf:before,
|
||||
.icon-linkedin:before,
|
||||
.icon-mail:before,
|
||||
.icon-message:before,
|
||||
.icon-mic:before,
|
||||
.icon-network:before,
|
||||
.icon-paper-plane:before,
|
||||
.icon-pinterest:before,
|
||||
.icon-price-tag:before,
|
||||
.icon-rocket:before,
|
||||
.icon-rss:before,
|
||||
.icon-soundcloud:before,
|
||||
.icon-star:before,
|
||||
.icon-star-outlined:before,
|
||||
.icon-thumbs-down:before,
|
||||
.icon-thumbs-up:before,
|
||||
.icon-tree:before,
|
||||
.icon-tumblr:before,
|
||||
.icon-twitter:before,
|
||||
.icon-upload-to-cloud:before,
|
||||
.icon-video:before,
|
||||
.icon-vimeo:before,
|
||||
.icon-warning:before,
|
||||
.icon-xing:before,
|
||||
.icon-youtube:before {
|
||||
display: inline-block;
|
||||
font-family: "iconfont";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
line-height: 1;
|
||||
text-decoration: inherit;
|
||||
text-rendering: optimizeLegibility;
|
||||
text-transform: none;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.icon-archive:before { content: "\f100"; }
|
||||
.icon-browser:before { content: "\f101"; }
|
||||
.icon-calendar:before { content: "\f133"; }
|
||||
.icon-camera:before { content: "\f102"; }
|
||||
.icon-chat:before { content: "\f103"; }
|
||||
.icon-check:before { content: "\f104"; }
|
||||
.icon-chevron-down:before { content: "\f105"; }
|
||||
.icon-chevron-left:before { content: "\f106"; }
|
||||
.icon-chevron-right:before { content: "\f107"; }
|
||||
.icon-chevron-up:before { content: "\f108"; }
|
||||
.icon-circle-with-cross:before { content: "\f109"; }
|
||||
.icon-circle-with-minus:before { content: "\f10a"; }
|
||||
.icon-circle-with-plus:before { content: "\f10b"; }
|
||||
.icon-cloud:before { content: "\f10c"; }
|
||||
.icon-code:before { content: "\f10d"; }
|
||||
.icon-cog:before { content: "\f10e"; }
|
||||
.icon-dropbox:before { content: "\f10f"; }
|
||||
.icon-edit:before { content: "\f110"; }
|
||||
.icon-export:before { content: "\f111"; }
|
||||
.icon-eye:before { content: "\f112"; }
|
||||
.icon-facebook:before { content: "\f113"; }
|
||||
.icon-feather:before { content: "\f114"; }
|
||||
.icon-github:before { content: "\f115"; }
|
||||
.icon-globe:before { content: "\f116"; }
|
||||
.icon-heart:before { content: "\f117"; }
|
||||
.icon-heart-outlined:before { content: "\f118"; }
|
||||
.icon-home:before { content: "\f119"; }
|
||||
.icon-instagram:before { content: "\f11a"; }
|
||||
.icon-lab-flask:before { content: "\f11b"; }
|
||||
.icon-leaf:before { content: "\f11c"; }
|
||||
.icon-linkedin:before { content: "\f11d"; }
|
||||
.icon-mail:before { content: "\f11e"; }
|
||||
.icon-message:before { content: "\f11f"; }
|
||||
.icon-mic:before { content: "\f120"; }
|
||||
.icon-network:before { content: "\f121"; }
|
||||
.icon-paper-plane:before { content: "\f122"; }
|
||||
.icon-pinterest:before { content: "\f123"; }
|
||||
.icon-price-tag:before { content: "\f124"; }
|
||||
.icon-rocket:before { content: "\f125"; }
|
||||
.icon-rss:before { content: "\f126"; }
|
||||
.icon-soundcloud:before { content: "\f127"; }
|
||||
.icon-star:before { content: "\f128"; }
|
||||
.icon-star-outlined:before { content: "\f129"; }
|
||||
.icon-thumbs-down:before { content: "\f12a"; }
|
||||
.icon-thumbs-up:before { content: "\f12b"; }
|
||||
.icon-tree:before { content: "\f134"; }
|
||||
.icon-tumblr:before { content: "\f12c"; }
|
||||
.icon-twitter:before { content: "\f12d"; }
|
||||
.icon-upload-to-cloud:before { content: "\f12e"; }
|
||||
.icon-video:before { content: "\f12f"; }
|
||||
.icon-vimeo:before { content: "\f130"; }
|
||||
.icon-warning:before { content: "\f131"; }
|
||||
.icon-xing:before { content: "\f135"; }
|
||||
.icon-youtube:before { content: "\f132"; }
|
||||
338
_sass/_07_layout.scss
Normal file
338
_sass/_07_layout.scss
Normal file
|
|
@ -0,0 +1,338 @@
|
|||
/* TOC
|
||||
|
||||
- Adjustments: Video Layout
|
||||
- Navigation
|
||||
- Search
|
||||
- Masthead
|
||||
- Masthead › small-only
|
||||
- Masthead › medium-only
|
||||
- Masthead › large-only
|
||||
- Masthead › xlarge-up
|
||||
- Breadcrumb
|
||||
- Meta
|
||||
- Jump to top
|
||||
- Footer
|
||||
- Subfooter
|
||||
- CSS-Classes to add margin at top or bottom
|
||||
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/* Adjustments: Video Layout
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
body.video,
|
||||
body.video #masthead-no-image-header { background: #000; }
|
||||
body.video #masthead-no-image-header { margin-bottom: 60px; }
|
||||
body.video h1,
|
||||
body.video h2,
|
||||
body.video h3,
|
||||
body.video h4,
|
||||
body.video h5,
|
||||
body.video h6,
|
||||
body.video p,
|
||||
body.video a,
|
||||
body.video blockquote:before,
|
||||
body.video blockquote:after,
|
||||
body.video cite a, { color: #fff; }
|
||||
body.video cite a:visited, { color: #fff; }
|
||||
body.video cite { color: #fff; }
|
||||
|
||||
|
||||
|
||||
/* Navigation
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
#navigation {
|
||||
-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.2);
|
||||
box-shadow: 0 2px 3px 0 rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Search
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
#search {
|
||||
padding: 20px 0 0 0;
|
||||
background: $ci-4;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Masthead
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
#masthead {
|
||||
background: $primary-color;
|
||||
}
|
||||
#masthead-no-image-header {
|
||||
background: $primary-color;
|
||||
}
|
||||
#masthead-with-text {
|
||||
text-align: center;
|
||||
font-size: rem-calc(54);
|
||||
font-family: $header-font-family;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0 2px 3px rgba(0,0,0,.4);
|
||||
}
|
||||
#masthead-no-image-header {
|
||||
height: 175px;
|
||||
}
|
||||
#masthead-no-image-header #logo img {
|
||||
margin-top: 60px;
|
||||
}
|
||||
.backstretch {
|
||||
background: $primary-color;
|
||||
}
|
||||
|
||||
/* Masthead › small-only
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
@media #{$small-only} {
|
||||
#logo img {
|
||||
display: none;
|
||||
}
|
||||
#masthead {
|
||||
height: 200px;
|
||||
}
|
||||
#masthead-with-pattern {
|
||||
padding: 15px 0;
|
||||
}
|
||||
#masthead-with-background-color {
|
||||
padding: 15px 0;
|
||||
}
|
||||
#masthead-with-text {
|
||||
height: 220px;
|
||||
padding: 30px 0;
|
||||
font-size: rem-calc(36);
|
||||
}
|
||||
#masthead-no-image-header {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Masthead › medium-only
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
@media #{$medium-only} {
|
||||
#logo img {
|
||||
margin-top: 60px;
|
||||
}
|
||||
#masthead {
|
||||
height: 280px;
|
||||
}
|
||||
#masthead-with-pattern {
|
||||
padding: 20px 0;
|
||||
}
|
||||
#masthead-with-background-color {
|
||||
padding: 20px 0;
|
||||
}
|
||||
#masthead-with-text {
|
||||
padding: 60px 0;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Masthead › large-only
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
@media #{$large-only} {
|
||||
#logo img {
|
||||
margin-top: 80px;
|
||||
}
|
||||
#masthead {
|
||||
height: 310px;
|
||||
}
|
||||
#masthead-with-pattern {
|
||||
padding: 30px 0;
|
||||
}
|
||||
#masthead-with-background-color {
|
||||
padding: 30px 0;
|
||||
}
|
||||
#masthead-with-text {
|
||||
height: 330px;
|
||||
padding: 60px 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Masthead › xlarge-up
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
@media #{$xlarge-up} {
|
||||
#logo img {
|
||||
margin-top: 110px;
|
||||
}
|
||||
#masthead {
|
||||
height: 380px;
|
||||
}
|
||||
#masthead-with-pattern {
|
||||
padding: 45px 0;
|
||||
}
|
||||
#masthead-with-background-color {
|
||||
padding: 45px 0;
|
||||
}
|
||||
#masthead-with-text {
|
||||
padding: 95px 0;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#title-image-small {
|
||||
height: 240px;
|
||||
}
|
||||
#title-image-large {
|
||||
height: 520px;
|
||||
}
|
||||
#title-image-index-small {
|
||||
height: 120px;
|
||||
}
|
||||
#title-image-index-large {
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Breadcrumb
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
#breadcrumb {
|
||||
background: scale-color($grey-1, $lightness: 55%);
|
||||
border-top: 1px solid scale-color($grey-1, $lightness: 45%);
|
||||
border-bottom: 1px solid scale-color($grey-1, $lightness: 45%);
|
||||
}
|
||||
.breadcrumbs>.current {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
/* Meta
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
#page-meta, #page-meta a {
|
||||
color: $grey-5;
|
||||
}
|
||||
|
||||
#page-meta .button {
|
||||
background: $grey-5;
|
||||
border: 0;
|
||||
}
|
||||
#page-meta .button {
|
||||
color: #fff;
|
||||
}
|
||||
#page-meta .button:hover {
|
||||
background: $primary-color;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Jump to top
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
#up-to-top {
|
||||
padding: 160px 0 10px 0;
|
||||
}
|
||||
#up-to-top a {
|
||||
font-size: 24px;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
#up-to-top a:hover {
|
||||
background: $grey-2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Footer
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
#footer {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 20px;
|
||||
background: $footer-bg;
|
||||
color: $footer-color;
|
||||
}
|
||||
footer p,
|
||||
footer li {
|
||||
font-size: rem-calc(13);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
#footer a {
|
||||
color: $footer-link-color;
|
||||
}
|
||||
#footer h4,
|
||||
#footer h5 {
|
||||
letter-spacing: 1px;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Subfooter
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
#subfooter {
|
||||
background: $subfooter-bg;
|
||||
color: $subfooter-color;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
#subfooter-left ul.inline-list {
|
||||
float: left;
|
||||
}
|
||||
#subfooter li a {
|
||||
color: $subfooter-link-color;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#subfooter li a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
#subfooter .social-icons li a {
|
||||
font-size: rem-calc(23);
|
||||
display: block;
|
||||
width: 36px;
|
||||
border-radius: 50%;
|
||||
color: $subfooter-bg;
|
||||
background: $subfooter-color;
|
||||
text-align: center;
|
||||
}
|
||||
#subfooter .social-icons li a:hover {
|
||||
background: $subfooter-bg;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* CSS-Classes to add margin at top or bottom
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
.t10 { margin-top: 10px !important; }
|
||||
.t15 { margin-top: 15px !important; }
|
||||
.t20 { margin-top: 20px !important; }
|
||||
.t30 { margin-top: 30px !important; }
|
||||
.t50 { margin-top: 50px !important; }
|
||||
.t60 { margin-top: 60px !important; }
|
||||
.t70 { margin-top: 70px !important; }
|
||||
.t80 { margin-top: 80px !important; }
|
||||
.t90 { margin-top: 90px !important; }
|
||||
|
||||
.b15 { margin-bottom: 15px !important; }
|
||||
.b20 { margin-bottom: 20px !important; }
|
||||
.b30 { margin-bottom: 30px !important; }
|
||||
.b60 { margin-bottom: 60px !important; }
|
||||
|
||||
.l15 { margin-left: 15px !important; }
|
||||
.r15 { margin-right: 15px !important; }
|
||||
|
||||
.pl20 { padding-left: 20px !important; }
|
||||
.pr5 { padding-right: 5px !important; }
|
||||
.pr10 { padding-right: 10px !important; }
|
||||
.pr20 { padding-right: 20px !important; }
|
||||
141
_sass/_09_elements.scss
Normal file
141
_sass/_09_elements.scss
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
/* TOC
|
||||
|
||||
- Table of Contents (Index)
|
||||
- Panel
|
||||
- Shadows
|
||||
- Alerts
|
||||
- Breadcrumb
|
||||
- Button
|
||||
- Side-Nav
|
||||
- Meta
|
||||
- Accordion
|
||||
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/* Table of Contents (Index)
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
#toc ul,
|
||||
#toc ul ul,
|
||||
#toc ul ul ul, {
|
||||
list-style: none;
|
||||
margin-left: 30px;
|
||||
}
|
||||
#toc ul {
|
||||
margin-left: 0;
|
||||
margin-top: $spacing-unit;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Panel
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
.border-dotted {
|
||||
border: 1px dotted $grey-5;
|
||||
padding: rem-calc(20);
|
||||
border-radius: $global-radius;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Shadows
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
.shadow-no {text-shadow: rgba(0, 0, 0, 0) 0 0 0;}
|
||||
.shadow-black {text-shadow: rgba(0, 0, 0, 0.498039) 0px 1px 2px;}
|
||||
.shadow-white {text-shadow: rgba(255, 255, 255, 0.498039) 0px 1px 2px;}
|
||||
|
||||
|
||||
|
||||
/* Alerts
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
.alert-box {
|
||||
font-family: $font-family-sans-serif;
|
||||
text-shadow: 0px 1px 1px rgba(0,0,0,0.9);
|
||||
}
|
||||
.alert-box p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.alert-box a {
|
||||
text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
|
||||
color: #fff;
|
||||
border-bottom: 1px dotted #fff;
|
||||
}
|
||||
.alert-box a:hover {
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
.alert-box.terminal {
|
||||
background: $grey-12;
|
||||
color: #fff;
|
||||
border-color: scale-color($grey-12, $lightness: -14%);
|
||||
font-family: $font-family-monospace;
|
||||
}
|
||||
.alert-box.terminal::before {
|
||||
content: "$ ";
|
||||
color: $ci-6;
|
||||
}
|
||||
.alert-box.text {
|
||||
background-color: $grey-2;
|
||||
text-shadow: 0px 0px 0px rgba(0,0,0,0.9);
|
||||
border-color: scale-color($grey-2, $lightness: -14%);
|
||||
color: $grey-12;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Button
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
button, .button { letter-spacing: 1px; }
|
||||
button.grey, .button.grey { background: $grey-10; }
|
||||
button.grey:hover,
|
||||
button.grey:focus,
|
||||
.button.grey:hover,
|
||||
.button.grey:focus { background-color: $grey-16; }
|
||||
|
||||
|
||||
|
||||
/* Side-Nav
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
.side-nav li.title { text-transform: uppercase;}
|
||||
.side-nav li { border-top: 1px solid $grey-3;}
|
||||
.side-nav li a:not(.button) { border-bottom: 0; padding: 0.4375rem 0rem; }
|
||||
.side-nav li a:not(.button):hover, .side-nav li a:not(.button):focus { background: $grey-1; }
|
||||
|
||||
.homepage p { margin: 0; padding: 0; color: $grey-10; }
|
||||
|
||||
|
||||
|
||||
/* Meta
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
.meta-info p {
|
||||
font-size: rem-calc(13);
|
||||
color: scale-color($grey-1, $lightness: 40%);
|
||||
}
|
||||
.meta-info a {
|
||||
text-decoration: underline;
|
||||
color: scale-color($grey-1, $lightness: 40%);
|
||||
}
|
||||
.meta-info a:hover {
|
||||
text-decoration: none;
|
||||
color: $secondary-color;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Accordion
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
dl.accordion { border-top: 1px solid $grey-2; }
|
||||
.accordion dd { border-bottom: 1px solid $grey-2; }
|
||||
dd.accordion-navigation span { padding-right: 12px; }
|
||||
dd.accordion-navigation span:before { content: "\F107" }
|
||||
dd.accordion-navigation.active span:before { content: "\F105" }
|
||||
dd.accordion-navigation.active span:before { content: "\F105" }
|
||||
|
||||
66
_sass/_11_syntax-highlighting.scss
Normal file
66
_sass/_11_syntax-highlighting.scss
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
|
||||
/* Syntax highlighting styles
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
.highlight {
|
||||
background: #fff;
|
||||
.c { color: #998; font-style: italic } // Comment
|
||||
.err { color: #a61717; background-color: #e3d2d2 } // Error
|
||||
.k { font-weight: bold } // Keyword
|
||||
.o { font-weight: bold } // Operator
|
||||
.cm { color: #998; font-style: italic } // Comment.Multiline
|
||||
.cp { color: #999; font-weight: bold } // Comment.Preproc
|
||||
.c1 { color: #998; font-style: italic } // Comment.Single
|
||||
.cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special
|
||||
.gd { color: #000; background-color: #fdd } // Generic.Deleted
|
||||
.gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
|
||||
.ge { font-style: italic } // Generic.Emph
|
||||
.gr { color: #a00 } // Generic.Error
|
||||
.gh { color: #999 } // Generic.Heading
|
||||
.gi { color: #000; background-color: #dfd } // Generic.Inserted
|
||||
.gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
|
||||
.go { color: #888 } // Generic.Output
|
||||
.gp { color: #555 } // Generic.Prompt
|
||||
.gs { font-weight: bold } // Generic.Strong
|
||||
.gu { color: #aaa } // Generic.Subheading
|
||||
.gt { color: #a00 } // Generic.Traceback
|
||||
.kc { font-weight: bold } // Keyword.Constant
|
||||
.kd { font-weight: bold } // Keyword.Declaration
|
||||
.kp { font-weight: bold } // Keyword.Pseudo
|
||||
.kr { font-weight: bold } // Keyword.Reserved
|
||||
.kt { color: #458; font-weight: bold } // Keyword.Type
|
||||
.m { color: #099 } // Literal.Number
|
||||
.s { color: #d14 } // Literal.String
|
||||
.na { color: #008080 } // Name.Attribute
|
||||
.nb { color: #0086B3 } // Name.Builtin
|
||||
.nc { color: #458; font-weight: bold } // Name.Class
|
||||
.no { color: #008080 } // Name.Constant
|
||||
.ni { color: #800080 } // Name.Entity
|
||||
.ne { color: #900; font-weight: bold } // Name.Exception
|
||||
.nf { color: #900; font-weight: bold } // Name.Function
|
||||
.nn { color: #555 } // Name.Namespace
|
||||
.nt { color: #000080 } // Name.Tag
|
||||
.nv { color: #008080 } // Name.Variable
|
||||
.ow { font-weight: bold } // Operator.Word
|
||||
.w { color: #bbb } // Text.Whitespace
|
||||
.mf { color: #099 } // Literal.Number.Float
|
||||
.mh { color: #099 } // Literal.Number.Hex
|
||||
.mi { color: #099 } // Literal.Number.Integer
|
||||
.mo { color: #099 } // Literal.Number.Oct
|
||||
.sb { color: #d14 } // Literal.String.Backtick
|
||||
.sc { color: #d14 } // Literal.String.Char
|
||||
.sd { color: #d14 } // Literal.String.Doc
|
||||
.s2 { color: #d14 } // Literal.String.Double
|
||||
.se { color: #d14 } // Literal.String.Escape
|
||||
.sh { color: #d14 } // Literal.String.Heredoc
|
||||
.si { color: #d14 } // Literal.String.Interpol
|
||||
.sx { color: #d14 } // Literal.String.Other
|
||||
.sr { color: #009926 } // Literal.String.Regex
|
||||
.s1 { color: #d14 } // Literal.String.Single
|
||||
.ss { color: #990073 } // Literal.String.Symbol
|
||||
.bp { color: #999 } // Name.Builtin.Pseudo
|
||||
.vc { color: #008080 } // Name.Variable.Class
|
||||
.vg { color: #008080 } // Name.Variable.Global
|
||||
.vi { color: #008080 } // Name.Variable.Instance
|
||||
.il { color: #099 } // Literal.Number.Integer.Long
|
||||
}
|
||||
|
|
@ -1,327 +0,0 @@
|
|||
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}
|
||||
|
||||
|
||||
// Fade in
|
||||
// --------------------------------------------------
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
@-moz-keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
@-o-keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
0% {opacity: 0;}
|
||||
100% {opacity: 1;}
|
||||
}
|
||||
.fadeIn {
|
||||
-webkit-animation-name: fadeIn;
|
||||
-moz-animation-name: fadeIn;
|
||||
-o-animation-name: fadeIn;
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-o-keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes fadeInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.fadeInDown {
|
||||
-webkit-animation-name: fadeInDown;
|
||||
-moz-animation-name: fadeInDown;
|
||||
-o-animation-name: fadeInDown;
|
||||
animation-name: fadeInDown;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeInDownBig {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-2000px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes fadeInDownBig {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateY(-2000px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-o-keyframes fadeInDownBig {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateY(-2000px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes fadeInDownBig {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-2000px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.fadeInDownBig {
|
||||
-webkit-animation-name: fadeInDownBig;
|
||||
-moz-animation-name: fadeInDownBig;
|
||||
-o-animation-name: fadeInDownBig;
|
||||
animation-name: fadeInDownBig;
|
||||
}
|
||||
|
||||
|
||||
// Bounce
|
||||
// --------------------------------------------------
|
||||
|
||||
@-webkit-keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(.3);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1.05);
|
||||
}
|
||||
70% {
|
||||
-webkit-transform: scale(.9);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: scale(.3);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
-moz-transform: scale(1.05);
|
||||
}
|
||||
70% {
|
||||
-moz-transform: scale(.9);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-o-keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: scale(.3);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
-o-transform: scale(1.05);
|
||||
}
|
||||
70% {
|
||||
-o-transform: scale(.9);
|
||||
}
|
||||
100% {
|
||||
-o-transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes bounceIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(.3);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
70% {
|
||||
transform: scale(.9);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.bounceIn {
|
||||
-webkit-animation-name: bounceIn;
|
||||
-moz-animation-name: bounceIn;
|
||||
-o-animation-name: bounceIn;
|
||||
animation-name: bounceIn;
|
||||
}
|
||||
@-webkit-keyframes bounceInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(30px);
|
||||
}
|
||||
|
||||
80% {
|
||||
-webkit-transform: translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes bounceInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-moz-transform: translateY(30px);
|
||||
}
|
||||
|
||||
80% {
|
||||
-moz-transform: translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@-o-keyframes bounceInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-o-transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
-o-transform: translateY(30px);
|
||||
}
|
||||
|
||||
80% {
|
||||
-o-transform: translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounceInDown {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateY(-2000px);
|
||||
}
|
||||
|
||||
60% {
|
||||
opacity: 1;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.bounceInDown {
|
||||
-webkit-animation-name: bounceInDown;
|
||||
-moz-animation-name: bounceInDown;
|
||||
-o-animation-name: bounceInDown;
|
||||
animation-name: bounceInDown;
|
||||
}
|
||||
|
||||
|
||||
// Drop
|
||||
// --------------------------------------------------
|
||||
|
||||
@-webkit-keyframes drop {
|
||||
0% {
|
||||
-webkit-transform: translateY(-500px);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-moz-keyframes drop {
|
||||
0% {
|
||||
-moz-transform: translateY(-500px);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-o-keyframes drop {
|
||||
0% {
|
||||
-o-transform: translateY(-500px);
|
||||
}
|
||||
100% {
|
||||
-o-transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes drop {
|
||||
0% {
|
||||
transform: translateY(-500px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.drop {
|
||||
-webkit-animation-name: drop;
|
||||
-moz-animation-name: drop;
|
||||
-o-animation-name: drop;
|
||||
animation-name: drop;
|
||||
}
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
.CodeRay {
|
||||
font-family: $code-font;
|
||||
@include font(12);
|
||||
color: #d0d0d0;
|
||||
margin-bottom: 1.5em;
|
||||
@include rounded(3px);
|
||||
}
|
||||
|
||||
.CodeRay .code pre {
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
background-color: #272822;
|
||||
border: 1px solid darken($body-color, 5);
|
||||
}
|
||||
|
||||
div.CodeRay { }
|
||||
span.CodeRay { white-space: pre; border: 0px; padding: 2px }
|
||||
|
||||
table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px }
|
||||
table.CodeRay td {
|
||||
padding: 1em 0.5em;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.CodeRay .line-numbers, .CodeRay .no {
|
||||
color: #8f908a;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.CodeRay .line-numbers a {
|
||||
color: #8f908a;
|
||||
}
|
||||
|
||||
.CodeRay .line-numbers tt { font-weight: bold }
|
||||
.CodeRay .line-numbers .highlighted { color: red }
|
||||
.CodeRay .line { display: block; float: left; width: 100%; }
|
||||
.CodeRay span.line-numbers { padding: 0 24px 0 4px; }
|
||||
.CodeRay .code { width: 100% }
|
||||
|
||||
ol.CodeRay { font-size: 10pt }
|
||||
ol.CodeRay li { white-space: pre }
|
||||
|
||||
.CodeRay .code pre { overflow: auto }
|
||||
.CodeRay .debug { color:white ! important; background:blue ! important; }
|
||||
|
||||
.CodeRay .doctype,
|
||||
.CodeRay .key,
|
||||
.CodeRay .instance-variable { color: #f8f8f2; }
|
||||
.CodeRay .attribute-name { color: #a6e22e;}
|
||||
.CodeRay .symbol,
|
||||
.CodeRay .integer,
|
||||
.CodeRay .float { color: #ff658b; }
|
||||
.CodeRay .string { color: #2dc900; }
|
||||
.CodeRay .keyword { color: #66d9ef; }
|
||||
.CodeRay .function,
|
||||
.CodeRay .class { color: #a6e22e; }
|
||||
.CodeRay .regexp,
|
||||
.CodeRay .constant,
|
||||
.CodeRay .tag { color: #f92672; }
|
||||
.CodeRay .modifier,
|
||||
.CodeRay .predefined-constant { color: #ff84e4; }
|
||||
.CodeRay .comment { color: #75715e; }
|
||||
.CodeRay .error { color: #ecc; }
|
||||
.CodeRay .content { color: #e6db74; }
|
||||
.CodeRay .delimiter { color: #e6db74; }
|
||||
.CodeRay .inline { color: #e6db74; }
|
||||
|
|
@ -1,370 +0,0 @@
|
|||
.dl-menuwrapper {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
-webkit-perspective: 1000px;
|
||||
-moz-perspective: 1000px;
|
||||
perspective: 1000px;
|
||||
-webkit-perspective-origin: 50% 200%;
|
||||
-moz-perspective-origin: 50% 200%;
|
||||
perspective-origin: 50% 200%;
|
||||
@media #{$medium} {
|
||||
position: fixed;
|
||||
max-width: 175px;
|
||||
top: 25px;
|
||||
left: 25px;
|
||||
}
|
||||
button {
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: $comp-color;
|
||||
border: none;
|
||||
width: 48px;
|
||||
height: 45px;
|
||||
text-indent: -900em;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
@include border-radius(0,3px,0,0);
|
||||
opacity: 0.6;
|
||||
@media #{$medium} {
|
||||
@include border-radius(3px,3px,3px,3px);
|
||||
}
|
||||
}
|
||||
button:hover,
|
||||
button.dl-active,
|
||||
ul {
|
||||
background: #aaa;
|
||||
}
|
||||
button:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 68%;
|
||||
height: 5px;
|
||||
background: $white;
|
||||
top: 10px;
|
||||
left: 16%;
|
||||
box-shadow:
|
||||
0 10px 0 $white,
|
||||
0 20px 0 $white;
|
||||
}
|
||||
button.dl-active {
|
||||
display: none;
|
||||
}
|
||||
ul {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
li {
|
||||
position: relative;
|
||||
h4 {
|
||||
margin:0;
|
||||
padding: 15px 20px 0;
|
||||
color: rgba($white,0.9);
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 15px 20px;
|
||||
@include font-rem(14);
|
||||
color: rgba($white,0.8);
|
||||
font-weight: 300;
|
||||
a {
|
||||
display: inline;
|
||||
padding: 0;
|
||||
@include font-rem(14);
|
||||
}
|
||||
}
|
||||
i {
|
||||
// display: inline-block;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 15px 20px;
|
||||
@include font-rem(14);
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
color: $white;
|
||||
outline: none;
|
||||
}
|
||||
&.dl-back > a {
|
||||
padding-left: 30px;
|
||||
background: rgba(0,0,0,0.2);
|
||||
}
|
||||
&.dl-back:after,
|
||||
> a:not(:only-child):after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
line-height: 50px;
|
||||
font-family: 'fontawesome';
|
||||
color: $white;
|
||||
speak: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
content: "\f105";
|
||||
}
|
||||
&.dl-back:after {
|
||||
left: 10px;
|
||||
color: rgba(212,204,198,0.5);
|
||||
-webkit-transform: rotate(180deg);
|
||||
-moz-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
> a:after {
|
||||
right: 10px;
|
||||
color: rgba(0,0,0,0.15);
|
||||
}
|
||||
}
|
||||
.dl-menu {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
overflow-y: auto;
|
||||
max-height: 600px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 12px 24px rgba($black,0.4);
|
||||
-webkit-transform: translateY(10px);
|
||||
-moz-transform: translateY(10px);
|
||||
transform: translateY(10px);
|
||||
-webkit-backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
@media #{$medium} {
|
||||
@include border-radius(3px,3px,3px,3px);
|
||||
max-height: 650px;
|
||||
}
|
||||
}
|
||||
.dl-menu.dl-menu-toggle {
|
||||
-webkit-transition: all 0.3s ease;
|
||||
-moz-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.dl-menu.dl-menuopen {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
-webkit-transform: translateY(0px);
|
||||
-moz-transform: translateY(0px);
|
||||
transform: translateY(0px);
|
||||
}
|
||||
.dl-submenu {
|
||||
@include rounded(3px);
|
||||
box-shadow: 0 12px 24px rgba($black,0.4);
|
||||
.btn {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
/* Hide the inner submenus */
|
||||
li .dl-submenu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
/*
|
||||
When a submenu is openend, we will hide all li siblings.
|
||||
For that we give a class to the parent menu called "dl-subview".
|
||||
We also hide the submenu link.
|
||||
The opened submenu will get the class "dl-subviewopen".
|
||||
All this is done for any sub-level being entered.
|
||||
*/
|
||||
.dl-menu.dl-subview li,
|
||||
.dl-menu.dl-subview li.dl-subviewopen > a,
|
||||
.dl-menu.dl-subview li.dl-subview > a {
|
||||
display: none;
|
||||
}
|
||||
.dl-menu.dl-subview li.dl-subview,
|
||||
.dl-menu.dl-subview li.dl-subview .dl-submenu,
|
||||
.dl-menu.dl-subview li.dl-subviewopen,
|
||||
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
|
||||
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
|
||||
display: block;
|
||||
}
|
||||
/* Animation classes for moving out and in */
|
||||
.dl-menu.dl-animate-out {
|
||||
-webkit-animation: MenuAnimOut 0.4s ease;
|
||||
-moz-animation: MenuAnimOut 0.4s ease;
|
||||
animation: MenuAnimOut 0.4s ease;
|
||||
}
|
||||
@-webkit-keyframes MenuAnimOut {
|
||||
100% {
|
||||
-webkit-transform: translateZ(300px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes MenuAnimOut {
|
||||
100% {
|
||||
-moz-transform: translateZ(300px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes MenuAnimOut {
|
||||
100% {
|
||||
transform: translateZ(300px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.dl-menu.dl-animate-in {
|
||||
-webkit-animation: MenuAnimIn 0.4s ease;
|
||||
-moz-animation: MenuAnimIn 0.4s ease;
|
||||
animation: MenuAnimIn 0.4s ease;
|
||||
}
|
||||
@-webkit-keyframes MenuAnimIn {
|
||||
0% {
|
||||
-webkit-transform: translateZ(300px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes MenuAnimIn {
|
||||
0% {
|
||||
-moz-transform: translateZ(300px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-moz-transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes MenuAnimIn {
|
||||
0% {
|
||||
transform: translateZ(300px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.dl-menuwrapper > .dl-submenu.dl-animate-in {
|
||||
-webkit-animation: SubMenuAnimIn 0.4s ease;
|
||||
-moz-animation: SubMenuAnimIn 0.4s ease;
|
||||
animation: SubMenuAnimIn 0.4s ease;
|
||||
}
|
||||
@-webkit-keyframes SubMenuAnimIn {
|
||||
0% {
|
||||
-webkit-transform: translateZ(-300px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes SubMenuAnimIn {
|
||||
0% {
|
||||
-moz-transform: translateZ(-300px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
-moz-transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes SubMenuAnimIn {
|
||||
0% {
|
||||
transform: translateZ(-300px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.dl-menuwrapper > .dl-submenu.dl-animate-out {
|
||||
-webkit-animation: SubMenuAnimOut 0.4s ease;
|
||||
-moz-animation: SubMenuAnimOut 0.4s ease;
|
||||
animation: SubMenuAnimOut 0.4s ease;
|
||||
}
|
||||
@-webkit-keyframes SubMenuAnimOut {
|
||||
0% {
|
||||
-webkit-transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateZ(-300px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes SubMenuAnimOut {
|
||||
0% {
|
||||
-moz-transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
-moz-transform: translateZ(-300px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes SubMenuAnimOut {
|
||||
0% {
|
||||
transform: translateZ(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateZ(-300px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
/* No Touch Fallback */
|
||||
.no-touch .dl-menuwrapper li a:hover {
|
||||
background: rgba(255,248,213,0.1);
|
||||
}
|
||||
/* No JS Fallback */
|
||||
.no-js {
|
||||
.dl-trigger {
|
||||
display: none;
|
||||
}
|
||||
.dl-menuwrapper {
|
||||
position: initial;
|
||||
@media #{$medium} {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.dl-menuwrapper .dl-menu {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
-webkit-transform: none;
|
||||
-moz-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
.dl-menuwrapper li .dl-submenu {
|
||||
display: block;
|
||||
}
|
||||
.dl-menuwrapper li.dl-back {
|
||||
display: none;
|
||||
}
|
||||
.dl-menuwrapper li > a:not(:only-child) {
|
||||
background: rgba(0,0,0,0.1);
|
||||
}
|
||||
.dl-menuwrapper li > a:not(:only-child):after {
|
||||
content: '';
|
||||
}
|
||||
.dl-menu {
|
||||
max-height: 100%;
|
||||
}
|
||||
.dl-menu li {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
// Menu Color
|
||||
.dl-menuwrapper button:hover,
|
||||
.dl-menuwrapper button.dl-active,
|
||||
.dl-menuwrapper ul {
|
||||
background: $comp-color;
|
||||
}
|
||||
// Fix for IE
|
||||
.dl-menu li {
|
||||
display: none
|
||||
}
|
||||
.dl-menuopen li {
|
||||
display: block
|
||||
}
|
||||
|
|
@ -1,150 +0,0 @@
|
|||
hr {
|
||||
display: block;
|
||||
margin: 1em 0;
|
||||
padding: 0;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 1px solid #fff;
|
||||
}
|
||||
|
||||
// Figures and images
|
||||
// --------------------------------------------------
|
||||
figure {
|
||||
margin: 0;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
@include clearfix();
|
||||
img {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
a {
|
||||
img {
|
||||
@include translate(0, 0);
|
||||
-webkit-transition-duration: 0.25s;
|
||||
-moz-transition-duration: 0.25s;
|
||||
-o-transition-duration: 0.25s;
|
||||
&:hover {
|
||||
@include translate(0, -5px);
|
||||
@include box-shadow(0 0 10px fade($base-color, 20));
|
||||
}
|
||||
}
|
||||
}
|
||||
&.half {
|
||||
@media #{$large} {
|
||||
img {
|
||||
width: 310px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
figcaption {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.third {
|
||||
@media #{$large} {
|
||||
img {
|
||||
width: 200px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
}
|
||||
figcaption {
|
||||
clear: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Buttons
|
||||
// --------------------------------------------------
|
||||
.btn {
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
padding: 8px 20px;
|
||||
@include font-rem(14);
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
border-width: 2px !important;
|
||||
border-style: solid !important;
|
||||
border-color: $primary;
|
||||
@include rounded(3px);
|
||||
&:visited {
|
||||
color: $white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $white;
|
||||
color: $primary;
|
||||
}
|
||||
}
|
||||
.btn-inverse {
|
||||
background-color: $white;
|
||||
color: $primary;
|
||||
border-color: $white;
|
||||
&:visited {
|
||||
color: $primary;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $primary;
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.btn-success {
|
||||
background-color: $success;
|
||||
color: $white;
|
||||
border-color: $success;
|
||||
&:visited {
|
||||
color: $white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $white;
|
||||
color: $success;
|
||||
}
|
||||
}
|
||||
.btn-warning {
|
||||
background-color: $warning;
|
||||
color: $white;
|
||||
border-color: $warning;
|
||||
&:visited {
|
||||
color: $white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $white;
|
||||
color: $warning;
|
||||
}
|
||||
}
|
||||
.btn-danger {
|
||||
background-color: $danger;
|
||||
color: $white;
|
||||
border-color: $danger;
|
||||
&:visited {
|
||||
color: $white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $white;
|
||||
color: $danger;
|
||||
}
|
||||
}
|
||||
.btn-info {
|
||||
background-color: $info;
|
||||
color: $white;
|
||||
border-color: $info;
|
||||
&:visited {
|
||||
color: $white;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $white;
|
||||
color: $info;
|
||||
}
|
||||
}
|
||||
|
||||
// Well
|
||||
// --------------------------------------------------
|
||||
.well {
|
||||
padding: 20px;
|
||||
border: 1px solid $comp-color;
|
||||
@include rounded(4px);
|
||||
}
|
||||
146
_sass/_functions.scss
Normal file
146
_sass/_functions.scss
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
// This is the default html and body font-size for the base rem value.
|
||||
$rem-base: 16px !default;
|
||||
|
||||
// IMPORT ONCE
|
||||
// We use this to prevent styles from being loaded multiple times for compenents that rely on other components.
|
||||
$modules: () !default;
|
||||
@mixin exports($name) {
|
||||
// Import from global scope
|
||||
$modules: $modules !global;
|
||||
// Check if a module is already on the list
|
||||
$module_index: index($modules, $name);
|
||||
@if (($module_index == null) or ($module_index == false)) {
|
||||
$modules: append($modules, $name) !global;
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// @functions
|
||||
//
|
||||
|
||||
|
||||
// RANGES
|
||||
// We use these functions to define ranges for various things, like media queries.
|
||||
@function lower-bound($range){
|
||||
@if length($range) <= 0 {
|
||||
@return 0;
|
||||
}
|
||||
@return nth($range,1);
|
||||
}
|
||||
|
||||
@function upper-bound($range) {
|
||||
@if length($range) < 2 {
|
||||
@return 999999999999;
|
||||
}
|
||||
@return nth($range, 2);
|
||||
}
|
||||
|
||||
// STRIP UNIT
|
||||
// It strips the unit of measure and returns it
|
||||
@function strip-unit($num) {
|
||||
@return $num / ($num * 0 + 1);
|
||||
}
|
||||
|
||||
// TEXT INPUT TYPES
|
||||
|
||||
@function text-inputs( $types: all, $selector: input ) {
|
||||
|
||||
$return: ();
|
||||
|
||||
$all-text-input-types:
|
||||
text
|
||||
password
|
||||
date
|
||||
datetime
|
||||
datetime-local
|
||||
month
|
||||
week
|
||||
email
|
||||
number
|
||||
search
|
||||
tel
|
||||
time
|
||||
url
|
||||
color
|
||||
textarea;
|
||||
|
||||
@if $types == all { $types: $all-text-input-types; }
|
||||
|
||||
@each $type in $types {
|
||||
@if $type == textarea {
|
||||
@if $selector == input {
|
||||
$return: append($return, unquote('#{$type}'), comma)
|
||||
} @else {
|
||||
$return: append($return, unquote('#{$type}#{$selector}'), comma)
|
||||
}
|
||||
} @else {
|
||||
$return: append($return, unquote('#{$selector}[type="#{$type}"]'), comma)
|
||||
}
|
||||
}
|
||||
|
||||
@return $return;
|
||||
|
||||
}
|
||||
|
||||
// CONVERT TO REM
|
||||
@function convert-to-rem($value, $base-value: $rem-base) {
|
||||
$value: strip-unit($value) / strip-unit($base-value) * 1rem;
|
||||
@if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
|
||||
@return $value;
|
||||
}
|
||||
|
||||
@function data($attr) {
|
||||
@if $namespace {
|
||||
@return '[data-' + $namespace + '-' + $attr + ']';
|
||||
}
|
||||
|
||||
@return '[data-' + $attr + ']';
|
||||
}
|
||||
|
||||
// REM CALC
|
||||
|
||||
// New Syntax, allows to optionally calculate on a different base value to counter compounding effect of rem's.
|
||||
// Call with 1, 2, 3 or 4 parameters, 'px' is not required but supported:
|
||||
//
|
||||
// rem-calc(10 20 30px 40);
|
||||
//
|
||||
// Space delimited, if you want to delimit using comma's, wrap it in another pair of brackets
|
||||
//
|
||||
// rem-calc((10, 20, 30, 40px));
|
||||
//
|
||||
// Optionally call with a different base (eg: 8px) to calculate rem.
|
||||
//
|
||||
// rem-calc(16px 32px 48px, 8px);
|
||||
//
|
||||
// If you require to comma separate your list
|
||||
//
|
||||
// rem-calc((16px, 32px, 48), 8px);
|
||||
|
||||
@function rem-calc($values, $base-value: $rem-base) {
|
||||
$max: length($values);
|
||||
|
||||
@if $max == 1 { @return convert-to-rem(nth($values, 1), $base-value); }
|
||||
|
||||
$remValues: ();
|
||||
@for $i from 1 through $max {
|
||||
$remValues: append($remValues, convert-to-rem(nth($values, $i), $base-value));
|
||||
}
|
||||
@return $remValues;
|
||||
}
|
||||
|
||||
// OLD EM CALC
|
||||
// Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
|
||||
@function emCalc($values){
|
||||
@return rem-calc($values);
|
||||
}
|
||||
|
||||
// OLD EM CALC
|
||||
// Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
|
||||
@function em-calc($values){
|
||||
@return rem-calc($values);
|
||||
}
|
||||
186
_sass/_gist.scss
186
_sass/_gist.scss
|
|
@ -1,186 +0,0 @@
|
|||
.gist {
|
||||
|
||||
.highlight {
|
||||
color:#000;
|
||||
}
|
||||
|
||||
.render-container .render-viewer-error,
|
||||
.render-container .render-viewer-fatal,
|
||||
.render-container .octospinner {
|
||||
display:none;
|
||||
}
|
||||
|
||||
.gist-render iframe {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.gist-file.gist-render .highlight {
|
||||
border:none;
|
||||
}
|
||||
|
||||
.gist-file .gist-meta .highlight a {
|
||||
font-weight:700;
|
||||
color:#666;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background:#fff;
|
||||
}
|
||||
|
||||
.highlight .err {
|
||||
color:#a61717;
|
||||
background-color:#e3d2d2;
|
||||
}
|
||||
|
||||
.highlight .cp {
|
||||
color:#999;
|
||||
font-weight:700;
|
||||
}
|
||||
|
||||
.highlight .cs {
|
||||
color:#999;
|
||||
font-weight:700;
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
.highlight .gd {
|
||||
color:#000;
|
||||
background-color:#fdd;
|
||||
}
|
||||
|
||||
.highlight .gd .x {
|
||||
color:#000;
|
||||
background-color:#faa;
|
||||
}
|
||||
|
||||
.highlight .ge {
|
||||
color:#000;
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
.highlight .gi {
|
||||
color:#000;
|
||||
background-color:#dfd;
|
||||
}
|
||||
|
||||
.highlight .gi .x {
|
||||
color:#000;
|
||||
background-color:#afa;
|
||||
}
|
||||
|
||||
.highlight .go {
|
||||
color:#888;
|
||||
}
|
||||
|
||||
.highlight .gs {
|
||||
font-weight:700;
|
||||
}
|
||||
|
||||
.highlight .gu {
|
||||
color:#aaa;
|
||||
}
|
||||
|
||||
.highlight .nb {
|
||||
color:#0086b3;
|
||||
}
|
||||
|
||||
.highlight .ni {
|
||||
color:purple;
|
||||
}
|
||||
|
||||
.highlight .nt {
|
||||
color:navy;
|
||||
}
|
||||
|
||||
.highlight .w {
|
||||
color:#bbb;
|
||||
}
|
||||
|
||||
.highlight .sr {
|
||||
color:#009926;
|
||||
}
|
||||
|
||||
.highlight .ss {
|
||||
color:#990073;
|
||||
}
|
||||
|
||||
.highlight .c,
|
||||
.highlight .cm,
|
||||
.highlight .c1 {
|
||||
color:#998;
|
||||
font-style:italic;
|
||||
}
|
||||
|
||||
.highlight .k,
|
||||
.highlight .o,
|
||||
.highlight .kc,
|
||||
.highlight .kd,
|
||||
.highlight .kp,
|
||||
.highlight .kr,
|
||||
.highlight .ow,
|
||||
.highlight .n,
|
||||
.highlight .p {
|
||||
color:#000;
|
||||
font-weight:700;
|
||||
}
|
||||
|
||||
.highlight .gr,
|
||||
.highlight .gt {
|
||||
color:#a00;
|
||||
}
|
||||
|
||||
.highlight .gh,
|
||||
.highlight .bp {
|
||||
color:#999;
|
||||
}
|
||||
|
||||
.highlight .gp,
|
||||
.highlight .nn {
|
||||
color:#555;
|
||||
}
|
||||
|
||||
.highlight .kt,
|
||||
.highlight .nc {
|
||||
color:#458;
|
||||
font-weight:700;
|
||||
}
|
||||
|
||||
.highlight .m,
|
||||
.highlight .mf,
|
||||
.highlight .mh,
|
||||
.highlight .mi,
|
||||
.highlight .mo,
|
||||
.highlight .il {
|
||||
color:#099;
|
||||
}
|
||||
|
||||
.highlight .s,
|
||||
.highlight .sb,
|
||||
.highlight .sc,
|
||||
.highlight .sd,
|
||||
.highlight .s2,
|
||||
.highlight .se,
|
||||
.highlight .sh,
|
||||
.highlight .si,
|
||||
.highlight .sx,
|
||||
.highlight .s1 {
|
||||
color:#d14;
|
||||
}
|
||||
|
||||
.highlight .na,
|
||||
.highlight .no,
|
||||
.highlight .nv,
|
||||
.highlight .vc,
|
||||
.highlight .vg,
|
||||
.highlight .vi {
|
||||
color:teal;
|
||||
}
|
||||
|
||||
.highlight .ne,
|
||||
.highlight .nf {
|
||||
color:#900;
|
||||
font-weight:700;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
// Defining number of columns in the grid.
|
||||
// Common Values would be 12, 16 or 24
|
||||
$width: 100%;
|
||||
$def_grid: 12;
|
||||
$margin: 0;
|
||||
|
||||
@mixin container(){
|
||||
margin:0 auto;
|
||||
width:$width;
|
||||
}
|
||||
|
||||
// Works out the width of elements based
|
||||
// on total number of columns and width
|
||||
// number of columns being displayed.
|
||||
// Removes 20px for margins
|
||||
@mixin grid($grid:$def_grid,$cols:'',$float:left,$display:inline){
|
||||
display:$display;
|
||||
float:$float;
|
||||
width:(100%/$grid * $cols) - ($margin * 2);
|
||||
}
|
||||
|
||||
// Allows for padding before element
|
||||
@mixin prefix($grid:$def_grid,$cols:''){
|
||||
margin-left:(100%/$grid * $cols);
|
||||
}
|
||||
// Allows for padding after element
|
||||
@mixin suffix($grid:$def_grid,$cols:''){
|
||||
margin-right:(100%/$grid * $cols);
|
||||
}
|
||||
// Removes left margin
|
||||
@mixin first(){
|
||||
margin-left:0;
|
||||
}
|
||||
// Removes right margin
|
||||
@mixin last(){
|
||||
margin-right:0;
|
||||
}
|
||||
|
||||
@mixin push($grid:$def_grid,$move:'') {
|
||||
position:relative;
|
||||
left:(100%/$grid * $move);
|
||||
}
|
||||
|
||||
@mixin pull($grid:$def_grid,$move:''){
|
||||
position:relative;
|
||||
left:(100%/$grid * $move) * -1;
|
||||
}
|
||||
|
|
@ -1,315 +0,0 @@
|
|||
// UTILITY MIXINS
|
||||
// --------------------------------------------------
|
||||
|
||||
// Clearfix
|
||||
// --------------------
|
||||
// For clearing floats like a boss h5bp.com/q
|
||||
@mixin clearfix {
|
||||
*zoom: 1;
|
||||
&:before,
|
||||
&:after {
|
||||
display: table;
|
||||
content: "";
|
||||
// Fixes Opera/contenteditable bug:
|
||||
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
|
||||
line-height: 0;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
// Webkit-style focus
|
||||
// --------------------
|
||||
@mixin tab-focus() {
|
||||
// Default
|
||||
outline: thin dotted #333;
|
||||
// Webkit
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
// Center-align a block level element
|
||||
// ----------------------------------
|
||||
@mixin center-block() {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// TYPOGRAPHY
|
||||
// --------------------------------------------------
|
||||
|
||||
// Full-fat vertical rhythm
|
||||
// ------------------------
|
||||
@mixin font-size($size) {
|
||||
font-size: 0px + $size;
|
||||
font-size: 0rem + $size / $doc-font-size;
|
||||
line-height: 0 + round($doc-line-height / $size*10000) / 10000;
|
||||
margin-bottom: 0px + $doc-line-height;
|
||||
margin-bottom: 0rem + ($doc-line-height / $doc-font-size);
|
||||
}
|
||||
|
||||
// Just the REMs
|
||||
// -------------
|
||||
@mixin font-rem($size) {
|
||||
font-size: 0px + $size;
|
||||
font-size: 0rem + $size / $doc-font-size;
|
||||
}
|
||||
|
||||
// Just font-size and line-height
|
||||
// ------------------------------
|
||||
@mixin font($size) {
|
||||
font-size: 0px + $size;
|
||||
font-size: 0rem + $size / $doc-font-size;
|
||||
line-height: 0 + round($doc-line-height / $size*10000) / 10000;
|
||||
}
|
||||
|
||||
@mixin text-overflow() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
// GRADIENTS
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin horizontal($startColor : $white, $endColor : $lightergrey) {
|
||||
background-color: $endColor;
|
||||
background-image : -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
|
||||
background-image : -webkit-linear-gradient(left, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
||||
background-image : -moz-linear-gradient(left, $startColor, $endColor); // FF 3.6+
|
||||
background-image : -ms-linear-gradient(left, $startColor, $endColor); // IE10
|
||||
background-image : -o-linear-gradient(left, $startColor, $endColor); // Opera 11.10
|
||||
background-image : linear-gradient(left, $startColor, $endColor); // W3C
|
||||
background-repeat : repeat-x;
|
||||
}
|
||||
|
||||
@mixin vertical($startColor : $white, $endColor: $lightergrey) {
|
||||
background-image : -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)); // Safari 4+, Chrome 2+
|
||||
background-image : -webkit-linear-gradient(top, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
||||
background-color : $endColor;
|
||||
background-image : -moz-linear-gradient(top, $startColor, $endColor); // FF 3.6+
|
||||
background-image : -ms-linear-gradient(top, $startColor, $endColor); // IE10
|
||||
background-image : -o-linear-gradient(top, $startColor, $endColor); // Opera 11.10
|
||||
background-image : linear-gradient(top, $startColor, $endColor); // W3C
|
||||
background-repeat : repeat-x;
|
||||
}
|
||||
|
||||
@mixin directional($startColor : $white, $endColor : $lightergrey, $deg : 45deg) {
|
||||
background-color : $endColor;
|
||||
background-image : -moz-linear-gradient($deg, $startColor, $endColor); // FF 3.6+
|
||||
background-image : -ms-linear-gradient($deg, $startColor, $endColor); // IE10
|
||||
background-image : -webkit-linear-gradient($deg, $startColor, $endColor); // Safari 5.1+, Chrome 10+
|
||||
background-image : -o-linear-gradient($deg, $startColor, $endColor); // Opera 11.10
|
||||
background-image : linear-gradient($deg, $startColor, $endColor); // W3C
|
||||
background-repeat : repeat-x;
|
||||
}
|
||||
|
||||
// .bordered(COLOR, COLOR, COLOR, COLOR);
|
||||
@mixin bordered($top-color: #eee, $right-color: #eee, $bottom-color: #eee, $left-color: #eee) {
|
||||
border-top : solid 1px $top-color;
|
||||
border-left : solid 1px $left-color;
|
||||
border-right : solid 1px $right-color;
|
||||
border-bottom : solid 1px $bottom-color;
|
||||
}
|
||||
|
||||
// ROUND CORNERS
|
||||
// --------------------------------------------------
|
||||
|
||||
// .rounded(VALUE);
|
||||
@mixin rounded($radius:4px) {
|
||||
-webkit-border-radius : $radius;
|
||||
-moz-border-radius : $radius;
|
||||
border-radius : $radius;
|
||||
}
|
||||
|
||||
// .border-radius(VALUE,VALUE,VALUE,VALUE);
|
||||
@mixin border-radius($topright: 0, $bottomright: 0, $bottomleft: 0, $topleft: 0) {
|
||||
-webkit-border-top-right-radius : $topright;
|
||||
-webkit-border-bottom-right-radius : $bottomright;
|
||||
-webkit-border-bottom-left-radius : $bottomleft;
|
||||
-webkit-border-top-left-radius : $topleft;
|
||||
-moz-border-radius-topright : $topright;
|
||||
-moz-border-radius-bottomright : $bottomright;
|
||||
-moz-border-radius-bottomleft : $bottomleft;
|
||||
-moz-border-radius-topleft : $topleft;
|
||||
border-top-right-radius : $topright;
|
||||
border-bottom-right-radius : $bottomright;
|
||||
border-bottom-left-radius : $bottomleft;
|
||||
border-top-left-radius : $topleft;
|
||||
-webkit-background-clip : padding-box;
|
||||
-moz-background-clip : padding;
|
||||
background-clip : padding-box;
|
||||
}
|
||||
|
||||
// .box-shadow(HORIZONTAL VERTICAL BLUR COLOR))
|
||||
@mixin box-shadow($shadow: 0 1px 3px rgba(0,0,0,.25)) {
|
||||
-webkit-box-shadow : $shadow;
|
||||
-moz-box-shadow : $shadow;
|
||||
box-shadow : $shadow;
|
||||
}
|
||||
|
||||
// .drop-shadow(HORIZONTAL, VERTICAL, BLUR, ALPHA);
|
||||
@mixin drop-shadow($x-axis: 0, $y-axis: 1px, $blur: 2px, $alpha: 0.1) {
|
||||
-webkit-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
|
||||
-moz-box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
|
||||
box-shadow : $x-axis $y-axis $blur rgba(0, 0, 0, $alpha);
|
||||
}
|
||||
|
||||
// .text-shadow();
|
||||
@mixin text-shadow($shadow: 0 2px 3px rgba(0,0,0,.25)) {
|
||||
text-shadow : $shadow;
|
||||
}
|
||||
|
||||
// TRANSFORMATIONS
|
||||
// --------------------------------------------------
|
||||
|
||||
// .rotate(VALUEdeg);
|
||||
@mixin rotate($deg) {
|
||||
-webkit-transform : rotate($deg);
|
||||
-moz-transform : rotate($deg);
|
||||
-ms-transform : rotate($deg);
|
||||
-o-transform : rotate($deg);
|
||||
transform : rotate($deg);
|
||||
}
|
||||
|
||||
// .scale(VALUE);
|
||||
@mixin scale($ratio) {
|
||||
-webkit-transform : scale($ratio);
|
||||
-moz-transform : scale($ratio);
|
||||
-ms-transform : scale($ratio);
|
||||
-o-transform : scale($ratio);
|
||||
transform : scale($ratio);
|
||||
}
|
||||
|
||||
// .skew(VALUE, VALUE);
|
||||
@mixin skew($x: 0, $y: 0) {
|
||||
-webkit-transform : skew($x, $y);
|
||||
-moz-transform : skew($x, $y);
|
||||
-ms-transform : skew($x, $y);
|
||||
-o-transform : skew($x, $y);
|
||||
transform : skew($x, $y);
|
||||
}
|
||||
|
||||
// .transition(PROPERTY DURATION DELAY(OPTIONAL) TIMING-FINCTION);
|
||||
@mixin transition($transition) {
|
||||
-webkit-transition : $transition;
|
||||
-moz-transition : $transition;
|
||||
-ms-transition : $transition;
|
||||
-o-transition : $transition;
|
||||
transition : $transition;
|
||||
}
|
||||
|
||||
// .translate(VALUE, VALUE)
|
||||
@mixin translate($x: 0, $y: 0) {
|
||||
-webkit-transform : translate($x, $y);
|
||||
-moz-transform : translate($x, $y);
|
||||
-ms-transform : translate($x, $y);
|
||||
-o-transform : translate($x, $y);
|
||||
transform : translate($x, $y);
|
||||
}
|
||||
|
||||
@mixin translate3d($x: 0, $y: 0, $z: 0) {
|
||||
-webkit-transform : translate($x, $y, $z);
|
||||
-moz-transform : translate($x, $y, $z);
|
||||
-ms-transform : translate($x, $y, $z);
|
||||
-o-transform : translate($x, $y, $z);
|
||||
transform : translate($x, $y, $z);
|
||||
}
|
||||
|
||||
@mixin animation($name, $duration: 300ms, $delay: 0, $ease: ease) {
|
||||
-webkit-animation: $name $duration $delay $ease;
|
||||
-moz-animation: $name $duration $delay $ease;
|
||||
-ms-animation: $name $duration $delay $ease;
|
||||
}
|
||||
|
||||
// BACKGROUND
|
||||
// --------------------------------------------------
|
||||
|
||||
// .background-alpha(VALUE VALUE);
|
||||
@mixin background-alpha($color: $white, $alpha: 1) {
|
||||
background-color : hsla(hue($color), saturation($color), lightness($color), $alpha);
|
||||
}
|
||||
|
||||
// .background-size(VALUE VALUE);
|
||||
@mixin background-size($size){
|
||||
-webkit-background-size : $size;
|
||||
-moz-background-size : $size;
|
||||
-o-background-size : $size;
|
||||
background-size : $size;
|
||||
}
|
||||
|
||||
// .background-clip(VALUE); (border-box, padding-box, content-box)
|
||||
@mixin background-clip($clip) {
|
||||
-webkit-background-clip : $clip;
|
||||
-moz-background-clip : $clip;
|
||||
background-clip : $clip;
|
||||
}
|
||||
|
||||
// .box-sizing(VALUE); (border-box, padding-box, content-box)
|
||||
@mixin box-sizing($boxsize: border-box) {
|
||||
-webkit-box-sizing : $boxsize;
|
||||
-moz-box-sizing : $boxsize;
|
||||
-ms-box-sizing : $boxsize;
|
||||
box-sizing : $boxsize;
|
||||
}
|
||||
|
||||
// For image replacement
|
||||
@mixin hide-text() {
|
||||
text-indent : 100%;
|
||||
white-space : nowrap;
|
||||
overflow : hidden;
|
||||
}
|
||||
|
||||
// Hide from visual and speaking browsers
|
||||
@mixin hidden() {
|
||||
display : none !important;
|
||||
visibility : hidden;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// Hide but maintain layout
|
||||
@mixin invisible() {
|
||||
visibility : hidden;
|
||||
}
|
||||
|
||||
// .resize(VALUE) (none, both, horizontal, vertical, inherit)
|
||||
@mixin resize($direction: both) {
|
||||
resize : $direction;
|
||||
overflow : auto;
|
||||
}
|
||||
|
||||
// .userselect(VALUE) (all, element, none, text)
|
||||
@mixin user-select($select) {
|
||||
-webkit-user-select : $select;
|
||||
-moz-user-select : $select;
|
||||
-o-user-select : $select;
|
||||
user-select : $select;
|
||||
}
|
||||
|
||||
// Hidden but available to speaking browsers
|
||||
@mixin visuallyhidden() {
|
||||
overflow : hidden;
|
||||
position : absolute;
|
||||
clip : rect(0 0 0 0);
|
||||
height : 1px;
|
||||
width : 1px;
|
||||
margin : -1px;
|
||||
padding : 0;
|
||||
border : 0;
|
||||
}
|
||||
|
||||
// Make visuallyhidden focusable with a keyboard
|
||||
.visuallyhidden.focusable:active,
|
||||
.visuallyhidden.focusable:focus {
|
||||
position : static;
|
||||
clip : auto;
|
||||
height : auto;
|
||||
width : auto;
|
||||
margin : 0;
|
||||
overflow: visible;
|
||||
}
|
||||
464
_sass/_page.scss
464
_sass/_page.scss
|
|
@ -1,464 +0,0 @@
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
background-color: $body-color;
|
||||
}
|
||||
|
||||
// Main
|
||||
// --------------------------------------------------
|
||||
.entry,
|
||||
.hentry {
|
||||
@include clearfix;
|
||||
h1, h2, h3, h4, h5, h6, p, li {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
.entry-content {
|
||||
@include font-size(16);
|
||||
// Dotted line underlines for links
|
||||
p > a,
|
||||
li > a {
|
||||
border-bottom: 1px dotted lighten($link-color, 50);
|
||||
&:hover {
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Entry Header
|
||||
// --------------------------------------------------
|
||||
.entry-header {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.header-title {
|
||||
text-align: center;
|
||||
margin: 30px 0 0;
|
||||
h1 {
|
||||
margin: 10px 20px;
|
||||
font-weight: 700;
|
||||
@include font-rem(32);
|
||||
color: lighten($base-color,20);
|
||||
@media #{$medium} {
|
||||
@include font-rem(48);
|
||||
}
|
||||
@media #{$large} {
|
||||
@include font-rem(60);
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
@include font-rem(18);
|
||||
text-transform: uppercase;
|
||||
color: lighten($base-color,40);
|
||||
@media #{$medium} {
|
||||
@include font-rem(24);
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: lighten($base-color,20);
|
||||
}
|
||||
}
|
||||
.feature .header-title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
display: table;
|
||||
margin-top: 0;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
overflow: hidden;
|
||||
.header-title-wrap {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
h1 {
|
||||
margin: 10px;
|
||||
font-weight: 700;
|
||||
margin: 10px 60px;
|
||||
color: $white;
|
||||
text-shadow: 1px 1px 4px rgba($base-color,0.6);
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
@media #{$large} {
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
color: $white;
|
||||
text-transform: uppercase;
|
||||
@media #{$medium} {
|
||||
a {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: $white;
|
||||
}
|
||||
}
|
||||
.entry-image {
|
||||
position: relative;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
min-height: 400px;
|
||||
overflow: hidden;
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba($base-color,0.3);
|
||||
}
|
||||
img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
min-width: 50%;
|
||||
min-height: 400px; // match .entry-image min-height
|
||||
}
|
||||
}
|
||||
// Feature Image Caption
|
||||
.image-credit {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
max-width: 440px;
|
||||
padding: 10px 15px;
|
||||
background-color: rgba($base-color,0.5);
|
||||
color: $white;
|
||||
@include font-rem(12);
|
||||
text-align: right;
|
||||
@include border-radius(3px,0,0,3px);
|
||||
z-index: 10;
|
||||
@media #{$medium} {
|
||||
max-width: 760px;
|
||||
}
|
||||
@media #{$large} {
|
||||
max-width: 960px;
|
||||
}
|
||||
a {
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Single Post and Page
|
||||
// --------------------------------------------------
|
||||
.entry-meta {
|
||||
@include font-rem(12);
|
||||
text-transform: uppercase;
|
||||
color: lighten($base-color,60);
|
||||
a {
|
||||
color: lighten($base-color,60);
|
||||
}
|
||||
.vcard {
|
||||
&:before {
|
||||
content: " by ";
|
||||
}
|
||||
}
|
||||
.tag {
|
||||
display: inline-block;
|
||||
margin: 4px;
|
||||
color: $white;
|
||||
@include rounded(3px);
|
||||
background-color: lighten($base-color,50);
|
||||
span {
|
||||
float: left;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
.count {
|
||||
background-color: lighten($base-color,40);
|
||||
@include border-radius(3px,3px,0,0);
|
||||
}
|
||||
&:hover {
|
||||
background-color: lighten($base-color,40);
|
||||
}
|
||||
}
|
||||
.entry-reading-time {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
header .entry-meta {
|
||||
display: none; // hide header meta on small screens
|
||||
@media #{$medium} {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
#post,
|
||||
#page {
|
||||
.entry-content {
|
||||
margin: 40px 2px 20px 2px;
|
||||
padding: 10px 15px;
|
||||
background-color: $white;
|
||||
box-shadow: 0 0 0 0, 0 6px 12px rgba($black,0.1);
|
||||
@include rounded(3px);
|
||||
@media #{$medium} {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
padding: 20px 30px;
|
||||
}
|
||||
@media #{$large} {
|
||||
max-width: 800px;
|
||||
margin: 50px auto 30px auto;
|
||||
padding: 50px 80px;
|
||||
> p:first-child {
|
||||
@include font-size(20);
|
||||
}
|
||||
}
|
||||
}
|
||||
#disqus_thread {
|
||||
margin: 40px 2px 20px 2px;
|
||||
padding: 10px 15px;
|
||||
background-color: $white;
|
||||
box-shadow: 0 0 0 1px rgba($border-color,0.1), 0 6px 12px rgba($black,0.1);
|
||||
@include rounded(3px);
|
||||
@media #{$medium} {
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
padding: 20px 30px;
|
||||
}
|
||||
@media #{$large} {
|
||||
max-width: 800px;
|
||||
padding: 50px 80px;
|
||||
margin: 0 auto 30px auto;
|
||||
}
|
||||
}
|
||||
.entry-meta {
|
||||
margin: 50px 30px 30px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.entry-tags {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.tag-heading,
|
||||
.year-heading {
|
||||
margin-top: 0;
|
||||
}
|
||||
// Permalink icon for link post
|
||||
.permalink {
|
||||
margin-right: 7px;
|
||||
}
|
||||
// Post Pagination Module
|
||||
.pagination {
|
||||
margin: 20px 10px;
|
||||
text-align: center;
|
||||
ul {
|
||||
display: inline;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
li {
|
||||
padding-left: 4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
.current-page {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
// Read More Module
|
||||
.read-more {
|
||||
position: relative;
|
||||
margin: 40px 2px 20px 2px;
|
||||
padding: 40px 15px 25px;
|
||||
background-color: $white;
|
||||
box-shadow: 0 0 0 1px rgba($border-color,0.1), 0 6px 12px rgba($black,0.1);
|
||||
@include rounded(3px);
|
||||
@media #{$medium} {
|
||||
margin: 50px 10px 20px 10px;
|
||||
padding: 50px 40px 25px;
|
||||
}
|
||||
@media #{$large} {
|
||||
max-width: 800px;
|
||||
padding: 50px 80px;
|
||||
margin: 60px auto;
|
||||
}
|
||||
text-align: center;
|
||||
@include clearfix;
|
||||
}
|
||||
.read-more-header {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 35px;
|
||||
a {
|
||||
@extend .btn;
|
||||
}
|
||||
}
|
||||
.read-more-content {
|
||||
@include font-size(16);
|
||||
// Dotted line underlines for links
|
||||
p > a,
|
||||
li > a {
|
||||
border-bottom: 1px dotted lighten($link-color, 50);
|
||||
&:hover {
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
@include font-rem(28);
|
||||
a {
|
||||
color: $text-color;
|
||||
}
|
||||
@media #{$medium} {
|
||||
@include font-rem(36);
|
||||
}
|
||||
}
|
||||
}
|
||||
.read-more-list {
|
||||
border-top: solid 2px lighten($base-color,80);
|
||||
}
|
||||
.list-item {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
h4 {
|
||||
@include font-rem(18);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
span {
|
||||
display: block;
|
||||
@include font-rem(14);
|
||||
color: lighten($base-color,50);
|
||||
}
|
||||
@media #{$medium} {
|
||||
width: 49%;
|
||||
float: left;
|
||||
&:nth-child(2) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Post Index
|
||||
// --------------------------------------------------
|
||||
#post-index {
|
||||
#main {
|
||||
margin: 40px 2px 20px 2px;
|
||||
@media #{$medium} {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
@media #{$large} {
|
||||
max-width: 800px;
|
||||
margin-top: 50px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
article {
|
||||
background-color: $white;
|
||||
box-shadow: 0 0 0 0, 0 6px 12px rgba($base-color,0.1);
|
||||
@include rounded(3px);
|
||||
margin-bottom: 20px;
|
||||
padding: 25px 15px;
|
||||
@media #{$medium} {
|
||||
padding: 30px;
|
||||
}
|
||||
@media #{$large} {
|
||||
margin-bottom: 30px;
|
||||
padding: 50px 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.entry-image-index {
|
||||
margin-top: -25px;
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
margin-bottom: 10px;
|
||||
@media #{$medium} {
|
||||
margin-top: -30px;
|
||||
margin-left: -30px;
|
||||
margin-right: -30px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
@media #{$large} {
|
||||
margin-top: -50px;
|
||||
margin-left: -80px;
|
||||
margin-right: -80px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
img {
|
||||
@include border-radius(3px,0,0,3px); // round image corners
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
// --------------------------------------------------
|
||||
.footer-wrapper {
|
||||
@include clearfix;
|
||||
margin: 2em auto;
|
||||
text-align: center;
|
||||
color: lighten($text-color,20);
|
||||
a {
|
||||
color: lighten($text-color,20);
|
||||
}
|
||||
}
|
||||
|
||||
// Social Share
|
||||
// --------------------------------------------------
|
||||
.socialcount {
|
||||
@include font-rem(16);
|
||||
li {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
p > a,
|
||||
li > a {
|
||||
border-bottom-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Browser Upgrade
|
||||
// --------------------------------------------------
|
||||
.upgrade {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Google Search
|
||||
// --------------------------------------------------
|
||||
#goog-fixurl {
|
||||
ul {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
#goog-wm-qt {
|
||||
width: auto;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 20px;
|
||||
padding: 8px 20px;
|
||||
display: inline-block;
|
||||
@include font-rem(14);
|
||||
background-color: $white;
|
||||
color: $text-color;
|
||||
border-width: 2px !important;
|
||||
border-style: solid !important;
|
||||
border-color: lighten($primary,50);
|
||||
@include rounded(3px);
|
||||
}
|
||||
#goog-wm-sb {
|
||||
@extend .btn;
|
||||
}
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
.highlight {
|
||||
margin-bottom: 1.5em;
|
||||
@include font(12);
|
||||
color: #d0d0d0;
|
||||
border: 1px solid darken($body-color, 5);
|
||||
background-color: #272822;
|
||||
@include rounded(3px);
|
||||
pre {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
}
|
||||
.lineno { padding-right: 24px; color: #8f908a;}
|
||||
.hll { background-color: #49483e }
|
||||
.c { color: #75715e } /* Comment */
|
||||
.err { color: #960050; background-color: #1e0010 } /* Error */
|
||||
.k { color: #66d9ef } /* Keyword */
|
||||
.l { color: #ae81ff } /* Literal */
|
||||
.n { color: #f8f8f2 } /* Name */
|
||||
.o { color: #f92672 } /* Operator */
|
||||
.p { color: #f8f8f2 } /* Punctuation */
|
||||
.cm { color: #75715e } /* Comment.Multiline */
|
||||
.cp { color: #75715e } /* Comment.Preproc */
|
||||
.c1 { color: #75715e } /* Comment.Single */
|
||||
.cs { color: #75715e } /* Comment.Special */
|
||||
.ge { font-style: italic } /* Generic.Emph */
|
||||
.gs { font-weight: bold } /* Generic.Strong */
|
||||
.kc { color: #66d9ef } /* Keyword.Constant */
|
||||
.kd { color: #66d9ef } /* Keyword.Declaration */
|
||||
.kn { color: #f92672 } /* Keyword.Namespace */
|
||||
.kp { color: #66d9ef } /* Keyword.Pseudo */
|
||||
.kr { color: #66d9ef } /* Keyword.Reserved */
|
||||
.kt { color: #66d9ef } /* Keyword.Type */
|
||||
.ld { color: #e6db74 } /* Literal.Date */
|
||||
.m { color: #ae81ff } /* Literal.Number */
|
||||
.s { color: #e6db74 } /* Literal.String */
|
||||
.na { color: #a6e22e } /* Name.Attribute */
|
||||
.nb { color: #f8f8f2 } /* Name.Builtin */
|
||||
.nc { color: #a6e22e } /* Name.Class */
|
||||
.no { color: #66d9ef } /* Name.Constant */
|
||||
.nd { color: #a6e22e } /* Name.Decorator */
|
||||
.ni { color: #f8f8f2 } /* Name.Entity */
|
||||
.ne { color: #a6e22e } /* Name.Exception */
|
||||
.nf { color: #a6e22e } /* Name.Function */
|
||||
.nl { color: #f8f8f2 } /* Name.Label */
|
||||
.nn { color: #f8f8f2 } /* Name.Namespace */
|
||||
.nx { color: #a6e22e } /* Name.Other */
|
||||
.py { color: #f8f8f2 } /* Name.Property */
|
||||
.nt { color: #f92672 } /* Name.Tag */
|
||||
.nv { color: #f8f8f2 } /* Name.Variable */
|
||||
.ow { color: #f92672 } /* Operator.Word */
|
||||
.w { color: #f8f8f2 } /* Text.Whitespace */
|
||||
.mf { color: #ae81ff } /* Literal.Number.Float */
|
||||
.mh { color: #ae81ff } /* Literal.Number.Hex */
|
||||
.mi { color: #ae81ff } /* Literal.Number.Integer */
|
||||
.mo { color: #ae81ff } /* Literal.Number.Oct */
|
||||
.sb { color: #e6db74 } /* Literal.String.Backtick */
|
||||
.sc { color: #e6db74 } /* Literal.String.Char */
|
||||
.sd { color: #e6db74 } /* Literal.String.Doc */
|
||||
.s2 { color: #e6db74 } /* Literal.String.Double */
|
||||
.se { color: #ae81ff } /* Literal.String.Escape */
|
||||
.sh { color: #e6db74 } /* Literal.String.Heredoc */
|
||||
.si { color: #e6db74 } /* Literal.String.Interpol */
|
||||
.sx { color: #e6db74 } /* Literal.String.Other */
|
||||
.sr { color: #e6db74 } /* Literal.String.Regex */
|
||||
.s1 { color: #e6db74 } /* Literal.String.Single */
|
||||
.ss { color: #e6db74 } /* Literal.String.Symbol */
|
||||
.bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
|
||||
.vc { color: #f8f8f2 } /* Name.Variable.Class */
|
||||
.vg { color: #f8f8f2 } /* Name.Variable.Global */
|
||||
.vi { color: #f8f8f2 } /* Name.Variable.Instance */
|
||||
.il { color: #ae81ff } /* Literal.Number.Integer.Long */
|
||||
}
|
||||
|
|
@ -1,156 +0,0 @@
|
|||
//
|
||||
// Reset CSS
|
||||
// Adapted from http://github.com/necolas/normalize.css
|
||||
// --------------------------------------------------
|
||||
|
||||
*, *:after, *:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Display in IE6-9 and FF3
|
||||
// -------------------------
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Display block in IE6-9 and FF3
|
||||
// -------------------------
|
||||
audio,
|
||||
canvas,
|
||||
video {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
// Prevents modern browsers from displaying 'audio' without controls
|
||||
// -------------------------
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Base settings
|
||||
// -------------------------
|
||||
html {
|
||||
font-size: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
// Focus states
|
||||
a:focus {
|
||||
@include tab-focus();
|
||||
}
|
||||
// Hover & Active
|
||||
a:hover,
|
||||
a:active {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Prevents sub and sup affecting line-height in all browsers
|
||||
// -------------------------
|
||||
sub,
|
||||
sup {
|
||||
position: relative;
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
// Blockquote
|
||||
// -------------------------
|
||||
blockquote {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Img border in a's and image quality
|
||||
// -------------------------
|
||||
img {
|
||||
/* Responsive images (ensure images don't scale beyond their parents) */
|
||||
max-width: 100%; /* Part 1: Set a maxium relative to the parent */
|
||||
width: auto\9; /* IE7-8 need help adjusting responsive images */
|
||||
height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */
|
||||
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
-ms-interpolation-mode: bicubic;
|
||||
}
|
||||
|
||||
// Full width tables
|
||||
// -------------------------
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Prevent max-width from affecting Google Maps
|
||||
#map_canvas img,
|
||||
.google-maps img {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
// Forms
|
||||
// -------------------------
|
||||
// Font size in all browsers, margin changes, misc consistency
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
margin: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
button,
|
||||
input {
|
||||
*overflow: visible; // Inner spacing ie IE6/7
|
||||
line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
|
||||
}
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
button,
|
||||
html input[type="button"], // Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls.
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; // Corrects inability to style clickable `input` types in iOS.
|
||||
cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.
|
||||
}
|
||||
label,
|
||||
select,
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"],
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others.
|
||||
}
|
||||
input[type="search"] { // Appearance in Safari/Chrome
|
||||
@include box-sizing(content-box);
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
input[type="search"]::-webkit-search-decoration,
|
||||
input[type="search"]::-webkit-search-cancel-button {
|
||||
-webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5
|
||||
}
|
||||
textarea {
|
||||
overflow: auto; // Remove vertical scrollbar in IE6-9
|
||||
vertical-align: top; // Readability and alignment cross-browser
|
||||
}
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
// Selection
|
||||
// --------------------------------------------------
|
||||
::-moz-selection {
|
||||
background-color: lighten($base-color, 65%);
|
||||
color: $base-color;
|
||||
text-shadow: none;
|
||||
}
|
||||
::selection {
|
||||
background-color: lighten($base-color, 65%);
|
||||
color: $base-color;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
// Global Classes
|
||||
// --------------------------------------------------
|
||||
.wrap {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.all-caps {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.image-left {
|
||||
float: none;
|
||||
@media #{$medium} {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
.image-right {
|
||||
float: none;
|
||||
@media #{$medium} {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.unstyled-list {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
li {
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
.inline-list {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
li {
|
||||
list-style-type: none;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.center-image {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Global Transition
|
||||
// ---------------------------------------------------
|
||||
b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a {
|
||||
@include transition(all .2s ease);
|
||||
}
|
||||
|
|
@ -1,125 +0,0 @@
|
|||
// Body
|
||||
// --------------------------------------------------
|
||||
body {
|
||||
font-family: $base-font;
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
// Headings
|
||||
// --------------------------------------------------
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: $heading-font;
|
||||
}
|
||||
h1 {
|
||||
@include font-rem(28);
|
||||
@media #{$medium} {
|
||||
@include font-rem(32);
|
||||
}
|
||||
}
|
||||
|
||||
// Links
|
||||
// --------------------------------------------------
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $link-color;
|
||||
&:visited {
|
||||
color: lighten($link-color, 20);
|
||||
}
|
||||
&:hover {
|
||||
color: darken($link-color, 20);
|
||||
}
|
||||
&:focus {
|
||||
outline: thin dotted;
|
||||
color: darken($link-color, 20);
|
||||
}
|
||||
&:hover,
|
||||
&:active {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.link-arrow {
|
||||
font-weight: 100;
|
||||
text-decoration: underline;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// Figures
|
||||
// --------------------------------------------------
|
||||
figcaption {
|
||||
padding-top: 10px;
|
||||
@include font(14);
|
||||
line-height: 1.3;
|
||||
color: lighten($text-color, 10);
|
||||
}
|
||||
|
||||
// Note text
|
||||
// --------------------------------------------------
|
||||
.notice {
|
||||
margin-top: 1.5em;
|
||||
padding: .5em 1em;
|
||||
text-indent: 0;
|
||||
@include font-rem(14);
|
||||
background-color: $body-color;
|
||||
border: 1px solid darken($body-color,20);
|
||||
@include rounded(3px);
|
||||
}
|
||||
|
||||
// Blockquotes
|
||||
// --------------------------------------------------
|
||||
blockquote {
|
||||
font-family: $alt-font;
|
||||
font-style: italic;
|
||||
border-left: 8px solid $border-color;
|
||||
padding-left: 20px;
|
||||
@media #{$medium} {
|
||||
margin-left: -28px;
|
||||
}
|
||||
}
|
||||
|
||||
// List items
|
||||
// --------------------------------------------------
|
||||
.entry-content li {
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
// Footnotes
|
||||
// --------------------------------------------------
|
||||
.entry-content .footnotes {
|
||||
ol, li, p {
|
||||
@include font-size(14);
|
||||
}
|
||||
}
|
||||
|
||||
// Code
|
||||
// --------------------------------------------------
|
||||
tt, code, kbd, samp, pre {
|
||||
font-family: $code-font;
|
||||
}
|
||||
p,
|
||||
li {
|
||||
code {
|
||||
@include font-rem(12);
|
||||
line-height: 1.5;
|
||||
white-space: nowrap;
|
||||
margin: 0 2px;
|
||||
padding: 0 5px;
|
||||
border: 1px solid lighten($black, 90);
|
||||
background-color: lighten($black, 95);
|
||||
@include rounded(3px);
|
||||
}
|
||||
}
|
||||
pre {
|
||||
@include font-rem(12);
|
||||
line-height: 1.5;
|
||||
overflow-x: auto;
|
||||
&::-webkit-scrollbar {
|
||||
height: 12px;
|
||||
background-color: #34362e;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:horizontal {
|
||||
background-color: #6a6d5d;
|
||||
@include rounded(4px);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
// Typography
|
||||
// --------------------------------------------------
|
||||
|
||||
$base-font: 'Lato', Calibri, Arial, sans-serif;
|
||||
$heading-font: $base-font;
|
||||
$caption-font: $base-font;
|
||||
$code-font: monospace;
|
||||
$alt-font: serif;
|
||||
|
||||
$doc-font-size: 16;
|
||||
$doc-line-height: 26;
|
||||
|
||||
|
||||
// set-up the body font-size / line-height
|
||||
body {
|
||||
margin-top: 0px + $doc-line-height;
|
||||
font-size: 0px + $doc-font-size;
|
||||
}
|
||||
|
||||
|
||||
// Colors
|
||||
// --------------------------------------------------
|
||||
$base-color : rgba(#222,0.8);
|
||||
$body-color : #e8e8e8;
|
||||
$text-color : rgba(#222,0.8);
|
||||
$comp-color : complement(#222);
|
||||
$border-color : lighten($base-color,60);
|
||||
$white : #fff;
|
||||
$black : #000;
|
||||
$link-color : rgba(#222,0.8);
|
||||
|
||||
$primary : #222;
|
||||
$success : #5cb85c;
|
||||
$warning : #dd8338;
|
||||
$danger : #C64537;
|
||||
$info : #308cbc;
|
||||
|
||||
|
||||
// Screen Size
|
||||
// --------------------------------------------------
|
||||
|
||||
$small : "only screen and (min-width: 30em)";
|
||||
$medium : "only screen and (min-width: 48em)";
|
||||
$large : "only screen and (min-width: 62.5em)";
|
||||
157
_sass/foundation-components/_accordion.scss
Normal file
157
_sass/foundation-components/_accordion.scss
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
|
||||
//
|
||||
// @variables
|
||||
//
|
||||
|
||||
$include-html-accordion-classes: $include-html-classes !default;
|
||||
|
||||
$accordion-navigation-padding: rem-calc(16) !default;
|
||||
$accordion-navigation-bg-color: $silver !default;
|
||||
$accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%) !default;
|
||||
$accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%) !default;
|
||||
$accordion-navigation-font-color: $jet !default;
|
||||
$accordion-navigation-font-size: rem-calc(16) !default;
|
||||
$accordion-navigation-font-family: $body-font-family !default;
|
||||
|
||||
$accordion-content-padding: ($column-gutter/2) !default;
|
||||
$accordion-content-active-bg-color: $white !default;
|
||||
|
||||
|
||||
// Mixin: accordion-container()
|
||||
// Decription: Responsible for the container component of accordions, generating styles relating to a margin of zero and a clearfix
|
||||
// Explicit Dependencies: a clearfix mixin *is* defined.
|
||||
// Implicit Dependencies: None
|
||||
|
||||
@mixin accordion-container() {
|
||||
@include clearfix;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Mixin: accordion-navigation( $bg, $hover-bg, $active-bg, $padding, $active_class, $font-color, $font-size, $font-family){
|
||||
// @params $bg-color: [ color or string ]: Specify the background color for the navigation element
|
||||
// @params $hover-bg-color [ color or string ]: Specify the background color for the navigation element when hovered
|
||||
// @params $active-bg [ color or string ]: Specify the background color for the navigation element when clicked and not released.
|
||||
// @params $active_class [ string ]: Specify the class name used to keep track of which accordion tab should be visible
|
||||
// @params $font-color [ color or string ]: Color of the font for accordion
|
||||
// @params $font-size [ number ]: Specifiy the font-size of the text inside the navigation element
|
||||
// @params $font-family [ string ]: Specify the font family for the text of the navigation of the accorion
|
||||
|
||||
@mixin accordion-navigation( $bg: $accordion-navigation-bg-color, $hover-bg: $accordion-navigation-hover-bg-color, $active-bg: $accordion-navigation-active-bg-color, $padding: $accordion-navigation-padding, $active_class: 'active', $font-color: $accordion-navigation-font-color, $font-size: $accordion-navigation-font-size, $font-family: $accordion-navigation-font-family ){
|
||||
display: block;
|
||||
margin-bottom: 0 !important;
|
||||
@if type-of($active_class) != "string" {
|
||||
@warn "`#{$active_class}` isn't a valid string. A valid string is needed to correctly be interpolated as a CSS class. CSS classes cannot start with a number or consist of only numbers. CSS will not be generated for the active state of this navigation component."
|
||||
}
|
||||
@else {
|
||||
&.#{ $active_class } > a {
|
||||
background: $active-bg;
|
||||
}
|
||||
}
|
||||
> a {
|
||||
background: $bg;
|
||||
color: $font-color;
|
||||
@if type-of($padding) != number {
|
||||
@warn "`#{$padding}` was read as #{type-of($padding)}";
|
||||
@if $accordion-navigation-padding != null {
|
||||
@warn "#{$padding} was read as a #{type-of($padding)}";
|
||||
@warn "`#{$padding}` isn't a valid number. $accordion-navigation-padding (#{$accordion-navigation-padding}) will be used instead.)";
|
||||
padding: $accordion-navigation-padding;
|
||||
}
|
||||
@else {
|
||||
@warn "`#{$padding}` isn't a valid number and $accordion-navigation-padding is missing. A value of `null` is returned to not output an invalid value for padding";
|
||||
padding: null;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
padding: $padding;
|
||||
}
|
||||
display: block;
|
||||
font-family: $font-family;
|
||||
@if type-of($font-size) != number {
|
||||
@warn "`#{$font-size}` was read as a #{type-of($font-size)}";
|
||||
@if $accordion-navigation-font-size != null {
|
||||
@warn "`#{$font-size}` is not a valid number. The value of $accordion-navigation-font-size will be used instead (#{$accordion-navigation-font-size}).";
|
||||
font-size: $accordion-navigation-font-size;
|
||||
}
|
||||
@else{
|
||||
@warn "`#{$font-size}` is not a valid number and the default value of $accordion-navigation-font-size is not defined. A value of `null` will be returned to not generate an invalid value for font-size.";
|
||||
font-size: null;
|
||||
|
||||
}
|
||||
}
|
||||
@else {
|
||||
font-size: $font-size;
|
||||
}
|
||||
&:hover {
|
||||
background: $hover-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin: accordion-content($bg, $padding, $active-class)
|
||||
// @params $padding [ number ]: Padding for the content of the container
|
||||
// @params $bg [ color ]: Background color for the content when it's visible
|
||||
// @params $active_class [ string ]: Class name used to keep track of which accordion tab should be visible.
|
||||
|
||||
@mixin accordion-content($bg: $accordion-content-active-bg-color, $padding: $accordion-content-padding, $active_class: 'active'){
|
||||
display: none;
|
||||
@if type-of($padding) != "number" {
|
||||
@warn "#{$padding} was read as a #{type-of($padding)}";
|
||||
@if $accordion-content-padding != null {
|
||||
@warn "`#{$padding}` isn't a valid number. $accordion-content-padding used instead";
|
||||
padding: $accordion-content-padding;
|
||||
} @else {
|
||||
@warn "`#{$padding}` isn't a valid number and the default value of $accordion-content-padding is not defined. A value of `null` is returned to not output an invalid value for padding.";
|
||||
padding: null;
|
||||
}
|
||||
} @else {
|
||||
padding: $padding;
|
||||
}
|
||||
|
||||
@if type-of($active_class) != "string" {
|
||||
@warn "`#{$active_class}` isn't a valid string. A valid string is needed to correctly be interpolated as a CSS class. CSS classes cannot start with a number or consist of only numbers. CSS will not be generated for the active state of the content. "
|
||||
}
|
||||
@else {
|
||||
&.#{$active_class} {
|
||||
display: block;
|
||||
background: $bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("accordion") {
|
||||
@if $include-html-accordion-classes {
|
||||
.accordion {
|
||||
@include clearfix;
|
||||
margin-bottom: 0;
|
||||
.accordion-navigation, dd {
|
||||
display: block;
|
||||
margin-bottom: 0 !important;
|
||||
&.active > a { background: $accordion-navigation-active-bg-color; }
|
||||
> a {
|
||||
background: $accordion-navigation-bg-color;
|
||||
color: $accordion-navigation-font-color;
|
||||
padding: $accordion-navigation-padding;
|
||||
display: block;
|
||||
font-family: $accordion-navigation-font-family;
|
||||
font-size: $accordion-navigation-font-size;
|
||||
&:hover { background: $accordion-navigation-hover-bg-color; }
|
||||
}
|
||||
|
||||
> .content {
|
||||
display: none;
|
||||
padding: $accordion-content-padding;
|
||||
&.active {
|
||||
display: block;
|
||||
background: $accordion-content-active-bg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
128
_sass/foundation-components/_alert-boxes.scss
Normal file
128
_sass/foundation-components/_alert-boxes.scss
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
|
||||
//
|
||||
// Alert Box Variables
|
||||
//
|
||||
$include-html-alert-classes: $include-html-classes !default;
|
||||
|
||||
// We use this to control alert padding.
|
||||
$alert-padding-top: rem-calc(14) !default;
|
||||
$alert-padding-default-float: $alert-padding-top !default;
|
||||
$alert-padding-opposite-direction: $alert-padding-top + rem-calc(10) !default;
|
||||
$alert-padding-bottom: $alert-padding-top !default;
|
||||
|
||||
// We use these to control text style.
|
||||
$alert-font-weight: $font-weight-normal !default;
|
||||
$alert-font-size: rem-calc(13) !default;
|
||||
$alert-font-color: $white !default;
|
||||
$alert-font-color-alt: scale-color($secondary-color, $lightness: -66%) !default;
|
||||
|
||||
// We use this for close hover effect.
|
||||
$alert-function-factor: -14% !default;
|
||||
|
||||
// We use these to control border styles.
|
||||
$alert-border-style: solid !default;
|
||||
$alert-border-width: 1px !default;
|
||||
$alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor) !default;
|
||||
$alert-bottom-margin: rem-calc(20) !default;
|
||||
|
||||
// We use these to style the close buttons
|
||||
$alert-close-color: $oil !default;
|
||||
$alert-close-top: 50% !default;
|
||||
$alert-close-position: rem-calc(4) !default;
|
||||
$alert-close-font-size: rem-calc(22) !default;
|
||||
$alert-close-opacity: 0.3 !default;
|
||||
$alert-close-opacity-hover: 0.5 !default;
|
||||
$alert-close-padding: 9px 6px 4px !default;
|
||||
$alert-close-background: inherit !default;
|
||||
|
||||
// We use this to control border radius
|
||||
$alert-radius: $global-radius !default;
|
||||
|
||||
$alert-transition-speed: 300ms !default;
|
||||
$alert-transition-ease: ease-out !default;
|
||||
|
||||
//
|
||||
// Alert Mixins
|
||||
//
|
||||
|
||||
// We use this mixin to create a default alert base.
|
||||
@mixin alert-base {
|
||||
border-style: $alert-border-style;
|
||||
border-width: $alert-border-width;
|
||||
display: block;
|
||||
font-weight: $alert-font-weight;
|
||||
margin-bottom: $alert-bottom-margin;
|
||||
position: relative;
|
||||
padding: $alert-padding-top $alert-padding-opposite-direction $alert-padding-bottom $alert-padding-default-float;
|
||||
font-size: $alert-font-size;
|
||||
@include single-transition(opacity, $alert-transition-speed, $alert-transition-ease)
|
||||
}
|
||||
|
||||
// We use this mixin to add alert styles
|
||||
//
|
||||
// $bg - The background of the alert. Default: $primary-color.
|
||||
@mixin alert-style($bg:$primary-color) {
|
||||
|
||||
// This finds the lightness percentage of the background color.
|
||||
$bg-lightness: lightness($bg);
|
||||
|
||||
// We control which background color and border come through.
|
||||
background-color: $bg;
|
||||
border-color: scale-color($bg, $lightness: $alert-function-factor);
|
||||
|
||||
// We control the text color for you based on the background color.
|
||||
@if $bg-lightness > 70% { color: $alert-font-color-alt; }
|
||||
@else { color: $alert-font-color; }
|
||||
|
||||
}
|
||||
|
||||
// We use this to create the close button.
|
||||
@mixin alert-close {
|
||||
font-size: $alert-close-font-size;
|
||||
padding: $alert-close-padding;
|
||||
line-height: 0;
|
||||
position: absolute;
|
||||
top: $alert-close-top;
|
||||
margin-top: -($alert-close-font-size / 2);
|
||||
#{$opposite-direction}: $alert-close-position;
|
||||
color: $alert-close-color;
|
||||
opacity: $alert-close-opacity;
|
||||
background: $alert-close-background;
|
||||
&:hover,
|
||||
&:focus { opacity: $alert-close-opacity-hover; }
|
||||
}
|
||||
|
||||
// We use this to quickly create alerts with a single mixin.
|
||||
//
|
||||
// $bg - Background of alert. Default: $primary-color.
|
||||
// $radius - Radius of alert box. Default: false.
|
||||
@mixin alert($bg:$primary-color, $radius:false) {
|
||||
@include alert-base;
|
||||
@include alert-style($bg);
|
||||
@include radius($radius);
|
||||
}
|
||||
|
||||
@include exports("alert-box") {
|
||||
@if $include-html-alert-classes {
|
||||
.alert-box {
|
||||
@include alert;
|
||||
|
||||
.close { @include alert-close; }
|
||||
|
||||
&.radius { @include radius($alert-radius); }
|
||||
&.round { @include radius($global-rounded); }
|
||||
|
||||
&.success { @include alert-style($success-color); }
|
||||
&.alert { @include alert-style($alert-color); }
|
||||
&.secondary { @include alert-style($secondary-color); }
|
||||
&.warning { @include alert-style($warning-color); }
|
||||
&.info { @include alert-style($info-color); }
|
||||
&.alert-close { opacity: 0}
|
||||
}
|
||||
}
|
||||
}
|
||||
132
_sass/foundation-components/_block-grid.scss
Normal file
132
_sass/foundation-components/_block-grid.scss
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
|
||||
//
|
||||
// Block Grid Variables
|
||||
//
|
||||
$include-html-block-grid-classes: $include-html-classes !default;
|
||||
$include-xl-html-block-grid-classes: false !default;
|
||||
|
||||
// We use this to control the maximum number of block grid elements per row
|
||||
$block-grid-elements: 12 !default;
|
||||
$block-grid-default-spacing: rem-calc(20) !default;
|
||||
|
||||
$align-block-grid-to-grid: false !default;
|
||||
@if $align-block-grid-to-grid {
|
||||
$block-grid-default-spacing: $column-gutter;
|
||||
}
|
||||
|
||||
// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
|
||||
$block-grid-media-queries: true !default;
|
||||
|
||||
//
|
||||
// Block Grid Mixins
|
||||
//
|
||||
|
||||
// Create a custom block grid
|
||||
//
|
||||
// $per-row - # of items to display per row. Default: false.
|
||||
// $spacing - # of ems to use as padding on each block item. Default: rem-calc(20).
|
||||
// $base-style - Apply a base style to block grid. Default: true.
|
||||
@mixin block-grid(
|
||||
$per-row:false,
|
||||
$spacing:$block-grid-default-spacing,
|
||||
$include-spacing:true,
|
||||
$base-style:true) {
|
||||
|
||||
@if $base-style {
|
||||
display: block;
|
||||
padding: 0;
|
||||
@if $align-block-grid-to-grid {
|
||||
margin: 0;
|
||||
} @else {
|
||||
margin: 0 (-$spacing/2);
|
||||
}
|
||||
@include clearfix;
|
||||
|
||||
&>li {
|
||||
display: block;
|
||||
height: auto;
|
||||
float: $default-float;
|
||||
@if $include-spacing {
|
||||
padding: 0 ($spacing/2) $spacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $per-row {
|
||||
&>li {
|
||||
width: 100%/$per-row;
|
||||
@if $include-spacing {
|
||||
padding: 0 ($spacing/2) $spacing;
|
||||
}
|
||||
list-style: none;
|
||||
|
||||
&:nth-of-type(1n) { clear: none; }
|
||||
&:nth-of-type(#{$per-row}n+1) { clear: both; }
|
||||
@if $align-block-grid-to-grid {
|
||||
@include block-grid-aligned($per-row, $spacing);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin block-grid-aligned($per-row, $spacing) {
|
||||
@for $i from 1 through $block-grid-elements {
|
||||
@if $per-row >= $i {
|
||||
$grid-column: '+' + $i;
|
||||
@if $per-row == $i {
|
||||
$grid-column: '';
|
||||
}
|
||||
&:nth-of-type(#{$per-row}n#{unquote($grid-column)}) {
|
||||
padding-left: ($spacing - (($spacing / $per-row) * ($per-row - ($i - 1))));
|
||||
padding-right: ($spacing - (($spacing / $per-row) * $i));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Generate presentational markup for block grid.
|
||||
//
|
||||
// $size - Name of class to use, i.e. "large" will generate .large-block-grid-1, .large-block-grid-2, etc.
|
||||
@mixin block-grid-html-classes($size,$include-spacing) {
|
||||
@for $i from 1 through $block-grid-elements {
|
||||
.#{$size}-block-grid-#{($i)} {
|
||||
@include block-grid($i,$block-grid-default-spacing,$include-spacing,false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("block-grid") {
|
||||
@if $include-html-block-grid-classes {
|
||||
|
||||
[class*="block-grid-"] { @include block-grid; }
|
||||
|
||||
@if $block-grid-media-queries {
|
||||
@media #{$small-up} {
|
||||
@include block-grid-html-classes($size:small,$include-spacing:false);
|
||||
}
|
||||
|
||||
@media #{$medium-up} {
|
||||
@include block-grid-html-classes($size:medium,$include-spacing:false);
|
||||
}
|
||||
|
||||
@media #{$large-up} {
|
||||
@include block-grid-html-classes($size:large,$include-spacing:false);
|
||||
}
|
||||
|
||||
@if $include-xl-html-block-grid-classes {
|
||||
@media #{$xlarge-up} {
|
||||
@include block-grid-html-classes($size:xlarge,$include-spacing:false);
|
||||
}
|
||||
|
||||
@media #{$xxlarge-up} {
|
||||
@include block-grid-html-classes($size:xxlarge,$include-spacing:false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
132
_sass/foundation-components/_breadcrumbs.scss
Normal file
132
_sass/foundation-components/_breadcrumbs.scss
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
|
||||
//
|
||||
// Breadcrumb Variables
|
||||
//
|
||||
$include-html-nav-classes: $include-html-classes !default;
|
||||
|
||||
// We use this to set the background color for the breadcrumb container.
|
||||
$crumb-bg: scale-color($secondary-color, $lightness: 55%) !default;
|
||||
|
||||
// We use these to set the padding around the breadcrumbs.
|
||||
$crumb-padding: rem-calc(9 14 9) !default;
|
||||
$crumb-side-padding: rem-calc(12) !default;
|
||||
|
||||
// We use these to control border styles.
|
||||
$crumb-function-factor: -10% !default;
|
||||
$crumb-border-size: 1px !default;
|
||||
$crumb-border-style: solid !default;
|
||||
$crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor) !default;
|
||||
$crumb-radius: $global-radius !default;
|
||||
|
||||
// We use these to set various text styles for breadcrumbs.
|
||||
$crumb-font-size: rem-calc(11) !default;
|
||||
$crumb-font-color: $primary-color !default;
|
||||
$crumb-font-color-current: $oil !default;
|
||||
$crumb-font-color-unavailable: $aluminum !default;
|
||||
$crumb-font-transform: uppercase !default;
|
||||
$crumb-link-decor: underline !default;
|
||||
|
||||
// We use these to control the slash between breadcrumbs
|
||||
$crumb-slash-color: $base !default;
|
||||
$crumb-slash: "/" !default;
|
||||
|
||||
//
|
||||
// Breadcrumb Mixins
|
||||
//
|
||||
|
||||
// We use this mixin to create a container around our breadcrumbs
|
||||
@mixin crumb-container {
|
||||
display: block;
|
||||
padding: $crumb-padding;
|
||||
overflow: hidden;
|
||||
margin-#{$default-float}: 0;
|
||||
list-style: none;
|
||||
border-style: $crumb-border-style;
|
||||
border-width: $crumb-border-size;
|
||||
|
||||
// We control which background color and border come through.
|
||||
background-color: $crumb-bg;
|
||||
border-color: $crumb-border-color;
|
||||
}
|
||||
|
||||
// We use this mixin to create breadcrumb styles from list items.
|
||||
@mixin crumbs {
|
||||
|
||||
// A normal state will make the links look and act like clickable breadcrumbs.
|
||||
margin: 0;
|
||||
float: $default-float;
|
||||
font-size: $crumb-font-size;
|
||||
line-height: $crumb-font-size;
|
||||
text-transform: $crumb-font-transform;
|
||||
color: $crumb-font-color;
|
||||
|
||||
&:hover a, &:focus a { text-decoration: $crumb-link-decor; }
|
||||
|
||||
a {
|
||||
color: $crumb-font-color;
|
||||
}
|
||||
|
||||
// Current is for the link of the current page
|
||||
&.current {
|
||||
cursor: $cursor-default-value;
|
||||
color: $crumb-font-color-current;
|
||||
a {
|
||||
cursor: $cursor-default-value;
|
||||
color: $crumb-font-color-current;
|
||||
}
|
||||
|
||||
&:hover, &:hover a,
|
||||
&:focus, &:focus a { text-decoration: none; }
|
||||
}
|
||||
|
||||
// Unavailable removed color and link styles so it looks inactive.
|
||||
&.unavailable {
|
||||
color: $crumb-font-color-unavailable;
|
||||
a { color: $crumb-font-color-unavailable; }
|
||||
|
||||
&:hover,
|
||||
&:hover a,
|
||||
&:focus,
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
color: $crumb-font-color-unavailable;
|
||||
cursor: $cursor-default-value;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "#{$crumb-slash}";
|
||||
color: $crumb-slash-color;
|
||||
margin: 0 $crumb-side-padding;
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
|
||||
&:first-child:before {
|
||||
content: " ";
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("breadcrumbs") {
|
||||
@if $include-html-nav-classes {
|
||||
.breadcrumbs {
|
||||
@include crumb-container;
|
||||
@include radius($crumb-radius);
|
||||
|
||||
&>* {
|
||||
@include crumbs;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility - hides the forward slash */
|
||||
[aria-label="breadcrumbs"] [aria-hidden="true"]:after {
|
||||
content: "/";
|
||||
}
|
||||
197
_sass/foundation-components/_button-groups.scss
Normal file
197
_sass/foundation-components/_button-groups.scss
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
@import "buttons";
|
||||
|
||||
//
|
||||
// Button Group Variables
|
||||
//
|
||||
$include-html-button-classes: $include-html-classes !default;
|
||||
|
||||
// Sets the margin for the right side by default, and the left margin if right-to-left direction is used
|
||||
$button-bar-margin-opposite: rem-calc(10) !default;
|
||||
$button-group-border-width: 1px !default;
|
||||
|
||||
//
|
||||
// Button Group Mixins
|
||||
//
|
||||
|
||||
// We use this to add styles for a button group container
|
||||
@mixin button-group-container($styles:true, $float:false) {
|
||||
@if $styles {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
#{$default-float}: 0;
|
||||
@include clearfix();
|
||||
}
|
||||
@if $float {
|
||||
float: #{$default-float};
|
||||
margin-#{$opposite-direction}: $button-bar-margin-opposite;
|
||||
& div { overflow: hidden; }
|
||||
}
|
||||
}
|
||||
|
||||
// We use this to control styles for button groups
|
||||
@mixin button-group-style($radius:false, $even:false, $float:false, $orientation:horizontal) {
|
||||
|
||||
> button, .button {
|
||||
border-#{$default-float}: $button-group-border-width solid;
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
button, .button {
|
||||
border-#{$default-float}: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// We use this to control the flow, or remove those styles completely.
|
||||
@if $float {
|
||||
margin: 0;
|
||||
float: $float;
|
||||
display: list-item;
|
||||
// Make sure the first child doesn't get the negative margin.
|
||||
&:first-child { margin-#{$default-float}: 0; }
|
||||
}
|
||||
@else {
|
||||
margin: 0 -2px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@if $orientation == vertical {
|
||||
display:block;
|
||||
margin:0;
|
||||
> button, .button {
|
||||
border-top: $button-group-border-width solid;
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
border-left-width: 0;
|
||||
margin:0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
button, .button {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// We use these to control left and right radius on first/last buttons in the group.
|
||||
@if $radius == true {
|
||||
&,
|
||||
& > a,
|
||||
& > button,
|
||||
& > .button { @include radius(0); }
|
||||
&:first-child,
|
||||
&:first-child > a,
|
||||
&:first-child > button,
|
||||
&:first-child > .button {
|
||||
@if $orientation == vertical {
|
||||
@include side-radius(top, $button-radius);
|
||||
}
|
||||
@else {
|
||||
@include side-radius($default-float, $button-radius);
|
||||
}
|
||||
}
|
||||
&:last-child,
|
||||
&:last-child > a,
|
||||
&:last-child > button,
|
||||
&:last-child > .button {
|
||||
@if $orientation == vertical {
|
||||
@include side-radius(bottom, $button-radius);
|
||||
}
|
||||
@else {
|
||||
@include side-radius($opposite-direction, $button-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
@else if $radius {
|
||||
&,
|
||||
& > a,
|
||||
& > button,
|
||||
& > .button { @include radius(0); }
|
||||
&:first-child,
|
||||
&:first-child > a,
|
||||
&:first-child > button,
|
||||
&:first-child > .button {
|
||||
@if $orientation == vertical {
|
||||
@include side-radius(top, $radius);
|
||||
}
|
||||
@else {
|
||||
@include side-radius($default-float, $radius);
|
||||
}
|
||||
}
|
||||
&:last-child,
|
||||
&:last-child > a,
|
||||
&:last-child > button,
|
||||
&:last-child > .button {
|
||||
@if $orientation == vertical {
|
||||
@include side-radius(bottom, $radius);
|
||||
}
|
||||
@else {
|
||||
@include side-radius($opposite-direction, $radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// We use this to make the buttons even width across their container
|
||||
@if $even {
|
||||
width: percentage((100/$even) / 100);
|
||||
button, .button { width: 100%; }
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("button-group") {
|
||||
@if $include-html-button-classes {
|
||||
.button-group { @include button-group-container;
|
||||
|
||||
& > li { @include button-group-style(); }
|
||||
|
||||
&.stack {
|
||||
& > li { @include button-group-style($orientation:vertical); float: none; }
|
||||
}
|
||||
|
||||
&.stack-for-small {
|
||||
& > li {
|
||||
@include button-group-style($orientation:horizontal);
|
||||
@media #{$small-only} {
|
||||
@include button-group-style($orientation:vertical);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.radius > * { @include button-group-style($radius:$button-radius, $float:null); }
|
||||
&.radius.stack > * { @include button-group-style($radius:$button-radius, $float:null, $orientation:vertical); }
|
||||
&.radius.stack-for-small > * {
|
||||
@media #{$medium-up} {
|
||||
@include button-group-style($radius:$button-radius, $orientation:horizontal);
|
||||
}
|
||||
@media #{$small-only} {
|
||||
@include button-group-style($radius:$button-radius, $orientation:vertical);
|
||||
}
|
||||
}
|
||||
|
||||
&.round > * { @include button-group-style($radius:$button-round, $float:null); }
|
||||
&.round.stack > * { @include button-group-style($radius:$button-med, $float:null, $orientation:vertical); }
|
||||
&.round.stack-for-small > * {
|
||||
@media #{$medium-up} {
|
||||
@include button-group-style($radius:$button-round, $orientation:horizontal);
|
||||
}
|
||||
@media #{$small-only} {
|
||||
@include button-group-style($radius:$button-med, $orientation:vertical);
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 2 through 8 {
|
||||
&.even-#{$i} li { @include button-group-style($even:$i, $float:null); }
|
||||
}
|
||||
}
|
||||
|
||||
.button-bar {
|
||||
@include clearfix;
|
||||
.button-group { @include button-group-container($styles:false, $float:true); }
|
||||
}
|
||||
}
|
||||
}
|
||||
259
_sass/foundation-components/_buttons.scss
Normal file
259
_sass/foundation-components/_buttons.scss
Normal file
|
|
@ -0,0 +1,259 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
|
||||
//
|
||||
// @variables
|
||||
//
|
||||
$include-html-button-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to build padding for buttons.
|
||||
$button-tny: rem-calc(10) !default;
|
||||
$button-sml: rem-calc(14) !default;
|
||||
$button-med: rem-calc(16) !default;
|
||||
$button-lrg: rem-calc(18) !default;
|
||||
|
||||
// We use this to control the display property.
|
||||
$button-display: inline-block !default;
|
||||
$button-margin-bottom: rem-calc(20) !default;
|
||||
|
||||
// We use these to control button text styles.
|
||||
$button-font-family: $body-font-family !default;
|
||||
$button-font-color: $white !default;
|
||||
$button-font-color-alt: $oil !default;
|
||||
$button-font-tny: rem-calc(11) !default;
|
||||
$button-font-sml: rem-calc(13) !default;
|
||||
$button-font-med: rem-calc(16) !default;
|
||||
$button-font-lrg: rem-calc(20) !default;
|
||||
$button-font-weight: $font-weight-normal !default;
|
||||
$button-font-align: center !default;
|
||||
|
||||
// We use these to control various hover effects.
|
||||
$button-function-factor: -20% !default;
|
||||
|
||||
// We use these to control button border styles.
|
||||
$button-border-width: 0 !default;
|
||||
$button-border-style: solid !default;
|
||||
$button-bg-color: $primary-color !default;
|
||||
$button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor) !default;
|
||||
$button-border-color: $button-bg-hover !default;
|
||||
$secondary-button-bg-hover: scale-color($secondary-color, $lightness: $button-function-factor) !default;
|
||||
$secondary-button-border-color: $secondary-button-bg-hover !default;
|
||||
$success-button-bg-hover: scale-color($success-color, $lightness: $button-function-factor) !default;
|
||||
$success-button-border-color: $success-button-bg-hover !default;
|
||||
$alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor) !default;
|
||||
$alert-button-border-color: $alert-button-bg-hover !default;
|
||||
$warning-button-bg-hover: scale-color($warning-color, $lightness: $button-function-factor) !default;
|
||||
$warning-button-border-color: $warning-button-bg-hover !default;
|
||||
$info-button-bg-hover: scale-color($info-color, $lightness: $button-function-factor) !default;
|
||||
$info-button-border-color: $info-button-bg-hover !default;
|
||||
|
||||
// We use this to set the default radius used throughout the core.
|
||||
$button-radius: $global-radius !default;
|
||||
$button-round: $global-rounded !default;
|
||||
|
||||
// We use this to set default opacity and cursor for disabled buttons.
|
||||
$button-disabled-opacity: 0.7 !default;
|
||||
$button-disabled-cursor: $cursor-default-value !default;
|
||||
|
||||
|
||||
//
|
||||
// @MIXIN
|
||||
//
|
||||
// We use this mixin to create a default button base.
|
||||
//
|
||||
// $style - Sets base styles. Can be set to false. Default: true.
|
||||
// $display - Used to control display property. Default: $button-display || inline-block
|
||||
|
||||
@mixin button-base($style:true, $display:$button-display) {
|
||||
@if $style {
|
||||
border-style: $button-border-style;
|
||||
border-width: $button-border-width;
|
||||
cursor: $cursor-pointer-value;
|
||||
font-family: $button-font-family;
|
||||
font-weight: $button-font-weight;
|
||||
line-height: normal;
|
||||
margin: 0 0 $button-margin-bottom;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
text-align: $button-font-align;
|
||||
-webkit-appearance: none;
|
||||
border-radius:0;
|
||||
}
|
||||
@if $display { display: $display; }
|
||||
}
|
||||
|
||||
// @MIXIN
|
||||
//
|
||||
// We use this mixin to add button size styles
|
||||
//
|
||||
// $padding - Used to build padding for buttons Default: $button-med ||= rem-calc(12)
|
||||
// $full-width - We can set $full-width:true to remove side padding extend width - Default: false
|
||||
|
||||
@mixin button-size($padding:$button-med, $full-width:false) {
|
||||
|
||||
// We control which padding styles come through,
|
||||
// these can be turned off by setting $padding:false
|
||||
@if $padding {
|
||||
padding-top: $padding;
|
||||
padding-#{$opposite-direction}: $padding * 2;
|
||||
padding-bottom: $padding + rem-calc(1);
|
||||
padding-#{$default-float}: $padding * 2;
|
||||
|
||||
// We control the font-size based on mixin input.
|
||||
@if $padding == $button-med { font-size: $button-font-med; }
|
||||
@else if $padding == $button-tny { font-size: $button-font-tny; }
|
||||
@else if $padding == $button-sml { font-size: $button-font-sml; }
|
||||
@else if $padding == $button-lrg { font-size: $button-font-lrg; }
|
||||
}
|
||||
|
||||
// We can set $full-width:true to remove side padding extend width.
|
||||
@if $full-width {
|
||||
// We still need to check if $padding is set.
|
||||
@if $padding {
|
||||
padding-top: $padding;
|
||||
padding-bottom: $padding + rem-calc(1);
|
||||
} @else if $padding == false {
|
||||
padding-top:0;
|
||||
padding-bottom:0;
|
||||
}
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// @MIXIN
|
||||
//
|
||||
// we use this mixin to create the button hover and border colors
|
||||
|
||||
// @MIXIN
|
||||
//
|
||||
// We use this mixin to add button color styles
|
||||
//
|
||||
// $bg - Background color. We can set $bg:false for a transparent background. Default: $primary-color.
|
||||
// $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default: true
|
||||
// $disabled - We can set $disabled:true to create a disabled transparent button. Default: false
|
||||
// $bg-hover - Button Hover Background Color. Default: $button-bg-hover
|
||||
// $border-color - Button Border Color. Default: $button-border-color
|
||||
@mixin button-style($bg:$button-bg-color, $radius:false, $disabled:false, $bg-hover:null, $border-color:null) {
|
||||
|
||||
// We control which background styles are used,
|
||||
// these can be removed by setting $bg:false
|
||||
@if $bg {
|
||||
|
||||
@if $bg-hover == null {
|
||||
$bg-hover: if($bg == $button-bg-color, $button-bg-hover, scale-color($bg, $lightness: $button-function-factor));
|
||||
}
|
||||
|
||||
@if $border-color == null {
|
||||
$border-color: if($bg == $button-bg-color, $button-border-color, scale-color($bg, $lightness: $button-function-factor));
|
||||
}
|
||||
|
||||
// This find the lightness percentage of the background color.
|
||||
$bg-lightness: lightness($bg);
|
||||
$bg-hover-lightness: lightness($bg-hover);
|
||||
|
||||
background-color: $bg;
|
||||
border-color: $border-color;
|
||||
&:hover,
|
||||
&:focus { background-color: $bg-hover; }
|
||||
|
||||
// We control the text color for you based on the background color.
|
||||
color: if($bg-lightness > 70%, $button-font-color-alt, $button-font-color);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: if($bg-hover-lightness > 70%, $button-font-color-alt, $button-font-color);
|
||||
}
|
||||
}
|
||||
|
||||
// We can set $disabled:true to create a disabled transparent button.
|
||||
@if $disabled {
|
||||
cursor: $button-disabled-cursor;
|
||||
opacity: $button-disabled-opacity;
|
||||
box-shadow: none;
|
||||
&:hover,
|
||||
&:focus { background-color: $bg; }
|
||||
}
|
||||
|
||||
// We can control how much button radius is used.
|
||||
@if $radius == true { @include radius($button-radius); }
|
||||
@else if $radius { @include radius($radius); }
|
||||
|
||||
}
|
||||
|
||||
// @MIXIN
|
||||
//
|
||||
// We use this to quickly create buttons with a single mixin. As @jaredhardy puts it, "the kitchen sink mixin"
|
||||
//
|
||||
// $padding - Used to build padding for buttons Default: $button-med ||= rem-calc(12)
|
||||
// $bg - Primary color set in settings file. Default: $button-bg.
|
||||
// $radius - If true, set to button radius which is $global-radius || explicitly set radius amount in px (ex. $radius:10px). Default:false.
|
||||
// $full-width - We can set $full-width:true to remove side padding extend width. Default:false.
|
||||
// $disabled - We can set $disabled:true to create a disabled transparent button. Default:false.
|
||||
// $is-prefix - Not used? Default:false.
|
||||
// $bg-hover - Button Hover Color - Default null - see button-style mixin
|
||||
// $border-color - Button Border Color - Default null - see button-style mixin
|
||||
// $transition - We can control whether or not to include the background-color transition property - Default:true.
|
||||
@mixin button($padding:$button-med, $bg:$button-bg-color, $radius:false, $full-width:false, $disabled:false, $is-prefix:false, $bg-hover:null, $border-color:null, $transition: true) {
|
||||
@include button-base;
|
||||
@include button-size($padding, $full-width);
|
||||
@include button-style($bg, $radius, $disabled, $bg-hover, $border-color);
|
||||
|
||||
@if $transition {
|
||||
@include single-transition(background-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include exports("button") {
|
||||
@if $include-html-button-classes {
|
||||
|
||||
// Default styles applied outside of media query
|
||||
button, .button {
|
||||
@include button-base;
|
||||
@include button-size;
|
||||
@include button-style;
|
||||
|
||||
@include single-transition(background-color);
|
||||
|
||||
&.secondary { @include button-style($bg:$secondary-color, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
|
||||
&.success { @include button-style($bg:$success-color, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); }
|
||||
&.alert { @include button-style($bg:$alert-color, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); }
|
||||
&.warning { @include button-style($bg:$warning-color, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); }
|
||||
&.info { @include button-style($bg:$info-color, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); }
|
||||
|
||||
&.large { @include button-size($padding:$button-lrg); }
|
||||
&.small { @include button-size($padding:$button-sml); }
|
||||
&.tiny { @include button-size($padding:$button-tny); }
|
||||
&.expand { @include button-size($padding:null,$full-width:true); }
|
||||
|
||||
&.left-align { text-align: left; text-indent: rem-calc(12); }
|
||||
&.right-align { text-align: right; padding-right: rem-calc(12); }
|
||||
|
||||
&.radius { @include button-style($bg:false, $radius:true); }
|
||||
&.round { @include button-style($bg:false, $radius:$button-round); }
|
||||
|
||||
&.disabled, &[disabled] { @include button-style($bg:$button-bg-color, $disabled:true, $bg-hover:$button-bg-hover, $border-color:$button-border-color);
|
||||
&.secondary { @include button-style($bg:$secondary-color, $disabled:true, $bg-hover:$secondary-button-bg-hover, $border-color:$secondary-button-border-color); }
|
||||
&.success { @include button-style($bg:$success-color, $disabled:true, $bg-hover:$success-button-bg-hover, $border-color:$success-button-border-color); }
|
||||
&.alert { @include button-style($bg:$alert-color, $disabled:true, $bg-hover:$alert-button-bg-hover, $border-color:$alert-button-border-color); }
|
||||
&.warning { @include button-style($bg:$warning-color, $disabled:true, $bg-hover:$warning-button-bg-hover, $border-color:$warning-button-border-color); }
|
||||
&.info { @include button-style($bg:$info-color, $disabled:true, $bg-hover:$info-button-bg-hover, $border-color:$info-button-border-color); }
|
||||
}
|
||||
}
|
||||
|
||||
//firefox 2px fix
|
||||
button::-moz-focus-inner {border:0; padding:0;}
|
||||
|
||||
@media #{$medium-up} {
|
||||
button, .button {
|
||||
@include button-base($style:false, $display:inline-block);
|
||||
@include button-size($padding:false, $full-width:false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
247
_sass/foundation-components/_clearing.scss
Normal file
247
_sass/foundation-components/_clearing.scss
Normal file
|
|
@ -0,0 +1,247 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
|
||||
//
|
||||
// @variables
|
||||
//
|
||||
$include-html-clearing-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to set the background colors for parts of Clearing.
|
||||
$clearing-bg: $oil !default;
|
||||
$clearing-caption-bg: $clearing-bg !default;
|
||||
$clearing-carousel-bg: rgba(51,51,51,0.8) !default;
|
||||
$clearing-img-bg: $clearing-bg !default;
|
||||
|
||||
// We use these to style the close button
|
||||
$clearing-close-color: $iron !default;
|
||||
$clearing-close-size: 30px !default;
|
||||
|
||||
// We use these to style the arrows
|
||||
$clearing-arrow-size: 12px !default;
|
||||
$clearing-arrow-color: $clearing-close-color !default;
|
||||
|
||||
// We use these to style captions
|
||||
$clearing-caption-font-color: $iron !default;
|
||||
$clearing-caption-font-size: 0.875em !default;
|
||||
$clearing-caption-padding: 10px 30px 20px !default;
|
||||
|
||||
// We use these to make the image and carousel height and style
|
||||
$clearing-active-img-height: 85% !default;
|
||||
$clearing-carousel-height: 120px !default;
|
||||
$clearing-carousel-thumb-width: 120px !default;
|
||||
$clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255) !default;
|
||||
|
||||
@include exports("clearing") {
|
||||
@if $include-html-clearing-classes {
|
||||
// We decided to not create a mixin for Clearing because it relies
|
||||
// on predefined classes and structure to work properly.
|
||||
// The variables above should give enough control.
|
||||
|
||||
/* Clearing Styles */
|
||||
.clearing-thumbs, #{data('clearing')} {
|
||||
@include clearfix;
|
||||
margin-bottom: 0;
|
||||
margin-#{$default-float}: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
float: $default-float;
|
||||
margin-#{$opposite-direction}: 10px;
|
||||
}
|
||||
|
||||
&[class*="block-grid-"] li {
|
||||
margin-#{$opposite-direction}: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.clearing-blackout {
|
||||
background: $clearing-bg;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
#{$default-float}: 0;
|
||||
z-index: 998;
|
||||
|
||||
.clearing-close { display: block; }
|
||||
}
|
||||
|
||||
.clearing-container {
|
||||
position: relative;
|
||||
z-index: 998;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.clearing-touch-label {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
color: $base;
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
.visible-img {
|
||||
height: 95%;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
#{$default-float}: 50%;
|
||||
top: 50%;
|
||||
margin-#{$default-float}: -50%;
|
||||
max-height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.clearing-caption {
|
||||
color: $clearing-caption-font-color;
|
||||
font-size: $clearing-caption-font-size;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 0;
|
||||
text-align: center;
|
||||
bottom: 0;
|
||||
background: $clearing-caption-bg;
|
||||
width: 100%;
|
||||
padding: $clearing-caption-padding;
|
||||
position: absolute;
|
||||
#{$default-float}: 0;
|
||||
}
|
||||
|
||||
.clearing-close {
|
||||
z-index: 999;
|
||||
padding-#{$default-float}: 20px;
|
||||
padding-top: 10px;
|
||||
font-size: $clearing-close-size;
|
||||
line-height: 1;
|
||||
color: $clearing-close-color;
|
||||
display: none;
|
||||
|
||||
&:hover,
|
||||
&:focus { color: $iron; }
|
||||
}
|
||||
|
||||
.clearing-assembled .clearing-container { height: 100%;
|
||||
.carousel > ul { display: none; }
|
||||
}
|
||||
|
||||
// If you want to show a lightbox, but only have a single image come through as the thumbnail
|
||||
.clearing-feature li {
|
||||
display: none;
|
||||
&.clearing-featured-img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Large screen overrides
|
||||
@media #{$medium-up} {
|
||||
.clearing-main-prev,
|
||||
.clearing-main-next {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 40px;
|
||||
top: 0;
|
||||
& > span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: solid $clearing-arrow-size;
|
||||
&:hover { opacity: 0.8; }
|
||||
}
|
||||
}
|
||||
.clearing-main-prev {
|
||||
#{$default-float}: 0;
|
||||
& > span {
|
||||
#{$default-float}: 5px;
|
||||
border-color: transparent;
|
||||
border-#{$opposite-direction}-color: $clearing-arrow-color;
|
||||
}
|
||||
}
|
||||
.clearing-main-next {
|
||||
#{$opposite-direction}: 0;
|
||||
& > span {
|
||||
border-color: transparent;
|
||||
border-#{$default-float}-color: $clearing-arrow-color;
|
||||
}
|
||||
}
|
||||
|
||||
.clearing-main-prev.disabled,
|
||||
.clearing-main-next.disabled { opacity: 0.3; }
|
||||
|
||||
.clearing-assembled .clearing-container {
|
||||
|
||||
.carousel {
|
||||
background: $clearing-carousel-bg;
|
||||
height: $clearing-carousel-height;
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
|
||||
& > ul {
|
||||
display: inline-block;
|
||||
z-index: 999;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
float: none;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
width: $clearing-carousel-thumb-width;
|
||||
min-height: inherit;
|
||||
float: $default-float;
|
||||
overflow: hidden;
|
||||
margin-#{$opposite-direction}: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
cursor: $cursor-pointer-value;
|
||||
opacity: 0.4;
|
||||
clear: none;
|
||||
|
||||
&.fix-height {
|
||||
img {
|
||||
height: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
a.th {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
cursor: $cursor-pointer-value !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
&.visible { opacity: 1; }
|
||||
&:hover { opacity: 0.8; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.visible-img {
|
||||
background: $clearing-img-bg;
|
||||
overflow: hidden;
|
||||
height: $clearing-active-img-height;
|
||||
}
|
||||
}
|
||||
|
||||
.clearing-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
#{$opposite-direction}: 20px;
|
||||
padding-#{$default-float}: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
130
_sass/foundation-components/_dropdown-buttons.scss
Normal file
130
_sass/foundation-components/_dropdown-buttons.scss
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
|
||||
//
|
||||
// @variables
|
||||
//
|
||||
$include-html-button-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to set the color of the pip in dropdown buttons
|
||||
$dropdown-button-pip-color: $white !default;
|
||||
$dropdown-button-pip-color-alt: $oil !default;
|
||||
|
||||
$button-pip-tny: rem-calc(6) !default;
|
||||
$button-pip-sml: rem-calc(7) !default;
|
||||
$button-pip-med: rem-calc(9) !default;
|
||||
$button-pip-lrg: rem-calc(11) !default;
|
||||
|
||||
// We use these to style tiny dropdown buttons
|
||||
$dropdown-button-padding-tny: $button-pip-tny * 7 !default;
|
||||
$dropdown-button-pip-size-tny: $button-pip-tny !default;
|
||||
$dropdown-button-pip-opposite-tny: $button-pip-tny * 3 !default;
|
||||
$dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1) !default;
|
||||
|
||||
// We use these to style small dropdown buttons
|
||||
$dropdown-button-padding-sml: $button-pip-sml * 7 !default;
|
||||
$dropdown-button-pip-size-sml: $button-pip-sml !default;
|
||||
$dropdown-button-pip-opposite-sml: $button-pip-sml * 3 !default;
|
||||
$dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1) !default;
|
||||
|
||||
// We use these to style medium dropdown buttons
|
||||
$dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3) !default;
|
||||
$dropdown-button-pip-size-med: $button-pip-med - rem-calc(3) !default;
|
||||
$dropdown-button-pip-opposite-med: $button-pip-med * 2.5 !default;
|
||||
$dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2) !default;
|
||||
|
||||
// We use these to style large dropdown buttons
|
||||
$dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3) !default;
|
||||
$dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6) !default;
|
||||
$dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5 !default;
|
||||
$dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default;
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// Dropdown Button Mixin
|
||||
//
|
||||
// We use this mixin to build off of the button mixin and add dropdown button styles
|
||||
//
|
||||
// $padding - Determines the size of button you're working with. Default: medium. Options [tiny, small, medium, large]
|
||||
// $pip-color - Color of the little triangle that points to the dropdown. Default: $white.
|
||||
// $base-style - Add in base-styles. This can be set to false. Default:true
|
||||
|
||||
@mixin dropdown-button($padding:medium, $pip-color:$white, $base-style:true) {
|
||||
|
||||
// We add in base styles, but they can be negated by setting to 'false'.
|
||||
@if $base-style {
|
||||
position: relative;
|
||||
outline: none;
|
||||
|
||||
// This creates the base styles for the triangle pip
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
display: block;
|
||||
border-style: solid;
|
||||
border-color: $dropdown-button-pip-color transparent transparent transparent;
|
||||
top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
// If we're dealing with tiny buttons, use these styles
|
||||
@if $padding == tiny {
|
||||
padding-#{$opposite-direction}: $dropdown-button-padding-tny;
|
||||
&:after {
|
||||
border-width: $dropdown-button-pip-size-tny;
|
||||
#{$opposite-direction}: $dropdown-button-pip-opposite-tny;
|
||||
margin-top: $dropdown-button-pip-top-tny;
|
||||
}
|
||||
}
|
||||
|
||||
// If we're dealing with small buttons, use these styles
|
||||
@if $padding == small {
|
||||
padding-#{$opposite-direction}: $dropdown-button-padding-sml;
|
||||
&::after {
|
||||
border-width: $dropdown-button-pip-size-sml;
|
||||
#{$opposite-direction}: $dropdown-button-pip-opposite-sml;
|
||||
margin-top: $dropdown-button-pip-top-sml;
|
||||
}
|
||||
}
|
||||
|
||||
// If we're dealing with default (medium) buttons, use these styles
|
||||
@if $padding == medium {
|
||||
padding-#{$opposite-direction}: $dropdown-button-padding-med;
|
||||
&::after {
|
||||
border-width: $dropdown-button-pip-size-med;
|
||||
#{$opposite-direction}: $dropdown-button-pip-opposite-med;
|
||||
margin-top: $dropdown-button-pip-top-med;
|
||||
}
|
||||
}
|
||||
|
||||
// If we're dealing with large buttons, use these styles
|
||||
@if $padding == large {
|
||||
padding-#{$opposite-direction}: $dropdown-button-padding-lrg;
|
||||
&::after {
|
||||
border-width: $dropdown-button-pip-size-lrg;
|
||||
#{$opposite-direction}: $dropdown-button-pip-opposite-lrg;
|
||||
margin-top: $dropdown-button-pip-top-lrg;
|
||||
}
|
||||
}
|
||||
|
||||
// We can control the pip color. We didn't use logic in this case, just set it and forget it.
|
||||
@if $pip-color {
|
||||
&::after { border-color: $pip-color transparent transparent transparent; }
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("dropdown-button") {
|
||||
@if $include-html-button-classes {
|
||||
.dropdown.button, button.dropdown { @include dropdown-button;
|
||||
&.tiny { @include dropdown-button(tiny,$base-style:false); }
|
||||
&.small { @include dropdown-button(small,$base-style:false); }
|
||||
&.large { @include dropdown-button(large,$base-style:false); }
|
||||
&.secondary:after { border-color: $dropdown-button-pip-color-alt transparent transparent transparent; }
|
||||
}
|
||||
}
|
||||
}
|
||||
262
_sass/foundation-components/_dropdown.scss
Normal file
262
_sass/foundation-components/_dropdown.scss
Normal file
|
|
@ -0,0 +1,262 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
|
||||
//
|
||||
// @variables
|
||||
//
|
||||
$include-html-dropdown-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to controls height and width styles.
|
||||
$f-dropdown-max-width: 200px !default;
|
||||
$f-dropdown-height: auto !default;
|
||||
$f-dropdown-max-height: none !default;
|
||||
|
||||
// Used for bottom position
|
||||
$f-dropdown-margin-top: 2px !default;
|
||||
|
||||
// Used for right position
|
||||
$f-dropdown-margin-left: $f-dropdown-margin-top !default;
|
||||
|
||||
// Used for left position
|
||||
$f-dropdown-margin-right: $f-dropdown-margin-top !default;
|
||||
|
||||
// Used for top position
|
||||
$f-dropdown-margin-bottom: $f-dropdown-margin-top !default;
|
||||
|
||||
// We use this to control the background color
|
||||
$f-dropdown-bg: $white !default;
|
||||
|
||||
// We use this to set the border styles for dropdowns.
|
||||
$f-dropdown-border-style: solid !default;
|
||||
$f-dropdown-border-width: 1px !default;
|
||||
$f-dropdown-border-color: scale-color($white, $lightness: -20%) !default;
|
||||
|
||||
// We use these to style the triangle pip.
|
||||
$f-dropdown-triangle-size: 6px !default;
|
||||
$f-dropdown-triangle-color: $white !default;
|
||||
$f-dropdown-triangle-side-offset: 10px !default;
|
||||
|
||||
// We use these to control styles for the list elements.
|
||||
$f-dropdown-list-style: none !default;
|
||||
$f-dropdown-font-color: $charcoal !default;
|
||||
$f-dropdown-font-size: rem-calc(14) !default;
|
||||
$f-dropdown-list-padding: rem-calc(5, 10) !default;
|
||||
$f-dropdown-line-height: rem-calc(18) !default;
|
||||
$f-dropdown-list-hover-bg: $smoke !default;
|
||||
$dropdown-mobile-default-float: 0 !default;
|
||||
|
||||
// We use this to control the styles for when the dropdown has custom content.
|
||||
$f-dropdown-content-padding: rem-calc(20) !default;
|
||||
|
||||
// Default radius for dropdown.
|
||||
$f-dropdown-radius: $global-radius !default;
|
||||
|
||||
//
|
||||
// @mixins
|
||||
//
|
||||
//
|
||||
// NOTE: Make default max-width change between list and content types. Can add more width with classes, maybe .small, .medium, .large, etc.;
|
||||
// We use this to style the dropdown container element.
|
||||
// $content-list - Sets list-style. Default: list. Options: [list, content]
|
||||
// $triangle - Sets if dropdown has triangle. Default:true.
|
||||
// $max-width - Default: $f-dropdown-max-width || 200px.
|
||||
@mixin dropdown-container($content:list, $triangle:true, $max-width:$f-dropdown-max-width) {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
list-style: $f-dropdown-list-style;
|
||||
margin-#{$default-float}: 0;
|
||||
outline: none;
|
||||
|
||||
> *:first-child { margin-top: 0; }
|
||||
> *:last-child { margin-bottom: 0; }
|
||||
|
||||
@if $content == list {
|
||||
width: 100%;
|
||||
max-height: $f-dropdown-max-height;
|
||||
height: $f-dropdown-height;
|
||||
background: $f-dropdown-bg;
|
||||
border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
|
||||
font-size: $f-dropdown-font-size;
|
||||
z-index: 89;
|
||||
}
|
||||
@else if $content == content {
|
||||
padding: $f-dropdown-content-padding;
|
||||
width: 100%;
|
||||
height: $f-dropdown-height;
|
||||
max-height: $f-dropdown-max-height;
|
||||
background: $f-dropdown-bg;
|
||||
border: $f-dropdown-border-style $f-dropdown-border-width $f-dropdown-border-color;
|
||||
font-size: $f-dropdown-font-size;
|
||||
z-index: 89;
|
||||
}
|
||||
|
||||
@if $triangle == bottom {
|
||||
margin-top: $f-dropdown-margin-top;
|
||||
|
||||
&:before {
|
||||
@include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, bottom);
|
||||
position: absolute;
|
||||
top: -($f-dropdown-triangle-size * 2);
|
||||
#{$default-float}: $f-dropdown-triangle-side-offset;
|
||||
z-index: 89;
|
||||
}
|
||||
&:after {
|
||||
@include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, bottom);
|
||||
position: absolute;
|
||||
top: -(($f-dropdown-triangle-size + 1) * 2);
|
||||
#{$default-float}: $f-dropdown-triangle-side-offset - 1;
|
||||
z-index: 88;
|
||||
}
|
||||
|
||||
&.right:before {
|
||||
#{$default-float}: auto;
|
||||
#{$opposite-direction}: $f-dropdown-triangle-side-offset;
|
||||
}
|
||||
&.right:after {
|
||||
#{$default-float}: auto;
|
||||
#{$opposite-direction}: $f-dropdown-triangle-side-offset - 1;
|
||||
}
|
||||
}
|
||||
|
||||
@if $triangle == $default-float {
|
||||
margin-top: 0;
|
||||
margin-#{$default-float}: $f-dropdown-margin-right;
|
||||
|
||||
&:before {
|
||||
@include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, #{$opposite-direction});
|
||||
position: absolute;
|
||||
top: $f-dropdown-triangle-side-offset;
|
||||
#{$default-float}: -($f-dropdown-triangle-size * 2);
|
||||
z-index: 89;
|
||||
}
|
||||
&:after {
|
||||
@include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, #{$opposite-direction});
|
||||
position: absolute;
|
||||
top: $f-dropdown-triangle-side-offset - 1;
|
||||
#{$default-float}: -($f-dropdown-triangle-size * 2) - 2;
|
||||
z-index: 88;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $triangle == $opposite-direction {
|
||||
margin-top: 0;
|
||||
margin-#{$default-float}: -$f-dropdown-margin-right;
|
||||
|
||||
&:before {
|
||||
@include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, #{$default-float});
|
||||
position: absolute;
|
||||
top: $f-dropdown-triangle-side-offset;
|
||||
#{$opposite-direction}: -($f-dropdown-triangle-size * 2);
|
||||
#{$default-float}: auto;
|
||||
z-index: 89;
|
||||
}
|
||||
&:after {
|
||||
@include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, #{$default-float});
|
||||
position: absolute;
|
||||
top: $f-dropdown-triangle-side-offset - 1;
|
||||
#{$opposite-direction}: -($f-dropdown-triangle-size * 2) - 2;
|
||||
#{$default-float}: auto;
|
||||
z-index: 88;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $triangle == top {
|
||||
margin-top: -$f-dropdown-margin-bottom;
|
||||
margin-left: 0;
|
||||
|
||||
&:before {
|
||||
@include css-triangle($f-dropdown-triangle-size, $f-dropdown-triangle-color, top);
|
||||
position: absolute;
|
||||
top: auto;
|
||||
bottom: -($f-dropdown-triangle-size * 2);
|
||||
#{$default-float}: $f-dropdown-triangle-side-offset;
|
||||
#{$opposite-direction}: auto;
|
||||
z-index: 89;
|
||||
}
|
||||
&:after {
|
||||
@include css-triangle($f-dropdown-triangle-size + 1, $f-dropdown-border-color, top);
|
||||
position: absolute;
|
||||
top: auto;
|
||||
bottom: -($f-dropdown-triangle-size * 2) - 2;
|
||||
#{$default-float}: $f-dropdown-triangle-side-offset - 1;
|
||||
#{$opposite-direction}: auto;
|
||||
z-index: 88;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@if $max-width { max-width: $max-width; }
|
||||
@else { max-width: $f-dropdown-max-width; }
|
||||
|
||||
}
|
||||
|
||||
// @MIXIN
|
||||
//
|
||||
// We use this to style the list elements or content inside the dropdown.
|
||||
|
||||
@mixin dropdown-style {
|
||||
font-size: $f-dropdown-font-size;
|
||||
cursor: $cursor-pointer-value;
|
||||
|
||||
line-height: $f-dropdown-line-height;
|
||||
margin: 0;
|
||||
|
||||
&:hover,
|
||||
&:focus { background: $f-dropdown-list-hover-bg; }
|
||||
|
||||
&.radius { @include radius($f-dropdown-radius); }
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: $f-dropdown-list-padding;
|
||||
color: $f-dropdown-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("dropdown") {
|
||||
@if $include-html-dropdown-classes {
|
||||
|
||||
/* Foundation Dropdowns */
|
||||
.f-dropdown {
|
||||
@include dropdown-container(list, bottom);
|
||||
|
||||
&.drop-#{$opposite-direction} {
|
||||
@include dropdown-container(list, #{$default-float});
|
||||
}
|
||||
|
||||
&.drop-#{$default-float} {
|
||||
@include dropdown-container(list, #{$opposite-direction});
|
||||
}
|
||||
|
||||
&.drop-top {
|
||||
@include dropdown-container(list, top);
|
||||
}
|
||||
// max-width: none;
|
||||
|
||||
li { @include dropdown-style; }
|
||||
|
||||
// You can also put custom content in these dropdowns
|
||||
&.content { @include dropdown-container(content, $triangle:false); }
|
||||
|
||||
// Sizes
|
||||
&.tiny { max-width: 200px; }
|
||||
&.small { max-width: 300px; }
|
||||
&.medium { max-width: 500px; }
|
||||
&.large { max-width: 800px; }
|
||||
&.mega {
|
||||
width:100%!important;
|
||||
max-width:100%!important;
|
||||
|
||||
&.open{
|
||||
left:0!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
51
_sass/foundation-components/_flex-video.scss
Normal file
51
_sass/foundation-components/_flex-video.scss
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
|
||||
//
|
||||
// @variables
|
||||
//
|
||||
$include-html-media-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to control video container padding and margins
|
||||
$flex-video-padding-top: rem-calc(25) !default;
|
||||
$flex-video-padding-bottom: 67.5% !default;
|
||||
$flex-video-margin-bottom: rem-calc(16) !default;
|
||||
|
||||
// We use this to control widescreen bottom padding
|
||||
$flex-video-widescreen-padding-bottom: 56.34% !default;
|
||||
|
||||
//
|
||||
// @mixins
|
||||
//
|
||||
|
||||
@mixin flex-video-container {
|
||||
position: relative;
|
||||
padding-top: $flex-video-padding-top;
|
||||
padding-bottom: $flex-video-padding-bottom;
|
||||
height: 0;
|
||||
margin-bottom: $flex-video-margin-bottom;
|
||||
overflow: hidden;
|
||||
|
||||
&.widescreen { padding-bottom: $flex-video-widescreen-padding-bottom; }
|
||||
&.vimeo { padding-top: 0; }
|
||||
|
||||
iframe,
|
||||
object,
|
||||
embed,
|
||||
video {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
#{$default-float}: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("flex-video") {
|
||||
@if $include-html-media-classes {
|
||||
.flex-video { @include flex-video-container; }
|
||||
}
|
||||
}
|
||||
570
_sass/foundation-components/_forms.scss
Normal file
570
_sass/foundation-components/_forms.scss
Normal file
|
|
@ -0,0 +1,570 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
@import "buttons";
|
||||
|
||||
//
|
||||
// @variables
|
||||
//
|
||||
$include-html-form-classes: $include-html-classes !default;
|
||||
|
||||
// We use this to set the base for lots of form spacing and positioning styles
|
||||
$form-spacing: rem-calc(16) !default;
|
||||
|
||||
// We use these to style the labels in different ways
|
||||
$form-label-pointer: pointer !default;
|
||||
$form-label-font-size: rem-calc(14) !default;
|
||||
$form-label-font-weight: $font-weight-normal !default;
|
||||
$form-label-line-height: 1.5 !default;
|
||||
$form-label-font-color: scale-color($black, $lightness: 30%) !default;
|
||||
$form-label-small-transform: capitalize !default;
|
||||
$form-label-bottom-margin: 0 !default;
|
||||
$input-font-family: inherit !default;
|
||||
$input-font-color: rgba(0,0,0,0.75) !default;
|
||||
$input-font-size: rem-calc(14) !default;
|
||||
$input-bg-color: $white !default;
|
||||
$input-focus-bg-color: scale-color($white, $lightness: -2%) !default;
|
||||
$input-border-color: scale-color($white, $lightness: -20%) !default;
|
||||
$input-focus-border-color: scale-color($white, $lightness: -40%) !default;
|
||||
$input-border-style: solid !default;
|
||||
$input-border-width: 1px !default;
|
||||
$input-border-radius: $global-radius !default;
|
||||
$input-disabled-bg: $gainsboro !default;
|
||||
$input-disabled-cursor: $cursor-default-value !default;
|
||||
$input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1) !default;
|
||||
$input-include-glowing-effect: true !default;
|
||||
|
||||
// We use these to style the fieldset border and spacing.
|
||||
$fieldset-border-style: solid !default;
|
||||
$fieldset-border-width: 1px !default;
|
||||
$fieldset-border-color: $gainsboro !default;
|
||||
$fieldset-padding: rem-calc(20) !default;
|
||||
$fieldset-margin: rem-calc(18 0) !default;
|
||||
|
||||
// We use these to style the legends when you use them
|
||||
$legend-bg: $white !default;
|
||||
$legend-font-weight: $font-weight-bold !default;
|
||||
$legend-padding: rem-calc(0 3) !default;
|
||||
|
||||
// We use these to style the prefix and postfix input elements
|
||||
$input-prefix-bg: scale-color($white, $lightness: -5%) !default;
|
||||
$input-prefix-border-color: scale-color($white, $lightness: -20%) !default;
|
||||
$input-prefix-border-size: 1px !default;
|
||||
$input-prefix-border-type: solid !default;
|
||||
$input-prefix-overflow: hidden !default;
|
||||
$input-prefix-font-color: $oil !default;
|
||||
$input-prefix-font-color-alt: $white !default;
|
||||
|
||||
// We use this setting to turn on/off HTML5 number spinners (the up/down arrows)
|
||||
$input-number-spinners: true !default;
|
||||
|
||||
// We use these to style the error states for inputs and labels
|
||||
$input-error-message-padding: rem-calc(6 9 9) !default;
|
||||
$input-error-message-top: -1px !default;
|
||||
$input-error-message-font-size: rem-calc(12) !default;
|
||||
$input-error-message-font-weight: $font-weight-normal !default;
|
||||
$input-error-message-font-style: italic !default;
|
||||
$input-error-message-font-color: $white !default;
|
||||
$input-error-message-bg-color: $alert-color !default;
|
||||
$input-error-message-font-color-alt: $oil !default;
|
||||
|
||||
// We use this to style the glowing effect of inputs when focused
|
||||
$glowing-effect-fade-time: 0.45s !default;
|
||||
$glowing-effect-color: $input-focus-border-color !default;
|
||||
|
||||
// Select variables
|
||||
$select-bg-color: $ghost !default;
|
||||
$select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default;
|
||||
|
||||
//
|
||||
// @MIXINS
|
||||
//
|
||||
|
||||
// We use this mixin to give us form styles for rows inside of forms
|
||||
@mixin form-row-base {
|
||||
.row { margin: 0 ((-$form-spacing) / 2);
|
||||
|
||||
.column,
|
||||
.columns { padding: 0 ($form-spacing / 2); }
|
||||
|
||||
// Use this to collapse the margins of a form row
|
||||
&.collapse { margin: 0;
|
||||
|
||||
.column,
|
||||
.columns { padding: 0; }
|
||||
input {
|
||||
@include side-radius($opposite-direction, 0);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
input.column,
|
||||
input.columns,
|
||||
textarea.column,
|
||||
textarea.columns { padding-#{$default-float}: ($form-spacing / 2); }
|
||||
}
|
||||
|
||||
// @MIXIN
|
||||
//
|
||||
// We use this mixin to give all basic form elements their style
|
||||
@mixin form-element {
|
||||
background-color: $input-bg-color;
|
||||
font-family: $input-font-family;
|
||||
border: {
|
||||
style: $input-border-style;
|
||||
width: $input-border-width;
|
||||
color: $input-border-color;
|
||||
}
|
||||
box-shadow: $input-box-shadow;
|
||||
color: $input-font-color;
|
||||
display: block;
|
||||
font-size: $input-font-size;
|
||||
margin: 0 0 $form-spacing 0;
|
||||
padding: $form-spacing / 2;
|
||||
height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
|
||||
width: 100%;
|
||||
@include box-sizing(border-box);
|
||||
@if $input-include-glowing-effect {
|
||||
@include block-glowing-effect(focus, $glowing-effect-fade-time, $glowing-effect-color);
|
||||
}
|
||||
// Basic focus styles
|
||||
&:focus {
|
||||
background: $input-focus-bg-color;
|
||||
border-color: $input-focus-border-color;
|
||||
outline: none;
|
||||
}
|
||||
// Disbaled Styles
|
||||
&:disabled {
|
||||
background-color: $input-disabled-bg;
|
||||
cursor: $input-disabled-cursor;
|
||||
}
|
||||
|
||||
// Disabled background input background color
|
||||
&[disabled],
|
||||
&[readonly],
|
||||
fieldset[disabled] & {
|
||||
background-color: $input-disabled-bg;
|
||||
cursor: $input-disabled-cursor;
|
||||
}
|
||||
}
|
||||
|
||||
// @MIXIN
|
||||
//
|
||||
// We use this mixin to create form labels
|
||||
//
|
||||
// $alignment - Alignment options. Default: false. Options: [right, inline, false]
|
||||
// $base-style - Control whether or not the base styles come through. Default: true.
|
||||
@mixin form-label($alignment:false, $base-style:true) {
|
||||
|
||||
// Control whether or not the base styles come through.
|
||||
@if $base-style {
|
||||
font-size: $form-label-font-size;
|
||||
color: $form-label-font-color;
|
||||
cursor: $form-label-pointer;
|
||||
display: block;
|
||||
font-weight: $form-label-font-weight;
|
||||
line-height: $form-label-line-height;
|
||||
margin-bottom: $form-label-bottom-margin;
|
||||
}
|
||||
|
||||
// Alignment options
|
||||
@if $alignment == right {
|
||||
float: none !important;
|
||||
text-align: right;
|
||||
}
|
||||
@else if $alignment == inline {
|
||||
margin: 0 0 $form-spacing 0;
|
||||
padding: $form-spacing / 2 + rem-calc($input-border-width) 0;
|
||||
}
|
||||
}
|
||||
|
||||
// We use this mixin to create postfix/prefix form Labels
|
||||
@mixin prefix-postfix-base {
|
||||
display: block;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
border-style: $input-prefix-border-type;
|
||||
border-width: $input-prefix-border-size;
|
||||
overflow: $input-prefix-overflow;
|
||||
font-size: $form-label-font-size;
|
||||
height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
|
||||
line-height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
|
||||
}
|
||||
|
||||
// @MIXIN
|
||||
//
|
||||
// We use this mixin to create prefix label styles
|
||||
// $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default;
|
||||
// $is-button - Toggle position settings if prefix is a button. Default:false
|
||||
//
|
||||
@mixin prefix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) {
|
||||
|
||||
@if $bg {
|
||||
$bg-lightness: lightness($bg);
|
||||
background: $bg;
|
||||
border-#{$opposite-direction}: none;
|
||||
|
||||
// Control the font color based on background brightness
|
||||
@if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
|
||||
@else { color: $input-prefix-font-color-alt; }
|
||||
}
|
||||
|
||||
@if $border {
|
||||
border-color: $border;
|
||||
}
|
||||
|
||||
@if $is-button {
|
||||
padding-#{$default-float}: 0;
|
||||
padding-#{$opposite-direction}: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
text-align: center;
|
||||
border: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// @MIXIN
|
||||
//
|
||||
// We use this mixin to create postfix label styles
|
||||
// $bg - Default:$input-prefix-bg || scale-color($white, $lightness: -5%) !default;
|
||||
// $is-button - Toggle position settings if prefix is a button. Default: false
|
||||
@mixin postfix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) {
|
||||
|
||||
@if $bg {
|
||||
$bg-lightness: lightness($bg);
|
||||
background: $bg;
|
||||
border-#{$default-float}: none;
|
||||
|
||||
// Control the font color based on background brightness
|
||||
@if $bg-lightness > 70% or $bg == yellow { color: $input-prefix-font-color; }
|
||||
@else { color: $input-prefix-font-color-alt; }
|
||||
}
|
||||
|
||||
@if $border {
|
||||
border-color: $border;
|
||||
}
|
||||
|
||||
@if $is-button {
|
||||
padding-#{$default-float}: 0;
|
||||
padding-#{$opposite-direction}: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
text-align: center;
|
||||
border: none;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// We use this mixin to style fieldsets
|
||||
@mixin fieldset {
|
||||
border: $fieldset-border-width $fieldset-border-style $fieldset-border-color;
|
||||
padding: $fieldset-padding;
|
||||
margin: $fieldset-margin;
|
||||
|
||||
// and legend styles
|
||||
legend {
|
||||
font-weight: $legend-font-weight;
|
||||
background: $legend-bg;
|
||||
padding: $legend-padding;
|
||||
margin: 0;
|
||||
margin-#{$default-float}: rem-calc(-3);
|
||||
}
|
||||
}
|
||||
|
||||
// @MIXIN
|
||||
//
|
||||
// We use this mixin to control border and background color of error inputs
|
||||
// $color - Default: $alert-color (found in settings file)
|
||||
@mixin form-error-color($color:$alert-color) {
|
||||
border-color: $color;
|
||||
background-color: rgba($color, 0.1);
|
||||
|
||||
// Go back to normal on focus
|
||||
&:focus {
|
||||
background: $input-focus-bg-color;
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// @MIXIN
|
||||
//
|
||||
// We use this simple mixin to style labels for error inputs
|
||||
// $color - Default:$alert-color. Found in settings file
|
||||
@mixin form-label-error-color($color:$alert-color) { color: $color; }
|
||||
|
||||
// @MIXIN
|
||||
//
|
||||
// We use this mixin to create error message styles
|
||||
// $bg - Default: $alert-color (Found in settings file)
|
||||
@mixin form-error-message($bg:$input-error-message-bg-color) {
|
||||
display: block;
|
||||
padding: $input-error-message-padding;
|
||||
margin-top: $input-error-message-top;
|
||||
margin-bottom: $form-spacing;
|
||||
font-size: $input-error-message-font-size;
|
||||
font-weight: $input-error-message-font-weight;
|
||||
font-style: $input-error-message-font-style;
|
||||
|
||||
// We can control the text color based on the brightness of the background.
|
||||
$bg-lightness: lightness($bg);
|
||||
background: $bg;
|
||||
@if $bg-lightness < 70% or $bg == yellow { color: $input-error-message-font-color; }
|
||||
@else { color: $input-error-message-font-color-alt; }
|
||||
}
|
||||
|
||||
// We use this mixin to style select elements
|
||||
@mixin form-select {
|
||||
-webkit-appearance: none !important;
|
||||
border-radius: 0;
|
||||
background-color: $select-bg-color;
|
||||
|
||||
// Hide the dropdown arrow shown in newer IE versions
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// The custom arrow has some fake horizontal padding so we can align it
|
||||
// from the right side of the element without relying on CSS3
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+);
|
||||
|
||||
// We can safely use leftmost and rightmost now
|
||||
background-position: if($text-direction == 'rtl', 0%, 100%) center;
|
||||
|
||||
background-repeat: no-repeat;
|
||||
border: {
|
||||
style: $input-border-style;
|
||||
width: $input-border-width;
|
||||
color: $input-border-color;
|
||||
}
|
||||
padding: ($form-spacing / 2);
|
||||
font-size: $input-font-size;
|
||||
font-family: $body-font-family;
|
||||
color: $input-font-color;
|
||||
line-height: normal;
|
||||
@include radius(0);
|
||||
&.radius { @include radius($global-radius); }
|
||||
&:hover {
|
||||
background-color: $select-hover-bg-color;
|
||||
border-color: $input-focus-border-color;
|
||||
}
|
||||
// Disabled Styles
|
||||
&:disabled {
|
||||
background-color: $input-disabled-bg;
|
||||
cursor: $input-disabled-cursor;
|
||||
}
|
||||
}
|
||||
|
||||
// We use this mixin to turn on/off HTML5 number spinners
|
||||
@mixin html5number($browser, $on:true) {
|
||||
@if $on==false {
|
||||
@if $browser==webkit {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
} @else if $browser==moz {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("form") {
|
||||
@if $include-html-form-classes {
|
||||
/* Standard Forms */
|
||||
form { margin: 0 0 $form-spacing; }
|
||||
|
||||
/* Using forms within rows, we need to set some defaults */
|
||||
form .row { @include form-row-base; }
|
||||
|
||||
/* Label Styles */
|
||||
label { @include form-label;
|
||||
&.right { @include form-label(right,false); }
|
||||
&.inline { @include form-label(inline,false); }
|
||||
/* Styles for required inputs */
|
||||
small {
|
||||
text-transform: $form-label-small-transform;
|
||||
color: scale-color($form-label-font-color, $lightness: 15%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Attach elements to the beginning or end of an input */
|
||||
.prefix,
|
||||
.postfix { @include prefix-postfix-base; }
|
||||
|
||||
/* Adjust padding, alignment and radius if pre/post element is a button */
|
||||
.postfix.button { @include button-size(false,false); @include postfix(false, false, true); }
|
||||
.prefix.button { @include button-size(false,false); @include prefix(false, false, true); }
|
||||
|
||||
.prefix.button.radius { @include radius(0); @include side-radius($default-float, $button-radius); }
|
||||
.postfix.button.radius { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
|
||||
.prefix.button.round { @include radius(0); @include side-radius($default-float, $button-round); }
|
||||
.postfix.button.round { @include radius(0); @include side-radius($opposite-direction, $button-round); }
|
||||
|
||||
/* Separate prefix and postfix styles when on span or label so buttons keep their own */
|
||||
span.prefix,label.prefix { @include prefix(); }
|
||||
span.postfix,label.postfix { @include postfix(); }
|
||||
|
||||
/* We use this to get basic styling on all basic form elements */
|
||||
#{text-inputs(all, 'input')} {
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0;
|
||||
@include form-element;
|
||||
@if $input-include-glowing-effect == false {
|
||||
@include single-transition(all, 0.15s, linear);
|
||||
}
|
||||
&.radius {
|
||||
@include radius($input-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
.row {
|
||||
.prefix-radius.row.collapse {
|
||||
input,
|
||||
textarea,
|
||||
select { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
|
||||
.prefix { @include radius(0); @include side-radius($default-float, $button-radius); }
|
||||
}
|
||||
.postfix-radius.row.collapse {
|
||||
input,
|
||||
textarea,
|
||||
select { @include radius(0); @include side-radius($default-float, $button-radius); }
|
||||
.postfix { @include radius(0); @include side-radius($opposite-direction, $button-radius); }
|
||||
}
|
||||
.prefix-round.row.collapse {
|
||||
input,
|
||||
textarea,
|
||||
select { @include radius(0); @include side-radius($opposite-direction, $button-round); }
|
||||
.prefix { @include radius(0); @include side-radius($default-float, $button-round); }
|
||||
}
|
||||
.postfix-round.row.collapse {
|
||||
input,
|
||||
textarea,
|
||||
select { @include radius(0); @include side-radius($default-float, $button-round); }
|
||||
.postfix { @include radius(0); @include side-radius($opposite-direction, $button-round); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
/* Respect enforced amount of rows for textarea */
|
||||
textarea[rows] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Not allow resize out of parent */
|
||||
textarea {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Add height value for select elements to match text input height */
|
||||
select {
|
||||
@include form-select;
|
||||
height: ($input-font-size + ($form-spacing * 1.5) - rem-calc(1));
|
||||
}
|
||||
|
||||
/* Adjust margin for form elements below */
|
||||
input[type="file"],
|
||||
input[type="checkbox"],
|
||||
input[type="radio"],
|
||||
select {
|
||||
margin: 0 0 $form-spacing 0;
|
||||
}
|
||||
|
||||
input[type="checkbox"] + label,
|
||||
input[type="radio"] + label {
|
||||
display: inline-block;
|
||||
margin-#{$default-float}: $form-spacing * .5;
|
||||
margin-#{$opposite-direction}: $form-spacing;
|
||||
margin-bottom: 0;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* Normalize file input width */
|
||||
input[type="file"] {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
/* HTML5 Number spinners settings */
|
||||
input[type=number] {
|
||||
@include html5number(moz, $input-number-spinners)
|
||||
}
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
@include html5number(webkit, $input-number-spinners);
|
||||
}
|
||||
|
||||
/* We add basic fieldset styling */
|
||||
fieldset {
|
||||
@include fieldset;
|
||||
}
|
||||
|
||||
/* Error Handling */
|
||||
|
||||
#{data('abide')} {
|
||||
.error small.error, .error span.error, span.error, small.error {
|
||||
@include form-error-message;
|
||||
}
|
||||
span.error, small.error { display: none; }
|
||||
}
|
||||
|
||||
span.error, small.error {
|
||||
@include form-error-message;
|
||||
}
|
||||
|
||||
.error {
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
margin-bottom: $form-spacing
|
||||
}
|
||||
|
||||
label,
|
||||
label.error {
|
||||
@include form-label-error-color;
|
||||
}
|
||||
|
||||
small.error {
|
||||
@include form-error-message;
|
||||
}
|
||||
|
||||
> label {
|
||||
> small {
|
||||
color: scale-color($form-label-font-color, $lightness: 15%);
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
text-transform: $form-label-small-transform;
|
||||
font-style: normal;
|
||||
font-size: 60%;
|
||||
margin: 0;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
span.error-message {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
input.error,
|
||||
textarea.error,
|
||||
select.error {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
label.error { @include form-label-error-color; }
|
||||
}
|
||||
}
|
||||
480
_sass/foundation-components/_global.scss
Normal file
480
_sass/foundation-components/_global.scss
Normal file
|
|
@ -0,0 +1,480 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "../functions";
|
||||
//
|
||||
// Foundation Variables
|
||||
//
|
||||
|
||||
// Data attribute namespace
|
||||
// styles get applied to [data-mysite-plugin], etc
|
||||
$namespace: false !default;
|
||||
|
||||
// The default font-size is set to 100% of the browser style sheet (usually 16px)
|
||||
// for compatibility with browser-based text zoom or user-set defaults.
|
||||
|
||||
// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
|
||||
// If you want your base font-size to be different and not have it affect the grid breakpoints,
|
||||
// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
|
||||
$base-font-size: 100% !default;
|
||||
|
||||
// $base-line-height is 24px while $base-font-size is 16px
|
||||
$base-line-height: 1.5 !default;
|
||||
|
||||
//
|
||||
// Global Foundation Mixins
|
||||
//
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this to control border radius.
|
||||
// $radius - Default: $global-radius || 4px
|
||||
@mixin radius($radius:$global-radius) {
|
||||
@if $radius {
|
||||
border-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this to create equal side border radius on elements.
|
||||
// $side - Options: left, right, top, bottom
|
||||
@mixin side-radius($side, $radius:$global-radius) {
|
||||
@if ($side == left or $side == right) {
|
||||
-webkit-border-bottom-#{$side}-radius: $radius;
|
||||
-webkit-border-top-#{$side}-radius: $radius;
|
||||
border-bottom-#{$side}-radius: $radius;
|
||||
border-top-#{$side}-radius: $radius;
|
||||
} @else {
|
||||
-webkit-#{$side}-left-radius: $radius;
|
||||
-webkit-#{$side}-right-radius: $radius;
|
||||
border-#{$side}-left-radius: $radius;
|
||||
border-#{$side}-right-radius: $radius;
|
||||
}
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We can control whether or not we have inset shadows edges.
|
||||
// $active - Default: true, Options: false
|
||||
@mixin inset-shadow($active:true) {
|
||||
box-shadow: $shiny-edge-size $shiny-edge-color inset;
|
||||
|
||||
@if $active { &:active {
|
||||
box-shadow: $shiny-edge-size $shiny-edge-active-color inset; } }
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this to add transitions to elements
|
||||
// $property - Default: all, Options: http://www.w3.org/TR/css3-transitions/#animatable-properties
|
||||
// $speed - Default: 300ms
|
||||
// $ease - Default:ease-out, Options: http://css-tricks.com/almanac/properties/t/transition-timing-function/
|
||||
@mixin single-transition($property:all, $speed:300ms, $ease:ease-out) {
|
||||
transition: $property $speed $ease;
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this to add box-sizing across browser prefixes
|
||||
@mixin box-sizing($type:border-box) {
|
||||
-webkit-box-sizing: $type; // Android < 2.3, iOS < 4
|
||||
-moz-box-sizing: $type; // Firefox < 29
|
||||
box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this to create isosceles triangles
|
||||
// $triangle-size - Used to set border-size. No default, set a px or em size.
|
||||
// $triangle-color - Used to set border-color which makes up triangle. No default
|
||||
// $triangle-direction - Used to determine which direction triangle points. Options: top, bottom, left, right
|
||||
@mixin css-triangle($triangle-size, $triangle-color, $triangle-direction) {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: inset $triangle-size;
|
||||
@if ($triangle-direction == top) {
|
||||
border-color: $triangle-color transparent transparent transparent;
|
||||
border-top-style: solid;
|
||||
}
|
||||
@if ($triangle-direction == bottom) {
|
||||
border-color: transparent transparent $triangle-color transparent;
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
@if ($triangle-direction == left) {
|
||||
border-color: transparent transparent transparent $triangle-color;
|
||||
border-left-style: solid;
|
||||
}
|
||||
@if ($triangle-direction == right) {
|
||||
border-color: transparent $triangle-color transparent transparent;
|
||||
border-right-style: solid;
|
||||
}
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this to create the icon with three lines aka the hamburger icon, the menu-icon or the navicon
|
||||
// $width - Width of hamburger icon in rem
|
||||
// $left - If false, icon will be centered horizontally || explicitly set value in rem
|
||||
// $top - If false, icon will be centered vertically || explicitly set value in rem
|
||||
// $thickness - thickness of lines in hamburger icon, set value in px
|
||||
// $gap - spacing between the lines in hamburger icon, set value in px
|
||||
// $color - icon color
|
||||
// $hover-color - icon color during hover
|
||||
// $offcanvas - Set to true of @include in offcanvas
|
||||
@mixin hamburger($width, $left, $top, $thickness, $gap, $color, $hover-color, $offcanvas) {
|
||||
span::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 0;
|
||||
|
||||
@if $offcanvas {
|
||||
@if $top {
|
||||
top: $top;
|
||||
}
|
||||
@else {
|
||||
top: 50%;
|
||||
margin-top: (-$width/2);
|
||||
}
|
||||
@if $left {
|
||||
left: $left;
|
||||
}
|
||||
@else {
|
||||
left: ($tabbar-menu-icon-width - $width)/2;
|
||||
}
|
||||
}
|
||||
@else {
|
||||
top: 50%;
|
||||
margin-top: -($width/2);
|
||||
#{$opposite-direction}: $topbar-link-padding;
|
||||
}
|
||||
|
||||
box-shadow:
|
||||
0 0 0 $thickness $color,
|
||||
0 $gap + $thickness 0 $thickness $color,
|
||||
0 (2 * $gap + 2*$thickness) 0 $thickness $color;
|
||||
width: $width;
|
||||
}
|
||||
span:hover:after {
|
||||
box-shadow:
|
||||
0 0 0 $thickness $hover-color,
|
||||
0 $gap + $thickness 0 $thickness $hover-color,
|
||||
0 (2 * $gap + 2*$thickness) 0 $thickness $hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
// We use this to do clear floats
|
||||
@mixin clearfix {
|
||||
&:before, &:after { content: " "; display: table; }
|
||||
&:after { clear: both; }
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this to add a glowing effect to block elements
|
||||
// $selector - Used for selector state. Default: focus, Options: hover, active, visited
|
||||
// $fade-time - Default: 300ms
|
||||
// $glowing-effect-color - Default: fade-out($primary-color, .25)
|
||||
@mixin block-glowing-effect($selector:focus, $fade-time:300ms, $glowing-effect-color:fade-out($primary-color, .25)) {
|
||||
transition: box-shadow $fade-time, border-color $fade-time ease-in-out;
|
||||
|
||||
&:#{$selector} {
|
||||
box-shadow: 0 0 5px $glowing-effect-color;
|
||||
border-color: $glowing-effect-color;
|
||||
}
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this to translate elements in 2D
|
||||
// $horizontal: Default: 0
|
||||
// $vertical: Default: 0
|
||||
@mixin translate2d($horizontal:0, $vertical:0) {
|
||||
transform: translate($horizontal,$vertical)
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// Makes an element visually hidden, but accessible.
|
||||
// @see http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
|
||||
@mixin element-invisible {
|
||||
position: absolute !important;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// Turns off the element-invisible effect.
|
||||
@mixin element-invisible-off {
|
||||
position: static !important;
|
||||
height: auto;
|
||||
width: auto;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
}
|
||||
|
||||
$white : #FFFFFF !default;
|
||||
$ghost : #FAFAFA !default;
|
||||
$snow : #F9F9F9 !default;
|
||||
$vapor : #F6F6F6 !default;
|
||||
$white-smoke : #F5F5F5 !default;
|
||||
$silver : #EFEFEF !default;
|
||||
$smoke : #EEEEEE !default;
|
||||
$gainsboro : #DDDDDD !default;
|
||||
$iron : #CCCCCC !default;
|
||||
$base : #AAAAAA !default;
|
||||
$aluminum : #999999 !default;
|
||||
$jumbo : #888888 !default;
|
||||
$monsoon : #777777 !default;
|
||||
$steel : #666666 !default;
|
||||
$charcoal : #555555 !default;
|
||||
$tuatara : #444444 !default;
|
||||
$oil : #333333 !default;
|
||||
$jet : #222222 !default;
|
||||
$black : #000000 !default;
|
||||
|
||||
// We use these as default colors throughout
|
||||
$primary-color: #008CBA !default; // bondi-blue
|
||||
$secondary-color: #e7e7e7 !default; // white-lilac
|
||||
$alert-color: #f04124 !default; // cinnabar
|
||||
$success-color: #43AC6A !default; // sea-green
|
||||
$warning-color: #f08a24 !default; // carrot
|
||||
$info-color: #a0d3e8 !default; // cornflower
|
||||
|
||||
// We use these to define default font stacks
|
||||
$font-family-sans-serif: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif !default;
|
||||
$font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif !default;
|
||||
$font-family-monospace: Consolas, "Liberation Mono", Courier, monospace !default;
|
||||
|
||||
// We use these to define default font weights
|
||||
$font-weight-normal: normal !default;
|
||||
$font-weight-bold: bold !default;
|
||||
|
||||
// We use these to control various global styles
|
||||
$body-bg: #fff !default;
|
||||
$body-font-color: #222 !default;
|
||||
$body-font-family: $font-family-sans-serif !default;
|
||||
$body-font-weight: $font-weight-normal !default;
|
||||
$body-font-style: normal !default;
|
||||
|
||||
// We use this to control font-smoothing
|
||||
$font-smoothing: antialiased !default;
|
||||
|
||||
// We use these to control text direction settings
|
||||
$text-direction: ltr !default;
|
||||
$default-float: left !default;
|
||||
$opposite-direction: right !default;
|
||||
@if $text-direction == ltr {
|
||||
$default-float: left;
|
||||
$opposite-direction: right;
|
||||
} @else {
|
||||
$default-float: right;
|
||||
$opposite-direction: left;
|
||||
}
|
||||
|
||||
// We use these to make sure border radius matches unless we want it different.
|
||||
$global-radius: 3px !default;
|
||||
$global-rounded: 1000px !default;
|
||||
|
||||
// We use these to control inset shadow shiny edges and depressions.
|
||||
$shiny-edge-size: 0 1px 0 !default;
|
||||
$shiny-edge-color: rgba(#fff, .5) !default;
|
||||
$shiny-edge-active-color: rgba(#000, .2) !default;
|
||||
|
||||
// We use this to control whether or not CSS classes come through in the gem files.
|
||||
$include-html-classes: true !default;
|
||||
$include-print-styles: true !default;
|
||||
$include-html-global-classes: $include-html-classes !default;
|
||||
|
||||
$column-gutter: rem-calc(30) !default;
|
||||
|
||||
// Media Query Ranges
|
||||
$small-range: (0, 40em) !default;
|
||||
$medium-range: (40.063em, 64em) !default;
|
||||
$large-range: (64.063em, 90em) !default;
|
||||
$xlarge-range: (90.063em, 120em) !default;
|
||||
$xxlarge-range: (120.063em, 99999999em) !default;
|
||||
|
||||
|
||||
$screen: "only screen" !default;
|
||||
|
||||
$landscape: "#{$screen} and (orientation: landscape)" !default;
|
||||
$portrait: "#{$screen} and (orientation: portrait)" !default;
|
||||
|
||||
$small-up: $screen !default;
|
||||
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})" !default;
|
||||
|
||||
$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})" !default;
|
||||
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})" !default;
|
||||
|
||||
$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})" !default;
|
||||
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})" !default;
|
||||
|
||||
$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})" !default;
|
||||
$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})" !default;
|
||||
|
||||
$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})" !default;
|
||||
$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})" !default;
|
||||
|
||||
// Legacy
|
||||
$small: $medium-up;
|
||||
$medium: $medium-up;
|
||||
$large: $large-up;
|
||||
|
||||
|
||||
//We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
|
||||
$cursor-auto-value: auto !default;
|
||||
$cursor-crosshair-value: crosshair !default;
|
||||
$cursor-default-value: default !default;
|
||||
$cursor-pointer-value: pointer !default;
|
||||
$cursor-help-value: help !default;
|
||||
$cursor-text-value: text !default;
|
||||
|
||||
|
||||
@include exports("global") {
|
||||
|
||||
// Meta styles are included in all builds, as they are a dependancy of the Javascript.
|
||||
// Used to provide media query values for javascript components.
|
||||
// Forward slash placed around everything to convince PhantomJS to read the value.
|
||||
|
||||
meta.foundation-version {
|
||||
font-family: "/5.5.0/";
|
||||
}
|
||||
|
||||
meta.foundation-mq-small {
|
||||
font-family: "/" + unquote($small-up) + "/";
|
||||
width: lower-bound($small-range);
|
||||
}
|
||||
|
||||
meta.foundation-mq-small-only {
|
||||
font-family: "/" + unquote($small-only) + "/";
|
||||
width: lower-bound($small-range);
|
||||
}
|
||||
|
||||
meta.foundation-mq-medium {
|
||||
font-family: "/" + unquote($medium-up) + "/";
|
||||
width: lower-bound($medium-range);
|
||||
}
|
||||
|
||||
meta.foundation-mq-medium-only {
|
||||
font-family: "/" + unquote($medium-only) + "/";
|
||||
width: lower-bound($medium-range);
|
||||
}
|
||||
|
||||
meta.foundation-mq-large {
|
||||
font-family: "/" + unquote($large-up) + "/";
|
||||
width: lower-bound($large-range);
|
||||
}
|
||||
|
||||
meta.foundation-mq-large-only {
|
||||
font-family: "/" + unquote($large-only) + "/";
|
||||
width: lower-bound($large-range);
|
||||
}
|
||||
|
||||
meta.foundation-mq-xlarge {
|
||||
font-family: "/" + unquote($xlarge-up) + "/";
|
||||
width: lower-bound($xlarge-range);
|
||||
}
|
||||
|
||||
meta.foundation-mq-xlarge-only {
|
||||
font-family: "/" + unquote($xlarge-only) + "/";
|
||||
width: lower-bound($xlarge-range);
|
||||
}
|
||||
|
||||
meta.foundation-mq-xxlarge {
|
||||
font-family: "/" + unquote($xxlarge-up) + "/";
|
||||
width: lower-bound($xxlarge-range);
|
||||
}
|
||||
|
||||
meta.foundation-data-attribute-namespace {
|
||||
font-family: #{$namespace};
|
||||
}
|
||||
|
||||
@if $include-html-global-classes {
|
||||
|
||||
// Must be 100% for off canvas to work
|
||||
html, body { height: 100%; }
|
||||
|
||||
// Set box-sizing globally to handle padding and border widths
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
html,
|
||||
body { font-size: $base-font-size; }
|
||||
|
||||
// Default body styles
|
||||
body {
|
||||
background: $body-bg;
|
||||
color: $body-font-color;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: $body-font-family;
|
||||
font-weight: $body-font-weight;
|
||||
font-style: $body-font-style;
|
||||
line-height: $base-line-height; // Set to $base-line-height to take on browser default of 150%
|
||||
position: relative;
|
||||
cursor: $cursor-auto-value;
|
||||
}
|
||||
|
||||
a:hover { cursor: $cursor-pointer-value; }
|
||||
|
||||
// Grid Defaults to get images and embeds to work properly
|
||||
img { max-width: 100%; height: auto; }
|
||||
|
||||
img { -ms-interpolation-mode: bicubic; }
|
||||
|
||||
#map_canvas,
|
||||
.map_canvas {
|
||||
img,
|
||||
embed,
|
||||
object { max-width: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Miscellaneous useful HTML classes
|
||||
.left { float: left !important; }
|
||||
.right { float: right !important; }
|
||||
.clearfix { @include clearfix; }
|
||||
|
||||
// Hide visually and from screen readers
|
||||
.hide {
|
||||
display: none !important;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
// Hide visually and from screen readers, but maintain layout
|
||||
.invisible { visibility: hidden; }
|
||||
|
||||
// Font smoothing
|
||||
// Antialiased font smoothing works best for light text on a dark background.
|
||||
// Apply to single elements instead of globally to body.
|
||||
// Note this only applies to webkit-based desktop browsers and Firefox 25 (and later) on the Mac.
|
||||
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
|
||||
|
||||
// Get rid of gap under images by making them display: inline-block; by default
|
||||
img {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
//
|
||||
// Global resets for forms
|
||||
//
|
||||
|
||||
// Make sure textarea takes on height automatically
|
||||
textarea { height: auto; min-height: 50px; }
|
||||
|
||||
// Make select elements 100% width by default
|
||||
select { width: 100%; }
|
||||
}
|
||||
}
|
||||
289
_sass/foundation-components/_grid.scss
Normal file
289
_sass/foundation-components/_grid.scss
Normal file
|
|
@ -0,0 +1,289 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
|
||||
//
|
||||
// @variables
|
||||
//
|
||||
$include-html-grid-classes: $include-html-classes !default;
|
||||
$include-xl-html-grid-classes: false !default;
|
||||
|
||||
$row-width: rem-calc(1000) !default;
|
||||
$total-columns: 12 !default;
|
||||
|
||||
$last-child-float: $opposite-direction !default;
|
||||
|
||||
//
|
||||
// Grid Functions
|
||||
//
|
||||
|
||||
// Deprecated: We'll drop support for this in 5.1, use grid-calc()
|
||||
@function gridCalc($colNumber, $totalColumns) {
|
||||
@warn "gridCalc() is deprecated, use grid-calc()";
|
||||
@return grid-calc($colNumber, $totalColumns);
|
||||
}
|
||||
|
||||
// @FUNCTION
|
||||
// $colNumber - Found in settings file
|
||||
// $totalColumns - Found in settings file
|
||||
@function grid-calc($colNumber, $totalColumns) {
|
||||
@return percentage(($colNumber / $totalColumns));
|
||||
}
|
||||
|
||||
//
|
||||
// @mixins
|
||||
//
|
||||
|
||||
// For creating container, nested, and collapsed rows.
|
||||
//
|
||||
//
|
||||
// $behavior - Any special behavior for this row? Default: false. Options: nest, collapse, nest-collapse, false.
|
||||
@mixin grid-row($behavior: false) {
|
||||
|
||||
// use @include grid-row(nest); to include a nested row
|
||||
@if $behavior == nest {
|
||||
width: auto;
|
||||
margin-#{$default-float}: -($column-gutter/2);
|
||||
margin-#{$opposite-direction}: -($column-gutter/2);
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
// use @include grid-row(collapse); to collapsed a container row margins
|
||||
@else if $behavior == collapse {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
max-width: $row-width;
|
||||
}
|
||||
|
||||
// use @include grid-row(nest-collapse); to collapse outer margins on a nested row
|
||||
@else if $behavior == nest-collapse {
|
||||
width: auto;
|
||||
margin: 0;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
// use @include grid-row; to use a container row
|
||||
@else {
|
||||
width: 100%;
|
||||
margin-#{$default-float}: auto;
|
||||
margin-#{$opposite-direction}: auto;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
max-width: $row-width;
|
||||
}
|
||||
|
||||
// Clearfix for all rows
|
||||
@include clearfix();
|
||||
}
|
||||
|
||||
// Creates a column, should be used inside of a media query to control layouts
|
||||
//
|
||||
// $columns - The number of columns this should be
|
||||
// $last-column - Is this the last column? Default: false.
|
||||
// $center - Center these columns? Default: false.
|
||||
// $offset - # of columns to offset. Default: false.
|
||||
// $push - # of columns to push. Default: false.
|
||||
// $pull - # of columns to pull. Default: false.
|
||||
// $collapse - Get rid of gutter padding on column? Default: false.
|
||||
// $float - Should this float? Default: true. Options: true, false, left, right.
|
||||
@mixin grid-column(
|
||||
$columns:false,
|
||||
$last-column:false,
|
||||
$center:false,
|
||||
$offset:false,
|
||||
$push:false,
|
||||
$pull:false,
|
||||
$collapse:false,
|
||||
$float:true,
|
||||
$position:false) {
|
||||
|
||||
// If positioned for default .column, include relative position
|
||||
// push and pull require position set
|
||||
@if $position or $push or $pull {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// If collapsed, get rid of gutter padding
|
||||
@if $collapse {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
// Gutter padding whenever a column isn't set to collapse
|
||||
// (use $collapse:null to do nothing)
|
||||
@else if $collapse == false {
|
||||
padding-left: ($column-gutter / 2);
|
||||
padding-right: ($column-gutter / 2);
|
||||
}
|
||||
|
||||
// If a column number is given, calculate width
|
||||
@if $columns {
|
||||
width: grid-calc($columns, $total-columns);
|
||||
|
||||
// If last column, float naturally instead of to the right
|
||||
@if $last-column { float: $opposite-direction; }
|
||||
}
|
||||
|
||||
// Source Ordering, adds left/right depending on which you use.
|
||||
@if $push { #{$default-float}: grid-calc($push, $total-columns); #{$opposite-direction}: auto; }
|
||||
@if $pull { #{$opposite-direction}: grid-calc($pull, $total-columns); #{$default-float}: auto; }
|
||||
|
||||
@if $float {
|
||||
@if $float == left or $float == true { float: $default-float; }
|
||||
@else if $float == right { float: $opposite-direction; }
|
||||
@else { float: none; }
|
||||
}
|
||||
|
||||
// If centered, get rid of float and add appropriate margins
|
||||
@if $center {
|
||||
margin-#{$default-float}: auto;
|
||||
margin-#{$opposite-direction}: auto;
|
||||
float: none;
|
||||
}
|
||||
|
||||
// If offset, calculate appropriate margins
|
||||
@if $offset { margin-#{$default-float}: grid-calc($offset, $total-columns) !important; }
|
||||
|
||||
}
|
||||
|
||||
// Create presentational classes for grid
|
||||
//
|
||||
// $size - Name of class to use, i.e. "large" will generate .large-1, .large-2, etc.
|
||||
@mixin grid-html-classes($size) {
|
||||
|
||||
@for $i from 0 through $total-columns - 1 {
|
||||
.#{$size}-push-#{$i} {
|
||||
@include grid-column($push:$i, $collapse:null, $float:false);
|
||||
}
|
||||
.#{$size}-pull-#{$i} {
|
||||
@include grid-column($pull:$i, $collapse:null, $float:false);
|
||||
}
|
||||
}
|
||||
|
||||
.column,
|
||||
.columns { @include grid-column($columns:false, $position:true); }
|
||||
|
||||
|
||||
@for $i from 1 through $total-columns {
|
||||
.#{$size}-#{$i} { @include grid-column($columns:$i,$collapse:null,$float:false); }
|
||||
}
|
||||
|
||||
@for $i from 0 through $total-columns - 1 {
|
||||
.#{$size}-offset-#{$i} { @include grid-column($offset:$i, $collapse:null,$float:false); }
|
||||
}
|
||||
|
||||
.#{$size}-reset-order {
|
||||
margin-#{$default-float}: 0;
|
||||
margin-#{$opposite-direction}: 0;
|
||||
left: auto;
|
||||
right: auto;
|
||||
float: $default-float;
|
||||
}
|
||||
|
||||
.column.#{$size}-centered,
|
||||
.columns.#{$size}-centered { @include grid-column($center:true, $collapse:null, $float:false); }
|
||||
|
||||
.column.#{$size}-uncentered,
|
||||
.columns.#{$size}-uncentered {
|
||||
margin-#{$default-float}: 0;
|
||||
margin-#{$opposite-direction}: 0;
|
||||
float: $default-float;
|
||||
}
|
||||
|
||||
// Fighting [class*="column"] + [class*="column"]:last-child
|
||||
.column.#{$size}-centered:last-child,
|
||||
.columns.#{$size}-centered:last-child{
|
||||
float: none;
|
||||
}
|
||||
|
||||
// Fighting .column.<previous-size>-centered:last-child
|
||||
.column.#{$size}-uncentered:last-child,
|
||||
.columns.#{$size}-uncentered:last-child {
|
||||
float: $default-float;
|
||||
}
|
||||
|
||||
.column.#{$size}-uncentered.opposite,
|
||||
.columns.#{$size}-uncentered.opposite {
|
||||
float: $opposite-direction;
|
||||
}
|
||||
|
||||
.row {
|
||||
&.#{$size}-collapse {
|
||||
> .column,
|
||||
> .columns { @include grid-column($collapse:true, $float:false); }
|
||||
|
||||
.row {margin-left:0; margin-right:0;}
|
||||
}
|
||||
&.#{$size}-uncollapse {
|
||||
> .column,
|
||||
> .columns {
|
||||
@include grid-column;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("grid") {
|
||||
@if $include-html-grid-classes {
|
||||
.row {
|
||||
@include grid-row;
|
||||
|
||||
&.collapse {
|
||||
> .column,
|
||||
> .columns { @include grid-column($collapse:true, $float:false); }
|
||||
|
||||
.row {margin-left:0; margin-right:0;}
|
||||
}
|
||||
|
||||
.row { @include grid-row($behavior:nest);
|
||||
&.collapse { @include grid-row($behavior:nest-collapse); }
|
||||
}
|
||||
}
|
||||
|
||||
.column,
|
||||
.columns { @include grid-column($columns:$total-columns); }
|
||||
|
||||
[class*="column"] + [class*="column"]:last-child { float: $last-child-float; }
|
||||
[class*="column"] + [class*="column"].end { float: $default-float; }
|
||||
|
||||
@media #{$small-up} {
|
||||
@include grid-html-classes($size:small);
|
||||
}
|
||||
|
||||
@media #{$medium-up} {
|
||||
@include grid-html-classes($size:medium);
|
||||
// Old push and pull classes
|
||||
@for $i from 0 through $total-columns - 1 {
|
||||
.push-#{$i} {
|
||||
@include grid-column($push:$i, $collapse:null, $float:false);
|
||||
}
|
||||
.pull-#{$i} {
|
||||
@include grid-column($pull:$i, $collapse:null, $float:false);
|
||||
}
|
||||
}
|
||||
}
|
||||
@media #{$large-up} {
|
||||
@include grid-html-classes($size:large);
|
||||
@for $i from 0 through $total-columns - 1 {
|
||||
.push-#{$i} {
|
||||
@include grid-column($push:$i, $collapse:null, $float:false);
|
||||
}
|
||||
.pull-#{$i} {
|
||||
@include grid-column($pull:$i, $collapse:null, $float:false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@if $include-xl-html-grid-classes {
|
||||
@media #{$xlarge-up} {
|
||||
@include grid-html-classes($size:xlarge);
|
||||
}
|
||||
@media #{$xxlarge-up} {
|
||||
@include grid-html-classes($size:xxlarge);
|
||||
}
|
||||
}
|
||||
}
|
||||
329
_sass/foundation-components/_icon-bar.scss
Normal file
329
_sass/foundation-components/_icon-bar.scss
Normal file
|
|
@ -0,0 +1,329 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
|
||||
|
||||
// @name
|
||||
// @dependencies _global.scss
|
||||
|
||||
$include-html-icon-bar-classes: $include-html-classes !default;
|
||||
|
||||
// @variables
|
||||
|
||||
// We use these to style the icon-bar and items
|
||||
$icon-bar-bg: $oil !default;
|
||||
$icon-bar-font-color: $white !default;
|
||||
$icon-bar-font-color-hover: $icon-bar-font-color !default;
|
||||
$icon-bar-font-size: 1rem !default;
|
||||
$icon-bar-hover-color: $primary-color !default;
|
||||
$icon-bar-icon-color: $white !default;
|
||||
$icon-bar-icon-color-hover: $icon-bar-icon-color !default;
|
||||
$icon-bar-icon-size: 1.875rem !default;
|
||||
$icon-bar-image-width: 1.875rem !default;
|
||||
$icon-bar-image-height: 1.875rem !default;
|
||||
$icon-bar-active-color: $primary-color !default;
|
||||
$icon-bar-item-padding: 1.25rem !default;
|
||||
|
||||
// We use this to set default opacity and cursor for disabled icons.
|
||||
$icon-bar-disabled-opacity: 0.7 !default;
|
||||
$icon-bar-disabled-cursor: $cursor-default-value !default;
|
||||
|
||||
//
|
||||
// @mixins
|
||||
//
|
||||
|
||||
// We use this mixin to create the base styles for our Icon bar element.
|
||||
//
|
||||
@mixin icon-bar-base() {
|
||||
|
||||
width: 100%;
|
||||
font-size: 0;
|
||||
display: inline-block;
|
||||
|
||||
& > * {
|
||||
text-align: center;
|
||||
font-size: $icon-bar-font-size;
|
||||
width: 25%;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
padding: $icon-bar-item-padding;
|
||||
float: left;
|
||||
|
||||
i, img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
|
||||
& + label {
|
||||
margin-top: .0625rem;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: $icon-bar-icon-size;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
img {
|
||||
width: $icon-bar-image-width;
|
||||
height: $icon-bar-image-height;
|
||||
}
|
||||
}
|
||||
|
||||
&.label-right > * {
|
||||
|
||||
i, img {
|
||||
margin: 0 .0625rem 0 0;
|
||||
display: inline-block;
|
||||
|
||||
& + label {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
label { display: inline-block; }
|
||||
}
|
||||
|
||||
&.vertical.label-right > * {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.vertical, &.small-vertical{
|
||||
height: 100%;
|
||||
width: auto;
|
||||
|
||||
.item {
|
||||
width: auto;
|
||||
margin: auto;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.medium-vertical {
|
||||
@media #{$medium-up} {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
|
||||
.item {
|
||||
width: auto;
|
||||
margin: auto;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.large-vertical {
|
||||
@media #{$large-up} {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
|
||||
.item {
|
||||
width: auto;
|
||||
margin: auto;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// We use this mixin to create the size styles for icon bars.
|
||||
@mixin icon-bar-size(
|
||||
$padding: $icon-bar-item-padding,
|
||||
$font-size: $icon-bar-font-size,
|
||||
$icon-size: $icon-bar-icon-size,
|
||||
$image-width: $icon-bar-image-width,
|
||||
$image-height: $icon-bar-image-height) {
|
||||
|
||||
& > * {
|
||||
font-size: $font-size;
|
||||
padding: $padding;
|
||||
|
||||
i, img {
|
||||
|
||||
& + label {
|
||||
margin-top: .0625rem;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: $icon-size;
|
||||
}
|
||||
|
||||
img {
|
||||
width: $image-width;
|
||||
height: $image-height;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@mixin icon-bar-style(
|
||||
$bar-bg:$icon-bar-bg,
|
||||
$bar-font-color:$icon-bar-font-color,
|
||||
$bar-font-color-hover:$icon-bar-font-color-hover,
|
||||
$bar-hover-color:$icon-bar-hover-color,
|
||||
$bar-icon-color:$icon-bar-icon-color,
|
||||
$bar-icon-color-hover:$icon-bar-icon-color-hover,
|
||||
$bar-active-color:$icon-bar-active-color,
|
||||
$base-style:true,
|
||||
$disabled:false) {
|
||||
|
||||
@if $base-style {
|
||||
|
||||
background: $bar-bg;
|
||||
|
||||
& > * {
|
||||
label { color: $bar-font-color; }
|
||||
|
||||
i { color: $bar-icon-color; }
|
||||
}
|
||||
|
||||
& > a:hover {
|
||||
|
||||
background: $bar-hover-color;
|
||||
|
||||
label { color: $bar-font-color-hover; }
|
||||
|
||||
i { color: $bar-icon-color-hover; }
|
||||
}
|
||||
|
||||
& > a.active {
|
||||
|
||||
background: $bar-active-color;
|
||||
|
||||
label { color: $bar-font-color-hover; }
|
||||
|
||||
i { color: $bar-icon-color-hover; }
|
||||
}
|
||||
}
|
||||
@if $disabled {
|
||||
.item.disabled {
|
||||
opacity: $icon-bar-disabled-opacity;
|
||||
cursor: $icon-bar-disabled-cursor;
|
||||
>* {
|
||||
opacity: $icon-bar-disabled-opacity;
|
||||
cursor: $icon-bar-disabled-cursor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// We use this to quickly create icon bars with a single mixin
|
||||
// $height - The overall calculated height of the icon bar (horizontal)
|
||||
// $bar-bg - the background color of the bar
|
||||
// $bar-font-color - the font color
|
||||
// $bar-hover-color - okay these are pretty obvious variables
|
||||
// $bar-icon-color - maybe we could skip explaining them all? Okay this one does change icon color if you use an icon font
|
||||
// $bar-active-color - the color of an active / hover state
|
||||
// $base-style - Apply base styles? Default: true.
|
||||
// $disabled - Allow disabled icons? Default: false.
|
||||
|
||||
@mixin icon-bar(
|
||||
$bar-bg:$icon-bar-bg,
|
||||
$bar-font-color:$icon-bar-font-color,
|
||||
$bar-font-color-hover:$icon-bar-font-color-hover,
|
||||
$bar-hover-color:$icon-bar-hover-color,
|
||||
$bar-icon-color:$icon-bar-icon-color,
|
||||
$bar-icon-color-hover:$icon-bar-icon-color-hover,
|
||||
$bar-active-color:$icon-bar-active-color,
|
||||
$padding: $icon-bar-item-padding,
|
||||
$font-size: $icon-bar-font-size,
|
||||
$icon-size: $icon-bar-icon-size,
|
||||
$image-width: $icon-bar-image-width,
|
||||
$image-height: $icon-bar-image-height,
|
||||
$base-style:true,
|
||||
$disabled:false) {
|
||||
@include icon-bar-base();
|
||||
@include icon-bar-size($padding, $font-size, $icon-size, $image-width, $image-height);
|
||||
@include icon-bar-style($bar-bg, $bar-font-color, $bar-font-color-hover, $bar-hover-color, $bar-icon-color, $bar-icon-color-hover, $bar-active-color, $base-style, $disabled);
|
||||
}
|
||||
|
||||
@include exports("icon-bar") {
|
||||
@if $include-html-icon-bar-classes {
|
||||
.icon-bar {
|
||||
@include icon-bar;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@if $include-html-icon-bar-classes {
|
||||
|
||||
// toolbar styles
|
||||
|
||||
.icon-bar {
|
||||
|
||||
// Counts
|
||||
|
||||
&.two-up {
|
||||
.item { width: 50%; }
|
||||
&.vertical .item, &.small-vertical .item { width: auto; }
|
||||
&.medium-vertical .item {
|
||||
@media #{$medium-up} {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
&.large-vertical .item {
|
||||
@media #{$large-up} {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.three-up {
|
||||
.item { width: 33.3333%; }
|
||||
&.vertical .item, &.small-vertical .item { width: auto; }
|
||||
&.medium-vertical .item {
|
||||
@media #{$medium-up} {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
&.large-vertical .item {
|
||||
@media #{$large-up} {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.four-up {
|
||||
.item { width: 25%; }
|
||||
&.vertical .item, &.small-vertical .item { width: auto; }
|
||||
&.medium-vertical .item {
|
||||
@media #{$medium-up} {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
&.large-vertical .item {
|
||||
@media #{$large-up} {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.five-up {
|
||||
.item { width: 20%; }
|
||||
&.vertical .item, &.small-vertical .item { width: auto; }
|
||||
&.medium-vertical .item {
|
||||
@media #{$medium-up} {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
&.large-vertical .item {
|
||||
@media #{$large-up} {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.six-up {
|
||||
.item { width: 16.66667%; }
|
||||
&.vertical .item, &.small-vertical .item { width: auto; }
|
||||
&.medium-vertical .item {
|
||||
@media #{$medium-up} {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
&.large-vertical .item {
|
||||
@media #{$large-up} {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
57
_sass/foundation-components/_inline-lists.scss
Normal file
57
_sass/foundation-components/_inline-lists.scss
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
|
||||
//
|
||||
// @variables
|
||||
//
|
||||
$include-html-inline-list-classes: $include-html-classes !default;
|
||||
|
||||
// We use this to control the margins and padding of the inline list.
|
||||
$inline-list-top-margin: 0 !default;
|
||||
$inline-list-opposite-margin: 0 !default;
|
||||
$inline-list-bottom-margin: rem-calc(17) !default;
|
||||
$inline-list-default-float-margin: rem-calc(-22) !default;
|
||||
$inline-list-default-float-list-margin: rem-calc(22) !default;
|
||||
|
||||
$inline-list-padding: 0 !default;
|
||||
|
||||
// We use this to control the overflow of the inline list.
|
||||
$inline-list-overflow: hidden !default;
|
||||
|
||||
// We use this to control the list items
|
||||
$inline-list-display: block !default;
|
||||
|
||||
// We use this to control any elements within list items
|
||||
$inline-list-children-display: block !default;
|
||||
|
||||
//
|
||||
// @mixins
|
||||
//
|
||||
// We use this mixin to create inline lists
|
||||
@mixin inline-list {
|
||||
margin: $inline-list-top-margin auto $inline-list-bottom-margin auto;
|
||||
margin-#{$default-float}: $inline-list-default-float-margin;
|
||||
margin-#{$opposite-direction}: $inline-list-opposite-margin;
|
||||
padding: $inline-list-padding;
|
||||
list-style: none;
|
||||
overflow: $inline-list-overflow;
|
||||
|
||||
& > li {
|
||||
list-style: none;
|
||||
float: $default-float;
|
||||
margin-#{$default-float}: $inline-list-default-float-list-margin;
|
||||
display: $inline-list-display;
|
||||
&>* { display: $inline-list-children-display; }
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("inline-list") {
|
||||
@if $include-html-inline-list-classes {
|
||||
.inline-list {
|
||||
@include inline-list();
|
||||
}
|
||||
}
|
||||
}
|
||||
222
_sass/foundation-components/_joyride.scss
Normal file
222
_sass/foundation-components/_joyride.scss
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
|
||||
//
|
||||
// @variables
|
||||
//
|
||||
$include-html-joyride-classes: $include-html-classes !default;
|
||||
|
||||
// Controlling default Joyride styles
|
||||
$joyride-tip-bg: $oil !default;
|
||||
$joyride-tip-default-width: 300px !default;
|
||||
$joyride-tip-padding: rem-calc(18 20 24) !default;
|
||||
$joyride-tip-border: solid 1px $charcoal !default;
|
||||
$joyride-tip-radius: 4px !default;
|
||||
$joyride-tip-position-offset: 22px !default;
|
||||
|
||||
// Here, we're setting the tip font styles
|
||||
$joyride-tip-font-color: $white !default;
|
||||
$joyride-tip-font-size: rem-calc(14) !default;
|
||||
$joyride-tip-header-weight: $font-weight-bold !default;
|
||||
|
||||
// This changes the nub size
|
||||
$joyride-tip-nub-size: 10px !default;
|
||||
|
||||
// This adjusts the styles for the timer when its enabled
|
||||
$joyride-tip-timer-width: 50px !default;
|
||||
$joyride-tip-timer-height: 3px !default;
|
||||
$joyride-tip-timer-color: $steel !default;
|
||||
|
||||
// This changes up the styles for the close button
|
||||
$joyride-tip-close-color: $monsoon !default;
|
||||
$joyride-tip-close-size: 24px !default;
|
||||
$joyride-tip-close-weight: $font-weight-normal !default;
|
||||
|
||||
// When Joyride is filling the screen, we use this style for the bg
|
||||
$joyride-screenfill: rgba(0,0,0,0.5) !default;
|
||||
|
||||
|
||||
// We decided not to make a mixin for this because it relies on
|
||||
// predefined classes to work properly.
|
||||
@include exports("joyride") {
|
||||
@if $include-html-joyride-classes {
|
||||
|
||||
/* Foundation Joyride */
|
||||
.joyride-list { display: none; }
|
||||
|
||||
/* Default styles for the container */
|
||||
.joyride-tip-guide {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: $joyride-tip-bg;
|
||||
color: $joyride-tip-font-color;
|
||||
z-index: 101;
|
||||
top: 0;
|
||||
#{$default-float}: 2.5%;
|
||||
font-family: inherit;
|
||||
font-weight: $font-weight-normal;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.lt-ie9 .joyride-tip-guide {
|
||||
max-width:800px;
|
||||
#{$default-float}: 50%;
|
||||
margin-#{$default-float}:-400px;
|
||||
}
|
||||
|
||||
.joyride-content-wrapper {
|
||||
width: 100%;
|
||||
|
||||
padding: $joyride-tip-padding;
|
||||
|
||||
.button { margin-bottom: 0 !important; }
|
||||
|
||||
.joyride-prev-tip { margin-right: 10px; }
|
||||
}
|
||||
|
||||
/* Add a little css triangle pip, older browser just miss out on the fanciness of it */
|
||||
.joyride-tip-guide {
|
||||
.joyride-nub {
|
||||
display: block;
|
||||
position: absolute;
|
||||
#{$default-float}: $joyride-tip-position-offset;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: $joyride-tip-nub-size solid $joyride-tip-bg;
|
||||
|
||||
&.top {
|
||||
border-top-style: solid;
|
||||
border-color: $joyride-tip-bg;
|
||||
border-top-color: transparent !important;
|
||||
border-#{$default-float}-color: transparent !important;
|
||||
border-#{$opposite-direction}-color: transparent !important;
|
||||
top: -($joyride-tip-nub-size*2);
|
||||
}
|
||||
&.bottom {
|
||||
border-bottom-style: solid;
|
||||
border-color: $joyride-tip-bg !important;
|
||||
border-bottom-color: transparent !important;
|
||||
border-#{$default-float}-color: transparent !important;
|
||||
border-#{$opposite-direction}-color: transparent !important;
|
||||
bottom: -($joyride-tip-nub-size*2);
|
||||
}
|
||||
|
||||
&.right { right: -($joyride-tip-nub-size*2); }
|
||||
&.left { left: -($joyride-tip-nub-size*2); }
|
||||
}
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
.joyride-tip-guide h1,
|
||||
.joyride-tip-guide h2,
|
||||
.joyride-tip-guide h3,
|
||||
.joyride-tip-guide h4,
|
||||
.joyride-tip-guide h5,
|
||||
.joyride-tip-guide h6 {
|
||||
line-height: 1.25;
|
||||
margin: 0;
|
||||
font-weight: $joyride-tip-header-weight;
|
||||
color: $joyride-tip-font-color;
|
||||
}
|
||||
.joyride-tip-guide p {
|
||||
margin: rem-calc(0 0 18 0);
|
||||
font-size: $joyride-tip-font-size;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.joyride-timer-indicator-wrap {
|
||||
width: $joyride-tip-timer-width;
|
||||
height: $joyride-tip-timer-height;
|
||||
border: $joyride-tip-border;
|
||||
position: absolute;
|
||||
#{$opposite-direction}: rem-calc(17);
|
||||
bottom: rem-calc(16);
|
||||
}
|
||||
.joyride-timer-indicator {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: inherit;
|
||||
background: $joyride-tip-timer-color;
|
||||
}
|
||||
|
||||
.joyride-close-tip {
|
||||
position: absolute;
|
||||
#{$opposite-direction}: 12px;
|
||||
top: 10px;
|
||||
color: $joyride-tip-close-color !important;
|
||||
text-decoration: none;
|
||||
font-size: $joyride-tip-close-size;
|
||||
font-weight: $joyride-tip-close-weight;
|
||||
line-height: .5 !important;
|
||||
|
||||
&:hover,
|
||||
&:focus { color: $smoke !important; }
|
||||
}
|
||||
|
||||
.joyride-modal-bg {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
background: $joyride-screenfill;
|
||||
z-index: 100;
|
||||
display: none;
|
||||
top: 0;
|
||||
#{$default-float}: 0;
|
||||
cursor: $cursor-pointer-value;
|
||||
}
|
||||
|
||||
.joyride-expose-wrapper {
|
||||
background-color: $white;
|
||||
position: absolute;
|
||||
border-radius: 3px;
|
||||
z-index: 102;
|
||||
box-shadow: 0 0 15px $white;
|
||||
}
|
||||
|
||||
.joyride-expose-cover {
|
||||
background: transparent;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Styles for screens that are at least 768px; */
|
||||
@media #{$small} {
|
||||
.joyride-tip-guide { width: $joyride-tip-default-width; #{$default-float}: inherit;
|
||||
.joyride-nub {
|
||||
&.bottom {
|
||||
border-color: $joyride-tip-bg !important;
|
||||
border-bottom-color: transparent !important;
|
||||
border-#{$default-float}-color: transparent !important;
|
||||
border-#{$opposite-direction}-color: transparent !important;
|
||||
bottom: -($joyride-tip-nub-size*2);
|
||||
}
|
||||
&.right {
|
||||
border-color: $joyride-tip-bg !important;
|
||||
border-top-color: transparent !important;
|
||||
border-right-color: transparent !important; border-bottom-color: transparent !important;
|
||||
top: $joyride-tip-position-offset;
|
||||
left: auto;
|
||||
right: -($joyride-tip-nub-size*2);
|
||||
}
|
||||
&.left {
|
||||
border-color: $joyride-tip-bg !important;
|
||||
border-top-color: transparent !important;
|
||||
border-left-color: transparent !important;
|
||||
border-bottom-color: transparent !important;
|
||||
top: $joyride-tip-position-offset;
|
||||
left: -($joyride-tip-nub-size*2);
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
61
_sass/foundation-components/_keystrokes.scss
Normal file
61
_sass/foundation-components/_keystrokes.scss
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
|
||||
//
|
||||
// @variables
|
||||
//
|
||||
$include-html-keystroke-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to control text styles.
|
||||
$keystroke-font: "Consolas", "Menlo", "Courier", monospace !default;
|
||||
$keystroke-font-size: inherit !default;
|
||||
$keystroke-font-color: $jet !default;
|
||||
$keystroke-font-color-alt: $white !default;
|
||||
$keystroke-function-factor: -7% !default;
|
||||
|
||||
// We use this to control keystroke padding.
|
||||
$keystroke-padding: rem-calc(2 4 0) !default;
|
||||
|
||||
// We use these to control background and border styles.
|
||||
$keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor) !default;
|
||||
$keystroke-border-style: solid !default;
|
||||
$keystroke-border-width: 1px !default;
|
||||
$keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor) !default;
|
||||
$keystroke-radius: $global-radius !default;
|
||||
|
||||
//
|
||||
// @mixins
|
||||
//
|
||||
// We use this mixin to create keystroke styles.
|
||||
// $bg - Default: $keystroke-bg || scale-color($white, $lightness: $keystroke-function-factor) !default;
|
||||
@mixin keystroke($bg:$keystroke-bg) {
|
||||
// This find the lightness percentage of the background color.
|
||||
$bg-lightness: lightness($bg);
|
||||
|
||||
background-color: $bg;
|
||||
border-color: scale-color($bg, $lightness: $keystroke-function-factor);
|
||||
|
||||
// We adjust the font color based on the brightness of the background.
|
||||
@if $bg-lightness > 70% { color: $keystroke-font-color; }
|
||||
@else { color: $keystroke-font-color-alt; }
|
||||
|
||||
border-style: $keystroke-border-style;
|
||||
border-width: $keystroke-border-width;
|
||||
margin: 0;
|
||||
font-family: $keystroke-font;
|
||||
font-size: $keystroke-font-size;
|
||||
padding: $keystroke-padding;
|
||||
}
|
||||
|
||||
@include exports("keystroke") {
|
||||
@if $include-html-keystroke-classes {
|
||||
.keystroke,
|
||||
kbd {
|
||||
@include keystroke;
|
||||
@include radius($keystroke-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
106
_sass/foundation-components/_labels.scss
Normal file
106
_sass/foundation-components/_labels.scss
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
|
||||
//
|
||||
// @variables
|
||||
//
|
||||
$include-html-label-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to style the labels
|
||||
$label-padding: rem-calc(4 8 4) !default;
|
||||
$label-radius: $global-radius !default;
|
||||
|
||||
// We use these to style the label text
|
||||
$label-font-sizing: rem-calc(11) !default;
|
||||
$label-font-weight: $font-weight-normal !default;
|
||||
$label-font-color: $oil !default;
|
||||
$label-font-color-alt: $white !default;
|
||||
$label-font-family: $body-font-family !default;
|
||||
|
||||
//
|
||||
// @mixins
|
||||
//
|
||||
// We use this mixin to create a default label base.
|
||||
@mixin label-base {
|
||||
font-weight: $label-font-weight;
|
||||
font-family: $label-font-family;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-bottom: auto;
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this mixin to add label size styles.
|
||||
// $padding - Used to determine label padding. Default: $label-padding || rem-calc(4 8 4) !default
|
||||
// $text-size - Used to determine label text-size. Default: $text-size found in settings
|
||||
@mixin label-size($padding:$label-padding, $text-size:$label-font-sizing) {
|
||||
@if $padding { padding: $padding; }
|
||||
@if $text-size { font-size: $text-size; }
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this mixin to add label styles.
|
||||
// $bg - Default: $primary-color (found in settings file)
|
||||
// $radius - Default: false, Options: true, sets radius to $global-radius (found in settings file)
|
||||
@mixin label-style($bg:$primary-color, $radius:false) {
|
||||
|
||||
// We control which background color comes through
|
||||
@if $bg {
|
||||
|
||||
// This find the lightness percentage of the background color.
|
||||
$bg-lightness: lightness($bg);
|
||||
|
||||
background-color: $bg;
|
||||
|
||||
// We control the text color for you based on the background color.
|
||||
@if $bg-lightness < 70% { color: $label-font-color-alt; }
|
||||
@else { color: $label-font-color; }
|
||||
}
|
||||
|
||||
// We use this to control the radius on labels.
|
||||
@if $radius == true { @include radius($label-radius); }
|
||||
@else if $radius { @include radius($radius); }
|
||||
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this to add close buttons to alerts
|
||||
// $padding - Default: $label-padding,
|
||||
// $text-size - Default: $label-font-sizing,
|
||||
// $bg - Default: $primary-color(found in settings file)
|
||||
// $radius - Default: false, Options: true which sets radius to $global-radius (found in settings file)
|
||||
@mixin label($padding:$label-padding, $text-size:$label-font-sizing, $bg:$primary-color, $radius:false) {
|
||||
|
||||
@include label-base;
|
||||
@include label-size($padding, $text-size);
|
||||
@include label-style($bg, $radius);
|
||||
}
|
||||
|
||||
@include exports("label") {
|
||||
@if $include-html-label-classes {
|
||||
.label {
|
||||
@include label-base;
|
||||
@include label-size;
|
||||
@include label-style;
|
||||
|
||||
&.radius { @include label-style(false, true); }
|
||||
&.round { @include label-style(false, $radius:1000px); }
|
||||
|
||||
&.alert { @include label-style($alert-color); }
|
||||
&.warning { @include label-style($warning-color); }
|
||||
&.success { @include label-style($success-color); }
|
||||
&.secondary { @include label-style($secondary-color); }
|
||||
&.info { @include label-style($info-color); }
|
||||
}
|
||||
}
|
||||
}
|
||||
34
_sass/foundation-components/_magellan.scss
Normal file
34
_sass/foundation-components/_magellan.scss
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
|
||||
//
|
||||
// @variables
|
||||
//
|
||||
$include-html-magellan-classes: $include-html-classes !default;
|
||||
|
||||
$magellan-bg: $white !default;
|
||||
$magellan-padding: 10px !default;
|
||||
|
||||
@include exports("magellan") {
|
||||
@if $include-html-magellan-classes {
|
||||
|
||||
#{data('magellan-expedition')}, #{data('magellan-expedition-clone')} {
|
||||
background: $magellan-bg;
|
||||
z-index: 50;
|
||||
min-width: 100%;
|
||||
padding: $magellan-padding;
|
||||
|
||||
.sub-nav {
|
||||
margin-bottom: 0;
|
||||
dd { margin-bottom: 0; }
|
||||
a {
|
||||
line-height: 1.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
515
_sass/foundation-components/_offcanvas.scss
Normal file
515
_sass/foundation-components/_offcanvas.scss
Normal file
|
|
@ -0,0 +1,515 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
@import "type";
|
||||
|
||||
// Off Canvas Tab Bar Variables
|
||||
$include-html-off-canvas-classes: $include-html-classes !default;
|
||||
|
||||
$tabbar-bg: $oil !default;
|
||||
$tabbar-height: rem-calc(45) !default;
|
||||
$tabbar-icon-width: $tabbar-height !default;
|
||||
$tabbar-line-height: $tabbar-height !default;
|
||||
$tabbar-color: $white !default;
|
||||
$tabbar-middle-padding: 0 rem-calc(10) !default;
|
||||
|
||||
// Off Canvas Divider Styles
|
||||
$tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%) !default;
|
||||
$tabbar-right-section-border: $tabbar-left-section-border;
|
||||
|
||||
|
||||
// Off Canvas Tab Bar Headers
|
||||
$tabbar-header-color: $white !default;
|
||||
$tabbar-header-weight: $font-weight-bold !default;
|
||||
$tabbar-header-line-height: $tabbar-height !default;
|
||||
$tabbar-header-margin: 0 !default;
|
||||
|
||||
// Off Canvas Menu Variables
|
||||
$off-canvas-width: rem-calc(250) !default;
|
||||
$off-canvas-bg: $oil !default;
|
||||
$off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%) !default;
|
||||
|
||||
// Off Canvas Menu List Variables
|
||||
$off-canvas-label-padding: 0.3rem rem-calc(15) !default;
|
||||
$off-canvas-label-color: $aluminum !default;
|
||||
$off-canvas-label-text-transform: uppercase !default;
|
||||
$off-canvas-label-font-size: rem-calc(12) !default;
|
||||
$off-canvas-label-font-weight: $font-weight-bold !default;
|
||||
$off-canvas-label-bg: $tuatara !default;
|
||||
$off-canvas-label-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%) !default;
|
||||
$off-canvas-label-border-bottom: none !default;
|
||||
$off-canvas-label-margin:0 !default;
|
||||
$off-canvas-link-padding: rem-calc(10, 15) !default;
|
||||
$off-canvas-link-color: rgba($white, 0.7) !default;
|
||||
$off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%) !default;
|
||||
$off-canvas-back-bg: #444 !default;
|
||||
$off-canvas-back-border-top: $off-canvas-label-border-top !default;
|
||||
$off-canvas-back-border-bottom: $off-canvas-label-border-bottom !default;
|
||||
$off-canvas-back-hover-bg: scale-color($off-canvas-back-bg, $lightness: -30%) !default;
|
||||
$off-canvas-back-hover-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%) !default;
|
||||
$off-canvas-back-hover-border-bottom: none !default;
|
||||
|
||||
// Off Canvas Menu Icon Variables
|
||||
$tabbar-menu-icon-color: $white !default;
|
||||
$tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%) !default;
|
||||
|
||||
$tabbar-menu-icon-text-indent: rem-calc(35) !default;
|
||||
$tabbar-menu-icon-width: $tabbar-icon-width !default;
|
||||
$tabbar-menu-icon-height: $tabbar-height !default;
|
||||
$tabbar-menu-icon-padding: 0 !default;
|
||||
|
||||
$tabbar-hamburger-icon-width: rem-calc(16) !default;
|
||||
$tabbar-hamburger-icon-left: false !default;
|
||||
$tabbar-hamburger-icon-top: false !default;
|
||||
$tabbar-hamburger-icon-thickness: 1px !default;
|
||||
$tabbar-hamburger-icon-gap: 6px !default;
|
||||
|
||||
// Off Canvas Back-Link Overlay
|
||||
$off-canvas-overlay-transition: background 300ms ease !default;
|
||||
$off-canvas-overlay-cursor: pointer !default;
|
||||
$off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, 0.5), 4px 0 4px rgba($black, 0.5) !default;
|
||||
$off-canvas-overlay-background: rgba($white, 0.2) !default;
|
||||
$off-canvas-overlay-background-hover: rgba($white, 0.05) !default;
|
||||
|
||||
// Transition Variables
|
||||
$menu-slide: "transform 500ms ease" !default;
|
||||
|
||||
|
||||
// MIXINS
|
||||
// Remove transition flicker on phones
|
||||
@mixin kill-flicker {
|
||||
// -webkit-transform: translateZ(0x);
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
// Basic properties for the content wraps
|
||||
@mixin wrap-base {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@mixin translate3d($tx,$ty,$tz) {
|
||||
-ms-transform: translate($tx,$ty);
|
||||
-webkit-transform: translate3d($tx,$ty,$tz);
|
||||
-moz-transform: translate3d($tx,$ty,$tz);
|
||||
-ms-transform: translate3d($tx,$ty,$tz);
|
||||
-o-transform: translate3d($tx,$ty,$tz);
|
||||
transform: translate3d($tx,$ty,$tz)
|
||||
}
|
||||
|
||||
// basic styles for off-canvas menu container
|
||||
@mixin off-canvas-menu($position) {
|
||||
@include kill-flicker;
|
||||
* { @include kill-flicker; }
|
||||
width: $off-canvas-width;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background: $off-canvas-bg;
|
||||
z-index: 1001;
|
||||
box-sizing: content-box;
|
||||
transition: transform 500ms ease 0s;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
|
||||
@if $position == left {
|
||||
@include translate3d(-100%,0,0);
|
||||
left: 0;
|
||||
}
|
||||
@if $position == right {
|
||||
@include translate3d(100%,0,0);
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// OFF CANVAS WRAP
|
||||
// Wrap visible content and prevent scroll bars
|
||||
@mixin off-canvas-wrap {
|
||||
@include kill-flicker;
|
||||
@include wrap-base;
|
||||
overflow: hidden;
|
||||
&.move-right,
|
||||
&.move-left { min-height: 100%; -webkit-overflow-scrolling: touch; }
|
||||
}
|
||||
|
||||
// INNER WRAP
|
||||
// Main content area that moves to reveal the off-canvas nav
|
||||
@mixin inner-wrap {
|
||||
// @include kill-flicker;
|
||||
// removed for now till chrome fixes backface issue
|
||||
@include wrap-base;
|
||||
@include clearfix;
|
||||
-webkit-transition: -webkit-#{$menu-slide};
|
||||
-moz-transition: -moz-#{$menu-slide};
|
||||
-ms-transition: -ms-#{$menu-slide};
|
||||
-o-transition: -o-#{$menu-slide};
|
||||
transition: #{$menu-slide};
|
||||
}
|
||||
|
||||
// TAB BAR
|
||||
// This is the tab bar base
|
||||
@mixin tab-bar-base {
|
||||
@include kill-flicker;
|
||||
|
||||
// base styles
|
||||
background: $tabbar-bg;
|
||||
color: $tabbar-color;
|
||||
height: $tabbar-height;
|
||||
line-height: $tabbar-line-height;
|
||||
|
||||
// make sure it's below the .exit-off-canvas link
|
||||
position: relative;
|
||||
// z-index: 999;
|
||||
|
||||
// Typography
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
color: $tabbar-header-color;
|
||||
font-weight: $tabbar-header-weight;
|
||||
line-height: $tabbar-header-line-height;
|
||||
margin: $tabbar-header-margin;
|
||||
}
|
||||
h1,h2,h3,h4 { font-size: $h5-font-size; }
|
||||
}
|
||||
|
||||
// SMALL SECTIONS
|
||||
// These are small sections on the left and right that contain the off-canvas toggle buttons;
|
||||
@mixin tabbar-small-section($position) {
|
||||
width: $tabbar-icon-width;
|
||||
height: $tabbar-height;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@if $position == left {
|
||||
border-right: $tabbar-left-section-border;
|
||||
// box-shadow: 1px 0 0 scale-color($tabbar-bg, $lightness: 13%);
|
||||
left: 0;
|
||||
}
|
||||
@if $position == right {
|
||||
border-left: $tabbar-right-section-border;
|
||||
// box-shadow: -1px 0 0 scale-color($tabbar-bg, $lightness: -50%);
|
||||
right:0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin tab-bar-section {
|
||||
padding: $tabbar-middle-padding;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
height: $tabbar-height;
|
||||
top: 0;
|
||||
@media #{$medium-up} {
|
||||
&.left { text-align: left; }
|
||||
&.right { text-align: right; }
|
||||
}
|
||||
|
||||
// still need to make these non-presentational
|
||||
&.left {
|
||||
left: 0;
|
||||
right: $tabbar-icon-width;
|
||||
}
|
||||
&.right {
|
||||
left: $tabbar-icon-width;
|
||||
right: 0;
|
||||
}
|
||||
&.middle {
|
||||
left: $tabbar-icon-width;
|
||||
right: $tabbar-icon-width;
|
||||
}
|
||||
}
|
||||
|
||||
// OFF CANVAS LIST
|
||||
// This is the list of links in the off-canvas menu
|
||||
@mixin off-canvas-list {
|
||||
list-style-type: none;
|
||||
padding:0;
|
||||
margin:0;
|
||||
|
||||
li {
|
||||
label {
|
||||
display: block;
|
||||
padding: $off-canvas-label-padding;
|
||||
color: $off-canvas-label-color;
|
||||
text-transform: $off-canvas-label-text-transform;
|
||||
font-size: $off-canvas-label-font-size;
|
||||
font-weight: $off-canvas-label-font-weight;
|
||||
background: $off-canvas-label-bg;
|
||||
border-top: $off-canvas-label-border-top;
|
||||
border-bottom: $off-canvas-label-border-bottom;
|
||||
margin: $off-canvas-label-margin;
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
padding: $off-canvas-link-padding;
|
||||
color: $off-canvas-link-color;
|
||||
border-bottom: $off-canvas-link-border-bottom;
|
||||
transition: background 300ms ease;
|
||||
&:hover {
|
||||
background: $off-canvas-bg-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// BACK LINK
|
||||
// This is an overlay that, when clicked, will toggle off the off canvas menu
|
||||
@mixin back-link {
|
||||
@include kill-flicker;
|
||||
|
||||
transition: $off-canvas-overlay-transition;
|
||||
cursor: $off-canvas-overlay-cursor;
|
||||
box-shadow: $off-canvas-overlay-box-shadow;
|
||||
|
||||
// fill the screen
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: $off-canvas-overlay-background;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left:0;
|
||||
right:0;
|
||||
z-index: 1002;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
|
||||
@media #{$medium-up} {
|
||||
&:hover {
|
||||
background: $off-canvas-overlay-background-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// DEFAULT CLASSES
|
||||
//
|
||||
@include exports("offcanvas") {
|
||||
@if $include-html-off-canvas-classes {
|
||||
|
||||
.off-canvas-wrap { @include off-canvas-wrap; }
|
||||
.inner-wrap { @include inner-wrap; }
|
||||
|
||||
.tab-bar { @include tab-bar-base; }
|
||||
|
||||
.left-small { @include tabbar-small-section($position: left); }
|
||||
.right-small { @include tabbar-small-section($position: right); }
|
||||
|
||||
.tab-bar-section { @include tab-bar-section; }
|
||||
|
||||
// MENU BUTTON
|
||||
// This is a little bonus. You don't need it for off canvas to work. Mixins to be written in the future.
|
||||
.tab-bar .menu-icon {
|
||||
text-indent: $tabbar-menu-icon-text-indent;
|
||||
width: $tabbar-menu-icon-width;
|
||||
height: $tabbar-menu-icon-height;
|
||||
display: block;
|
||||
padding: $tabbar-menu-icon-padding;
|
||||
color: $tabbar-menu-icon-color;
|
||||
position: relative;
|
||||
transform: translate3d(0,0,0);
|
||||
|
||||
// @include for the hamburger menu-icon
|
||||
//
|
||||
// Arguments as follows: ($width, $left, $top, $thickness, $gap, $color, $hover-color)
|
||||
// $width - Width of hamburger icon in rem Default: $tabbar-hamburger-icon-width.
|
||||
// $left - If false, icon will be centered horizontally || explicitly set value in rem Default: $tabbar-hamburger-icon-left= False
|
||||
// $top - If false, icon will be centered vertically || explicitly set value in rem Default: = False
|
||||
// $thickness - thickness of lines in hamburger icon, set value in px Default: $tabbar-hamburger-icon-thickness = 1px
|
||||
// $gap - spacing between the lines in hamburger icon, set value in px Default: $tabbar-hamburger-icon-gap = 6px
|
||||
// $color - icon color Default: $tabbar-menu-icon-color
|
||||
// $hover-color - icon color when hovered Default: $tabbar-menu-icon-hover
|
||||
// $offcanvas - Set to true
|
||||
@include hamburger($tabbar-hamburger-icon-width, $tabbar-hamburger-icon-left, $tabbar-hamburger-icon-top, $tabbar-hamburger-icon-thickness, $tabbar-hamburger-icon-gap, $tabbar-menu-icon-color, $tabbar-menu-icon-hover, true)
|
||||
}
|
||||
|
||||
.left-off-canvas-menu { @include off-canvas-menu($position: left); }
|
||||
.right-off-canvas-menu { @include off-canvas-menu($position: right); }
|
||||
|
||||
ul.off-canvas-list { @include off-canvas-list; }
|
||||
|
||||
|
||||
// ANIMATION CLASSES
|
||||
// These classes are added with JS and trigger the actual animation.
|
||||
.move-right {
|
||||
> .inner-wrap {
|
||||
@include translate3d($off-canvas-width,0,0);
|
||||
}
|
||||
.exit-off-canvas { @include back-link;}
|
||||
}
|
||||
|
||||
.move-left {
|
||||
> .inner-wrap {
|
||||
@include translate3d(-($off-canvas-width),0,0);
|
||||
|
||||
}
|
||||
.exit-off-canvas { @include back-link; }
|
||||
}
|
||||
.offcanvas-overlap {
|
||||
.left-off-canvas-menu, .right-off-canvas-menu {
|
||||
-ms-transform: none;
|
||||
-webkit-transform: none;
|
||||
-moz-transform: none;
|
||||
-o-transform: none;
|
||||
transform: none;
|
||||
z-index: 1003;
|
||||
}
|
||||
.exit-off-canvas { @include back-link; }
|
||||
}
|
||||
.offcanvas-overlap-left {
|
||||
.right-off-canvas-menu {
|
||||
-ms-transform: none;
|
||||
-webkit-transform: none;
|
||||
-moz-transform: none;
|
||||
-o-transform: none;
|
||||
transform: none;
|
||||
z-index: 1003;
|
||||
}
|
||||
.exit-off-canvas { @include back-link; }
|
||||
}
|
||||
.offcanvas-overlap-right {
|
||||
.left-off-canvas-menu {
|
||||
-ms-transform: none;
|
||||
-webkit-transform: none;
|
||||
-moz-transform: none;
|
||||
-o-transform: none;
|
||||
transform: none;
|
||||
z-index: 1003;
|
||||
}
|
||||
.exit-off-canvas { @include back-link; }
|
||||
}
|
||||
|
||||
// Older browsers
|
||||
.no-csstransforms {
|
||||
.left-off-canvas-menu { left: -($off-canvas-width); }
|
||||
.right-off-canvas-menu { right: -($off-canvas-width); }
|
||||
|
||||
.move-left > .inner-wrap { right: $off-canvas-width; }
|
||||
.move-right > .inner-wrap { left: $off-canvas-width; }
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Off-Canvas Submenu Classes
|
||||
//
|
||||
@mixin off-canvas-submenu($position) {
|
||||
@include kill-flicker;
|
||||
* { @include kill-flicker; }
|
||||
width: $off-canvas-width;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
background: $off-canvas-bg;
|
||||
z-index: 1002;
|
||||
box-sizing: content-box;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
@if $position == left {
|
||||
@include translate3d(-100%,0,0);
|
||||
left: 0;
|
||||
}
|
||||
@if $position == right {
|
||||
@include translate3d(100%,0,0);
|
||||
right: 0;
|
||||
}
|
||||
-webkit-transition: -webkit-#{$menu-slide};
|
||||
-moz-transition: -moz-#{$menu-slide};
|
||||
-ms-transition: -ms-#{$menu-slide};
|
||||
-o-transition: -o-#{$menu-slide};
|
||||
transition: #{$menu-slide};
|
||||
|
||||
//back button style like label
|
||||
.back > a {
|
||||
padding: $off-canvas-label-padding;
|
||||
color: $off-canvas-label-color;
|
||||
text-transform: $off-canvas-label-text-transform;
|
||||
font-weight: $off-canvas-label-font-weight;
|
||||
background: $off-canvas-back-bg;
|
||||
border-top: $off-canvas-back-border-top;
|
||||
border-bottom: $off-canvas-back-border-bottom;
|
||||
&:hover {
|
||||
background: $off-canvas-back-hover-bg;
|
||||
border-top: $off-canvas-back-hover-border-top;
|
||||
border-bottom: $off-canvas-back-hover-border-bottom;
|
||||
}
|
||||
margin: $off-canvas-label-margin;
|
||||
@if $position == right {
|
||||
@if $text-direction == rtl {
|
||||
&:before {
|
||||
@include icon-double-arrows($position: left);
|
||||
}
|
||||
} @else {
|
||||
&:after {
|
||||
@include icon-double-arrows($position: right);
|
||||
}
|
||||
}
|
||||
}
|
||||
@if $position == left {
|
||||
@if $text-direction == rtl {
|
||||
&:after {
|
||||
@include icon-double-arrows($position: right);
|
||||
}
|
||||
} @else {
|
||||
&:before {
|
||||
@include icon-double-arrows($position: left);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//Left double angle quote or Right double angle quote chars
|
||||
@mixin icon-double-arrows ($position){
|
||||
@if $position == left {
|
||||
content: "\AB";
|
||||
@if $text-direction == rtl {
|
||||
margin-left: 0.5rem;
|
||||
} @else {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
@if $position == right {
|
||||
content: "\BB";
|
||||
@if $text-direction == rtl {
|
||||
margin-right: 0.5rem;
|
||||
} @else {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
}
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@if $include-html-off-canvas-classes {
|
||||
.left-submenu {
|
||||
@include off-canvas-submenu($position: left);
|
||||
&.move-right, &.offcanvas-overlap-right, &.offcanvas-overlap {
|
||||
@include translate3d(0%,0,0);
|
||||
}
|
||||
}
|
||||
|
||||
.right-submenu {
|
||||
@include off-canvas-submenu($position: right);
|
||||
&.move-left, &.offcanvas-overlap-left, &.offcanvas-overlap {
|
||||
@include translate3d(0%,0,0);
|
||||
}
|
||||
}
|
||||
|
||||
@if $text-direction == rtl {
|
||||
.left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before {
|
||||
@include icon-double-arrows($position: left);
|
||||
}
|
||||
.right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after {
|
||||
@include icon-double-arrows($position: right);
|
||||
}
|
||||
} @else {
|
||||
.left-off-canvas-menu ul.off-canvas-list li.has-submenu > a:after {
|
||||
@include icon-double-arrows($position: right);
|
||||
}
|
||||
.right-off-canvas-menu ul.off-canvas-list li.has-submenu > a:before {
|
||||
@include icon-double-arrows($position: left);
|
||||
}
|
||||
}
|
||||
}
|
||||
368
_sass/foundation-components/_orbit.scss
Normal file
368
_sass/foundation-components/_orbit.scss
Normal file
|
|
@ -0,0 +1,368 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
|
||||
// @variables
|
||||
//
|
||||
$include-html-orbit-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to control the caption styles
|
||||
$orbit-container-bg: none !default;
|
||||
$orbit-caption-bg: rgba(51,51,51, 0.8) !default;
|
||||
$orbit-caption-font-color: $white !default;
|
||||
$orbit-caption-font-size: rem-calc(14) !default;
|
||||
$orbit-caption-position: "bottom" !default; // Supported values: "bottom", "under"
|
||||
$orbit-caption-padding: rem-calc(10 14) !default;
|
||||
$orbit-caption-height: auto !default;
|
||||
|
||||
// We use these to control the left/right nav styles
|
||||
$orbit-nav-bg: transparent !default;
|
||||
$orbit-nav-bg-hover: rgba(0,0,0,0.3) !default;
|
||||
$orbit-nav-arrow-color: $white !default;
|
||||
$orbit-nav-arrow-color-hover: $white !default;
|
||||
|
||||
// We use these to control the timer styles
|
||||
$orbit-timer-bg: rgba(255,255,255,0.3) !default;
|
||||
$orbit-timer-show-progress-bar: true !default;
|
||||
|
||||
// We use these to control the bullet nav styles
|
||||
$orbit-bullet-nav-color: $iron !default;
|
||||
$orbit-bullet-nav-color-active: $aluminum !default;
|
||||
$orbit-bullet-radius: rem-calc(9) !default;
|
||||
|
||||
// We use these to controls the style of slide numbers
|
||||
$orbit-slide-number-bg: rgba(0,0,0,0) !default;
|
||||
$orbit-slide-number-font-color: $white !default;
|
||||
$orbit-slide-number-padding: rem-calc(5) !default;
|
||||
|
||||
// Graceful Loading Wrapper and preloader
|
||||
$wrapper-class: "slideshow-wrapper" !default;
|
||||
$preloader-class: "preloader" !default;
|
||||
|
||||
// Hide controls on small
|
||||
$orbit-nav-hide-for-small: true !default;
|
||||
$orbit-bullet-hide-for-small: true !default;
|
||||
$orbit-timer-hide-for-small: true !default;
|
||||
|
||||
|
||||
@include exports("orbit") {
|
||||
@if $include-html-orbit-classes {
|
||||
|
||||
@-webkit-keyframes rotate {
|
||||
from { -webkit-transform: rotate(0deg); }
|
||||
to { -webkit-transform: rotate(360deg); }
|
||||
}
|
||||
@-moz-keyframes rotate {
|
||||
from { -moz-transform: rotate(0deg); }
|
||||
to { -moz-transform: rotate(360deg); }
|
||||
}
|
||||
@-o-keyframes rotate {
|
||||
from { -o-transform: rotate(0deg); }
|
||||
to { -o-transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Orbit Graceful Loading */
|
||||
.#{$wrapper-class} {
|
||||
position: relative;
|
||||
|
||||
ul {
|
||||
// Prevent bullets showing before .orbit-container is loaded
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
|
||||
// Hide all list items
|
||||
li,
|
||||
li .orbit-caption { display: none; }
|
||||
|
||||
// ...except for the first one
|
||||
li:first-child { display: block; }
|
||||
}
|
||||
|
||||
.orbit-container { background-color: transparent;
|
||||
|
||||
// Show images when .orbit-container is loaded
|
||||
li { display: block;
|
||||
|
||||
.orbit-caption { display: block; }
|
||||
}
|
||||
.orbit-bullets li {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
// Orbit preloader
|
||||
.#{$preloader-class} {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -20px;
|
||||
margin-left: -20px;
|
||||
border: solid 3px;
|
||||
border-color: $charcoal $white;
|
||||
@include radius(1000px);
|
||||
animation-name: rotate;
|
||||
animation-duration: 1.5s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.orbit-container {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: $orbit-container-bg;
|
||||
|
||||
.orbit-slides-container {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
// Prevents images (and captions) from disappearing after first rotation on Chrome for Android
|
||||
-webkit-transform: translateZ(0);
|
||||
|
||||
img { display: block; max-width: 100%; }
|
||||
|
||||
&>* {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
@if $text-direction == rtl {
|
||||
margin-right: 100%;
|
||||
}
|
||||
@else {
|
||||
margin-left: 100%;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
@if $text-direction == rtl {
|
||||
margin-right: 0;
|
||||
}
|
||||
@else {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.orbit-caption {
|
||||
@if $orbit-caption-position == "bottom" {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
} @else if $orbit-caption-position == "under" {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
background-color: $orbit-caption-bg;
|
||||
color: $orbit-caption-font-color;
|
||||
width: 100%;
|
||||
padding: $orbit-caption-padding;
|
||||
font-size: $orbit-caption-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.orbit-slide-number {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
#{$default-float}: 10px;
|
||||
font-size: 12px;
|
||||
span { font-weight: 700; padding: $orbit-slide-number-padding;}
|
||||
color: $orbit-slide-number-font-color;
|
||||
background: $orbit-slide-number-bg;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.orbit-timer {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
#{$opposite-direction}: 10px;
|
||||
height: 6px;
|
||||
width: 100px;
|
||||
z-index: 10;
|
||||
.orbit-progress {
|
||||
@if $orbit-timer-show-progress-bar {
|
||||
height: 3px;
|
||||
background-color: $orbit-timer-bg;
|
||||
display: block;
|
||||
width: 0;
|
||||
position: relative;
|
||||
right: 20px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Play button
|
||||
& > span {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
#{$opposite-direction}: 0;
|
||||
width: 11px;
|
||||
height: 14px;
|
||||
border: solid 4px $white;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
// Pause button
|
||||
&.paused {
|
||||
& > span {
|
||||
#{$opposite-direction}: -4px;
|
||||
top: 0;
|
||||
width: 11px;
|
||||
height: 14px;
|
||||
border: inset 8px;
|
||||
border-left-style: solid;
|
||||
border-color: transparent;
|
||||
border-left-color: $white;
|
||||
&.dark {
|
||||
border-left-color: $oil;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&:hover .orbit-timer > span { display: block; }
|
||||
|
||||
// Let's get those controls to be right in the center on each side
|
||||
.orbit-prev,
|
||||
.orbit-next {
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
margin-top: -25px;
|
||||
width: 36px;
|
||||
height: 60px;
|
||||
line-height: 50px;
|
||||
color: white;
|
||||
background-color: $orbit-nav-bg;
|
||||
text-indent: -9999px !important;
|
||||
z-index: 10;
|
||||
|
||||
&:hover {
|
||||
background-color: $orbit-nav-bg-hover;
|
||||
}
|
||||
|
||||
& > span {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -10px;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: inset 10px;
|
||||
}
|
||||
}
|
||||
.orbit-prev { #{$default-float}: 0;
|
||||
& > span {
|
||||
border-#{$opposite-direction}-style: solid;
|
||||
border-color: transparent;
|
||||
border-#{$opposite-direction}-color: $orbit-nav-arrow-color;
|
||||
}
|
||||
&:hover > span {
|
||||
border-#{$opposite-direction}-color: $orbit-nav-arrow-color-hover;
|
||||
}
|
||||
}
|
||||
.orbit-next { #{$opposite-direction}: 0;
|
||||
& > span {
|
||||
border-color: transparent;
|
||||
border-#{$default-float}-style: solid;
|
||||
border-#{$default-float}-color: $orbit-nav-arrow-color;
|
||||
#{$default-float}: 50%;
|
||||
margin-#{$default-float}: -4px;
|
||||
}
|
||||
&:hover > span {
|
||||
border-#{$default-float}-color: $orbit-nav-arrow-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.orbit-bullets-container { text-align: center; }
|
||||
.orbit-bullets {
|
||||
margin: 0 auto 30px auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
top: 10px;
|
||||
float: none;
|
||||
text-align: center;
|
||||
display: block;
|
||||
|
||||
li {
|
||||
cursor:pointer;
|
||||
display: inline-block;
|
||||
width: $orbit-bullet-radius;
|
||||
height: $orbit-bullet-radius;
|
||||
background: $orbit-bullet-nav-color;
|
||||
// float: $default-float;
|
||||
float: none;
|
||||
margin-#{$opposite-direction}: 6px;
|
||||
@include radius(1000px);
|
||||
|
||||
&.active {
|
||||
background: $orbit-bullet-nav-color-active;
|
||||
}
|
||||
|
||||
&:last-child { margin-#{$opposite-direction}: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
.touch {
|
||||
.orbit-container {
|
||||
.orbit-prev,
|
||||
.orbit-next { display: none; }
|
||||
}
|
||||
|
||||
.orbit-bullets { display: none; }
|
||||
}
|
||||
|
||||
|
||||
@media #{$medium-up} {
|
||||
|
||||
.touch {
|
||||
.orbit-container {
|
||||
.orbit-prev,
|
||||
.orbit-next { display: inherit; }
|
||||
}
|
||||
|
||||
.orbit-bullets { display: block; }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media #{$small-only} {
|
||||
.orbit-stack-on-small {
|
||||
.orbit-slides-container {height: auto !important;}
|
||||
.orbit-slides-container > * {
|
||||
position: relative;
|
||||
margin:0 !important;
|
||||
opacity:1 !important;
|
||||
}
|
||||
|
||||
.orbit-slide-number {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@if $orbit-timer-hide-for-small {
|
||||
.orbit-timer{display: none;}
|
||||
}
|
||||
@if $orbit-nav-hide-for-small {
|
||||
.orbit-next,.orbit-prev{display: none;}
|
||||
}
|
||||
@if $orbit-bullet-hide-for-small {
|
||||
.orbit-bullets{display: none;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
162
_sass/foundation-components/_pagination.scss
Normal file
162
_sass/foundation-components/_pagination.scss
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
|
||||
//
|
||||
// @variables
|
||||
//
|
||||
$include-pagination-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to control the pagination container
|
||||
$pagination-height: rem-calc(24) !default;
|
||||
$pagination-margin: rem-calc(-5) !default;
|
||||
|
||||
// We use these to set the list-item properties
|
||||
$pagination-li-float: $default-float !default;
|
||||
$pagination-li-height: rem-calc(24) !default;
|
||||
$pagination-li-font-color: $jet !default;
|
||||
$pagination-li-font-size: rem-calc(14) !default;
|
||||
$pagination-li-margin: rem-calc(5) !default;
|
||||
|
||||
// We use these for the pagination anchor links
|
||||
$pagination-link-pad: rem-calc(1 10 1) !default;
|
||||
$pagination-link-font-color: $aluminum !default;
|
||||
$pagination-link-active-bg: scale-color($white, $lightness: -10%) !default;
|
||||
|
||||
// We use these for disabled anchor links
|
||||
$pagination-link-unavailable-cursor: default !default;
|
||||
$pagination-link-unavailable-font-color: $aluminum !default;
|
||||
$pagination-link-unavailable-bg-active: transparent !default;
|
||||
|
||||
// We use these for currently selected anchor links
|
||||
$pagination-link-current-background: $primary-color !default;
|
||||
$pagination-link-current-font-color: $white !default;
|
||||
$pagination-link-current-font-weight: $font-weight-bold !default;
|
||||
$pagination-link-current-cursor: default !default;
|
||||
$pagination-link-current-active-bg: $primary-color !default;
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// Style the pagination container. Currently only used when centering elements.
|
||||
// $center - Default: false, Options: true
|
||||
@mixin pagination-container($center:false) {
|
||||
@if $center { text-align: center; }
|
||||
}
|
||||
|
||||
// @mixins
|
||||
// Style unavailable list items
|
||||
@mixin pagination-unavailable-item {
|
||||
a, button {
|
||||
cursor: $pagination-link-unavailable-cursor;
|
||||
color: $pagination-link-unavailable-font-color;
|
||||
}
|
||||
&:hover a,
|
||||
& a:focus,
|
||||
|
||||
&:hover button,
|
||||
& button:focus
|
||||
{ background: $pagination-link-unavailable-bg-active; }
|
||||
}
|
||||
// @mixins
|
||||
// Style the current list item. Do not assume that the current item has
|
||||
// an anchor <a> element.
|
||||
// $has-anchor - Default: true, Options: false
|
||||
@mixin pagination-current-item($has-anchor: true) {
|
||||
@if $has-anchor {
|
||||
a, button {
|
||||
background: $pagination-link-current-background;
|
||||
color: $pagination-link-current-font-color;
|
||||
font-weight: $pagination-link-current-font-weight;
|
||||
cursor: $pagination-link-current-cursor;
|
||||
|
||||
&:hover,
|
||||
&:focus { background: $pagination-link-current-active-bg; }
|
||||
}
|
||||
} @else {
|
||||
height: auto;
|
||||
padding: $pagination-link-pad;
|
||||
background: $pagination-link-current-background;
|
||||
color: $pagination-link-current-font-color;
|
||||
font-weight: $pagination-link-current-font-weight;
|
||||
cursor: $pagination-link-current-cursor;
|
||||
@include radius;
|
||||
|
||||
&:hover,
|
||||
&:focus { background: $pagination-link-current-active-bg; }
|
||||
}
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this mixin to set the properties for the creating Foundation pagination
|
||||
// $center - Left or center align the li elements. Default: false
|
||||
// $base-style - Sets base styles for pagination. Default: true, Options: false
|
||||
// $use-default-classes - Makes unavailable & current classes available for use. Default: true
|
||||
@mixin pagination($center:false, $base-style:true, $use-default-classes:true) {
|
||||
|
||||
@if $base-style {
|
||||
display: block;
|
||||
min-height: $pagination-height;
|
||||
margin-#{$default-float}: $pagination-margin;
|
||||
|
||||
li {
|
||||
height: $pagination-li-height;
|
||||
color: $pagination-li-font-color;
|
||||
font-size: $pagination-li-font-size;
|
||||
margin-#{$default-float}: $pagination-li-margin;
|
||||
|
||||
a, button {
|
||||
display: block;
|
||||
padding: $pagination-link-pad;
|
||||
color: $pagination-link-font-color;
|
||||
background: none;
|
||||
@include radius;
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
line-height: inherit;
|
||||
@include single-transition(background-color);
|
||||
}
|
||||
|
||||
&:hover a,
|
||||
a:focus,
|
||||
&:hover button,
|
||||
button:focus
|
||||
{ background: $pagination-link-active-bg; }
|
||||
|
||||
@if $use-default-classes {
|
||||
&.unavailable { @include pagination-unavailable-item(); }
|
||||
&.current { @include pagination-current-item(); }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Left or center align the li elements
|
||||
li {
|
||||
@if $center {
|
||||
float: none;
|
||||
display: inline-block;
|
||||
} @else {
|
||||
float: $pagination-li-float;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("pagination") {
|
||||
@if $include-pagination-classes {
|
||||
ul.pagination {
|
||||
@include pagination;
|
||||
}
|
||||
|
||||
/* Pagination centred wrapper */
|
||||
.pagination-centered {
|
||||
@include pagination-container(true);
|
||||
|
||||
ul.pagination {
|
||||
@include pagination(true, false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
101
_sass/foundation-components/_panels.scss
Normal file
101
_sass/foundation-components/_panels.scss
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
|
||||
//
|
||||
// @variables
|
||||
//
|
||||
$include-html-panel-classes: $include-html-classes !default;
|
||||
|
||||
// We use these to control the background and border styles
|
||||
$panel-bg: scale-color($white, $lightness: -5%) !default;
|
||||
$panel-border-style: solid !default;
|
||||
$panel-border-size: 1px !default;
|
||||
|
||||
// We use this % to control how much we darken things on hover
|
||||
$panel-function-factor: -11% !default;
|
||||
$panel-border-color: scale-color($panel-bg, $lightness: $panel-function-factor) !default;
|
||||
|
||||
// We use these to set default inner padding and bottom margin
|
||||
$panel-margin-bottom: rem-calc(20) !default;
|
||||
$panel-padding: rem-calc(20) !default;
|
||||
|
||||
// We use these to set default font colors
|
||||
$panel-font-color: $oil !default;
|
||||
$panel-font-color-alt: $white !default;
|
||||
|
||||
$panel-header-adjust: true !default;
|
||||
$callout-panel-link-color: $primary-color !default;
|
||||
$callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightness: -14%) !default;
|
||||
//
|
||||
// @mixins
|
||||
//
|
||||
// We use this mixin to create panels.
|
||||
// $bg - Sets the panel background color. Default: $panel-pg || scale-color($white, $lightness: -5%) !default
|
||||
// $padding - Sets the panel padding amount. Default: $panel-padding || rem-calc(20)
|
||||
// $adjust - Sets the font color based on the darkness of the bg & resets header line-heights for panels. Default: $panel-header-adjust || true
|
||||
@mixin panel($bg:$panel-bg, $padding:$panel-padding, $adjust:$panel-header-adjust) {
|
||||
|
||||
@if $bg {
|
||||
$bg-lightness: lightness($bg);
|
||||
|
||||
border-style: $panel-border-style;
|
||||
border-width: $panel-border-size;
|
||||
border-color: scale-color($bg, $lightness: $panel-function-factor);
|
||||
margin-bottom: $panel-margin-bottom;
|
||||
padding: $padding;
|
||||
|
||||
background: $bg;
|
||||
@if $bg-lightness >= 50% { color: $panel-font-color; }
|
||||
@else { color: $panel-font-color-alt; }
|
||||
|
||||
// Respect the padding, fool.
|
||||
&>:first-child { margin-top: 0; }
|
||||
&>:last-child { margin-bottom: 0; }
|
||||
|
||||
@if $adjust {
|
||||
// We set the font color based on the darkness of the bg.
|
||||
@if $bg-lightness >= 50% {
|
||||
h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color; }
|
||||
}
|
||||
@else {
|
||||
h1,h2,h3,h4,h5,h6,p,li,dl { color: $panel-font-color-alt; }
|
||||
}
|
||||
|
||||
// reset header line-heights for panels
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
line-height: 1; margin-bottom: rem-calc(20) / 2;
|
||||
&.subheader { line-height: 1.4; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include exports("panel") {
|
||||
@if $include-html-panel-classes {
|
||||
|
||||
/* Panels */
|
||||
.panel { @include panel;
|
||||
|
||||
&.callout {
|
||||
@include panel(scale-color($primary-color, $lightness: 94%));
|
||||
a:not(.button) {
|
||||
color: $callout-panel-link-color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $callout-panel-link-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.radius {
|
||||
@include radius;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
150
_sass/foundation-components/_pricing-tables.scss
Normal file
150
_sass/foundation-components/_pricing-tables.scss
Normal file
|
|
@ -0,0 +1,150 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
|
||||
//
|
||||
// @variables
|
||||
//
|
||||
$include-html-pricing-classes: $include-html-classes !default;
|
||||
|
||||
// We use this to control the border color
|
||||
$price-table-border: solid 1px $gainsboro !default;
|
||||
|
||||
// We use this to control the bottom margin of the pricing table
|
||||
$price-table-margin-bottom: rem-calc(20) !default;
|
||||
|
||||
// We use these to control the title styles
|
||||
$price-title-bg: $oil !default;
|
||||
$price-title-padding: rem-calc(15 20) !default;
|
||||
$price-title-align: center !default;
|
||||
$price-title-color: $smoke !default;
|
||||
$price-title-weight: $font-weight-normal !default;
|
||||
$price-title-size: rem-calc(16) !default;
|
||||
$price-title-font-family: $body-font-family !default;
|
||||
|
||||
// We use these to control the price styles
|
||||
$price-money-bg: $vapor !default;
|
||||
$price-money-padding: rem-calc(15 20) !default;
|
||||
$price-money-align: center !default;
|
||||
$price-money-color: $oil !default;
|
||||
$price-money-weight: $font-weight-normal !default;
|
||||
$price-money-size: rem-calc(32) !default;
|
||||
$price-money-font-family: $body-font-family !default;
|
||||
|
||||
|
||||
// We use these to control the description styles
|
||||
$price-bg: $white !default;
|
||||
$price-desc-color: $monsoon !default;
|
||||
$price-desc-padding: rem-calc(15) !default;
|
||||
$price-desc-align: center !default;
|
||||
$price-desc-font-size: rem-calc(12) !default;
|
||||
$price-desc-weight: $font-weight-normal !default;
|
||||
$price-desc-line-height: 1.4 !default;
|
||||
$price-desc-bottom-border: dotted 1px $gainsboro !default;
|
||||
|
||||
// We use these to control the list item styles
|
||||
$price-item-color: $oil !default;
|
||||
$price-item-padding: rem-calc(15) !default;
|
||||
$price-item-align: center !default;
|
||||
$price-item-font-size: rem-calc(14) !default;
|
||||
$price-item-weight: $font-weight-normal !default;
|
||||
$price-item-bottom-border: dotted 1px $gainsboro !default;
|
||||
|
||||
// We use these to control the CTA area styles
|
||||
$price-cta-bg: $white !default;
|
||||
$price-cta-align: center !default;
|
||||
$price-cta-padding: rem-calc(20 20 0) !default;
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this to create the container element for the pricing tables
|
||||
@mixin pricing-table-container {
|
||||
border: $price-table-border;
|
||||
margin-#{$default-float}: 0;
|
||||
margin-bottom: $price-table-margin-bottom;
|
||||
|
||||
& * {
|
||||
list-style: none;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
// @mixins
|
||||
//
|
||||
// We use this mixin to create the pricing table title styles
|
||||
@mixin pricing-table-title {
|
||||
background-color: $price-title-bg;
|
||||
padding: $price-title-padding;
|
||||
text-align: $price-title-align;
|
||||
color: $price-title-color;
|
||||
font-weight: $price-title-weight;
|
||||
font-size: $price-title-size;
|
||||
font-family: $price-title-font-family;
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this mixin to control the pricing table price styles
|
||||
@mixin pricing-table-price {
|
||||
background-color: $price-money-bg;
|
||||
padding: $price-money-padding;
|
||||
text-align: $price-money-align;
|
||||
color: $price-money-color;
|
||||
font-weight: $price-money-weight;
|
||||
font-size: $price-money-size;
|
||||
font-family: $price-money-font-family;
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this mixin to create the description styles for the pricing table
|
||||
@mixin pricing-table-description {
|
||||
background-color: $price-bg;
|
||||
padding: $price-desc-padding;
|
||||
text-align: $price-desc-align;
|
||||
color: $price-desc-color;
|
||||
font-size: $price-desc-font-size;
|
||||
font-weight: $price-desc-weight;
|
||||
line-height: $price-desc-line-height;
|
||||
border-bottom: $price-desc-bottom-border;
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this mixin to style the bullet items in the pricing table
|
||||
@mixin pricing-table-bullet {
|
||||
background-color: $price-bg;
|
||||
padding: $price-item-padding;
|
||||
text-align: $price-item-align;
|
||||
color: $price-item-color;
|
||||
font-size: $price-item-font-size;
|
||||
font-weight: $price-item-weight;
|
||||
border-bottom: $price-item-bottom-border;
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this mixin to style the CTA area of the pricing tables
|
||||
@mixin pricing-table-cta {
|
||||
background-color: $price-cta-bg;
|
||||
text-align: $price-cta-align;
|
||||
padding: $price-cta-padding;
|
||||
}
|
||||
|
||||
@include exports("pricing-table") {
|
||||
@if $include-html-pricing-classes {
|
||||
|
||||
/* Pricing Tables */
|
||||
.pricing-table {
|
||||
@include pricing-table-container;
|
||||
|
||||
.title { @include pricing-table-title; }
|
||||
.price { @include pricing-table-price; }
|
||||
.description { @include pricing-table-description; }
|
||||
.bullet-item { @include pricing-table-bullet; }
|
||||
.cta-button { @include pricing-table-cta; }
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
79
_sass/foundation-components/_progress-bars.scss
Normal file
79
_sass/foundation-components/_progress-bars.scss
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
|
||||
//
|
||||
// @variables
|
||||
//
|
||||
$include-html-media-classes: $include-html-classes !default;
|
||||
|
||||
// We use this to set the progress bar height
|
||||
$progress-bar-height: rem-calc(25) !default;
|
||||
$progress-bar-color: $vapor !default;
|
||||
|
||||
// We use these to control the border styles
|
||||
$progress-bar-border-color: scale-color($white, $lightness: 20%) !default;
|
||||
$progress-bar-border-size: 1px !default;
|
||||
$progress-bar-border-style: solid !default;
|
||||
$progress-bar-border-radius: $global-radius !default;
|
||||
|
||||
// We use these to control the margin & padding
|
||||
$progress-bar-pad: rem-calc(2) !default;
|
||||
$progress-bar-margin-bottom: rem-calc(10) !default;
|
||||
|
||||
// We use these to set the meter colors
|
||||
$progress-meter-color: $primary-color !default;
|
||||
$progress-meter-secondary-color: $secondary-color !default;
|
||||
$progress-meter-success-color: $success-color !default;
|
||||
$progress-meter-alert-color: $alert-color !default;
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// We use this to set up the progress bar container
|
||||
@mixin progress-container {
|
||||
background-color: $progress-bar-color;
|
||||
height: $progress-bar-height;
|
||||
border: $progress-bar-border-size $progress-bar-border-style $progress-bar-border-color;
|
||||
padding: $progress-bar-pad;
|
||||
margin-bottom: $progress-bar-margin-bottom;
|
||||
}
|
||||
|
||||
// @mixins
|
||||
//
|
||||
// $bg - Default: $progress-meter-color || $primary-color
|
||||
@mixin progress-meter($bg:$progress-meter-color) {
|
||||
background: $bg;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@include exports("progress-bar") {
|
||||
@if $include-html-media-classes {
|
||||
|
||||
/* Progress Bar */
|
||||
.progress {
|
||||
@include progress-container;
|
||||
|
||||
// Meter
|
||||
.meter {
|
||||
@include progress-meter;
|
||||
}
|
||||
&.secondary .meter { @include progress-meter($bg:$progress-meter-secondary-color); }
|
||||
&.success .meter { @include progress-meter($bg:$progress-meter-success-color); }
|
||||
&.alert .meter { @include progress-meter($bg:$progress-meter-alert-color); }
|
||||
|
||||
&.radius { @include radius($progress-bar-border-radius);
|
||||
.meter { @include radius($progress-bar-border-radius - 1); }
|
||||
}
|
||||
|
||||
&.round { @include radius(1000px);
|
||||
.meter { @include radius(999px); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
168
_sass/foundation-components/_range-slider.scss
Normal file
168
_sass/foundation-components/_range-slider.scss
Normal file
|
|
@ -0,0 +1,168 @@
|
|||
// Foundation by ZURB
|
||||
// foundation.zurb.com
|
||||
// Licensed under MIT Open Source
|
||||
|
||||
@import "global";
|
||||
|
||||
//
|
||||
// @name _range-slider.scss
|
||||
// @dependencies _global.scss
|
||||
//
|
||||
|
||||
//
|
||||
// @variables
|
||||
//
|
||||
|
||||
$include-html-range-slider-classes: $include-html-classes !default;
|
||||
|
||||
// These variabels define the slider bar styles
|
||||
$range-slider-bar-width: 100% !default;
|
||||
$range-slider-bar-height: rem-calc(16) !default;
|
||||
|
||||
$range-slider-bar-border-width: 1px !default;
|
||||
$range-slider-bar-border-style: solid !default;
|
||||
$range-slider-bar-border-color: $gainsboro !default;
|
||||
$range-slider-radius: $global-radius !default;
|
||||
$range-slider-round: $global-rounded !default;
|
||||
$range-slider-bar-bg-color: $ghost !default;
|
||||
$range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%) !default;
|
||||
|
||||
// Vertical bar styles
|
||||
$range-slider-vertical-bar-width: rem-calc(16) !default;
|
||||
$range-slider-vertical-bar-height: rem-calc(200) !default;
|
||||
|
||||
// These variabels define the slider handle styles
|
||||
$range-slider-handle-width: rem-calc(32) !default;
|
||||
$range-slider-handle-height: rem-calc(22) !default;
|
||||
$range-slider-handle-position-top: rem-calc(-5) !default;
|
||||
$range-slider-handle-bg-color: $primary-color !default;
|
||||
$range-slider-handle-border-width: 1px !default;
|
||||
$range-slider-handle-border-style: solid !default;
|
||||
$range-slider-handle-border-color: none !default;
|
||||
$range-slider-handle-radius: $global-radius !default;
|
||||
$range-slider-handle-round: $global-rounded !default;
|
||||
$range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%) !default;
|
||||
$range-slider-handle-cursor: pointer !default;
|
||||
|
||||
$range-slider-disabled-opacity: 0.7 !default;
|
||||
|
||||
//
|
||||
// @mixins
|
||||
//
|
||||
|
||||
@mixin range-slider-bar-base($vertical: false) {
|
||||
display: block;
|
||||
position: relative;
|
||||
width: $range-slider-bar-width;
|
||||
height: $range-slider-bar-height;
|
||||
border: $range-slider-bar-border-width $range-slider-bar-border-style $range-slider-bar-border-color;
|
||||
margin: rem-calc(20 0);
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
@if $vertical == true {
|
||||
display: inline-block;
|
||||
width: $range-slider-vertical-bar-width;
|
||||
height: $range-slider-vertical-bar-height;
|
||||
}
|
||||
}
|
||||
@mixin range-slider-bar-style(
|
||||
$bg: true,
|
||||
$radius: false,
|
||||
$round: false,
|
||||
$disabled: false) {
|
||||
@if $bg == true { background: $range-slider-bar-bg-color; }
|
||||
@if $radius == true { @include radius($range-slider-radius); }
|
||||
@if $round == true { @include radius($range-slider-round); }
|
||||
@if $disabled == true {
|
||||
cursor: $cursor-default-value;
|
||||
opacity: $range-slider-disabled-opacity;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin range-slider-bar(
|
||||
$bg: $range-slider-bar-bg-color,
|
||||
$radius:false) {
|
||||
@include range-slider-bar-base;
|
||||
@include range-slider-bar-style;
|
||||
}
|
||||
|
||||
@mixin range-slider-handle-base() {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: $range-slider-handle-position-top;
|
||||
width: $range-slider-handle-width;
|
||||
height: $range-slider-handle-height;
|
||||
border: $range-slider-handle-border-width $range-slider-handle-border-style $range-slider-handle-border-color;
|
||||
cursor: $range-slider-handle-cursor;
|
||||
|
||||
// This removes the 300ms touch delay on Windows 8
|
||||
-ms-touch-action: manipulation;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
@mixin range-slider-handle-style(
|
||||
$bg: true,
|
||||
$radius: false,
|
||||
$round: false,
|
||||
$disabled: false) {
|
||||
@if $bg == true { background: $range-slider-handle-bg-color; }
|
||||
@if $radius == true { @include radius($range-slider-radius); }
|
||||
@if $round == true { @include radius($range-slider-round); }
|
||||
@if $disabled == true {
|
||||
cursor: $cursor-default-value;
|
||||
opacity: $range-slider-disabled-opacity;
|
||||
}
|
||||
&:hover {
|
||||
background: $range-slider-handle-bg-hover-color;
|
||||
}
|
||||
}
|
||||
@mixin range-slider-handle() {
|
||||
@include range-slider-handle-base;
|
||||
@include range-slider-handle-style;
|
||||
}
|
||||
|
||||
// CSS Generation
|
||||
@include exports("range-slider-bar") {
|
||||
@if $include-html-range-slider-classes {
|
||||
.range-slider {
|
||||
@include range-slider-bar-base;
|
||||
@include range-slider-bar-style($bg:true, $radius:false);
|
||||
&.vertical-range {
|
||||
@include range-slider-bar-base($vertical: true);
|
||||
.range-slider-handle {
|
||||
margin-top: 0;
|
||||
margin-#{$default-float}: -($range-slider-handle-width / 4);
|
||||
position: absolute;
|
||||
bottom: -($range-slider-vertical-bar-height - $range-slider-handle-width);
|
||||
}
|
||||
.range-slider-active-segment {
|
||||
width: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2));
|
||||
height: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
&.radius {
|
||||
@include range-slider-bar-style($radius:true);
|
||||
.range-slider-handle { @include range-slider-handle-style($radius: true); }
|
||||
}
|
||||
&.round {
|
||||
@include range-slider-bar-style($round:true);
|
||||
.range-slider-handle { @include range-slider-handle-style($round: true); }
|
||||
}
|
||||
&.disabled, &[disabled] {
|
||||
@include range-slider-bar-style($disabled:true);
|
||||
.range-slider-handle { @include range-slider-handle-style($disabled: true); }
|
||||
}
|
||||
}
|
||||
.range-slider-active-segment {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
height: $range-slider-bar-height - rem-calc((strip-unit($range-slider-bar-border-width) * 2));
|
||||
background: $range-slider-active-segment-bg-color;
|
||||
}
|
||||
.range-slider-handle {
|
||||
@include range-slider-handle-base;
|
||||
@include range-slider-handle-style($bg:true, $radius: false);
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show more
Reference in a new issue