diff --git a/.editorconfig b/.editorconfig new file mode 100755 index 0000000..04ba039 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,20 @@ +# EditorConfig helps developers define and maintain consistent +# coding styles between different editors and IDEs +# editorconfig.org + +root = true + +[*] + +# Change these settings to your own preference +indent_style = space +indent_size = 2 + +# We recommend you to keep these unchanged +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false diff --git a/.gitignore b/.gitignore new file mode 100755 index 0000000..90560a8 --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# See http://help.github.com/ignore-files/ for more about ignoring files. +# +# If you find yourself ignoring temporary files generated by your text editor +# or operating system, you probably want to add a global ignore instead: +# git config --global core.excludesfile ~/.gitignore_global + +# Ignore bundler config +/.bundle + +# Ignore the build directory +/build + +# Ignore Sass' cache +/.sass-cache + +# Ignore .DS_store file +.DS_Store + +# Ignore generator of changes file +genchange.php + +# Ignore Ulysses files +.Ulysses-Group.plist +deletedchange.php diff --git a/.pullapprove.yml b/.pullapprove.yml new file mode 100755 index 0000000..c8717c9 --- /dev/null +++ b/.pullapprove.yml @@ -0,0 +1,17 @@ +version: 2 +groups: + code-review: + approve_by_comment: + approve_regex: ^Approved + enabled: true + reject_regex: ^Rejected + required: 2 + reset_on_push: + enabled: true + users: + - dboudreau + - haltersweb + - hkramer + - nitedog + - susanatx + - yatil diff --git a/Gemfile b/Gemfile new file mode 100755 index 0000000..33bb2b4 --- /dev/null +++ b/Gemfile @@ -0,0 +1,16 @@ +# If you have OpenSSL installed, we recommend updating +# the following line to use "https" +source 'http://rubygems.org' + +gem "middleman", "~>3.2.2" +gem "middleman-syntax" +gem 'middleman-autoprefixer' +gem 'middleman-gh-pages' +gem 'middleman-deploy', '~> 1.0' + +# Live-reloading plugin +gem "middleman-livereload", "~> 3.1.0" + +# For faster file watcher updates on Windows: +gem "wdm", "~> 0.1.0", :platforms => [:mswin, :mingw] +gem "compass", "~> 1.0" diff --git a/Gemfile.lock b/Gemfile.lock new file mode 100755 index 0000000..8c2f68c --- /dev/null +++ b/Gemfile.lock @@ -0,0 +1,134 @@ +GEM + remote: http://rubygems.org/ + specs: + activesupport (3.2.22.4) + i18n (~> 0.6, >= 0.6.4) + multi_json (~> 1.0) + autoprefixer-rails (1.3.1.20140619) + execjs + chunky_png (1.3.7) + coffee-script (2.2.0) + coffee-script-source + execjs + coffee-script-source (1.10.0) + compass (1.0.3) + chunky_png (~> 1.2) + compass-core (~> 1.0.2) + compass-import-once (~> 1.0.5) + rb-fsevent (>= 0.9.3) + rb-inotify (>= 0.9) + sass (>= 3.3.13, < 3.5) + compass-core (1.0.3) + multi_json (~> 1.0) + sass (>= 3.3.0, < 3.5) + compass-import-once (1.0.5) + sass (>= 3.2, < 3.5) + em-websocket (0.5.1) + eventmachine (>= 0.12.9) + http_parser.rb (~> 0.6.0) + eventmachine (1.2.0.1) + execjs (1.4.1) + multi_json (~> 1.0) + ffi (1.9.14) + haml (4.0.7) + tilt + hike (1.2.3) + http_parser.rb (0.6.0) + i18n (0.6.11) + json (2.0.2) + kramdown (1.12.0) + listen (1.3.1) + rb-fsevent (>= 0.9.3) + rb-inotify (>= 0.9) + rb-kqueue (>= 0.2) + middleman (3.2.2) + coffee-script (~> 2.2.0) + compass (>= 0.12.2) + execjs (~> 1.4.0) + haml (>= 3.1.6) + kramdown (~> 1.2) + middleman-core (= 3.2.2) + middleman-sprockets (>= 3.1.2) + sass (>= 3.1.20) + uglifier (~> 2.4.0) + middleman-autoprefixer (1.1.3) + autoprefixer-rails (~> 1.3.1) + middleman-core (~> 3.2) + middleman-sprockets (~> 3.2) + middleman-core (3.2.2) + activesupport (~> 3.2.6) + bundler (~> 1.1) + i18n (~> 0.6.9) + listen (~> 1.1) + rack (>= 1.4.5) + rack-test (~> 0.6.1) + thor (>= 0.15.2, < 2.0) + tilt (~> 1.4.1) + middleman-deploy (1.0.0) + middleman-core (>= 3.2) + net-sftp + ptools + middleman-gh-pages (0.3.1) + rake (> 0.9.3) + middleman-livereload (3.1.1) + em-websocket (>= 0.2.0) + middleman-core (>= 3.0.2) + multi_json (~> 1.0) + rack-livereload + middleman-sprockets (3.3.3) + middleman-core (>= 3.2) + sprockets (~> 2.2) + sprockets-helpers (~> 1.1.0) + sprockets-sass (~> 1.1.0) + middleman-syntax (3.0.0) + middleman-core (>= 3.2) + rouge (~> 2.0) + multi_json (1.12.1) + net-sftp (2.1.2) + net-ssh (>= 2.6.5) + net-ssh (3.2.0) + ptools (1.3.3) + rack (1.6.4) + rack-livereload (0.3.16) + rack + rack-test (0.6.3) + rack (>= 1.0) + rake (11.2.2) + rb-fsevent (0.9.7) + rb-inotify (0.9.7) + ffi (>= 0.5.0) + rb-kqueue (0.2.4) + ffi (>= 0.5.0) + rouge (2.0.6) + sass (3.4.22) + sprockets (2.12.4) + hike (~> 1.2) + multi_json (~> 1.0) + rack (~> 1.0) + tilt (~> 1.1, != 1.3.0) + sprockets-helpers (1.1.0) + sprockets (~> 2.0) + sprockets-sass (1.1.0) + sprockets (~> 2.0) + tilt (~> 1.1) + thor (0.19.1) + tilt (1.4.1) + uglifier (2.4.0) + execjs (>= 0.3.0) + json (>= 1.8.0) + +PLATFORMS + ruby + +DEPENDENCIES + compass (~> 1.0) + middleman (~> 3.2.2) + middleman-autoprefixer + middleman-deploy (~> 1.0) + middleman-gh-pages + middleman-livereload (~> 3.1.0) + middleman-syntax + wdm (~> 0.1.0) + +BUNDLED WITH + 1.13.0 diff --git a/README.md b/README.md old mode 100644 new mode 100755 index a2256cd..8e4bb55 --- a/README.md +++ b/README.md @@ -1,2 +1,25 @@ -# wai-media-intro -Accessible Media Introduction +# WAI Media Developer Intro + +This is the repository for the WAI tutorials, see [current draft][LivePage]. + +You can find the current draft state of the document on [this Github Pages site][GHPage] + +## How to contribute + +Basically, editing files works like a Wiki. + +Browse to the file using the [Github Page][GHPage] and click on the “Fork and Edit” button of the page. This will bring you to the Github detail page of that file where you can start editing the file using the edit button (“pen icon”) in the top right corner, if you’re logged into Github. [Here’s an example in the Images Tutorial.][exmpImg] + +You can start editing right away. We use the standard Markdown syntax. If you get the following note, this is expected behavior: + +> You are editing a file in a project you do not have write access to. We are forking this project for you (if one does not yet exist) to write your proposed changes to. Submitting a change to this file will write it to a new branch in your fork so you can send a pull request. + +It is technical for “All right, make your edits, we make sure you can send them in as a proposal!” + +Don’t forget to add some descriptive text at the bottom that comments your change. Try to be concise. Klick the “Propose this change” button to continue. Then you get another comment field, you can write down your motivation for the change here. Once you click “Send pull request” the editor of the notified of your proposal and may adopt it. + +Note that the changes are not immediately reflected on any page. If you want to see your changes in HTML that way is more technical and is described briefly in the following part of the document. But there is a preview button in the editor that gives you a fairly good example of how the rendered HTML will look like. + +[LivePage]:https://www.w3.org/WAI/tutorials/ +[GHPage]:http://w3c.github.io/wai-tutorials/ +[exmpIMG]:https://github.com/w3c/wai-tutorials/blob/master/source/images/informative.html.erb.md diff --git a/Rakefile b/Rakefile new file mode 100755 index 0000000..52a2b4c --- /dev/null +++ b/Rakefile @@ -0,0 +1 @@ +require 'middleman-gh-pages' diff --git a/config.rb b/config.rb new file mode 100755 index 0000000..7bcaa9b --- /dev/null +++ b/config.rb @@ -0,0 +1,244 @@ +### +# Compass +### + +# Change Compass configuration +# compass_config do |config| +# config.output_style = :compact +# end + +### +# Page options, layouts, aliases and proxies +### + +# Per-page layout changes: +# +# With no layout +# page "/path/to/file.html", :layout => false +# +# With alternative layout +# page "/path/to/file.html", :layout => :otherlayout +# +# A path which all have the same layout +# with_layout :admin do +# page "/admin/*" +# end + +# Proxy pages (http://middlemanapp.com/basics/dynamic-pages/) +# proxy "/this-page-has-no-template.html", "/template-file.html", :locals => { +# :which_fake_page => "Rendering a fake page with a local variable" } + +### +# Helpers +### + +# Automatic image dimensions on image_tag helper +# activate :automatic_image_sizes + +# Reload the browser automatically whenever files change +activate :livereload + +# Methods defined in the helpers block are available in templates +helpers do + def x_link_to(link_text, url, options = {}) + options[:class] ||= "" + if url == '/' + current_page.path + options[:class] << " current" + '' + link_text + '' + else + link_to(link_text, url, options) + end + end + + def nav_link(link_text, url, options = {}) + if url == '/' + current_page.path + # options[:class] << " current" + 'Current: ' + link_text + '' + else + x_link_to('' + link_text.to_s + '', url, options) + end + end + + def topic_link(link_text, url, options = {}) + res = sitemap.find_resource_by_path(url) + + if (res.data.status) + status = res.data.status + if status == "draft" || status == "approved-draft" + status = ' draft' + else + status = ' ' + status + '' + end + else + status = "" + end + + if current_page.data.order == 1 + if url == current_page.path + 'Current: ' + link_text + status + '' + else + link_to('' + link_text + status + '', '/' + url, options) + end + else + if url == current_page.parent.path + 'Current: ' + link_text + status + '' + else + link_to(''+ link_text + status + '', '/' + url, options) + end + end + end + + def code_start(status = "", title = "") + if title + '
+
Code snippet: ' + title + '
' + else +'
+
Code snippet
' + end + end + + def code_end + '
' + end + + + def editors_note_start + '
+
Editor’s Note:
' + end + + def editors_note_end + '
' + end + + def sample_start(status = "", title = "") + if title + '
+
Example: ' + title + '
+
' + else + ' +
+
Example
+
' + end + end + + def sample_end + ' +
+' + end + + def notes_start(status = "") + '
' + end + + def notes_end + '
' + end + + def reference(which = :start) + if which == :start + '' + end + end + + def ref(which = :start) + if which == :start + '
+
' + elsif which == :middle + '
+ +
' + end + end + + def demo(which = :start) + if which == :start + '
+
' + elsif which == :middle + '
+ +
' + end + end + +end + +set :markdown_engine, :kramdown +activate :syntax +activate :autoprefixer, browsers: ['last 2 versions', 'ie 8', 'ie 9'] + +set :css_dir, 'stylesheets' + +set :js_dir, 'javascripts' + +set :images_dir, 'img' + +set :relative_links, true +activate :relative_assets + +activate :directory_indexes + +# set :http_prefix, '/WAI/EO/Drafts/tutorials/' + +# Build-specific configuration +configure :build do + # For example, change the Compass output style for deployment + activate :minify_css + + # Minify Javascript on build + activate :minify_javascript + + # Enable cache buster + activate :asset_hash + + # Use relative URLs + # activate :relative_assets + + # Or use a different image path + # set :http_prefix, "/Content/images/" +end + +# config.rb +case ENV['TARGET'].to_s.downcase +when 'rendered' + activate :deploy do |deploy| + deploy.method = :git + # Optional Settings + deploy.remote = 'git@github.com:w3c/wai-media-intro.git' # remote name or git url, default: origin + deploy.branch = 'rendered-2017-05' # default: gh-pages + deploy.build_before = true # default: false + # deploy.strategy = :submodule # commit strategy: can be :force_push or :submodule, default: :force_push + # deploy.commit_message = 'custom-message' # commit message (can be empty), default: Automated commit at `timestamp` by middleman-deploy `version` + end +else + activate :deploy do |deploy| + deploy.method = :git + # Optional Settings + deploy.remote = 'git@github.com:w3c/wai-media-intro.git' # remote name or git url, default: origin + deploy.branch = 'gh-pages' # default: gh-pages + deploy.build_before = true # default: false + deploy.strategy = :force_push # commit strategy: can be :force_push or :submodule, default: :force_push + # deploy.commit_message = 'custom-message' # commit message (can be empty), default: Automated commit at `timestamp` by middleman-deploy `version` + end +end diff --git a/data/changes.yml b/data/changes.yml new file mode 100755 index 0000000..e5145bf --- /dev/null +++ b/data/changes.yml @@ -0,0 +1,279 @@ +changes: + - 2014-10-23: + - desc: "Navigation menu changes" + page: menus/index.html + by: + - WCAG WG + commit: 4ac340fa32c1f6f4e94f0e9999d9b4c192f51c24 + - 2014-10-17: + - desc: "Describe carousel design challenges in greater detail" + page: carousels/index.html + by: + - WCAG WG + commit: 4ac340fa32c1f6f4e94f0e9999d9b4c192f51c24 + - 2014-10-16: + - desc: "Change contrast for placeholders" + page: tables/irregular.html + by: + - WCAG WG + issue: 124 + - 2014-07-25: + - desc: "Explained row groups and column groups in more detail" + page: tables/irregular.html + by: + - WCAG WG + commit: cba4a7baf199a4e169d642c0f0c9ae2daafb505f + - 2014-07-22: + - desc: "Change decision tree style" + page: images/decision-tree.html + by: + - EO WG + commit: ad0b663076e93d5b2938f8bb190207afa31e1f7a + - 2014-07-21: + - desc: "Polish texts and finish them up" + page: all + by: + - Shadi Abou-Zahra + - EO WG + - desc: "Change layout of the alt decision tree" + page: images/decision-tree.html + by: + - EO WG + commit: f644dd3ccae3872f39782afc2a172d3970166599 + - 2014-06-19: + - desc: "Rename simple tables to basic tables" + page: tables/one-header.html + by: + - EO WG + commit: 8c8042a04b5f1f0b8e0ea400327e971f49db254b + - desc: "Remove “not valid in HTML5” warning" + page: images/complex.html + by: + - WCAG WG + commit: 66879ddb3f88b26bdaa87408ab6fc7938b547401 + - desc: "Add tip on tables in mobile context" + page: tables/tips.html + by: + - EO WG + - Shadi Abou-Zahra + commit: b6363eb4daf426f3a723ffea2fd1424d76e799dc + - desc: "Change decision tree wording" + page: images/decision-tree.html + by: + - WCAG WG + commit: e5882562e036bd5ea9b40788ed629728a97bafcc + - desc: "Add WAI-ARIA compatibility note" + page: images/groups.html + by: + - WCAG WG + commit: cdb8c14c6ac0b8876ccdb1620077728db43f1486 + - desc: "Reference WCAG 2.0 techniques from the text, on appropriate position" + page: tables/caption-summary.html + by: + - WCAG WG + commit: 39b4e2b0aa70e0cfbc99938da8151c5956038743 + - desc: "Visual bugfixes (introduced with “On this page feature” and different link styling)" + page: all + commit: 3cd48d7fcd2911ead54740e953468b69346133d4 + - desc: "Add an example to the simple tables page that has the headers in the first columns" + page: tables/one-header.html + by: + - EO WG + commit: bbda593d3ce4a11199bd3ced387ec068fa3c0d37 + - desc: "New icons for the tables concepts page, optimized images (site-wide)" + page: tables/index.html + commit: f7432110aea7303d7016aa0319fdd5f29f1a2f5b + - desc: "Reflect changes to the tables tutorial on the tables concepts page" + page: tables/index.html + commit: 48524385749583c2d6fd3122c18a18fea5a7ed2e + - 2014-06-18: + - desc: "Display “Skip to navigation” link on focus" + page: all + by: + - Bim Egan + commit: 79dd3102dc956386aa4f69c385531d8102c36fac + - desc: "Clarification on tables concepts page" + page: tables/index.html + by: + - Shadi Abou-Zhara + commit: 3bf04aca45e74859b22223c09459988689058b99 + - desc: "Fixed display of navigation active links with two lines of text" + page: all + commit: 30742f086c8d32959e701f61b06474293c33df02 + - desc: "Consistent formatting of tables with numeric values" + page: all + commit: 08c39cd89cc9bf337eb7e3e9c9b5ee85300ee4c5 + - desc: "Clarification of the whole page" + page: tables/irregular.html + by: + - Shadi Abou-Zhara + - Eric Eggert + commit: 4947376b543218b6d2558f7eeeb4feed2fe766cf + - desc: "Clarification of the whole page" + page: tables/two-headers.html + by: + - Shadi Abou-Zhara + - Eric Eggert + commit: 7bbc58ac1eda52cfb64d8dfcf6bf2d84a7f7e8ed + - desc: "More clear intro" + page: tables/one-header.html + by: + - Shadi Abou-Zhara + commit: 61524e20cdfb2267a857d37ffef6fd01de8e7cc8 + - desc: "Design “On this page” to look les obtrusive" + page: all + by: + - Shawn Henry + commit: 993e5ef977f6d8512b09c88e1be3948a4214dc44 + - 2014-06-17: + - desc: "Changed table layouts to improve readability" + page: all + by: + - Shawn Henry + commit: 7fdd5ea5e5 + - desc: "Add “On this page”, reduced font size in code examples" + page: all + by: + - Shawn Henry + commit: 993e5ef977f6d8512b09c88e1be3948a4214dc44 + - 2014-06-13: + - desc: "Changed phone/fax icons to make them more easily distinguishable" + page: images/informative.html + by: + - Shadi Abou-Zhara + commit: fa0773cb3753bc666a7df4024384584cdbcd9cef + - desc: "Add success criteria, reference alt decision tree" + page: images/index.html + by: + - Andrew Arch + - Shawn Henry + commit: a06b081c489af03075cc18243d933823c4f50fb7 + - desc: "Apply EO WG feedback" + page: tables/caption-summary.html + fragment: + by: + - EO WG + commit: 7e0fcb7f8aceadf66c62e0d1880ef591089273f6 + issue: + - desc: "Apply EO WG feedback" + page: tables/tips.html + fragment: + by: + - EO WG + commit: 0edeb43051f48c9b8ea8b6aed8834f94a42c41d1 + issue: + - 2014-06-12: + - desc: "Apply EO WG feedback" + page: tables/multi-level.html + fragment: + by: + - EO WG + commit: ad0469281325eca9023dc465d76e3a7b0ab64b7d + issue: + - desc: "Apply EO WG feedback" + page: tables/irregular.html + fragment: + by: + - EO WG + commit: f58e0be60da0b619195bf85585fa099cef8db4fb + issue: + - desc: "Apply EO WG feedback" + page: tables/one-header.html + fragment: + by: + - EO WG + commit: a1e6536ccbfd0e0da4f8564183b01b03903de625 + issue: + - 2014-06-11: + - desc: "Add an icon for caption/summary, change other icons to match the new situation" + page: tables/index.html + fragment: "##Caption" + by: + - Shadi Abou-Zhara + - Eric Eggert + commit: 2eea75f09be262ca32a4e12ba9b316b788d5aaef + issue: + - desc: "Add notes on direction and range" + page: tables/index.html + fragment: + by: + - Shadi Abou-Zhara + - Eric Eggert + commit: 75895b7ea9eb455c480994fd56b5ef560f1730d0 + issue: + - desc: "Move “Offset Column” example from irregular tables" + page: tables/one-header.html + fragment: "#table-with-an-offset-column-of-header-cells" + by: + - Eric + commit: 1dc606b53bde47d267607ae15c338063c426522a + issue: + - desc: "Clarify wording for the different use cases of scope" + page: tables/one-header.html + fragment: + by: + - Shadi Abou-Zhara + - WCAG WG + commit: a5aeca17b18e357c92d2daa1bcf06f84e9e2b389 + issue: + - desc: "Clarify two tier heading example and spanning multiple row/columns example" + page: tables/irregular.html + fragment: + by: + - Shadi Abou-Zhara + - WCAG WG + commit: 281f878cce31b0b998bfc175e96bd465b0d54c4a + issue: + - 2014-06-10: + - desc: "Rearrange table examples to include the irregular tables example one as example two on the page about simple tables. Also add scope to the delivery slots example. Change intro text." + page: tables/one-header.html + fragment: "#table-with-header-cells-in-one-column-only" + by: + - EO WG + - WCAG WG + commit: f38a28f4c5 + issue: + - desc: "Expand example 1 with an approach that uses scope" + page: tables/one-header.html + by: + - Eric + commit: 8799b531ab + issue: + - desc: Expand month names in table + page: tables/irregular.html + fragment: "#table-with-an-offset-column-of-header-cells" + by: + - WCAG WG + commit: fac740a119 + - desc: Add table with two tier headings + page: tables/irregular.html + fragment: "#table-with-two-tier-headings" + by: + - WCAG WG + commit: + - 2014-06-06: + - desc: "Add Changelog (this document)" + page: changelog.html + by: + - Shadi Abou-Zhara + - Shawn Henry + commit: b73aeae375c46434b283f36c60e5009d100dae26 + issue: + - desc: "Put “logos” to the bottom of the list" + page: images/index.html + by: + - Shadi Abou-Zhara + commit: c4757e98cff58b7a69f5ef903c56198cd988ed67 + issue: + - desc: "Using example.com instead of .co.fr for the made up email addresses" + page: tables/multi-level.html + by: + - Shadi Abou-Zhara + commit: 678b52a49128b2a3af5cdf1a3720734a6d22f122 + issue: + - desc: "Fix link to captions & summaries" + page: tables/multi-level.html + by: + - Andrew Arch + commit: + issue: diff --git a/data/techniques.yml b/data/techniques.yml new file mode 100755 index 0000000..1e608bf --- /dev/null +++ b/data/techniques.yml @@ -0,0 +1,100 @@ +techniques: + - ARIA5: Using WAI-ARIA state and property attributes to expose the state of a user interface component + - ARIA6: Using aria-label to provide labels for objects + - ARIA11: Using ARIA landmarks to identify regions of a page + - ARIA12: Using role=heading to identify headings + - ARIA13: Using aria-labelledby to name regions and landmarks + - ARIA17: Using grouping roles to identify related form controls + - ARIA18: Using aria-alertdialog to Identify Errors + - ARIA19: Using ARIA role=alert or Live Regions to Identify Errors + - ARIA21: Using Aria-Invalid to Indicate An Error Field + - C7: Using CSS to hide a portion of the link text + - C12: Using percent for font sizes + - C13: Using named font sizes + - C14: Using em units for font sizes + - C20: Using relative measurements to set column widths so that lines can average 80 characters or less when the browser is resized + - C22: Using CSS to control visual presentation of text + - C28: Specifying the size of text containers using em units + - FLASH17: Providing keyboard access to a Flash object and avoiding a keyboard trap + - G1: Adding a link at the top of each page that goes directly to the main content area + - G8: Providing a movie with extended audio descriptions + - G14: Ensuring that information conveyed by color differences is also available in text + - G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text + - G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text + - G21: Ensuring that users are not trapped in content + - G59: Placing the interactive elements in an order that follows sequences and relationships within the content + - G62: Providing a glossary + - G63: Providing a site map + - G64: Providing a Table of Contents + - G65: Providing a breadcrumb trail + - G73: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content + - G74: "Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description" + - G78: Providing a second, user-selectable, audio track that includes audio descriptions + - G83: Providing text descriptions to identify required fields that were not completed + - G85: Providing a text description when user input falls outside the required format or values + - G87: Providing closed captions + - G90: Providing keyboard-triggered event handlers + - G92: Providing long description for non-text content that serves the same purpose and presents the same information + - G93: Providing open (always visible) captions + - G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content + - G95: Providing short text alternatives that provide a brief description of the non-text content + - G98: Providing the ability for the user to review and correct answers before submitting + - G124: Adding links at the top of the page to each area of the content + - G127: "Identifying a Web page’s relationship to a larger collection of Web pages" + - G128: Indicating current location within navigation bars + - G130: Providing descriptive headings + - G131: Providing descriptive labels + - G133: Providing a checkbox on the first page of a multipart form that allows users to ask for longer session time limit or no session time limit + - G138: Using semantic markup whenever color cues are used + - G141: Organizing a page using headings + - G155: Providing a checkbox in addition to a submit button + - G158: Providing an alternative for time-based media for audio-only content + - G159: Providing an alternative for time-based media for video-only content + - G161: Providing a search function to help users find content + - G162: Positioning labels to maximize predictability of relationships + - G164: Providing a stated time within which an online request (or transaction) may be amended or canceled by the user after making the request + - G167: Using an adjacent button to label the purpose of a field + - G168: Requesting confirmation to continue with selected action + - G179: Ensuring that there is no loss of content or functionality when the text resizes and text containers do not change their width + - G180: Providing the user with a means to set the time limit to 10 times the default time limit + - G182: Ensuring that additional visual cues are available when text color differences are used to convey information + - G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them + - G196: Using a text alternative on one item within a group of images that describes all items in the group + - G198: Providing a way for the user to turn the time limit off + - G202: Ensuring keyboard control for all functionality + - G203: Using a static text alternative to describe a talking head video + - H2: Combining adjacent image and text links for the same resource + - H4: "Creating a logical tab order through links, form controls, and objects" + - H24: Providing text alternatives for the area elements of image maps + - H36: Using alt attributes on images used as submit buttons + - H37: Using alt attributes on img elements + - H39: Using caption elements to associate data table captions with data tables + - H40: Using definition lists + - H42: Using h1-h6 to identify headings + - H43: Using id and headers attributes to associate data cells with header cells in data tables + - H44: Using label elements to associate text labels with form controls + - H45: Using longdesc + - H48: 'Using ol, ul and dl for lists or groups of links' + - H49: Using semantic markup to mark emphasized or special text + - H51: Using table markup to present tabular data + - H59: Using the link element and navigation tools + - H63: Using the scope attribute to associate header cells and data cells in data tables + - H65: Using the title attribute to identify form controls when the label element cannot be used + - H67: Using null alt text and no title attribute on img elements for images that AT should ignore + - H69: Providing heading elements at the beginning of each section of content + - H71: Providing a description for groups of form controls using fieldset and legend elements + - H73: Using the summary attribute of the table element + - H80: Identifying the purpose of a link using link text combined with the preceding heading element + - H85: Using OPTGROUP to group OPTION elements inside a SELECT + - H91: Using HTML form controls and links + - H93: Ensuring that id attributes are unique on a Web page + - H95: Using the track element to provide captions + - H96: Using the track element to provide audio descriptions + - PDF9: Providing headings by marking content with heading tags in PDF documents + - SCR1: Allowing the user to extend the default time limit + - SCR2: Using redundant keyboard and mouse event handlers + - SCR16: Providing a script that warns the user a time limit is about to expire + - SCR20: Using both keyboard and other device-specific functions + - SCR26: Inserting dynamic content into the Document Object Model immediately following its trigger element + - SCR29: Adding keyboard-accessible actions to static HTML elements + - SCR35: Making actions keyboard accessible by using the onclick event of anchors and buttons diff --git a/data/wcag.yml b/data/wcag.yml new file mode 100755 index 0000000..b7119b4 --- /dev/null +++ b/data/wcag.yml @@ -0,0 +1,156 @@ +successcriteria: + - 1.1.1: + title: Non-text Content + desc: "All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed[…]." + level: A + slug: text-equiv-all + - 1.2.1: + desc: "For prerecorded audio-only and prerecorded video-only media, the following are true, except when the audio or video is a media alternative for text and is clearly labeled as such:
  • Prerecorded Audio-only: An alternative for time-based media is provided that presents equivalent information for prerecorded audio-only content.
  • Prerecorded Video-only: Either an alternative for time-based media or an audio track is provided that presents equivalent information for prerecorded video-only content.
