Adding explore emmet footer.

diff --git a/assets/more_emmet.png b/assets/more_emmet.png
new file mode 100644 (file)
index 0000000..292b9e8
Binary files /dev/null and b/assets/more_emmet.png differ

diff --git a/css/app.css b/css/app.css
index 5597118..11495b2 100755 (executable)
--- a/css/app.css
+++ b/css/app.css
@@ -6036,15 +6036,56 @@ li > p.open {
   top: -65px;
   left: 32px; }
 
+/* Footer */
 footer {
   background-color: white;
-  font-family: Open Sans, sans-serif;
-  margin: 0 -15px;
-  padding: 20px 10px 0 10px; }
+  font-family: Open Sans, sans-serif; }
 
 footer h2 {
   font-weight: normal; }
 
+footer {
+  float: none;
+  margin: 0 auto;
+  max-width: 1000px; }
+
+#connect {
+  position: fixed;
+  padding-top: 20px;
+  bottom: 0;
+  max-width: 1000px;
+  z-index: 100; }
+  #connect #emmet {
+    max-width: 300px;
+    float: none;
+    margin: 0 auto;
+    background: #6EA643;
+    border-radius: 8px 8px 0 0;
+    padding: 12px 15px 2px; }
+  #connect #sitelist {
+    height: 0;
+    padding: 0; }
+    #connect #sitelist ul {
+      margin: 0;
+      list-style: none;
+      background: #6EA643; }
+      #connect #sitelist ul li {
+        background: none;
+        padding: 0 5px;
+        display: inline-block; }
+        #connect #sitelist ul li > a {
+          display: block;
+          font-family: Open Sans, sans-serif;
+          font-size: 12px;
+          color: #fff;
+          padding: 12px 18px;
+          line-height: 1.2; }
+        #connect #sitelist ul li a#current {
+          background: #00678b; }
+        #connect #sitelist ul li a:hover {
+          background-color: #00678b; }
+
+/* End Footer */
 .multi {
   padding: 18px 15px;
   line-height: 100%; }

diff --git a/footer.php b/footer.php
index fe46f42..5afcced 100755 (executable)
--- a/footer.php
+++ b/footer.php
@@ -1,51 +1,36 @@
-                    
+
                     </div>
-                    <!-- <footer>
-                        <div class="row">
-                            <div class="medium-12 show-for-medium-up text-center columns side_space">
-                                <h2>More to Explore in Emmet County</h2>
-                            </div>
-                            <div class="small-12 show-for-small-only text-center columns side_space">
-                                <a href=#><h2>More to Explore in Emmet County</h2></a>
-                            </div>
-                        </div>
-                        <div class="row">
-                            <div class="medium-1 show-for-medium-up text-center columns multi">
-                                <a href="#">Government & Business</a>
-                            </div>
-                            <div class="medium-1 show-for-medium-up text-center columns multi">
-                                <a href="#">Headlands Dark Sky Park</a>
-                            </div>
-                            <div id="current" class="medium-1 show-for-medium-up text-center columns multi">
-                                <a href="#">Recycling & Refuse</a>
-                            </div>
-                            <div class="medium-1 show-for-medium-up text-center columns multi">
-                                <a href="#">Emmet County Fair</a>
-                            </div>
-                            <div class="medium-1 show-for-medium-up text-center columns multi">
-                                <a href="#">Pellston Airport</a>
-                            </div>
-                            <div class="medium-1 show-for-medium-up text-center columns multi">
-                                <a href="#">Essence of Emmet</a>
-                            </div>
-                            <div class="medium-1 show-for-medium-up text-center columns multi">
-                                <a href="#">McGulpin Point</a>
-                            </div>
-                            <div class="medium-1 show-for-medium-up text-center columns multi">
-                                <a href="#">Camp Petosega</a>
-                            </div>
-                            <div class="medium-1 show-for-medium-up text-center columns multi">
-                                <a href="#">Veterns Affairs</a>
-                            </div>
-                        </div>
-                    </footer> -->
                 </div>
+                
                 <div class="row">
                     <div id="gas" class="small-12 text-center columns sub-foot">
                         <p>&copy; <?php echo date('Y');?> Emmet County, Michigan &#8226; All Rights Reserved</p>
                         <p>Produced by <a href="http://www.gaslightmedia.com" target="_blank">Gaslight Media</a></p>
                     </div>
                 </div>
