Put the other number in the header.

Changing the markup with nested foundation grid to get phone numbers to
stack on top of each other.

diff --git a/styles.css b/styles.css
index 8fe1ff7..5eb18fc 100644 (file)
--- a/styles.css
+++ b/styles.css
@@ -252,7 +252,7 @@ header a:hover {
 header h1, header .phone {
   color: white;
   font-size: 24px;
-  line-height: 58px;
+  line-height: 38px;
   display: inline-block;
   vertical-align: middle;
 }
@@ -992,4 +992,4 @@ li:hover .play {
 .nohyperlink {
     color: #336633;
     text-decoration: none !important;
-}
\ No newline at end of file
+}

diff --git a/templates/template.html b/templates/template.html
index 8b97874..01b9cef 100644 (file)
--- a/templates/template.html
+++ b/templates/template.html
@@ -18,7 +18,7 @@
     {styles:h}
     <link rel="stylesheet" href="{mediaBaseURL:h}css/foundation.min.css" />
     <link rel="stylesheet" href="{mediaBaseURL:h}css/normalize.css" />
-    <link rel="stylesheet" href="{mediaBaseURL:h}styles.css" />
+    <link rel="stylesheet" href="{mediaBaseURL:h}styles.css?v=1" />
     <script src="{mediaBaseURL:h}js/vendor/modernizr.js"></script>
     {topScripts:h}
   </head>
@@ -44,8 +44,17 @@
                 <h1>St. Ignace Budget Host Inn</h1>
               </div>
               <div class="small-12 medium-4 columns text-right phone-social">
-                  <div class="phone">800-872-7057</div>
-                <a href="http://www.facebook.com/stignacebudgethost" class="facebook"></a>
+                  <div class="row">
+                      <div class="small-12 medium-10 columns">
+                        <div class="row">
+                            <div class="phone small-12 columns">906-642-9666</div>
+                            <div class="phone small-12 columns">800-872-7057</div>
+                        </div>
+                      </div>
+                      <div class="small-12 medium-2 columns">
+                        <a href="http://www.facebook.com/stignacebudgethost" class="facebook"></a>
+                      </div>
+                  </div>
               </div>
             </div>
           </header>