Fix busted "Skip Nav" functionality and move styles into their own Sa…

…ss partial.
wvuweb · Nov 5, 2015 · c2ddb41 · c2ddb41
1 parent 06917d0
commit c2ddb41
Show file tree

Hide file tree

Showing 11 changed files with 16 additions and 9 deletions.
diff --git a/scss/1-base/_wvu-base.scss b/scss/1-base/_wvu-base.scss
@@ -15,6 +15,3 @@ fieldset { border: 0; margin: 0; padding: 0; }
 // Allow only vertical resizing of textareas.
 textarea { resize: vertical; }
 abbr { cursor: help; }
-.wvu-skip-nav { position: absolute; padding: 0.5em; left: -99999em; background: white;
-  &:focus { left: 0; }
-}
diff --git a/scss/1-base/_wvu-skip-nav.scss b/scss/1-base/_wvu-skip-nav.scss
@@ -0,0 +1,7 @@
+// Skip Nav
+// If you hit "Tab" on your keyboard, you'll see "Skip to Main Content".
+// This file contains styles for that feature.
+
+.wvu-skip-nav { position: absolute; z-index: 10; padding: 0.5em; left: -99999em; background: white;
+  &:focus { left: 0; }
+} //.wvu-skip-nav
diff --git a/scss/1-base/base-dir.scss b/scss/1-base/base-dir.scss
@@ -7,6 +7,7 @@
 @import 'wvu-tables';
 @import 'wvu-nav-dropdowns';
 @import 'wvu-base';
+@import 'wvu-skip-nav';
 @import 'wvu-forms';
 @import 'wvu-search';
 @import 'wvu-masthead';

diff --git a/stylesheets/ie8.css b/stylesheets/ie8.css
@@ -964,6 +964,7 @@ abbr {
 
 .wvu-skip-nav {
   position: absolute;
+  z-index: 10;
   padding: 0.5em;
   left: -99999em;
   background: white;

diff --git a/stylesheets/styles.css b/stylesheets/styles.css
@@ -1398,6 +1398,7 @@ abbr {
 
 .wvu-skip-nav {
   position: absolute;
+  z-index: 10;
   padding: 0.5em;
   left: -99999em;
   background: white;

diff --git a/views/backpage.html b/views/backpage.html
@@ -6,7 +6,7 @@
 
 <div class="wvu-container">
 
-  <main class="main">
+  <main id="maincontent" class="main">
     <h1><r:page:name /></h1>
     <r:editable_region name="main" />
   </main>

diff --git a/views/blog_article.html b/views/blog_article.html
@@ -6,7 +6,7 @@
 
   <r:comment><!-- NOTE: Blog articles use Schema.org's tags to structure your data & help with SEO: http://goo.gl/SKs4Qb --></r:comment>
 
-  <article class="main wvu-article wvu-article--individual" role="article" itemscope="" itemprop="blogPost" itemtype="http://schema.org/BlogPosting">
+  <article id="maincontent" class="main wvu-article wvu-article--individual" role="article" itemscope="" itemprop="blogPost" itemtype="http://schema.org/BlogPosting">
     <h1 class="wvu-article__title" itemprop="headline"><r:page:name /></h1>
     <p class="wvu-article__meta">
       <span itemprop="author" itemscope="" itemtype="http://schema.org/Person">

diff --git a/views/blog_index.html b/views/blog_index.html
@@ -7,7 +7,7 @@
   <r:comment><!-- NOTE: Set how many blog posts you'd like to show per page. Eg: default="10" --></r:comment>
   <r:set_var name="limit" value="{$limit}" default="10"/>
 
-  <main class="main" role="main">
+  <main id="maincontent" class="main" role="main">
     <h1><r:page:name /></h1>
 
     <r:blog:articles limit="{$limit}" page="{$page}" tags="{$tags}" tags_op="{$tags_op}" year="{$year}" month="{$month}" day="{$day}">

diff --git a/views/frontpage.html b/views/frontpage.html
@@ -2,5 +2,5 @@
 layout: default
 ---
 
-
+<a href="#" id="maincontent"></a>
 <r:partial name="patterns/wvu-hero" />
diff --git a/views/profile_index.html b/views/profile_index.html
@@ -6,7 +6,7 @@
 
 <div class="wvu-container">
 
-  <main class="main">
+  <main id="maincontent" class="main">
     <h1><r:page:name /></h1>
 
     <ul class="wvu-profile">

diff --git a/views/profile_individual.html b/views/profile_individual.html
@@ -6,7 +6,7 @@
 
 <div class="wvu-container">
 
-  <main class="main">
+  <main id="maincontent" class="main">
 
     <h1 class="wvu-profile__name">
       <r:editable_region name="wvu-profile__name" type="simple">