+                                    
+                     <footer>
+                        
+                        <div id="connect" class="row show-for-large-up">
+                            <div id="emmet" class="small-12 columns text-center">
+                                <a><img src="<?php echo get_template_directory_uri(); ?>/assets/more_emmet.png"></a>
+                            </div>
+                            <div id="sitelist" class="small-12 columns text-center">
+                                <ul>
+                                <li><a id="current" target="_blank" href="<?php bloginfo('url');?>">Government <br>& Business</a></li>
+                                    <li><a target="_blank" href="http://www.midarkskypark.org/">Headlands <br> Dark Sky Park</a></li>
+                                    <li><a target="_blank" href="http://www.emmetrecycling.org/">Recycling <br>& Refuse</a></li>
+                                    <li><a target="_blank" href="http://www.emmetchxfair.org/">Emmet/Charlevoix <br>County Fair</a></li>
+                                    <li><a target="_blank" href="http://www.pellstonairport.com/">Pellston <br>Airport</a></li>
+                                    <li><a target="_blank" href="http://www.emmetcountyems.org/">Emmet<br>County EMS</a></li>
+        <!--                                        <li><a target="_blank" href="#">Essence <br>of Emmet</a></li>-->
+                                    <li><a target="_blank" href="http://www.mcgulpinpoint.org/">McGulpin <br>Lighthouse</a></li>
+        <!--                                        <li><a target="_blank" href="#">Camp <br>Petosega</a></li>-->
+        <!--                                        <li><a target="_blank" href="#">Veterans <br>Affairs</a></li>-->
+                                </ul>
+                            </div>
+                        </div>
+                    </footer>
                 <a class="exit-off-canvas"></a>
             </div><!--/inner-wrap-->
         </div><!--/off-canvas-->
@@ -67,5 +52,27 @@
                 }
             });
         });
+        $(function(){
+            var toggleSitelist = true;
+            $('#emmet').on('click',function(e) {
+    //            var footerPosition = get_footer_position();
+                var footerPosition = 'fixed';
+                if (footerPosition === 'fixed') {
+                    if (toggleSitelist) {
+                        $("#sitelist").animate({'height': 53}, 600);
+                        toggleSitelist = false;
+                    } else {
+                        $("#sitelist").animate({'height': 0}, 600);
+                        toggleSitelist = true;
+                    }
+                    $('#connect').bind('mouseleave', function () {
+                        if (!toggleSitelist) {
+                            $("#sitelist").animate({'height': 0}, 600);
+                            toggleSitelist = true;
+                        }
+                    });
+                }
+            })
+        });
     </script>
 </html>

diff --git a/scss/_structure.scss b/scss/_structure.scss
index b0aa6c7..2d7afdc 100755 (executable)
--- a/scss/_structure.scss
+++ b/scss/_structure.scss
@@ -402,19 +402,65 @@ li > p.open {
     top: -65px;
     left: 32px;
 }
+/* Footer */
 footer {
     background-color: white;
     font-family: Open Sans, sans-serif;
-    margin: 0 -15px;
-    padding: 20px 10px 0 10px;   
-}
-footer a {
-/*    font-size: 12px;
-    color: #fff;*/
 }
 footer h2 {
     font-weight: normal;
 }
+footer {
+    float: none;
+    margin: 0 auto;
+    max-width: 1000px;
+}
+#connect {
+    position: fixed;
+    padding-top: 20px;
+    bottom: 0;
+    max-width: 1000px;
+    z-index: 100;
+    #emmet {
+        max-width: 300px;
+        float: none;
+        margin: 0 auto;
+        background: #6EA643;
+        border-radius: 8px 8px 0 0;
+        padding: 12px 15px 2px;
+    }
+    #sitelist {
+        height: 0;
+        padding: 0;
+        ul{
+            margin: 0;
+            list-style: none;
+            background: #6EA643;
+            li {
+                background: none;
+                padding: 0 5px;
+                display: inline-block;
+                & > a {
+                    display: block;
+                    font-family: Open Sans, sans-serif;
+                    font-size: 12px;
+                    color: #fff;
+                    padding: 12px 18px;
+                    line-height: 1.2;
+                }
+                a {
+                    &#current {
+                        background: #00678b;
+                    }
+                }
+                a:hover {
+                    background-color: #00678b;
+                }
+            }
+        }
+    }
+}
+/* End Footer */
 .multi {
     padding: 18px 15px;
     line-height: 100%;