From a577e8111b72c3405437dffb84781ec4f2735142 Mon Sep 17 00:00:00 2001
From: Mike Francis <mikeffrancis@gmail.com>
Date: Thu, 4 Jul 2013 22:31:54 +0100
Subject: [PATCH] Change to rems

---
 _/scss/_vars.scss              |  1 +
 _/scss/generic/_mixins.scss    | 10 ++++++
 _/scss/generic/_normalise.scss | 12 +++++--
 _/scss/objects/_forms.scss     | 21 ++++++-----
 header.php                     |  4 +--
 style.css                      | 42 +++++++++++-----------
 template-form.php              | 65 ++++++++++++++++++++++++++++++++++
 7 files changed, 121 insertions(+), 34 deletions(-)
 create mode 100644 template-form.php

diff --git a/_/scss/_vars.scss b/_/scss/_vars.scss
index da0eb6b..ceadc65 100755
--- a/_/scss/_vars.scss
+++ b/_/scss/_vars.scss
@@ -34,4 +34,5 @@ $input-border: 							solid 1px #ccc;
 $input-background:					#fff;
 $btn-border:								solid 1px #ccc;
 $btn-background:						#eee;
+$btn-background-hover:			#ddd;
 $btn-color:									#333;
\ No newline at end of file
diff --git a/_/scss/generic/_mixins.scss b/_/scss/generic/_mixins.scss
index 9575c19..01a6cfa 100755
--- a/_/scss/generic/_mixins.scss
+++ b/_/scss/generic/_mixins.scss
@@ -44,4 +44,14 @@
 	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($from), to($to));
   background-image: -moz-linear-gradient($from, $to);
 	background-image: -o-linear-gradient($from, $to);	
+}
+
+@function calculate-rem($size) {
+  $remSize: $size / 10;
+  @return #{$remSize}rem;
+}
+
+@mixin font-size($size) {
+  font-size: $size + px; //Fallback in px
+  font-size: calculate-rem($size);
 }
