Change to rems
This commit is contained in:
Mike Francis
parent
1c26a1bb56
commit
0b2f6414e2
|
|
@ -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;
|
||||
|
|
@ -45,3 +45,13 @@
|
|||
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);
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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=' ); ?>
|
||||
|
|
|
|||
42
style.css
42
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 {
|
||||
|
|
|
|||
|
|
@ -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(); ?>
|
||||
Loading…
Reference in New Issue