diff --git a/_layouts/page.html b/_layouts/page.html
index 8627a83e4427ab570d2242961bc14d10a4f1624e..eb3ee6385149303d47e8a9bf357a59396ae70b04 100755
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -7,6 +7,8 @@ layout: default
<h1 class="post-title">{{ page.title }}</h1>
<p>{{ page.description }}</p>
- {{ content }}
+ <div class="post-content">
+ {{ content }}
+ </div>
</article>
diff --git a/_sass/_colors.scss b/_sass/_colors.scss
index 8c1c95ef693ac9c4205975bd2b68a1c29279f2fa..d9401fc78af46562726a76878728d9a5c24af474 100644
--- a/_sass/_colors.scss
+++ b/_sass/_colors.scss
@@ -7,12 +7,9 @@ $headings: #333;
$body_font: #333;
$link: #177960;
-
$header_bg: #f8f8f8;
$hero: #f8f8f8;
-$accordion_bg: #eee;
-
$footer_bg: #f8f8f8;
body {
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index 7367a0548f1f6de0747b0b6d58c2b2d3668c3181..c7e0cc48f1daa91d838418338428c3cbf7670a90 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -31,50 +31,6 @@ $mobile: 24em;
// Everything UP TO our desktop view
// The views are so dramatically different, we don't want to have to
// override a bunch of code in the desktop version with a min-width query
- @media (max-width: $desktop+4.99em) {
- // hide all text like screen reader text so it's still usable for screen readers
- .toc-wrap {
- display: none;
- }
-
- .accordion-section {
- padding: 0;
-
- &:first-of-type {
- .accordion-section__title {
- margin-top: 0; // giving the top margin instead of bottom to help content padding animation feel smoother
- }
- }
- }
-
- .accordion-section__title {
- font-size: 1.6em;
- padding: 1rem 1.2rem;
- margin: .6em 0 0;
- background: $accordion_bg;
- border-bottom: 2px solid darken($accordion_bg, 12.5%);
- cursor: pointer; // this shouldn't even come into play on tablets anyways... but...
-
- }
-
- .accordion-section__content {
- position: absolute;
- clip: rect(0 0 0 0);
- height: 1px;
- overflow: hidden;
- padding: 0 1.2rem;
- margin: 0;
- transition: all .4s;
-
- &.visible {
- position: relative;
- clip: auto;
- height: auto;
- padding: 1em 1.2rem 1.6em; //animating padding makes it feel a little like a ease in with out doing a max-height animation hack
- }
- }
-
- }
// desktop view with waypoints sidebar
@media (min-width: ($desktop+5em) ) {
@@ -91,6 +47,11 @@ $mobile: 24em;
.post {
// widen it up to make room
max-width: ($tablet+11em);
+ position: relative;
+ }
+
+ .post-content {
+ position: relative;
}
.toc-wrap {
@@ -104,6 +65,12 @@ $mobile: 24em;
position: fixed;
}
+ &.stick-footer {
+ position: absolute;
+ bottom: 0;
+ top: auto;
+ }
+
.toc-title {
text-align: right;
@@ -136,20 +103,28 @@ $mobile: 24em;
.toc-long {
width: 10em;
border-left: 1px solid #ddd;
- float: right;
+ position: absolute;
+ left: 35em;
padding: 0 0 0 1em;
+ top: 2em;
&.stick {
+ top: 1em;
+ left: auto;
margin-left: 35em;
}
+ &.stick-footer {
+ top: auto;
+ }
+
.toc-title,
.toc {
text-align: left;
}
a.active {
- font-size: 1.2em;
+ font-size: 1.1em;
right: 0;
}
diff --git a/js/scripts.js b/js/scripts.js
index 9e100f30971afc6a727888c58a37dc55c27002e2..92c42b994116dfe303ed9c8f179e6cee78e77f2b 100644
--- a/js/scripts.js
+++ b/js/scripts.js
@@ -10,43 +10,6 @@ $(document).ready(function(){
$('form').garlic(); // persistent checkboxes for checklist section
-
- function addAccordionSemantics(element, tabindex) {
-
- var articleID = $(element).attr('id');
-
- $(element).addClass('accordion-section');
- $('.article-section__title', element)
- .addClass('accordion-section__title')
- .attr({
- 'tabindex': tabindex,
- 'role':'tab',
- 'aria-controls': articleID+'-content',
- 'id': articleID+'-title',
- 'aria-selected': 'false',
- 'aria-expanded': 'false'
- });
- $('.article-section__content', element)
- .addClass('accordion-section__content')
- .attr({
- 'id': articleID+'-content',
- 'aria-labeledby': articleID+'-title',
- 'role': 'tabpanel',
- 'tabindex': '0',
- 'aria-hidden': 'true'
- });
- }
-
- function removeAccordionSemantics(element) {
- $(element).removeClass('accordion-section');
- $('.article-section__title', element)
- .removeClass('accordion-section__title')
- .removeAttr('tabindex role aria-controls id aria-selected aria-expanded');
- $('.article-section__content', element)
- .removeClass('accordion-section__content')
- .removeAttr('id aria-labeledby role tabindex aria-hidden');
- }
-
function setupWaypoints(element, offset) {
// waypoint classes that need to be added
$(element).addClass('waypoint-section');
@@ -95,54 +58,13 @@ $(document).ready(function(){
// get window width in EMs
var windowWidth = $(window).width() / parseFloat($("html").css("font-size"));
- if(windowWidth < 55) { // accordion view
- var tabindex;
-
- $('.article-section').each( function(i, element) {
- if(i === 0) {
- tabindex = 0;
- } else {
- tabindex = -1;
- }
-
- // remove waypoints and waypoint semantics
- removeWaypoints(element);
-
- // accordion classes & attributes
- addAccordionSemantics(element, tabindex);
- });
-
- // unbind the clicks to prevent multiple bindings
- $(document).unbind('click');
-
- // bind click on mobile accordion
- $(document).on('click', '.accordion-section__title', function() {
- var accordion_title = $(this);
- var accordion_content = $(this).next('.accordion-section__content');
- console.log('click');
-
- if( accordion_content.hasClass('visible') ) {
- // close the accordion and change attributes on title and content
- accordion_title.attr({
- 'aria-selected': 'false',
- 'aria-expanded': 'false'
- });
- accordion_content.removeClass('visible').attr('aria-hidden', 'true');
- } else {
- // open the accordion and change title and content aria attributes & classes
- accordion_title.attr({
- 'aria-selected': 'true',
- 'aria-expanded': 'true'
- });
- accordion_content.addClass('visible').attr('aria-hidden', 'false');
- }
- });
+ if(windowWidth < 53) { // accordion view
+ // remove waypoints and waypoint semantics
+ removeWaypoints(element);
} else { // desktop view
$('.article-section').each( function(i, element) {
- // remove all accordion semantics
- removeAccordionSemantics(element);
// find out if we're on a short TOC or long TOC
var offset;
@@ -158,7 +80,7 @@ $(document).ready(function(){
}// if windowWidth < 55
- } // addAccordionSemantics
+ }
// Resize delay
@@ -189,9 +111,16 @@ $(document).ready(function(){
tocPageSemantics();
- // add sticky sidebar
+ if($('.post-content').length) {
+ var tocWrapElem = $('.post-content');
+ var tocOffset = '-10px';
+ } else {
+ var tocWrapElem = $('.post');
+ var tocOffset = '10px';
+ }
+
var sticky_waypoint = new Waypoint({
- element: $('.toc-wrap'),
+ element: tocWrapElem,
handler: function(direction) {
// pass it to our function to keep things cleaner in here
if(direction == 'down') {
@@ -200,7 +129,24 @@ $(document).ready(function(){
$('.toc-wrap').removeClass('stick');
}
},
- offset: '10px'
+ offset: tocOffset
+ });
+
+
+
+ var sticky_waypoint_footer = new Waypoint({
+ element: $('.footer'),
+ handler: function(direction) {
+ // pass it to our function to keep things cleaner in here
+ if(direction == 'down') {
+ $('.toc-wrap').addClass('stick-footer');
+ } else {
+ $('.toc-wrap').removeClass('stick-footer');
+ }
+ },
+ offset: function() {
+ return this.element.outerHeight(true);
+ }
});
}
}, // toc
diff --git a/patterns/index.html b/patterns/index.html
index d5c875290a1490f67dfa90628ca4466901059c4c..9a71a4b1debb823fb1e84dcd3c0f195abd8db6fd 100644
--- a/patterns/index.html
+++ b/patterns/index.html
@@ -91,7 +91,7 @@ description: An accessible widget & pattern library
</ul>
</section>
-<section id="video" class="article-section patterns-section" tabindex="0">
+<section id="videos" class="article-section patterns-section" tabindex="0">
<h3 class="article-section__title">Video Players</h3>
<ul class="article-section__content">
<li><a href="http://github.com/paypal/accessible-html5-video-player/">Accessible HTML5 Video Player</a></li>