Updated WordPress Theme

contact_submit.php

@@ -0,0 +1,15 @@
+<?php
+
+if ($_POST)
+{
+	$mailTo = 'badges@mozillafoundation.org';
+	$mailFrom = $_POST['email'];
+	$subject = 'Mozilla Open Badges Community Contact Form';
+	$message = 'Name:'." \n".$_POST['name']."\n\n";
+	$message .= 'Message:'."\n".$_POST['message'];
+		
+	if (mail($mailTo, $subject, $message, "From: ".$mailFrom)) {
+		echo '<div class="thanks">Message Sent.</div>';
+	} 
+}
+?>

footer.php

@@ -1,5 +1,3 @@
-<?php if (IS_AJAX) return; ?>
-
 		<?php if (!!!get_post_meta($post->ID, 'hide_meta', true)):
 			if (is_active_sidebar('footer')): ?>
 				<aside id="meta">
@@ -19,7 +17,7 @@
 				</section>
 				<section>
 					<p class="support">
-						With support and<br>collaboration from
+						With support and collaboration from
 						<a href="http://www.macfound.org"><img alt="the MacArthur Foundation" src="<?php echo get_stylesheet_directory_uri(); ?>/media/images/partners/MacArthur_logo.png"></a>
 					</p>
 					<nav class="secondary">

functions.php

@@ -1,8 +1,5 @@
 <?php
 
-$headers = getallheaders();
-define('IS_AJAX', isset($headers['X-Requested-With']) && $headers['X-Requested-With'] === 'XMLHttpRequest');
-
 /*
  * Remove default WordPress header hooks
  */
@@ -23,128 +20,6 @@ remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);
 remove_filter('the_content', 'wpautop');
 
 
