minor css update
authorBen Kirkby <ben@gaslightmedia.com>
Wed, 5 Mar 2014 19:34:06 +0000 (19:34 +0000)
committerBen Kirkby <ben@gaslightmedia.com>
Wed, 5 Mar 2014 19:34:06 +0000 (19:34 +0000)
core/css/responsive.css
index.html

index a3fb62c..3efea67 100644 (file)
@@ -76,7 +76,7 @@ h2 {
     position:absolute;
     top:0;
 }
-a.tel {
+a.tel{
     font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size:1.4em;
     color:rgba(255,255,255,1.00);
@@ -90,6 +90,17 @@ a.tel {
 a.tel:hover {
     color:rgba(232,173,0,1.00);
 }
+h2 #desktop_phone {
+    font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size:1.4em;
+    color:rgba(255,255,255,1.00);
+    font-weight:normal;
+    display:block;
+    max-width:50%;
+    padding:.6em 3%;
+    float:right;
+    text-decoration:none;
+}
 section {
     width:100%;
     margin:0;
index 38276dd..a3c1eab 100644 (file)
@@ -15,7 +15,7 @@
 <body>
 <div id="container">
     <h1><span>Welcome to </span>Cedarville Marine</h1>
-    <h2><a class="tel" href="tel:9064842815">906.484.2815</a></h2>
+    <h2><span id="mobile_phone"><a class="tel" href="tel:9064842815">906.484.2815</a></span><span id="desktop_phone">906.484.2815</span></h2>
     <section>
         <p>Cedarville Marine is a full service marina and ship's store located on the waterfront in beautiful downtown Cedarville, Michigan. We're currently constructing a new Web site, so please check back this spring for a brand new look and additional information about our facility!</p>
         <p>If you're not already familiar with us, please see the following list for a sample of our service offerings:</p>
 </div><!-- container -->
 <script>
   $("h1").fitText(1.2, { minFontSize: '30px', maxFontSize: '72px' });
+  $( document ).ready(function() {
+    if($(window).width() > 481){
+        $("#mobile_phone").hide();
+        $("#desktop_phone").show();
+    }else{
+        $("#mobile_phone").show();
+        $("#desktop_phone").hide();
+    }
+    });
+    $( window ).resize(function() {
+    if($(window).width() > 481){
+        $("#mobile_phone").hide();
+        $("#desktop_phone").show();
+    }else{
+        $("#mobile_phone").show();
+        $("#desktop_phone").hide();
+    }
+    });
 </script>
 </body>
 </html>
\ No newline at end of file