" + level: A + title: Audio-only and Video-only (Prerecorded) + slug: media-equiv-av-only-alt + - 1.2.2: + desc: "Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such." + level: A + title: Captions (Prerecorded) + slug: media-equiv-captions + - 1.2.3: + desc: "An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such." + level: A + title: Audio Description or Media Alternative + slug: media-equiv-audio-desc + - 1.2.5: + desc: "Audio description is provided for all prerecorded video content in synchronized media." + level: AA + title: Audio Description (Prerecorded) + slug: media-equiv-audio-desc-only + - 1.2.7: + desc: "Where pauses in foreground audio are insufficient to allow audio descriptions to convey the sense of the video, extended audio description is provided for all prerecorded video content in synchronized media." + level: AAA + title: Extended Audio Description (Prerecorded) + slug: media-equiv-extended-ad + - 1.2.8: + desc: "Audio description is provided for all prerecorded video content in synchronized media." + level: AAA + title: Media Alternative (Prerecorded) + slug: media-equiv-text-doc + - 1.3.1: + desc: "Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text." + level: A + title: Info and Relationships + slug: content-structure-separation-programmatic + - 1.4.1: + desc: "Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element." + level: A + title: Use of Color + slug: visual-audio-contrast-without-color + - 1.4.3: + title: Contrast (Minimum) + desc: 'The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
' + level: AA + slug: visual-audio-contrast-contrast + - 1.4.4: + title: Resize text + desc: 'Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.' + level: AA + slug: visual-audio-contrast-scale + - 1.4.5: + title: Images of Text + desc: "If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except [for customizable and essential images]" + level: AA + slug: visual-audio-contrast-text-presentation + - 1.4.6: + title: Contrast (Enhanced) + desc: 'The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:
  • Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
  • Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
' + level: AAA + slug: visual-audio-contrast7 + - 1.4.9: + title: Images of Text (No Exception) + desc: "Images of text are only used for pure decoration or where a particular presentation of text is essential to the information being conveyed" + level: AAA + slug: visual-audio-contrast-text-images + - 2.1.1: + title: Keyboard + desc: 'All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints.' + level: A + slug: keyboard-operation-keyboard-operable + - 2.1.2: + title: No Keyboard Trap + desc: 'If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from that component using only a keyboard interface, and, if it requires more than unmodified arrow or tab keys or other standard exit methods, the user is advised of the method for moving focus away.' + level: A + slug: keyboard-operation-trapping + - 2.1.3: + title: Keyboard (No Exception) + desc: All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes. + level: AAA + slug: keyboard-operation-all-funcs + - 2.2.1: + title: Timing Adjustable + desc: 'For each time limit that is set by the content, at least one of the following is true:
  • Turn off: The user is allowed to turn off the time limit before encountering it; or
    • Adjust: The user is allowed to adjust the time limit before encountering it over a wide range that is at least ten times the length of the default setting; or
  • Extend: The user is warned before time expires and given at least 20 seconds to extend the time limit with a simple action (for example, "press the space bar"), and the user is allowed to extend the time limit at least ten times; or
  • Real-time Exception: The time limit is a required part of a real-time event (for example, an auction), and no alternative to the time limit is possible; or
  • Essential Exception: The time limit is essential and extending it would invalidate the activity; or
  • 20 Hour Exception: The time limit is longer than 20 hours.
' + level: A + slug: time-limits-required-behaviors + - 2.2.2: + title: "Pause, Stop, Hide" + desc: 'For moving, blinking, scrolling, or auto-updating information, all of the following are true:

  • Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and

  • Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.

