windhamdavid 9 years ago
parent
commit
7092b5a018
4 changed files with 132 additions and 163 deletions
  1. 4 4
      functions.php
  2. 15 18
      header.php
  3. 4 4
      js/init.js
  4. 109 137
      style.css

+ 4 - 4
functions.php

@@ -17,10 +17,10 @@ add_image_size( 'post-large', 770, 577, true );
 
 function dw_scripts() {
 	global $post;
-	//wp_enqueue_style( 'style', get_stylesheet_uri() );
-	wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.min.css');
-	//wp_enqueue_style( 'boot', get_template_directory_uri() . '/css/bootstrap.css');
-	//wp_enqueue_style( 'jasny', get_template_directory_uri() . '/css/jasny-bootstrap.css');
+	wp_enqueue_style( 'style', get_stylesheet_uri() );
+	//wp_enqueue_style( 'style', get_template_directory_uri() . '/css/style.min.css');
+	wp_enqueue_style( 'boot', get_template_directory_uri() . '/css/bootstrap.css');
+	wp_enqueue_style( 'jasny', get_template_directory_uri() . '/css/jasny-bootstrap.css');
 	wp_deregister_script('jquery');
 	wp_enqueue_script('jquery', get_template_directory_uri() . '/js/jquery-2.1.1.min.js', array(), false, true);
 	wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', 'jquery', '', true );

+ 15 - 18
header.php

@@ -15,28 +15,24 @@
 <?php wp_head(); ?>
 </head>
 <body>
-<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
-<div class="container">
 	<header id="header">	
 		<nav class="navbar navbar-fixed-top" role="navigation">
-			<a href="http://davidawindham.com" title="David Windham"><img class="dw" title="David Windham" src="<?php echo get_bloginfo('template_directory');?>/img/dw.png" width="17"/></a>
-			<div class="site-title navbar-right"><a href="<?php echo home_url( '/' ); ?>" class="navbar-brand navbar-right" title="David A. Windham" rel="home">David A. Windham</a></div>		
-			<div class="navbar-header page-scroll">
-				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
-					<span class="sr-only">Navigation</span>
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-					<span class="icon-bar"></span>
-				</button>
-			</div>
-			<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-				<ul class="nav navbar-nav navbar-right">
-					<li><a href="#" class="" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body"><i class="glyphicon glyphicon-chevron-left"></i></li>
-				</ul>	
-			</div>
+			<div class="container">
+				<div class="navbar-header">
+		            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
+		              <span class="sr-only">Toggle navigation</span>
+		              <span class="icon-bar"></span>
+		              <span class="icon-bar"></span>
+		              <span class="icon-bar"></span>
+		            </button>
+				<div class="site-title">
+					<a href="http://davidawindham.com" title="David Windham"><img class="dw" title="David Windham" src="<?php echo get_bloginfo('template_directory');?>/img/dw.png" width="17"/></a>
+					<a href="<?php echo home_url( '/' ); ?>" class="navbar-brand navbar-right" title="David A. Windham" rel="home">David A. Windham</a>			
+				</div>
+				<a href="#" class="nav-toggle navbar-right" data-toggle="offcanvas" data-target=".navmenu" data-canvas="body"><span></span></a>
+			</div>		
 		</nav>
 	</header>
-	<div id="main" role="main">
 		<aside class="navmenu navmenu-default navmenu-fixed-right offcanvas" role="complementary">
 			<ul class="nav bs-docs-sidenav">
 				<li><a href="bio">bio</a></li>
@@ -44,3 +40,4 @@
 				<li><a href="contact">contact</a></li>
 			</ul>
 		</aside>
+	<div class="container">

+ 4 - 4
js/init.js

@@ -1,7 +1,9 @@
 jQuery(document).ready(function($) {
 
-var wide = 768;
-if ($(window).width() > wide) {
+$( ".nav-toggle" ).on( "click", function() {
+	$( this ).toggleClass( "active" );
+});
+	
 var headerHeight = $('.navbar').height();
 $(window).on('scroll', {
     previousTop: 0
@@ -20,7 +22,6 @@ function() {
     }
     this.previousTop = currentTop;
 });
-}
 
 var commentsDiv = $('#comments');
 if (commentsDiv.length) {
@@ -35,5 +36,4 @@ if (commentsDiv.length) {
   });
 }
 
-
 });