-/*
- * Add stylesheets and scripts required by Open Badges
- */
-
-function openbadges_styles () {
-	$theme = wp_get_theme();
-	$local = get_stylesheet_directory_uri() . '/media/css';
-
-	$styles = array(
-		'tabzilla' => array('src'=>'//www.mozilla.org/tabzilla/media/css/tabzilla.css', 'enqueue'=>true),
-		'core' => $local.'/core{.min}.css',
-		'fancybox' => array('src'=>$local.'/jquery.fancybox.css'),
-		'badges-101' => array('src'=>$local.'/badges-101.css'),
-	);
-
-	foreach ($styles as $style => $config) {
-		if (is_null($config)) {
-			wp_enqueue_style($style);
-		} else {
-			if (!is_array($config)) {
-				$config = array(
-					'src' => strval($config),
-					'version' => $theme->version,
-					'enqueue' => true,
-				);
-			}
-
-			$src = @$config['src'];
-			if (WP_DEBUG) {
-				$src = preg_replace('/{[^}]*}/', '', $src);
-			} else {
-				$src = preg_replace('/[{}]/', '', $src);
-			}
-
-			wp_register_style(
-				$style,
-				$src,
-				isset($config['dependencies']) ? (array) $config['dependencies'] : array(),
-				isset($config['version']) ? $config['version'] : null,
-				isset($config['media']) ? $config['media'] : 'all'
-			);
-
-			if (@$config['enqueue']) wp_enqueue_style($style);
-		}
-	}
-}
-
-function openbadges_scripts () {
-	$theme = wp_get_theme();
-	$local = get_stylesheet_directory_uri() . '/media/js';
-
-	$scripts = array(
-		'tabzilla' => array('src'=>'//www.mozilla.org/tabzilla/media/js/tabzilla.js', 'enqueue'=>true),
-		'fancybox' => array('src'=>$local.'/jquery.fancybox.js', 'dependencies'=>array('jquery')),
-		'slides' => array('src'=>$local.'/jquery.slides.min.js', 'dependencies'=>array('jquery')),
-		'quickbadge' => array('src'=>$local.'/quickbadge.js'),
-		'sha256' => array('src'=>$local.'/sha256.js'),
-		'issuer' => array('src'=>"http://beta.openbadges.org/issuer.js"),
-		'badges-101' => array('src'=>$local.'/badges-101.js', 'dependencies'=>array('fancybox','slides','quickbadge','sha256','issuer')),
-	);
-
-	foreach ($scripts as $script => $config) {
-		if (is_null($config)) {
-			wp_enqueue_script($script);
-		} else {
-			if (!is_array($config)) {
-				$config = array(
-					'src' => strval($config),
-					'version' => $theme->version,
-					'enqueue' => true,
-				);
-			}
-
-			$src = @$config['src'];
-			if (WP_DEBUG) {
-				$src = preg_replace('/{[^}]*}/', '', $src);
-			} else {
-				$src = preg_replace('/[{}]/', '', $src);
-			}
-
-			wp_register_script(
-				$script,
-				$src,
-				isset($config['dependencies']) ? (array) $config['dependencies'] : array(),
-				isset($config['version']) ? $config['version'] : null,
-				isset($config['top']) ? !!!$config['top'] : true
-			);
-
-			if (@$config['enqueue']) wp_enqueue_script($script);
-		}
-	}
-}
-
-add_action('wp_enqueue_scripts', 'openbadges_styles');
-add_action('wp_enqueue_scripts', 'openbadges_scripts');
-
-function openbadges_check_content_for_requirements ($content) {
-	$map = array(
-		'quickstart' => array(
-			'styles' => array('fancybox','badges-101'),
-			'scripts' => array('badges-101'),
-		),
-		'fancybox' => array(
-			'styles' => array('fancybox'),
-			'scripts' => array('fancybox'),
-		)
-	);
-
-	foreach ($map as $search => $dependencies) {
-		if (preg_match('/<\w+ [^>]*class=(["\'])(?:[^\1]+ +| *)?'.preg_quote($search).'(?:[^\1]+ +| *)?\1[^>]*>/', $content)) {
-			$styles = (array) @$dependencies['styles'];
-			array_walk($styles, 'wp_enqueue_style');
-			$scripts = (array) @$dependencies['scripts'];
-			array_walk($scripts, 'wp_enqueue_script');
-		}
-	}
-
-	return $content;
-}
-
-add_filter('the_content', 'openbadges_check_content_for_requirements');
-
 
 /*
  * Clean up WordPress generated tags, which have a propensity to use single quotes!
@@ -200,4 +75,27 @@ function openbadges_admin_init () {
 	require_once(dirname(__FILE__).'/admin/init.php');
 }
 
-add_action('admin_init', 'openbadges_admin_init');
+add_action('admin_init', 'openbadges_admin_init');
+
+
+
+/*
+ * Load Scripts
+ */
+add_action( 'wp_enqueue_scripts', 'load_scripts' );
+function load_scripts() {
+	wp_enqueue_script('tabzilla', '//www.mozilla.org/tabzilla/media/js/tabzilla.js', '','',true);
+	wp_deregister_script( 'jquery' );
+    wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js', false, '1.9.1');
+    wp_enqueue_script( 'jquery' );
+    wp_enqueue_script('global-logic', get_template_directory_uri() . '/media/js/global.js', 'jquery','',true);
+	wp_register_style( 'core-styles', get_template_directory_uri() . '/media/css/core.css', array(), '1.1', 'all' );
+  	wp_register_style( 'tabzilla-styles', 'http://mozorg.cdn.mozilla.net/media/css/tabzilla-min.css', array(), '1.0', 'all' );
+	wp_enqueue_style( 'core-styles' );
+	wp_enqueue_style( 'tabzilla-styles' );
+}
+
+
+
+
+?>

header.php

@@ -1,4 +1,4 @@
-<?php if (IS_AJAX) return; ?>
+
 <!DOCTYPE html>
 <html <?php language_attributes(); ?>>
 	<head>
@@ -7,6 +7,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<title><?php wp_title('|', true, 'right'); bloginfo('name'); ?></title>
 		<!--[if lt IE 9]><script src="./media/js/html5shiv.js"></script><![endif]-->
+		
 		<?php wp_head(); ?>
 	</head>
 	<body <?php body_class(); ?>>

media/css/core.css

@@ -29,7 +29,7 @@ body {
 }
 a,
 label.link {
-  color: #b1cf37;
+  color: #5fc9e5;
   cursor: pointer;
   text-decoration: underline;
 }
@@ -185,10 +185,20 @@ h4 {
   margin: 0;
   padding: 28px 0;
 }
+#footer .support {
+  font-size: .8em;
+  width: 150px;
+  position: relative;
+}
+#footer .support img {
+  position: absolute;
+  right: -100px;
+  top: 15px;
+}
 #home,
 #footer .footnote a {
   display: block;
-  width: 300px;
+  width: 474px;
   height: 80px;
   background: url("../images/logo.png");
   text-indent: -100%;
@@ -217,6 +227,13 @@ h4 {
   float: left;
   margin-left: 1.5em;
 }
