From d244534af94fbbb83b0dd3252b60ce9ce437f4a2 Mon Sep 17 00:00:00 2001
From: Evan Theurer <theurer@struktur.de>
Date: Tue, 29 Apr 2014 12:32:22 +0200
Subject: [PATCH] Use compass vertical rhythm - setup baseline, using relative
 units.

---
 src/styles/components/_bar.scss   | 10 +++++-----
 src/styles/global/_base.scss      |  3 +++
 src/styles/global/_variables.scss |  1 +
 src/styles/main.scss              |  3 ++-
 4 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/styles/components/_bar.scss b/src/styles/components/_bar.scss
index 39aca90d..676c45bf 100644
--- a/src/styles/components/_bar.scss
+++ b/src/styles/components/_bar.scss
@@ -22,7 +22,6 @@
 #bar {
   background-color: $componentbg;
   color: $componentfg1;
-  font: bold 1em/40px $font-sans-serif;
   left: 0;
   min-height: 44px;
   position: absolute;
@@ -30,7 +29,9 @@
   top: 0;
   text-align: center;
   z-index: 5;
+  @include adjust-leading-to(2);
   @include box-shadow(0 2px 10px 0 $componentfg3);
+  // @include debug-vertical-alignment();
   @include touch-callout(none);
   @include user-select(none);
   @include breakpt($breakpoint-medium) {
@@ -53,11 +54,11 @@
     background-size: 100%;
     display: inline-block;
     color: black;
-    font: normal 11px/11px $font-sans-serif;
     height: 32px;
     text-align: left;
     width: 90px;
     vertical-align: middle;
+    @include adjust-font-size-to(11px,0.4);
     span {
       font-style: italic;
       left: 38px;
@@ -73,11 +74,11 @@
 .bar-middle {
   background-color: $componentbg;
   display: inline-block;
+  font-weight: bold;
   min-height: 44px;
   padding: 0 1em;
   position: relative;
   margin-left: -70px;
-  vertical-align: middle;
   z-index: 5;
   @include breakpt($breakpoint-medium) {
     display: block;
@@ -151,13 +152,12 @@
     border-color: transparent;
     color: $grey3;
     display: inline-block;
-    font: 24px/40px $font-sans-serif;
     height: 42px;
     margin-left: -4px;
     padding: 0;
     text-align: center;
     width: 42px;
-    vertical-align: middle;
+    @include adjust-font-size-to(24px);
     &:focus {
       border: none;
       outline: none;
diff --git a/src/styles/global/_base.scss b/src/styles/global/_base.scss
index ab4a0176..1a6a39ca 100644
--- a/src/styles/global/_base.scss
+++ b/src/styles/global/_base.scss
@@ -18,6 +18,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
+
+@include establish-baseline();
+
 html, body {
 background-color: $background;
 background-clip: padding-box;
diff --git a/src/styles/global/_variables.scss b/src/styles/global/_variables.scss
index a4774256..bf66a04d 100644
--- a/src/styles/global/_variables.scss
+++ b/src/styles/global/_variables.scss
@@ -40,3 +40,4 @@ $breakpoint-large: 1280px;
 
 $font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif;
 $base-font-size: 13px;
+$base-line-height: 19px;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index a310e18d..945664ac 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -19,11 +19,12 @@
  *
  */
 
+@import "global/variables";
+// @import "compass";
 @import "compass";
 
 @import "libs/libs";
 
-@import "global/variables";
 @import "global/mixins";
 
 @import "global/base";