+ 109 - 137
style.css

@@ -12,28 +12,31 @@ bootstrap v3.2.0 * Licensed under MIT | github.com/twbs/bootstrap
 Automattic | _s github.com/Automattic/_s 
 */
 
-html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
-html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{font-family:inherit;font-size: 100%;font-style:inherit;font-weight:inherit;background:transparent;border:0;margin:0;padding:0;outline:0;vertical-align: baseline;}
-html{overflow-y: scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust: 100%;}
-body{line-height:1;}
-*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
-article,aside,details,figcaption,figure,footer,header,main,nav,section{display:block;}
-h1,h2,h3,h4,h5,h6{clear:both;font-weight:normal;}
-ol,ul{list-style: none;}
-blockquote,q{quotes: "" "";}
-blockquote:before,blockquote:after,q:before,q:after{content:'';}
-del {text-decoration:line-through;}
-table{border-collapse:collapse;border-spacing:0;}
-a:focus {outline:thin dotted;}
-a img {border: 0;}
-.clear {clear: both;}
+/*===== Body =====*/
+
+body { 
+	background: rgba(242,242,242,.7) 
+}
+body,input,textarea {
+	color: #666;
+	font-size: 12px;
+	line-height: 18px;
+}
 
 /*====== Type ======*/
 