+#contact .error {
+  color: red;
+  margin-bottom: 15px;
+}
+#navigation {
+  margin-right: 20px;
+}
 @media all and (max-width: 1000px) {
   #header nav,
   #footer nav {
@@ -247,20 +264,22 @@ div[role=main] h1 {
   font-size: 2.5em;
   text-align: center;
   color: #757575;
+  font-weight: normal;
 }
 div[role=main] h2 {
-  font-size: 1.8em;
+  font-size: 2em;
   text-align: center;
   margin-top: 0;
-  margin-bottom: 20px;
+  margin-bottom: 5px;
-  font-weight: bold;
+  font-weight: normal;
   padding-top: 140px;
 }
 div[role=main] p.subheading {
-  max-width: 400px;
+  max-width: 450px;
   text-align: center;
   margin: 0 auto;
   margin-bottom: 40px;
+  font-size: 1.4em;
 }
 div[role=main] nav {
   max-width: 700px;
@@ -268,13 +287,13 @@ div[role=main] nav {
 }
 div[role=main] nav a {
   background: #efefef;
-  font-weight: bold;
+  font-weight: normal;
   padding-top: 140px;
   padding-bottom: 10px;
   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   border-radius: 7px;
-  width: 30%;
+  width: 29%;
   margin-right: 1%;
   margin-left: 1%;
   display: inline-block;
@@ -282,6 +301,35 @@ div[role=main] nav a {
   text-align: center;
   color: #221f20;
   font-size: 32px;
+  -webkit-transition-property: all, -webkit-transform;
+  -webkit-transition-duration: 0.2s, 0.2s;
+  -moz-transition-property: all, -moz-transform;
+  -moz-transition-duration: 0.2s, 0.2s;
+  -ms-transition-property: all, -ms-transform;
+  -ms-transition-duration: 0.2s, 0.2s;
+  -o-transition-property: all, -o-transform;
+  -o-transition-duration: 0.2s, 0.2s;
+  transition-property: all, transform;
+  transition-duration: 0.2s, 0.2s;
+  animation-timing-function: ease-out;
+  -moz-animation-timing-function: ease-out;
+  -webkit-animation-timing-function: ease-out;
+  -o-animation-timing-function: ease-out;
+  border: 5px solid rgba(0, 0, 0, 0);
+}
+div[role=main] nav a:hover {
+  -webkit-transform: scale(1.05);
+  transform: scale(1.05);
+  -moz-transform: scale(1.05);
+}
+div[role=main] nav a.learn:hover {
+  border: 5px solid #5fc9e5;
+}
+div[role=main] nav a.design:hover {
+  border: 5px solid #b1cf37;
+}
+div[role=main] nav a.code:hover {
+  border: 5px solid #f48123;
 }
 div[role=main] nav a span {
   display: block;
@@ -511,6 +559,30 @@ div[role=main] #learn ul.links a span {
 div[role=main] #learn ul.links a:hover {
   border: 2px solid #5fc9e5;
 }
+div[role=main] #learn a.top {
+  background-image: url('../images/top_blue.png');
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-attachment: scroll;
+}
+@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
+  div[role=main] #learn a.top {
+    background-image: url('../images/top_blue@2x.png');
+    background-size: 52px 25px;
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
+  div[role=main] #learn a.top {
+    background-image: url('../images/top_blue@2x.png');
+    background-size: 52px 25px;
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+  }
+}
 div[role=main] #design {
   border-top: 6px solid #b1cf37;
 }
@@ -589,6 +661,30 @@ div[role=main] #design ul.links a span {
 div[role=main] #design ul.links a:hover {
   border: 2px solid #b1cf37;
 }
+div[role=main] #design a.top {
+  background-image: url('../images/top_green.png');
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-attachment: scroll;
+}
+@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
+  div[role=main] #design a.top {
+    background-image: url('../images/top_green@2x.png');
+    background-size: 52px 25px;
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
+  div[role=main] #design a.top {
+    background-image: url('../images/top_green@2x.png');
+    background-size: 52px 25px;
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+  }
+}
 div[role=main] #code {
   border-top: 6px solid #f48123;
 }
@@ -667,17 +763,163 @@ div[role=main] #code ul.links a span {
 div[role=main] #code ul.links a:hover {
   border: 2px solid #f48123;
 }
