Nav items more readable, footer changed to include logo, items moved within

diff --git a/css/app.css b/css/app.css
index 00b30c4..e3ae6bc 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6721,7 +6721,8 @@ header#page-header {
       color: white; }
       header#page-header .phone-top .phone .icon {
         color: #b32024;
-        padding-right: 10px; }
+        padding-right: 10px;
+        content: ""; }
       header#page-header .phone-top .phone .text {
         color: white; }
         header#page-header .phone-top .phone .text:hover {
@@ -6874,6 +6875,11 @@ video {
     .top-bar {
       display: none !important; } }
 
+@media only screen and (min-width: 40em) {
+  .top-bar-section li:not(.has-form) a:not(.button) {
+    padding: 0 11px; }
+ }
+
 .top-bar-section {
   background: transparent;
   float: none;
@@ -6883,7 +6889,7 @@ video {
   height: auto;
   line-height: 1;
   width: 100%;
-  max-width: 1000px; }
+  max-width: 1200px; }
   .top-bar-section ul li {
     background: none;
     padding: 0;
@@ -6945,7 +6951,9 @@ video {
     background: transparent !important; }
   .top-bar-section > div > ul > li > a {
     font-size: 12px;
-    text-transform: uppercase; }
+    text-transform: uppercase;
+    font-family: "Montserrat", sans-serif;
+    letter-spacing: 1px; }
   .top-bar-section > div > ul > li > a:hover {
     cursor: default; }
   .top-bar-section > div > ul > li:hover {
@@ -7027,7 +7035,8 @@ main.page-front {
       border: none;
       padding: 0; }
     main.page-front .blocks .block h1 {
-      font-family: "ingram-wide-2"; }
+      font-family: "ingram-wide-2";
+      color: #000000; }
     main.page-front .blocks .block h3 {
       color: #000000;
       font-family: "ingram-wide-2";
@@ -7041,7 +7050,7 @@ main.page-front {
     main.page-front .blocks .block p {
       color: #888888;
       text-align: center;
-      font-size: 0.875rem; }
+      font-size: 14px; }
     main.page-front .blocks .block .block-text a {
       color: #b32024; }
     main.page-front .blocks .block .block-readmore {
@@ -8178,24 +8187,33 @@ footer#main {
         text-decoration: none; }
         footer#main ul li a:hover {
           color: #ffc742; }
-  footer#main .social {
-    margin-top: 10px; }
-    footer#main .social img {
-      margin: 0 2px; }
-  footer#main .phone-bottom {
+  footer#main .footer-right {
+    float: right;
     text-align: right;
     margin-top: 10px; }
-    footer#main .phone-bottom .phone {
+    footer#main .footer-right > * {
+      display: block;
+      width: 100%;
+      float: right;
+      margin-bottom: 10px; }
+    footer#main .footer-right .footer-social img {
+      margin: 0 2px;
+      float: right; }
+    footer#main .footer-right .phone {
       color: white;
       text-decoration: none; }
-      footer#main .phone-bottom .phone .icon {
+      footer#main .footer-right .phone .icon {
         color: #b32024;
         padding-right: 10px; }
-      footer#main .phone-bottom .phone .text {
+      footer#main .footer-right .phone .text {
         color: white;
         text-decoration: none; }
-        footer#main .phone-bottom .phone .text:hover {
+        footer#main .footer-right .phone .text:hover {
           color: #b32024; }
+  footer#main .footer-left .footer-logo img {
+    max-width: 175px; }
+  footer#main .footer-members-only {
+    font-size: 16px; }
   footer#main .address {
     margin-top: 10px; }
 
@@ -8221,7 +8239,7 @@ img#orb-foot {
   white-space: nowrap; }
   #footer_address span#business {
     white-space: normal;
-    color: #b32024; }
+    color: #FFFFFF; }
 #footer_address img {
   position: relative;
   display: block;
@@ -8254,28 +8272,27 @@ img#orb-foot {
 #example.element {
   background-color: transparent; }
 
-p, a {
-  font-family: "ingram-wide-2"; }
-
-h1 {
-  color: #000000;
-  font-family: "ingram-wide-2"; }
+body {
+  font-size: 14px; }
 