-body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 14px;line-height: 1.42857143;}
-input,button,select,textarea {font-family: inherit;font-size: inherit;line-height: inherit;}
-.glyphicon  {
-    font-size: 16px;
+body {
+	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+	font-size: 14px;
+	line-height: 1.42857143;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+}
+input,button,select,textarea {
+	font-family: inherit;font-size: inherit;line-height: inherit;
+}
+.glyphicon {
+	font-size: 20px;
 }
 
 
@@ -48,102 +51,15 @@ input,button,select,textarea {font-family: inherit;font-size: inherit;line-heigh
 
 /*===== Layouts =====*/
 
-
-
-
-/*===== Body =====*/
-
-body { background: rgba(242,242,242,.7) }
-body,input,textarea {color: #666;font-size: 12px;line-height: 18px;}
-hr {background-color: #e7e7e7;border: 0;clear: both;height: 1px;margin-bottom: 18px;}
 p {
 	margin-bottom: 18px;
 	text-indent : 35px;
 }
-	p.noindent {
+p.noindent {
 	margin-bottom: 10px;
 	text-indent : 0px;
 }
-ul {
-	list-style: square;
-	margin: 0 0 18px 1.5em;
-}
-ol {
-	list-style: decimal;
-	margin: 0 0 18px 1.5em;
-}
-ol ol {
-	list-style: upper-alpha;
-}
-ol ol ol {
-	list-style: lower-roman;
-}
-ol ol ol ol {
-	list-style: lower-alpha;
-}
-ul ul,
-ol ol,
-ul ol,
-ol ul {
-	margin-bottom: 0;
-}
-dl {
-	margin: 0 0 24px 0;
-}
-dt {
-	font-weight: bold;
-}
-dd {
-	margin-bottom: 18px;
-}
-strong {
-	font-weight: bold;
-}
-cite,
-em,
-i {
-	font-style: italic;
-}
-big {
-	font-size: 131.25%;
-}
-ins {
-	background: #ffc;
-	text-decoration: none;
-}
-blockquote {
-	font-style: italic;
-	padding: 0 3em;
-}
-blockquote cite,
-blockquote em,
-blockquote i {
-	font-style: normal;
-}
-pre {
-	background: #f7f7f7;
-	color: #222;
-	line-height: 18px;
-	margin-bottom: 18px;
-	padding: 1.5em;
-}
-abbr,acronym {
-border-bottom: 1px dotted #666;
-	cursor: help;
-}
-sup,
-sub {
-	height: 0;
-	line-height: 1;
-	position: relative;
-	vertical-align: baseline;
-}
-sup {
-	bottom: 1ex;
-}
-sub {
-	top: .5ex;
-}
+
 input[type="text"],
 textarea {
 	background: #f9f9f9;
@@ -170,11 +86,12 @@ a:active, a:hover { color: #757576; text-decoration: none;}
 	padding: 50px 0 0 0;
 }
 .site-title {
-	float: left;
-	font: 21px/27px "Courier New", Courier, mono;
+	font-size: 27px;
+	font-family:"Courier New", Courier, mono;
+	padding: 15px 15px;
 }
 .site-title a {
-	color: #000;
+	color: #333E52;
 	text-decoration: none;
 }
 img.dw {
@@ -196,17 +113,6 @@ img.dw {
   background-color: rgba(237, 237, 237, 0.7);
 }
 
-.navbar-center
-{
-    position: absolute;
-    width: 100%;
-    left: 0;
-    top: 0;
-    text-align: center;
-    margin: auto;
-  height:100%;
-}
-
 .navbar {
   -webkit-transition: background-color 0.3s;
   -moz-transition: background-color 0.3s;
@@ -221,8 +127,8 @@ img.dw {
 }
 .navbar.fixed {
   position: fixed;
-  top: -61px;
-  background-color: rgba(255, 255, 255, 0.7);
+  top: -80px;
+  background-color: rgba(237, 237, 237, 0.7);
   border-bottom: 1px solid #f2f2f2;
   -webkit-transition: -webkit-transform 0.3s;
   -moz-transition: -moz-transform 0.3s;
@@ -238,11 +144,12 @@ img.dw {
 
 .navmenu,
 .navbar-offcanvas {
-  width: 300px;
+  width: 200px;
   height: auto;
   border-style: solid;
   border-width: 1px;
   border-radius: 4px;
+  background-color: rgba(237, 237, 237, 0.7);
 }
 .navmenu-fixed-right,
 .navbar-offcanvas {
@@ -253,18 +160,58 @@ img.dw {
   overflow-y: auto;
   border-radius: 0;
   background-color: rgba(237, 237, 237, 0.7);
-}
-.navmenu-fixed-left,
-.navbar-offcanvas.navmenu-fixed-left {
-  right: auto;
-  left: 0;
-  border-width: 0 1px 0 0;
-}
-.navmenu-fixed-right,
-.navbar-offcanvas {
+  border-width: 0 0 0 .5px;
+  border-color: ;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
   right: 0;
   left: auto;
-  border-width: 0 0 0 1px;
+}
+
+
+.nav-toggle { 
+	padding: 15px 0;
+	padding: 10px 35px 16px 0px; 
+	float: right;
+	right: 10px;
+	top: 20px;
+	cursor: pointer;
+	position: absolute; 
+}
+.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {
+  cursor: pointer;
+  border-radius: 1px;
+  height: 5px;
+  width: 35px;
+  background: #333E52;
+  position: absolute;
+  display: block;
+  content: '';
+}
+.nav-toggle span:before {
+  top: -10px; 
+}
+.nav-toggle span:after {
+  bottom: -10px;
+}
+.nav-toggle span, .nav-toggle span:before, .nav-toggle span:after {
+  transition: all 500ms ease-in-out;
+}
+.nav-toggle.active span {
+  background-color: transparent;
+}
+.nav-toggle.active span:before, .nav-toggle.active span:after {
+  top: 0;
+}
+.nav-toggle.active span:before {
+  transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+	-o-transform: rotate(45deg);
+}
+.nav-toggle.active span:after {
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
 }
 
 
@@ -272,7 +219,7 @@ img.dw {
 
 
 #content {
-	margin-bottom: 36px;
+	margin: 40px 0;
 }
 #content,
 #content input,
@@ -436,7 +383,7 @@ h2.entry-title {
 .entry-content,
 .entry-summary {
 	clear: both;
-	padding: 18px 0 20px;
+	padding: 30px 0 20px;
 }
 	.entry-guestbook {
 		clear: both;
@@ -1061,3 +1008,28 @@ p.cc {
 span.quiet {
 	display: none;
 }
+
+
+
+
+/*====== Grid =====*/
+/* Containers {768|750 992|970 1200|1170}*/
+
+@media (min-width: 768px) {
+	.site-title {
+		font-size: 25px;
+		font-family:"Courier New", Courier, mono;
+		padding: 15px 15px;
+	}
+  
+}
+
+@media (min-width: 992px) {
+
+  
+}
+
+@media (min-width: 1200px) {
+
+  
+}