Added keypress, lots of responsive support

Amamatthew · Feb 9, 2013 · b30f1d6 · b30f1d6
1 parent 8b6b742
commit b30f1d6
Show file tree

Hide file tree

Showing 9 changed files with 199 additions and 51 deletions.
diff --git a/footer.php b/footer.php
@@ -24,6 +24,8 @@
 <!-- BoilerStrap JavaScript Goes Here -->
 <script src="http://code.jquery.com/jquery.js"></script>
 <script src="<?php echo get_template_directory_uri(); ?>/js/bootstrap.min.js" type="text/javascript"></script>
+<script src="<?php echo get_template_directory_uri(); ?>/js/keypress-1.0.1.js" type="text/javascript"></script>
+<script src="<?php echo get_template_directory_uri(); ?>/js/boilerstrap.js" type="text/javascript"></script>
 
 </body>
 </html>
diff --git a/header.php b/header.php
@@ -37,27 +37,45 @@
 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/font-awesome.min.css" type="text/css" media="all" />
 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/typography.css" type="text/css" media="all" />
 <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/custom.css" type="text/css" media="all" />
+<?php if ( is_admin_bar_showing() ) {?>
+	<style>
+		#site-navigation { top: 28px !important; }
+	</style>
+<?php }?>
 
 </head>
 
 <body <?php body_class(); ?>>
-<div id="page" class="hfeed site">
-	<header id="masthead" class="site-header" role="banner">
-		<hgroup>
-			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
-			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
-		</hgroup>
 
-		<nav id="site-navigation" class="main-navigation" role="navigation">
-			<h3 class="menu-toggle"><?php _e( 'Menu', 'boilerstrap' ); ?></h3>
-			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'boilerstrap' ); ?>"><?php _e( 'Skip to content', 'boilerstrap' ); ?></a>
-			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
-		</nav><!-- #site-navigation -->
+<div id="site-navigation" class="navbar navbar-fixed-top" role="navigation">
+  <div class="navbar-inner">
+    <div class="container">
+      <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+        <i class="icon-chevron-down"></i>
+      </button>
+      <a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="brand" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
+      <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'boilerstrap' ); ?>"><?php _e( 'Skip to content', 'boilerstrap' ); ?></a>
+      <div class="nav-collapse collapse">
+	  	<?php wp_nav_menu( array( 'theme_location' => 'primary', 'container' => false, 'menu_class' => 'nav' ) ); ?>
+			<form method="get" id="searchform" class="navbar-search pull-right" action="<?php bloginfo('home'); ?>/">
+			<div>
+				<input type="text" name="s" id="s" class="search-query" placeholder="Search" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
+			</div>
+			</form>
+
+      </div><!--/.nav-collapse -->
+    </div>
+  </div>
+</div>
 
+<div id="page" class="hfeed site container">
+	<header id="masthead" class="site-header" role="banner">
+
 		<?php $header_image = get_header_image();
 		if ( ! empty( $header_image ) ) : ?>
 			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
 		<?php endif; ?>
 	</header><!-- #masthead -->
 
-	<div id="main" class="wrapper">
+	<div id="main" class="wrapper">
+<div class="row-fluid">
diff --git a/index.php b/index.php
@@ -16,7 +16,7 @@
 
 get_header(); ?>
 
-	<div id="primary" class="site-content">
+	<div id="primary" class="site-content span8">
 		<div id="content" role="main">
 		<?php if ( have_posts() ) : ?>
 

diff --git a/js/boilerstrap.js b/js/boilerstrap.js
@@ -0,0 +1,11 @@
+//
+
+$( document ).ready(function() {
+
+
+keypress.counting_combo("meta f", function(event) {
+event.preventDefault();
+$(".search-query:text:visible:last").focus();
+});
+
+});
diff --git a/js/keypress-1.0.1.js b/js/keypress-1.0.1.js
diff --git a/page.php b/page.php
@@ -14,7 +14,7 @@
 
 get_header(); ?>
 
-	<div id="primary" class="site-content">
+	<div id="primary" class="site-content span8">
 		<div id="content" role="main">
 
 			<?php while ( have_posts() ) : the_post(); ?>
@@ -26,4 +26,5 @@
 	</div><!-- #primary -->
 
 <?php get_sidebar(); ?>
+</div>
 <?php get_footer(); ?>
diff --git a/sidebar.php b/sidebar.php
@@ -5,13 +5,13 @@
  * If no active widgets in sidebar, let's hide it completely.
  *
  * @package WordPress
- * @subpackage Twenty_Twelve
+ * @subpackage boilerstrap
  * @since Twenty Twelve 1.0
  */
 ?>
 
 	<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
-		<div id="secondary" class="widget-area" role="complementary">
+		<div id="secondary" class="widget-area span3 offset1" role="complementary">
 			<?php dynamic_sidebar( 'sidebar-1' ); ?>
 		</div><!-- #secondary -->
-	<?php endif; ?>
+	<?php endif; ?>
diff --git a/single.php b/single.php
@@ -9,7 +9,8 @@
 
 get_header(); ?>
 
-	<div id="primary" class="site-content">
+
+	<div id="primary" class="site-content span8">
 		<div id="content" role="main">
 
 			<?php while ( have_posts() ) : the_post(); ?>

