Update footer

redo with foundation inline li's

diff --git a/css/app.css b/css/app.css
index d435234..12712b5 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6902,10 +6902,23 @@ ul#actionlinks a#lodging_specials:hover {
   font-size: 16px;
   /*font-size: 1.6rem;*/
   color: #0F2F4D; }
+  #address1 li {
+    margin-left: 0; }
+  #address1 li::after {
+    content: '|';
+    margin: 0 10px; }
+  #address1 li:last-child::after {
+    content: ''; }
   @media screen and (max-width: 40em) {
     #address1 {
       margin: 0;
-      text-align: center; } }
+      text-align: center;
+      float: none; }
+      #address1 li {
+        float: none; }
+      #address1 li::after {
+        content: '';
+        margin: 0; } }
 
 #info {
   display: block;
@@ -6916,6 +6929,20 @@ ul#actionlinks a#lodging_specials:hover {
   padding: 0 0 5px 0;
   text-align: left;
   color: #0F2F4D; }
+  #info li {
+    /*margin-left: 0;*/
+    position: relative; }
+  #info li::before {
+    content: "\2022";
+    margin: 0 10px;
+    display: inline-block;
+    width: 10px;
+    height: 18px;
+    position: absolute;
+    vertical-align: middle;
+    left: -25px; }
+  #info li:first-child::before {
+    content: ''; }
   @media screen and (max-width: 40em) {
     #info {
       margin: 0;

diff --git a/scss/_structure.scss b/scss/_structure.scss
index 17c11c7..343f9e0 100755 (executable)
--- a/scss/_structure.scss
+++ b/scss/_structure.scss
@@ -826,9 +826,27 @@ ul#actionlinks a#lodging_specials:hover {
     font-size: 16px;
     /*font-size: 1.6rem;*/
     color: #0F2F4D;
+    li {
+        margin-left: 0;
+    }
+    li::after {
+        content: '|';
+        margin: 0 10px;
+    }
+    li:last-child::after {
+        content: '';
+    }
     @media screen and (max-width: 40em) {
         margin: 0;
         text-align: center;
+        float: none;
+        li {
+            float: none;
+        }
+        li::after {
+            content: '';
+            margin: 0;
+        }
     }
 }
 #info {
@@ -840,6 +858,23 @@ ul#actionlinks a#lodging_specials:hover {
     padding: 0 0 5px 0;
     text-align: left;
     color: #0F2F4D;
+    li {
+        /*margin-left: 0;*/
+        position: relative;
+    }
+    li::before {
+        content: "\2022";
+        margin: 0 10px;
+        display: inline-block;
+        width: 10px;
+        height: 18px;
+        position: absolute;
+        vertical-align: middle;
+        left: -25px;
+    }
+    li:first-child::before {
+        content: '';
+    }
     @media screen and (max-width: 40em) {
         margin: 0;
         text-align: center;

diff --git a/templates/template.html b/templates/template.html
index 6247b52..a7498c6 100755 (executable)
--- a/templates/template.html
+++ b/templates/template.html
@@ -152,8 +152,17 @@
             </div><!--/# class:row -->
         <div id="footer" class="row">
             <div class="small-12 small-text-center large-9 columns">
-                <div id="address1">Trout Creek Condominium Resort 4749 S. Pleasantview | Harbor Springs, MI 49740</div>
-                <div id="info"><a href="tel:2315262148">231-526-2148</a> &bull; <a href="tel:+18007480245">1-800-748-0245</a> &bull; <a href="mailto:info@troutcreek.com">info@troutcreek.com</a> &bull; <a href="https://reservations.troutcreek.com/irmnet/owner/ownerhome.aspx">Owners Section</a> &bull; <a href="{baseURLDefined:h}site-map">Site Map</a></div>
+                <ul id="address1" class="inline-list">
+                    <li>Trout Creek Condominium Resort 4749 S. Pleasantview</li>
+                    <li>Harbor Springs, MI 49740</li>
+                </ul>
+                <ul id="info" class="inline-list">
+                    <li><a href="tel:2315262148">231-526-2148</a></li>
+                    <li><a href="tel:+18007480245">1-800-748-0245</a></li>
+                    <li><a href="mailto:info@troutcreek.com">info@troutcreek.com</a></li>
+                    <li><a href="https://reservations.troutcreek.com/irmnet/owner/ownerhome.aspx">Owners Section</a></li>
+                    <li><a href="{baseURLDefined:h}site-map">Site Map</a></li>
+                </ul>
             </div>
             <div class="small-12 small-text-center large-3 columns">
                 <a class="small-center medium-right" href="http://www.michigan.org/property/trout-creek-condominum-resort-harbor-springs/" id="puremi">