-h2 {
-  color: #000000;
-  font-family: "ingram-wide-2"; }
+p, a {
+  font-family: "ingram-wide-2";
+  font-size: 14px; }
 
 h1 {
+  font-family: "ingram-wide-2";
   padding: 0;
-  width: 100%;
   display: block;
-  text-align: center;
   font-weight: 600;
-  font-size: 21px;
+  font-size: 32px;
   line-height: 40px;
   letter-spacing: 2px;
   text-transform: uppercase;
-  color: #212121; }
+  color: #b32024; }
+
+h2 {
+  color: #000000;
+  font-family: "ingram-wide-2"; }
 
 /* for the mobile menu */
 aside.left-off-canvas-menu {

diff --git a/js/app.js b/js/app.js
index c2002cd..8dd6037 100644 (file)
--- a/js/app.js
+++ b/js/app.js
@@ -25,26 +25,26 @@ $(document).ready(function () {
     // The code below is useful if we want the top-level items to no longer be clickable
 
     // cache everything once
-//    var page = $("body");
-//
-//    var offcanvas_menu_items    = page.find(".left-off-canvas-menu").children("ul.left-off-canvas-list").children('li');
+    var page = $("body");
+
+    var offcanvas_menu_items    = page.find(".left-off-canvas-menu").children("ul.left-off-canvas-list").children('li');
 
     // disable the links for top nav items that have subpages
-//    $('.top-bar-section > div > ul > li').each( function () {
-//        console.log("test");
-//        if ( $(this).hasClass("menu-item-has-children") ){
-//            $(this).children("a").on('click', function(e){
-//                e.preventDefault();
-//            });
-//        }
-//    });
+    $('.top-bar-section > div > ul > li').each( function () {
+        console.log("test");
+        if ( $(this).hasClass("menu-item-has-children") ){
+            $(this).children("a").on('click', function(e){
+                e.preventDefault();
+            });
+        }
+    });
 
     // disable the links for off canvas nav items that have subpages
-//    $('.left-off-canvas-menu > ul > li').each( function () {
-//        if ( $(this).hasClass("menu-item-has-children") ){
-//            $(this).children("a").on('click', function(e){
-//                e.preventDefault();
-//            });
-//        }
-//    });
+    $('.left-off-canvas-menu > ul > li').each( function () {
+        if ( $(this).hasClass("menu-item-has-children") ){
+            $(this).children("a").on('click', function(e){
+                e.preventDefault();
+            });
+        }
+    });
 });

diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index faece45..3819dee 100644 (file)
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -16,26 +16,26 @@ $(document).ready(function () {
     // The code below is useful if we want the top-level items to no longer be clickable
 
     // cache everything once
-//    var page = $("body");
-//
-//    var offcanvas_menu_items    = page.find(".left-off-canvas-menu").children("ul.left-off-canvas-list").children('li');
+    var page = $("body");
+
+    var offcanvas_menu_items    = page.find(".left-off-canvas-menu").children("ul.left-off-canvas-list").children('li');
 
     // disable the links for top nav items that have subpages
-//    $('.top-bar-section > div > ul > li').each( function () {
-//        console.log("test");
-//        if ( $(this).hasClass("menu-item-has-children") ){
-//            $(this).children("a").on('click', function(e){
-//                e.preventDefault();
-//            });
-//        }
-//    });
+    $('.top-bar-section > div > ul > li').each( function () {
+        console.log("test");
+        if ( $(this).hasClass("menu-item-has-children") ){
+            $(this).children("a").on('click', function(e){
+                e.preventDefault();
+            });
+        }
+    });
 
     // disable the links for off canvas nav items that have subpages
-//    $('.left-off-canvas-menu > ul > li').each( function () {
-//        if ( $(this).hasClass("menu-item-has-children") ){
-//            $(this).children("a").on('click', function(e){
-//                e.preventDefault();
-//            });
-//        }
-//    });
+    $('.left-off-canvas-menu > ul > li').each( function () {
+        if ( $(this).hasClass("menu-item-has-children") ){
+            $(this).children("a").on('click', function(e){
+                e.preventDefault();
+            });
+        }
+    });
 });

diff --git a/parts/client-info-footer.php b/parts/client-info-footer.php
index b1ba946..cf1ac88 100644 (file)
--- a/parts/client-info-footer.php
+++ b/parts/client-info-footer.php
@@ -1,21 +1,26 @@
 <div id="footer_address" class="row small-centered small-11 small-text-center medium-6 columns">
     <?php if (glm_get_clientinfo_option('phone')) :?>
-    <div class="phone-bottom small-8 medium-2 columns right">
+    <div class="footer-right small-8 medium-3 columns right">
+
+        <a class="footer-social" target="_blank" href="https://www.facebook.com/TrueNorthGolfClub/"><img alt="Facebook" src="<?php bloginfo('template_url'); ?>/assets/facebook-icon.png"></a>
+        <br>
         <a href="tel:<?php echo glm_get_clientinfo_option('phone');?>" class="phone">
             <span class="icon zmdi zmdi-phone"></span>
             <span class="text">
                 <?php echo glm_get_clientinfo_option('phone');?>
             </span>
         </a>
+        <br>
+        <a class="footer-members-only" href="<?php get_permalink("members-only"); ?>">Members Only</a>
     </div>
 
     <?php endif;?>
 
-    <div class="social small-4 medium-2 columns left">
-        <a target="_blank" href="https://www.facebook.com/TrueNorthGolfClub/"><img alt="Facebook" src="<?php bloginfo('template_url'); ?>/assets/facebook-icon.png"></a>
+    <div class="footer-left small-4 medium-3 columns left">
+        <a class="footer-logo" href="<?php bloginfo('url'); ?>"><img class="text-center" alt="True North Golf logo" src="<?php bloginfo('template_url'); ?>/assets/logo-white.png"></a>
     </div>
 
-    <div class="address small-12 medium-8 columns right">
+    <div class="address small-12 medium-6 columns right">
         <?php if (function_exists('glm_get_clientinfo_option')) :?>
         <span id="business"><?php echo glm_get_clientinfo_option('businessName');?></span><br>
         <?php if (glm_get_clientinfo_option('address')):?>

diff --git a/scss/_main.scss b/scss/_main.scss
index 46f9d7c..122fa30 100644 (file)
--- a/scss/_main.scss
+++ b/scss/_main.scss
@@ -71,6 +71,7 @@ main {
                 }
                 h1 {
                     font-family: "ingram-wide-2";
+                    color: $black;
                 }
                 h3 {
                     color: $black;
@@ -86,7 +87,7 @@ main {
                 p {
                     color: $dark-grey;
                     text-align: center;
-                    font-size: rem-calc(14);
+                    font-size: 14px;
                 }
                 .block-text a {
                     color: $red;

diff --git a/scss/_page.footer.scss b/scss/_page.footer.scss
index fa48e44..ae23ec8 100644 (file)
--- a/scss/_page.footer.scss
+++ b/scss/_page.footer.scss
@@ -22,16 +22,22 @@ footer#main {
             }
         }
     }
-    .social {
-        margin-top: 10px;
-        img {
-            margin: 0 2px;
-//            float: right;
-        }
-    }
-    .phone-bottom {
+    .footer-right {
+        float: right;
         text-align: right;
         margin-top: 10px;
+        > * {
+            display: block;
+            width: 100%;
+            float: right;
+            margin-bottom: 10px;
+        }
+        .footer-social {
+            img {
+                margin: 0 2px;
+                float: right;
+            }
+        }
         .phone {
             color: white;
             text-decoration: none;
@@ -48,6 +54,13 @@ footer#main {
             }
         }
     }
+    .footer-left .footer-logo img {
+        max-width: 175px;
+    }
+
+    .footer-members-only {
+        font-size: 16px;
+    }
     .address {
         margin-top: 10px;
     }
@@ -77,7 +90,7 @@ img#orb-foot {
         white-space: nowrap;
         &#business {
             white-space: normal;
-            color: $red;
+            color: $white;
         }
     }
     img {

diff --git a/scss/_page.header.scss b/scss/_page.header.scss
index 9ca89dc..984adfb 100644 (file)
--- a/scss/_page.header.scss
+++ b/scss/_page.header.scss
@@ -23,6 +23,7 @@ header#page-header {
             .icon {
                 color: $red;
                 padding-right: 10px;
+                content: "";
             }
             .text {
                 color: white;

diff --git a/scss/_structure.scss b/scss/_structure.scss
index 9cd081f..0cc5a05 100644 (file)
--- a/scss/_structure.scss
+++ b/scss/_structure.scss
@@ -14,26 +14,25 @@
 #example.element {
     background-color: transparent;
 }
+body {
+    font-size: 14px;
+}
 p, a {
     font-family: "ingram-wide-2";
+    font-size: 14px;
 }
 h1 {
-    color: $black;
-    font-family: "ingram-wide-2";
-}
-h2 {
-    color: $black;
     font-family: "ingram-wide-2";
-}
-h1 {
     padding: 0;
-    width: 100%;
     display: block;
-    text-align: center;
     font-weight: 600;
-    font-size: 21px;
+    font-size: 32px;
     line-height: 40px;
     letter-spacing: 2px;
     text-transform: uppercase;
-    color: #212121;
+    color: $red;
+}
+h2 {
+    color: $black;
+    font-family: "ingram-wide-2";
 }
\ No newline at end of file

diff --git a/scss/_topbar.scss b/scss/_topbar.scss
index 5827adc..0cc6753 100644 (file)
--- a/scss/_topbar.scss
+++ b/scss/_topbar.scss
@@ -24,6 +24,11 @@
         display: none !important;
     }
 }
+@media only screen and (min-width: 40em) {
+    .top-bar-section li:not(.has-form) a:not(.button) {
+        padding: 0 11px;
+    }
+}
 .top-bar-section {
     background: transparent;
     float: none;
@@ -33,7 +38,7 @@
     height: auto;
     line-height: 1;
     width: 100%;
-    max-width: 1000px;
+    max-width: 1200px;
     ul{
         li {
             background: none;
@@ -136,6 +141,8 @@
             > a {
                 font-size: 12px;
                 text-transform: uppercase;
+                font-family: "Montserrat", sans-serif;
+                letter-spacing: 1px;
             }
             > a:hover {
                 cursor: default;