+div[role=main] #code a.top {
+  background-image: url('../images/top_orange.png');
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-attachment: scroll;
+}
+@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
+  div[role=main] #code a.top {
+    background-image: url('../images/top_orange@2x.png');
+    background-size: 52px 25px;
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
+  div[role=main] #code a.top {
+    background-image: url('../images/top_orange@2x.png');
+    background-size: 52px 25px;
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+  }
+}
 div[role=main] #news {
-  border-top: 6px solid #58585a;
+  border-top: 6px solid #073a5a;
+}
+div[role=main] #news:after {
+  clear: left;
+}
+div[role=main] #news a {
+  color: #073a5a;
 }
 div[role=main] #news h2 {
   padding-top: 0;
 }
+div[role=main] #news h3 {
+  padding-top: 0;
+  margin-top: 0;
+  margin-bottom: 15px;
+  border-bottom: 1px solid black;
+  padding-bottom: 15px;
+  font-size: 1.6em;
+}
+div[role=main] #news a.top {
+  background-image: url('../images/top_navy.png');
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  background-attachment: scroll;
+}
+@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
+  div[role=main] #news a.top {
+    background-image: url('../images/top_navy@2x.png');
+    background-size: 52px 25px;
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+  }
+}
+@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) {
+  div[role=main] #news a.top {
+    background-image: url('../images/top_navy@2x.png');
+    background-size: 52px 25px;
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    background-attachment: scroll;
+  }
+}
+div[role=main] #news .blog {
+  -webkit-box-shadow: 3px 5px 15px 5px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 3px 5px 15px 5px rgba(0, 0, 0, 0.2);
+  box-shadow: 3px 5px 15px 5px rgba(0, 0, 0, 0.2);
+  padding: 40px;
+  width: 500px;
+  float: left;
+  margin-right: 30px;
+}
+div[role=main] #news .blog ul {
+  margin: 0;
+  padding: 0;
+}
+div[role=main] #news .blog li {
+  list-style: none;
+  border-bottom: 1px solid black;
+  padding-bottom: 20px;
+  padding-top: 20px;
+  padding-left: 150px;
+  position: relative;
+  font-size: .9em;
+}
+div[role=main] #news .blog li a {
+  font-size: 1.1em;
+}
+div[role=main] #news .blog li:first-child {
+  padding-top: 0;
+}
+div[role=main] #news .blog li:first-child small {
+  top: 0;
+}
+div[role=main] #news .blog li:last-child {
+  border-bottom: 0;
+  padding-bottom: 0;
+}
+div[role=main] #news .blog li small {
+  position: absolute;
+  left: 0;
+  top: 20px;
+  font-weight: bold;
+  font-size: .9em;
+  width: 100px;
+  text-transform: uppercase;
+  padding-right: 20px;
+}
+div[role=main] #news .tweets {
+  -webkit-box-shadow: 3px 5px 15px 5px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 3px 5px 15px 5px rgba(0, 0, 0, 0.2);
+  box-shadow: 3px 5px 15px 5px rgba(0, 0, 0, 0.2);
+  padding: 40px;
+  width: 250px;
+  float: left;
+}
+div[role=main] #news .tweets ul {
+  margin: 0;
+  padding: 0;
+}
+div[role=main] #news .tweets li {
+  list-style: none;
+  border-bottom: 1px solid black;
+  padding-bottom: 20px;
+  padding-top: 20px;
+  font-size: .9em;
+}
+div[role=main] #news .tweets li:first-child {
+  padding-top: 0;
+}
+div[role=main] #news .tweets li:first-child small {
+  top: 0;
+}
+div[role=main] #news .tweets li:last-child {
+  border-bottom: 0;
+  padding-bottom: 0;
+}
 div[role=main] section {
   background: #FFFFFF;
   padding: 50px 0 70px 0;
+  position: relative;
+}
+div[role=main] section a.top {
+  position: absolute;
+  display: block;
+  width: 104px;
+  height: 50px;
+  top: 0;
+  right: 0;
 }
 div[role=main] section:nth-child(even) {
+  background-image: url(../images/fabric_1.png);
   background-image: url('../images/fabric_1.png');
   background-position: top left;
   background-repeat: repeat;
@@ -709,7 +951,7 @@ div[role=main] ul.links {
 div[role=main] ul.links li {
   list-style: none;
   display: inline-block;
-  margin: 0 10px 15px 10px;
+  margin: 0 4px 15px 3px;
   padding: 0;
   width: 300px;
   font-size: .9em;
@@ -720,6 +962,7 @@ div[role=main] ul.links li a {
   text-align: left;
   display: block;
   color: #221f20;
+  background: rgba(0, 0, 0, 0.1);
   text-decoration: none;
   padding: 10px 15px 10px 40px;
   position: relative;
@@ -741,6 +984,11 @@ div[role=main] ul.links li a {
   -moz-border-radius: 5px;
   border-radius: 5px;
 }
+div[role=main] ul.links li a:hover {
+  -webkit-transform: scale(1.02);
+  transform: scale(1.02);
+  -moz-transform: scale(1.02);
+}
 div[role=main] ul.links li a span {
   display: block;
   width: 6px;
@@ -753,6 +1001,16 @@ div[role=main] .video {
   margin: 0 auto;
   text-align: center;
 }
+div[role=main] .column50 {
+  width: 46%;
+  display: inline-block;
+}
+div[role=main] .column50:nth-child(even) {
+  padding-left: 3%;
+}
+div[role=main] .column50:nth-child(odd) {
+  padding-right: 3%;
+}
 .embellished #content {
   background-image: url("../images/content-background.png");
   border-bottom: solid 40px transparent;
@@ -1035,12 +1293,12 @@ ol.promo-list p {
 #meta .twitter-follow-button {
   margin-top: 10px;
 }
-#meta #text-3 {
+#meta .widget:nth-child(2) {
-  width: 20%;
-}
-#meta #text-2 {
   width: 30%;
 }
+#meta .widget:nth-child(3) {
+  width: 20%;
+}
 #meta h2 {
   font-family: "Open Sans", sans-serif;
   color: #9C9C9C;
@@ -1098,4 +1356,83 @@ ol.promo-list p {
     margin: 0 auto;
     padding-bottom: 0;
   }
+  #home,
+  #footer .footnote a {
+    margin: 0 auto;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    width: 300px;
+    height: 50px;
+  }
+  #footer .footnote a {
+    background-position: 0 -50px;
+  }
+  div[role=main] h1 {
+    font-size: 1.8em;
+  }
+  div[role=main] .column50 {
+    width: 100%;
+    padding: 0 !important;
+  }
+  div[role=main] ul.links {
+    text-align: center;
+  }
+  div[role=main] #news .blog li {
+    padding-left: 0;
+  }
+  div[role=main] #news .blog li small {
+    position: relative;
+    display: block;
+  }
+  div[role=main] nav {
+    text-align: center;
+  }
+  div[role=main] nav a {
+    width: 120px;
+    margin-bottom: 20px;
+    background-size: 60%;
+    font-size: 1.1em;
+    padding-top: 140px;
+  }
+  div[role=main] .video iframe {
+    width: 100%;
+  }
+  div[role=main] #news .blog,
+  div[role=main] #news .tweets {
+    width: 70%;
+    float: none;
+  }
+  div[role=main] #news .blog {
+    margin-bottom: 30px;
+  }
+  div[role=main] ul.links {
+    margin: 0;
+    padding: 0;
+  }
+  div[role=main] ul.links li {
+    display: block;
+    width: 80%;
+    padding-right: 0;
+    padding-left: 0;
+    margin-left: 0;
+    margin-right: 0;
+  }
+  div[role=main] ul.links li a {
+    width: 100%;
+  }
+}
+.clear:before,
+.clear:after {
+  content: " ";
+  /* 1 */
+
+  display: table;
+  /* 2 */
+
+}
+.clear:after {
+  clear: both;
+}
+.clear {
+  *zoom: 1;
 }

