diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 00000000000..fcab0b2569f --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,12 @@ +# These are supported funding model platforms + +custom: paypal.me/PhlowMedia +patreon: phlow +github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] +open_collective: # Replace with a single Open Collective username +ko_fi: # Replace with a single Ko-fi username +tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel +community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry +liberapay: # Replace with a single Liberapay username +issuehunt: # Replace with a single IssueHunt username +otechie: # Replace with a single Otechie username diff --git a/.gitignore b/.gitignore index 0c3e5abb0b8..4276cbb4a1e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,7 @@ -_site/ -.sass-cache/ +_site +.bundle +.DS_Store +.jekyll-cache +.jekyll-metadata +.sass-cache +Gemfile.lock diff --git a/.jekyll-metadata b/.jekyll-metadata deleted file mode 100644 index beefda1ae32..00000000000 Binary files a/.jekyll-metadata and /dev/null differ diff --git a/.ruby-version b/.ruby-version new file mode 100644 index 00000000000..818bd47abfc --- /dev/null +++ b/.ruby-version @@ -0,0 +1 @@ +3.0.6 diff --git a/Gemfile b/Gemfile index 4486bb9ea20..ed0956460e9 100644 --- a/Gemfile +++ b/Gemfile @@ -1,4 +1,13 @@ source 'https://rubygems.org' gem 'jekyll' -gem 'jekyll-paginate' \ No newline at end of file + +group :jekyll_plugins do + gem 'jekyll-gist' + gem 'jekyll-paginate' + gem "jekyll-asciidoc" +end + +gem 'asciidoctor', '~> 1.5.4' +gem 'coderay', '1.1.1' + diff --git a/Gemfile.lock b/Gemfile.lock index 3a82675224f..5d0732b30e2 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,38 +1,100 @@ GEM remote: https://rubygems.org/ specs: - colorator (0.1) - ffi (1.9.10) - jekyll (3.0.0) - colorator (~> 0.1) - jekyll-sass-converter (~> 1.0) - jekyll-watch (~> 1.1) - kramdown (~> 1.3) - liquid (~> 3.0) - mercenary (~> 0.3.3) - rouge (~> 1.7) + addressable (2.8.5) + public_suffix (>= 2.0.2, < 6.0) + asciidoctor (1.5.8) + coderay (1.1.1) + colorator (1.1.0) + concurrent-ruby (1.2.2) + em-websocket (0.5.3) + eventmachine (>= 0.12.9) + http_parser.rb (~> 0) + eventmachine (1.2.7) + faraday (2.7.10) + faraday-net_http (>= 2.0, < 3.1) + ruby2_keywords (>= 0.0.4) + faraday-net_http (3.0.2) + ffi (1.15.5) + forwardable-extended (2.6.0) + google-protobuf (3.23.4-arm64-darwin) + google-protobuf (3.23.4-x86_64-linux) + http_parser.rb (0.8.0) + i18n (1.14.1) + concurrent-ruby (~> 1.0) + jekyll (4.3.2) + addressable (~> 2.4) + colorator (~> 1.0) + em-websocket (~> 0.5) + i18n (~> 1.0) + jekyll-sass-converter (>= 2.0, < 4.0) + jekyll-watch (~> 2.0) + kramdown (~> 2.3, >= 2.3.1) + kramdown-parser-gfm (~> 1.0) + liquid (~> 4.0) + mercenary (>= 0.3.6, < 0.5) + pathutil (~> 0.9) + rouge (>= 3.0, < 5.0) safe_yaml (~> 1.0) + terminal-table (>= 1.8, < 4.0) + webrick (~> 1.7) + jekyll-asciidoc (3.0.0) + asciidoctor (>= 1.5.0) + jekyll (>= 3.0.0) + jekyll-gist (1.5.0) + octokit (~> 4.2) jekyll-paginate (1.1.0) - jekyll-sass-converter (1.3.0) - sass (~> 3.2) - jekyll-watch (1.3.0) + jekyll-sass-converter (3.0.0) + sass-embedded (~> 1.54) + jekyll-watch (2.2.1) listen (~> 3.0) - kramdown (1.9.0) - liquid (3.0.6) - listen (3.0.3) - rb-fsevent (>= 0.9.3) - rb-inotify (>= 0.9) - mercenary (0.3.5) - rb-fsevent (0.9.6) - rb-inotify (0.9.5) - ffi (>= 0.5.0) - rouge (1.10.1) - safe_yaml (1.0.4) - sass (3.4.19) + kramdown (2.4.0) + rexml + kramdown-parser-gfm (1.1.0) + kramdown (~> 2.0) + liquid (4.0.4) + listen (3.8.0) + rb-fsevent (~> 0.10, >= 0.10.3) + rb-inotify (~> 0.9, >= 0.9.10) + mercenary (0.4.0) + octokit (4.25.1) + faraday (>= 1, < 3) + sawyer (~> 0.9) + pathutil (0.16.2) + forwardable-extended (~> 2.6) + public_suffix (5.0.3) + rb-fsevent (0.11.2) + rb-inotify (0.10.1) + ffi (~> 1.0) + rexml (3.3.3) + strscan + rouge (4.1.3) + ruby2_keywords (0.0.5) + safe_yaml (1.0.5) + sass-embedded (1.64.2-arm64-darwin) + google-protobuf (~> 3.23) + sass-embedded (1.64.2-x86_64-linux-gnu) + google-protobuf (~> 3.23) + sawyer (0.9.2) + addressable (>= 2.3.5) + faraday (>= 0.17.3, < 3) + strscan (3.1.0) + terminal-table (3.0.2) + unicode-display_width (>= 1.1.1, < 3) + unicode-display_width (2.4.2) + webrick (1.8.1) PLATFORMS - ruby + arm64-darwin-22 + x86_64-linux DEPENDENCIES + asciidoctor (~> 1.5.4) + coderay (= 1.1.1) jekyll + jekyll-asciidoc + jekyll-gist jekyll-paginate + +BUNDLED WITH + 2.4.18 diff --git a/README.md b/README.md index 5dca78c75e8..95fba45685e 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,11 @@ -[![Flattr this git repo](http://api.flattr.com/button/flattr-badge-large.png)](https://flattr.com/submit/auto?user_id=Phlow&url=https://github.com/Phlow/feeling-responsive&title=Support%20Feeling%20Responsive%20Jekyll%20Theme&language=en_GB&tags=github,jekyll,theme,webdesign&category=software) - - -# Newsletter: Stay in Touch for Future Updates - -If you are a webdesigner interested in Jekyll, the static website generator, this little newsletter is for you. I share tutorials, clever code snippets and information about my own Jekyll Themes called [*Feeling Responsive*][7] and [*Simplicity*][8]. Please don't expect weekly emails :) - -[![Subscribe to Jekyll Newsletter](https://phlow.github.io/static/tinyletter_subscribe_button.png)](https://tinyletter.com/feeling-responsive) - - -[![Start Video](https://github.com/Phlow/feeling-responsive/blob/gh-pages/images/video-feeling-responsive-1280x720.jpg)](https://www.youtube.com/embed/3b5zCFSmVvU) +## You like and use this theme? Then support me. Just [paypal.me/PhlowMedia](https://www.paypal.me/PhlowMedia) :) ## A Responsive Jekyll Theme: *Feeling Responsive* -Do you want to get to know *Feeling Responsive*? Than check it out first and have a look on its home at . - -To get to know *Feeling Responsive* check out all the features explained in the [documentation][1]. - -And what license is *Feeling Responsive* released under? [This one][2]. - +Do you want to get to know *Feeling Responsive*? Have a look › . +Documentation & Features › [documentation][1]. +License › https://github.com/Phlow/feeling-responsive/blob/gh-pages/LICENSE ## Why use this theme? @@ -33,28 +20,6 @@ Feeling Responsive is heavily customizable. **[More ›][3]** - -## Changelog - -*Feeling Responsive* is in active development. Thank you to everyone who contributed, especially [Róbert Papp][5], [Alexandra von Criegern](https://github.com/plutonik-a) and [Juan Jose Amor Iglesias](https://github.com/jjamor). - -**[Read Changelog ›][6]** - - - -## Video Tutorial - -Click the image to [watch the YouTube-Video-Tutorial][4]. - -[![Start Video](https://github.com/Phlow/feeling-responsive/blob/gh-pages/images/video-feeling-responsive-tutorial-frontpage.jpg)](https://www.youtube.com/watch?v=rLS-BEvlEyY) - - - - - - - - [1]: http://phlow.github.io/feeling-responsive/documentation/ [2]: https://github.com/Phlow/feeling-responsive/blob/gh-pages/LICENSE [3]: http://phlow.github.io/feeling-responsive/info/ @@ -63,5 +28,3 @@ Click the image to [watch the YouTube-Video-Tutorial][4]. [6]: https://phlow.github.io/feeling-responsive/changelog/ [7]: http://phlow.github.io/feeling-responsive/ [8]: http://phlow.github.io/simplicity/ - [9]: # - [10]: # diff --git a/_config.yml b/_config.yml index bd2001cad5b..76d4eb9d206 100644 --- a/_config.yml +++ b/_config.yml @@ -8,15 +8,16 @@ # /____/ # # Title of your website -title: "Feeling Responsive" - +title: 'Feeling Responsive' # The slogan describes your website and is used on homepage in and other important places -slogan: "A Flexible Theme for Jekyll" - +slogan: 'A Flexible Theme for Jekyll' # The description is used on homepage and in the footer to quickly describe your website. Use a maximum of 150 characters for SEO-purposes. -description: "»Feeling Responsive« is a responsive theme for Jekyll based on the fabulous foundation framework with beautiful typography and a bright color palette." +description: '»Feeling Responsive« is a responsive theme for Jekyll based on the fabulous foundation framework with beautiful typography and a bright color palette.' + +# The credits show up in the includes/_footer.html – It would be nice of you to leave a link to Phlow or Feeling Responsive as a thank you :) +credits: '<p>Created with ♥ by <a href="http://phlow.de/">Phlow</a> with <a href="http://jekyllrb.com/" target="_blank">Jekyll</a> based on <a href="http://phlow.github.io/feeling-responsive/">Feeling Responsive</a>.</p>' # Main author of the website # See > authors.yml @@ -24,8 +25,8 @@ author: phlow # This URL is the main address for absolute links. Don't include a slash at the end. # -url: 'https://phlow.github.io/feeling-responsive' -baseurl: '' +url: 'https://phlow.github.io' +baseurl: '/feeling-responsive' # This is for the editing function in _/includes/improve_content # Leave it empty if your site is not on GitHub/GitHub Pages @@ -43,6 +44,12 @@ urlimg: 'https://phlow.github.io/feeling-responsive/images/' # Logo size is 600x80 pixels logo: "logo.png" +# Plugins +plugins: + - jekyll-asciidoc + - jekyll-gist + - jekyll-paginate + # ____ _ __ _ # / __ \____ _____ _(_)___ ____ _/ /_(_)___ ____ @@ -51,19 +58,16 @@ logo: "logo.png" # /_/ \__,_/\__, /_/_/ /_/\__,_/\__/_/\____/_/ /_/ # /____/ # -gems: [jekyll-paginate] paginate: 5 # Paginates all X entries paginate_path: "blog/page:num" # Pagination path › Important for blog page in /blog/ to work - - # Theme works best with Kramdown (using the table of contents function) -markdown: kramdown -permalink: /:categories/:title/ -highlight: rouge -excerpt_separator: "<!--more-->" -include: ['.htaccess'] +markdown : kramdown +permalink : /:categories/:title/ +highlight : rouge +excerpt_separator : "<!--more-->" +include : ['.htaccess'] # Exclude these files from your production _site exclude: - .sass-cache @@ -72,10 +76,11 @@ exclude: - LICENSE - README.md - INSTALL.md + - vendor # The language setting is used in /includes/header.html for html-settings -language: "en" +language: 'en' # Used › default.html front-matter and compress.html @@ -101,8 +106,8 @@ compress_html: defaults: - scope: - path: "" # an empty string here means all files in the project - type: "pages" + path: '' # an empty string here means all files in the project + type: 'pages' values: show_meta: false # Hide metadata for all pages # sidebar: # Possible values › left, right › by default there will be no sidebar @@ -110,8 +115,8 @@ defaults: author: phlow # Default author for pages - scope: - path: "" - type: "posts" + path: '' + type: 'posts' values: show_meta: true # Show metadata for all posts # sidebar: # Possible values › left, right › by default there will be no sidebar @@ -138,10 +143,10 @@ defaults: # ___/ / /___/ /_/ / # /____/_____/\____/ Verify Website to Webmaster Tools -google_author: "https://plus.google.com/u/0/118311555303973066167" -google_site_verification: "Vk0IOJ2jwG_qEoG7fuEXYqv0m2rLa8P778Fi_GrsgEQ" -bing_webmastertools_id: "0FB4C028ABCF07C908C54386ABD2D97F" -# alexa_verify_id: "" +google_site_verification : 'Vk0IOJ2jwG_qEoG7fuEXYqv0m2rLa8P778Fi_GrsgEQ' +bing_webmastertools_id : '0FB4C028ABCF07C908C54386ABD2D97F' +# yandex_site_verification : '' +# alexa_verify_id : '' @@ -152,18 +157,18 @@ bing_webmastertools_id: "0FB4C028ABCF07C908C54386ABD2D97F" # /_/ \__,_/ |___/_/\___/\____/_/ /_/____/ Favicon-Crap: Favicons, Chrome, Android & Apple Touch Buttons # More information » https://mathiasbynens.be/notes/touch-icons -favicon-32x32: "favicon-32x32.png" -touch-icon-192x192: "touch-icon-192x192.png" -apple-touch-icon-180x180-precomposed: "apple-touch-icon-180x180-precomposed.png" -apple-touch-icon-152x152-precomposed: "apple-touch-icon-152x152-precomposed.png" -apple-touch-icon-144x144-precomposed: "apple-touch-icon-144x144-precomposed.png" -apple-touch-icon-120x120-precomposed: "apple-touch-icon-120x120-precomposed.png" -apple-touch-icon-114x114-precomposed: "apple-touch-icon-114x114-precomposed.png" -apple-touch-icon-76x76-precomposed: "apple-touch-icon-76x76-precomposed.png" -apple-touch-icon-72x72-precomposed: "apple-touch-icon-72x72-precomposed.png" -apple-touch-icon-precomposed: "apple-touch-icon-precomposed.png" -msapplication_tileimage: "msapplication_tileimage.png" # Size 144x144 -msapplication_tilecolor: "#fabb00" +favicon-32x32 : 'favicon-32x32.png' +touch-icon-192x192 : 'touch-icon-192x192.png' +apple-touch-icon-180x180-precomposed : 'apple-touch-icon-180x180-precomposed.png' +apple-touch-icon-152x152-precomposed : 'apple-touch-icon-152x152-precomposed.png' +apple-touch-icon-144x144-precomposed : 'apple-touch-icon-144x144-precomposed.png' +apple-touch-icon-120x120-precomposed : 'apple-touch-icon-120x120-precomposed.png' +apple-touch-icon-114x114-precomposed : 'apple-touch-icon-114x114-precomposed.png' +apple-touch-icon-76x76-precomposed : 'apple-touch-icon-76x76-precomposed.png' +apple-touch-icon-72x72-precomposed : 'apple-touch-icon-72x72-precomposed.png' +apple-touch-icon-precomposed : 'apple-touch-icon-precomposed.png' +msapplication_tileimage : 'msapplication_tileimage.png' # Size 144x144 +msapplication_tilecolor : '#fabb00' # ______ __ __ @@ -172,13 +177,9 @@ msapplication_tilecolor: "#fabb00" # / __/ / /_/ / /__/ __/ /_/ / /_/ / /_/ / ,< # /_/ \__,_/\___/\___/_.___/\____/\____/_/|_| Facebook-Optimization › http://j.mp/fb_optimize -og_image: "http://images.phlow.de/phlow/phlow_de-logo-512x.png" -og_locale: "en_EN" -og_type: "website" -og_title: "Feeling Responsive – A Responsive Theme for Jekyll" -og_description: "Feeling Responsive is built on the fabulous Foundation Framework and comes with lots of features to show your content right." -# og_url: "" -# og_site_name: "" +og_image : 'http://images.phlow.de/phlow/phlow_de-logo-512x.png' +og_locale : 'en_EN' +og_type : 'website' # _____ _ __ __ ___ ___ @@ -190,6 +191,10 @@ og_description: "Feeling Responsive is built on the fabulous # Open _data/socialmedia.yml to adjust the left and right topbar navigation # +socialmedia: + twitter : phlow + facebook : phlow.media + # ____ _ # / __ \(_)________ ___ _______ @@ -200,7 +205,7 @@ og_description: "Feeling Responsive is built on the fabulous # # used in _includes/comments -disqus_shortname: feelingresponsive +# disqus_shortname: # _____ @@ -211,8 +216,8 @@ disqus_shortname: feelingresponsive # sass: - sass_dir: _sass - style: :compressed + sass_dir : _sass + style : :compressed # ___ __ __ _ @@ -224,7 +229,7 @@ sass: # # used in _includes/footer_scripts -google_analytics_tracking_id: UA-60112281-1 +# google_analytics_tracking_id: @@ -242,3 +247,26 @@ google_analytics_tracking_id: UA-60112281-1 # used in _includes/footer_scripts # tawkto_embed_uri: + + +# ___ _ __ __ +# / | __________(_)___/ /___ _____/ /_____ _____ +# / /| | / ___/ ___/ / __ / __ \/ ___/ __/ __ \/ ___/ +# / ___ |(__ ) /__/ / /_/ / /_/ / /__/ /_/ /_/ / / +# /_/ |_/____/\___/_/\__,_/\____/\___/\__/\____/_/ +# +# Asciidoctor is a fast text processor and publishing toolchain for converting +# AsciiDoc content to HTML5, DocBook 5 (or 4.5) and other formats. +# +# https://github.com/asciidoctor/jekyll-asciidoc +# https://github.com/asciidoctor +# +# + +asciidoctor-enabled: false +asciidoctor: + description: + attributes: + source-highlighter: coderay + coderay-css: style + icons: font diff --git a/_config_dev.yml b/_config_dev.yml index 7b23c13084c..e8d645bb32c 100644 --- a/_config_dev.yml +++ b/_config_dev.yml @@ -5,9 +5,13 @@ # # Start development with › $ jekyll serve --config _config.yml,_config_dev.yml -url: 'http://localhost:4000' -urlimg: 'http://localhost:4000/images/' -gems: [jekyll-paginate] +url: 'http://localhost:4000' +baseurl: '' +urlimg: 'http://localhost:4000/images/' + +# See › https://github.com/jekyll/jekyll-gist#disabling-noscript-support +gist: + noscript: false sass: # http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style @@ -16,7 +20,7 @@ sass: # trace_selectors: true # debug_info: true # FUTURE https://github.com/jekyll/jekyll-sass-converter/issues/12 - sourcemap: true + # sourcemap: true # Produces an error # Disable when not in production -google_analytics_tracking_id: +google_analytics_tracking_id: false diff --git a/_data/navigation.yml b/_data/navigation.yml index 0b75f6b1a18..749b176677d 100644 --- a/_data/navigation.yml +++ b/_data/navigation.yml @@ -13,7 +13,7 @@ - title: "Grid & Colors" url: "/design/grid/" - title: "Typography" - url: "/design/typography/" + url: "/design/typography/typography/" - title: "Page/Post" url: "/design/page/" - title: "Post-Left-Sidebar" diff --git a/_drafts/page_all_frontmatter.md b/_drafts/page_all_frontmatter.md index 2ef6801fcb1..4c6fc7f2123 100644 --- a/_drafts/page_all_frontmatter.md +++ b/_drafts/page_all_frontmatter.md @@ -30,11 +30,11 @@ image: caption: caption_url: style: # Adding additional CSS-styles to <head> -iframe: "" +iframe: '' video: - embedURL: "" - contentURL: "" - thumbnailUrl: "" + embedURL: '' + contentURL: '' + thumbnailUrl: '' # # Metainformation & Customization # diff --git a/_includes/_breadcrumb.html b/_includes/_breadcrumb.html index fc3074d57de..fde80a3a35a 100644 --- a/_includes/_breadcrumb.html +++ b/_includes/_breadcrumb.html @@ -1,17 +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"> - <a href="{{ site.url }}">{{ site.data.language.breadcrumb_start }}</a> + <a href="{{ site.url }}{{ site.baseurl }}">{{ site.data.language.breadcrumb_start }}</a> {% assign crumbs = page.url | split: '/' %} {% for crumb in crumbs offset: 1 %} {% if forloop.last %} <a class="current">{{ page.title }}</a> {% else %} - <a href="{{ site.url }}{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' }}{% endfor %}">{{ crumb | replace:'-',' ' }}</a> + <a href="{{ site.url }}{{ site.baseurl }}{% assign crumb_limit = forloop.index | plus: 1 %}{% for crumb in crumbs limit: crumb_limit %}{{ crumb | append: '/' }}{% endfor %}">{{ crumb | replace:'-',' ' }}</a> {% endif %} {% endfor %} </nav> diff --git a/_includes/_favicon.html b/_includes/_favicon.html index 0fcfe352b91..4161f8b36a8 100644 --- a/_includes/_favicon.html +++ b/_includes/_favicon.html @@ -1,77 +1,30 @@ {% 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 %} +{% comment %} Regular Old-Skool Favicon: {% endcomment %} + {% if site.favicon-32x32 %}<link rel="icon" sizes="32x32" href="{{ "/assets/img/" | absolute_url }}{{ site.favicon-32x32 }}">{% endif %} +{% comment %} For Chrome for Android: {% endcomment %} + {% if site.touch-icon-192x192 %}<link rel="icon" sizes="192x192" href="{{ "/assets/img/" | absolute_url }}{{ site.touch-icon-192x192 }}">{% endif %} +{% comment %} For iPhone 6 Plus with @3× display: {% endcomment %} + {% if site.apple-touch-icon-180x180-precomposed %}<link rel="apple-touch-icon-precomposed" sizes="180x180" href="{{ "/assets/img/" | absolute_url }}{{ site.apple-touch-icon-180x180-precomposed }}">{% endif %} +{% comment %} For iPad with @2× display running iOS ≥ 7: {% endcomment %} + {% if site.apple-touch-icon-152x152-precomposed %}<link rel="apple-touch-icon-precomposed" sizes="152x152" href="{{ "/assets/img/" | absolute_url }}{{ site.apple-touch-icon-152x152-precomposed }}">{% endif %} +{% comment %} For iPad with @2× display running iOS ≤ 6: {% endcomment %} + {% if site.apple-touch-icon-144x144-precomposed %}<link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ "/assets/img/" | absolute_url }}{{ site.apple-touch-icon-144x144-precomposed }}">{% endif %} +{% comment %} For iPhone with @2× display running iOS ≥ 7: {% endcomment %} + {% if site.apple-touch-icon-120x120-precomposed %}<link rel="apple-touch-icon-precomposed" sizes="120x120" href="{{ "/assets/img/" | absolute_url }}{{ site.apple-touch-icon-120x120-precomposed }}">{% endif %} +{% comment %} For iPhone with @2× display running iOS ≤ 6: {% endcomment %} + {% if site.apple-touch-icon-114x114-precomposed %}<link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{ "/assets/img/" | absolute_url }}{{ site.apple-touch-icon-114x114-precomposed }}">{% endif %} +{% comment %} For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7: {% endcomment %} + {% if site.apple-touch-icon-76x76-precomposed %} + <link rel="apple-touch-icon-precomposed" sizes="76x76" href="{{ "/assets/img/" | absolute_url }}{{ site.apple-touch-icon-76x76-precomposed }}">{% endif %} +{% comment %} For the iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6: {% endcomment %} + {% if site.apple-touch-icon-72x72-precomposed %}<link rel="apple-touch-icon-precomposed" sizes="72x72" href="{{ "/assets/img/" | absolute_url }}{{ site.apple-touch-icon-72x72-precomposed }}">{% endif %} +{% comment %} For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: {% endcomment %} + {% if site.apple-touch-icon-precomposed %}<link rel="apple-touch-icon-precomposed" href="{{ "/assets/img/" | absolute_url }}{{ site.apple-touch-icon-precomposed }}">{% comment %} 57×57px {% endcomment %} {% endif %} +{% comment %} Favicon for Windows 8 {% endcomment %} + {% if site.msapplication_tileimage %}<meta name="msapplication-TileImage" content="{{ "/assets/img/" | absolute_url }}{{ site.msapplication_tileimage }}">{% endif %} +{% comment %} Background Color for Tile for Windows 8 {% endcomment %} + {% if site.msapplication_tilecolor %}<meta name="msapplication-TileColor" content="{{ site.msapplication_tilecolor }}">{% endif %} diff --git a/_includes/_footer.html b/_includes/_footer.html index 3f6ed3a1902..c5676881eff 100755 --- a/_includes/_footer.html +++ b/_includes/_footer.html @@ -27,7 +27,7 @@ <h5 class="shadow-black">{{ service_item.menu_name }}</h5> <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.baseurl %}{% endif %} + {% if service_item.url contains 'http' %}{% assign domain = '' %}{% else %}{% capture domain %}{{ site.url }}{{ site.baseurl }}{% endcapture %}{% 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> @@ -45,7 +45,7 @@ <h5 class="shadow-black">{{ network_item.menu_name }}</h5> <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.baseurl %}{% endif %} + {% if network_item.url contains 'http' %}{% assign domain = '' %}{% else %}{% capture domain %}{{ site.url }}{{ site.baseurl }}{% endcapture %}{% 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> @@ -60,12 +60,7 @@ <h5 class="shadow-black">{{ network_item.menu_name }}</h5> <div id="subfooter"> <nav class="row"> <section id="subfooter-left" class="small-12 medium-6 columns credits"> - <p> - Created with ♥ - by <a href="{{ site.data.authors[site.author].uri }}">{{ site.data.authors[site.author].name | replace: ' ', ' ' }}</a> - with <a href="http://jekyllrb.com/" target="_blank">Jekyll</a> - based on <a href="http://phlow.github.io/feeling-responsive/">Feeling Responsive</a>. - </p> + {{ site.credits }} </section> <section id="subfooter-right" class="small-12 medium-6 columns"> diff --git a/_includes/_footer_scripts.html b/_includes/_footer_scripts.html index a82968b6717..b3a999595a8 100755 --- a/_includes/_footer_scripts.html +++ b/_includes/_footer_scripts.html @@ -17,20 +17,6 @@ -{% 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 %} - {% comment %} diff --git a/_includes/_frontpage-widget.html b/_includes/_frontpage-widget.html index 305c48a5b6d..1b5b76ea204 100644 --- a/_includes/_frontpage-widget.html +++ b/_includes/_frontpage-widget.html @@ -1,17 +1,29 @@ +{% comment %} +* +* First the include captures the url and image in a +* separate variable to make the code better readable. +* +* These variables are widget_url and widget_image +* +{% endcomment %} + +{% capture widget_url %}{% if include.widget.url == NULL %}{% elsif include.widget.url contains 'http' %}{{ include.widget.url }}{% else %}{{ site.url }}{{ site.baseurl }}{{ include.widget.url }}{% endif %}{% endcapture %} + +{% capture widget_image %}{% if include.widget.image contains 'http' %}{{ include.widget.image }}{% else %}{{ site.urlimg }}{{ include.widget.image }}{% endif %}{% endcapture %} + + <div class="medium-4 columns frontpage-widget"> - {% capture widget_url %}{% if include.widget.url contains 'http' %}{{ include.widget.url }}{% else %}{{ site.url }}{{ site.baseurl }}{{ include.widget.url }}{% endif %}{% endcapture %} - <a href="{{ widget_url }}"> - {% if include.widget.image %} - {%comment%}TODO lazy loading{%endcomment%} - {%comment%}<img class="lazy" data-src="{% if include.widget.image contains='http://' %}{{ include.widget.image }}{% else %}{{ site.urlimg }}{{ include.widget.image }}{% endif %}" width="100%" alt="" />{%endcomment%} - {%comment%}<noscript>{%endcomment%} - {% capture widget_image %}{% if include.widget.image contains 'http' %}{{ include.widget.image }}{% else %}{{ site.urlimg }}{{ site.baseurl }}{{ include.widget.image }}{% endif %}{% endcapture %} - <img src="{{widget_image}}" width="100%" alt="" /> - {%comment%}</noscript>{%endcomment%} - {% endif %} - {% if include.widget.video %}{{ include.widget.video }}{% endif %} - </a> + {% if include.widget.video %} + {{ include.widget.video }} + {% elsif widget_url == empty %} + {% if widget_image != empty %}<img src="{{ widget_image }}" alt="" />{% endif %} + {% else %} + <a href="{{ widget_url }}"> + {% if widget_image != empty %}<img src="{{ widget_image }}" alt="" />{% endif %} + </a> + {% endif %} <h2 class="font-size-h3 t10">{{ include.widget.title }}</h2> - <p>{{ include.widget.text }}</p> - <p><a class="button tiny radius" href="{% if include.widget.url contains 'http' %}{{ include.widget.url }}{% else %}{{ site.url }}{{ site.baseurl }}{{ include.widget.url }}{% endif %}">{{ site.data.language.more }}</a></p> + + {% if include.widget.text != empty %}<p>{{ include.widget.text }}</p>{% endif %} + {% if widget_url != empty %}<p><a class="button tiny radius" href="{{ widget_url }}">{{ site.data.language.more }}</a></p>{% endif %} </div> \ No newline at end of file diff --git a/_includes/_head.html b/_includes/_head.html index b2623ece33a..2a915ae9c61 100644 --- a/_includes/_head.html +++ b/_includes/_head.html @@ -1,8 +1,34 @@ - <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 %} - - +{% comment %} +# +# Liquid variables are created at the top to keep the source DRY and clean. +# Idea by ericcarlisle.com +# +# Variables › {{ url }} › site.url + site.baseurl +# Variables › {{ description }} › excerpt, page.meta_description, or site.description +# Variables › {{ title }} › page.title +# +{% endcomment %}{% capture ignore %} + +{% assign url = site.baseurl | prepend: site.url %} + +{% capture description %}{% if page.meta_description %}{{ page.meta_description }}{% elsif page.teaser %}{{ page.teaser }}{% elsif page.excerpt %}{{ page.excerpt }}{% elsif site.description %}{{ site.description }}{% endif %}{% endcapture %} +{% assign description = description | strip_html | escape | strip %} + +{% capture title %}{% if page.meta_title %}{{ page.meta_title}}{% elsif page.title %}{{ page.title }}{% else %}{{ site.title | strip_html | strip }}{% endif %}{% endcapture %} + +{% assign title = title | strip_html | escape | strip_newlines %} + +{% endcapture %} + + {{ title }} + + + + {% if site.asciidoctor-enabled == true %} + + {% endif %} + + - {% if site.google_site_verification %}{% endif %} - {% if site.bing_webmastertools_id %}{% endif %} - {% if page.meta_description %}{% elsif page.teaser %}{% elsif site.description %}{% endif %} - {% if site.google_author %}{% endif %} + + + {% if site.google_site_verification %}{% endif %} + {% if site.bing_webmastertools_id %}{% endif %} + {% if site.yandex_site_verification %}{% endif %} + {% if site.alexa_verify_id %}{% endif %} + {% if page.noindex == true or layout.noindex == true %}{% endif %} + - {% include _favicon.html %} - - - {% if site.og_type %}{% endif %} - - {% if page.meta_description %}{% elsif page.description %}{% elsif site.description %}{% endif %} - - {% if site.title %}{% endif %} - {% if page.image.thumb %}{% endif %} + + + + + + + + {% if page.image.title %}{% endif %} + {% if site.socialmedia.facebook %}{% endif %} - {% if site.alexa_verify_id %}{% endif %} - - {% if page.noindex == true %}{% endif %} + {% if site.socialmedia.twitter %} + + + + + + + {% if page.image.title %}{% endif %} + {% endif %} - + {% if page.mediaplayer == true %} - - + + {% endif %} + {% include _favicon.html %} + {% unless page.style == NULL %} {% endunless %} + + {% if site.google_analytics_tracking_id %} + + + + {% endif %} + diff --git a/_includes/_masthead.html b/_includes/_masthead.html index f64e3567402..18556227b3f 100644 --- a/_includes/_masthead.html +++ b/_includes/_masthead.html @@ -3,7 +3,7 @@
@@ -51,7 +51,7 @@
diff --git a/_includes/_meta_information.html b/_includes/_meta_information.html index be514bea40a..ee515ee8e71 100644 --- a/_includes/_meta_information.html +++ b/_includes/_meta_information.html @@ -9,23 +9,25 @@ {% endif %} {% if page.date %} - + {% endif %} - {% if page.categories %} {{ page.categories | join: ' · ' | upcase }}{% endif %} + {% if page.categories != empty %} {{ page.categories | join: ' · ' | upcase }}{% endif %}
{% for tag in page.tags %} {{tag}} {% endfor %}