' + level: A + slug: time-limits-pause + - 2.4.1: + title: "Bypass Blocks" + desc: 'A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.' + level: A + slug: navigation-mechanisms-skip + - 2.4.3: + title: "Focus Order" + desc: 'If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.' + level: A + slug: navigation-mechanisms-focus-order + - 2.4.5: + title: "Multiple Ways" + desc: "2.4.5 More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process." + level: AA + slug: navigation-mechanisms-mult-loc + - 2.4.6: + title: "Headings and Labels" + desc: "Headings and labels describe topic or purpose." + level: AA + slug: navigation-mechanisms-descriptive + - 2.4.7: + title: "Focus Visible" + desc: "Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible." + level: AA + slug: navigation-mechanisms-focus-visible + - 2.4.8: + title: "Location" + desc: "Information about the user's location within a set of Web pages is available." + level: AAA + slug: navigation-mechanisms-location + - 2.4.10: + title: "Section Headings" + desc: 'Section headings are used to organize the content.' + level: AAA + slug: navigation-mechanisms-headings + - 3.3.1: + title: "Error Identifications" + desc: "If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text." + level: A + slug: minimize-error-identified + - 3.3.2: + title: "Labels or Instructions" + desc: "Labels or instructions are provided when content requires user input." + level: A + slug: minimize-error-cues + - 3.3.3: + title: "Error Suggestion" + desc: "If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content." + level: AA + slug: minimize-error-suggestions + - 3.3.4: + title: Error Prevention (Legal, Financial, Data) + desc: "For Web pages that cause legal commitments or financial transactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses, at least one of the following is true: Reversible, Checked, Confirmed" + level: AA + slug: minimize-error-reversible + - 4.1.2: + title: "Name, Role, Value" + desc: "For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies." + level: A + slug: ensure-compat-rsv diff --git a/illustrations/headers-in-one-column-all-data-in-second.sketch/Data b/illustrations/headers-in-one-column-all-data-in-second.sketch/Data new file mode 100755 index 0000000..81c33cf Binary files /dev/null and b/illustrations/headers-in-one-column-all-data-in-second.sketch/Data differ diff --git a/illustrations/headers-in-one-column-all-data-in-second.sketch/metadata b/illustrations/headers-in-one-column-all-data-in-second.sketch/metadata new file mode 100755 index 0000000..1f72074 --- /dev/null +++ b/illustrations/headers-in-one-column-all-data-in-second.sketch/metadata @@ -0,0 +1,21 @@ + + + + + app + com.bohemiancoding.sketch3 + build + 7597 + commit + 463d76bf23dc890960e184011f80b3dacac572b9 + fonts + + FiraSansOT-Bold + FiraSansOT + + length + 120353 + version + 36 + + diff --git a/illustrations/headers-in-one-column-all-data-in-second.sketch/version b/illustrations/headers-in-one-column-all-data-in-second.sketch/version new file mode 100755 index 0000000..dce6588 --- /dev/null +++ b/illustrations/headers-in-one-column-all-data-in-second.sketch/version @@ -0,0 +1 @@ +36 \ No newline at end of file diff --git a/illustrations/headers-in-one-column-all-data-in-second.svg b/illustrations/headers-in-one-column-all-data-in-second.svg new file mode 100755 index 0000000..c28c7b5 --- /dev/null +++ b/illustrations/headers-in-one-column-all-data-in-second.svg @@ -0,0 +1,121 @@ + + + + Group + Group 2 + Created with Sketch. + + + + + + + + Blue + + + S: 6; M: 13; XL: 10 + + + + + Red + + + M: 2; L: 9; XL: 10; XXL: 1 + + + + + Shirt + + + Wrong: + + + Sizes and amount in stock + + + + + + + + + Blue + + + S + + + M + + + XL + + + + + + + + Red + + + + + + + + + + + + + Shirt + + + Correct: + + + Size + + + Stock + + + M + + + L + + + XL + + + XXL + + + 6 + + + 13 + + + 10 + + + 2 + + + 9 + + + 10 + + + 1 + + + + + \ No newline at end of file diff --git a/illustrations/page-regions.sketch b/illustrations/page-regions.sketch new file mode 100755 index 0000000..6a6d5b8 Binary files /dev/null and b/illustrations/page-regions.sketch differ diff --git a/illustrations/page-structure-headers.sketch b/illustrations/page-structure-headers.sketch new file mode 100755 index 0000000..2becccf Binary files /dev/null and b/illustrations/page-structure-headers.sketch differ diff --git a/illustrations/table-columns.sketch/Data b/illustrations/table-columns.sketch/Data new file mode 100755 index 0000000..c55811e Binary files /dev/null and b/illustrations/table-columns.sketch/Data differ diff --git a/illustrations/table-columns.sketch/metadata b/illustrations/table-columns.sketch/metadata new file mode 100755 index 0000000..d9e5221 --- /dev/null +++ b/illustrations/table-columns.sketch/metadata @@ -0,0 +1,18 @@ + + + + + app + com.bohemiancoding.sketch3 + build + 7891 + commit + debc570766a4cc5a2e31258967910f7e5776f485 + fonts + + length + 221300 + version + 37 + + diff --git a/illustrations/table-columns.sketch/version b/illustrations/table-columns.sketch/version new file mode 100755 index 0000000..7c09198 --- /dev/null +++ b/illustrations/table-columns.sketch/version @@ -0,0 +1 @@ +37 \ No newline at end of file diff --git a/source/.nojekyll b/source/.nojekyll new file mode 100755 index 0000000..e69de29 diff --git a/source/accessible-media/automatically-generated-captions.html.erb.md b/source/accessible-media/automatically-generated-captions.html.erb.md new file mode 100755 index 0000000..8204189 --- /dev/null +++ b/source/accessible-media/automatically-generated-captions.html.erb.md @@ -0,0 +1,68 @@ +--- +title: Automatically generated captions +nav_title: Automatic Captions +order: 4 +status: editors-draft +wcag_success_criteria: + - 1.2.2 +editors: + - Geoff Freed + - Judy Brewer +contributors: + - The Education and Outreach Working Group (EOWG) +support: Developed with support from the U.S. Access Board, WCAG TA Project +--- +## The basics of automatic captions + +Tools exist today that use sophisticated speech-to-text (STT) technology +to turn a program's soundtrack into a timed caption file, ready for +inclusion with corresponding video. In fact, [most videos uploaded to +YouTube are captioned by Google's automatic-captioning +process](https://support.google.com/youtube/answer/3038280), something +many authors do not know. [Automatic captions are available in a number +of languages](https://support.google.com/youtube/answer/6373554?hl=en). +However, the accuracy of these captions is frequently quite low and +results in poor-quality captions that often contain… + +- text that does not match words spoken in the audio; +- poor timing (e.g., captions that do not appear synchronously with + the audio); +- spelling errors; +- little or no punctuation; +- missing capitalization; +- occasional obscenities (swears, for example). + +## Using automatic captions responsibly + +**Automatically generated captions should never be used as the sole +method to produce captions.** However, they can be used as a first-pass +or rough-draft effort in the workflow to create an [accurate, +high-quality caption track](production-captions.html). Below is a sample workflow for +using auto-captions as part of the caption-production process, using +YouTube's auto-caption service as an example. + +{::nomarkdown} +<%= sample_start %> +{:/nomarkdown} + +1. [Upload a video to + YouTube](https://support.google.com/youtube/answer/57407?co=GENIE.Platform%3DDesktop&hl=en). +2. [Generate automatic + captions](https://support.google.com/youtube/answer/2734796?hl=en). +3. [Download the + track](https://support.google.com/youtube/answer/2734705?hl=en). +4. Using a caption editor, correct spelling, grammar and timing errors. +5. Export the cleaned-up caption file to the [appropriate caption + format for + YouTube](https://support.google.com/youtube/answer/2734698?hl=en). +6. [Upload the new caption file to + YouTube](https://support.google.com/youtube/answer/2734796?hl=en). + +{::nomarkdown} +<%= sample_end %> +{:/nomarkdown} + +While authors cannot prevent YouTube from creating the auto-captions, +the captions should always be disabled once the video has been uploaded +so that users cannot turn them on. Read the [instructions for disabling +automatic captions](https://support.google.com/youtube/answer/2734701). diff --git a/source/accessible-media/decision-tree.html.erb.md b/source/accessible-media/decision-tree.html.erb.md new file mode 100755 index 0000000..046f2d2 --- /dev/null +++ b/source/accessible-media/decision-tree.html.erb.md @@ -0,0 +1,72 @@ +--- +title: Captions and descriptions decision trees +nav_title: Decision Trees +order: 9 +status: editors-draft +editors: + - Geoff Freed + - Judy Brewer +contributors: + - The Education and Outreach Working Group (EOWG) +support: Developed with support from the U.S. Access Board, WCAG TA Project +--- + +## Captions + +- **Does the media contain only audio and no video?** + - {:.yes} **Yes:** + - **… and the audio contains dialog or narration.** + _Provide an alternative that presents equivalent information (e.g., captions or a transcript). See [SC 1.2.1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html)._ + - **… and the audio does not contain dialog or narration but does contain other non-speech audio elements.** + _Provide an alternative that presents equivalent information (e.g., captions or a transcript that reflects the non-speech content, such as sound effects). See [SC 1.2.1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html)._ + - **… and the media is an audio-only clip.** + _Provide captions or a complete transcript. See [production options for captions](production-captions.html) or [transcript concepts and examples](transcript.html)._ + - **… and there is already text on the screen that accurately reflects the audio.** _Do not provide additional captions._ + - {:.no} **No:** + - Continue. +- **Does the media contain only video and no audio?** + - {:.yes} **Yes:** + - **… and there is already informative text on the screen.** + _An alternative is not required._ + - **… and the audio does not contain dialog or narration but does contain other non-speech audio elements.** + _Provide an alternative that presents equivalent information (e.g., captions or a transcript that reflects the non-speech content, such as sound effects). See [SC 1.2.1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-av-only-alt.html)._ + - **… and the media is an audio-only clip.** + _Provide captions or a complete transcript. See [production options for captions](production-captions.html) or [transcript concepts and examples](transcript.html)._ + - **… and there is already text on the screen that accurately reflects the audio.** _Do not provide additional captions._ + - {:.no} **No:** + - Continue. +- **Does the media contain video with synchronized audio?** + - {:.yes} **Yes:** + - **… and the audio contains dialog or narration.** + _Provide captions for all prerecorded audio content in synchronized media. See [SC 1.2.2](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html)._ + - **… and the audio does not contain dialog or narration but does contain other non-speech audio elements.** + _Provide a synchronized alternative that presents equivalent information (e.g., captions that reflect the non-speech content, such as sound effects). See [SC 1.2.2](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-captions.html)._ + - **… and there is already text on the screen that accurately reflects the audio (including both speech and non-speech elements).** + _An alternative is not required._ + - {:.no} **No:** + - Continue. +- **See the previous two items.** +{:.decision-tree} + +## Audio descriptions + +- **Does the media contain visual elements but no audio?** + - {:.yes} **Yes:** + - **… and the visual elements (e.g., moving or static images; text) are critical for understanding on-screen action.** + _Provide an alternative such as synchronized audio descriptions or a text-based alternative. See [SC 1.2.3](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-audio-desc.html)._ + - {:.no} **No:** + - Continue. +- **Does the media contain visual elements with synchronized audio?** + - {:.yes} **Yes:** + - **… and the visual elements (e.g., moving or static images; text) are critical for understanding on-screen action.** + _Provide audio descriptions for all prerecorded video content in synchronized media. See [SC 1.2.5](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-audio-desc-only.html)._ + - **… and the audio does not provide sufficient information about important visual elements.** + _Provide audio descriptions where necessary. See [SC 1.2.5](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-audio-desc-only.html)._ + - **… and pauses in the dialog or narration are available but insufficient to accommodate complete descriptions.** + _Provide extended descriptions. See [SC 1.2.7](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-extended-ad.html)._ + - **… and no pauses are available.** + _Provide extended descriptions; see [SC 1.2.7](https://www.w3.org/TR/UNDERSTANDING-WCAG20/media-equiv-extended-ad.html). Or provide a pre-description; see [production options for descriptions](production-audio-description.html)._ + - {:.no} **No:** + - Continue. +- **If there are no important visual elements in the media, descriptions are not necessary.** +{:.decision-tree} diff --git a/source/accessible-media/formats.html.erb.md b/source/accessible-media/formats.html.erb.md new file mode 100755 index 0000000..858da05 --- /dev/null +++ b/source/accessible-media/formats.html.erb.md @@ -0,0 +1,96 @@ +--- +title: Caption formats and examples +nav_title: Caption formats +order: 3 +status: editors-draft +wcag_success_criteria: + - 1.2.2 +wcag_techniques: + - G87 + - H95 +editors: + - Geoff Freed + - Judy Brewer +contributors: + - The Education and Outreach Working Group (EOWG) +support: Developed with support from the U.S. Access Board, WCAG TA Project +--- +## Caption formats + +Nearly all modern user agents (browsers, media players) on both desktop +and mobile platforms provide support for the display of closed captions, +but not all support the same caption-delivery formats. The three most +common formats used for online media are listed below. + +- [Timed Text Markup Language + (TTML)](https://www.w3.org/TR/ttaf1-dfxp/) +- [Web Video Text Tracks (WebVTT)](https://w3c.github.io/webvtt/) +- [SRT](https://matroska.org/technical/specs/subtitles/srt.html) + +Captions can be displayed by most modern media players on desktop and mobile platforms, in standalone applications as well as in Web browsers: + +- Standalone players typically support WebVTT and/or TTML. +- Streaming media services typically use TTML to convey captions to users. +- Web browsers support various caption formats, as shown in the table below. + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BrowserOSSupported caption format(s)
FirefoxWindows, OS X, Android, iOSWebVTT
IE 10, 11; EdgeWindowsTTML, WebVTT
SafariOS X; iOSWebVTT
ChromeWindows, OS X, Chrome OS, Android, iOSWebVTT
+ +SRT is not supported natively by any browser, but is supported by most +other types of media players including those provided by popular +video-hosting services, some social-media platforms and by custom +players. + +WebVTT, TTML and SRT are "sidecar" files, which is to say they are +transmitted separately from their corresponding video files (riding +alongside the video data in the delivery stream, rather than being +embedded directly into the video file), and are synchronized and +displayed by the user agent at the time of playback. + +## Delivering captions to viewers + +Captions are delivered to viewers using HTML5's `track` element, which +was created specifically for carrying text tracks, such as captions, +subtitles and [text-based audio descriptions](g). `track` is used as a +child element of the `video` element: + +{::nomarkdown} +<%= code_start %> +{:/nomarkdown} + +~~~html + +~~~ + +{::nomarkdown} +<%= code_end %> +{:/nomarkdown} diff --git a/source/accessible-media/index.html.erb.md b/source/accessible-media/index.html.erb.md new file mode 100755 index 0000000..03f3a78 --- /dev/null +++ b/source/accessible-media/index.html.erb.md @@ -0,0 +1,74 @@ +--- +title: Accessible Media Concepts +tutorial_title: Accessible Media +nav_title: Concepts +order: 1 +topic_order: 4 +type: intro +status: editors-draft +wcag_success_criteria: + - 1.2.1 + - 1.2.2 + - 1.2.3 + - 1.2.5 + - 1.2.8 +editors: + - Geoff Freed + - Judy Brewer +contributors: + - The Education and Outreach Working Group (EOWG) +support: Developed with support from the U.S. Access Board, WCAG TA Project +--- +Captions and audio descriptions make online media accessible to people who have disabilities. This tutorial will demonstrate how to add captions and audio descriptions to online media. Other accessibility techniques, such as transcripts and foreign-language subtitles, are included in the discussion. Here are brief definitions of these media-accessibility approaches. +{:#cc+ad_purpose} + +- **Audio descriptions**: An extra track of narration that conveys + information about important on-screen elements, such as body + language, changes in scenery and context, on-screen charts and + diagrams, etc. +- **Captions**: A text version of the program dialogue and narration, + or other spoken words, fully synchronized with the program audio and + displayed within the media player. Captions also include text + identifying non-speech information, such as music and sound effects. +- **Subtitles**: A text version of a program's audio track, fully + synchronized with the audio and translated into another language. +- **Transcript**: A text version of a program's audio track, + containing narration or dialog plus non-speech information such as + speaker-identification cues. Transcripts can be static documents or + they can be interactive: e.g., a transcript can be synchronized so + that words are highlighted automatically as they are spoken, or + words can selected by the user in order to move to that spot in the + video. + +## Quality considerations + +The quality of the captions and descriptions that are delivered to users +is of high importance. In the same way that low-quality, incomplete +audio is unacceptable to hearing viewers, captions that do not +accurately reflect the audio, or contain spelling and grammatical +errors, are unacceptable to deaf and hard-of-hearing viewers. Similarly, +audio descriptions that provide misleading or inaccurate information, or +which provide unnecessary detail (e.g., by giving away clues or +answers), are of no use to viewers who are blind or visually impaired. + +## Why is this important? + +Besides providing crucial communication access for viewers who are deaf, hard of hearing, blind or visually impaired, captions and descriptions have benefits beyond their original target +audiences: + +- Both captions and descriptions can be used to help students and adults with cognitive disabilities engage more directly with media, helping to focus attention or to provide comprehension support. +- Captions are useful when teaching children and adults how to read, + or to help people learn a foreign language. +- Captions can be used by all people: for example, in noisy + environments such as a bar or an airport lounge, or in any place + where it would be inappropriate to turn up the volume. +- Search engines can use captions as a way to locate information in a + video or audio presentation. +- Audio descriptions can be used to reinforce complex visual concepts, + especially for children or adults with learning disabilities. + +In some cases, captions and descriptions may be the only means by which users can access any information at all from video or audio clips. + +For a quick overview on determining whether or not captions and audio +descriptions are necessary, see the [caption/description decision +tree](decision-tree.html). diff --git a/source/accessible-media/playing.html.erb.md b/source/accessible-media/playing.html.erb.md new file mode 100755 index 0000000..017d464 --- /dev/null +++ b/source/accessible-media/playing.html.erb.md @@ -0,0 +1,82 @@ +--- +title: Playing accessible media +nav_title: Playing media +order: 8 +status: editors-draft +wcag_success_criteria: + - 1.2.2 + - 1.2.5 +editors: + - Geoff Freed + - Judy Brewer +contributors: + - The Education and Outreach Working Group (EOWG) +support: Developed with support from the U.S. Access Board, WCAG TA Project +--- + +## Captions + +### Desktop-browser media players + +All modern Web browsers will provide default media players for embedded +media when they detect the `video` or `audio` elements, and all will +render timed text delivered via the `track` element. All browsers will +automatically surface a caption toggle in the player control bar if a +caption track is detected. However, note that each browser will present +not only a different UI, but also a different default style for +captions. Below is an image of default caption display in Chrome, +showing the CC button for toggling captions on and off. + +![Captions playing in the embedded Chrome video +player.](am-chrome-captions.png) + +### Mobile-browser video players + +Mobile browsers support captions via the `track` element, just like +their desktop counterparts, but the presentation mode will vary: + +- **Android**
+ Embedded video and audio clips will play within Web pages in both + Chrome and Firefox, on tablets and smartphones. +- **iOS**
+ Embedded video and audio clips will play within Web pages on the + iPad. iPhones will play all media clips using the QuickTime player. + +## Audio descriptions in native desktop- and mobile-browser media players + +Most audio-described videos are delivered to viewers using one of the +following methods: + +- Two separate videos, one with open descriptions, and the other with + no descriptions. Authors give users a link or some other method to + choose one or the other. +- A single video that contains two audio tracks, one with descriptions + and one without. Authors give users a button or menu to toggle from + one track to the other. + +## User customization of captions + +Many online media players, on both desktop and mobile platforms, give +users a wide variety of caption-customization options. For example, +users can specify caption-font colors, font types and sizes, and +background colors or transparency levels. Note that in any player on any +operating system, the settings chosen by the user will override any +author-specified styling characteristics (see further [comments about +author styling of captions](production-captions.html#a-word-about-styling-captions)). + +Below is an image showing caption-styling options in the YouTube desktop +player. + +![YouTube's caption-styling options: font family, font color, font size, +and others.](yt_cc_options.png) + +Some custom mobile players-- those embedded in Web pages as well as +stand-alone media players-- also provide styling options from within the +applications themselves. See the [mobile player used on the CNN Web +site](http://www.cnn.com/) for one such example. + +Mobile devices also provide caption-styling options at the OS level. +Here is an image showing caption styling options on an Android device. + +![Android's caption-styling options: language, text size, caption style, +etc.](android_cc_options.png) diff --git a/source/accessible-media/production-audio-description.html.erb.md b/source/accessible-media/production-audio-description.html.erb.md new file mode 100755 index 0000000..9772b79 --- /dev/null +++ b/source/accessible-media/production-audio-description.html.erb.md @@ -0,0 +1,197 @@ +--- +title: Production options for audio descriptions +nav_title: Audio descriptions +order: 7 +status: editors-draft +wcag_success_criteria: + - 1.2.3 + - 1.2.5 + - 1.2.7 +wcag_techniques: + - G8 + - G78 + - G159 + - G203 +editors: + - Geoff Freed + - Judy Brewer +contributors: + - The Education and Outreach Working Group (EOWG) +support: Developed with support from the U.S. Access Board, WCAG TA Project +--- + +## Description basics + +Audio descriptions can be open or closed: + +- **Open audio descriptions** are integrated into the program audio + track and are heard by everyone. They cannot be turned off. +- **Closed audio descriptions** can be turned on and off by viewers. + +Additionally... + +- Audio descriptions are usually timed to play during pauses or breaks + in narration or dialog, although [extended audio + descriptions](#ext_dx) may be implemented where necessary. +- In cases where no pauses are available, a single summary, called a + pre-description, can be inserted at the beginning of the + presentation. +- Audio-description tracks can be presented as pre-recorded + human-recorded speech or text-to-speech (TTS) audio, or they can be + text tracks that are delivered on the fly invisibly and read aloud + by screen readers. + +Most described content today is presented with open descriptions, using +one of two options: + +- Two separate videos, one with open descriptions, and the other with + no descriptions. Authors give users a link or some other method to + choose one or the other. +- A single video that contains two audio tracks, one with descriptions + and one without. Authors give users a button or menu to switch from + one track to the other. + +## Pre-produced audio descriptions + +Describing a video can be a time-consuming and complex process, +depending on the subject matter. Before beginning, take a look at the +[description decision tree](decision-tree.html) to determine if descriptions are +even necessary. For longer videos, it may be more time- and +cost-efficient to hire a professional audio-description service provider +to write and record descriptions. + +Descriptions are usually recorded as human narration before being +integrated into the video presentation, but technology and markup now +exist to convey descriptions as text which are read aloud on the fly by +screen readers or other text-to-speech (TTS) methods. [Read more about +text-to-speech descriptions](#production-workflow-audio-descriptions-tts-narration). + +An excellent place to learn the basics about audio descriptions is [The +Description Key](http://www.descriptionkey.org/). See [an +example of a described +video](https://www.w3.org/WAI/perspectives/captions.html), and be sure +to select the “Enable audio description” button located just below the +player to turn on the descriptions. Other [audio-description +samples](http://www.acb.org/adp/samples.html) are available from the +American Council of the Blind’s [Audio Description +Project](http://www.acb.org/adp/). + + +## Production workflow: audio descriptions (human-recorded narration) + +### Basic workflow for creating pre-produced audio descriptions: + +{::nomarkdown} +<%= sample_start %> +{:/nomarkdown} + +1. **Watch the video**
+ Note opportunities for descriptive narration (i.e., pauses in + narration or dialog into which descriptions can be inserted). +2. **Write the description script**
+ Use a description-authoring tool, a word processor or any text + editor to create the script that will be recorded by the narrator. +3. **Record the descriptions**
+ Using audio-editing software, record the narrator reading the + description script. [Learn more about recording audio + descriptions](http://www.descriptionkey.org/technical_issues.html). + - Alternatively, create a computer-generated rendering of the + description script using TTS software. [See examples of + pre-recorded TTS descriptions](http://ncamftp.wgbh.org/ibm/dvs/) + to learn whether or not they are appropriate for all types of + media presentations. +4. **Create an open-described audio track**
+ Using audio-editing software, duplicate the original program audio + track, then paste each audio description into this track at the + appropriate time intervals. Add this new, open-described audio track + to the presentation. + +{::nomarkdown} +<%= sample_end %> +{:/nomarkdown} + + +When recording the descriptions, it will pay to create the +highest-quality audio files possible. Keep these points in mind: + +- Use the highest-quality microphone and recording software available. +- Use a microphone stand and speak clearly into the microphone. +- Record the descriptions in a room that is isolated from all external + sounds. +- Avoid rooms with hard surfaces (e.g., tile or wood floors). +- When mixing the descriptions into the program audio, lower the + program-audio level when the description plays while simultaneously + raising the description's audio level. When the description is + finished playing, lower the description audio level and raise the + program-audio level to its proper setting. Repeat this process + (known as "ducking") for every description instance. + +## Production workflow: audio descriptions (TTS narration) + +TTS descriptions are not pre-recorded. Instead, they are transmitted at +the proper intervals to users during playback, and are read aloud by the +user's screen reader. Think of them as an invisible text track that +screen readers can read aloud as the text is delivered. See [examples of +TTS descriptions](http://ncamftp.wgbh.org/ibm/dvs/). The basic workflow +for TTS audio descriptions generally follows this pattern: + +### Basic workflow for creating pre-produced TTS audio descriptions: + +{::nomarkdown} +<%= sample_start %> +{:/nomarkdown} + +1. **Watch the video**
+ Note opportunities for descriptive narration (i.e., pauses in + narration or dialog into which descriptions can be inserted). +2. **Write the description script**
+ Using a **caption-editing tool**, write the description script that + will be read aloud by a screen reader during the time of playback. +3. **Assign timecodes to each description**
+ Each timecode will represent when the description should be read by + the user's screen reader. +4. **Export the description file**
+ Use the caption format (e.g., WebVTT or TTML) that is supported by + the target player. This file will be transmitted during playback and + will be read aloud by the user's screen reader. + +{::nomarkdown} +<%= sample_end %> +{:/nomarkdown} + +Below is an image of a caption editor being used to timestamp an audio-description script. + +![A caption editor showing a timestamped description script.](dx_script.png) + +

Using the track element and the kind attribute, the descriptions can be delivered at the time of playback and a screen reader will read them aloud. Below is a code sample:

+ +{::nomarkdown} +<%= code_start %> +{:/nomarkdown} + +~~~html + +~~~ + +{::nomarkdown} +<%= code_end %> +{:/nomarkdown} + +The `kind` attribute will cause the description file to be received invisibly (e.g., off-screen) so sighted users will not see it, but screen readers will be aware of it. Screen readers will then read the description text as it is delivered, synchronized at the time of playback. Read more about [techniques for delivering TTS descriptions](https://www.w3.org/WAI/GL/wiki/Using_the_track_element_to_provide_audio_descriptions). See [functioning examples of TTS descriptions](http://ncamftp.wgbh.org/ibm/dvs/#videos) using the `track` element along with Javascript to illustrate how screen readers will read off-screen descriptions aloud. + +## Extended descriptions + +Typically, descriptions are written to fit into natural pauses in narration or dialog. However, there will be circumstances where the pauses are not long enough to accommodate a full description. In these cases, extended descriptions may be implemented. In an extended description, the video and audio tracks are programmatically paused when the description begins playing. When the description is finished playing, the video and audio tracks are programmatically resumed. At the next instance of an extended description, the process is repeated. Note that extended and "regular" descriptions may be mixed in a single multimedia presentation. + +The only markup-based method for providing extended audio descriptions is to use [SMIL 3.0](https://www.w3.org/TR/SMIL3/), a language for writing interactive multimedia presentations. Support for SMIL is very limited, however, and may require the use of a custom player. Other non-markup-based methods have been experimented with, such as creating an open-described video with a video track that appears to freeze while a separate open-description track plays. See an [example of a video with open extended audio descriptions](https://mass.pbslearningmedia.org/resource/tdc02.sci.life.reg.deathvall/teri-and-jairus-biome-buddies/na/) (created using a non-markup method). Also, read [one method for creating videos with extended open audio descriptions (see chapter 4.9)](http://ncam.wgbh.org/file_download/103).

+ +## Resources for writing descriptions + +The importance of presenting users with high-quality, accurate descriptions cannot be overemphasized. Use the guidelines below to help create descriptions that are informative and useful. + +- [DCMP Description Key](http://www.descriptionkey.org/how_to_describe.html) +- [DCMP Description Tip Sheet](https://www.dcmp.org/ai/227/) +- [Accessible Multimedia whitepaper](http://diagramcenter.org/research.html#multimedia) \ No newline at end of file diff --git a/source/accessible-media/production-captions.html.erb.md b/source/accessible-media/production-captions.html.erb.md new file mode 100755 index 0000000..da25929 --- /dev/null +++ b/source/accessible-media/production-captions.html.erb.md @@ -0,0 +1,170 @@ +--- +title: Production options for captions +nav_title: Captions +order: 2 +status: editors-draft +wcag_success_criteria: + - 1.2.2 +wcag_techniques: + - G87 + - G93 +editors: + - Geoff Freed + - Judy Brewer +contributors: + - The Education and Outreach Working Group (EOWG) +support: Developed with support from the U.S. Access Board, WCAG TA Project +--- + +## Caption basics + +Captions were invented for people who are deaf or hard of hearing, although they are [recognized to benefit many audiences](concepts.html#cc+ad_purpose). They can be open or closed: + +- **Closed captions** can be hidden and revealed by users, typically + by operating a button or menu on the player's control bar. +- **Open captions** are visible to everyone and cannot be turned off. + +Captions always reflect dialog and narration, and are always written in the same language as the audio ([subtitles](subtitles.html), on the other hand, are a translation of the audio into another language). They also contain important **non-speech information**, such as sound effects or speaker cues. + +There are three ways to present captions to viewers: + +- **Pop-on**: Captions which appear in discrete blocks, usually + containing 1-3 rows of text. These are normally created for + pre-produced material, and are used in the majority of captioned + online videos.
+ [![An example of pop-on captions.](cc_perspectives.png)](https://www.w3.org/WAI/perspectives/captions.html) +- **Roll-up**: Captions which scroll up, one row at a time, onto the + screen. These are normally created for live programming, but can + also be used for pre-produced material.
+ [![An example of roll-up captions.](roll-up.png)](http://ncamftp.wgbh.org/sp/wai/roll-up_cc.mp4) +- **Paint-on**: Text that appears to "paint" onto the screen, one character at a time, as the data are received. Typically, when one row of captions finishes painting onto the screen, the row scrolls up and a new row begins paint onto the screen.
+ [![An example of paint-on captions.](paint-on.png)](http://ncamftp.wgbh.org/sp/wai/paint-on_cc.mp4) + +Note that if a video has no narration or dialog, it is important to +indicate this to viewers so they do not think that captions are simply +missing from the presentation. In this situation, provide a brief +caption at the beginning of the presentation that indicates that no +audio is provided. + +## Production workflow: pre-produced captions + +From a technical perspective, captions are simply text presented through +markup that contains timing information and positioning codes. There are +a variety of do-it-yourself tools available for creating captions for +pre-produced video and audio clips. + +### Basic workflow for creating pre-produced captions: + +{::nomarkdown} +<%= sample_start %> +{:/nomarkdown} + +1. **Enter caption text into the editor**
+ Transcribe the audio directly into the caption editor or, if + available, import a transcript. +2. **Edit and break text into captions**
+ Edit for proper spelling and grammar; divide the text into caption + blocks. +3. **Time the captions**
+ Assign a timecode to each caption that indicates when it will appear + or disappear from the screen. +4. **Review the captions**
+ Watch the captioned video carefully and eliminate any errors. + Accuracy is paramount: misspelled or poorly edited and timed + captions will only make it harder for viewers to follow what is + happening on-screen. +5. **Export a caption file**
+ Export the captions in the target format. See [caption formats and + examples](formats.html) for more information. + +{::nomarkdown} +<%= sample_end %> +{:/nomarkdown} + + +Below is an image of a caption editor showing how captions have been +formatted and timestamped. + +![A caption editor showing timestamped caption text.](timecodes.png) + +### Caption quality + +Always provide the highest-quality captions that convey 100% accuracy. +See [resources for writing quality captions](#resources-for-writing-quality-captions) for more +information. Keep the following basic points in mind when writing +captions: + +- Ensure that there are no spelling errors. This includes the names of + characters or speakers. +- Use conventional grammar rules. After end punctuation (period, + question mark, exclamation point, etc.), always begin a new caption. +- Do not edit unless you have a specific reason to do so (e.g., to + achieve a specific reading level). Fillers such as "um," "ah," etc., + can be deleted to save reading time unless doing so alters the + representation of the speaker. +- Do not censor: the captions should always accurately represent what + is spoken. + +### A word about styling captions + +Most caption-creation tools give authors the ability to style captions in a number of ways: e.g., adding color to the text or background, specifying different font faces and sizes, etc. While it is possible to add styling information to captions, the support in browsers and other media players varies. If the media is produced for a specific player, style the captions to that player’s capabilities. Otherwise, rely instead on the player's default presentation style (usually white characters on a black box). + +Note that many media players give users the option to [customize captions to personal preferences](playing.html#user-customization-of-captions), and these preferences always override author styling. For some users, customizing captions is essential, not just an enhancement: styling captions in specific manners (for example, yellow text over a black background, with a very large font size) may be the only way for them to make the text readable. +{:#cutom_cc} + +Below is an image showing how bold text can be added to captions in a +caption-authoring tool. + +![A caption editor showing white caption text on a black background. One +row of text is bold.](text_bold.png) +And here is the WebVTT markup for that caption... + +{::nomarkdown} +<%= code_start %> +{:/nomarkdown} + +~~~html +1 +00:00:00.670 --> 00:00:06.680 +The genome is a storybook that's been edited +for a couple billion years. +~~~ + +{::nomarkdown} +<%= code_end %> +{:/nomarkdown} + +...and the TTML markup for the same caption: + +{::nomarkdown} +<%= code_start %> +{:/nomarkdown} + +~~~html +

+The genome is a storybook that's been edited
+for a couple billion years.

+~~~ + +{::nomarkdown} +<%= code_end %> +{:/nomarkdown} + +### Automatically generated captions + +Automatically generated captions should **never** be used as the sole +method to produce captions, but they can be a part of the production +workflow. See the [discussion about automatic captions](automatically-generated-captions.html) for +more information. + +## Resources for writing quality captions + +The importance of presenting users with high-quality, accurate captions +cannot be overemphasized. Use the guidelines below to help create +captions that are informative and easy to read. + +- [DCMP Captioning + Key](http://www.captioningkey.org/quality_captioning.html) +- [DCMP Captioning Tip Sheet](https://www.dcmp.org/ai/225/) +- [Captioning + FAQ](http://main.wgbh.org/wgbh/pages/mag/services/captioning/faq/sugg-styles-conv-faq.html) diff --git a/source/accessible-media/subtitles.html.erb.md b/source/accessible-media/subtitles.html.erb.md new file mode 100755 index 0000000..18ef6af --- /dev/null +++ b/source/accessible-media/subtitles.html.erb.md @@ -0,0 +1,98 @@ +--- +title: Subtitle concepts and examples +nav_title: Subtitles +order: 5 +status: editors-draft +wcag_success_criteria: + - 1.2.2 +wcag_techniques: + - G87 +editors: + - Geoff Freed + - Judy Brewer +contributors: + - The Education and Outreach Working Group (EOWG) +support: Developed with support from the U.S. Access Board, WCAG TA Project +--- + +## Subtitle basics + +Subtitles (also known as foreign-language subtitles) are, from a +technical perspective, similar to captions: they are text (or sometimes +images of text) presented through markup that contains timing +information and positioning codes. They can be created using the same +authoring tools as captions, and they can also be delivered using the +same basic timed-text markup formats: + +- [Timed Text Markup Language + (TTML)](https://www.w3.org/TR/ttaf1-dfxp/) +- [Web Video Text Tracks (WebVTT)](https://w3c.github.io/webvtt/) +- [SRT](https://matroska.org/technical/specs/subtitles/srt.html) + +And, as with captions, they can be open or closed: + +- **Closed subtitles** can be hidden and revealed by users, typically + by operating a button or menu on the player's control bar. +- **Open subtitles** are visible to everyone and cannot be turned off. + +In instances where subtitles cannot be presented using true text, they +can instead be presented as bitmaps: in other words, pictures of text or +other symbols. The bitmaps themselves can still be transmitted using +markup, though, by using [TTML Profiles for Internet Media Subtitles and +Captions 1.0 (IMSC1)](https://www.w3.org/TR/ttml-imsc1/). Keep in mind that bitmap captions cannot be customized, which may diminish their usefulness to viewers with certain types of visual impairments. Learn more about [why caption customization is important](production-captions.html#custom_cc). + +## Differences between subtitles and captions + +Subtitles are not the same as captions, nor are they aimed at the same +audiences. Here are some of the basic differences. + + + + + + + + + + + + + + + + + + + +
SubtitlesCaptions
Intended for people who can hearIntended for people who are deaf or hard of hearing
Translation of the audioSame language as the audio
Do not contain non-speech information
+ (indications of music, sound effects, etc.)		Contain non-speech information
Not positioned to convey who is speakingOften positioned to indicate who is speaking
+ +##Delivering subtitles to viewers + +Subtitles are delivered to viewers using HTML5's `` element. +`` is used as a child element of the `
+
+
+

Document Information

+

Feedback: We welcome ideas for improvements, bug reports, and comments via GitHub or e-mail to wai-eo-editors@w3.org (a publicly archived list) or wai@w3.org (a WAI staff-only list).

+
    +
  • Status: + <% if current_page.data.status=="approved-draft" %> + Draft, approved by EOWG, updated + <% elsif current_page.data.status=="draft" %> + [DRAFT] updated + <% elsif current_page.data.status=="editors-draft" %> + [EDITOR’S DRAFT] updated + <% else %> + Updated + <% end %> + <%= File.mtime(Dir.glob('source/' + current_page.path + '.erb.md')[0]).strftime("%d %B %Y") %> + <% if (!current_page.data.status and current_page.data.layout!="fullcode") %> + <% if current_page.data.first_published %> + (first published <%= current_page.data.first_published %>) + <% elsif (current_page.data.order!=1 and current_page.parent.data.first_published) %> + (first published <%= current_page.parent.data.first_published %>) + <% end %> + <% end %> +
    • + <%= partial "layouts/contributors" %> +
  • [<%= nav_link('Attributions', '/attributions.html', :relative => true) %>] [<%= nav_link('Changelog', '/changelog.html', :relative => true) %>]
    • +
+

+ [WAI Site Map] + [Help with WAI Website] + [Search] + [Contacting WAI] +

+
+

+ Copyright © 2014 W3C ® (MIT, ERCIM, Keio, Beihang) Usage policies apply. +

+
+
+
+ <%= javascript_include_tag "main" %> + + + + + + diff --git a/source/layouts/_header.erb b/source/layouts/_header.erb new file mode 100755 index 0000000..2a9f333 --- /dev/null +++ b/source/layouts/_header.erb @@ -0,0 +1,37 @@ + + + + + + <%= current_page.data.title %> + <% if current_page.data.order == 1 %> + <% if current_page.data.tutorial_title %> + <%= " • " + current_page.data.tutorial_title %> + <% end %> + <% else %> + <% if current_page.parent and current_page.parent.data.tutorial_title %> + <%= " • " + current_page.parent.data.tutorial_title %> + <% end %> + <% end %> + • WAI Web Accessibility Tutorials + + + + <%= stylesheet_link_tag("wai-act", {media: false}) %> + <%= javascript_include_tag "modernizr" %> + + + +
+
+ <%= image_tag 'w3c.svg', :alt => "W3C", :width => "90" %> + <%= image_tag 'wai.svg', :alt => "Web Accessibility Initiative" %> +
+
+ <%= x_link_to('Web Accessibility Developer Intros Guidance on how to create websites that meet WCAG', '/index.html', :relative => true) %> +
+
+
+ diff --git a/source/layouts/_prevnext.erb b/source/layouts/_prevnext.erb new file mode 100755 index 0000000..2c39684 --- /dev/null +++ b/source/layouts/_prevnext.erb @@ -0,0 +1,46 @@ + diff --git a/source/layouts/_resources.erb b/source/layouts/_resources.erb new file mode 100755 index 0000000..fbf8474 --- /dev/null +++ b/source/layouts/_resources.erb @@ -0,0 +1,32 @@ +<% if (current_page.data.wcag_success_criteria || current_page.data.wcag_techniques) %> +
+ +
+

These tutorials provide best-practice guidance on implementing accessibility in different situations. This page combines the following WCAG 2.0 success criteria and techniques from different conformance levels:

+ <% if current_page.data.wcag_success_criteria %> +

Success Criteria:

+
    + <% data.wcag.successcriteria.each do |f| %> + <% f.each do |key, value| %> + <% if current_page.data.wcag_success_criteria.index(key) %> +

  • <%=key%> <%=value.title%>: <%=value.desc%> (Level <%=value.level%>)

    • + <% end %> + <% end %> + <% end %> +
+ <% end %> + <% if current_page.data.wcag_techniques %> +

Techniques:

+
    + <% data.techniques.techniques.each do |f| %> + <% f.map do |key, value| %> + <% if current_page.data.wcag_techniques.index(key) %> +
  • <%=key%>: <%=value%>
    • + <% end %> + <% end %> + <% end %> +
+ <% end %> +
+
+<% end %> diff --git a/source/layouts/_topic_navigation.erb b/source/layouts/_topic_navigation.erb new file mode 100755 index 0000000..18dd14c --- /dev/null +++ b/source/layouts/_topic_navigation.erb @@ -0,0 +1,6 @@ +

+ All Developer Intros +

+
    +
  • <%= topic_link('Accessible Media', 'accessible-media/index.html', :relative => true) %>
    • +
diff --git a/source/layouts/change.erb b/source/layouts/change.erb new file mode 100755 index 0000000..969303a --- /dev/null +++ b/source/layouts/change.erb @@ -0,0 +1,108 @@ +<%= partial "layouts/header" %> +
+ +
+
+

+   +

+
+

+ <%= current_page.data.title %> +

+
+ + <% if current_page.data.status=="draft" %> +
+

Status: This is an in-progress, unapproved draft.

+
+ <% end %> + <% if current_page.data.status=="editors-draft" %> +
+

Status (not ready for review): This is an in-progress, unapproved editor’s draft. Content may change at any time without notice.

+
+ <% end %> + +
+ <%= yield %> + <% if false %> + <% data.changes.changes.each do |f| %> + <% f.each do |key, value| %> + + + + + + + + + + + + <% value.each do |v| %> + + + + + + + <% end %> + +
Changes on <%=key%> Permalink
ChangePageSuggested byLinks
<%=v.desc%> + <% if v.page == 'all' %> + Site wide + <% else %> + <% if sitemap.find_resource_by_path('/' + v.page).parent && sitemap.find_resource_by_path('/' + v.page).parent.data.title != 'Developer Intros' %> + <% + item = sitemap.find_resource_by_path('/' + v.page).parent + if item.data.tutorial_title + letitle = item.data.tutorial_title + else + letitle = item.data.title + end %> + <%tuttitle = '' + letitle + ':
'%> + <%else%> + <%tuttitle = ''%> + <%end%> + <% + item = sitemap.find_resource_by_path('/' + v.page) + if item.data.nav_title + letitle = item.data.nav_title + else + letitle = item.data.title + end + if v.fragment + fragment = v.fragment + else + fragment = '' + end + %> + <%= link_to( tuttitle + sitemap.find_resource_by_path('/' + v.page).data.title, '/' + v.page + fragment, :relative => true) %> + <%end%> + 		+ <% if v.by %> + <%=v.by.join(", ")%> + <% end %> + + <% if v.commit %> + Commit + <% end %> + <% if v.issue %> + Issue + <% end %> + <% if v.link %> + Link + <% end %> +
+ <% end %> + <% end %> +<% end %> + <%= partial "layouts/resources" %> + + <%= partial "layouts/contribute" %> +
+
+ +<%= partial "layouts/footer" %> diff --git a/source/layouts/fullcode.erb b/source/layouts/fullcode.erb new file mode 100755 index 0000000..216ba83 --- /dev/null +++ b/source/layouts/fullcode.erb @@ -0,0 +1,28 @@ +<%= partial "layouts/header" %> +
+
+

+ <%= current_page.data.title %> +

+
+ + <% if current_page.data.status=="draft" %> + +
+

Status -

+

This is an in-progress, unapproved draft. Please send any suggestions, edits, or comments to the publicly-archived list: wai-eo-editors@w3.org. +

+
+ <% end %> + +
+ + <%= yield %> +
+
+ +<%= partial "layouts/footer" %> diff --git a/source/layouts/layout.erb b/source/layouts/layout.erb new file mode 100755 index 0000000..f8acd32 --- /dev/null +++ b/source/layouts/layout.erb @@ -0,0 +1,152 @@ +<%= partial "layouts/header" %> +
+
+
+ +

+ <%= current_page.data.title %> +

+
+ + <% if current_page.data.status=="draft" %> +
+

Status: This is an in-progress, unapproved draft.

+
+ <% end %> + <% if current_page.data.status=="editors-draft" %> +
+

Status: This is not ready for detailed review. It is an in-progress, unapproved editor’s draft.

+
+ <% end %> + + +
+ + <% if false # current_page.data.technologies %> +
+

Used Technologies: + <% current_page.data.technologies.sort_by! { |x| x.map { |key, value| key} }.each do |x| %> + <% x.map{ |key, value| ''+key+'' }.each do |y| %> + <%= y %> + <% end%> + <% end %> +

+
+ <% end %> + + <% if current_page.data.type == 'intro' # current_page.data.technologies %> + <% technologies = Array.new + current_page.children.each do |x| + if x.data.technologies + x.data.technologies.split(',').each do |y| + technologies << y.strip + end + end + end + if technologies.length > 0 %> + + <% end %> + <% end %> + + + <%= yield %> + + + <%= partial "layouts/resources" %> + + <%= partial "layouts/prevnext" %> + + <%= partial "layouts/contribute" %> + +
+
+
+
+ +
+<%= partial "layouts/footer" %> diff --git a/source/layouts/overview.erb b/source/layouts/overview.erb new file mode 100755 index 0000000..92b0092 --- /dev/null +++ b/source/layouts/overview.erb @@ -0,0 +1,33 @@ +<%= partial "layouts/header" %> +
+
+
+

+ <%= current_page.data.title %> +

+
+ + <% if current_page.data.status=="draft" %> +
+

Status: This is an in-progress, unapproved draft.

+
+ <% end %> + <% if current_page.data.status=="editors-draft" %> +
+

Status (not ready for review): This is an in-progress, unapproved editor’s draft. Content may change at any time without notice.

+
+ <% end %> + +
+ <%= yield %> + + <%= partial "layouts/resources" %> + + <%= partial "layouts/contribute" %> +
+
+
+ +<%= partial "layouts/footer" %> diff --git a/source/stylesheets/_grid.scss b/source/stylesheets/_grid.scss new file mode 100755 index 0000000..9c3b82d --- /dev/null +++ b/source/stylesheets/_grid.scss @@ -0,0 +1,239 @@ +/** + * Profound Grid + * + * Built in Sass (SCSS) this responsive/adaptive grid supports both fixed and fluid layouts, + * relative and fixed gutters, as well as your choice of semantic markup or generic '.grid-x' classes. + * + * The biggest difference to other grid systems is the use of negative margins for column + * placements, avoiding the subpixel rounding issues that usually break/uglify fluid layouts + * in some browsers. + * + * Nested columns are supported too, without having to reset the grid on each level. + * + * Credits/Inspiration: + * ------------------- + * Semantic Grid: http://www.semantic.gs + * Susy: http://susy.oddbird.net + * Negative Grid: http://chrisplaneta.com/freebies/negativegrid-fluid-css-grid-by-chris-planeta/ + * + * @author Profound Creative Studio + * @url http://www.profoundgrid.com + * @url http://www.weareprofound.com + */ + + //////////////////////////////////////////////////////////////////////////////// +// Defaults (feel free to override) +//////////////////////////////////////////////////////////////////////////////// + +$total_columns: 12; // // +$total_width: 100%; // px|100% // px = fixed, 100% = fluid +$gutter_width: 1%; // px|% // px = fixed, % = fluid +$container_margin: 1%; // auto|px|% // + +$class_container: 'row'; // // +$class_column: 'col'; // // +$class_push: 'push'; // // + + +//////////////////////////////////////////////////////////////////////////////// +// GRID MATH +//////////////////////////////////////////////////////////////////////////////// + +@function element_width($column_index){ + @if ($total_width == 100%){ + $not_rounded_value: (((100% + $gutter_width)/$total_columns)*$column_index)-$gutter_width; + $not_rounded_value: $not_rounded_value * 100; + $rounded_value: round($not_rounded_value)/100; + @return $rounded_value; + }@else{ + @return ((($total_width + $gutter_width)/$total_columns)*$column_index)-$gutter_width; + } +} + +@function column_width(){ + @if ($total_width == 100%){ + $not_rounded_value: (((100 + $gutter_width)/$total_columns))-$gutter_width; + $not_rounded_value: $not_rounded_value * 100; + $rounded_value: round($not_rounded_value)/100; + @return $rounded_value * 1%; + }@else{ + @return ($total_width - ($gutter_width*($total_columns - 1)))/$total_columns; + } +} + +@function container_width(){ + @if ($total_width == 100%){ + @if ($container_margin == auto){ + @return 100%; + } + @return 100% - 2*$container_margin; + } @else { + @return $total_width; + } +} +//////////////////////////////////////////////////////////////////////////////// +// BASIC MIXINS +//////////////////////////////////////////////////////////////////////////////// + +/** + * Clearfix + */ +@mixin clearfix(){ + overflow: hidden; + *zoom: 1; +} + +/** + * Legacy Clearfix + */ +@mixin legacy-pie-clearfix(){ + *zoom: 1; + + :after { + content: "\0020"; + display: block; + height: 0; + clear: both; + overflow: hidden; + visibility: hidden; + } +} + +/** + * Establish the grid-containing element. + */ +@mixin container(){ + width: container_width(); + margin: 0 $container_margin; +} + +@mixin container-full(){ + width: 100%; + margin: 0; +} + +/** + * Align an element to the grid. + */ +@mixin column($_columns_width, $_padding_columns:null){ + float: left; + margin-right: -100%; + $_width_perc: element_width($_columns_width); + width: $_width_perc; + + @if($_padding_columns != null){ + @include push($_padding_columns); + } +} + +/** + * Apply to any column to make it the last one of the current row. + */ +@mixin column_omega(){ + +} + + +//////////////////////////////////////////////////////////////////////////////// +// MARGIN MIXINS +//////////////////////////////////////////////////////////////////////////////// + +@mixin pre(){} +@mixin post(){} +@mixin squish(){} + +@mixin push($_column_index){ + $_width_perc: 0; + @if ($total_width == 100%){ + $_width_perc: ($gutter_width + element_width($_column_index)); + }@else{ + //$_width_perc: (column_width() + $gutter_width)*$_column_index; + $_width_perc: ($gutter_width + element_width($_column_index)); + } + + margin-left: $_width_perc; +} + +@mixin pull(){} + + +//////////////////////////////////////////////////////////////////////////////// +// HELPER CLASSES +//////////////////////////////////////////////////////////////////////////////// + +@mixin generate_helper_classes(){ + + /* Helper Class: Container */ + .#{$class_container}{ + @include container(); + } + + /* Helper Class: Columns */ + @for $i from 1 through $total_columns{ + .#{$class_column}#{$i} { + @include column($i) + } + } + + /* Helper Class: Horizontal Position */ + @for $i from 0 through ($total_columns - 1){ + .#{$class_push}#{$i} { + @include push($i); + } + } + +} + +@mixin generate_grid_positions($_column_selector, $_element_width){ + + $_cols_per_row: floor($total_columns / $_element_width); + + // create rule for each element + @for $i from 1 through $_cols_per_row{ + + #{$_column_selector}:nth-child(unquote("#{$_cols_per_row}n+#{$i}")){ + @include push((($i - 1)*$_element_width)); + margin-bottom: $gutter_width; + + @if ($i == 1) { + clear: both; + @include clearfix(); + }@else{ + clear: none; + } + } + } +} + +@mixin generate_grid_positions_legacy($_column_selector, $_element_width, $_elements_in_grid:$total_columns){ + + $_cols_per_row: floor($total_columns / $_element_width); + $_current_col:1; + + // create rule for each element + @for $i from 1 through $_elements_in_grid{ + + $selector: #{$_column_selector}; + @for $ii from 2 through $i{ + $selector: unquote("#{$selector}+#{$_column_selector}") + } + + + #{$selector}{ + @include push((($_current_col - 1)*$_element_width)); + margin-bottom: $gutter_width; + + @if ($_current_col == 1) { + clear: both; + @include legacy-pie-clearfix(); + }@else{ + clear: none; + } + + $_current_col: $_current_col + 1; + @if ($_current_col > $_cols_per_row){ + $_current_col:1; + } + } + } +} diff --git a/source/stylesheets/_helpers.scss b/source/stylesheets/_helpers.scss new file mode 100755 index 0000000..f1e199d --- /dev/null +++ b/source/stylesheets/_helpers.scss @@ -0,0 +1,48 @@ +@mixin mq($width, $IE9: false, $query1: min, $query2: width) { + @if $IE9 == true{ + .lt-ie9 & { + @content; + } + @media screen and (#{$query1}-#{$query2}: $width) { + @content; + } + } + + @else { + @media screen and (#{$query1}-#{$query2}: $width) { + @content; + } + } +} + + +/* +* Hide only visually, but have it available for screenreaders: h5bp.com/v +*/ + +.visuallyhidden { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +/* +* Extends the .visuallyhidden class to allow the element to be focusable +* when navigated to via the keyboard: h5bp.com/p +*/ + +.visuallyhidden.hasfocus, +.visuallyhidden.focusable:active, +.visuallyhidden.focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; +} diff --git a/source/stylesheets/_icons-png.scss b/source/stylesheets/_icons-png.scss new file mode 100755 index 0000000..0a303b3 --- /dev/null +++ b/source/stylesheets/_icons-png.scss @@ -0,0 +1,116 @@ +.icon-github { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAgCAYAAADjaQM7AAAB+klEQVRIieXWS4hOYRzH8c+MJuNWJFmYvKUkCqG8ySWXmpSaLKjJnoUysbO00CwmzUoopUiIjbAapViwGRuXcamJSYiFchvMO3otzntyOj3nvcw5K/71X5zf//L9P8/TOc/hf7d52IN+XMRNXMNpHMTqIiDrcR0TqDbwFziEzlYh83G5CUDIx9DdLGgN3k4RlPTjjUBlfC0AFPuZLFAJHxOJE5icAuB76vloGtSGO6mkvZiLAxhN6JP4hPHUYKewAu34kIhVsDYJ2xeYsJSIT8eumtaW0GdjM5anhr+V6vUguapnAdji9PJbsBuBft2wMRCoYnsO2NNAvytwIhAYygGCnkDPb3A3ENiREwYjgb7eB8QZBcDOhmA/U0KlABAMhmDjAXFWAbBzIdibgLihANhwCHYvIA7kBJXwOwTrD4if0ZUDdj6jp02BQFX0Yi5tEdIh2pVQv6tx0uOaMIL9eFR7/iG6+rdiTgZgGpahDy8zQFVsiwt6E+IgZuJhKvm58JV/pA4g9vvpoqFEsFe0hWMJrS9jZZ34VQdUwcp0URfe+XteHbVGZSzJAMUWen1iP5xVtA5fakm3RWe1CAtlnxm8zgCdbDCkVRmT9tSpeRXIP9YIFNsCXEgV724SNoqdzYKSVsYl0cd6S528YTwR/R3nvjHac8b/cfsDJZs/Ku0RoNwAAAAASUVORK5CYII='); + background-repeat: no-repeat; +} +.icon-warning-sign { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABfklEQVRYheWWvUoDURCFPxvL+AKWtnmI+BYpfYMUYil2UTtFUlhsGgsbIQhZgyJokcq8gZC0CiklYEhYi9wFuTt37+yvhQMHwnLOnGFZPgL55wD4BD7M71qnCayAyGhlntU24a/yWGFd5ftCeaxW1eVbwCTlgInxVDbtlPJY7arKt4Gp4oCp8ZY+HUV5rE7Z5TvAPMMBc5MpbU6tggDYsxRYnm5Z5bvAwlp+KPiOLM/CZAtPn+QrPhZ8J4IvKFreBNbCYun1ngu+NQURLSE3Ai4E75XDmxvRLcfCCLgW/PZHWAjRPuTeCJnbFP8bGRHtQ+6dkLn3ZNSI1iB3JOSePRk1ojXI/QYe2XxgIfAELBU5L6KzIjervIjuKhd9AT3g0qhnnmmyTkRLyHXpQciPlFknovvKBREyXFzQkpRAtAu5VR2QQHSWcAS8CAe8ZtwxjINp/3LTNAPejWY5d7QAxjnDZWgMOoBUpSXA4A8PGAA0gDM2H0VYk4ams8G/nx/9x+gKW66SQQAAAABJRU5ErkJggg=='); + background-repeat: no-repeat; +} +.icon-arrow-left { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAgCAYAAADjaQM7AAAA40lEQVRIie3UO0pDQRiG4SdikQXYZgM2BgRvhb0uQRcQCytvjQuQWNpYWFkJJtZuIX3qrCEoCJ4qFjoWB5U55swEgx+85fA0P8P/Zrhl3OEBaymhdTxh8tErdlNAGyUoVGA1BxS6yQVN0M0FjbA0LbQZCbX+FPQ8V9BWBFSgg50KbaNZFZqmYYDaiaEQeMwAfWKDnNh+TgyOEkMvSosBC1zjqkIXWCljcBwB9rH41ePfLDt4EgH2coP3swAX6gJPI8DDurAY8LZODM5+wPbqxr4DL1NAYQcYe/+CzlNCYQ0VL/ANDJtLIIWtMKIAAAAASUVORK5CYII='); + background-repeat: no-repeat; +} +.icon-arrow-left2 { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABr0lEQVRYhc2XMXLCQAxFX8VQ+AKu4QDpaaBMRwd34AwcgNwAyGFo6eAMVCEz6SggzCSFpRl5WS+7sYnRjBpZ+7+8q9VKEC8ZMAVWwBY4AmfRo9iW4pMl4N6VPrAGTsBPpJ5kTb8OcRdYAJcEYlcvgtFNJe8Bew/gHpgDQyAHOqK52OaBdb1Y8hfgwwHYAIOEHxjIGovxIdhB6Tnk38AsgdiVmWDYICp3okt5+76AUQB8DBxEXwN+I8Gyx+HNiTfKfx4inwBX438I+GoQdicWrkOfcraHtt0ljwkAwbS3o3RF3yknXAr5leI4YmRj1q3VmFEuMlXZXkU+iSRHsG2xyqAonWrcPZBcxSb6FIrarob5g8kRDsVZQvGIqGH4YHKEQ7G2AJ/GkBvHsYf8L+rWidx8O0LxnKqhYxwPDZD7rmnH2M9PEUDrRxBKwqkniMaT8N41bDqIm2toC9G+YlGTQdwUothS3EQQ3lIMxcOgHzYBgKogaj1GkPYc+4Ko/RxD0SSow72GxA2idkMCT9CSQctNqUqrbblK1WCy4x8GE5VWRzMrrQ2nrsSM5ysSx/NfCFuspvkCX1AAAAAASUVORK5CYII='); + background-repeat: no-repeat; +} +.icon-arrow-right { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAgCAYAAADjaQM7AAAAzUlEQVRIie3Rv0qCYRjG4UtcEgmH5manEGnoGKQzabFDaOyPOAgegocgDa6CbUWn4NRSU0MQ2vSCBaHfp++Dgz+4x4dreDgUXB23eMQVKrmgY0yxXNkwB1jB5A+UDTz7B8oCnmIRCd6swXYO3kWD99HgQzTY2wZsolNwszJgd4OjbfYLfMuMLdFPWG4orRmJXcBnAPSEKowyQy84ST87wjUGBfdcFCrbJb4O0F5DnSiogY8ICM6jIKhhHgGl2niPgFItvOIb45zQatWyhz9UrkzW1RKFTQAAAABJRU5ErkJggg=='); + background-repeat: no-repeat; +} +.icon-arrow-right2 { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABk0lEQVRYhc2XMXLCQAxFX8VQcAHX9gHS05gyHR2+A2fwAcgNgByGlg6fgQoyk44CJzNJYWlG3gGz6xAWzajRavW/11ppBf4yAgpgBWyBI3AWPYptKT6jgLg3JQPWwAn48dST7Mn+AjwEFkAdAOxqLTGGoeApUF0IWAElkAMJMBBNxFZ27Et9wV+AgxNgA4wDPmAse2yMg8TulNQB/wLmAcCuzCWGJXH1JIa0j+8TmHQEfwX2otMOv4nEsr/jYk680f7yLnAEWP2/gdkNEvYkFq5DRjvbfY7dEvAhMTe+Nc4VfaedcD4yFdAQEhvju1bjiHaRCcn2WSCJsfE7CTaFMe4CwPuSsIleQFPb1VD2IBBKojQ+S2iaiBryngRCSORmfQvwYQyJcdR73rcPWBK2TiRm7QhNO1XDwDjeA1x1b+IOjP38FASi/4LoSRj9GtpCVP0zOFwoRNFLMTSNQRc2nuB3a0bwBO0YmkeCOjz8QQJP8CSDyI9SlajPcpVrg8mOBwwmKlFHMyvRhlNXfMbzFYHj+S9YWayfEoW2mwAAAABJRU5ErkJggg=='); + background-repeat: no-repeat; +} +.icon-chevron-left { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAgCAYAAAD9oDOIAAAAxElEQVRIieXVIW4CURQF0BPGUdsF1KJYAK57ICG0iEpUd1AUkqQbwFAquwUKmyGUDYBoAUEmIaHkM58vyHCTK98xT1zik11we5QKBlhhiVYKcITtQTd4SQnm/UU9Bvw4AeZ9TQ1u0UgNvqUGe+eCGca3B35eNQjvqcEM6wDYLwLm+QmgE1SLok38BeDvGLhTSniKu6LwcynhWQz8ZL9BoecVnuxz4KipDsHdGBTaJ+A57mPR/+AFapeAeR7xhSEeUoAlyg7YwN8HNAEeIgAAAABJRU5ErkJggg=='); + background-repeat: no-repeat; +} +.icon-chevron-right { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAgCAYAAAD9oDOIAAAAvUlEQVRIieXToQ3CQBSA4T9BgUEgSldgAoIAOggLMAMKjyNhAQwL4JCscG1CxwCFAFEuIYRe+3qvIeH+5MwTX068B9/rlMwb1QX2wB3IgYkv2ANOwOPtXYGpD7r7AFXgvAT1gg8O1MIzKRoBWRtw3BY8BNJfwTdgHgZsasCJFI5qwqMm8KUC3kjR5PUbF7rSBjOgrw3GYYEpxQ7/CTjWBgHOFaCRguC+bUNxpuKW2qBtrQ3aFsAR2AIDDTCwnsUl3w48E2uWAAAAAElFTkSuQmCC'); + background-repeat: no-repeat; +} +.icon-cogs { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAgCAYAAAB3j6rJAAAC80lEQVRYhb3YW4iVVRQH8F+lkJovJj0Y6IAERpEXwsmh0EQqo4d8E/JCBCJeQjQKyQcVkVQwSOjR5kGCehHqIeyxEFIQM6bRSvESpiZJCOV4GceHvY9nu8/+vpmjzvxhw/nW919r/c/Ze62992F48QiW4r3M/hHeHObcdzEehzCAfrwe7SujbQDfjoSQR3E+SfpPTNyX2H4cCSGwOUlaGkvaDTgfa5Mxc4h+HyRJj+ELnEpsb7cr5LR7v8k3NdwufIeTuBn5XwlTBWPwU7T34QT2lwI9ixnJ8xjczoScyHxewaT4ea3WKejM+EsKnHvwGv7DDayOtjkFpxt4CqOwKwo9g6kVQt7I8pQ4dzEP17KXx4TSKy206/g9s53DSzHRnvg8gF8wOeZ5AReivQe7sSIVcrYiYbvj6yTmssTenwhojDkKWOnBRdzEy0nM7kH4H5eE1Dn+gZ3YgM/wVwVvfRJrLP5P3h3BKvyZxS3iw0Lw7Xgs443FvgJ3ccIZja3CuruMjmjvFMr2CtakQafjXezAxSxwd5XiKO6HjN8r/GpvaZbzFGGBpujCk3nARtMpjY6cnGFBjW/PIL4tqAp0YQi+42r8K+d/OIQ88TCFXK8J1jGIb93U9LYrpEPYBTdqLcvuGr/SYv0N24S95JnIm4znM99OTKgT9aDluyjhjMYWoZf8LVQPzI62K8JWUMTnheDtNLS0U1Y1tHQrOVkSsbQieDvjlrCDN9A9CL/Y4o8+BCED+D6JmW96ecPsKgl5EVczYq/qY0BffJ/aLmKu1mNAj2YFzsSlaP8Vn8qOAaLCf4WDz7po6yyI6MdEYRF/otl3nlM+9CzM8rxf4LRgmrD/NDAqCkudzmU+c/F0/FwSMjvjvzMUISUcz5wO1HBLh+cvNQ/Pj+Og5vRWHp5LeFX4ORtj1hD90uvEz9gbBTZsbV8n7hebtU5BOtq+YN0Pqq6c6d42IlfO8TisWWWNK8WqRMiIXMIJf0ss19onNsn+lrgDP8bSBwfndrMAAAAASUVORK5CYII='); + background-repeat: no-repeat; +} +.icon-external-link { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABWUlEQVRYhe2Vr0sEQRiGHwSDRUx3TQ1nEIs2/wUxrFGDgtGgmCz+BcJxQYwGsQhiuqDdbLbYDBqUw+APEI4z7Iw7jsvuNzvfIqIvvDDh3e99mBlmQV9zQA8YCNytoZ9EWG79qVFgCzgBzoGLAHeBSWfWXijAPHAfSO57wdsJKQQTZGf2BpwC+4HuAA2+SwLBoVk8AtM5Q2K0JgG4M4udGsr7EgAbWvyB8gHOwr9EmuV9YJX8O6EKUFRu5UOoAUjKfYieFkBIuVVC+mxHA1Qp/6IYgOjyGACV8qoAauVVAFaE5Q3g1TjvP1EZoC0oB2g5mZYmwBBwXFJeK4CFaAPLBZlaAST6PQDvJpQoA8w4AONFwWsTOlAG2DZzX4DhouAu2Y3eIL1gsVoCns3co7LwCHBFtl1PwE2EH5xZt0BTQjwGnDkfaviSkrPP0xTpO78Z4XVgNrT4X39XH/jxL+//T8V3AAAAAElFTkSuQmCC'); + background-repeat: no-repeat; +} +.icon-eye-open { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACP0lEQVRYhe3WP0hWYRQG8B9miRZuRdQSRUOZS2MQkUGFay0ZFQ3tOlY2JtkQtZqLm0S0tIZRUxJhUSThn4YohAZTDDL803DPx/d6u5/6mTWEDxz4znvOeZ7znvfe+35sYAMbWDsasDus4V8IHkYXBjCFxZxNRawrctcFtbiM4QLBlex91NauVfwkRiqQf0c/ruLhCo2MBNeqUY+ehGAeC4n/BLuS/KMVhBeituT3BPey2IHBpGgQHYn/DJuxDTfxKqZRafcdOb4XoVGInRhNkrtQg77w57A/dvFyGdHU+oKjK1kbDa0laMRQInQuiX2M9efht69SfBHjCU9bcC+GVmPaQL/yuV3INfczYvfDf1RFA7M5rovKz1N/afF8UtCZH43yOz8sm8zXKhr4VsB3I4m3wVg4A7LzyuNNFYJ5e13AV4OnER+DyXDuFCTD7T9ooLsC592IT4qk0vmfKkjeIzvLasV/RG0ep5Wfg26ow9uko+aCoutraOBaAU+z8sTfhTY4JHtgFvEZBwqKe6sQ7y2oP4gvEZ8KzSU4JhtbaRItBSQdmF5GeDpy8mhJdj6L4wU54ITyJOZxC1tyOdtlH6PHsg/KUPxuj1iKOtk5l+6EKau4mJrwIdnVOC5h00qFCTZFzXjCM6Jg7JVQL3st09tsAvfQ6vedirXWyJlI6hZibU3/mprwwNLruGQz+BQ2UxBfkP1XWPWul8Ne2as4pHyhFNmc7OvXiX3rIVyEBhzBGVwJOxtrW/+W6Ab+X/wCVeJJuTn46J4AAAAASUVORK5CYII='); + background-repeat: no-repeat; +} +.icon-file-alt { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAgCAYAAAD5VeO1AAABDElEQVRIie3WoUoEURiG4acIglpsVpuYBW9gcb0Cr2FxTV6B0eolGDVZNJisNouCG9xgsIlgEcMY5gwsws7598yCCv7wwgzz8X7Mz2EY/vJs4QyXM3COfSzl5GNUhTxho03eBC9wkuEuZV/xka5f2goa+W7uFVNBpV7NNt5yBaVykYIu8mxBV3lrwTzk3wuesTpPeVPwnjJHpfKx6cd1lDK3s8oPJ/I5RrPKF3GsXsvVFO5L5ZE5+DH5nvheGz7VX9esfFAgr9CLyFfQT/dReliIyLtOq3wNwxSKMsByRD5UtvN+RL6Dx/QwygM2I/Ku8y+PyyO/FhFuJuVjZUcvxzVlv3M5TrFeuNZfMF9a4CU3pSV9hwAAAABJRU5ErkJggg=='); + background-repeat: no-repeat; +} +.icon-file-text { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAgCAYAAAD5VeO1AAAA4UlEQVRIie3WMQrCQBCF4f8AFt5AsBNsba2TQvEYNgo21h7AytbO0gOksbH0BhYRjJ2ewEpiM0VQszsTEyTgwINskv0GJiwE6lw9YAtEigxlTxcYAw0fngCpMhPZE8o6BjouXAtn8SBz7+pq8C3ubFAGntugLPxjgzLxtwZF8NDz3gVoVoWnwKIo3pJrV0ZWfImxLPgdmMtYfOlbcUviP67GD/JBAkMGwFmDryhWkQY/AlP8hySbGXDT4JXO/AGc5KE2r/POxdfWYUvtf45XOpb6nNCkInwHtt85bTZAm9rWEy2C4cNzKKRrAAAAAElFTkSuQmCC'); + background-repeat: no-repeat; +} +.icon-home { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAeklEQVRYhe3TQQ7AIAhEUY/uze3GJhWhVTNAjZDM0vy3MaW4zS/XucVLHYcoZGpxCaEG4OIcQgXwFqcIOGAk/kRAATNxaa7xZQAqvgRAxqcB6Dj9oubxYYRm/BNhERcRlvEO4RFvEF7xe92ZBwOwLQD1LgAB+B/grLsAiXoSGe8+Yq8AAAAASUVORK5CYII='); + background-repeat: no-repeat; +} +.icon-info { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAB00lEQVRYhc2XMZLCMAxFXTEUuQA1HICextwgI/8/wx04AwfgCJA9TFo6OAbsDB0FUOwWazNKJlmcZCGrGTdOLD3LsmQZEykkEwALAFuSO5Inklc/Tn5uA2BBMonVG2N4AiADcCH5FTMAXABkJCetDVtrhwDWJG+xhivGDcDaWjtsZDxN0zGAQ8XODgBWAKyIjEgOSA5EZATA+m+V69I0HUcZJzkFcCwpyUVkFrsBEZmRzEsQR5LTmJ0f1aK7c24Za7gszrklgLuGqPWEP3PtvrOIzNsaDyIic5JnfRyVMeED7rHzvzCuIUqeWBd+IDnR0R7j9nKgPfvfObfUt6NwRUl+6ICL2VVTAL8mV17IwmSik0xstLcB8LfjkaxIJsanzqBoH6OoLYAxxuhAB7AwPreHiVWsorYCYKXAN8YXkQBg3wBgFcDOkPxU5z96pqAu78cC+BQe1p0Mf8ppmBi8GsDXj7Du2higDqQLwKnJEXQFqDqCVkHY4RoWg7DtNewAULyGOhEBOLwBoJiIek/FnipTyvImhpuAsKoY+Q/R5bgtwK/l2HuhvweJMf/gSWZMz4/SIOzzWR6krjEhuX95YxKk19ZMC/tqTitAnrbnALZN2/NvVyUGPUBZ6LAAAAAASUVORK5CYII='); + background-repeat: no-repeat; +} +.icon-minus-sign-alt { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAgCAYAAADjaQM7AAAAp0lEQVRIie3WMQ4BQRgF4M8BuMI2bqCgdiAXcAaNWq9dDY7gIqITlY7RkCyJZGV3/8jykld/yWZn5vEL6WKCJdY1NMcMg1doiANSA73e0Q5kODYEFTuFRQCUcIZ9EJbgEolFQX+sRdhOtatqi1MZLFdPxmWweU1Y/+uw0M8Y+oO0+5z9sY+x0MczdBaEDp5M4JSDkeZGalIYqY/0PM/vTcWuvJnf7csNR6d8H+e9mi8AAAAASUVORK5CYII='); + background-repeat: no-repeat; +} +.icon-ok-sign { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAgCAYAAADjaQM7AAABW0lEQVRIieXWvytFURwA8I/JhrLzH0iKQWYlo8liVyaLf4DkVzZmKclgsJNNVgsGyiBl5JUkPcN793W779x3731dt+Rb3+Xce87nntv58eW/xwDmsIZDnOEEe1jESBnIOE7xiXpG3mEJvUWRQRzlAEL5hOm80Cieu4TiuZoFTeC9BCjK/TRoGK8lQlGuJKEenP8CVMcXxuLY/C9BUV7FZ3Vb0qAHWEYt8GwaJkuCdmJ/akr7QjuGrRKgbe0xm3inBpcpA9w3v+Y7A9oKQDQWRfJdL4HGa/Q3Oy10ANOgITyEsI9Eww36Ep1D4GZBKIjtpgwSBzc6QI8pUPA3vmus0DRwvYsZtbDLQONbB7BbqE760s8L5oVqdN7UWWBeqLWps46rNLAIVBe7ULMO4iRYFLqK9dWDixzgjMZNXgRqu2Ko8PKMorKyIIrKCp4oKivl4lFJkZqMSsrvvxs/hi/jiuf+HZgAAAAASUVORK5CYII='); + background-repeat: no-repeat; +} +.icon-opennewwindow { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABGklEQVRYhc2XsQrCMBBA3+jg4OKizvZTRPA/XVsEERwFP0Tt7NDdOrQBCTG5NLnqwQ0d7t5r0zRXkEUBlEADtInZ9L0KIZsCeGYA2/mUSlQKcJOlRCDHY/ctRzDsogOwkBRasehr7X7RAkPgJpYugR1QA3dgKxBYJQi4+lF/XDwEBcf+TrIJhNYk9sU6AZNfCYTgqgIu+HQsgW/wyxgCPrikX5JACK4qIIGrCUjhKgLnCLiKgP0V9MGzC7yAWQTcFnYeRrHGe2AOrIFrAN7SnR0rPMdxSEB9IAkJlIoCpURAfSgNCRgJtbFcIqAafyeQMnRmERg6dg8OzX3e0k3bG5+A5q+XyZtPQGuff2btEzASFTrLUdP9/DjjDaXnRXYPjiOiAAAAAElFTkSuQmCC'); + background-repeat: no-repeat; +} +.icon-pencil { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAgCAYAAADjaQM7AAABC0lEQVRIie3WMUrEQBQA0KelpSB2Fp5DXMVKKzsbQS9hp0fYQsEDuKwnsLDzDFY2dqKFjZUL20gssoExJprsTFaQ/fCbP2Te/ATyh3k0ixXsYa1raBNvyDDGYVdQD+8TqMgPHKWGtjAqQZ2BNzVQCB7HIhtYxRLuGoAH00Lb8lf30AJ8jYGKTZqC4xhohOsWYD8G2sGwYYcDLMZAg4rTV4GdQFXgSZdQCC43RWKgDFez6GgO/Q2U4XQW0LPvQzAZJICesC4f703A1pDg4f2g9hs4FRRiu6V6HdjqX1eHveARZ8FaTz5lozsqY0VeTOoLuJSoozrsHue+XmSSQFVY0m9Ujtsfsp8S+r/xCSVvHAyx/VnYAAAAAElFTkSuQmCC'); + background-repeat: no-repeat; +} +.icon-plus-sign { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAgCAYAAADjaQM7AAAAzUlEQVRIie3Wv23CQBzF8Q8DkBXcsABKAXUGyCZkAWagSR3R0jpNYITsQAtKh6gQFInTEAmDI/kAn5DNk173fveVTvfn0QS18YIJPq7gFCM8HoN6+EJWgX/20BYkWFUEOvQQ3iKAMmxgGTi0wHzvbeCs74DwWF7dUFhIeOBUd1gDYZ+Kn6DnAlhRboZ1GVhasOA5eioDe70SrHNzsKjbGPWA1Pue3WHBsKif5yW1YBcKi1p4EhGrHPRVV1IzByX1Tw/y9Xt6od/9U7/rp1+uvz7oO9TFMgAAAABJRU5ErkJggg=='); + background-repeat: no-repeat; +} +.icon-question-sign { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAgCAYAAADjaQM7AAABrElEQVRIieXWMWsVQRSG4ecqohYBRaz9BYoIClpLGku1sLGzEKIpBNNaaKFioUjsbES5pBARLJV0aWxiEyVFCCImqQIGJYiuxWVlM3dmZ0fiBfGDr9k957zszOyZw/+ufTiLW3iCl5jBNC7jyHZAjuM5NlFl/B4T2F0KOYBnHQAxL2O8K+goPv0hqOmbOdAJfMkU+Y6PWMHPTOyjFOgQ1loSX+C0rXsyhot415I3FYJ6eJMI/opzmRXZhXstK3GsGXwhEfgDZzKgpqYTdeaaX7WQCHpYAII90odrHE4lXlZ4ZbAvtcbwFOtYxPkI8EGiVh/utsAqfMBhg32ZDd6tR2DXEnU2RAqkDsl85PlMBHa7pY7PHWCh13AJOwPQDun9r+BbIegtDka+CG5kcotgqwZ9M9R+PO6QX7SMdyKgk9o7zxbYbAFsMgJbKsjPHv2mF3C/4X5B7gbtP/V2wvq0t6vQV4Ml7BXAfl+oqUYc+ophdcmbayb08PovwYauGPKXZ4XrQc7eDrChy7NWbizYNOj2tVczoORYUGtkA0+tkY1yTY1kSA01kvH739UvjubbG2f3sEgAAAAASUVORK5CYII='); + background-repeat: no-repeat; +} +.icon-remove-sign { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAgCAYAAADjaQM7AAABLUlEQVRIieXWoUoEURTG8Z/JKhhMIr6AiKDBKix2k48g2NcHUItY9QEWRAwr2IVtVk1aDAYRrC6IbliDXhiGuTNXGS+IH3zpHM5/zuHOvYf/rilsYA89XOAMR9jCQhuQZfTxhnGD77CNye9CpnGSAKjyAzqpoEU8/hBU9G4TaAUvLYCCj2OgOTy3CArulkETuPwF0BgjLBVhmzXJN1j7GklV/B7r2K+pcVXs6jaSdO3zZAYdVoBmC/FuDbADq5HgO2bK8y4Ay6CgXqTeKRxEgiPMVxSDnQgIziP1hjCoaT329TGVx1y2p4aEVGATaAyvCUlNwBRQfljWMQ5aAKUCWz/6/Ui9IZl/6qzXFRkv4tBdtieGjI9nULa1ICjbwhOUbZUrKsuSWlaW9fvv6gOUi8+TX9v4QwAAAABJRU5ErkJggg=='); + background-repeat: no-repeat; +} +.icon-repeat { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAgCAYAAADjaQM7AAABrklEQVRIieXWvWsUQRiA8Z+NggRio1ikNhdTaCdYWAhGQxCTTkgtCGJpowgp/PoDJCEWdtHGQo340aaPRZpgKqMQbQTTJWiyFpOEzWZ2d/buCKgPTHGzN/PszL4z78v/Ti9GcQ8zeI0XeIzraHVD0sIzrCGraQu4hoORec5homol0/iVICm2JZzPzTWce9k9nMCnNiT5tom7GCnsyi5O4WfNROv4ih9bk9ZJ8793OIrPJYNWcAcncSA3pgdX8DJxxTu8K3mzRzhc3IIIZ7GcIrsQebCBqwmSPOMpsvnIg1sNRZfUHxFnIp3zdn+bOoYSRBk8iHRebriqhQRRBnOFjlXxW6CKMczibUWbgW8F2YeGokasF2RP/xnZd/u4jd0IkGQe6jz0k+nGoW7Ex4iw6XW1TZ+QlQ+V/WEoImvnIj4uZOpMOMilwvcR4abwTVNSzEV78+EbJcF2THk+WsFtDBTG9AjB9KpkXCbUIFFOSysLvgjXXF1ZMFW3Hf06L3gyIZskRfQRPMHvNiTLKrauihaeS0uMi7ipIgJT6RVy1n2hQp4Vyu9J3MBgp4K/mz8EhTphjo0xvgAAAABJRU5ErkJggg=='); + background-repeat: no-repeat; +} +.icon-search { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAgCAYAAAAFQMh/AAAB70lEQVRIie3XTYiNYRjG8R8ixAwpyeSzbKRspojGStlqslAmKyUpiZKUFWVSshTDwm4ysppJasrnamRJ2DCUpKgJkeGweM+p6TnP836cMzMrd92767r+93nP89znPfyv5upAL/oxiGEM4RIOYOV0A9fiBn7gb05P4g62tAuci3P4WQAM+w8GsKgVaCfuVgSG/QxrqkDn42FB6DeMY6JA9xrLyoKvJEI+4ww2BfouHK0PEvPdk31tubU9YR4pMflCXEv4+4rAsUc8VGbiKXUxkvEGC1KG7ojhJRZXgKoPORrJ2p8y9EfEvRWhjdoaybqdEj8JhF8wr0Uw2XWamvcxJfwUCIfbgMJlzZ+6MyacDEQDbYJPRcDrYsJwNd5sE3w2Al4VE4YL4EGb4OtBXk3iSo0Ewl+yn8JW632Q9yIlPKH50ZxuEbovknU1Je7C70A8oXk3F9UK2aYKwTvzTLFd+6o+VJnqwKNIxliRcTW+R4wfsKfA243nEW8N28pM3RcxN/oxjqEHm7EDh2TLppbjO1kGDBdyQlrt0vDjmg/brMF78LRi+DgO41278DmyezmqeZ9PPUBjdWDj7XKj9OtQaXijlmIXDuKI7CDuxvKEfsN0wqtWHnzvTMPX420EPDjT4BT8/GyAyf6H3cdX3MKSfw5qVHvCnfc+AAAAAElFTkSuQmCC'); + background-repeat: no-repeat; +} +.icon-share-sign { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAgCAYAAADjaQM7AAABUElEQVRIieXWvS4FQRgG4AeFKFC4AAUNLUIkrkAicQfcgEgUitNI1BoNhdKJQnM03IFKggaFSvxEo5GocBTnSNaa/YndVfAlX7OZvE8xMzsf/6F6sYQ9HJbQDWxgLA5N4gHNCvq9jXbAIJ4qgqJdg52CISuYwW3Guhe4K4h1trdiOAforSAWrSyw8F7EKw3MHfqodS2WMYtxjASwNDATOcccuhKCkyoEpkKbP0Di4H0ebKsAEq1aFnaF7hKgAVxkYYslQWcy9uwV/RVAQew0IaAHCzjANZ61fgh5oSC2HwgYwmVSQE4oiO0EsJO0gJxQEIsf+emMgHmtZ+o8Y10Qa8Sw1Rwhefvbh5sYtl0l1sREBKtXjdUj2G6ZWOjxfMNoG9sqE0saC461nvy1MrG0gWddeQfkhV8e5WBKdUNqU2RI/aw+X8fvo4J9IGH8/nv1AZLrHZmpn1BSAAAAAElFTkSuQmCC'); + background-repeat: no-repeat; +} +.icon-stethoscope { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAgCAYAAADnnNMGAAABzklEQVRIid3VT4iNURzG8c/IRMnKQhbYsDVlI9lZMZOFjRUrd6WxsJlQYlBoylJNSoo0ZkSJ1GyYzS1lQVmZZjOxoCkS409yLeb3Nsc77ztz7nST5qlT93d+z3O+97zn3Pey0tSNUxhDYxFfIzynI5OtAxhHKxlVoKMlz3hkszRbCrcwWuEbrfDN5kLKwRYGKnwDNd62IE28xBXVz7sbl8PTXC5kf24A+1Y8ZDNu4DWe4VCnIRvxzsKL0d9JyKWov2LQ/OX41EnI/ahvRr0z9fyOD71tQHorIENRf8Bh3Iv6C8yof5XUqRGZmWRuKz5aeCZn4FEUE21AJiLzuDS/Ay+i9w0nikZfQj2fARhM/H0V/f7oTZYbt5LgQ/RUhHuiV/hu13yJWsgajPj7WU7jaYzpUm8kMlU6XgcpdARTFh5eMabCs5hqd5KqC7twNln8XMx1LQHIhhTalkC25wT+JWTJM0m1IYHsbgNSXPHnuYG3ERjK9K/Cq8hcz4VciMBP7M3wXzS/+z25kHV4E6HvOBlzZW3BnQSQvYt0gclkgc94gmFz/4JN/Er6Y1jdLgTW4xp+qP+hvsex5Sxe1iZzr/lhPMBdXMVBrO0E4P/WHz/s1+xoJ+WLAAAAAElFTkSuQmCC'); + background-repeat: no-repeat; +} +.icon-unlock-alt { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAgCAYAAAD9oDOIAAABCUlEQVRIie3VvyuFURzH8VcGKdeg7mjw6w/wBxAjJSV/gEwy2G4yMJlFVn8BdkZRBt2stmuwsCiUEvJYrjpO93mey30UdT/1mc77++5869QhPWWs4xx3eMY19jGbMZeaeTwgyegZ+poVrubIwt5gKE84g/do8AIbqGAX99H5JbrShJ24CuA3LDbgyjiOxCtp0ukIXMvYqIRawNbSwK0AepSxUj1L0SUGGkEHAXCaI4SRSDrWCDoKgMMmpCXc1vknDBYhhW4MozcN+Ik0N39f2oFRVANpFVPf7CT6P6V7vj6NVvqCCXgtUJpgU8HCBDttaVv6X6Tx79lqt+GkYOkc9GABywV0XDu/kg80k3BZdERCqwAAAABJRU5ErkJggg=='); + background-repeat: no-repeat; +} +.icon-link-active { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAC3ElEQVRYhcVXv0o7QRC+0iJvoQ/gI+QRUsxH1GiZIh7+KyzEBwi2BouLuSBaHCKiEkJewMbSQlFIqpDiAgFBI1wg+X6F5/4u8e6y+QMZmOL2dvf7dmZ2ZtYwNAVAQkTWRKQI4AlAG4Dna9sfswCkASR099UBXhGRcxHpAqCOikhXRM4BrEwNnEwml0TkBEBPFzhEeyJykkwmlyYCT6VSyyLyPAPwqEWeU6nUshY4gFURcecFHiDhAljVOfncwYMkIi3h+zzW7Ovr63NxR2hM+AEXuujw8JD1ep0k+fX1RcdxZiVxMur3lahoPzo6Yrfb5ajUarVZSPQQvKL+nQ09+S/4+/s7TdNkuVzmYDCYmYSInP+ePhGVZBqNBkny7e2NW1tbatyyLEXi+vp6WgJdAAlDRNaiAu5XTNP889+2bZKk53nMZDLTklgz/NweOuHz85MkeXl5qcZ2d3dZqVS4s7PDfr9PkszlctO6wjLwU0RCJ1xdXSkr2LZNAKxUKiTJXq9Hkvz4+GA6nZ6WwJOBn0oWOalarSoSFxcX3NvbU+AkWSqVCIAHBwfM5/Pc3t6ehEDbwE85jZ0YJDEqruvy8fFRfff7fd7e3uoS8LQIAKDjOPQ8T5m9VCrRdd0h4Farpb6r1ao2gVgXBDWTyTCXyymfB0/e6XSYzWZZLpcnIdGODcI43d/fVyfvdDokyUKhQOD/FSVJy7LigzDuGsZpPp8nSTabTWazWRYKhaFidXNzQ5Ks1+tx+1iRiWicmqap8kCxWPzz//T0VBGM2Scdm4rH6d3dHUlyMBgMmfr4+Jjf398kyYeHh9C1KhXHFSMdrdVqioTjODw7O1Pgr6+vkWlaFaNx5XgSEkF5eXnh5uZm1JrhcjyuIdFR27bZaDTYbDZ5f3/PjY2NyLl/GhLdlmweGtmSLbwpDcTD4tryEUss5mEyEhOLeZoFBYt6nIYQGfs8F5Gin9q1n+f/ABuCT4uR5lo8AAAAAElFTkSuQmCC'); + background-repeat: no-repeat; +} +.icon-link { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAACYUlEQVRIibXWu2tUQRTH8VEQDaggQeID0olptEkhCMI2iuvCwN3z+/oADUgS/QcSFxRM0gjaWCg2wVLwBT4QRcuA2mhhwFWIdhaiNqLgI8a18Aauw9xscvc6cIvdPTOfM2fuzKxzkQasl9SQdB24KWkM6I3FltaAGvAZaAXPNzM7/F9QMzNJsxG0BbQk/Taz4VJRSUTQ15JehLikoVJQwIeopLPOuWVpUidCHBjsFN0AfAkGPhPGSRqJlL34mks62Q7NJDkaLMUPYGshGLiRGajp0vIukGgjwC+VAb9cTB9JDzN9nheFTwUzmAhjzGwH8AS45b3vAa5k4qcLwd77TcDXYJ3Hg+SeZn5/E+yAq4Vg5/7uYWAuD5d0O+9QAXYXhtPBB/Jw732PpLeRk2wyOwbQBfQCq8vAp9KLInaUNr33PWbWB9wFfqbfz0makrSzI7zNM0P8UmmlyR5ZCn5Q0vecwSaB5hISm5M0sGjczLZIugg8A6YlXZt/kdItNRNBHpnZfkmXO8IXSKovVl5Jr5Ik6U6rNl46DtzJK62ksfm4GG5m+4qiXZm3t5Uen83M53/u6gj+rlqtriwC9wYzrCdJ0g2cTtHlkT7nOj50vPdr0j8Ci76dqtXq2gA+tmTYOeckPQ5m3WgTX8nGm9mhovCuyEk2GosFtgEfMnG/gM2F4BQ/GpS8JWkkG2Nm24GPQYIXCqOZ2QxG8PFarbZO0h5JnwL0QX9//4qOYeeckzQU4jn7+36hbbRQM7PhNvi90tH5BiTA+2CWs5LOl1bevFapVFYBeyUdBw7U6/WNebF/AKpsmTArzHS/AAAAAElFTkSuQmCC'); + background-repeat: no-repeat; +} diff --git a/source/stylesheets/_icons-svg.scss b/source/stylesheets/_icons-svg.scss new file mode 100755 index 0000000..6955b65 --- /dev/null +++ b/source/stylesheets/_icons-svg.scss @@ -0,0 +1,112 @@ +.icon-github { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2227%22%20height%3D%2232%22%20viewBox%3D%220%200%2027%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M27.429%2016q0%204.482-2.616%208.063t-6.759%204.955q-0.482%200.089-0.705-0.125t-0.223-0.536v-3.768q0-1.732-0.929-2.536%201.018-0.107%201.83-0.321t1.679-0.696%201.446-1.188%200.946-1.875%200.366-2.688q0-2.161-1.411-3.679%200.661-1.625-0.143-3.643-0.5-0.161-1.446%200.196t-1.643%200.786l-0.679%200.429q-1.661-0.464-3.429-0.464t-3.429%200.464q-0.286-0.196-0.759-0.482t-1.491-0.688-1.536-0.241q-0.786%202.018-0.125%203.643-1.411%201.518-1.411%203.679%200%201.518%200.366%202.679t0.938%201.875%201.438%201.196%201.679%200.696%201.83%200.321q-0.714%200.643-0.875%201.839-0.375%200.179-0.804%200.268t-1.018%200.089-1.17-0.384-0.991-1.116q-0.339-0.571-0.866-0.929t-0.884-0.429l-0.357-0.054q-0.375%200-0.518%200.080t-0.089%200.205%200.161%200.25%200.232%200.214l0.125%200.089q0.393%200.179%200.777%200.679t0.563%200.911l0.179%200.411q0.232%200.679%200.786%201.098t1.196%200.536%201.241%200.125%200.991-0.063l0.411-0.071q0%200.679%200.009%201.589t0.009%200.964q0%200.321-0.232%200.536t-0.714%200.125q-4.143-1.375-6.759-4.955t-2.616-8.063q0-3.732%201.839-6.884t4.991-4.991%206.884-1.839%206.884%201.839%204.991%204.991%201.839%206.884z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-warning-sign { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M18.286%2024.554v-3.393q0-0.25-0.17-0.42t-0.402-0.17h-3.429q-0.232%200-0.402%200.17t-0.17%200.42v3.393q0%200.25%200.17%200.42t0.402%200.17h3.429q0.232%200%200.402-0.17t0.17-0.42zM18.25%2017.875l0.321-8.196q0-0.214-0.179-0.339-0.232-0.196-0.429-0.196h-3.929q-0.196%200-0.429%200.196-0.179%200.125-0.179%200.375l0.304%208.161q0%200.179%200.179%200.295t0.429%200.116h3.304q0.25%200%200.42-0.116t0.188-0.295zM18%201.196l13.714%2025.143q0.625%201.125-0.036%202.25-0.304%200.518-0.83%200.821t-1.134%200.304h-27.429q-0.607%200-1.134-0.304t-0.83-0.821q-0.661-1.125-0.036-2.25l13.714-25.143q0.304-0.554%200.839-0.875t1.161-0.321%201.161%200.321%200.839%200.875z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-arrow-left { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2227%22%20height%3D%2232%22%20viewBox%3D%220%200%2027%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M27.429%2016v2.286q0%200.946-0.58%201.616t-1.509%200.67h-12.571l5.232%205.25q0.679%200.643%200.679%201.607t-0.679%201.607l-1.339%201.357q-0.661%200.661-1.607%200.661-0.929%200-1.625-0.661l-11.625-11.643q-0.661-0.661-0.661-1.607%200-0.929%200.661-1.625l11.625-11.607q0.679-0.679%201.625-0.679%200.929%200%201.607%200.679l1.339%201.321q0.679%200.679%200.679%201.625t-0.679%201.625l-5.232%205.232h12.571q0.929%200%201.509%200.67t0.58%201.616z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-arrow-left2 { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M16%200c8.837%200%2016%207.163%2016%2016s-7.163%2016-16%2016-16-7.163-16-16%207.163-16%2016-16zM16%2029c7.18%200%2013-5.82%2013-13s-5.82-13-13-13-13%205.82-13%2013%205.82%2013%2013%2013zM6.586%2014.586l8-8c0.781-0.781%202.047-0.781%202.828%200s0.781%202.047%200%202.828l-4.586%204.586h11.172c1.105%200%202%200.895%202%202s-0.895%202-2%202h-11.172l4.586%204.586c0.781%200.781%200.781%202.047%200%202.829-0.391%200.39-0.902%200.586-1.414%200.586s-1.024-0.195-1.414-0.586l-8-8c-0.781-0.781-0.781-2.047%200-2.828z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-arrow-right { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2227%22%20height%3D%2232%22%20viewBox%3D%220%200%2027%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M26.286%2017.143q0%200.964-0.661%201.625l-11.625%2011.625q-0.696%200.661-1.625%200.661-0.911%200-1.607-0.661l-1.339-1.339q-0.679-0.679-0.679-1.625t0.679-1.625l5.232-5.232h-12.571q-0.929%200-1.509-0.67t-0.58-1.616v-2.286q0-0.946%200.58-1.616t1.509-0.67h12.571l-5.232-5.25q-0.679-0.643-0.679-1.607t0.679-1.607l1.339-1.339q0.679-0.679%201.607-0.679%200.946%200%201.625%200.679l11.625%2011.625q0.661%200.625%200.661%201.607z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-arrow-right2 { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M16%200c-8.837%200-16%207.163-16%2016s7.163%2016%2016%2016%2016-7.163%2016-16-7.163-16-16-16zM16%2029c-7.18%200-13-5.82-13-13s5.82-13%2013-13%2013%205.82%2013%2013-5.82%2013-13%2013zM25.414%2014.586l-8-8c-0.781-0.781-2.047-0.781-2.828%200s-0.781%202.047%200%202.828l4.586%204.586h-11.172c-1.105%200-2%200.895-2%202s0.895%202%202%202h11.172l-4.586%204.586c-0.781%200.781-0.781%202.047%200%202.829%200.391%200.39%200.902%200.586%201.414%200.586s1.024-0.195%201.414-0.586l8-8c0.781-0.781%200.781-2.047%200-2.828z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-chevron-left { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2221%22%20height%3D%2232%22%20viewBox%3D%220%200%2021%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M13.25%2028.089l-11.643-11.625q-0.661-0.661-0.661-1.616t0.661-1.616l11.643-11.625q0.661-0.661%201.616-0.661t1.616%200.661l1.339%201.339q0.661%200.661%200.661%201.616t-0.661%201.616l-8.679%208.679%208.679%208.661q0.661%200.679%200.661%201.625t-0.661%201.607l-1.339%201.339q-0.661%200.661-1.616%200.661t-1.616-0.661z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-chevron-right { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2221%22%20height%3D%2232%22%20viewBox%3D%220%200%2021%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M19.625%2014.857q0%200.929-0.661%201.625l-11.643%2011.625q-0.661%200.661-1.607%200.661t-1.607-0.661l-1.357-1.339q-0.661-0.696-0.661-1.625%200-0.946%200.661-1.607l8.679-8.679-8.679-8.661q-0.661-0.696-0.661-1.625%200-0.946%200.661-1.607l1.357-1.339q0.643-0.679%201.607-0.679t1.607%200.679l11.643%2011.625q0.661%200.661%200.661%201.607z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-cogs { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2234%22%20height%3D%2232%22%20viewBox%3D%220%200%2034%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M16%2016q0-1.893-1.339-3.232t-3.232-1.339-3.232%201.339-1.339%203.232%201.339%203.232%203.232%201.339%203.232-1.339%201.339-3.232zM29.714%2025.143q0-0.929-0.679-1.607t-1.607-0.679-1.607%200.679-0.679%201.607q0%200.946%200.67%201.616t1.616%200.67%201.616-0.67%200.67-1.616zM29.714%206.857q0-0.929-0.679-1.607t-1.607-0.679-1.607%200.679-0.679%201.607q0%200.946%200.67%201.616t1.616%200.67%201.616-0.67%200.67-1.616zM22.857%2014.375v3.304q0%200.179-0.125%200.348t-0.286%200.188l-2.768%200.429q-0.196%200.625-0.571%201.357%200.607%200.857%201.607%202.054%200.125%200.179%200.125%200.357%200%200.214-0.125%200.339-0.411%200.536-1.473%201.598t-1.402%201.063q-0.196%200-0.375-0.125l-2.054-1.607q-0.661%200.339-1.375%200.554-0.196%201.929-0.411%202.768-0.125%200.429-0.536%200.429h-3.321q-0.196%200-0.357-0.134t-0.179-0.313l-0.411-2.732q-0.607-0.179-1.339-0.554l-2.107%201.589q-0.125%200.125-0.357%200.125-0.196%200-0.375-0.143-2.571-2.375-2.571-2.857%200-0.161%200.125-0.339%200.179-0.25%200.732-0.946t0.839-1.089q-0.411-0.786-0.625-1.464l-2.714-0.429q-0.179-0.018-0.304-0.17t-0.125-0.348v-3.304q0-0.179%200.125-0.348t0.286-0.188l2.768-0.429q0.196-0.625%200.571-1.357-0.607-0.857-1.607-2.054-0.125-0.196-0.125-0.357%200-0.214%200.125-0.357%200.393-0.536%201.464-1.589t1.411-1.054q0.196%200%200.375%200.125l2.054%201.607q0.607-0.321%201.375-0.571%200.196-1.929%200.411-2.75%200.125-0.429%200.536-0.429h3.321q0.196%200%200.357%200.134t0.179%200.313l0.411%202.732q0.607%200.179%201.339%200.554l2.107-1.589q0.143-0.125%200.357-0.125%200.196%200%200.375%200.143%202.571%202.375%202.571%202.857%200%200.161-0.125%200.339-0.214%200.286-0.75%200.964t-0.804%201.071q0.411%200.857%200.607%201.464l2.714%200.411q0.179%200.036%200.304%200.188t0.125%200.348zM34.286%2023.893v2.5q0%200.286-2.661%200.554-0.214%200.482-0.536%200.929%200.911%202.018%200.911%202.464%200%200.071-0.071%200.125-2.179%201.268-2.214%201.268-0.143%200-0.821-0.839t-0.929-1.214q-0.357%200.036-0.536%200.036t-0.536-0.036q-0.25%200.375-0.929%201.214t-0.821%200.839q-0.036%200-2.214-1.268-0.071-0.054-0.071-0.125%200-0.446%200.911-2.464-0.321-0.446-0.536-0.929-2.661-0.268-2.661-0.554v-2.5q0-0.286%202.661-0.554%200.232-0.518%200.536-0.929-0.911-2.018-0.911-2.464%200-0.071%200.071-0.125%200.071-0.036%200.625-0.357t1.054-0.607%200.536-0.286q0.143%200%200.821%200.83t0.929%201.205q0.357-0.036%200.536-0.036t0.536%200.036q0.911-1.268%201.643-2l0.107-0.036q0.071%200%202.214%201.25%200.071%200.054%200.071%200.125%200%200.446-0.911%202.464%200.304%200.411%200.536%200.929%202.661%200.268%202.661%200.554zM34.286%205.607v2.5q0%200.286-2.661%200.554-0.214%200.482-0.536%200.929%200.911%202.018%200.911%202.464%200%200.071-0.071%200.125-2.179%201.268-2.214%201.268-0.143%200-0.821-0.839t-0.929-1.214q-0.357%200.036-0.536%200.036t-0.536-0.036q-0.25%200.375-0.929%201.214t-0.821%200.839q-0.036%200-2.214-1.268-0.071-0.054-0.071-0.125%200-0.446%200.911-2.464-0.321-0.446-0.536-0.929-2.661-0.268-2.661-0.554v-2.5q0-0.286%202.661-0.554%200.232-0.518%200.536-0.929-0.911-2.018-0.911-2.464%200-0.071%200.071-0.125%200.071-0.036%200.625-0.357t1.054-0.607%200.536-0.286q0.143%200%200.821%200.83t0.929%201.205q0.357-0.036%200.536-0.036t0.536%200.036q0.911-1.268%201.643-2l0.107-0.036q0.071%200%202.214%201.25%200.071%200.054%200.071%200.125%200%200.446-0.911%202.464%200.304%200.411%200.536%200.929%202.661%200.268%202.661%200.554z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-external-link { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M25.143%2016.571v5.714q0%202.125-1.509%203.634t-3.634%201.509h-14.857q-2.125%200-3.634-1.509t-1.509-3.634v-14.857q0-2.125%201.509-3.634t3.634-1.509h12.571q0.25%200%200.411%200.161t0.161%200.411v1.143q0%200.25-0.161%200.411t-0.411%200.161h-12.571q-1.179%200-2.018%200.839t-0.839%202.018v14.857q0%201.179%200.839%202.018t2.018%200.839h14.857q1.179%200%202.018-0.839t0.839-2.018v-5.714q0-0.25%200.161-0.411t0.411-0.161h1.143q0.25%200%200.411%200.161t0.161%200.411zM32%201.143v9.143q0%200.464-0.339%200.804t-0.804%200.339-0.804-0.339l-3.143-3.143-11.643%2011.643q-0.179%200.179-0.411%200.179t-0.411-0.179l-2.036-2.036q-0.179-0.179-0.179-0.411t0.179-0.411l11.643-11.643-3.143-3.143q-0.339-0.339-0.339-0.804t0.339-0.804%200.804-0.339h9.143q0.464%200%200.804%200.339t0.339%200.804z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-eye-open { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M29.714%2017.143q-2.714-4.214-6.804-6.304%201.089%201.857%201.089%204.018%200%203.304-2.348%205.652t-5.652%202.348-5.652-2.348-2.348-5.652q0-2.161%201.089-4.018-4.089%202.089-6.804%206.304%202.375%203.661%205.955%205.83t7.759%202.17%207.759-2.17%205.955-5.83zM16.857%2010.286q0-0.357-0.25-0.607t-0.607-0.25q-2.232%200-3.83%201.598t-1.598%203.83q0%200.357%200.25%200.607t0.607%200.25%200.607-0.25%200.25-0.607q0-1.536%201.089-2.625t2.625-1.089q0.357%200%200.607-0.25t0.25-0.607zM32%2017.143q0%200.607-0.357%201.232-2.5%204.107-6.723%206.58t-8.92%202.473-8.92-2.482-6.723-6.571q-0.357-0.625-0.357-1.232t0.357-1.232q2.5-4.089%206.723-6.571t8.92-2.482%208.92%202.482%206.723%206.571q0.357%200.625%200.357%201.232z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-file-alt { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2223%22%20height%3D%2232%22%20viewBox%3D%220%200%2023%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M18.286%2021.143v1.143q0%200.25-0.161%200.411t-0.411%200.161h-12.571q-0.25%200-0.411-0.161t-0.161-0.411v-1.143q0-0.25%200.161-0.411t0.411-0.161h12.571q0.25%200%200.411%200.161t0.161%200.411zM18.286%2016.571v1.143q0%200.25-0.161%200.411t-0.411%200.161h-12.571q-0.25%200-0.411-0.161t-0.161-0.411v-1.143q0-0.25%200.161-0.411t0.411-0.161h12.571q0.25%200%200.411%200.161t0.161%200.411zM2.286%2027.429h18.286v-13.714h-7.429q-0.714%200-1.214-0.5t-0.5-1.214v-7.429h-9.143v22.857zM13.714%2011.429h6.714q-0.179-0.518-0.393-0.732l-5.589-5.589q-0.214-0.214-0.732-0.393v6.714zM22.857%2012v16q0%200.714-0.5%201.214t-1.214%200.5h-19.429q-0.714%200-1.214-0.5t-0.5-1.214v-24q0-0.714%200.5-1.214t1.214-0.5h11.429q0.714%200%201.571%200.357t1.357%200.857l5.571%205.571q0.5%200.5%200.857%201.357t0.357%201.571z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-file-text { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2223%22%20height%3D%2232%22%20viewBox%3D%220%200%2023%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M18.286%2024.571v-1.143q0-0.25-0.161-0.411t-0.411-0.161h-12.571q-0.25%200-0.411%200.161t-0.161%200.411v1.143q0%200.25%200.161%200.411t0.411%200.161h12.571q0.25%200%200.411-0.161t0.161-0.411zM18.286%2020v-1.143q0-0.25-0.161-0.411t-0.411-0.161h-12.571q-0.25%200-0.411%200.161t-0.161%200.411v1.143q0%200.25%200.161%200.411t0.411%200.161h12.571q0.25%200%200.411-0.161t0.161-0.411zM22.857%2013.714v14.286q0%200.714-0.5%201.214t-1.214%200.5h-19.429q-0.714%200-1.214-0.5t-0.5-1.214v-24q0-0.714%200.5-1.214t1.214-0.5h9.714v9.714q0%200.714%200.5%201.214t1.214%200.5h9.714zM22.804%2011.429h-9.089v-9.089q1.464%200.268%202.357%201.161l5.571%205.571q0.893%200.893%201.161%202.357z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-home { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M32%2019l-6-6v-9h-4v5l-6-6-16%2016v1h4v10h10v-6h4v6h10v-10h4z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-info { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20xmlns%3Asketch%3D%22http%3A//www.bohemiancoding.com/sketch/ns%22%3E%0A%20%20%20%20%3Ctitle%3ESlice%201%3C/title%3E%0A%20%20%20%20%3Cdescription%3ECreated%20with%20Sketch%20%28http%3A//www.bohemiancoding.com/sketch%29%3C/description%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20sketch%3Atype%3D%22MSPage%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22info%22%20sketch%3Atype%3D%22MSLayerGroup%22%20fill%3D%22%23555555%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M16%2C0%20C7.163%2C0%200%2C7.163%200%2C16%20C0%2C24.837%207.163%2C32%2016%2C32%20C24.837%2C32%2032%2C24.837%2032%2C16%20C32%2C7.163%2024.837%2C0%2016%2C0%20L16%2C0%20Z%20M16%2C29%20C8.82%2C29%203%2C23.18%203%2C16%20C3%2C8.82%208.82%2C3%2016%2C3%20C23.18%2C3%2029%2C8.82%2029%2C16%20C29%2C23.18%2023.18%2C29%2016%2C29%20L16%2C29%20Z%20M14%2C8%20L18%2C8%20L18%2C12%20L14%2C12%20L14%2C8%20Z%20M20%2C24%20L12%2C24%20L12%2C22%20L14%2C22%20L14%2C16%20L12%2C16%20L12%2C14%20L18%2C14%20L18%2C22%20L20%2C22%20L20%2C24%20Z%22%20id%3D%22Shape%22%20sketch%3Atype%3D%22MSShapeGroup%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E'); + background-repeat: no-repeat; +} +.icon-minus-sign-alt { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2227%22%20height%3D%2232%22%20viewBox%3D%220%200%2027%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M22.857%2017.143v-2.286q0-0.464-0.339-0.804t-0.804-0.339h-16q-0.464%200-0.804%200.339t-0.339%200.804v2.286q0%200.464%200.339%200.804t0.804%200.339h16q0.464%200%200.804-0.339t0.339-0.804zM27.429%207.429v17.143q0%202.125-1.509%203.634t-3.634%201.509h-17.143q-2.125%200-3.634-1.509t-1.509-3.634v-17.143q0-2.125%201.509-3.634t3.634-1.509h17.143q2.125%200%203.634%201.509t1.509%203.634z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-ok-sign { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2227%22%20height%3D%2232%22%20viewBox%3D%220%200%2027%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M22.929%2013.107q0-0.5-0.321-0.821l-1.625-1.607q-0.339-0.339-0.804-0.339t-0.804%200.339l-7.286%207.268-4.036-4.036q-0.339-0.339-0.804-0.339t-0.804%200.339l-1.625%201.607q-0.321%200.321-0.321%200.821%200%200.482%200.321%200.804l6.464%206.464q0.339%200.339%200.804%200.339%200.482%200%200.821-0.339l9.696-9.696q0.321-0.321%200.321-0.804zM27.429%2016q0%203.732-1.839%206.884t-4.991%204.991-6.884%201.839-6.884-1.839-4.991-4.991-1.839-6.884%201.839-6.884%204.991-4.991%206.884-1.839%206.884%201.839%204.991%204.991%201.839%206.884z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-opennewwindow { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M28%2024h-16q-1.656%200-2.828-1.172t-1.172-2.828v-16q0-1.656%201.172-2.828t2.828-1.172h16q1.656%200%202.828%201.172t1.172%202.828v16q0%201.656-1.172%202.828t-2.828%201.172zM28%206q0-0.844-0.578-1.422t-1.422-0.578h-12q-0.844%200-1.422%200.578t-0.578%201.406%200.578%201.422%201.422%200.594h7.25l-8.719%208.719q-0.563%200.563-0.563%201.359t0.563%201.359%201.359%200.563%201.359-0.563l8.75-8.75v7.313q0%200.844%200.594%201.422t1.422%200.578%201.406-0.578%200.578-1.422v-12zM26%2030.016q0%200.828-0.578%201.406t-1.422%200.578h-20q-1.656%200-2.828-1.172t-1.172-2.828v-20q0-0.844%200.578-1.422t1.406-0.578%201.422%200.578%200.594%201.422v18q0%200.844%200.578%201.422t1.422%200.578h18q0.813%200%201.406%200.594t0.594%201.422z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-pencil { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2227%22%20height%3D%2232%22%20viewBox%3D%220%200%2027%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M6.482%2027.429l1.625-1.625-4.196-4.196-1.625%201.625v1.911h2.286v2.286h1.911zM15.821%2010.857q0-0.393-0.393-0.393-0.179%200-0.304%200.125l-9.679%209.679q-0.125%200.125-0.125%200.304%200%200.393%200.393%200.393%200.179%200%200.304-0.125l9.679-9.679q0.125-0.125%200.125-0.304zM14.857%207.429l7.429%207.429-14.857%2014.857h-7.429v-7.429zM27.054%209.143q0%200.946-0.661%201.607l-2.964%202.964-7.429-7.429%202.964-2.946q0.643-0.679%201.607-0.679%200.946%200%201.625%200.679l4.196%204.179q0.661%200.696%200.661%201.625z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-plus-sign { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2227%22%20height%3D%2232%22%20viewBox%3D%220%200%2027%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M22.857%2017.143v-2.286q0-0.464-0.339-0.804t-0.804-0.339h-5.714v-5.714q0-0.464-0.339-0.804t-0.804-0.339h-2.286q-0.464%200-0.804%200.339t-0.339%200.804v5.714h-5.714q-0.464%200-0.804%200.339t-0.339%200.804v2.286q0%200.464%200.339%200.804t0.804%200.339h5.714v5.714q0%200.464%200.339%200.804t0.804%200.339h2.286q0.464%200%200.804-0.339t0.339-0.804v-5.714h5.714q0.464%200%200.804-0.339t0.339-0.804zM27.429%207.429v17.143q0%202.125-1.509%203.634t-3.634%201.509h-17.143q-2.125%200-3.634-1.509t-1.509-3.634v-17.143q0-2.125%201.509-3.634t3.634-1.509h17.143q2.125%200%203.634%201.509t1.509%203.634z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-question-sign { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2227%22%20height%3D%2232%22%20viewBox%3D%220%200%2027%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M16%2024.571v-3.429q0-0.25-0.161-0.411t-0.411-0.161h-3.429q-0.25%200-0.411%200.161t-0.161%200.411v3.429q0%200.25%200.161%200.411t0.411%200.161h3.429q0.25%200%200.411-0.161t0.161-0.411zM20.571%2012.571q0-1.571-0.991-2.911t-2.473-2.071-3.036-0.732q-4.339%200-6.625%203.804-0.268%200.429%200.143%200.75l2.357%201.786q0.125%200.107%200.339%200.107%200.286%200%200.446-0.214%200.946-1.214%201.536-1.643%200.607-0.429%201.536-0.429%200.857%200%201.527%200.464t0.67%201.054q0%200.679-0.357%201.089t-1.214%200.804q-1.125%200.5-2.063%201.545t-0.938%202.241v0.643q0%200.25%200.161%200.411t0.411%200.161h3.429q0.25%200%200.411-0.161t0.161-0.411q0-0.339%200.384-0.884t0.973-0.884q0.571-0.321%200.875-0.509t0.821-0.625%200.795-0.857%200.5-1.080%200.223-1.446zM27.429%2016q0%203.732-1.839%206.884t-4.991%204.991-6.884%201.839-6.884-1.839-4.991-4.991-1.839-6.884%201.839-6.884%204.991-4.991%206.884-1.839%206.884%201.839%204.991%204.991%201.839%206.884z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-remove-sign { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2227%22%20height%3D%2232%22%20viewBox%3D%220%200%2027%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M20.518%2020.036q0-0.464-0.339-0.804l-3.232-3.232%203.232-3.232q0.339-0.339%200.339-0.804%200-0.482-0.339-0.821l-1.607-1.607q-0.339-0.339-0.821-0.339-0.464%200-0.804%200.339l-3.232%203.232-3.232-3.232q-0.339-0.339-0.804-0.339-0.482%200-0.821%200.339l-1.607%201.607q-0.339%200.339-0.339%200.821%200%200.464%200.339%200.804l3.232%203.232-3.232%203.232q-0.339%200.339-0.339%200.804%200%200.482%200.339%200.821l1.607%201.607q0.339%200.339%200.821%200.339%200.464%200%200.804-0.339l3.232-3.232%203.232%203.232q0.339%200.339%200.804%200.339%200.482%200%200.821-0.339l1.607-1.607q0.339-0.339%200.339-0.821zM27.429%2016q0%203.732-1.839%206.884t-4.991%204.991-6.884%201.839-6.884-1.839-4.991-4.991-1.839-6.884%201.839-6.884%204.991-4.991%206.884-1.839%206.884%201.839%204.991%204.991%201.839%206.884z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-repeat { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2227%22%20height%3D%2232%22%20viewBox%3D%220%200%2027%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M27.429%204.571v8q0%200.464-0.339%200.804t-0.804%200.339h-8q-0.75%200-1.054-0.714-0.304-0.696%200.25-1.232l2.464-2.464q-2.643-2.446-6.232-2.446-1.857%200-3.545%200.723t-2.92%201.955-1.955%202.92-0.723%203.545%200.723%203.545%201.955%202.92%202.92%201.955%203.545%200.723q2.125%200%204.018-0.929t3.196-2.625q0.125-0.179%200.411-0.214%200.25%200%200.446%200.161l2.446%202.464q0.161%200.143%200.17%200.366t-0.134%200.402q-1.946%202.357-4.714%203.652t-5.839%201.295q-2.786%200-5.321-1.089t-4.375-2.929-2.929-4.375-1.089-5.321%201.089-5.321%202.929-4.375%204.375-2.929%205.321-1.089q2.625%200%205.080%200.991t4.366%202.795l2.321-2.304q0.518-0.554%201.25-0.25%200.696%200.304%200.696%201.054z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-search { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2230%22%20height%3D%2232%22%20viewBox%3D%220%200%2030%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M20.571%2014.857q0-3.304-2.348-5.652t-5.652-2.348-5.652%202.348-2.348%205.652%202.348%205.652%205.652%202.348%205.652-2.348%202.348-5.652zM29.714%2029.714q0%200.929-0.679%201.607t-1.607%200.679q-0.964%200-1.607-0.679l-6.125-6.107q-3.196%202.214-7.125%202.214-2.554%200-4.884-0.991t-4.018-2.679-2.679-4.018-0.991-4.884%200.991-4.884%202.679-4.018%204.018-2.679%204.884-0.991%204.884%200.991%204.018%202.679%202.679%204.018%200.991%204.884q0%203.929-2.214%207.125l6.125%206.125q0.661%200.661%200.661%201.607z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-share-sign { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2227%22%20height%3D%2232%22%20viewBox%3D%220%200%2027%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M17.946%2019.661l6.286-6.286q0.339-0.339%200.339-0.804t-0.339-0.804l-6.286-6.286q-0.536-0.554-1.232-0.25-0.714%200.304-0.714%201.054v2.857q-2.125%200-3.857%200.348t-2.902%200.911-2.036%201.411-1.366%201.705-0.795%201.946-0.384%201.991-0.089%201.973q0%203.232%202.982%207.214%200.179%200.214%200.446%200.214%200.125%200%200.232-0.054%200.393-0.161%200.339-0.589-0.786-6.321%201.107-8.446%200.821-0.929%202.321-1.348t4-0.42v2.857q0%200.75%200.714%201.054%200.214%200.089%200.429%200.089%200.464%200%200.804-0.339zM27.429%207.429v17.143q0%202.125-1.509%203.634t-3.634%201.509h-17.143q-2.125%200-3.634-1.509t-1.509-3.634v-17.143q0-2.125%201.509-3.634t3.634-1.509h17.143q2.125%200%203.634%201.509t1.509%203.634z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-stethoscope { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2225%22%20height%3D%2232%22%20viewBox%3D%220%200%2025%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M22.857%2012.571q0-0.464-0.339-0.804t-0.804-0.339-0.804%200.339-0.339%200.804%200.339%200.804%200.804%200.339%200.804-0.339%200.339-0.804zM25.143%2012.571q0%201.107-0.634%201.982t-1.652%201.25v7.054q0%202.839-2.348%204.848t-5.652%202.009-5.652-2.009-2.348-4.848v-2.357q-2.929-0.357-4.893-2.286t-1.964-4.5v-9.143q0-0.464%200.339-0.804t0.804-0.339q0.107%200%200.286%200.036%200.304-0.536%200.839-0.857t1.161-0.321q0.946%200%201.616%200.67t0.67%201.616-0.67%201.616-1.616%200.67q-0.589%200-1.143-0.321v7.179q0%201.893%201.679%203.232t4.036%201.339%204.036-1.339%201.679-3.232v-7.179q-0.554%200.321-1.143%200.321-0.946%200-1.616-0.67t-0.67-1.616%200.67-1.616%201.616-0.67q0.625%200%201.161%200.321t0.839%200.857q0.179-0.036%200.286-0.036%200.464%200%200.804%200.339t0.339%200.804v9.143q0%202.571-1.964%204.5t-4.893%202.286v2.357q0%201.893%201.679%203.232t4.036%201.339%204.036-1.339%201.679-3.232v-7.054q-1.018-0.375-1.652-1.25t-0.634-1.982q0-1.429%201-2.429t2.429-1%202.429%201%201%202.429z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-unlock-alt { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3C%21--%20Generated%20by%20IcoMoon.io%20--%3E%0A%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%2221%22%20height%3D%2232%22%20viewBox%3D%220%200%2021%2032%22%3E%0A%3Cg%3E%0A%3C/g%3E%0A%09%3Cpath%20d%3D%22M18.857%2013.714q0.714%200%201.214%200.5t0.5%201.214v10.286q0%200.714-0.5%201.214t-1.214%200.5h-17.143q-0.714%200-1.214-0.5t-0.5-1.214v-10.286q0-0.714%200.5-1.214t1.214-0.5h0.571v-5.714q0-3.304%202.348-5.652t5.652-2.348%205.652%202.348%202.348%205.652q0%200.464-0.339%200.804t-0.804%200.339h-1.143q-0.464%200-0.804-0.339t-0.339-0.804q0-1.893-1.339-3.232t-3.232-1.339-3.232%201.339-1.339%203.232v5.714h13.143z%22%20fill%3D%22%23000000%22%20/%3E%0A%3C/svg%3E%0A'); + background-repeat: no-repeat; +} +.icon-link { + background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%2230px%22%20height%3D%2230px%22%20viewBox%3D%220%200%2030%2030%22%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20xmlns%3Asketch%3D%22http%3A//www.bohemiancoding.com/sketch/ns%22%3E%0A%20%20%20%20%3Ctitle%3ESlice%201%3C/title%3E%0A%20%20%20%20%3Cdescription%3ECreated%20with%20Sketch%20%28http%3A//www.bohemiancoding.com/sketch%29%3C/description%3E%0A%20%20%20%20%3Cdefs%3E%3C/defs%3E%0A%20%20%20%20%3Cg%20id%3D%22Page-1%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20sketch%3Atype%3D%22MSPage%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22link%22%20sketch%3Atype%3D%22MSLayerGroup%22%20fill%3D%22%23555555%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M26%2C21.714%20C26%2C21.238%2025.8333333%2C20.8333333%2025.5%2C20.5%20L21.786%2C16.786%20C21.4526667%2C16.4526667%2021.048%2C16.286%2020.572%2C16.286%20C20.072%2C16.286%2019.6433333%2C16.4763333%2019.286%2C16.857%20C19.322%2C16.893%2019.435%2C17.003%2019.625%2C17.187%20C19.815%2C17.371%2019.943%2C17.499%2020.009%2C17.571%20C20.075%2C17.643%2020.1643333%2C17.756%2020.277%2C17.91%20C20.3896667%2C18.064%2020.467%2C18.2156667%2020.509%2C18.365%20C20.551%2C18.5143333%2020.572%2C18.678%2020.572%2C18.856%20C20.572%2C19.332%2020.4053333%2C19.7366667%2020.072%2C20.07%20C19.7386667%2C20.4033333%2019.334%2C20.57%2018.858%2C20.57%20C18.6793333%2C20.57%2018.5156667%2C20.549%2018.367%2C20.507%20C18.2183333%2C20.465%2018.0666667%2C20.3876667%2017.912%2C20.275%20C17.7573333%2C20.1623333%2017.6443333%2C20.073%2017.573%2C20.007%20C17.5016667%2C19.941%2017.3736667%2C19.813%2017.189%2C19.623%20C17.0043333%2C19.433%2016.8943333%2C19.32%2016.859%2C19.284%20C16.4663333%2C19.6533333%2016.27%2C20.088%2016.27%2C20.588%20C16.27%2C21.064%2016.4366667%2C21.4686667%2016.77%2C21.802%20L20.449%2C25.498%20C20.7703333%2C25.8193333%2021.175%2C25.98%2021.663%2C25.98%20C22.139%2C25.98%2022.5436667%2C25.8253333%2022.877%2C25.516%20L25.502%2C22.909%20C25.8353333%2C22.5756667%2026.002%2C22.177%2026.002%2C21.713%20L26%2C21.714%20Z%20M13.446%2C9.125%20C13.446%2C8.649%2013.2793333%2C8.24433333%2012.946%2C7.911%20L9.267%2C4.215%20C8.93366667%2C3.88166667%208.529%2C3.715%208.053%2C3.715%20C7.589%2C3.715%207.18433333%2C3.87566667%206.839%2C4.197%20L4.214%2C6.804%20C3.88066667%2C7.13733333%203.714%2C7.536%203.714%2C8%20C3.714%2C8.476%203.88066667%2C8.88066667%204.214%2C9.214%20L7.928%2C12.928%20C8.24933333%2C13.2493333%208.654%2C13.41%209.142%2C13.41%20C9.642%2C13.41%2010.0706667%2C13.2253333%2010.428%2C12.856%20C10.392%2C12.82%2010.279%2C12.71%2010.089%2C12.526%20C9.899%2C12.342%209.771%2C12.214%209.705%2C12.142%20C9.639%2C12.07%209.54966667%2C11.957%209.437%2C11.803%20C9.32433333%2C11.649%209.247%2C11.4973333%209.205%2C11.348%20C9.163%2C11.1986667%209.142%2C11.035%209.142%2C10.857%20C9.142%2C10.381%209.30866667%2C9.97633333%209.642%2C9.643%20C9.97533333%2C9.30966667%2010.38%2C9.143%2010.856%2C9.143%20C11.0346667%2C9.143%2011.1983333%2C9.164%2011.347%2C9.206%20C11.4956667%2C9.248%2011.6473333%2C9.32533333%2011.802%2C9.438%20C11.9566667%2C9.55066667%2012.0696667%2C9.64%2012.141%2C9.706%20C12.2123333%2C9.772%2012.3403333%2C9.9%2012.525%2C10.09%20C12.7096667%2C10.28%2012.8196667%2C10.393%2012.855%2C10.429%20C13.2476667%2C10.0596667%2013.444%2C9.625%2013.444%2C9.125%20L13.446%2C9.125%20Z%20M29.429%2C21.714%20C29.429%2C23.1426667%2028.923%2C24.351%2027.911%2C25.339%20L25.286%2C27.946%20C24.298%2C28.934%2023.0896667%2C29.428%2021.661%2C29.428%20C20.2203333%2C29.428%2019.006%2C28.922%2018.018%2C27.91%20L14.339%2C24.214%20C13.351%2C23.226%2012.857%2C22.0176667%2012.857%2C20.589%20C12.857%2C19.125%2013.3806667%2C17.881%2014.428%2C16.857%20L12.857%2C15.286%20C11.833%2C16.3333333%2010.595%2C16.857%209.143%2C16.857%20C7.71433333%2C16.857%206.5%2C16.357%205.5%2C15.357%20L1.786%2C11.643%20C0.786%2C10.643%200.286%2C9.42866667%200.286%2C8%20C0.286%2C6.57133333%200.792%2C5.363%201.804%2C4.375%20L4.429%2C1.768%20C5.417%2C0.78%206.62533333%2C0.286%208.054%2C0.286%20C9.49466667%2C0.286%2010.709%2C0.792%2011.697%2C1.804%20L15.376%2C5.5%20C16.364%2C6.488%2016.858%2C7.69633333%2016.858%2C9.125%20C16.858%2C10.589%2016.3343333%2C11.833%2015.287%2C12.857%20L16.858%2C14.428%20C17.882%2C13.3806667%2019.12%2C12.857%2020.572%2C12.857%20C22.0006667%2C12.857%2023.215%2C13.357%2024.215%2C14.357%20L27.929%2C18.071%20C28.929%2C19.071%2029.429%2C20.2853333%2029.429%2C21.714%20L29.429%2C21.714%20Z%22%20id%3D%22Shape%22%20sketch%3Atype%3D%22MSShapeGroup%22%3E%3C/path%3E%0A%20%20%20%20%20%20%20%20%3C/g%3E%0A%20%20%20%20%3C/g%3E%0A%3C/svg%3E'); + background-repeat: no-repeat; +} diff --git a/source/stylesheets/_normalize.scss b/source/stylesheets/_normalize.scss new file mode 100755 index 0000000..d18a822 --- /dev/null +++ b/source/stylesheets/_normalize.scss @@ -0,0 +1,383 @@ +/*! normalize.css v2.1.3 | MIT License | git.io/normalize */ + +/* ========================================================================== + HTML5 display definitions + ========================================================================== */ + +/** + * Correct `block` display not defined in IE 8/9. + */ + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +main, +nav, +section, +summary { + display: block; +} + +/** + * Correct `inline-block` display not defined in IE 8/9. + */ + +audio, +canvas, +video { + display: inline-block; +} + +/** + * Prevent modern browsers from displaying `audio` without controls. + * Remove excess height in iOS 5 devices. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Address `[hidden]` styling not present in IE 8/9. + * Hide the `template` element in IE, Safari, and Firefox < 22. + */ + +[hidden], +template { + display: none; +} + +/* ========================================================================== + Base + ========================================================================== */ + +/** + * 1. Set default font family to sans-serif. + * 2. Prevent iOS text size adjust after orientation change, without disabling + * user zoom. + */ + +html { + font-family: sans-serif; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/** + * Remove default margin. + */ + +body { + margin: 0; +} + +/* ========================================================================== + Links + ========================================================================== */ + +/** + * Remove the gray background color from active links in IE 10. + */ + +a { + background: transparent; +} + +/** + * Address `outline` inconsistency between Chrome and other browsers. + */ + +a:focus { + outline: thin dotted; +} + +/** + * Improve readability when focused and also mouse hovered in all browsers. + */ + +a:active, +a:hover { + outline: 0; +} + +/* ========================================================================== + Typography + ========================================================================== */ + +/** + * Address variable `h1` font-size and margin within `section` and `article` + * contexts in Firefox 4+, Safari 5, and Chrome. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/** + * Address styling not present in IE 8/9, Safari 5, and Chrome. + */ + +abbr[title] { + border-bottom: 1px dotted; +} + +/** + * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome. + */ + +b, +strong { + font-weight: bold; +} + +/** + * Address styling not present in Safari 5 and Chrome. + */ + +dfn { + font-style: italic; +} + +/** + * Address differences between Firefox and other browsers. + */ + +hr { + -moz-box-sizing: content-box; + box-sizing: content-box; + height: 0; +} + +/** + * Address styling not present in IE 8/9. + */ + +mark { + background: #ff0; + color: #000; +} + +/** + * Correct font family set oddly in Safari 5 and Chrome. + */ + +code, +kbd, +pre, +samp { + font-family: monospace, serif; + font-size: 1em; +} + +/** + * Improve readability of pre-formatted text in all browsers. + */ + +pre { + white-space: pre-wrap; +} + +/** + * Set consistent quote types. + */ + +q { + quotes: "\201C" "\201D" "\2018" "\2019"; +} + +/** + * Address inconsistent and variable font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` affecting `line-height` in all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sup { + top: -0.5em; +} + +sub { + bottom: -0.25em; +} + +/* ========================================================================== + Embedded content + ========================================================================== */ + +/** + * Remove border when inside `a` element in IE 8/9. + */ + +img { + border: 0; +} + +/** + * Correct overflow displayed oddly in IE 9. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* ========================================================================== + Figures + ========================================================================== */ + +/** + * Address margin not present in IE 8/9 and Safari 5. + */ + +figure { + margin: 0; +} + +/* ========================================================================== + Forms + ========================================================================== */ + +/** + * Define consistent border, margin, and padding. + */ + +fieldset { + border: 1px solid #c0c0c0; + margin: 0 2px; + padding: 0.35em 0.625em 0.75em; +} + +/** + * 1. Correct `color` not being inherited in IE 8/9. + * 2. Remove padding so people aren't caught out if they zero out fieldsets. + */ + +legend { + border: 0; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * 1. Correct font family not being inherited in all browsers. + * 2. Correct font size not being inherited in all browsers. + * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. + */ + +button, +input, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 2 */ + margin: 0; /* 3 */ +} + +/** + * Address Firefox 4+ setting `line-height` on `input` using `!important` in + * the UA stylesheet. + */ + +button, +input { + line-height: normal; +} + +/** + * Address inconsistent `text-transform` inheritance for `button` and `select`. + * All other form control elements do not inherit `text-transform` values. + * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+. + * Correct `select` style inheritance in Firefox 4+ and Opera. + */ + +button, +select { + text-transform: none; +} + +/** + * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` + * and `video` controls. + * 2. Correct inability to style clickable `input` types in iOS. + * 3. Improve usability and consistency of cursor style between image-type + * `input` and others. + */ + +button, +html input[type="button"], /* 1 */ +input[type="reset"], +input[type="submit"] { + -webkit-appearance: button; /* 2 */ + cursor: pointer; /* 3 */ +} + +/** + * Re-set default cursor for disabled elements. + */ + +button[disabled], +html input[disabled] { + cursor: default; +} + +/** + * 1. Address box sizing set to `content-box` in IE 8/9/10. + * 2. Remove excess padding in IE 8/9/10. + */ + +input[type="checkbox"], +input[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Remove inner padding and border in Firefox 4+. + */ + +button::-moz-focus-inner, +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +/** + * 1. Remove default vertical scrollbar in IE 8/9. + * 2. Improve readability and alignment in all browsers. + */ + +textarea { + overflow: auto; /* 1 */ + vertical-align: top; /* 2 */ +} + +/* ========================================================================== + Tables + ========================================================================== */ + +/** + * Remove most spacing between table cells. + */ + +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/source/stylesheets/_script.scss.erb b/source/stylesheets/_script.scss.erb new file mode 100755 index 0000000..fa1b4d8 --- /dev/null +++ b/source/stylesheets/_script.scss.erb @@ -0,0 +1,47 @@ +<%= Rouge::Themes::Github.render(:scope => '.highlight') %> +.highlight { + tab-size: 2; +} + +code, kbd { + font-size-adjust: 0.45; + font-size:1em; + line-height: 1; + background-color: #FFF; + display: inline-block; + box-sizing:border-box; + padding: .05em; + border-radius: .1em; + border: 1px solid #e5e5e5; +} + +pre>code { + background-color: transparent; +} + +kbd { + border: 1px solid #AAA; + border-radius: 0.2em; + box-shadow: 0.1em 0.2em 0.2em #DDD; + background-color: #F9F9F9; + background-image: linear-gradient(to bottom, #EEE, #F9F9F9, #EEE); + padding: 0.1em 0.3em; + font-family: inherit; + font-size: 0.85em; + white-space: no-wrap; +} + +.highlight { + .c1, .cm, .c, .cd, .cp { + color: #665; + } + .m, .mi { + color: #007575; + } + .na, .nb { + color: #007197; + } + .s, .s1, .s2 { + color: #cf0f3f; + } +} diff --git a/source/stylesheets/wai-act.scss b/source/stylesheets/wai-act.scss new file mode 100755 index 0000000..5ba10fe --- /dev/null +++ b/source/stylesheets/wai-act.scss @@ -0,0 +1,1666 @@ +@-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; } + +@import "compass/css3"; +@import "helpers"; +@import "normalize"; +@import "script"; +@import "grid"; + +// Color definitions + +$wai: #930; +$w3c: #036; + +// MQ variables + +$small: 25em; //* 400px */ +$medium: 43em; //* 700px */ +$big: 56em; //* 900px */ +$large: 81em; //* 1300px */ + +// Grid systems variable + +$total_columns: 12; // // +$total_width: 100%; // px|100% // px = fixed, 100% = fluid +$gutter_width: 2%; // px|% // px = fixed, % = fluid +$container_margin: 0.5%; // auto|px|% // + +@include font-face("Noto Sans", font-files("notosans-regular.woff2", "notosans-regular.woff"), false); +@include font-face("Noto Sans", font-files("notosans-italic.woff2", "notosans-italic.woff"), false, normal, italic); +@include font-face("Noto Sans", font-files("notosans-bold.woff2", "notosans-bold.woff"), false, bold); +@include font-face("Noto Sans", font-files("notosans-bolditalic.woff2", "notosans-bolditalic.woff"), false, bold, italic); +@include font-face("Fira Code", font-files("firacode-regular.woff2", "firacode-regular.woff"), false); + +.font-primary, .font-secondary { + font-family: "Trebuchet MS", "HelveticaNeue", "Helvetica", "Arial", sans-serif; + .fonts-loaded &{ + font-family: "Noto Sans", "Trebuchet MS", "HelveticaNeue", "Helvetica", "Arial", sans-serif; + } +} + +pre, code { + .fonts-loaded &{ + font-family: "Fira Code", monospace; + } +} + +// Body + +html { + overflow-x:hidden; + // hyphens: auto; +} + +body { + overflow-x:hidden; + counter-reset: examples approaches; + @extend .font-primary; + background-color: #F5F5F5; + color: #333; + font-size: percentage(15/16); + line-height: 1.5; + max-width: 1680px; + margin: 0 auto; + @include mq($medium) { + font-size: 100%; + } + @include mq($big) { + font-size: 112.5%; + } +} + +h2 { + font-size: 1.5em; +} + +h3 { + font-size: 21/18 * 1em; +} + +h4 { + font-size: 1em; + margin: 1.5em 0 1em; +} + +.permalink.h4 { + margin-top: .75em; +} + +p+ul { + margin-top: .5em; + li:first-child p:first-child { + margin-top: 0; + } +} + +ul + p, ul + div { + clear:left; + padding-top: .5em; +} + +ul { + &.nobullets { + padding: 0; + li { + list-style: none; + } + } + &.withicons { + padding-left: 80px; + li { + float:left; + width: 100%; + } + img { + margin-left: -80px; + margin-bottom: .5em; + float: left; + clear: left; + } + } +} + +.ex, .ap { + b, &:before { + color: $wai; + font-weight: inherit; + } +} + +.risky { + &:after { + @extend .font-secondary; + background-color: $wai; + color: #fff; + font-weight: normal; + border-radius: 100%; + width: 1.2em; + height: 1.2em; + margin-left: .6em; + line-height: 1.2; + text-align: center; + display: inline-block; + content: "!"; + } +} + + +.no-js { + .ex { + counter-increment: examples; + counter-reset: approaches; + &:before { + content: 'Example ' counter(examples) ': '; + } + &.inap { + counter-reset: none; + } + } + + .newap { + counter-reset: approaches; + } + + .newex { + counter-reset: examples; + } + + + h2.first, h3.first, .newexap { + counter-reset: examples approaches; + } + + .ap { + counter-increment: approaches; + &:before { + content: 'Approach ' counter(approaches) ': '; + } + } +} + +.inner { + a { + color: $w3c; + &:hover, &:visited { + color: $wai; + } + } + >p>img { + max-width: 100%; + } +} + +// Header + +header[role=banner] { + @include container(); + margin-bottom: 1em; + border-top: 5px solid $wai; + div { + margin: 0 auto; + @include mq($medium) { + float: right; + } + } + img { + display:inline-block; + vertical-align: middle; + } + a { + text-decoration: none; + display: inline-block; + &:hover, &:focus {text-decoration: underline;} + } +} + +// Main + +#tools { + @include container-full(); + margin: 2em 0; + background-color: #eee; + font-size: 1.5em; + + ul, li { + margin: 0; + padding: 0; + list-style: none; + overflow:hidden; + } + li { + width: 45%; + line-height: 1.1; + box-sizing:border-box; + > span { + display:inline-block; + padding: .25em 0; + .dir { + font-size: 0.75em; + text-align: left; + display: block; + } + } + a { + display:block; + text-decoration: none; + border: none; + position: relative; + color: $w3c; + &:hover, &:focus { + text-decoration: underline; + } + &:before, &:after { + font-size: 0.75em; + content: ''; + position: absolute; + bottom:.25em; + } + } + &.prev { + float:left; + padding-left: 1em; + a:before { + left: -1.25em; + @extend .icon; + @extend .icon-arrow-left; + @extend .icon-with-visible-text; + } + } + &.next { + float:right; + text-align: right; + padding-right: 1em; + a:after { + right: -1.25em; + @extend .icon; + @extend .icon-arrow-right; + @extend .icon-with-visible-text-before; + } + } + } +} + +.mainpage { + margin-bottom: 0; + font-weight: normal; + position: relative; + border-bottom:10px solid #F5F5F5; + a { + display: block; + background-color: $w3c; + color: #fff; + font-size: 1em; + line-height: 1.5; + padding: 0 .25em .25em; + text-decoration: none; + &:hover { + color: #fff; + text-decoration: underline; + } + &:before { + @extend .icon; + @extend .icon-with-visible-text; + @extend .icon-home; + content: ""; + vertical-align: top; + } + } +} + +main { + display:block; + clear: both; + @include container(); +} + +// Footer +// +// Markup:
+ +footer { + display: block; + clear:both; + border: 5px solid #993300; + border-width: 5px 0; + font-size: 0.8em; + margin-top: 2em; + padding: 1em 0; + >div { + @extend main; + } + h2 { + @extend .visuallyhidden; + font-size: 1em; + } + ul { + margin: 0; + padding: 0; + } + li { + list-style: none; + } +} + + + +// Headings +// +// Markup:

Heading Level 1

+//

Heading Level 2

+//

Heading Level 3

+//

Heading Level 4

+//
Heading Level 5
+//
Heading Level 6
+// +// Styleguide 1.4 + +h1, h2, h3 { + @extend .font-secondary; + font-weight: bold; + .subheading { + display: block; + @extend .font-primary; + font-size: 0.55em; + margin: 0.25em; + } +} + +h4 { + font-weight: bold; +} + +.page-title { + font-size: 1.75em; + @extend .font-secondary; + margin-bottom: 1em; + line-height: 1; + padding: .25em 0 0; + float:none !important; + .subheading { + padding: .25em 0 0; + display:block; + font-size: .5em; + @extend .font-primary; + } + a { + color: inherit; + text-decoration: none; + &:hover, &:focus { + text-decoration: underline; + } + } +} + +a { + color: $w3c; + .content & { + border-bottom: 1px solid; + text-decoration: none; + color: $w3c; + &:visited { + color: lighten(#535, 10%); + } + } + &:hover, &:focus { + color: #005A9C; + cursor: pointer; + .content & { + border-bottom: 3px solid; + } + } +} + +.notes { + // padding-left: 1.5em; + color: #444; + font-size: percentage(16/18); + /*&:before { + @extend .icon; + @extend .icon-info; + content: ''; + float: left; + margin-left: -1.5em; + }*/ +} + +.bulletless { + &, li { + list-style: none; + padding: 0; + margin: 0; + } +} + +.breadcrumb { + line-height: percentage(44/18); + color: $w3c; + a, svg { + color: currentColor; + fill: currentColor; + } + a { + &:hover, &:visited { + color: $wai; + } + } + .icon { + font-size: percentage(13/18); + } +} + +.list-heading { + ul + & { + margin-top: 2em; + } + position: relative; + @extend .font-primary; + font-size: 1em; + margin: 0; + text-align: center; + background-color: $w3c; + margin-bottom: 2px; + color: #fff; + line-height: percentage(44/18); + font-weight: bold; + -moz-osx-font-smoothing: grayscale; + &:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(119, 119, 119, 0); border-top-color: $w3c; border-width: 7px; margin-left: -7px; z-index: 500; } +} + +.alltutorials { + a { + @extend .btn; + } +} + +.navigation { + .status { + font-size: 0.65em; + display: inline-block; + background-color: #FFF; + line-height: 1; + vertical-align: middle; + border-radius: 1em; + padding: .1em .5em; + font-weight: bold; + text-transform: uppercase; + } + .current-a .status { + background-color: #666; + color: #fff; + } + ul { + background-color: #ddd; + counter-reset: navli; + &.topics { + a, .current-a { + .count:before { + content: "\00a0"; // Don’t display counter + } + } + } + } + ul { + margin: 0; + padding: 0; + li { + display: table; + width: 100%; + list-style-type: none; + counter-increment: navli; /* Increment the section counter */ + &.intro, &.tips { + counter-increment: none; + .count:before { + content: "\00a0"; // Don’t display counter + } + } + a, .current-a { + display: table-row; + text-decoration: none; + width: 100%; + } + a { + &:hover, &:focus { + .txt { + text-decoration: underline; + } + } + } + .count { + display: table-cell; + width: 1.75em; + margin-right: 0.75em; + text-align: center; + border-right: 1px solid #777; + &:before { + content: counter(navli); /* Display the counter */ + } + } + .txt { + display: table-cell; + position: relative; + padding: .25em .25em .25em 12px; + line-height: 1.5; + } + + .current-a { + background-color: #F5F5F5; + color: #333; + .count { + background-color: $wai; + color: #fff; + } + .txt:after { + left:-1px;top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(0, 0, 0, 0); border-left-color: $wai; border-width: 7px; margin-top: -7px; + } + } + } + } +} + +.tutorial-heading { + margin-bottom: 1em; + h1 { + margin-bottom: 0; + font-size: percentage(42/18); + position: relative; + margin-top: 0; + margin-bottom: 10px; + color: $w3c; + line-height: 1; + } + p { + padding: 0; + margin: 0; + } +} + +.with-side-menu { + @include mq($medium) { + @include container(); + } + .navigation { + @include mq($medium) { + @include column(4); + } + @include mq($big) { + @include column(3); + } + @include mq($large) { + @include column(2); + } + } + .content { + @include mq($medium) { + @include column(8); + @include push(4); + } + @include mq($big) { + @include column(9); + @include push(3); + } + @include mq($large) { + @include column(10); + @include push(2); + } + } +} + +.content { + @include container(); + h2 { + margin-top:0; + } + &.draft, &.editors-draft, &.approved-draft{ + .tutorial-heading h1 { + line-height: 1; + &:before { + display: block; + @extend .font-primary; + font-weight: bold; + padding: 0 .2em; + //vertical-align: middle; + font-size: .5em; + margin-top: .5em; + //margin-right: .25em; + color: #666; + } + } + } + &.approved-draft { + .tutorial-heading h1 { + &:before { + content: "[APPROVED DRAFT]"; + } + } + } + &.draft { + .tutorial-heading h1 { + &:before { + content: "[DRAFT]"; + } + } + } + &.editors-draft { + .tutorial-heading h1 { + &:before { + content: "[ROUGH DRAFT]"; + } + } + } + .inner { + @include mq($big) { + @include column(8); + } + padding:0 !important; + } + a[href^="http"]:after { + @extend .icon; + @extend .icon-external-link; + content: ""; + display: inline-block; + margin-left: 0.5em; + } + .sample { + a[href^="http"]:after { + display:none; + } + } +} + +%annotation { + max-width:50%; + @include mq($medium) { + width: percentage(1/2) - 8%; + margin-left: 3%; + max-width: auto; + } + @include mq($big) { + width: percentage(1/2) - 4%; + margin-right: -1 * (percentage(1/2) + 1.5%); + } + padding-left:1%; + float:right; + border-left: 2px solid $wai; + margin-top: 1em; + clear: both; + %annotation-header { + margin-top:0; + margin-bottom: 0; + // font-weight: bold; + color: $wai; + .subhead { + color: #333; + font-size: .8em; + display: block; + } + } + %annotation-content { + font-size: percentage(16/18); + :first-child { + margin-top: 0; + } + :last-child { + margin-bottom: 0; + } + } +} + +.annotation { + @extend %annotation; +} + +.annotation-header { + @extend %annotation-header; +} + +.annotation-content { + @extend %annotation-content; +} + +.status { + padding: .25em .5em; + margin-bottom: 1em; + h3, p { + display:inline; + color: inherit; + font-size: 1em; + } + .draft & { + background-color: #CFC; + } + .editors-draft & { + background-color:#FCC; + } +} + +.not-w3c-notification { + display:block; + float:none !important; + background-color:#FCC; + padding: .65em .5em; + font-weight: bold; + a { + border-bottom:2px solid; + } +} + + +%noting { + position: relative; + &:before, &:after { + position:absolute; + } + &:after { + font-weight: bold; + display: block; + transform-origin: left bottom; + transform: rotate(90deg); + top:-1em; + left: 100%; + } + &:before { + border-radius: 0 .5em .5em 0; + content: ''; + left: 100%; + top:0; + width:1.5em; + bottom:0; + } +} + +.todo { + @extend %noting; + font-size: .8em; + background-color: lighten(#f00, 40%); + > .figcontent { + padding: 0 !important; + } + &:after { + content: "TODO"; + color: #fff; + } + &:before { + background-color: #f00; + } +} + +pre { + font-size: 0.75em; + margin: 0; +} + +figure { + clear: both; + margin: 1em 0; + @include mq($big) { + clear: none; + } + &.sample, &.code, &.todo { + @extend .box; + > figcaption { + @extend .box-caption; + } + > .figcontent { + @extend .box-content; + } + } + p { + @extend .box-content; + padding-bottom: 0; + margin-bottom: 0; + } + &.code { + //width:150%; + @extend .box-secondary; + pre { + background: none; + @extend .box-content; + >code { + display:block; + } + } + } + &.sample { + @extend .box-primary; + figcaption { + color: $w3c; + } + .box-content { + font-size: .9em; + th, td, caption { + padding: .3em; + } + } + a, a:hover { + border: none; + text-decoration: underline; + } + } + &.todo { + border-left-color: darken(#f00, 20%) !important; + figcaption {background-color: darken(#f00, 20%); color: #fff} + > .figcontent {background-color: lighten(#f00, 40%);} + &:before, &:after {display:none;} + } + &.toc { + + *, + span + *, + span + aside + * { + margin-top: 0; + } + @extend %annotation; + margin-top: 0; + border:none; + font-size: 0.9em; + padding-left: 0 !important; + // background: linear-gradient(to bottom, $w3c, rgba($w3c, 0)); + border-radius: .25em .25em 0 0; + ul { + margin: 0; + padding-left: 1.25em; + line-height: 1.5; + } + figcaption { + @extend .list-heading; + padding-left: .5em; + text-align: left; + &:after { + left: 3em; + } + } + > .figcontent { + padding:.3em; + // background-color: #DDD; + background: linear-gradient(to bottom, #ddd, #f5f5f5); + border-bottom: 1px solid #ddd; + a { + display:block; + padding: 0 0 .1em; + border-bottom: none; + color: $w3c; + &:hover, &:focus { + text-decoration: underline; + } + } + > ul { + list-style-type: disc; + color: $w3c; + } + } + } +} + +.box { + margin: 1em 0; + border-left: 5px solid; + background-color: #E8E8E8; +} +.box-primary { + border-color: $w3c; +} +.box-secondary { + border-color: #777; +} +.box-caption { + font-weight: bold; + padding: .375em .75em 0; + text-transform: uppercase; + font-size: 0.75em; + @extend .font-primary; + .box-primary & { + color: $w3c; + } + .box-secondary & { + + } +} +.box-content { + overflow:auto; + padding: .5em; + >p, >ul, >ol { + &:first-child { + margin-top: 0; + } + } + >p, >ul, >ol { + &:last-child { + margin-bottom: 0; + } + } +} + +// Table + +table { + &.changes { + margin-bottom: 2em; + caption { + background-color: #ccc; + border: 1px solid #999; + border-width: 1px 1px 0; + padding: .5em; + font-weight: bold; + text-align: left; + } + } + caption { + text-align: left; + } + th { + text-align: left; + background-color: #ccc; + } + th, td { + padding: .5em; + border: 1px solid #999; + } + &.results { + clear: both; + width: 100%; + .result { + text-align: center; + } + } +} + +table, tr { + &.numbers td { + text-align: right; + } +} + +// Forms + +.form-submitTestCase { + width:75%; + margin: 0 auto; +} + +form { + fieldset { + margin-bottom: 1em; + legend + p { + margin-top: 0; + } + } + button { + &[type=submit] { + float:right; + } + } +} + +input[type=submit], button { + &:focus { + box-shadow: 0 0 5px lighten($w3c, 30%); + } +} + +// Search input + +[role=search] { + input { + + } +} + +// Form Block + +.form-block { + display: table; + width: 100%; + border: 1px solid #999; + border-radius: .5em; +} + +// Form Row + +.form-row { + display: table-row; + label, > span { + border-top: 1px solid #999; + display: table-cell; + vertical-align: middle; + padding: .5em; + } + &:first-child { + label, > span { + border-top: none; + } + } + &:nth-child(even) { + background-color: #f3f3f3; + } + &:nth-child(odd) { + background-color: #eee; + } + label { + width: 25%; + } + input, select, textarea { + width: 90%; + } + textarea { + height: 3em; + } +} + +// Selects + +select { + padding: .25em; + font-size: 1em; +} + +// Buttons + +.btn { + background: linear-gradient(to bottom, lighten(#ccc, 10%), #ccc); + color: #333; + font-weight: normal; + font-size: 1em; + line-height: percentage(44/18); + padding: .25em .5em; + border: { + color: #ccc; + width: 1px; + style: solid; + radius: .25em; + } + &:hover { + color: #333; + } +} + +.btn-primary { + @extend .btn; + background: linear-gradient(to bottom, lighten($w3c, 10%), $w3c); + color: #fff; + border-color: darken($w3c, 10%); + &:hover, &:focus { + color: #fff; + text-decoration: underline; + } +} + +.btn-small { + @extend .btn; + padding: .15em .2em; + line-height: 1.75; +} + +.btn-icon { + border: none; + background-color: transparent; + padding: 0; +} + +.btn-next { + float:right; +} + +.btn-jump { + display: block; + margin: 0 1em 1em; + text-align: center; + @include mq($medium) { + position: absolute; + left: -1000em; + &:focus { + position: static; + left:0; + } + } +} + +.permalink { + display:inline; + position: relative; + font-size: .7em; + float:right; + margin: 0 0 .5em .5em; + > a { + color: #666 !important; + border:1px solid #F5F5F5; + padding: .5em; + &:hover { + border:1px solid; + } + display: inline-block; + vertical-align: middle; + margin-left: .5em; + font-weight: bold; + white-space: nowrap; + svg { + vertical-align: middle; + display: inline-block; + } + } + .sharebox { + display:none; + &.open { + display:block; + } + position: absolute; + z-index: 999; + top:120%; + right: 0; + background: #ddd; + border: 1px solid #777; + padding: .5em; + min-width: 20em; + max-width: 100%; + box-shadow: 0 0 10px #222; + input { + display: block; + width: 100%; + box-sizing: border-box; + } + label span { + display: block; + text-align: right; + } + button { + @extend .btn-small; + position:absolute; + bottom:0; + right:0; + } + p:first-child { + margin-top: 0; + } + } +} + +#icon-share { + fill: currentColor; +} + +.decision-tree { + list-style: none; + margin: 1em 0; + padding:0; + > li { + > strong { + display: block; + padding: 1em .5em; + } + border: 2px solid #999; + border-top:none; + &:first-child { + border-top:2px solid #999; + } + > ul { + padding:0; + list-style: none; + .flexbox & { + display:flex; + flex-direction: row-reverse; + flex-wrap: wrap; + align-items: stretch; + } + border-top: 1px dotted #aaa; + > li { + text-indent: 0; + box-sizing: border-box; + font-weight: normal; + .flexbox & { + flex-basis: 25%; + } + padding: .5em; + // border: 1px solid #aaa; + &:nth-child(odd) { + .flexbox & { + flex-basis: 75%; + } + } + &:nth-child(odd):last-child { + display:block; + flex-basis:100%; + } + ul { + padding:0; + margin:0; + } + li { + padding: 0; + padding-bottom: 0.5em; + margin-bottom: 0.5em; + border-bottom: 1px solid #888; + list-style: none; + > em { + display: block; + padding-left: 1.5em; + position: relative; + margin-top: .25em; + font-style: normal; + &:before { + position:absolute; + @extend .icon; + @extend .icon-arrow-right; + content: ''; + top:.2em; + margin-left: -1.5em; + } + } + &:last-child { + border-bottom-style: none; + padding-bottom: 0; + margin-bottom: 0; + } + } + } + } + } + .yes { + background-color: #D9EDF7; + border-bottom: none; + li { + list-style: disc; + margin-left: 1em; + &:only-child { + list-style: none; + } + } + } + .no { + border-right:1px dotted #aaa; + background-color: #F2DEDE; + border-bottom: none; + position: relative; + &:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(119, 119, 119, 0); border-top-color: #F2DEDE; border-width: 1em; margin-left: -.5em; z-index: 500; } + &:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(119, 119, 119, 0); border-top-color: #999; border-width: 1.2em; margin-left: -.7em; z-index: 400; } + } +} + +.resources { + margin-top: 2em; + outline: .25em solid #fff; + background-color: #FFF; + border: 1px solid #ccc; + padding-top: 0; + .resources-inner { + padding: 0 .625em; + font-size: 0.8em; + p:first-child { + margin-top: 0; + } + } + h2 { + padding-top:0 !important; + margin-bottom: 1em; + padding: .25em .5em; + background-color: #F0F0F0; + font-size: 1em; + margin: 0; + } + .permalink.h2 { + margin-top: 0; + } +} + +/* ====== ICONS ======== EDIT ABOVE! ======== */ + +.icon { + display:inline-block; + height: 1em; + width: 1em; + background-size: contain; + background-repeat:no-repeat; + background-position: center; + vertical-align: middle; + fill: currentColor; +} + +.icon-with-visible-text { + margin-right:.25em; +} + +.icon-with-visible-text-before { + margin-left:.25em; +} + +@import 'icons-png'; +.svg { + @import 'icons-svg'; +} + +.symbol { + float: left; + margin: 0 1em 1em 0; + @include mq($medium) { + float:right; + margin: 0 0 1em 1em; + } +} + +/* ====== HELPERS ======== EDIT ABOVE! ======== */ + +// Grid System + +// Column wrapper + +.grid { + @include container(); +} + +.with-filter { + clear: both; + @include mq($medium) { + h3>button {display:none;} + .column-first { + @include column(4); + } + .column-second { + @include column(8); + @include push(4); + } + } + &.with-basket { + @include mq($medium) { + h3>button {display:none;} + .column-first { + @include column(3); + } + .column-second { + @include column(7); + @include push(3); + } + .column-third { + @include column(2); + @include push(10); + } + } + } +} + +.column { + @include column(12); +} + +@include mq($medium) { + .onehalf { + @include column(6); + } + .one3rd { + @include column(4); + } + .two3rds { + @include column(8); + } + .one4th { + @include column(3); + } + .two4ths { + @extend .onehalf; + } + .three4ths { + @include column(9); + } + .one6th { + @include column(2); + } + .two6ths { + @extend .one3rd; + } + .three6ths { + @extend .onehalf; + } + .four6ths { + @extend .two3rds; + } + .five6ths { + @include column(10); + } +} + +.last { + @include column_omega(); +} + +// Flush right + +.flush.right { + float:right; +} + +.technologies { + @extend %annotation; + font-size: 0.9em; + border:none !important; + margin-bottom: 2em; + strong, div { + padding: .5em; + display: block; + } + strong { + padding-bottom: 0; + } + span { + display: inline-block; + border-radius: 1em; + line-height: 1; + padding: 0 .45em; + } + .tech { + background-color: #ddd; + border: 1px solid; + /* span { + padding: .125em .25em .125em .125em; + border-radius: 0 1em 1em 0; + } + &.ok span { + background-color: green; + color: #fff; + } + &.wip span { + background-color: yellow; + }*/ + } +} + +.side-box { + border:1px solid #666 !important; + border-radius: .5em; + padding:1em; + margin: 2em 0; + .heading { + font-weight: bold; + font-size: 1em; + margin: 0 !important; + padding: 0 !important; + + p { + margin-top: 0.5em; + } + } +} + +.editpage { + text-align: center; + margin-top: 1em; + padding: .5em 0 0; + border-top: 1px solid #ccc; +} + +[fragmention] { + box-shadow: 0 0 10px #aaa; +} + +[fragmention]:focus { + box-shadow: 0 0 10px $w3c; + outline-color: $w3c; +} + +ul.inline { + display:inline; + li { + display:inline; + &:before { + content: ", " + } + &:first-child { + &:before { + content: ''; + } + } + &:last-child { + &:before { + content: ', and '; + } + &:after { + content: '.'; + } + } + &:last-child { + &:nth-child(2) { + &:before { + content: " and "; + } + } + &:first-child { + &:before { + content: ''; + } + } + } + } +} + + +.reference { + @extend %annotation; + font-size: .85em; + :first-child { + margin-top: 0; + } + :last-child { + margin-bottom: 0; + } +} + +.ref-container { + /*&, * {border: 1px solid red;}*/ + @include mq($small) { + display:flex; + justify-content: space-between; + } + @include mq($big) { + margin-right: -51.515151515%; + } + .ref-main { + box-sizing: border-box; + flex: 0 0 66%; + /*margin-right: 1em;*/ + margin-bottom: 1em; + } + .ref-side { + box-sizing: border-box; + flex: 0 0 30.36%; + font-size: .9em; + /*margin-left: 1em;*/ + position:relative; + > div { + padding: .5em; + padding-left: 3em; + border: 2px solid $wai; + border-radius: 2px; + } + svg { + stroke: $wai; + position:absolute; + left: .5em; + top: .4em; + } + a { + color: $wai; + } + } + .ref-main,.ref-side > div { + p:first-of-type { + margin-top: 0; + } + p:last-of-type { + margin-bottom: 0; + } + } +} + +.demo-container { + /*&, * {border: 1px solid red;}*/ + @include mq($small) { + display:flex; + justify-content: space-between; + } + @include mq($big) { + margin-right: -51.515151515%; + } + .demo-main { + box-sizing: border-box; + flex: 0 0 66%; + /*margin-right: 1em;*/ + margin-bottom: 1em; + } + .demo-side { + box-sizing: border-box; + flex: 0 0 30.36%; + font-size: .9em; + /*margin-left: 1em;*/ + position:relative; + > div { + padding: .5em; + padding-left: 3em; + border: 2px solid $w3c; + border-radius: 2px; + } + svg { + stroke: $w3c; + position:absolute; + left: .5em; + top: .25em; + } + a { + color: $w3c; + } + } + .demo-main,.demo-side > div { + *:first-of-type { + margin-top: 0; + } + *:last-of-type { + margin-bottom: 0; + } + } +} + +.sideimage { + border: 1px solid $w3c; + margin: 0 1em .5em; + border-radius: 2px; + &.left { + float: left; + margin-left: 0; + } + + &.right { + float: right; + margin-right: 0; + } +} + +@media print { + body { + background-color: #fff; + } + figure { + page-break-inside: avoid; + } + .permalink, .navigation, .github, .btn-jump { + display: none; + } + .content a[href^="http"]:after, .content a[href^="#"]:after { + content: " (" attr(href) ") "; + color: #666; + background-image:none !important; + width: auto; + height: auto; + } + +} diff --git a/stash.md b/stash.md new file mode 100755 index 0000000..aa92443 --- /dev/null +++ b/stash.md @@ -0,0 +1,270 @@ +# Examples that don’t have a place to live anymore… + +## Immediately display dynamically created output to the user +{:.ex} + +Sometimes, user input results in an output on the page immediately, the result of a calculation, for example. In this case, again, an ARIA live region helps to convey the result to users of assistive technologies. Additionally we use a “yellow fade” effect that draws the attention of visual users to the result and helps to discover it easily. + +{::nomarkdown} +<%= sample_start %> + +
+
+ Additon + + + + + +
+
+ + + + + +<%= sample_end %> +{:/nomarkdown} + +The HTML is pretty straight forward, just two labeled number inputs and a span which is going to contain the result. Note that we use `aria-atomic` (set to `true`) to make sure the complete result is read. This is necessary as we change the HTML in JavaScript and some assistive technologies have problems picking the change up otherwise. + +{::nomarkdown} +<%= code_start('','HTML') %> +{:/nomarkdown} + +~~~ html + + + + + +~~~ + +{::nomarkdown} +<%= code_end %> +{:/nomarkdown} + +CSS-wise, a transition of the background color is added to the element. This way we can leave it to the browser to calculate all the color steps in-between, which is a huge performance win. + +{::nomarkdown} +<%= code_start('', 'CSS') %> +{:/nomarkdown} + +~~~ css +#result { transition: background-color linear .5s; } +~~~ + +{::nomarkdown} +<%= code_end %> +{:/nomarkdown} + +The JavaScript is pretty straight forward. On `keyup` and `change` events, the function calculate is called. The `change` event is necessary in this example as the buttons that come with the `number` input type can be operated with the mouse. + +{::nomarkdown} +<%= code_start('', 'JavaScript') %> +{:/nomarkdown} + +~~~ js +function calculate(num1, num2) { + // (1) Select result element. + var res = document.getElementById('result'); + + // (2) Set the background color of the result element to yellow (full opacity). + res.style.backgroundColor = 'rgba(255,255,0,1)'; + + // (3) Convert strings to floats. + num1 = parseFloat(num1); + num2 = parseFloat(num2); + + // (4) Only calculate if both input values are numbers. + if (!(isNaN(num1) || isNaN(num2))) { + + // (5) Add. + var add = num1 + num2; + + // (6) Attach result to the result element. + res.innerHTML = 'Result: ' + num1 + ' + ' + num2 + + ' = ' + add + ''; + } else { + + // (7) if one if the input values is not a number, clear the result + res.innerHTML = ''; + } + + // (8) After one second, set the background color of the element + // to transparent yellow. + // The CSS transition will fade the background color out nicely. + setTimeout('document.getElementById("result").style.backgroundColor = "rgba(255,255,0,0)";', 1000) +} + +document.getElementById('num1').addEventListener('keyup', + function(){ + calculate(this.value, document.getElementById('num2').value); + }); + +document.getElementById('num2').addEventListener('keyup', + function(){ + calculate(document.getElementById('num1').value, this.value); + }); + +document.getElementById('num1').addEventListener('change', + function(){ + calculate(this.value, document.getElementById('num2').value); + }); + +document.getElementById('num2').addEventListener('change', + function(){ + calculate(document.getElementById('num1').value, this.value); + }); +~~~ + +{::nomarkdown} +<%= code_end %> +{:/nomarkdown} + +## Indicate that data is loading +{:.ex} + +If an action does not result in immediate feedback because data has to be calculated or loaded from the server using AJAX, it is necessary to notify the user that data is loading, and when it finished loading. In the following example, a click on the button simulates loading data from the server. + +{::nomarkdown} +<%= sample_start %> + + + + + + + +<%= sample_end %> +{:/nomarkdown} + +A CSS animation is used to animate the dots in the text “Loading...” while the data is loading. That text replaces the text “Load” that is on the button before it is clicked. After a while the loading text itself is replaced by the text “Loaded”. Again a live region is used to announce the changes to assistive technologies. + +{::nomarkdown} +<%= code_start('','HTML') %> +{:/nomarkdown} + +~~~ html + +~~~ + +{::nomarkdown} +<%= code_end %> +{:/nomarkdown} + +{::nomarkdown} +<%= code_start('', 'CSS') %> +{:/nomarkdown} + +~~~ css +@keyframes fade { + 0% { opacity: 0; } + 100% { opacity: 1; } +} +.indicator>span { + animation: fade 2s infinite; + animation-direction: alternate; + opacity:0; +} +.indicator>span:nth-child(2) { + animation-delay: .66s; +} +.indicator>span:nth-child(3) { + animation-delay: 1.32s; +} +~~~ + +{::nomarkdown} +<%= code_end %> +{:/nomarkdown} + +{::nomarkdown} +<%= code_start('', 'JavaScript') %> +{:/nomarkdown} + +~~~ js +document.getElementById('loadthis').addEventListener('click', + function(){ + this.innerHTML = + 'Loading ...'; + + /* Load data here. To simulate this, the text is just changed + to “Loaded” after six seconds. */ + setTimeout('document.getElementById("loadthis").innerHTML = "Loaded";', 6000) + }); +~~~ + +{::nomarkdown} +<%= code_end %> +{:/nomarkdown} diff --git a/technicaldocs.md b/technicaldocs.md new file mode 100755 index 0000000..2b18648 --- /dev/null +++ b/technicaldocs.md @@ -0,0 +1,48 @@ + +### Local development + +The tutorials use [Middleman][] to create static HTML files. However there is no need to get into installing Middleman on your computer to contribute – just follow the instructions in the README.md. + +Please follow the [installation instructions on the Midleman web site][MMInst]. Windows users need to [install Ruby first][WinRuby]. + +Also it is required to install the [Middleman-GH-Pages gem][MMGHP], if you want to push your changes to a github pages branch. You can edit content and work on the files locally without this gem also. + + +Once you’ve cloned the repository to your computer, using the command line or a git client like [Sourcetree][], running the command `gem install` in the repository directory _should_ set everything up for you. + +Try to run `middleman server` from the command line and you should see the following output: + +```bash +$ middleman server +== The Middleman is loading +== LiveReload is waiting for a browser to connect +== The Middleman is standing watch at http://0.0.0.0:4567 +== Inspect your site configuration at http://0.0.0.0:4567/__middleman/ +``` + +You can now go to the displayed URL (in this example `http://0.0.0.0:4567`) to see the website running in your browser. Every change you make will be reflected in the browser in an instant, due to LiveReload. + +Once you’re done, press `ctrl` + `C` on your command line to quit the process. + +### Committing to the repository + +Try to be very granular about commits to your local repository. For example a commit with the text “Changed all things in the images tutorials.” is quire vague, use something like “Fixed typo on page …”, “Headline text more clear on page …” or “Provide a better example for …” and split it into multiple commits. + +_Note: Some git clients like Github for Mac or Sourcetree allow to commit lines of files individually. So make your changes at once but commit them individually._ + +When you’re done with changes, `git push` them to this repository (`dev` branch) if you have the right to write to the repository or make [a pull request][pullreq]. + +### Updating github pages + +Use the `rake publish` command to publish your current version automatically. If you do that to a forked repository, don’t open pull requests for changes in that branch. + + +[LivePage]:https://www.w3.org/WAI/tutorials/ +[GHPage]:http://w3c.github.io/wai-tutorials/ +[Middleman]:http://middlemanapp.com/ +[MMInst]:http://middlemanapp.com/basics/getting-started/ +[WinRuby]:http://rubyinstaller.org/ +[MMGHP]:https://github.com/neo/middleman-gh-pages +[Sourcetree]:http://www.sourcetreeapp.com/ +[pullreq]:https://help.github.com/articles/using-pull-requests +[exmpIMG]:https://github.com/w3c/wai-tutorials/blob/master/source/images/informative.html.md.erb