From 0b2f6414e23397158576667f130eba5ae1f1d985 Mon Sep 17 00:00:00 2001 From: Mike Francis <mikeffrancis@gmail.com> Date: Thu, 4 Jul 2013 22:32:29 +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( ' – ', 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