media/js/global.js

@@ -0,0 +1,53 @@
+$(function() {
+
+  function IsEmail(email) {
+    var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
+    return regex.test(email);
+  }
+
+  $('.error').hide();
+
+  $("#contact button").click(function() {
+		// validate and process form
+		// first hide any error messages
+    $('.error').text('').hide();
+		
+	  var name = $("#contact #name").val();
+		if (name == "") {
+      $(".error").text('Please enter your name.').show();
+      $("#contact input#name").focus();
+      return false;
+    }
+		var email = $("#contact #email").val();
+		if(!IsEmail(email)) {
+      $(".error").text('Your email is not valid.').show();
+      $("#email").focus();
+      return false;
+    }
+		var message = $("#contact #message").val();
+		if (message == "") {
+      $(".error").text('Please enter a message.').show();
+      $("#message").focus();
+      return false;
+    }
+		
+	var dataString = 'name='+ name + '&email=' + email + '&message=' + message;
+		
+	$.ajax({
+      type: "POST",
+      url: "wp-content/themes/open_badges_community/contact_submit.php",
+      data: dataString,
+      success: function() {
+        $('#contact').html("<div id='message'></div>");
+        $('#message').html("<h4>Contact Form Submitted!</h4>")
+        .append("<p>Thank you for reaching out.</p>")
+        .hide()
+        .fadeIn(1500, function() {
+          $('#message');
+        });
+      }
+     });
+    return false;
+	}); // end contact logic
+
+}); // end doc ready

