Entity pages

static/js/modules/tablist.js

@@ -0,0 +1,87 @@
+/* Accessible tab interface
+/* Courtesy of http://heydonworks.com/practical_aria_examples/
+-----------------------------------------------------------------------------------------
+*/
+
+// The class for the container div
+
+var $container = '.tab-interface';
+
+// Change focus between tabs with arrow keys
+
+$('[role="tab"]').on('keydown', function(e) {
+
+  // define current, previous and next (possible) tabs
+
+  var $original = $(this);
+  var $prev = $(this).parents('li').prev().children('[role="tab"]');
+  var $next = $(this).parents('li').next().children('[role="tab"]');
+  var $target;
+
+  // find the direction (prev or next)
+
+  switch (e.keyCode) {
+    case 37:
+      $target = $prev;
+      break;
+    case 39:
+      $target = $next;
+      break;
+    default:
+      $target = false
+      break;
+  }
+
+  if ($target.length) {
+      $original.attr({
+        'tabindex' : '-1',
+        'aria-selected' : null
+      });
+      $target.attr({
+        'tabindex' : '0',
+        'aria-selected' : true
+      }).focus();
+  }
+
+  // Hide panels
+
+  $($container +' [role="tabpanel"]')
+    .attr('aria-hidden', 'true');
+
+  // Show panel which corresponds to target
+
+  $('#' + $(document.activeElement).attr('href').substring(1))
+    .attr('aria-hidden', null);
+
+});
+
+// Handle click on tab to show + focus tabpanel
+
+$('[role="tab"]').on('click', function(e) {
+
+  e.preventDefault();
+
+  // remove focusability [sic] and aria-selected
+
+  $('[role="tab"]').attr({
+    'tabindex': '-1',
+    'aria-selected' : null
+    });
+
+  // replace above on clicked tab
+
+  $(this).attr({
+    'aria-selected' : true,
+    'tabindex' : '0'
+  });
+
+  // Hide panels
+
+  $($container +' [role="tabpanel"]').attr('aria-hidden', 'true');
+
+  // show corresponding panel
+
+  $('#' + $(this).attr('href').substring(1))
+    .attr('aria-hidden', null);
+
+});

static/styles/_base/_typography.scss

@@ -26,7 +26,6 @@ h1 {
 h2 {
   @include font-size(3.6);
   font-weight: 300;
-  margin-bottom: 1rem;
 }
 
 h3 {
@@ -37,18 +36,20 @@ h3 {
 h4 {
   @include font-size(2.4);
   font-weight: 400;
+  margin-bottom: 1em;
 }
 
 h5 {
-  @include font-size(2.0);
+  @include font-size(1.8);
 }
 
 h6 {
-  @include font-size(1.8);
+  @include font-size(1.6);
 }
 
 p {
   margin: 0 0 ($base-line-height * .5);
+  -webkit-margin-before: 0;
 }
 
 a {
@@ -99,8 +100,13 @@ cite {
 
 .lead-text {
   @include font-size(1.8);
+  margin-top: 0;
 }
 
 .query {
   border-bottom: 1px solid $dark-gray;
 }
+
+.text-note {
+  font-style: italic;
+}

static/styles/_base/_variables.scss

@@ -12,8 +12,8 @@ $base-border-radius: em(4);
 
 // Colors
 $dark-gray: #515A61;
-$medium-gray: #D7D7D7;
-$light-gray: #F6F6F6;
+$medium-gray: #979797;
+$light-gray: #EFEFEF;
 $light-red: #FBE3E4;
 $light-yellow: #FFF6BF;
 $light-green: #E6EFC2;
@@ -38,6 +38,7 @@ $data-disbursement: #DB4857; // Salmon
 
 // UI Colors
 $meta-box-color: #FBFBFD;
+$committee-bg: #DCDCE0;
 
 // Background Color
 $base-background-color: white;

static/styles/_base/mixins/_mixins.scss

@@ -100,3 +100,23 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+
+// Dividers
+// Primary dividers are more divisive... secondar, less so
+
+@mixin primary-divider() {
+  border-bottom: 1px solid $dark-gray;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+@mixin secondary-divider() {
+  border-bottom: 1px dashed $medium-gray;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}