+ {% if page.collection == "posts" %}
{% if page.previous.url %} - + {% endif %} - + {% if page.next.url %} - + {% else %} -
+
{% endif %}
-
\ No newline at end of file + {% endif %} +
diff --git a/_includes/_navigation.html b/_includes/_navigation.html index a44ea0d976d..a38cb00f6ae 100644 --- a/_includes/_navigation.html +++ b/_includes/_navigation.html @@ -1,47 +1,56 @@ +{% comment %} +* +* To customize the navigation of *Feeling Responsive*, +* edit `_data/navigation.yml`. +* +{% endcomment %} diff --git a/_includes/_pagination.html b/_includes/_pagination.html index c74982a099a..2a0128efdb9 100644 --- a/_includes/_pagination.html +++ b/_includes/_pagination.html @@ -10,14 +10,14 @@ {% for post in paginator.posts %}
-

{% if post.categories %}{{ post.categories | join: ' · ' }}{% endif %} – {% if post.subheadline %}{{ post.subheadline }}{% endif %}

-

{{ post.title }}

+

{{ post.categories | join: ' · ' | prepend: '' | append: '' }}{% if post.categories != empty and post.subheadline != NULL %} – {% endif %}{{ post.subheadline }}

+

{{ post.title }}

- {% if post.image.thumb %}{{ page.title escape_once }}{% endif %} + {% if post.image.thumb %}{{ page.title escape_once }}{% endif %} {% if post.meta_description %}{{ post.meta_description | strip_html | escape }}{% elsif post.teaser %}{{ post.teaser | strip_html | escape }}{% endif %} - {{ site.data.language.read_more }} + {{ site.data.language.read_more }}

@@ -27,16 +27,16 @@

{{ post.title }}