media/less/_components.less

@@ -304,12 +304,12 @@ ul, ol {
 		margin-top: 10px;
 	}
 
-	#text-3 {
+	.widget:nth-child(2) {
-		width: 20%;
+		width: 30%;
 	}
 
-	#text-2 {
+	.widget:nth-child(3) {
-		width: 30%;
+		width: 20%;
 	}
 
 	h2 {
@@ -378,4 +378,116 @@ ul, ol {
 			padding-bottom: 0;
 		}
 	}
+
+	#home, #footer .footnote a {
+
+		margin: 0 auto;
+		background-repeat: no-repeat;
+		background-size: 100%;
+		width: 300px;
+		height: 50px;
+	}
+
+	#footer .footnote a {
+		background-position: 0 -50px;
+	}
+
+	div[role=main] {
+		
+		h1 {
+			font-size: 1.8em;
+		}
+
+		.column50 {
+			width: 100%;
+			padding: 0 !important;
+		}
+
+		ul.links {
+			text-align: center;
+		}
+
+		#news {
+			.blog li {
+
+				padding-left: 0;
+
+				small {
+					position: relative;
+					display: block;
+				}
+			}
+		}
+
+		nav {
+			text-align: center;
+			a {
+				
+				width: 120px;
+				margin-bottom: 20px;
+				background-size: 60%;
+				font-size: 1.1em;
+				padding-top: 140px;
+			}
+		}
+
+
+
+		.video iframe {
+			width: 100%;
+		}
+
+		#news {
+			.blog, .tweets {
+				width: 70%;
+				float: none;
+			}
+
+			.blog {
+				margin-bottom: 30px;
+			}
+		}
+
+		ul.links {
+
+			margin: 0;
+			padding: 0;
+		
+
+			li {
+
+				display: block;
+				width: 80%;
+				padding-right: 0;
+				padding-left: 0;
+				margin-left: 0;
+				margin-right: 0;
+
+				a {
+					width: 100%;
+				}
+			}
+
+		}
+	
+	}
+
+	
+
+}
+
+// clearfix
+
+.clear:before,
+.clear:after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+}
+
+.clear:after {
+    clear: both;
+}
+
+.clear {
+    *zoom: 1;
 }

media/less/_reset.less

@@ -8,7 +8,7 @@ body {
 
 a,
 label.link {
-	color: @ob-green;
+	color: @ob-blue;
 	cursor: pointer;
 	text-decoration: underline;
 }

media/less/_variables.less

@@ -7,6 +7,7 @@
 @ob-blue: #5FC9E5;
 @ob-green: #B1CF37;
 @ob-orange: #F48123;
+@ob-navy: #073a5a;
 
 @pale-blue: #5FC9E5;
 

media/less/core.less

@@ -13,6 +13,8 @@
 
 /* ===[ Core ]=============================================================== */
 
+
+
 body {
 	background: #FFFFFF;
 	font-family: @light-font;
@@ -153,10 +155,22 @@ h4 {
 	padding: 28px 0;
 }
 
+#footer .support {
+	font-size: .8em;
+	width: 150px;
+	position: relative;
+
+	img {
+		position: absolute;
+		right: -100px;
+		top: 15px;
+	}
+}
+
 #home,
 #footer .footnote a {
 	display: block;
-	width: 300px;
+	width: 474px;
 	height: 80px;
 	background: url("../images/logo.png");
 	text-indent: -100%;
@@ -165,10 +179,6 @@ h4 {
 }
 
 
-
-
-
-
  
 
 /* ---[ Navigation ]--------------------------------------------------------- */
@@ -196,6 +206,17 @@ h4 {
 	}
 }
 