\ No newline at end of file
diff --git a/_/scss/generic/_normalise.scss b/_/scss/generic/_normalise.scss
index 18490d1..c45c31a 100755
--- a/_/scss/generic/_normalise.scss
+++ b/_/scss/generic/_normalise.scss
@@ -1,7 +1,14 @@
 html {
 	background-color: $base-background-colour;
 	color: $base-colour;
-	font: #{(($base-font-size / 16) * 1em)}/#{$base-line-height} $base-font-stack;
+	font-size: 62.5%;
+}
+
+body {
+	//font: #{(($base-font-size / 16) * 1em)}/#{$base-line-height} $base-font-stack;
+	font-family: $base-font-stack;
+	@include font-size($base-font-size);
+	line-height: $base-line-height;
 }
 
 h1, h2, h3, h4, h5, h6, p, ul, ol, table, pre, fieldset {
@@ -9,8 +16,7 @@ h1, h2, h3, h4, h5, h6, p, ul, ol, table, pre, fieldset {
 }
 
 h1 {
-	font-size: ($h1-font-size / $base-font-size) * 1em;
-	line-height: ($base-margin-bottom / $h1-font-size ) * 1em;
+	@include font-size($h1-font-size);
 }
 
 h2 {
diff --git a/_/scss/objects/_forms.scss b/_/scss/objects/_forms.scss
index 468fb15..8a3cd93 100755
--- a/_/scss/objects/_forms.scss
+++ b/_/scss/objects/_forms.scss
@@ -3,13 +3,11 @@ input, select, textarea, button {
 	font-family: $base-font-stack;
 	font-size: 1em;
 	line-height: $base-margin-bottom + px;
-	padding: 2.5px 5px;
+	padding: 4px 8px;
 	color: $base-colour;
 	background: $input-background;
 	border: $input-border;
 	@include border-radius(3px);
-	margin-right: 5px;
-	margin-bottom: -1px;
 	width: 208px;
 }
 
@@ -31,16 +29,21 @@ textarea {
 	@extend .clearfix;
 }
 
+	.checkbox input {
+		width: auto;
+	}
+
 .btn {
-	cursor: pointer;
-	display: inline-block;
 	background: $btn-background;
-	color: $btn-color;
-	line-height: $base-margin-bottom + px;
 	border: $btn-border;
 	@include border-radius(3px);
-	@include gradient(#fff, #eee);
+	color: $btn-color;
+	cursor: pointer;
+	display: inline-block;
+	line-height: $base-margin-bottom + px;
+	padding: 5px 20px;
+	width: auto;
 	&:hover {
-		@include gradient(#eee, #fff);
+		background: $btn-background-hover;
 	}
 }
\ No newline at end of file
diff --git a/header.php b/header.php
index bfb68b9..f78d914 100755
--- a/header.php
+++ b/header.php
@@ -4,8 +4,9 @@
 		<meta charset="<?php bloginfo( 'charset' ); ?>" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0" />
 		<meta name="HandheldFriendly" content="true" />
-		<title><?php wp_title( ' &ndash; ', true, 'right' ); bloginfo( 'name' ); ?></title>
+		<title><?php wp_title( ' / ', true, 'right' ); bloginfo( 'name' ); ?></title>
 		<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
+		<link rel="stylesheet" href="http://basehold.it/21" />
 		<?php wp_head(); ?>
 		<!--[if lt IE 9]>
 		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
@@ -14,7 +15,6 @@
 	<body <?php body_class(); ?>>
 		<header class="header" role="banner">
 			<div class="container">
-				<a href="<?php echo site_url(); ?>"><img src="<?php header_image(); ?>" alt="<?php bloginfo( 'name' ); ?>" /></a>
 				<nav role="navigation">
 					<ul class="nav">
 						<?php wp_list_pages( 'title_li=' ); ?>
diff --git a/style.css b/style.css
index 94ceea1..85948ae 100644
--- a/style.css
+++ b/style.css
@@ -42,7 +42,14 @@ abbr, acronym {
 html {
   background-color: white;
   color: #333333;
-  font: 0.875em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 62.5%;
+}
+
+body {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  font-size: 1.4rem;
+  line-height: 1.5;
 }
 
 h1, h2, h3, h4, h5, h6, p, ul, ol, table, pre, fieldset {
@@ -50,8 +57,8 @@ h1, h2, h3, h4, h5, h6, p, ul, ol, table, pre, fieldset {
 }
 
 h1 {
-  font-size: 2em;
-  line-height: 0.75em;
+  font-size: 28px;
+  font-size: 2.8rem;
 }
 
 h2 {
@@ -131,7 +138,7 @@ input, select, textarea, button {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 1em;
   line-height: 21px;
-  padding: 2.5px 5px;
+  padding: 4px 8px;
   color: #333333;
   background: white;
   border: solid 1px #cccccc;
@@ -139,8 +146,6 @@ input, select, textarea, button {
   -moz-border-radius: 3px;
   -o-border-radius: 3px;
   border-radius: 3px;
-  margin-right: 5px;
-  margin-bottom: -1px;
   width: 208px;
 }
 
@@ -161,29 +166,26 @@ textarea {
   margin-left: 160px;
 }
 
+.checkbox input {
+  width: auto;
+}
+
 .btn {
-  cursor: pointer;
-  display: inline-block;
   background: #eeeeee;
-  color: #333333;
-  line-height: 21px;
   border: solid 1px #cccccc;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -o-border-radius: 3px;
   border-radius: 3px;
-  background-color: white;
-  background-image: -webkit-linear-gradient(white, #eeeeee);
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#eeeeee));
-  background-image: -moz-linear-gradient(white, #eeeeee);
-  background-image: -o-linear-gradient(white, #eeeeee);
+  color: #333333;
+  cursor: pointer;
+  display: inline-block;
+  line-height: 21px;
+  padding: 5px 20px;
+  width: auto;
 }
 .btn:hover {
-  background-color: #eeeeee;
-  background-image: -webkit-linear-gradient(#eeeeee, white);
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eeeeee), to(white));
-  background-image: -moz-linear-gradient(#eeeeee, white);
-  background-image: -o-linear-gradient(#eeeeee, white);
+  background: #dddddd;
 }
 
 .container {
diff --git a/template-form.php b/template-form.php
new file mode 100644
index 0000000..4143b0b
--- /dev/null
+++ b/template-form.php
@@ -0,0 +1,65 @@
+<?php 
+
+/* Template name: Form */
+
+get_header(); 
+
+?>
+
+<div class="content container">
+
+	<div class="main" role="main">
+
+		<?php while ( have_posts() ) : the_post(); ?>
+
+		<article <?php post_class(); ?>>
+
+			<header role="heading">
+				<h3 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
+				<p class="date"><time pubdate datetime="<?php echo $post->post_date; ?>"><?php the_time( get_option( 'date_format' ) ); ?></time></p>
+				<p class="comments"><?php comments_popup_link( 'No comments yet', '1 comment', '% comments' ); ?></p>
+			</header>
+
+			<?php the_content( __( 'Read More' ) ); ?>
+
+			<form class="bs-docs-example form-horizontal">
+            <div class="control-group">
+              <label class="control-label" for="inputEmail">Email</label>
+              <div class="controls">
+                <input type="text" id="inputEmail" placeholder="Email">
+              </div>
+            </div>
+            <div class="control-group">
+              <label class="control-label" for="inputPassword">Password</label>
+              <div class="controls">
+                <input type="password" id="inputPassword" placeholder="Password">
+              </div>
+            </div>
+            <div class="control-group">
+              <div class="controls">
+                <label class="checkbox">
+                  <input type="checkbox"> Remember me
+                </label>
+              </div>
+            </div>
+            <p><button type="submit" class="btn">Sign in</button></p>
+          </form>
+
+		</article>
+
+		<?php endwhile; ?>
+
+		<div class="pagination">
+			<div class="alignleft"><?php previous_posts_link( 'Previous Entries' ) ?></div>
+			<div class="alignright"><?php next_posts_link( 'Next Entries','' ) ?></div>
+		</div>
+
+	</div>
+
+	<aside class="sidebar">
+		<?php get_sidebar(); ?>
+	</aside>
+
+</div>
+
+<?php get_footer(); ?>
\ No newline at end of file