diff --git a/_includes/alert b/_includes/alert index 8dd6ea2ea85..0549e78d227 100644 --- a/_includes/alert +++ b/_includes/alert @@ -1,31 +1,31 @@ {% comment %} * -* This include lets you easily display an alert. To use this include no `.html` ending is necessary. +* This include lets you easily display an alert. To use this include no `.html` ending is necessary. * -* You can use the following kinds of alerts: +* You can use the following kinds of alerts: * -* - warning (foundation built-in) -* - info (foundation built-in) -* - success (foundation built-in) -* - alert (foundation built-in) -* - text (foundation built-in) -* - terminal (custom, see Alerts in _sass/_09_elements.scss) -* - ... (define your own: .alert-box. { @include alert-style();) +* - warning (foundation built-in) +* - info (foundation built-in) +* - success (foundation built-in) +* - alert (foundation built-in) +* - text (foundation built-in) +* - terminal (custom, see Alerts in _sass/_09_elements.scss) +* - ... (define your own: .alert-box. { @include alert-style();) * -* You can even use markdown and -tags inside the alert, but beware to use " and ' properly; for example: +* You can even use markdown and -tags inside the alert, but beware to use " and ' properly; for example: * -* {% include alert info='Show an info alert with outstanding information.' %} +* {% include alert info='Show an info alert with outstanding information.' %} * -* {% include alert info='Show an info alert with *outstanding* [information](#info).' %} +* {% include alert info='Show an info alert with *outstanding* [information](#info).' %} * -* {% include alert info='Show an info alert with *outstanding* information.' %} +* {% include alert info='Show an info alert with *outstanding* information.' %} * -* You can also call for additional classes to be put on the alert div: +* You can also call for additional classes to be put on the alert div: * -* {% include alert success="Yay! you did it!" classes='round' %} +* {% include alert success="Yay! you did it!" classes='round' %} * {% endcomment %} {% for entry in include %} {% if entry[0] == 'classes' %}{% continue %}{% endif %} -
{{ entry[1] | markdownify }}
+
{% if entry[0] contains 'terminal' %}{{ entry[1] }}{% else %}{{ entry[1] | markdownify }}{% endif %}
{% endfor %} diff --git a/_includes/gallery b/_includes/gallery index 2536c293e3d..9a9583ace6d 100644 --- a/_includes/gallery +++ b/_includes/gallery @@ -30,7 +30,7 @@ {% capture url %}{{ item.image_url }}{% endcapture %} {% assign split_url = url | split: '.' %} {% capture thumb_url %}{{split_url[0]}}-thumb.{{split_url[1]}}{% endcapture %} -
  • +
  • {{ item.caption }}
  • {% endfor %} -
    \ No newline at end of file +
    diff --git a/_includes/list-collection b/_includes/list-collection index 5316645126d..b0a26f1a73c 100644 --- a/_includes/list-collection +++ b/_includes/list-collection @@ -6,7 +6,7 @@ * If you set »published: false« in front matter of a collection page * the page gots filtered out via unless * -* Example: {% include list-collection ollection='wordpress' %} +* Example: {% include list-collection collection='wordpress' %} * {% endcomment %} diff --git a/_includes/list-posts b/_includes/list-posts index f2e76d00f47..aa9277aa001 100644 --- a/_includes/list-posts +++ b/_includes/list-posts @@ -1,23 +1,23 @@ {% comment %} -* +* * Possible parameter for this loop: -* +* * › entries * › offset * › category * › tag -* +* * Example for Category: {% include list-posts entries='3' offset='1' category='design' %} -* +* * Example for Tag: {% include list-posts 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 +* +* 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 -* +* 3. If a category/tag was given, assign category/tag to the variable category/tag › assign category = include.categories +* {% endcomment %} @@ -29,23 +29,23 @@ {% if category == NULL and tag == NULL %} {% for post in site.posts limit:include.entries offset:include.offset %} -
  • {% if post.subheadline %}{{ post.subheadline }} · {% endif %}{{ post.title }}
  • +
  • {% if post.subheadline %}{{ post.subheadline }} · {% endif %}{{ post.title }}
  • {% endfor %} -
  • {{ site.data.language.more }}
  • +
  • {{ site.data.language.more }}
  • {% elsif category %} - + {% for post in site.categories.[category] limit:include.entries offset:include.offset %} -
  • {% if post.subheadline %}{{ post.subheadline }} · {% endif %}{{ post.title }}
  • +
  • {% if post.subheadline %}{{ post.subheadline }} · {% endif %}{{ post.title }}
  • {% endfor %} -
  • {{ site.data.language.more }}
  • +
  • {{ site.data.language.more }}
  • {% elsif tag %} {% for post in site.tags.[tag] limit:include.entries %} -
  • {% if post.subheadline %}{{ post.subheadline }} · {% endif %}{{ post.title }}
  • +
  • {% if post.subheadline %}{{ post.subheadline }} · {% endif %}{{ post.title }}
  • {% endfor %} {% endif %} diff --git a/_includes/next-previous-post-in-category b/_includes/next-previous-post-in-category index 60ede72dbde..1dfa814701f 100644 --- a/_includes/next-previous-post-in-category +++ b/_includes/next-previous-post-in-category @@ -30,10 +30,10 @@ {% assign prev_post = post.url %} {% endif %} {% endfor %} -{% if next_post %} -{{ site.data.language.next_post_in }} {{ cat | upcase }} -{% endif %} {% if prev_post %} -{{ site.data.language.previous_post_in }} {{ cat | upcase }} +{{ site.data.language.previous_post_in }} {{ cat | upcase }} +{% endif %} +{% if next_post %} +{{ site.data.language.next_post_in }} {{ cat | upcase }} {% endif %} diff --git a/_layouts/compress.html b/_layouts/compress.html index 8e7b2bbfc3e..8248010b4a8 100644 --- a/_layouts/compress.html +++ b/_layouts/compress.html @@ -1,6 +1,6 @@ --- # Jekyll layout that compresses HTML -# v3.0.0 +# v3.0.2 # http://jch.penibelst.de/ # © 2014–2015 Anatol Broder # MIT License diff --git a/_layouts/default.html b/_layouts/default.html index 2db22b1e3fa..641198a7f7d 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -6,7 +6,7 @@ {% include _head.html %} - + {% unless page.skip_boilerplate %} {% include _navigation.html %} {% endunless %} diff --git a/_layouts/frontpage.html b/_layouts/frontpage.html index a9fa344fcd0..b23abb39fbb 100644 --- a/_layouts/frontpage.html +++ b/_layouts/frontpage.html @@ -16,17 +16,15 @@ * {% endcomment %}
    - {% if page.widget1.title %} + {% if page.widget1.image or page.widget1.video or page.widget1.title %} {% include _frontpage-widget.html widget=page.widget1 %} {% endif %} - - {% if page.widget2.title %} + {% if page.widget2.image or page.widget2.video or page.widget2.title %} {% include _frontpage-widget.html widget=page.widget2 %} {% endif %} - - {% if page.widget3.title %} + {% if page.widget3.image or page.widget3.video or page.widget3.title %} {% include _frontpage-widget.html widget=page.widget3 %} {% endif %}
    @@ -41,12 +39,12 @@ {% if page.callforaction.url contains 'http' %} {% assign url = '' %} {% else %} -{% assign url = site.url %} +{% capture url %}{{ site.url }}{{ site.baseurl }}{% endcapture %} {% endif %} {% if page.callforaction %} {% endif %} @@ -65,10 +63,10 @@ {% for post in site.posts limit:1 %} {% if post.image.homepage %}

    - {{ page.title escape_once }} + {{ page.title | escape_once }}

    - {% if post.image.caption_url && post.image.caption %} + {% if post.image.caption_url and post.image.caption %}

    {{ post.image.caption }}

    @@ -88,7 +86,7 @@

    {{ site.data.language.new_blog_entries }}

    {{ post.title }}

    {% if post.meta_description %}{{ post.meta_description | strip_html | escape }}{% else post.teaser %}{{ post.teaser | strip_html | escape }}{% endif %} - {{ site.data.language.read_more }} + {{ site.data.language.read_more }}

    {% endfor %} diff --git a/_layouts/page-fullwidth.html b/_layouts/page-fullwidth.html index b757b57ea36..666e96d22a2 100644 --- a/_layouts/page-fullwidth.html +++ b/_layouts/page-fullwidth.html @@ -5,8 +5,8 @@ {% if page.image.title %}
    - {{ page.title escape_once }} - {% if page.image.caption_url && page.image.caption %} + {{ page.title | escape_once }} + {% if page.image.caption_url and page.image.caption %}

    {{ page.image.caption }}

    diff --git a/_layouts/page.html b/_layouts/page.html index a8b1ddf237f..f9fba5c4f46 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -8,9 +8,9 @@
    {% if page.image.title %}
    - {{ page.title escape_once }} + {{ page.title | escape_once }} - {% if page.image.caption_url && page.image.caption %} + {% if page.image.caption_url and page.image.caption %}
    {{ page.image.caption }}
    diff --git a/_layouts/redirect.html b/_layouts/redirect.html index be24769123e..b81e581a25c 100644 --- a/_layouts/redirect.html +++ b/_layouts/redirect.html @@ -18,7 +18,7 @@

    Redirecting...

    - {{ site.data.language.if_you_are_not_redirected_automatically }} {{ site.data.language.click_here }}. + {{ site.data.language.if_you_are_not_redirected_automatically }} {{ site.data.language.click_here }}. diff --git a/_posts/design/2014-09-10-portfolio.md b/_posts/design/2014-09-10-portfolio.md index f664bf44fae..b009360085a 100755 --- a/_posts/design/2014-09-10-portfolio.md +++ b/_posts/design/2014-09-10-portfolio.md @@ -10,31 +10,31 @@ categories:
    - -

    Website: Nixdorf Internatsberatung & Schulberatung

    + +

    Website: Grafik Design Jeannette Corneille

    - -

    Website: Grafik Design Jeannette Corneille

    + +

    Website: Phlow.de

    diff --git a/_posts/design/2014-09-15-gallery.md b/_posts/design/2014-09-15-gallery.md index cf9ce507c3f..fd218ca2558 100755 --- a/_posts/design/2014-09-15-gallery.md +++ b/_posts/design/2014-09-15-gallery.md @@ -87,5 +87,5 @@ Add the include whereever you want in your content with `{% raw %}{% include gal [1]: http://foundation.zurb.com/docs/components/clearing.html [2]: http://foundation.zurb.com/docs/components/block_grid.html - [3]: {{ site.url }}/design/page/ - [4]: {{ site.url }}/design/page-fullwidth/ + [3]: {{ site.url }}{{ site.baseurl }}/design/page/ + [4]: {{ site.url }}{{ site.baseurl }}/design/page-fullwidth/ diff --git a/_posts/design/2014-10-08-header-image-pattern.md b/_posts/design/2014-10-08-header-image-pattern.md index 9276f69cee1..fadaea00039 100755 --- a/_posts/design/2014-10-08-header-image-pattern.md +++ b/_posts/design/2014-10-08-header-image-pattern.md @@ -15,7 +15,7 @@ header: caption: This is a caption for the header image with link caption_url: https://unsplash.com/ --- -It's so easy to do. Just define in front matter an image and a pattern image. Instead of a pattern you can also use a color. Have a look at the [example with a background color]({{ site.url }}/design/header-image-color/). +It's so easy to do. Just define in front matter an image and a pattern image. Instead of a pattern you can also use a color. Have a look at the [example with a background color]({{ site.url }}{{ site.baseurl }}/design/header-image-color/). ## Front Matter Code diff --git a/_posts/design/2014-10-09-header-image-color.md b/_posts/design/2014-10-09-header-image-color.md index ae2c6da4b27..9fd516f0e21 100755 --- a/_posts/design/2014-10-09-header-image-color.md +++ b/_posts/design/2014-10-09-header-image-color.md @@ -15,7 +15,7 @@ header: caption: This is a caption for the header image with link caption_url: https://unsplash.com/ --- -It's so easy to do. Just define in front matter an image and a background color. Instead of a color you can also use a pattern image. Have a look at the [example with a background pattern]({{ site.url }}/design/header-image-pattern/). +It's so easy to do. Just define in front matter an image and a background color. Instead of a color you can also use a pattern image. Have a look at the [example with a background pattern]({{ site.url }}{{ site.baseurl }}/design/header-image-pattern/). diff --git a/_posts/design/2015-08-16-typography.md b/_posts/design/2015-08-16-typography.md index 6c00a6f66c1..545205b1710 100755 --- a/_posts/design/2015-08-16-typography.md +++ b/_posts/design/2015-08-16-typography.md @@ -16,6 +16,7 @@ image: caption_url: "http://www.aisleone.net/" categories: - design + - typography --- @@ -29,8 +30,6 @@ categories:
    - -
    ## Lato – A Sans Serif Typeface Family @@ -280,18 +279,13 @@ Need a break? I give you three!


    If you need footnotes for your posts, articles and entries, the Kramdown-Parser [^1] got you covered. How to use footnotes? Read this footnote. [^2] - - [1]: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list [2]: http://phlow.de/ [3]: http://en.wikipedia.org/wiki/Ed_Benguiat [4]: https://www.google.com/fonts/specimen/Lato [5]: https://www.google.com/fonts/specimen/Volkhov [6]: http://www.latofonts.com/ - [7]: http://modularscale.com/ - [8]: # - [9]: # - [10]: # + [7]: https://www.modularscale.com/ [^1]: Find out more about Kramdown on @@ -317,9 +311,9 @@ Even tables are responsive thanks to foundation. A table can consist of these el - - - + + + @@ -378,12 +372,6 @@ element
    <table> defines an HTML table
    - - - - - -
    diff --git a/_sass/_01_settings_colors.scss b/_sass/_01_settings_colors.scss index a7bea7459eb..dcedd19f183 100644 --- a/_sass/_01_settings_colors.scss +++ b/_sass/_01_settings_colors.scss @@ -16,9 +16,9 @@ /* Basics ------------------------------------------------------------------- */ -$text-color: #111; -$body-font-color: $text-color; -$body-bg: #fdfdfd; +$text-color : #111; +$body-font-color : $text-color; +$body-bg : #fdfdfd; @@ -26,59 +26,59 @@ $body-bg: #fdfdfd; 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 +$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; +$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; +$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: $body-bg; -$topbar-bg: $topbar-bg-color; +$topbar-bg-color : $body-bg; +$topbar-bg : $topbar-bg-color; $topbar-dropdown-toggle-color: $ci-1; -$topbar-link-color: #000; +$topbar-link-color : #000; $topbar-link-color-hover: #000; $topbar-link-color-active: #000; $topbar-link-color-active-hover: #000; @@ -107,13 +107,13 @@ $topbar-menu-icon-color-toggled: $ci-6; /* Footer ------------------------------------------------------------------- */ -$footer-bg: $grey-8; -$footer-color: #fff; -$footer-link-color: $ci-6; +$footer-bg : $grey-8; +$footer-color : #fff; +$footer-link-color : $ci-6; -$subfooter-bg: $grey-13; -$subfooter-color: $grey-8; +$subfooter-bg : $grey-13; +$subfooter-color : $grey-8; $subfooter-link-color: $grey-8; diff --git a/_sass/_03_settings_mixins_media_queries.scss b/_sass/_03_settings_mixins_media_queries.scss index 3f971f3a8b9..8be24715ec9 100644 --- a/_sass/_03_settings_mixins_media_queries.scss +++ b/_sass/_03_settings_mixins_media_queries.scss @@ -29,7 +29,7 @@ $base-font-size: 100% !default; // // We use this to control border radius. // $radius - Default: $global-radius || 4px -@mixin radius($radius:$global-radius) { +@mixin radius($radius: $global-radius) { @if $radius { border-radius: $radius; } @@ -39,13 +39,15 @@ $base-font-size: 100% !default; // // 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) { +@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 { + } + + @else { -webkit-#{$side}-left-radius: $radius; -webkit-#{$side}-right-radius: $radius; border-#{$side}-left-radius: $radius; @@ -57,11 +59,14 @@ $base-font-size: 100% !default; // // We can control whether or not we have inset shadows edges. // $active - Default: true, Options: false -@mixin inset-shadow($active:true) { +@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; } } + @if $active { + &:active { + box-shadow: $shiny-edge-size $shiny-edge-active-color inset; + } + } } // @mixins @@ -70,17 +75,17 @@ $base-font-size: 100% !default; // $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) { +@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) { +@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 + -moz-box-sizing: $type; // Firefox < 29 + box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1 } // @mixins @@ -95,19 +100,23 @@ $base-font-size: 100% !default; width: 0; height: 0; border: inset $triangle-size; - @if ($triangle-direction == top) { + + @if ($triangle-direction ==top) { border-color: $triangle-color transparent transparent transparent; border-top-style: solid; } - @if ($triangle-direction == bottom) { + + @if ($triangle-direction ==bottom) { border-color: transparent transparent $triangle-color transparent; border-bottom-style: solid; } - @if ($triangle-direction == left) { + + @if ($triangle-direction ==left) { border-color: transparent transparent transparent $triangle-color; border-left-style: solid; } - @if ($triangle-direction == right) { + + @if ($triangle-direction ==right) { border-color: transparent $triangle-color transparent transparent; border-right-style: solid; } @@ -135,29 +144,33 @@ $base-font-size: 100% !default; @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; + 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, @@ -168,8 +181,16 @@ $base-font-size: 100% !default; // We use this to do clear floats @mixin clearfix { - &:before, &:after { content: " "; display: table; } - &:after { clear: both; } + + &:before, + &:after { + content: " "; + display: table; + } + + &:after { + clear: both; + } } // @mixins @@ -178,7 +199,7 @@ $base-font-size: 100% !default; // $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)) { +@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} { @@ -192,8 +213,8 @@ $base-font-size: 100% !default; // We use this to translate elements in 2D // $horizontal: Default: 0 // $vertical: Default: 0 -@mixin translate2d($horizontal:0, $vertical:0) { - transform: translate($horizontal,$vertical) +@mixin translate2d($horizontal: 0, $vertical: 0) { + transform: translate($horizontal, $vertical) } // @mixins @@ -224,10 +245,13 @@ $base-font-size: 100% !default; $text-direction: ltr !default; $default-float: left !default; $opposite-direction: right !default; -@if $text-direction == ltr { + +@if $text-direction ==ltr { $default-float: left; $opposite-direction: right; -} @else { +} + +@else { $default-float: right; $opposite-direction: left; } @@ -250,11 +274,26 @@ $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); +$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; @@ -293,7 +332,7 @@ $cursor-text-value: text !default; @include exports("global") { - // Meta styles are included in all builds, as they are a dependancy of the Javascript. + // Meta styles are included in all builds, as they are a dependency of the Javascript. // Used to provide media query values for javascript components. // Forward slash placed around everything to convince PhantomJS to read the value. @@ -353,7 +392,10 @@ $cursor-text-value: text !default; @if $include-html-global-classes { // Must be 100% for off canvas to work - html, body { height: 100%; } + html, + body { + height: 100%; + } // Set box-sizing globally to handle padding and border widths *, @@ -363,7 +405,9 @@ $cursor-text-value: text !default; } html, - body { font-size: $base-font-size; } + body { + font-size: $base-font-size; + } // Default body styles body { @@ -379,25 +423,42 @@ $cursor-text-value: text !default; cursor: $cursor-auto-value; } - a:hover { cursor: $cursor-pointer-value; } + a:hover { + cursor: $cursor-pointer-value; + } // Grid Defaults to get images and embeds to work properly - img { max-width: 100%; height: auto; } + img { + max-width: 100%; + height: auto; + } - img { -ms-interpolation-mode: bicubic; } + img { + -ms-interpolation-mode: bicubic; + } #map_canvas, .map_canvas { + img, embed, - object { max-width: none !important; + object { + max-width: none !important; } } // Miscellaneous useful HTML classes - .left { float: left !important; } - .right { float: right !important; } - .clearfix { @include clearfix; } + .left { + float: left !important; + } + + .right { + float: right !important; + } + + .clearfix { + @include clearfix; + } // Hide visually and from screen readers .hide { @@ -406,13 +467,18 @@ $cursor-text-value: text !default; } // Hide visually and from screen readers, but maintain layout - .invisible { visibility: hidden; } + .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; } + .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 { @@ -425,9 +491,14 @@ $cursor-text-value: text !default; // // Make sure textarea takes on height automatically - textarea { height: auto; min-height: 50px; } + textarea { + height: auto; + min-height: 50px; + } // Make select elements 100% width by default - select { width: 100%; } + select { + width: 100%; + } } -} +} \ No newline at end of file diff --git a/_sass/_06_typography.scss b/_sass/_06_typography.scss old mode 100644 new mode 100755 index 832cc14c1d0..2c5bc6b43d9 --- a/_sass/_06_typography.scss +++ b/_sass/_06_typography.scss @@ -55,9 +55,9 @@ p { -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; - -ms-word-break: break-all; + -ms-word-break: normal; /* Non standard for webkit */ - word-break: break-word; + word-break: normal; } p a, article a { @@ -83,6 +83,9 @@ p.button a { /* Headlines + The hK::before logic is to accomodate a vert. offset for persistent + top of page menu. The logic is copied from + https://css-tricks.com/hash-tag-links-padding/ ------------------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { @@ -90,7 +93,6 @@ h1, h2, h3, h4, h5, h6 { font-weight: normal; padding: 0; } - h1 { font-size: $font-size-h1; margin-top: 0; @@ -398,6 +400,7 @@ mark { .icon-feather:before, .icon-github:before, .icon-globe:before, +.icon-googleplus:before, .icon-heart:before, .icon-heart-outlined:before, .icon-home:before, @@ -466,6 +469,7 @@ font-smoothing: antialiased; .icon-feather:before { content: "\f114"; } .icon-github:before { content: "\f115"; } .icon-globe:before { content: "\f116"; } +.icon-googleplus:before { content: "\f136"; } .icon-heart:before { content: "\f117"; } .icon-heart-outlined:before { content: "\f118"; } .icon-home:before { content: "\f119"; } diff --git a/_sass/_07_layout.scss b/_sass/_07_layout.scss index 01dd3e9394c..232cb058ec6 100644 --- a/_sass/_07_layout.scss +++ b/_sass/_07_layout.scss @@ -48,6 +48,10 @@ body.video cite { color: #fff; } #navigation { -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.2); box-shadow: 0 2px 3px 0 rgba(0,0,0,.2); + + [class^='icon-']:before, [class*=' icon-']:before { + margin-right: rem-calc(8); + } } diff --git a/_sass/_09_elements.scss b/_sass/_09_elements.scss index df4e995a72a..33095653358 100644 --- a/_sass/_09_elements.scss +++ b/_sass/_09_elements.scss @@ -58,10 +58,10 @@ .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; @@ -79,6 +79,8 @@ .alert-box.terminal::before { content: "$ "; color: $ci-6; + float: left; + margin: .25em .5em 0 0; } .alert-box.text { background-color: $grey-2; @@ -146,3 +148,15 @@ img.lazy { transition: opacity 0.7s; opacity: 1; } + +*:target:not([id^='fn:']):not([id^='fnref:']) { + &::before { + content: " "; + width: 0; + height: 0; + + display: block; + padding-top: 50px; + margin-top: -50px; + } +} diff --git a/_sass/_10_asciidoc.scss b/_sass/_10_asciidoc.scss new file mode 100644 index 00000000000..cc1b881b284 --- /dev/null +++ b/_sass/_10_asciidoc.scss @@ -0,0 +1,1189 @@ + +$experimental: true; + +$pre-bg: $code-background-color; +$pre-border-size: $panel-border-size; +$pre-border-style: $panel-border-style; +$pre-border-color: $panel-border-color; +$pre-font-color: $body-font-color; +$pre-padding: 0.5em; +$pre-line-height: 1.5; + +$code-font-size: 1rem; +$code-word-spacing: 0; +$code-line-height: 1rem; +$code-text-rendering: optimal; + +$definition-list-content-margin-left: 0px; + +$subheader-font-family: $body-font-family; +$subheader-font-size: 1rem; +$subheader-font-color: darken($header-font-color, 15%); // resolves to #7a2518 +$subheader-text-rendering: $header-text-rendering !default; + +$subheader-font-family: $body-font-family; +$subheader-font-size: 1rem; +$subheader-font-color: darken($header-font-color, 15%); // resolves to #7a2518 +$subheader-font-weight: normal; +$subheader-font-style: italic; +$subheader-line-height: 1.45; +$subheader-top-margin: 0px; +$subheader-bottom-margin: 0.25em; + +$sidebar-header-align: left; +$sidebar-header-border-size: 0px; +$sidebar-header-border-style: none; +$sidebar-header-border-color: $body-bg; + +$icon-text-shadow: $body-font-color; +$lightless: 20%; +$rainbow-lightness: 20%; + + +*:not(pre) > code { + font-size: $code-font-size; + font-style: normal !important; + letter-spacing: 0px; + padding: $code-padding; + @if $code-word-spacing != 0 { + word-spacing: $code-word-spacing; + } + //white-space: nowrap; + @if $code-background-color != inherit { + background-color: $code-background-color; + } + @if $code-border-size != 0 { + border: $code-border-size $code-border-style $code-border-color; + } + @if $code-background-color != inherit or $code-border-size != 0 { + @include radius; + } + //text-shadow: none; + line-height: $code-line-height; + @if $code-text-rendering != inherit { + text-rendering: $code-text-rendering; + } +} + +pre, pre > code { + line-height: $pre-line-height; + // this overrides what was set on code + color: $code-color; + font-family: $code-font-family; + font-weight: normal; + @if $code-text-rendering != inherit { + text-rendering: $code-text-rendering; + } +} +/* +code { + font-family: $code-font-family; + font-weight: $code-font-weight; + color: $code-color; + background-color: $code-background-color; + border-width: $code-border-size; + border-style: $code-border-style; + border-color: $code-border-color; + padding: $code-padding; + } +*/ + +#toc { + ul.sectlevel1, ul.sectlevel2, ul.sectlevel3, ul.sectlevel4, ul.sectlevel5 { + margin-top: 0px; + } +} + +#toctitle { + font-size: 1.563em; + margin: 1.152em 0 0 0; +} + + + +.keyseq { + color: lighten($body-font-color, 20%); +} + +kbd { + font-family: $code-font-family; + display: inline-block; + color: $body-font-color; + font-size: 0.65em; + line-height: 1.45; + background-color: #f7f7f7; + border: 1px solid #ccc; + @include radius(3px); + //@include box-shadow(0 1px 0 rgba(0, 0, 0, .2), 0 0 0 0.1em white inset); + margin: 0 0.15em; + padding: 0.2em 0.5em; + vertical-align: middle; + position: relative; + top: -0.1em; + white-space: nowrap; +} + +.keyseq kbd:first-child { + margin-left: 0px; +} + +.keyseq kbd:last-child { + margin-right: 0px; +} + +.menuseq, .menu { + color: darken($body-font-color, 10%); +} + +b.button:before, b.button:after { + position: relative; + top: -1px; + font-weight: normal; +} + +b.button:before { + content: "["; + padding: 0 3px 0 2px; +} + +b.button:after { + content: "]"; + padding: 0 2px 0 3px; +} + + +// AsciiDoc block styles + +// these blocks that don't inherit panel styles +.audioblock, +.imageblock, +.literalblock, +.listingblock, +.stemblock, +.videoblock { + margin-bottom: $panel-margin-bottom; +} + +.admonitionblock td.content, +.audioblock, +.exampleblock, +.imageblock, +.listingblock, +.literalblock, +.stemblock, +.openblock, +.paragraph, +.quoteblock, +table.tableblock, +.verseblock, +.videoblock, +.dlist, +.olist, +.ulist, +.qlist, +.hdlist { + & > .title { + //FIXME @extend %subheader; + text-rendering: $subheader-text-rendering; + font-size: $subheader-font-size; + font-weight: bold; + color: $subheader-font-color; + text-align: left; + } +} + + +.admonitionblock > table { + border-collapse: separate; + border: 0; + background: none; + width: 100%; + + tr, td { + line-height: 1.6; + font-size: 1rem; + color: $text-color; + } + + td.icon { + text-align: center; + vertical-align: middle; + // FIXME use ems! + width: 80px; + img { + max-width: none; + } + .title { + //font-weight: $header-font-weight; + font-weight: bold; + font-family: $header-font-family; + text-transform: uppercase; + } + } + + td.content { + padding-left: emCalc(18px); + padding-right: emCalc(20px); + border-left: $hr-border-width $hr-border-style $hr-border-color; + // FIXME use $aside-font-color + color: $panel-font-color; + // QUESTION use opacity instead of blockquote-cite-font-color? + //opacity: 0.75; + + //& > .paragraph:last-child > p { + & > :last-child > :last-child { + margin-bottom: 0px; + } + } +} + +.exampleblock > .content { + // FIXME add variable for $example-bg + @include panel($body-bg, $panel-padding, false); + @include radius; + //& > :last-child > :last-child, + //// argh, review! + //.olist > ol > li:last-child > :last-child, + //.ulist > ul > li:last-child > :last-child, + //.qlist > ol > li:last-child > :last-child { + // margin-bottom: 0; + //} +} + + +.sidebarblock { + @include panel($panel-bg, $panel-padding, false); + @include radius; + + & > .content { + & > .title { + @extend h3; + color: $subheader-font-color; + //color: darken($header-font-color, 15%); // name this panel-header-color? + //line-height: 1.45; // a touch up from the header line height + margin-top: 0px; + margin-bottom: 0.625rem; + @if $sidebar-header-align { + text-align: $sidebar-header-align; + } + @if $sidebar-header-border-size != 0px { + border-width: $sidebar-header-border-size; + border-style: $sidebar-header-border-style; + border-color: $sidebar-header-border-color; + } + } + } +} + + +.exampleblock > .content, +.sidebarblock > .content { + // FIXME argh, review! + & > :last-child > :last-child, + .olist > ol > li:last-child > :last-child, + .ulist > ul > li:last-child > :last-child, + .qlist > ol > li:last-child > :last-child { + margin-bottom: 0; + } +} + + + +// FIXME make this situation simpler +// we're trying to accomodate highlight themes that have background colors +// if "highlight" is in first position, then a source highlighter is not in use +.literalblock pre, +.listingblock pre:not(.highlight), +.listingblock pre[class="highlight"], +.listingblock pre[class^="highlight "], +.listingblock pre.CodeRay, +.listingblock pre.prettyprint { + background: $pre-bg; + + .sidebarblock & { + // FIXME make me a variable + // FIXME what about inline code? + //background: #ededef; + background: #f2f1f1; + } + + + // override default setting for 'code' + & > code { + background: $pre-bg; + } +} + +.listingblock { + // use pre[class] so we win over pre. styles + pre, pre[class] { + @if $pre-border-size { + border: $pre-border-size $pre-border-style $pre-border-color; + } + // FIXME make border radius on listing blocks configurable! + @include radius; + word-wrap: break-word; + + background-color: $pre-bg; + + &.nowrap { + overflow-x: auto; + white-space: pre; + word-wrap: normal; + } + + // screens below breakpoint + padding: $pre-padding; + + font-size: emCalc(13px); + + @media #{$small} { + font-size: emCalc(14.5px); + } + + @media #{$medium} { + font-size: emCalc(16px); + } + } +} + +.literalblock { + pre, pre[class] { + background-color: inherit; + border: none; + padding: 0px; + + font-size: 1em; + word-wrap: break-word; + + &.nowrap { + overflow-x: auto; + white-space: pre; + word-wrap: normal; + } + } +} + +.literalblock.output pre { + // FIXME this doesn't work if pre-bg is an image! + color: $pre-bg; + background-color: $pre-font-color; +} + +// highlight.js themes put bg on , so shift padding +.listingblock pre.highlightjs { + padding: 0px; + & > code { + padding: $pre-padding; + // FIXME make border radius on listing blocks configurable! + @include radius; + } +} + +@if not $pre-border-size { + .listingblock pre.prettyprint { + border-width: 0; + } +} + +.listingblock > .content { + // give floating language text a place to drop anchor + position: relative; +} + +.listingblock code[data-lang]:before { + display: none; + content: attr(data-lang); + position: absolute; + font-size: emCalc(12px); + //top: 0.5rem; // 0.67em + top: 0.425rem; + right: 0.5rem; // 0.67em + line-height: 1; + text-transform: uppercase; + color: $text-color; +} + +.listingblock:hover code[data-lang]:before { + display: block; +} + +.listingblock.terminal pre .command:before { + content: attr(data-prompt); + padding-right: 0.5em; + color: #999; +} + +.listingblock.terminal pre .command:not([data-prompt]):before { + content: "$"; +} + +// overrides for Pygments default styles +table.pyhltable { + border-collapse: separate; + border: 0; + margin-bottom: 0; + background: none; +} + +table.pyhltable td { + vertical-align: top; + padding-top: 0; + padding-bottom: 0; + line-height: $pre-line-height; +} + +table.pyhltable td.code { + padding-left: .75em; + padding-right: 0; +} + +// QUESTION can't td:not(.code) be written as td.linenos? +pre.pygments .lineno, +table.pyhltable td:not(.code) { + color: #999; + padding-left: 0; + padding-right: .5em; + border-right: 1px solid $hr-border-color; +} + +pre.pygments .lineno { + display: inline-block; + margin-right: .25em; +} + +table.pyhltable .linenodiv { + background: none !important; + padding-right: 0 !important; +} + +// TODO +// - add centered option using margin-left: auto; margin-right: auto; padding-left: 1.5em; +.quoteblock { + margin: 0 1em $paragraph-margin-bottom 1.5em; + display: table; // enables auto width + & > .title { + margin-left: -1.5em; + margin-bottom: 0.75em; + } + + blockquote, blockquote p { + color: $blockquote-font-color; + font-size: 1.15rem; + line-height: 1.75; + word-spacing: 0.1em; + //letter-spacing: 0; + font-style: italic; + text-align: justify; + } + + blockquote { + padding: 0; + border: 0; + font-style: italic; + + &:before { + content:"\00BB"; + font-size:80px; + line-height: 0; + position:absolute; + left: -50px; + top: auto; + color: $grey-11; + } + + &:after { + content: "\00AB"; + font-size:80px; + line-height: 0; + position:absolute; + right: -50px; + } + + & > .paragraph:last-child p { + margin-bottom: 0; + } + } + + .attribution { + //margin-top: 0.5rem; + margin-top: 0.5em; + margin-right: 0.5ex; + text-align: left; + } + + .quoteblock { + margin-left: 0; + margin-right: 0; + padding: 0.5em 0; + border-left: 3px solid $blockquote-cite-font-color; + + blockquote { + padding: 0 0 0 0.75em; + &:before { + display: none; + } + } + } +} + +.verseblock { + //margin: 0 0.5em $paragraph-margin-bottom 0.5em; + margin: 0 1em $paragraph-margin-bottom 1em; + pre { + // FIXME make me a variable + font-family: "Open Sans", "DejaVu Sans", sans; + font-size: 1.15rem; + color: $blockquote-font-color; + background-color: transparent; + padding: 0px; + border: none; + overflow: initial; + font-weight: 300; + text-rendering: optimizeLegibility; + strong { + font-weight: 400; + } + } + + .attribution { + margin-top: 1.25rem; + margin-left: 0.5ex; + } +} + +.quoteblock, +.verseblock { + .attribution { + font-size: $blockquote-cite-font-size; + line-height: 1.45; + font-style: italic; + br { + display: none; + } + cite { + display: block; + //letter-spacing: -0.05em; + //letter-spacing: -0.025em; + color: $blockquote-cite-font-color; + } + } +} + +.quoteblock.abstract { + margin: 0 0 $paragraph-margin-bottom 0; + display: block; + blockquote, blockquote p { + text-align: left; + word-spacing: 0; + //letter-spacing: -0.001em; + } + + blockquote, blockquote p:first-of-type { + //&:first-line { + // font-weight: bold; + // letter-spacing: 0; + //} + + &:before { + display: none; + } + } +} + +table.tableblock { + max-width: 100%; + border-collapse: separate; + // QUESTION should this be any last-child? + td > .paragraph:last-child p, + th, td { + & > p:last-child { + margin-bottom: 0; + } + } +} + +// NOTE .grid-* selectors must be defined before .frame-* selectors in order for styles to cascade properly +table.tableblock, +th.tableblock, +td.tableblock { + border: 0 solid $table-border-color; +} + +table.grid-all th.tableblock, +table.grid-all td.tableblock { + border-width: 0 $table-border-size $table-border-size 0; +} + +table.grid-all tfoot > tr > th.tableblock, +table.grid-all tfoot > tr > td.tableblock { + border-width: $table-border-size $table-border-size 0 0; +} + +table.grid-cols th.tableblock, +table.grid-cols td.tableblock { + border-width: 0 $table-border-size 0 0; +} + +table.grid-all * > tr > .tableblock:last-child, +table.grid-cols * > tr > .tableblock:last-child { + border-right-width: 0; +} + +table.grid-rows th.tableblock, +table.grid-rows td.tableblock { + border-width: 0 0 $table-border-size 0; +} + +table.grid-all tbody > tr:last-child > th.tableblock, +table.grid-all tbody > tr:last-child > td.tableblock, +table.grid-all thead:last-child > tr > th.tableblock, +table.grid-rows tbody > tr:last-child > th.tableblock, +table.grid-rows tbody > tr:last-child > td.tableblock, +table.grid-rows thead:last-child > tr > th.tableblock { + border-bottom-width: 0; +} + +table.grid-rows tfoot > tr > th.tableblock, +table.grid-rows tfoot > tr > td.tableblock { + border-width: $table-border-size 0 0 0; +} + +table.frame-all { + border-width: $table-border-size; +} + +table.frame-sides { + border-width: 0 $table-border-size; +} + +table.frame-topbot { + border-width: $table-border-size 0; +} + +@each $halign in (left, right, center) { + th.halign-#{$halign}, + td.halign-#{$halign} { + text-align: $halign; + } +} + +@each $valign in (top, bottom, middle) { + th.valign-#{$valign}, + td.valign-#{$valign} { + vertical-align: $valign; + } +} + +// NOTE Fix required in Foundation, user-agent stylesheet is overriding +table thead th, +table tfoot th { + font-weight: $table-head-font-weight; +} + +// vertical table header (block) +tbody tr th { + display: $table-display; + //line-height: $table-line-height; + background: $table-head-bg; +} + +// vertical table header (content) +tbody tr th, +tfoot tr th { + &, p { + color: $table-head-font-color; + font-weight: $table-head-font-weight; + } +} + +p.tableblock > code:only-child { + background: none; + padding: 0; +} + +/* +p.tableblock { + font-size: 1em; +} +*/ + +td > div.verse { + white-space: pre; +} + +// AsciiDoc list styles + +ol { + margin-left: $list-side-margin + emCalc(4px); +} + +ul li ol { + margin-left: $list-side-margin; +} + +dl dd { + margin-left: $definition-list-content-margin-left; +} + +// argh +dl dd:last-child, +dl dd:last-child > :last-child { + margin-bottom: 0; +} + +ol > li p, +ul > li p, +ul dd, +ol dd, +.olist .olist, +.ulist .ulist, +.ulist .olist, +.olist .ulist { + margin-bottom: $paragraph-margin-bottom / 2; +} + +ul.unstyled, +ol.unnumbered, +ul.checklist, +ul.none { + list-style-type: none; +} + +ul.unstyled, +ol.unnumbered, +ul.checklist { + margin-left: emCalc(10px); +} + +// use consistent size for checkbox +ul.checklist li > p:first-child > .fa-square-o:first-child, +ul.checklist li > p:first-child > .fa-check-square-o:first-child { + width: 1em; + font-size: 0.85em; +} + +ul.checklist li > p:first-child > input[type="checkbox"]:first-child { + width: 1em; + position: relative; + top: 1px; +} + +ul.inline { + @include inline-list; +} + +// used when you need to style the term inline +// or should we name it "natural"? +.unstyled dl dt { + font-weight: normal; + font-style: normal; +} + +@mixin ordered-list-type($class, $type) { + ol.#{$class} { + list-style-type: #{$type}; + } +} + +@include ordered-list-type(arabic, decimal); +@include ordered-list-type(decimal, decimal-leading-zero); +@include ordered-list-type(loweralpha, lower-alpha); +@include ordered-list-type(upperalpha, upper-alpha); +@include ordered-list-type(lowerroman, lower-roman); +@include ordered-list-type(upperroman, upper-roman); +@include ordered-list-type(lowergreek, lower-greek); +//@include ordered-list-type(armenian, armenian); +//@include ordered-list-type(georgian, georgian); + +.hdlist > table, +.colist > table { + border: 0; + background: none; + & > tbody > tr { + background: none; + } +} + +td.hdlist1, +td.hdlist2 { + vertical-align: top; + padding: 0 emCalc(10px); +} + +td.hdlist1 { + font-weight: bold; + padding-bottom: $paragraph-margin-bottom; +} + +.literalblock + .colist, +.listingblock + .colist { + margin-top: -0.5em; +} + +.colist > table { + tr > td:first-of-type { + padding: 0 0.75em; + line-height: 1; + } + + tr > td:last-of-type { + padding: emCalc(4px) 0; + } +} + +// reenable once we can style the number too +//.qanda > ol > li > p > em:only-child { +// color: darken($primary-color, 5%); +//} + +// picked from foundation/components/_thumbs.css +.thumb, +.th { + line-height: 0; + display: inline-block; + border: $thumb-border-style $thumb-border-width $thumb-border-color; + @if $experimental { + -webkit-box-shadow: $thumb-box-shadow; + } + box-shadow: $thumb-box-shadow; +} + +// for now just allow title to be aligned for imageblock, might add others later +// TODO might want to support auto-sizing content so title aligns to edge of content +//.imageblock { +// &.text-center > .title { +// text-align: center !important; +// } +// +// &.text-right > .title { +// text-align: right !important; +// } +//} + +.imageblock { + &.left, + &[style*="float: left"] { + margin: emCalc(4px) emCalc(10px) $panel-margin-bottom 0; + } + &.right, + &[style*="float: right"] { + margin: emCalc(4px) 0 $panel-margin-bottom emCalc(10px); + } + //&.center { + // display: table; + //} + + & > .title { + margin-bottom: 0; + } + + &.thumb, + &.th { + border-width: $thumb-border-width + ($thumb-border-width * .5); + & > .title { + padding: 0 emCalc(2px); + } + } +} + +//span.image { +.image { + // QUESTION should we require the related role? + // "related" mean "illustrative" or "supporting" of the text + //&.related, + //&.rel { + //} + + &.left, + &.right { + margin-top: emCalc(4px); + margin-bottom: emCalc(4px); + display: inline-block; + line-height: 0; + } + + &.left { + margin-right: emCalc(10px); + } + + &.right { + margin-left: emCalc(10px); + } +} + +// NOTE defined directly on object & svg (above) to align with settings for img +//.imageblock, +//span.image { +// object[type="image/svg+xml"], svg { +// display: inline-block; +// vertical-align: middle; +// } +//} + +a.image { + text-decoration: none; + // allow SVG to be a link + display: inline-block; + //object[type="image/svg+xml"] { + object { + pointer-events: none; + } +} + +// AsciiDoc footnote styles +sup.footnote, +sup.footnoteref { + font-size: emCalc(14px); // 80% instead? + position: static; + vertical-align: super; + a { + text-decoration: none; + &:active { + text-decoration: underline; + } + } +} + +#footnotes { + padding-top: emCalc(12px); + padding-bottom: emCalc(12px); + margin-bottom: $panel-margin-bottom / 2; + hr { + width: 20%; + min-width: emCalc(100px); + margin: -0.25em 0 0.75em 0; + border-width: 1px 0 0 0; + } + .footnote { + padding: 0 0.375em 0 0.225em; // .15em difference is due to text-indent + line-height: 1.3334; + font-size: emCalc(14px); + margin-left: 1.2em; + text-indent: -1.05em; + margin-bottom: 0.2em; + a:first-of-type { + font-weight: bold; + text-decoration: none; + } + } + + .footnote:last-of-type { + margin-bottom: 0; + } + + // footnotes in embedded documents + #content & { + margin-top: -$panel-margin-bottom / 2; + margin-bottom: 0; + padding: emCalc(12px) 0; + } +} + +// for embedded gists +.gist .file-data > table { + border: 0; + background: #fff; + width: 100%; + margin-bottom: 0; + td.line-data { + width: 99%; + } +} + + +.exampleblock > .content { + // white + //background-color: #fff; + //border-color: $panel-border-color; + //FIXME @include single-box-shadow($panel-border-color, 0, 1px, 2px); + + // light yellow + background-color: #fffef7; // from rgb(252,247,227), analogous to #f8f8f7 + border-color: $panel-border-color; + //FIXME @include single-box-shadow($panel-border-color, 0, 1px, 4px); +} + +div.unbreakable { page-break-inside: avoid; } + +.big { font-size: larger; } + +.small { font-size: smaller; } + +.underline { text-decoration: underline; } + +.overline { text-decoration: overline; } + +.line-through { text-decoration: line-through; } + +.aqua { color: #00bfbf; } + +.aqua-background { background-color: #00fafa; } + +.black { color: black; } + +.black-background { background-color: black; } + +.blue { color: #0000bf; } + +.blue-background { background-color: #0000fa; } + +.fuchsia { color: #bf00bf; } + +.fuchsia-background { background-color: #fa00fa; } + +.gray { color: #606060; } + +.gray-background { background-color: #7d7d7d; } + +.green { color: #006000; } + +.green-background { background-color: #007d00; } + +.lime { color: #00bf00; } + +.lime-background { background-color: #00fa00; } + +.maroon { color: #600000; } + +.maroon-background { background-color: #7d0000; } + +.navy { color: #000060; } + +.navy-background { background-color: #00007d; } + +.olive { color: #606000; } + +.olive-background { background-color: #7d7d00; } + +.purple { color: #600060; } + +.purple-background { background-color: #7d007d; } + +.red { color: #bf0000; } + +.red-background { background-color: #fa0000; } + +.silver { color: #909090; } + +.silver-background { background-color: #bcbcbc; } + +.teal { color: #006060; } + +.teal-background { background-color: #007d7d; } + +.white { color: #bfbfbf; } + +.white-background { background-color: #fafafa; } + +.yellow { color: #bfbf00; } + +.yellow-background { background-color: #fafa00; } + +// +// _awesome-icons.sccs +// + +span.icon>.fa { + cursor: default; +} + +.admonitionblock td.icon { + [class^="fa icon-"] { + font-size: 2.5em; + text-shadow: $icon-text-shadow; + cursor: default; + } + + .icon-note:before { + //@extend .fa-info-circle; + content: "\f05a"; + color: scale-color($success-color, $lightness: $rainbow-lightness); + //color: $success-color; + font-family: FontAwesome; + } + + .icon-tip:before { + // @extend .fa-lightbulb-o; + content: "\f0eb"; + color: scale-color($info-color, $lightness: $rainbow-lightness); + //color: $info-color; + font-family: FontAwesome; + } + + .icon-warning:before { + // @extend .fa-exclamation-triangle; + content: "\f071"; + color: scale-color($warning-color, $lightness: $rainbow-lightness); + //color: $warning-color; + font-family: FontAwesome; + } + + .icon-caution:before { + // @extend .fa-fire; + content: "\f06d"; + color: scale-color($alert-color, $lightness: $rainbow-lightness); + //color: $alert-color; + font-family: FontAwesome; + } + + .icon-important:before { + // @extend .icon-exclamation-circle; + content: "\f06a"; + color: scale-color($ci-2, $lightness: $rainbow-lightness); + //color: $ci-2; + font-family: FontAwesome; + } +} + +// alternatively could use ➊ through ➓ to get the numbered circles, +// then style them as appropriate; would need to output them in the text, though +.conum[data-value] { + display: inline-block; + color: #fff !important; + background-color: $body-font-color; + @include radius(100px); + text-align: center; + font-size: 0.75em; + //width: 1.5em; + //height: 1.5em; + //line-height: 1.5em; + width: 1.67em; + height: 1.67em; + line-height: 1.67em; + // FIXME make this font a variable + font-family: "Open Sans", "DejaVu Sans", sans-serif; + font-style: normal; + // QUESTION should the callout numbers be regular weight? + font-weight: bold; + // text-indent only seems to be required for webkit + //text-indent: -1px; + + & * { + color: #fff !important; + } + + & + b { + display: none; + } + + &:after { + content: attr(data-value); + } + + pre & { + position: relative; + top: -0.125em; + } +} + +// hack to disallow syntax highlighting from changing the color +b.conum * { + color: inherit !important; +} + +// hack for when highlight.js adds a bogus element into DOM +// QUESTION should we solve this w/ javascript instead? +.conum:not([data-value]):empty { + display: none; +} diff --git a/_sass/_11_syntax-highlighting.scss b/_sass/_11_syntax-highlighting.scss index f0a2a0c1e22..ea411a5d0e9 100644 --- a/_sass/_11_syntax-highlighting.scss +++ b/_sass/_11_syntax-highlighting.scss @@ -4,6 +4,13 @@ .highlight { background: #fff; + [data-lang]::before { + content: attr(data-lang); + display: block; + text-align: right; + margin-right: 5px; + text-transform: uppercase; + } .c { color: #998; font-style: italic } // Comment .err { color: #a61717; background-color: #e3d2d2 } // Error .k { font-weight: bold } // Keyword diff --git a/_sass/_functions.scss b/_sass/_functions.scss index 60dd1e2ade0..3b51e97631c 100644 --- a/_sass/_functions.scss +++ b/_sass/_functions.scss @@ -7,17 +7,21 @@ $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; +// We use this to prevent styles from being loaded multiple times for components 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; - } + $module_index: index($modules, $name +); + +@if (($module_index ==null) or ($module_index ==false)) { + $modules: append($modules, $name) !global; + @content; +} } // @@ -27,80 +31,101 @@ $modules: () !default; // RANGES // We use these functions to define ranges for various things, like media queries. -@function lower-bound($range){ - @if length($range) <= 0 { +@function lower-bound($range) { + @if length($range) <=0 { @return 0; } - @return nth($range,1); + + @return nth($range, 1); } @function upper-bound($range) { @if length($range) < 2 { @return 999999999999; } + @return nth($range, 2); } +/// TODO: This is bad practice, calculating between units should be done by converting as by the sass development team: +/// https://github.com/sass/sass/issues/533 (right now this is a work around) // STRIP UNIT // It strips the unit of measure and returns it -@function strip-unit($num) { - @return $num / ($num * 0 + 1); +@function strip-unit($value) { + @if type-of($value)=="number" { + @if (unitless($value)) { + @return $value; + } + + @else if unit($value)=="em" { + @return calc($value / 1em); + } + + @else if unit($value)=="px" { + @return calc($value / 1px); + } + + @else if unit($value)=="pt" { + @return calc($value / 1pt); + } + } + + @else { + @warn "Not a number value: #{$value}"; + @return $value; + } } // 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) - } +@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) + } } - @return $return; + @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 +@function convert-to-rem($value, $base-value: $rem-base) { + $value: calc(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-' + $namespace + '-' + $attr + ']'); } - @return '[data-' + $attr + ']'; + @return ('[data-' + $attr + ']'); } // REM CALC @@ -125,23 +150,28 @@ $modules: () !default; @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)); + @if $max ==1 { + @return convert-to-rem(nth($values, 1), $base-value); } - @return $remValues; + + $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){ +@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){ +@function em-calc($values) { @return rem-calc($values); -} +} \ No newline at end of file diff --git a/_sass/foundation-components/_accordion.scss b/_sass/foundation-components/_accordion.scss index fb575095769..1676e7ee2d1 100644 --- a/_sass/foundation-components/_accordion.scss +++ b/_sass/foundation-components/_accordion.scss @@ -18,12 +18,12 @@ $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-padding: calc($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 +// Description: 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 @@ -38,55 +38,68 @@ $accordion-content-active-bg-color: $white !default; // @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 +// @params $font-size [ number ]: Specify 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 accordion -@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 ){ +@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" { + + @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 { + &.#{ $active_class }>a { background: $active-bg; } } - > a { + + >a { background: $bg; color: $font-color; - @if type-of($padding) != number { + + @if type-of($padding) !=number { @warn "`#{$padding}` was read as #{type-of($padding)}"; - @if $accordion-navigation-padding != null { + + @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 { + + @if type-of($font-size) !=number { @warn "`#{$font-size}` was read as a #{type-of($font-size)}"; - @if $accordion-navigation-font-size != null { + + @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{ + + @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; } @@ -98,24 +111,31 @@ $accordion-content-active-bg-color: $white !default; // @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'){ +@mixin accordion-content($bg: $accordion-content-active-bg-color, $padding: $accordion-content-padding, $active_class: 'active') { display: none; - @if type-of($padding) != "number" { + + @if type-of($padding) !="number" { @warn "#{$padding} was read as a #{type-of($padding)}"; - @if $accordion-content-padding != null { + + @if $accordion-content-padding !=null { @warn "`#{$padding}` isn't a valid number. $accordion-content-padding used instead"; padding: $accordion-content-padding; - } @else { + } + + @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 { + } + + @else { padding: $padding; } - @if type-of($active_class) != "string" { + @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; @@ -129,23 +149,33 @@ $accordion-content-active-bg-color: $white !default; .accordion { @include clearfix; margin-bottom: 0; - .accordion-navigation, dd { + + .accordion-navigation, + dd { display: block; margin-bottom: 0 !important; - &.active > a { background: $accordion-navigation-active-bg-color; } - > a { + + &.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; } + + &:hover { + background: $accordion-navigation-hover-bg-color; + } } - > .content { + >.content { display: none; padding: $accordion-content-padding; + &.active { display: block; background: $accordion-content-active-bg-color; @@ -154,4 +184,4 @@ $accordion-content-active-bg-color: $white !default; } } } -} +} \ No newline at end of file diff --git a/_sass/foundation-components/_alert-boxes.scss b/_sass/foundation-components/_alert-boxes.scss index 493fbaa17e7..65028d72e41 100644 --- a/_sass/foundation-components/_alert-boxes.scss +++ b/_sass/foundation-components/_alert-boxes.scss @@ -66,7 +66,7 @@ $alert-transition-ease: ease-out !default; // We use this mixin to add alert styles // // $bg - The background of the alert. Default: $primary-color. -@mixin alert-style($bg:$primary-color) { +@mixin alert-style($bg: $primary-color) { // This finds the lightness percentage of the background color. $bg-lightness: lightness($bg); @@ -76,8 +76,13 @@ $alert-transition-ease: ease-out !default; 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; } + @if $bg-lightness >70% { + color: $alert-font-color-alt; + } + + @else { + color: $alert-font-color; + } } @@ -88,20 +93,23 @@ $alert-transition-ease: ease-out !default; line-height: 0; position: absolute; top: $alert-close-top; - margin-top: -($alert-close-font-size / 2); + margin-top: -(calc($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; } + &: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) { +@mixin alert($bg: $primary-color, $radius: false) { @include alert-base; @include alert-style($bg); @include radius($radius); @@ -112,17 +120,41 @@ $alert-transition-ease: ease-out !default; .alert-box { @include alert; - .close { @include alert-close; } + .close { + @include alert-close; + } + + &.radius { + @include radius($alert-radius); + } - &.radius { @include radius($alert-radius); } - &.round { @include radius($global-rounded); } + &.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} + &.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 + } } } -} +} \ No newline at end of file diff --git a/_sass/foundation-components/_block-grid.scss b/_sass/foundation-components/_block-grid.scss index 5c7bf14611b..cf6b31cfeac 100644 --- a/_sass/foundation-components/_block-grid.scss +++ b/_sass/foundation-components/_block-grid.scss @@ -15,6 +15,7 @@ $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; } @@ -31,42 +32,54 @@ $block-grid-media-queries: true !default; // $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) { +@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); } + + @else { + margin: 0 calc(-1 * $spacing / 2); + } + @include clearfix; &>li { display: block; height: auto; float: $default-float; + @if $include-spacing { - padding: 0 ($spacing/2) $spacing; + padding: 0 calc($spacing / 2) $spacing; } } } @if $per-row { &>li { - width: 100%/$per-row; + width: calc(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; } + &: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); } @@ -76,11 +89,13 @@ $block-grid-media-queries: true !default; @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 { + @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)); @@ -92,10 +107,10 @@ $block-grid-media-queries: true !default; // 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) { +@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 block-grid($i, $block-grid-default-spacing, $include-spacing, false); } } } @@ -103,30 +118,32 @@ $block-grid-media-queries: true !default; @include exports("block-grid") { @if $include-html-block-grid-classes { - [class*="block-grid-"] { @include block-grid; } + [class*="block-grid-"] { + @include block-grid; + } @if $block-grid-media-queries { @media #{$small-up} { - @include block-grid-html-classes($size:small,$include-spacing:false); + @include block-grid-html-classes($size: small, $include-spacing: false); } @media #{$medium-up} { - @include block-grid-html-classes($size:medium,$include-spacing:false); + @include block-grid-html-classes($size: medium, $include-spacing: false); } @media #{$large-up} { - @include block-grid-html-classes($size:large,$include-spacing:false); + @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); + @include block-grid-html-classes($size: xlarge, $include-spacing: false); } @media #{$xxlarge-up} { - @include block-grid-html-classes($size:xxlarge,$include-spacing:false); + @include block-grid-html-classes($size: xxlarge, $include-spacing: false); } } } } -} +} \ No newline at end of file diff --git a/_sass/foundation-components/_button-groups.scss b/_sass/foundation-components/_button-groups.scss index c989dfbaf07..5afb7556aec 100644 --- a/_sass/foundation-components/_button-groups.scss +++ b/_sass/foundation-components/_button-groups.scss @@ -19,30 +19,37 @@ $button-group-border-width: 1px !default; // // We use this to add styles for a button group container -@mixin button-group-container($styles:true, $float:false) { +@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; } + + & div { + overflow: hidden; + } } } // We use this to control styles for button groups -@mixin button-group-style($radius:false, $even:false, $float:false, $orientation:horizontal) { +@mixin button-group-style($radius: false, $even: false, $float: false, $orientation: horizontal) { - > button, .button { + >button, + .button { border-#{$default-float}: $button-group-border-width solid; border-color: rgba(255, 255, 255, 0.5); } &:first-child { - button, .button { + + button, + .button { border-#{$default-float}: 0; } } @@ -52,84 +59,107 @@ $button-group-border-width: 1px !default; margin: 0; float: $float; display: list-item; + // Make sure the first child doesn't get the negative margin. - &:first-child { margin-#{$default-float}: 0; } + &:first-child { + margin-#{$default-float}: 0; + } } + @else { margin: 0 -2px; display: inline-block; } - @if $orientation == vertical { - display:block; - margin:0; - > button, .button { + @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; + margin: 0; display: block; } &:first-child { - button, .button { + + button, + .button { border-top: 0; } } } // We use these to control left and right radius on first/last buttons in the group. - @if $radius == true { + @if $radius ==true { + &, - & > a, - & > button, - & > .button { @include radius(0); } + &>a, + &>button, + &>.button { + @include radius(0); + } + &:first-child, - &:first-child > a, - &:first-child > button, - &:first-child > .button { - @if $orientation == vertical { + &: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 { + &: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); } + &>a, + &>button, + &>.button { + @include radius(0); + } + &:first-child, - &:first-child > a, - &:first-child > button, - &:first-child > .button { - @if $orientation == vertical { + &: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 { + &:last-child>a, + &:last-child>button, + &:last-child>.button { + @if $orientation ==vertical { @include side-radius(bottom, $radius); } + @else { @include side-radius($opposite-direction, $radius); } @@ -138,60 +168,90 @@ $button-group-border-width: 1px !default; // We use this to make the buttons even width across their container @if $even { - width: percentage((100/$even) / 100); - button, .button { width: 100%; } + width: percentage(calc((100/$even) / 100)); + + button, + .button { + width: 100%; + } } } @include exports("button-group") { @if $include-html-button-classes { - .button-group { @include button-group-container; + .button-group { + @include button-group-container; - & > li { @include button-group-style(); } + &>li { + @include button-group-style(); + } &.stack { - & > li { @include button-group-style($orientation:vertical); float: none; } + &>li { + @include button-group-style($orientation: vertical); + float: none; + } } &.stack-for-small { - & > li { - @include button-group-style($orientation:horizontal); + &>li { + @include button-group-style($orientation: horizontal); + @media #{$small-only} { - @include button-group-style($orientation:vertical); + @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 > * { + &.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); + @include button-group-style($radius: $button-radius, $orientation: horizontal); } + @media #{$small-only} { - @include button-group-style($radius:$button-radius, $orientation:vertical); + @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 > * { + &.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); + @include button-group-style($radius: $button-round, $orientation: horizontal); } + @media #{$small-only} { - @include button-group-style($radius:$button-med, $orientation:vertical); + @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); } + &.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); } + + .button-group { + @include button-group-container($styles: false, $float: true); + } } } -} +} \ No newline at end of file diff --git a/_sass/foundation-components/_dropdown-buttons.scss b/_sass/foundation-components/_dropdown-buttons.scss index 3e45e5a5e0c..715c9925709 100644 --- a/_sass/foundation-components/_dropdown-buttons.scss +++ b/_sass/foundation-components/_dropdown-buttons.scss @@ -22,25 +22,25 @@ $button-pip-lrg: rem-calc(11) !default; $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; +$dropdown-button-pip-top-tny: calc(-1 * $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; +$dropdown-button-pip-top-sml: calc(-1 * $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; +$dropdown-button-pip-top-med: calc(-1 * $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; +$dropdown-button-pip-top-lrg: calc(-1 * $button-pip-lrg / 2) + rem-calc(3) !default; // @mixins // @@ -52,7 +52,7 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default; // $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) { +@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 { @@ -73,8 +73,9 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default; } // If we're dealing with tiny buttons, use these styles - @if $padding == tiny { + @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; @@ -83,8 +84,9 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default; } // If we're dealing with small buttons, use these styles - @if $padding == small { + @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; @@ -93,8 +95,9 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default; } // If we're dealing with default (medium) buttons, use these styles - @if $padding == medium { + @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; @@ -103,8 +106,9 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default; } // If we're dealing with large buttons, use these styles - @if $padding == large { + @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; @@ -114,17 +118,34 @@ $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3) !default; // 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; } + &::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; } + + .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; + } } } -} +} \ No newline at end of file diff --git a/_sass/foundation-components/_forms.scss b/_sass/foundation-components/_forms.scss index 80124fd0653..d89e23d725d 100644 --- a/_sass/foundation-components/_forms.scss +++ b/_sass/foundation-components/_forms.scss @@ -22,7 +22,7 @@ $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-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; @@ -33,7 +33,7 @@ $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-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. @@ -84,26 +84,36 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; // We use this mixin to give us form styles for rows inside of forms @mixin form-row-base { - .row { margin: 0 ((-$form-spacing) / 2); + .row { + margin: 0 calc((-1 * $form-spacing) / 2); .column, - .columns { padding: 0 ($form-spacing / 2); } + .columns { + padding: 0 calc($form-spacing / 2); + } // Use this to collapse the margins of a form row - &.collapse { margin: 0; + &.collapse { + margin: 0; .column, - .columns { padding: 0; } + .columns { + padding: 0; + } + input { @include side-radius($opposite-direction, 0); } } } + input.column, input.columns, textarea.column, - textarea.columns { padding-#{$default-float}: ($form-spacing / 2); } + textarea.columns { + padding-#{$default-float}: calc($form-spacing / 2); + } } // @MIXIN @@ -112,30 +122,35 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; @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; + padding: calc($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 Styles &:disabled { background-color: $input-disabled-bg; cursor: $input-disabled-cursor; @@ -156,7 +171,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; // // $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) { +@mixin form-label($alignment: false, $base-style: true) { // Control whether or not the base styles come through. @if $base-style { @@ -170,13 +185,14 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; } // Alignment options - @if $alignment == right { + @if $alignment ==right { float: none !important; text-align: right; } - @else if $alignment == inline { + + @else if $alignment ==inline { margin: 0 0 $form-spacing 0; - padding: $form-spacing / 2 + rem-calc($input-border-width) 0; + padding: calc($form-spacing / 2) + rem-calc($input-border-width) 0; } } @@ -203,7 +219,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; // $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) { +@mixin prefix($bg: $input-prefix-bg, $border: $input-prefix-border-color, $is-button: false) { @if $bg { $bg-lightness: lightness($bg); @@ -211,8 +227,13 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; 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 $bg-lightness >70% or $bg ==yellow { + color: $input-prefix-font-color; + } + + @else { + color: $input-prefix-font-color-alt; + } } @if $border { @@ -235,7 +256,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; // 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) { +@mixin postfix($bg: $input-prefix-bg, $border: $input-prefix-border-color, $is-button: false) { @if $bg { $bg-lightness: lightness($bg); @@ -243,8 +264,13 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; 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 $bg-lightness >70% or $bg ==yellow { + color: $input-prefix-font-color; + } + + @else { + color: $input-prefix-font-color-alt; + } } @if $border { @@ -282,7 +308,7 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; // // 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) { +@mixin form-error-color($color: $alert-color) { border-color: $color; background-color: rgba($color, 0.1); @@ -297,13 +323,15 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; // // 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 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) { +@mixin form-error-message($bg: $input-error-message-bg-color) { display: block; padding: $input-error-message-padding; margin-top: $input-error-message-top; @@ -315,12 +343,18 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; // 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; } + + @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 { +@mixin form-select { -webkit-appearance: none !important; border-radius: 0; background-color: $select-bg-color; @@ -335,25 +369,32 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; 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-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); + + padding: calc($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); } + + &.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; @@ -362,29 +403,44 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; } // We use this mixin to turn on/off HTML5 number spinners -@mixin html5number($browser, $on:true) { +@mixin html5number($browser, $on: true) { @if $on==false { - @if $browser==webkit { - -webkit-appearance: none; - margin: 0; - } @else if $browser==moz { - -moz-appearance: textfield; - } + @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; } + form { + margin: 0 0 $form-spacing; + } /* Using forms within rows, we need to set some defaults */ - form .row { @include form-row-base; } + form .row { + @include form-row-base; + } /* Label Styles */ - label { @include form-label; - &.right { @include form-label(right,false); } - &.inline { @include form-label(inline,false); } + 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; @@ -394,29 +450,62 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; /* Attach elements to the beginning or end of an input */ .prefix, - .postfix { @include prefix-postfix-base; } + .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); } + .postfix.button { + @include button-size(false, false); + @include postfix(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); } + .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(); } + 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); + + @if $input-include-glowing-effect ==false { + @include single-transition(all, 0.15s, linear); } + &.radius { @include radius($input-border-radius); } @@ -425,28 +514,63 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; 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); } + 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); } + 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); } + 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); } + select { + @include radius(0); + @include side-radius($default-float, $button-round); + } + + .postfix { + @include radius(0); + @include side-radius($opposite-direction, $button-round); + } } } } @@ -461,10 +585,10 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; height: auto; } - /* Not allow resize out of parent */ - textarea { - max-width: 100%; - } + /* Not allow resize out of parent */ + textarea { + max-width: 100%; + } /* Add height value for select elements to match text input height */ select { @@ -480,8 +604,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; margin: 0 0 $form-spacing 0; } - input[type="checkbox"] + label, - input[type="radio"] + label { + input[type="checkbox"]+label, + input[type="radio"]+label { display: inline-block; margin-#{$default-float}: $form-spacing * .5; margin-#{$opposite-direction}: $form-spacing; @@ -491,13 +615,14 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; /* Normalize file input width */ input[type="file"] { - width:100%; + 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); @@ -511,17 +636,27 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; /* Error Handling */ #{data('abide')} { - .error small.error, .error span.error, span.error, small.error { + + .error small.error, + .error span.error, + span.error, + small.error { @include form-error-message; } - span.error, small.error { display: none; } + + span.error, + small.error { + display: none; + } } - span.error, small.error { + span.error, + small.error { @include form-error-message; } .error { + input, textarea, select { @@ -542,8 +677,8 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; @include form-error-message; } - > label { - > small { + >label { + >small { color: scale-color($form-label-font-color, $lightness: 15%); background: transparent; padding: 0; @@ -565,6 +700,9 @@ $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%) !default; select.error { margin-bottom: 0; } - label.error { @include form-label-error-color; } + + label.error { + @include form-label-error-color; + } } -} +} \ No newline at end of file diff --git a/_sass/foundation-components/_global.scss b/_sass/foundation-components/_global.scss index 37d96eb1dd4..d0137070cec 100644 --- a/_sass/foundation-components/_global.scss +++ b/_sass/foundation-components/_global.scss @@ -30,7 +30,7 @@ $base-line-height: 1.5 !default; // // We use this to control border radius. // $radius - Default: $global-radius || 4px -@mixin radius($radius:$global-radius) { +@mixin radius($radius: $global-radius) { @if $radius { border-radius: $radius; } @@ -40,13 +40,15 @@ $base-line-height: 1.5 !default; // // 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) { +@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 { + } + + @else { -webkit-#{$side}-left-radius: $radius; -webkit-#{$side}-right-radius: $radius; border-#{$side}-left-radius: $radius; @@ -58,11 +60,14 @@ $base-line-height: 1.5 !default; // // We can control whether or not we have inset shadows edges. // $active - Default: true, Options: false -@mixin inset-shadow($active:true) { +@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; } } + @if $active { + &:active { + box-shadow: $shiny-edge-size $shiny-edge-active-color inset; + } + } } // @mixins @@ -71,17 +76,17 @@ $base-line-height: 1.5 !default; // $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) { +@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) { +@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 + -moz-box-sizing: $type; // Firefox < 29 + box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1 } // @mixins @@ -96,19 +101,23 @@ $base-line-height: 1.5 !default; width: 0; height: 0; border: inset $triangle-size; - @if ($triangle-direction == top) { + + @if ($triangle-direction ==top) { border-color: $triangle-color transparent transparent transparent; border-top-style: solid; } - @if ($triangle-direction == bottom) { + + @if ($triangle-direction ==bottom) { border-color: transparent transparent $triangle-color transparent; border-bottom-style: solid; } - @if ($triangle-direction == left) { + + @if ($triangle-direction ==left) { border-color: transparent transparent transparent $triangle-color; border-left-style: solid; } - @if ($triangle-direction == right) { + + @if ($triangle-direction ==right) { border-color: transparent $triangle-color transparent transparent; border-right-style: solid; } @@ -136,29 +145,33 @@ $base-line-height: 1.5 !default; @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); + margin-top: -(calc($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; + 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, @@ -169,8 +182,16 @@ $base-line-height: 1.5 !default; // We use this to do clear floats @mixin clearfix { - &:before, &:after { content: " "; display: table; } - &:after { clear: both; } + + &:before, + &:after { + content: " "; + display: table; + } + + &:after { + clear: both; + } } // @mixins @@ -179,7 +200,7 @@ $base-line-height: 1.5 !default; // $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)) { +@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} { @@ -193,8 +214,8 @@ $base-line-height: 1.5 !default; // We use this to translate elements in 2D // $horizontal: Default: 0 // $vertical: Default: 0 -@mixin translate2d($horizontal:0, $vertical:0) { - transform: translate($horizontal,$vertical) +@mixin translate2d($horizontal: 0, $vertical: 0) { + transform: translate($horizontal, $vertical) } // @mixins @@ -220,33 +241,33 @@ $base-line-height: 1.5 !default; 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; +$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 +$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 +$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; @@ -271,10 +292,13 @@ $font-smoothing: antialiased !default; $text-direction: ltr !default; $default-float: left !default; $opposite-direction: right !default; -@if $text-direction == ltr { + +@if $text-direction ==ltr { $default-float: left; $opposite-direction: right; -} @else { +} + +@else { $default-float: right; $opposite-direction: left; } @@ -296,11 +320,21 @@ $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; +$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; @@ -340,7 +374,7 @@ $cursor-text-value: text !default; @include exports("global") { - // Meta styles are included in all builds, as they are a dependancy of the Javascript. + // Meta styles are included in all builds, as they are a dependency of the Javascript. // Used to provide media query values for javascript components. // Forward slash placed around everything to convince PhantomJS to read the value. @@ -350,131 +384,164 @@ $cursor-text-value: text !default; meta.foundation-mq-small { font-family: "/" + unquote($small-up) + "/"; - width: lower-bound($small-range); - } + width: lower-bound($small-range + ); +} - meta.foundation-mq-small-only { - font-family: "/" + unquote($small-only) + "/"; - 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 { + 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-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 { + 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-large-only { - font-family: "/" + unquote($large-only) + "/"; - width: lower-bound($large-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%; } - meta.foundation-mq-xlarge { - font-family: "/" + unquote($xlarge-up) + "/"; - width: lower-bound($xlarge-range); + // Set box-sizing globally to handle padding and border widths + *, + *:before, + *:after { + @include box-sizing(border-box); } - meta.foundation-mq-xlarge-only { - font-family: "/" + unquote($xlarge-only) + "/"; - width: lower-bound($xlarge-range); + html, + body { + font-size: $base-font-size; } - meta.foundation-mq-xxlarge { - font-family: "/" + unquote($xxlarge-up) + "/"; - width: lower-bound($xxlarge-range); + // 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; } - meta.foundation-data-attribute-namespace { - font-family: #{$namespace}; + a:hover { + cursor: $cursor-pointer-value; } - @if $include-html-global-classes { + // Grid Defaults to get images and embeds to work properly + img { + max-width: 100%; + height: auto; + } - // Must be 100% for off canvas to work - html, body { height: 100%; } + img { + -ms-interpolation-mode: bicubic; + } - // Set box-sizing globally to handle padding and border widths - *, - *:before, - *:after { - @include box-sizing(border-box); - } + #map_canvas, + .map_canvas { - 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; + img, + embed, + object { + max-width: none !important; } + } - 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; } + // Miscellaneous useful HTML classes + .left { + float: left !important; + } - #map_canvas, - .map_canvas { - img, - embed, - object { max-width: none !important; - } - } + .right { + float: right !important; + } - // Miscellaneous useful HTML classes - .left { float: left !important; } - .right { float: right !important; } - .clearfix { @include clearfix; } + .clearfix { + @include clearfix; + } - // Hide visually and from screen readers - .hide { - display: none !important; - visibility: hidden; - } + // Hide visually and from screen readers + .hide { + display: none !important; + visibility: hidden; + } - // Hide visually and from screen readers, but maintain layout - .invisible { 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; } + // 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; - } + // 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 - // + // + // Global resets for forms + // - // Make sure textarea takes on height automatically - textarea { height: auto; min-height: 50px; } + // Make sure textarea takes on height automatically + textarea { + height: auto; + min-height: 50px; + } - // Make select elements 100% width by default - select { width: 100%; } + // Make select elements 100% width by default + select { + width: 100%; } } +} \ No newline at end of file diff --git a/_sass/foundation-components/_grid.scss b/_sass/foundation-components/_grid.scss index aa4e77cdef7..8ad18546502 100644 --- a/_sass/foundation-components/_grid.scss +++ b/_sass/foundation-components/_grid.scss @@ -29,7 +29,7 @@ $last-child-float: $opposite-direction !default; // $colNumber - Found in settings file // $totalColumns - Found in settings file @function grid-calc($colNumber, $totalColumns) { - @return percentage(($colNumber / $totalColumns)); + @return percentage(calc($colNumber / $totalColumns)); } // @@ -43,24 +43,24 @@ $last-child-float: $opposite-direction !default; @mixin grid-row($behavior: false) { // use @include grid-row(nest); to include a nested row - @if $behavior == nest { + @if $behavior ==nest { width: auto; - margin-#{$default-float}: -($column-gutter/2); - margin-#{$opposite-direction}: -($column-gutter/2); + margin-#{$default-float}: - calc($column-gutter/2); + margin-#{$opposite-direction}: - calc($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 { + @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 { + @else if $behavior ==nest-collapse { width: auto; margin: 0; max-width: none; @@ -90,16 +90,15 @@ $last-child-float: $opposite-direction !default; // $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) { +@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 @@ -115,9 +114,9 @@ $last-child-float: $opposite-direction !default; // 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); + @else if $collapse ==false { + padding-left: calc($column-gutter / 2); + padding-right: calc($column-gutter / 2); } // If a column number is given, calculate width @@ -125,17 +124,34 @@ $last-child-float: $opposite-direction !default; width: grid-calc($columns, $total-columns); // If last column, float naturally instead of to the right - @if $last-column { float: $opposite-direction; } + @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 $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 $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 @@ -146,7 +162,9 @@ $last-child-float: $opposite-direction !default; } // If offset, calculate appropriate margins - @if $offset { margin-#{$default-float}: grid-calc($offset, $total-columns) !important; } + @if $offset { + margin-#{$default-float}: grid-calc($offset, $total-columns) !important; + } } @@ -157,23 +175,30 @@ $last-child-float: $opposite-direction !default; @for $i from 0 through $total-columns - 1 { .#{$size}-push-#{$i} { - @include grid-column($push:$i, $collapse:null, $float:false); + @include grid-column($push: $i, $collapse: null, $float: false); } + .#{$size}-pull-#{$i} { - @include grid-column($pull:$i, $collapse:null, $float:false); + @include grid-column($pull: $i, $collapse: null, $float: false); } } .column, - .columns { @include grid-column($columns:false, $position:true); } + .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); } + .#{$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}-offset-#{$i} { + @include grid-column($offset: $i, $collapse: null, $float: false); + } } .#{$size}-reset-order { @@ -185,7 +210,9 @@ $last-child-float: $opposite-direction !default; } .column.#{$size}-centered, - .columns.#{$size}-centered { @include grid-column($center:true, $collapse:null, $float:false); } + .columns.#{$size}-centered { + @include grid-column($center: true, $collapse: null, $float: false); + } .column.#{$size}-uncentered, .columns.#{$size}-uncentered { @@ -196,7 +223,7 @@ $last-child-float: $opposite-direction !default; // Fighting [class*="column"] + [class*="column"]:last-child .column.#{$size}-centered:last-child, - .columns.#{$size}-centered:last-child{ + .columns.#{$size}-centered:last-child { float: none; } @@ -211,20 +238,28 @@ $last-child-float: $opposite-direction !default; 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; - } - } - } + .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") { @@ -233,57 +268,81 @@ $last-child-float: $opposite-direction !default; @include grid-row; &.collapse { - > .column, - > .columns { @include grid-column($collapse:true, $float:false); } - .row {margin-left:0; margin-right:0;} + >.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); } + .row { + @include grid-row($behavior: nest); + + &.collapse { + @include grid-row($behavior: nest-collapse); + } } } .column, - .columns { @include grid-column($columns:$total-columns); } + .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; } + [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); + @include grid-html-classes($size: small); } @media #{$medium-up} { - @include grid-html-classes($size:medium); + @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); + @include grid-column($push: $i, $collapse: null, $float: false); } + .pull-#{$i} { - @include grid-column($pull:$i, $collapse:null, $float:false); + @include grid-column($pull: $i, $collapse: null, $float: false); } } } + @media #{$large-up} { - @include grid-html-classes($size:large); + @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); + @include grid-column($push: $i, $collapse: null, $float: false); } + .pull-#{$i} { - @include grid-column($pull:$i, $collapse:null, $float:false); + @include grid-column($pull: $i, $collapse: null, $float: false); } } } } + @if $include-xl-html-grid-classes { @media #{$xlarge-up} { - @include grid-html-classes($size:xlarge); + @include grid-html-classes($size: xlarge); } + @media #{$xxlarge-up} { - @include grid-html-classes($size:xxlarge); + @include grid-html-classes($size: xxlarge); } } -} +} \ No newline at end of file diff --git a/_sass/foundation-components/_panels.scss b/_sass/foundation-components/_panels.scss index b3018e32e05..b7bba360f3a 100644 --- a/_sass/foundation-components/_panels.scss +++ b/_sass/foundation-components/_panels.scss @@ -29,6 +29,7 @@ $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 // @@ -36,7 +37,7 @@ $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightne // $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) { +@mixin panel($bg: $panel-bg, $padding: $panel-padding, $adjust: $panel-header-adjust) { @if $bg { $bg-lightness: lightness($bg); @@ -48,26 +49,70 @@ $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightne padding: $padding; background: $bg; - @if $bg-lightness >= 50% { color: $panel-font-color; } - @else { color: $panel-font-color-alt; } + + @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; } + &>: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; } + @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; } + + @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; } + h1, + h2, + h3, + h4, + h5, + h6 { + line-height: 1; + margin-bottom: calc(rem-calc(20) / 2); + + &.subheader { + line-height: 1.4; + } } } } @@ -77,10 +122,12 @@ $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightne @if $include-html-panel-classes { /* Panels */ - .panel { @include panel; + .panel { + @include panel; &.callout { @include panel(scale-color($primary-color, $lightness: 94%)); + a:not(.button) { color: $callout-panel-link-color; @@ -98,4 +145,4 @@ $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightne } } -} +} \ No newline at end of file diff --git a/_sass/foundation-components/_side-nav.scss b/_sass/foundation-components/_side-nav.scss index d16be157135..ba29e6e6f63 100644 --- a/_sass/foundation-components/_side-nav.scss +++ b/_sass/foundation-components/_side-nav.scss @@ -22,7 +22,7 @@ $side-nav-list-margin: rem-calc(0 0 7 0) !default; $side-nav-link-color: $primary-color !default; $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%) !default; $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%) !default; -$side-nav-link-bg-hover: hsla(0, 0, 0, 0.025) !default; +$side-nav-link-bg-hover: hsla(0deg, 0%, 0%, 0.025) !default; $side-nav-link-margin: 0 !default; $side-nav-link-padding: rem-calc(7 14) !default; $side-nav-font-size: rem-calc(14) !default; @@ -54,12 +54,11 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default; // $font-size - Font size of nav items. Default: $side-nav-font-size. // $link-color - Color of navigation links. Default: $side-nav-link-color. // $link-color-hover - Color of navigation links when hovered. Default: $side-nav-link-color-hover. -@mixin side-nav( - $divider-color:$side-nav-divider-color, - $font-size:$side-nav-font-size, - $link-color:$side-nav-link-color, - $link-color-hover:$side-nav-link-color-hover, - $link-bg-hover:$side-nav-link-bg-hover) { +@mixin side-nav($divider-color: $side-nav-divider-color, + $font-size: $side-nav-font-size, + $link-color: $side-nav-link-color, + $link-color-hover: $side-nav-link-color-hover, + $link-bg-hover: $side-nav-link-bg-hover) { display: block; margin: 0; padding: $side-nav-padding; @@ -77,6 +76,7 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default; color: $link-color; margin: $side-nav-link-margin; padding: $side-nav-link-padding; + &:hover, &:focus { background: $link-bg-hover; @@ -84,7 +84,7 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default; } } - &.active > a:first-child:not(.button) { + &.active>a:first-child:not(.button) { color: $side-nav-link-color-active; font-weight: $side-nav-font-weight-active; font-family: $side-nav-font-family-active; @@ -100,10 +100,12 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default; &.heading { color: $side-nav-heading-color; + font: { size: $side-nav-heading-font-size; weight: $side-nav-heading-font-weight; } + text-transform: $side-nav-heading-text-transform; } } @@ -111,6 +113,8 @@ $side-nav-divider-color: scale-color($white, $lightness: 10%) !default; @include exports("side-nav") { @if $include-html-nav-classes { - .side-nav { @include side-nav; } + .side-nav { + @include side-nav; + } } -} +} \ No newline at end of file diff --git a/_sass/foundation-components/_top-bar.scss b/_sass/foundation-components/_top-bar.scss index ce59a47d599..b6d5ffa10dc 100644 --- a/_sass/foundation-components/_top-bar.scss +++ b/_sass/foundation-components/_top-bar.scss @@ -39,7 +39,7 @@ $topbar-link-bg-active: $primary-color !default; $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%) !default; $topbar-link-font-family: $body-font-family !default; $topbar-link-text-transform: none !default; -$topbar-link-padding: ($topbar-height / 3) !default; +$topbar-link-padding: calc($topbar-height / 3) !default; $topbar-back-link-size: rem-calc(18) !default; $topbar-link-dropdown-padding: rem-calc(20) !default; $topbar-button-font-size: 0.75rem !default; @@ -119,7 +119,9 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text width: 100%; background: $topbar-bg; - .top-bar { margin-bottom: $topbar-margin-bottom; } + .top-bar { + margin-bottom: $topbar-margin-bottom; + } } // Wrapped around .top-bar to make it stick to the top @@ -141,6 +143,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text width: 100%; z-index: 99; } + // Ensure you can scroll the menu on small screens .top-bar-section { z-index: 98; @@ -163,19 +166,24 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text list-style: none; } - .row { max-width: none; } + .row { + max-width: none; + } form, - input { margin-bottom: 0; } + input { + margin-bottom: 0; + } - input { - height: $topbar-input-height; - padding-top: .35rem; - padding-bottom: .35rem; - font-size: $topbar-button-font-size; + input { + height: $topbar-input-height; + padding-top: .35rem; + padding-bottom: .35rem; + font-size: $topbar-button-font-size; } - .button, button { + .button, + button { padding-top: .35rem + rem-calc(1); padding-bottom: .35rem + rem-calc(1); margin-bottom: 0; @@ -201,10 +209,16 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text margin: 0; font-size: $rem-base; - h1, h2, h3, h4, p, span { + h1, + h2, + h3, + h4, + p, + span { line-height: $topbar-height; font-size: $topbar-title-font-size; margin: 0; + a { font-weight: $topbar-title-weight; color: $topbar-link-color; @@ -239,9 +253,10 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text margin-top: -16px; a { - @if $text-direction == rtl { + @if $text-direction ==rtl { text-indent: -58px; } + height: 34px; line-height: 33px; padding: 0 $topbar-link-padding+rem-calc(25) 0 $topbar-link-padding; @@ -271,16 +286,20 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text height: auto; background: transparent; - .title-area { background: $topbar-bg; } + .title-area { + background: $topbar-bg; + } .toggle-topbar { - a { color: $topbar-menu-link-color-toggled; - span::after { + a { + color: $topbar-menu-link-color-toggled; + + span::after { // Shh, don't tell, but box-shadows create the menu icon :) // Change the color of the bars when the menu is expanded, using given thickness from hamburger() above box-shadow: 0 0 0 1px $topbar-menu-icon-color-toggled, - 0 7px 0 1px $topbar-menu-icon-color-toggled, - 0 14px 0 1px $topbar-menu-icon-color-toggled; + 0 7px 0 1px $topbar-menu-icon-color-toggled, + 0 14px 0 1px $topbar-menu-icon-color-toggled; } } } @@ -313,7 +332,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text ul li { background: $topbar-dropdown-bg; - & > a { + + &>a { display: block; width: 100%; color: $topbar-link-color; @@ -328,39 +348,65 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text font-size: $topbar-link-font-size; padding-#{$opposite-direction}: $topbar-link-padding; padding-#{$default-float}: $topbar-link-padding; - @include button-style($bg:$primary-color); + @include button-style($bg: $primary-color); + } + + &.button.secondary { + @include button-style($bg: $secondary-color); + } + + &.button.success { + @include button-style($bg: $success-color); + } + + &.button.alert { + @include button-style($bg: $alert-color); + } + + &.button.warning { + @include button-style($bg: $warning-color); } - &.button.secondary { @include button-style($bg:$secondary-color); } - &.button.success { @include button-style($bg:$success-color); } - &.button.alert { @include button-style($bg:$alert-color); } - &.button.warning { @include button-style($bg:$warning-color); } } - > button { + >button { font-size: $topbar-link-font-size; padding-#{$opposite-direction}: $topbar-link-padding; padding-#{$default-float}: $topbar-link-padding; - @include button-style($bg:$primary-color); + @include button-style($bg: $primary-color); + + &.secondary { + @include button-style($bg: $secondary-color); + } - &.secondary { @include button-style($bg:$secondary-color); } - &.success { @include button-style($bg:$success-color); } - &.alert { @include button-style($bg:$alert-color); } - &.warning { @include button-style($bg:$warning-color); } + &.success { + @include button-style($bg: $success-color); + } + + &.alert { + @include button-style($bg: $alert-color); + } + + &.warning { + @include button-style($bg: $warning-color); + } } // Apply the hover link color when it has that class - &:hover:not(.has-form) > a { + &:hover:not(.has-form)>a { background-color: $topbar-link-bg-color-hover; + @if ($topbar-link-bg-hover) { background: $topbar-link-bg-hover; } + color: $topbar-link-color-hover; } // Apply the active link color when it has that class - &.active > a { + &.active>a { background: $topbar-link-bg-active; color: $topbar-link-color-active; + &:hover { background: $topbar-link-bg-active-hover; color: $topbar-link-color-active-hover; @@ -369,31 +415,37 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text } // Add some extra padding for list items contains buttons - .has-form { padding: $topbar-link-padding; } + .has-form { + padding: $topbar-link-padding; + } // Styling for list items that have a dropdown within them. .has-dropdown { position: relative; - & > a { + &>a { &:after { - @if ($topbar-arrows){ + @if ($topbar-arrows) { @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), $default-float); } + margin-#{$opposite-direction}: $topbar-link-padding; - margin-top: -($topbar-dropdown-toggle-size / 2) - 2; + margin-top: -(calc($topbar-dropdown-toggle-size / 2)) - 2; position: absolute; top: 50%; #{$opposite-direction}: 0; } } - &.moved { position: static; - & > .dropdown { + &.moved { + position: static; + + &>.dropdown { @include topbar-show-dropdown(); width: 100%; } - & > a:after { + + &>a:after { display: none; } } @@ -415,25 +467,38 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text a { font-weight: $topbar-dropdown-link-weight; padding: 8px $topbar-link-padding; + &.parent-link { font-weight: $topbar-link-weight; } } - &.title h5, &.parent-link { + &.title h5, + &.parent-link { // Back Button margin-bottom: 0; margin-top: 0; font-size: $topbar-back-link-size; + a { color: $topbar-link-color; // line-height: ($topbar-height / 2); display: block; - &:hover { background:none; } + + &:hover { + background: none; + } } } - &.has-form { padding: 8px $topbar-link-padding; } - .button, button { top: auto; } + + &.has-form { + padding: 8px $topbar-link-padding; + } + + .button, + button { + top: auto; + } } label { @@ -447,7 +512,9 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text } } - .js-generated { display: block; } + .js-generated { + display: block; + } // Top Bar styles intended for screen sizes above the breakpoint. @@ -457,10 +524,17 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text @include clearfix; overflow: visible; - .toggle-topbar { display: none; } + .toggle-topbar { + display: none; + } + + .title-area { + float: $default-float; + } - .title-area { float: $default-float; } - .name h1 a { width: auto; } + .name h1 a { + width: auto; + } input, .button, @@ -468,10 +542,12 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text font-size: rem-calc(14); position: relative; height: $topbar-input-height; - top: (($topbar-height - $topbar-input-height) / 2); + top: calc(($topbar-height - $topbar-input-height) / 2); } - &.expanded { background: $topbar-bg; } + &.expanded { + background: $topbar-bg; + } } .contain-to-grid .top-bar { @@ -481,7 +557,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text } .top-bar-section { - @include single-transition(none,0,0); + @include single-transition(none, 0, 0); #{$default-float}: 0 !important; ul { @@ -491,39 +567,49 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text li { float: $default-float; - .js-generated { display: none; } + + .js-generated { + display: none; + } } } li { &.hover { - > a:not(.button) { + >a:not(.button) { background-color: $topbar-link-bg-color-hover; + @if ($topbar-link-bg-hover) { background: $topbar-link-bg-hover; } + color: $topbar-link-color-hover; } } + &:not(.has-form) { a:not(.button) { padding: 0 $topbar-link-padding; line-height: $topbar-height; background: $topbar-link-bg; + &:hover { background-color: $topbar-link-bg-color-hover; + @if ($topbar-link-bg-hover) { background: $topbar-link-bg-hover; } } } } + &.active:not(.has-form) { a:not(.button) { padding: 0 $topbar-link-padding; line-height: $topbar-height; color: $topbar-link-color-active; background: $topbar-link-bg-active; + &:hover { background: $topbar-link-bg-active-hover; color: $topbar-link-color-active-hover; @@ -533,35 +619,40 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text } .has-dropdown { - @if($topbar-arrows){ - & > a { + @if($topbar-arrows) { + &>a { padding-#{$opposite-direction}: $topbar-link-padding + $topbar-link-dropdown-padding !important; + &:after { @include css-triangle($topbar-dropdown-toggle-size, rgba($topbar-dropdown-toggle-color, $topbar-dropdown-toggle-alpha), top); - margin-top: -($topbar-dropdown-toggle-size / 2); - top: ($topbar-height / 2); + margin-top: -(calc($topbar-dropdown-toggle-size / 2)); + top: calc($topbar-height / 2); } } } - &.moved { position: relative; - & > .dropdown { + &.moved { + position: relative; + + &>.dropdown { @include topbar-hide-dropdown(); } } - &.hover, &.not-click:hover { - & > .dropdown { + &.hover, + &.not-click:hover { + &>.dropdown { @include topbar-show-dropdown(); } } - > a:focus + .dropdown { + + >a:focus+.dropdown { @include topbar-show-dropdown(); } .dropdown li.has-dropdown { - & > a { - @if ($topbar-dropdown-arrows){ + &>a { + @if ($topbar-dropdown-arrows) { &:after { border: none; content: "\00bb"; @@ -591,14 +682,15 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text } &:not(.has-form):not(.active) { - & > a:not(.button) { + &>a:not(.button) { color: $topbar-dropdown-link-color; background: $topbar-dropdown-link-bg; } - &:hover > a:not(.button) { + &:hover>a:not(.button) { color: $topbar-dropdown-link-color-hover; background-color: $topbar-link-bg-color-hover; + @if ($topbar-dropdown-link-bg-hover) { background: $topbar-dropdown-link-bg-hover; } @@ -618,8 +710,8 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text } } - & > ul > .divider, - & > ul > [role="separator"] { + &>ul>.divider, + &>ul>[role="separator"] { border-bottom: none; border-top: none; border-#{$opposite-direction}: $topbar-divider-border-bottom; @@ -630,7 +722,7 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text .has-form { background: $topbar-link-bg; - padding: 0 ($topbar-height / 3); + padding: 0 calc($topbar-height / 3); height: $topbar-height; } @@ -640,15 +732,20 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text #{$default-float}: auto; #{$opposite-direction}: 0; - li .dropdown { #{$opposite-direction}: 100%; } + li .dropdown { + #{$opposite-direction}: 100%; + } } } + .#{$default-float} { li .dropdown { #{$opposite-direction}: auto; #{$default-float}: 0; - li .dropdown { #{$default-float}: 100%; } + li .dropdown { + #{$default-float}: 100%; + } } } } @@ -657,17 +754,20 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text // background & text color on hover. .no-js .top-bar-section { ul li { + // Apply the hover link color when it has that class - &:hover > a { + &:hover>a { background-color: $topbar-link-bg-color-hover; + @if ($topbar-link-bg-hover) { background: $topbar-link-bg-hover; } + color: $topbar-link-color-hover; } // Apply the active link color when it has that class - &:active > a { + &:active>a { background: $topbar-link-bg-active; color: $topbar-link-color-active; } @@ -675,15 +775,16 @@ $topbar-dropdown-arrows: true !default; //Set false to remove the \00bb >> text .has-dropdown { &:hover { - & > .dropdown { + &>.dropdown { @include topbar-show-dropdown(); } } - > a:focus + .dropdown { + + >a:focus+.dropdown { @include topbar-show-dropdown(); } } } } } -} +} \ No newline at end of file diff --git a/_sass/foundation-components/_type.scss b/_sass/foundation-components/_type.scss index ff199963185..33f59f3bc8b 100644 --- a/_sass/foundation-components/_type.scss +++ b/_sass/foundation-components/_type.scss @@ -59,7 +59,7 @@ $code-color: $oil !default; $code-font-family: $font-family-monospace !default; $code-font-weight: $font-weight-normal !default; $code-background-color: scale-color($secondary-color, $lightness: 70%) !default; -$code-border-size: 1px !default; +$code-border-size: 0px !default; $code-border-style: solid !default; $code-border-color: scale-color($code-background-color, $lightness: -10%) !default; $code-padding: rem-calc(2) rem-calc(5) rem-calc(1) !default; diff --git a/assets/css/styles_feeling_responsive.scss b/assets/css/styles_feeling_responsive.scss index 860ab2213da..fe7521b7826 100755 --- a/assets/css/styles_feeling_responsive.scss +++ b/assets/css/styles_feeling_responsive.scss @@ -42,4 +42,8 @@ sitemap: @import "foundation-components/grid"; @import "09_elements.scss"; +{% if site.asciidoctor-enabled == true %} +@import "10_asciidoc.scss"; +{% endif %} + @import "11_syntax-highlighting.scss"; diff --git a/assets/fonts/.fontcustom-manifest.json b/assets/fonts/.fontcustom-manifest.json index dfb4588d63b..ae43822ac5d 100644 --- a/assets/fonts/.fontcustom-manifest.json +++ b/assets/fonts/.fontcustom-manifest.json @@ -1,7 +1,7 @@ { "checksum": { - "previous": "c5cdc0a58b7277d1f320a4ad50aa8ae2ad47fa6ed879c164db1cfb75439bd1d9", - "current": "c5cdc0a58b7277d1f320a4ad50aa8ae2ad47fa6ed879c164db1cfb75439bd1d9" + "previous": "03f5dd2a3a893dc3637cdfbb6da25d276f597ea03db701e7220b5dfcde6ef9bf", + "current": "03f5dd2a3a893dc3637cdfbb6da25d276f597ea03db701e7220b5dfcde6ef9bf" }, "fonts": [ "./iconfont.ttf", @@ -106,6 +106,10 @@ "codepoint": 61718, "source": "svg-files-for-custom-font/globe.svg" }, + "googleplus": { + "codepoint": 61750, + "source": "svg-files-for-custom-font/googleplus.svg" + }, "heart": { "codepoint": 61719, "source": "svg-files-for-custom-font/heart.svg" @@ -239,8 +243,8 @@ "font_name": "iconfont", "force": false, "input": { - "templates": "svg-files-for-custom-font", - "vectors": "svg-files-for-custom-font" + "templates": "svg-files-for-custom-font/", + "vectors": "svg-files-for-custom-font/" }, "no_hash": true, "output": { diff --git a/assets/fonts/iconfont-preview.html b/assets/fonts/iconfont-preview.html index 188c22a5ab5..ecb1902223c 100644 --- a/assets/fonts/iconfont-preview.html +++ b/assets/fonts/iconfont-preview.html @@ -184,6 +184,7 @@ .icon-feather:before, .icon-github:before, .icon-globe:before, +.icon-googleplus:before, .icon-heart:before, .icon-heart-outlined:before, .icon-home:before, @@ -252,6 +253,7 @@ .icon-feather:before { content: "\f114"; } .icon-github:before { content: "\f115"; } .icon-globe:before { content: "\f116"; } +.icon-googleplus:before { content: "\f136"; } .icon-heart:before { content: "\f117"; } .icon-heart-outlined:before { content: "\f118"; } .icon-home:before { content: "\f119"; } @@ -297,7 +299,7 @@
    -

    iconfont contains 54 glyphs:

    +

    iconfont contains 55 glyphs:

    Toggle Preview Characters
    @@ -614,6 +616,19 @@

    iconfont contains 54 glyphs:

    +
    +
    + PpPpPpPpPpPpPpPpPpPp +
    +
    + 12141618212436486072 +
    +
    + + +
    +
    +
    PpPpPpPpPpPpPpPpPpPp diff --git a/assets/fonts/iconfont.css b/assets/fonts/iconfont.css index e54ad53a60b..a748578f8b8 100644 --- a/assets/fonts/iconfont.css +++ b/assets/fonts/iconfont.css @@ -47,6 +47,7 @@ .icon-feather:before, .icon-github:before, .icon-globe:before, +.icon-googleplus:before, .icon-heart:before, .icon-heart-outlined:before, .icon-home:before, @@ -115,6 +116,7 @@ .icon-feather:before { content: "\f114"; } .icon-github:before { content: "\f115"; } .icon-globe:before { content: "\f116"; } +.icon-googleplus:before { content: "\f136"; } .icon-heart:before { content: "\f117"; } .icon-heart-outlined:before { content: "\f118"; } .icon-home:before { content: "\f119"; } diff --git a/assets/fonts/iconfont.eot b/assets/fonts/iconfont.eot index 5d952f97d81..af95ebd3c09 100644 Binary files a/assets/fonts/iconfont.eot and b/assets/fonts/iconfont.eot differ diff --git a/assets/fonts/iconfont.svg b/assets/fonts/iconfont.svg index 7ffcf70c5da..b9e507c292d 100644 --- a/assets/fonts/iconfont.svg +++ b/assets/fonts/iconfont.svg @@ -1,28 +1,28 @@ - + -Created by FontForge 20150330 at Wed Apr 15 23:17:37 2015 - By Guni,,, -Copyright (c) 2015, Guni,,, +Created by FontForge 20120731 at Wed Jan 20 15:09:53 2016 + By Andrey Fedorov,,, +Created by Andrey Fedorov,,, with FontForge 2.0 (http://fontforge.sf.net) +c-13.8242 10.0605 -33.0244 10.8027 -47.8213 0.43457c-18.6367 -13.1064 -23.1934 -38.8096 -10.1123 -57.4971c13.0312 -18.6367 38.7334 -23.1943 57.3447 -10.1377z" /> +c-27.1865 0 -40.8066 -22.0156 -47.9482 -40.167c-2.61133 -6.50195 -3.25195 -15.5645 -3.25195 -24.6523v-182.759h-102.399v219.034z" /> +d="M499.481 -12.2881c3.07227 -5.40137 3.02051 -12.0576 -0.15332 -17.4082c-3.1748 -5.40137 -9.03711 -8.7041 -15.3086 -8.7041h-456.039c-6.29688 0 -12.1084 3.30273 -15.3086 8.7041c-3.17383 5.35059 -3.22559 12.0068 -0.12793 17.4082l227.993 425.779 +c3.14941 5.50391 9.03711 8.90918 15.4629 8.90918c6.40039 0 12.2881 -3.40527 15.4629 -8.90918zM281.6 12.7998v51.2002h-51.1992v-51.2002h51.1992zM281.6 102.4v166.399h-51.1992v-166.399h51.1992z" /> @@ -88,28 +88,28 @@ d="M487.04 356.173c-111.514 -65.4336 -103.526 -199.834 -181.657 -260.48c-58.8037 c76.2363 196.736 335.616 294.887 335.616 294.887s-183.015 7.75684 -305.332 -152.064c-3.27637 36.5059 -8.7041 135.271 86.0166 195.84c128.409 82.2021 373.043 18.3047 347.008 3.04688z" /> +c4.99219 5.1709 11.5459 7.73145 18.125 7.9873c6.5791 -0.255859 13.1328 -2.79004 18.125 -7.9873l205.389 -205.594c10.5215 -10.8799 13.7988 -19.1738 -1.51074 -19.1738z" /> +c36.3262 52.916 86.5029 96.2051 146.509 124.314z" /> +c107.546 12.0576 208.486 -39.501 222.438 -140.646c15.6934 -114.202 -48.5371 -237.901 -163.559 -228.992c-31.1807 2.43164 -44.2363 17.8945 -68.6592 32.7422z" /> +v51.2002h51.2002v51.1992h-51.2002v51.2002h51.2002v51.2002h-51.2002v30.7461c0 11.3145 9.16504 20.4541 20.5059 20.4541h471.04c11.3145 0 20.4541 -9.13965 20.4541 -20.4541v-30.7461zM204.8 115.2l128 76.7998l-128 76.7998v-153.6z" /> +c-11.417 11.1104 -12.3135 26.6494 0 40.2939l95.9238 100.045l-95.9238 100.045c-12.3135 13.6445 -11.417 29.209 0 40.3457c11.3926 11.1611 30.6436 10.4697 41.3447 0z" /> @@ -195,10 +195,10 @@ d="M256 407.04c118.759 0 215.04 -96.2812 215.04 -215.04s-96.2812 -215.04 -215.04 + +c3.2002 6.39941 4.71094 9.44629 4.71094 9.44629l57.5996 115.2l-32 64s-1.48438 3.0459 -4.68457 9.44629c-3.2002 6.39941 -3.71191 16.1533 9.08789 16.1533h72.3965c5.70898 0 14.1572 -2.6875 17.6641 -9.75391z" />
    '); + $titleLi = $('
  • '); } else { $titleLi = $('
  • '); } @@ -3346,4 +3346,4 @@ $(document).foundation({ animation: 'fade', animation_speed: 250 } -}); \ No newline at end of file +}); diff --git a/assets/js/javascript.min.js b/assets/js/javascript.min.js index e2de34f56a4..e934018ebc9 100755 --- a/assets/js/javascript.min.js +++ b/assets/js/javascript.min.js @@ -1,5 +1,733 @@ -function FastClick(e,t){"use strict";function n(e,t){return function(){return e.apply(t,arguments)}}var i;if(t=t||{},this.trackingClick=!1,this.trackingClickStart=0,this.targetElement=null,this.touchStartX=0,this.touchStartY=0,this.lastTouchIdentifier=0,this.touchBoundary=t.touchBoundary||10,this.layer=e,this.tapDelay=t.tapDelay||200,!FastClick.notNeeded(e)){for(var r=["onMouse","onClick","onTouchStart","onTouchMove","onTouchEnd","onTouchCancel"],o=this,s=0,a=r.length;a>s;s++)o[r[s]]=n(o[r[s]],o);deviceIsAndroid&&(e.addEventListener("mouseover",this.onMouse,!0),e.addEventListener("mousedown",this.onMouse,!0),e.addEventListener("mouseup",this.onMouse,!0)),e.addEventListener("click",this.onClick,!0),e.addEventListener("touchstart",this.onTouchStart,!1),e.addEventListener("touchmove",this.onTouchMove,!1),e.addEventListener("touchend",this.onTouchEnd,!1),e.addEventListener("touchcancel",this.onTouchCancel,!1),Event.prototype.stopImmediatePropagation||(e.removeEventListener=function(t,n,i){var r=Node.prototype.removeEventListener;"click"===t?r.call(e,t,n.hijacked||n,i):r.call(e,t,n,i)},e.addEventListener=function(t,n,i){var r=Node.prototype.addEventListener;"click"===t?r.call(e,t,n.hijacked||(n.hijacked=function(e){e.propagationStopped||n(e)}),i):r.call(e,t,n,i)}),"function"==typeof e.onclick&&(i=e.onclick,e.addEventListener("click",function(e){i(e)},!1),e.onclick=null)}}!function(e,t){"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(e,t){function n(e){var t=e.length,n=Z.type(e);return"function"===n||Z.isWindow(e)?!1:1===e.nodeType&&t?!0:"array"===n||0===t||"number"==typeof t&&t>0&&t-1 in e}function i(e,t,n){if(Z.isFunction(t))return Z.grep(e,function(e,i){return!!t.call(e,i,e)!==n});if(t.nodeType)return Z.grep(e,function(e){return e===t!==n});if("string"==typeof t){if(at.test(t))return Z.filter(t,e,n);t=Z.filter(t,e)}return Z.grep(e,function(e){return Y.call(t,e)>=0!==n})}function r(e,t){for(;(e=e[t])&&1!==e.nodeType;);return e}function o(e){var t=pt[e]={};return Z.each(e.match(ht)||[],function(e,n){t[n]=!0}),t}function s(){J.removeEventListener("DOMContentLoaded",s,!1),e.removeEventListener("load",s,!1),Z.ready()}function a(){Object.defineProperty(this.cache={},0,{get:function(){return{}}}),this.expando=Z.expando+Math.random()}function l(e,t,n){var i;if(void 0===n&&1===e.nodeType)if(i="data-"+t.replace(bt,"-$1").toLowerCase(),n=e.getAttribute(i),"string"==typeof n){try{n="true"===n?!0:"false"===n?!1:"null"===n?null:+n+""===n?+n:xt.test(n)?Z.parseJSON(n):n}catch(r){}yt.set(e,t,n)}else n=void 0;return n}function c(){return!0}function u(){return!1}function d(){try{return J.activeElement}catch(e){}}function f(e,t){return Z.nodeName(e,"table")&&Z.nodeName(11!==t.nodeType?t:t.firstChild,"tr")?e.getElementsByTagName("tbody")[0]||e.appendChild(e.ownerDocument.createElement("tbody")):e}function h(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function p(e){var t=Mt.exec(e.type);return t?e.type=t[1]:e.removeAttribute("type"),e}function g(e,t){for(var n=0,i=e.length;i>n;n++)vt.set(e[n],"globalEval",!t||vt.get(t[n],"globalEval"))}function m(e,t){var n,i,r,o,s,a,l,c;if(1===t.nodeType){if(vt.hasData(e)&&(o=vt.access(e),s=vt.set(t,o),c=o.events)){delete s.handle,s.events={};for(r in c)for(n=0,i=c[r].length;i>n;n++)Z.event.add(t,r,c[r][n])}yt.hasData(e)&&(a=yt.access(e),l=Z.extend({},a),yt.set(t,l))}}function v(e,t){var n=e.getElementsByTagName?e.getElementsByTagName(t||"*"):e.querySelectorAll?e.querySelectorAll(t||"*"):[];return void 0===t||t&&Z.nodeName(e,t)?Z.merge([e],n):n}function y(e,t){var n=t.nodeName.toLowerCase();"input"===n&&Ct.test(e.type)?t.checked=e.checked:("input"===n||"textarea"===n)&&(t.defaultValue=e.defaultValue)}function x(t,n){var i,r=Z(n.createElement(t)).appendTo(n.body),o=e.getDefaultComputedStyle&&(i=e.getDefaultComputedStyle(r[0]))?i.display:Z.css(r[0],"display");return r.detach(),o}function b(e){var t=J,n=Pt[e];return n||(n=x(e,t),"none"!==n&&n||(Wt=(Wt||Z(" @@ -114,11 +118,11 @@ With foundation responsive videos are easy. [More ›](http://foundation.zurb.co {% endhighlight %} - + ## Images: Title, Thumbnails, Homepage {#images} -There are several types of images you can define via front matter. If you want to change the images used in the header have a look at [Style your Header]({{ site.url }}/headers/). +There are several types of images you can define via front matter. If you want to change the images used in the header, have a look at [Style your Header]({{ site.url }}{{ site.baseurl }}/headers/). ### Title Images @@ -148,11 +152,9 @@ image: homepage: header_homepage_13.jpg ~~~ - - ### Captions with URL -Sometimes you want to give credit to the creator of your images, maybe with a link. Especially when you use Creative Commons-images like I do for this website. Just add the following front matter and *Feeling Responsive* does the rest: +Sometimes, you want to give credit to the creator of your images, maybe with a link. Especially when you use Creative Commons-images like I do for this website. Just add the following front matter and *Feeling Responsive* does the rest: ~~~ image: @@ -180,7 +182,7 @@ image: ## Create a Table of Contents {: .t60} -With the Kramdown parser for Markdown you can render a table of contents for your documents. Just insert the following HTML in your post before the actual content. More information on [»Automatic ›Table of Contents‹ Generation«][1]. +With the Kramdown parser for Markdown, you can render a table of contents for your documents. Just insert the following HTML in your post before the actual content. More information on [»Automatic ›Table of Contents‹ Generation«][1]. ### Bare Bones Version {% highlight html %} @@ -240,28 +242,25 @@ This include creates a next/previous link to a post of the same category using t {% raw %} {% include next-previous-post-in-category %}{% endraw %} ~~~ - ### improve_content -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. Got the idea from [Ben Balters Blog](http://ben.balter.com/). +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. Got the idea from [Ben Balters Blog](http://ben.balter.com/). ~~~ {% raw %}{% include _improve_content.html %}{% endraw %} ~~~ - ### list-collection -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. The following example loops through a collection called *wordpress*. +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. The following example loops through a collection called *wordpress*. ~~~ {% raw %}{% include list-collection collection='wordpress' %}{% endraw %} ~~~ - ### alert – Embed an alert in your content -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` and `text`. +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` and `text`. ~~~ {% raw %}{% include alert warning='This is a warning.' %} @@ -290,10 +289,9 @@ You can even use ``-tags inside the alert. Beware: Use " and ' properly. [Up to table of contents](#toc) {: .text-right } - ## Javascript/Foundation modules -*Feeling Responsive* uses the foundation framework and some of its javascript components. I reduced the modules, to decrease page load and make the theme faster. +*Feeling Responsive* uses the foundation framework and some of its Javascript components. I reduced the modules, to decrease page load and make the theme faster. I only added one other javascript-module: [`backstretch`][3] by Scott Robbin. These modules are currently used by the theme and included in `javascript.min.js`. There is also a non-minified version, if you want to take a closer look: `javascript.js`. diff --git a/pages/getting-started.md b/pages/getting-started.md index df274bc7a5d..c68398a794e 100644 --- a/pages/getting-started.md +++ b/pages/getting-started.md @@ -1,25 +1,25 @@ --- -layout: page -show_meta: false -title: "Getting Started" -subheadline: "A Step-by-Step Guide" -teaser: "This step-by-step guide helps you to customize Feeling Responsive to your needs." +layout : page +show_meta : false +title : "Getting Started in 10 Steps" +subheadline : "A Step-by-Step Guide" +teaser : "This step-by-step guide helps you to customize Feeling Responsive to your needs." header: - image_fullwidth: "header_homepage_13.jpg" -permalink: "/getting-started/" + image_fullwidth : "header_homepage_13.jpg" +permalink : "/getting-started/" --- -1. Open `_config.yml` and work it through, it's well documented +1. Open `_config.yml` and work it through, it's well documented. 1. Add your own `logo.png` to `/assets/img/`. -1. Open `_data/socialmedia.yml` and add your own social media links. -1. Open `_data/navigation.yml` and customize your navigation. -1. Open `_data/language.yml` and translate the theme if necessary. -1. Open `_data/services.yml` and customize links in the footer. -1. Open `_data/network.yml` and customize links in the footer. +1. Add your own social media links and open `_data/socialmedia.yml`. +1. Open `_sass/_01_settings_colors.scss` and adjust the the colors to your taste. +1. Customize your navigation and open `_data/navigation.yml`. +1. Translate this theme and open `_data/language.yml`. +1. Change the links in the footer and open `_data/services.yml` and `_data/network.yml`. 1. Open `_data/authors.yml` and edit author information and set default author in `config.yml`. -1. [Read the documentation][1] to check out all features of *Feeling Responsive*. 1. Make it yours and add your own content. +1. [Read the documentation][1] to check out all features of *Feeling Responsive*. -Check out the documentation for all the tricks › +Check out the documentation for all the tricks › - [1]: {{ site.url }}/documentation/ + [1]: {{ site.url }}{{ site.baseurl }}/documentation/ diff --git a/pages/headers.md b/pages/headers.md index f063cfc01e3..9861b49b2a6 100644 --- a/pages/headers.md +++ b/pages/headers.md @@ -9,6 +9,6 @@ permalink: "/headers/" --- \ No newline at end of file diff --git a/pages/pages-root-folder/index.md b/pages/pages-root-folder/index.md index 9b63780c4a9..6b095358eb1 100644 --- a/pages/pages-root-folder/index.md +++ b/pages/pages-root-folder/index.md @@ -21,7 +21,7 @@ widget3: title: "Download Theme" url: 'https://github.com/Phlow/feeling-responsive' image: widget-github-303x182.jpg - text: 'Feeling Responsive is free and licensed under a MIT License. Make it your own and start building. Grab the Bare-Bones-Version for a fresh start or learn how to use it with the education-version with sample posts and images. Then tell me via Twitter @phlow.' + text: 'Feeling Responsive is free and licensed under a MIT License. Make it your own and start building. The code is well-documented and explains you how it works.' # # Use the call for action to show a button on the frontpage # diff --git a/pages/roadmap.md b/pages/roadmap.md index dfa234026f4..10ef61a4481 100644 --- a/pages/roadmap.md +++ b/pages/roadmap.md @@ -1,56 +1,10 @@ --- -layout: page -title: "Roadmap" -subheadline: "ToDo-List & Ideas" -teaser: "Here are some ideas and features I want to implement in the future." +layout : page +title : "Roadmap – What's up next?!?" +subheadline : "ToDo-List & Ideas" +teaser : "Feeling Responsive works fine. I am happy lots of people use it. Currently I have no plans to make it better or worse." header: - image_fullwidth: "header_roadmap_3.jpg" -permalink: "/roadmap/" + image_fullwidth : "header_roadmap_3.jpg" +permalink : "/roadmap/" --- -## Ideas and possible new features -{: .t30 } - -* Get rid of Backstretch.js and solve it with pure CSS -* [Custom Scrollbar](https://css-tricks.com/custom-scrollbars-in-webkit/) -* Layout/Template for category-archives -* Layout/Template for collections -* Layout/Template for Landingpage -* Clean bare-bones version of *Feeling Responsive* -* Even better responsive typography -* Google AdSense ads -* More post-formats for blogging like special post formats for links, audio, tweets,... -* Make a [video-sitemap.xml](https://support.google.com/webmasters/answer/80472?hl=en) - - - -## Done - -* [Add schema.org Markup for Videos](https://support.google.com/webmasters/answer/2413309?hl=en) -* [Submit Feeling Responsive to jekyllthemes.org](http://jekyllthemes.org/themes/feeling-responsive/) -* Use `style` in front matter to inject css-styles into ` -* Add include to loop through collections -* Now with optional caption for header -* [Refined humans.txt](http://humanstxt.org/) -* [Produce an introduction video to showcase *Feeling Responsive*](https://www.youtube.com/embed/3b5zCFSmVvU) -* [Additional header with text]({{ site.url }}/headers/) -* Added Google Analtics support -* [Add redirection layout by KanishkKanishk](http://codingtips.kanishkkunal.in/redirects-jekyll-github-pages/) -* Convert Foundation Sass to use native Jekyll Sass support -* Optimize HTML and use Schema.org-Attributes › http://schema.org/Article -* Disqus comments -* Rework `list-entries.html` › now language ready -* [Create custom 404.html-webpage](https://help.github.com/articles/custom-404-pages/) -* [Add simple search box with Google](http://truongtx.me/2012/12/28/jekyll-create-simple-search-box/) -* Alternative non-landscape header -* Patterns for header -* Clean up color scheme and highlighting colors -* Make theme translation ready -* [Add draft-templates for new pages/posts](https://github.com/Phlow/feeling-responsive/tree/gh-pages/_drafts) -* [Step-by-Step-Guide to customize *Feeling Responsive*]({{ site.url }}/getting-started/) -* [Video-Post-Format to feature videos in a huge way]({{ site.url }}/design/video/) -* Title and captions for images -* SEO › Add metadescription to header.html and front matter -* [Adding Open Graph for Jekyll](https://gist.github.com/pathawks/1406355) -* [Gallery Post Example]({{ site.url }}/design/gallery/) -* [Adding pagination](http://jekyllrb.com/docs/pagination/) \ No newline at end of file