navigation scroll + tweetlink

Author: Lisa P

css/main.css

@@ -13,6 +13,8 @@ body,html {
   font-size: 18px;
   text-align: center;
 }
+:focus {outline:none;}
+::-moz-focus-inner {border:0;}
 
 ul, ol {
   padding: 0;
@@ -26,7 +28,6 @@ h1, .h1 {
   font-size: 55px;
   font-weight: 800;
 }
-
 .header {
   height: auto;
   background-color: #ac2931;

index.html

@@ -27,27 +27,27 @@
             <div class="inner">
               <ul>
                 <li>
-                  <a href="">
+                  <a href="#pledge">
                     <i class="icon icon-question"></i>
                     <span>Take the pledge</span>
                   </a>
                 </li>
                 <li>
-                  <a href="">
+                  <a href="#about">
                     <i class="icon icon-ribbon"></i>
                     <span>Learn more</span>
                   </a>
                 </li>
                 <li>
-                  <a href="">
+                  <a href="https://twitter.com/share?url=http://ruby-white-ribbon.org/&lang=" class="external" target="_blank">
                     <i class="icon icon-twitter"></i>
                     <span>Tweet support</span>
                   </a>
                 </li>
               </ul>
             </div>
           </header>
-          <section class="section section--darkred" role="main">
+          <section class="section section--darkred" role="main" id="pledge">
             <div class="inner">
               <div class="logo-ribbon"></div>
               <h1>Ruby White Ribbon</h1>
@@ -62,7 +62,7 @@ <h1>Ruby White Ribbon</h1>
               <div class="logo-ruby"></div>
             </div>
           </section>
-          <section class="section section--lightred">
+          <section class="section section--lightred" id="about">
             <div class="inner">
               <h2 class="h1">What is Ruby White Ribbon?</h2>
               <div class="about">
@@ -81,9 +81,7 @@ <h2 class="h1">What is Ruby White Ribbon?</h2>
 
         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
         <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
-        <script src="js/plugins.js"></script>
         <script src="js/main.js"></script>
-
         <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
         <!-- <script>
               (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=

js/main.js

@@ -1 +1,30 @@
+// Avoid `console` errors in browsers that lack a console.
+(function() {
+  var method;
+  var noop = function () {};
+  var methods = [
+    'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
+    'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
+    'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
+    'timeStamp', 'trace', 'warn'
+  ];
+  var length = methods.length;
+  var console = (window.console = window.console || {});
 
+  while (length--) {
+    method = methods[length];
+
+    // Only stub undefined methods.
+    if (!console[method]) {
+      console[method] = noop;
+    }
+  }
+}());
+
+$(function() {
+  $('.header a:not(.external)').on('click', function(e) {
+    e.preventDefault();
+    var to = $(this).attr('href');
+    $('html, body').animate({scrollTop: $(to).offset().top }, '5000');
+  });
+})