+#contact {
+	.error {
+		color: red;
+		margin-bottom: 15px;
+	}
+}
+
+#navigation {
+	margin-right: 20px;
+}
+
 @media all and (max-width: @full-content-width) {
 	#header, #footer {
 		nav {
@@ -233,22 +254,25 @@ div[role=main]{
 		font-size: 2.5em;
 		text-align: center;
 		color: #757575;
+		font-weight: normal;
 	}
 
 	h2 {
-		font-size: 1.8em;
+		font-size: 2em;
+		font-weight: normal;
 		text-align: center;
 		margin-top: 0;
-		margin-bottom: 20px;
+		margin-bottom: 5px;
-		font-weight: bold;
+		font-weight: normal;
 		padding-top: 140px;
 	}
 
 	p.subheading {
-		max-width: 400px;
+		max-width: 450px;
 		text-align: center;
 		margin: 0 auto;
 		margin-bottom: 40px;
+		font-size: 1.4em;
 	}
 
 	nav {
@@ -257,11 +281,11 @@ div[role=main]{
 
 		a {
 			background: #efefef;
-			font-weight: bold;
+			font-weight: normal;
 			padding-top: 140px;
 			padding-bottom: 10px;
 			.border-radius(7px);
-			width: 30%;
+			width: 29%;
 			margin-right: 1%;
 			margin-left: 1%;
 			display: inline-block;
@@ -269,6 +293,40 @@ div[role=main]{
 			text-align: center;
 			color: @main-text-color;
 			font-size: 32px;
+			-webkit-transition-property: all, 
+		  	-webkit-transform;
+		  	-webkit-transition-duration: 0.2s, 0.2s;
+		    -moz-transition-property: all, -moz-transform;
+		    -moz-transition-duration: 0.2s, 0.2s;
+		    -ms-transition-property: all, -ms-transform;
+		    -ms-transition-duration: 0.2s, 0.2s;
+			-o-transition-property: all, -o-transform;
+			-o-transition-duration: 0.2s, 0.2s;
+			transition-property: all, transform;
+			transition-duration: 0.2s, 0.2s;
+			animation-timing-function:ease-out;
+			-moz-animation-timing-function:ease-out;
+			-webkit-animation-timing-function:ease-out;
+			-o-animation-timing-function:ease-out;
+			border: 5px solid rgba(0,0,0,0);
+
+			&:hover {
+				-webkit-transform: scale(1.05);
+				transform: scale(1.05);
+				-moz-transform: scale(1.05);
+			}
+
+			&.learn:hover {
+				border: 5px solid @ob-blue;
+			}
+
+			&.design:hover {
+				border: 5px solid @ob-green;
+			}
+
+			&.code:hover {
+				border: 5px solid @ob-orange;
+			}
 
 			span {
 				display: block;
@@ -321,6 +379,10 @@ div[role=main]{
 				border: 2px solid @ob-blue;
 			}
 		}
+
+		a.top {
+			.at2x('../images/top_blue.png', 52px, 25px, 0, 0, no-repeat, scroll);
+		}
 	}
 
 	#design {
@@ -341,6 +403,10 @@ div[role=main]{
 				border: 2px solid @ob-green;
 			}
 		}
+
+		a.top {
+			.at2x('../images/top_green.png', 52px, 25px, 0, 0, no-repeat, scroll);
+		}
 	}
 
 	#code {
@@ -361,22 +427,152 @@ div[role=main]{
 				border: 2px solid @ob-orange;
 			}
 		}
+
+		a.top {
+			.at2x('../images/top_orange.png', 52px, 25px, 0, 0, no-repeat, scroll);
+		}
 	}
 
 	#news {
-		border-top: 6px solid #58585a;
+
+
+
+		&:after{
+			clear: left;
+		}
+
+		border-top: 6px solid @ob-navy;
+
+		a {
+			color: @ob-navy;
+		}
 
 		h2 {
 			padding-top: 0;
 		}
+
+		h3 {
+			padding-top: 0;
+			margin-top: 0;
+			margin-bottom: 15px;
+			border-bottom: 1px solid black;
+			padding-bottom: 15px;
+			font-size: 1.6em;
+		}
+
+		a.top {
+			.at2x('../images/top_navy.png', 52px, 25px, 0, 0, no-repeat, scroll);
+		}
+
+		.blog {
+
+			-webkit-box-shadow: 3px 5px 15px 5px rgba(0,0, 0, 0.2);
+			-moz-box-shadow: 3px 5px 15px 5px rgba(0,0, 0, 0.2);
+			box-shadow: 3px 5px 15px 5px rgba(0, 0, 0, 0.2);
+			padding: 40px;
+			width: 500px;
+			float: left;
+			margin-right: 30px;
+
+			ul {
+				margin: 0;
+				padding: 0;
+			}
+
+			li {
+				list-style: none;
+				border-bottom: 1px solid black;
+				padding-bottom: 20px;
+				padding-top: 20px;
+				padding-left: 150px;
+				position: relative;
+				font-size: .9em;
+
+				a {
+					font-size: 1.1em;
+				}
+
+				&:first-child {
+					padding-top: 0;
+
+					small {
+						top: 0;
+					}
+				}
+
+				&:last-child{
+					border-bottom: 0;
+					padding-bottom: 0;
+				}
+
+				small {
+					position: absolute;
+					left: 0;
+					top: 20px;
+					font-weight: bold;
+					font-size: .9em;
+					width: 100px;
+					text-transform: uppercase;
+					padding-right: 20px;
+				}
+			}
+		}
+
+		.tweets {
+			-webkit-box-shadow: 3px 5px 15px 5px rgba(0,0, 0, 0.2);
+			-moz-box-shadow: 3px 5px 15px 5px rgba(0,0, 0, 0.2);
+			box-shadow: 3px 5px 15px 5px rgba(0, 0, 0, 0.2);
+			padding: 40px;
+			width: 250px;
+			float: left;
+
+			ul {
+				margin: 0;
+				padding: 0;
+			}
+
+			li {
+				list-style: none;
+				border-bottom: 1px solid black;
+				padding-bottom: 20px;
+				padding-top: 20px;
+				font-size: .9em;
+
+				&:first-child {
+					padding-top: 0;
+
+					small {
+						top: 0;
+					}
+				}
+
+				&:last-child{
+					border-bottom: 0;
+					padding-bottom: 0;
+				}
+			}
+
+
+		}
 	}
 
 	section {
 		background: #FFFFFF;
 		padding: 50px 0 70px 0;
+		position: relative;
+
+		a.top {
+			position: absolute;
+			display: block;
+			width: 104px;
+			height: 50px;
+			top: 0;
+			right: 0;
+		}
 	}
 
 	section:nth-child(even) {
+		background-image: url(../images/fabric_1.png);
 		.at2x('../images/fabric_1.png', 400px, 400px, top, left, repeat, scroll);
 	}
 