diff --git a/style.css b/style.css
@@ -233,6 +233,11 @@ input[type="color"] {
 	padding: 0;
 }
 
+#secondary input {
+	margin-bottom: 0px;
+	padding: 0.428571429rem 0.714285714rem;
+}
+
 /* Buttons */
 .menu-toggle,
 input[type="submit"],
@@ -444,6 +449,41 @@ img.wp-smiley,
 	margin: 3.428571429rem 0;
 }
 
+.navbar .nav li.current-menu-item a,
+.navbar .nav li.current-menu-item a:hover,
+.navbar .nav li.current-menu-item a:focus {
+  color: #ffffff;
+  background-color: transparent;
+}
+
+.navbar-inverse .nav li.current-menu-item a,
+.navbar-inverse .nav li.current-menu-item a:hover,
+.navbar-inverse .nav li.current-menu-item a:focus {
+  color: #ffffff;
+  background-color: #111111;
+}
+
+.navbar .nav li.current_page_item a,
+.navbar .nav li.current-menu-item a,
+.navbar .nav li.current-menu-item a:hover,
+.navbar .nav li.current-menu-item a:focus {
+  color: #555555;
+  text-decoration: none;
+  background-color: #e5e5e5;
+  -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
+	-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
+	box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
+}
+
+.navbar .btn,
+.navbar .btn-group {
+	margin-top: 2px !important;
+}
+
+.navbar .btn-navbar {
+	padding: 5px 8px;
+}
+
 /* Author profiles */
 .author .archive-header {
 	margin-bottom: 24px;
@@ -504,9 +544,9 @@ a:hover {
 	position: absolute !important;
 	clip: rect(1px, 1px, 1px, 1px);
 }
-.main-navigation .assistive-text:hover,
-.main-navigation .assistive-text:active,
-.main-navigation .assistive-text:focus {
+.assistive-text:hover,
+.assistive-text:active,
+.assistive-text:focus {
 	background: #fff;
 	border: 2px solid #333;
 	border-radius: 3px;
@@ -525,6 +565,7 @@ a:hover {
 .site {
 	padding: 0 24px;
 	padding: 0 1.714285714rem;
+	padding-top:40px;
 	background-color: #fff;
 }
 .site-content {
@@ -538,8 +579,8 @@ a:hover {
 
 /* Header */
 .site-header {
-	padding: 24px 0;
-	padding: 1.714285714rem 0;
+/*	padding: 24px 0;
+	padding: 1.714285714rem 0;*/
 }
 .site-header h1,
 .site-header h2 {
@@ -574,34 +615,6 @@ a:hover {
 	margin-top: 1.714285714rem;
 }
 
-/* Navigation Menu */
-.main-navigation {
-	margin-top: 24px;
-	margin-top: 1.714285714rem;
-	text-align: center;
-}
-.main-navigation li {
-	margin-top: 24px;
-	margin-top: 1.714285714rem;
-	font-size: 12px;
-	font-size: 0.857142857rem;
-	line-height: 1.42857143;
-}
-.main-navigation a {
-	color: #5e5e5e;
-}
-.main-navigation a:hover {
-	color: #21759b;
-}
-.main-navigation ul.nav-menu,
-.main-navigation div.nav-menu > ul {
-	display: none;
-}
-.main-navigation ul.nav-menu.toggled-on,
-.menu-toggle {
-	display: inline-block;
-}
-
 /* Banner */
 section[role="banner"] {
 	margin-bottom: 48px;
@@ -1531,4 +1544,86 @@ img#wpstats {
 		margin-left: 50px;
 		margin-left: 3.57142857rem;
 	}
+}
+
+/* Bootstrap Overrides */
+
+
+@media (max-width: 767px) {
+
+	body {
+		padding: 0px !important;
+	}
+
+	.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
+		margin-right: 0px !important;
+		margin-left: 0px !important;
+	}
+
+}
+
+@media (max-width: 979px) and (min-width: 768px) {
+	.container,
+	.navbar-static-top .container,
+	.navbar-fixed-top .container,
+	.navbar-fixed-bottom .container {
+		width: auto !important;
+	}
+
+}
+
+@media (min-width: 979) {
+
+	.container,
+	.navbar-static-top .container,
+	.navbar-fixed-top .container,
+	.navbar-fixed-bottom .container {
+		width: 880px !important;
+	}
+
+	.site {
+		padding-left:  40px !important;
+		padding-right: 40px !important;
+	}
+
+}
+
+@media (max-width: 979px) {
+
+	.navbar-fixed-top {
+		margin-bottom: 0px !important;
+	}
+
+	.site {
+		padding-top:0px;
+	}
+
+	.nav-collpase .nav,
+	.navbar .nav {
+		margin:15px 0 10px 0 !important;
+	}
+
+	.nav-collapse .navbar-form,
+	.nav-collapse .navbar-search {
+		float: none;
+		padding: 0px 15px !important;
+		margin: 5px 0 !important;
+	}
+
+	.navbar-search .search-query {
+		padding: 4px 3% 4px 3% !important;
+		width: 94% !important;
+	}
+
+}
+
+@media (min-width: 1200px) {
+
+	.container,
+	.navbar-static-top .container,
+	.navbar-fixed-top .container,
+	.navbar-fixed-bottom .container {
+		width: 880px !important;
+	}
+
 }