@@ -388,7 +584,7 @@ div[role=main]{
 		li {
 			list-style: none;
 			display: inline-block;
-			margin: 0 10px 15px 10px;
+			margin: 0 4px 15px 3px;
 			padding: 0;
 			width: 300px;
 			font-size: .9em;
@@ -399,6 +595,7 @@ div[role=main]{
 				text-align: left;
 				display: block;
 				color: @main-text-color;
+				background: rgba(0,0,0,0.1);
 				text-decoration: none;
 				padding: 10px 15px 10px 40px;
 				position: relative;
@@ -419,7 +616,11 @@ div[role=main]{
 				-o-animation-timing-function:ease-out;
 				.border-radius(5px);
 
-
+				&:hover{
+					-webkit-transform: scale(1.02);
+					transform: scale(1.02);
+					-moz-transform: scale(1.02);
+				}
 				
 
 				span {
@@ -439,7 +640,21 @@ div[role=main]{
 		text-align: center;
 	}
 
-}
+	.column50 {
+		width: 46%;
+		display: inline-block;
+
+		&:nth-child(even) {
+			padding-left: 3%;
+		}
+
+		&:nth-child(odd) {
+			padding-right: 3%;
+		}
+	}
+
+
+} // end div role main
 
 
 

style.css

@@ -1,13 +1,13 @@
-/*
+/*
-Theme Name: Open Badges Community
+Theme Name: Open Badges Community
-Author: Mozilla Foundation & Ocupop
+Author: Mozilla Foundation & Ocupop
-Author URI: http://mozilla.org/foundation
+Author URI: http://mozilla.org/foundation
-Version: 1.0
+Version: 1.0
-Description: TO DO
+Description: TO DO
-License: GNU General Public License v2 or later
+License: GNU General Public License v2 or later
-License URI: http://www.gnu.org/licenses/gpl-2.0.html
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
-Text Domain: openbadges
+Text Domain: openbadges
-
+
-This theme, like WordPress, is licensed under the GPL.
+This theme, like WordPress, is licensed under the GPL.
-Use it to make something cool, have fun, and share what you've learned with others.
+Use it to make something cool, have fun, and share what you've learned with others.
-*/
+*/

template-splash.php

@@ -10,7 +10,7 @@ if (have_posts()) {
 		the_content();
 	}
 }?>
-<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+
 <script type="text/javascript">
 	$(document).ready(function(){
 		// if url starts with a hash, animate scroll