From: Anthony Talarico Date: Tue, 12 Mar 2019 16:33:59 +0000 (-0400) Subject: experimenting with a white tab bar for mobile and tablet view to place the logo insid... X-Git-Tag: v1.2.52^2~2 X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/index.cgi?a=commitdiff_plain;h=8a6679b107bc74425eb96327e0686235cdc9d1fc;p=WP-Themes%2Fmountpleasantwow.git experimenting with a white tab bar for mobile and tablet view to place the logo inside of it --- diff --git a/css/app.css b/css/app.css index c2218bc..7ae35e9 100644 --- a/css/app.css +++ b/css/app.css @@ -5421,8 +5421,8 @@ blockquote, blockquote p { .tab-bar { -webkit-backface-visibility: hidden; - background: #690433; - color: #FFFFFF; + background: #FFFFFF; + color: #16345B; height: 2.8125rem; line-height: 2.8125rem; position: relative; } @@ -5439,7 +5439,7 @@ blockquote, blockquote p { position: absolute; top: 0; width: 2.8125rem; - border-right: solid 1px #350219; + border-right: solid 1px gray; left: 0; } .right-small { @@ -5447,7 +5447,7 @@ blockquote, blockquote p { position: absolute; top: 0; width: 2.8125rem; - border-left: solid 1px #350219; + border-left: solid 1px gray; right: 0; } .tab-bar-section { @@ -5471,7 +5471,7 @@ blockquote, blockquote p { right: 2.8125rem; } .tab-bar .menu-icon { - color: #FFFFFF; + color: #16345B; display: block; height: 2.8125rem; padding: 0; @@ -5487,10 +5487,10 @@ blockquote, blockquote p { top: 50%; margin-top: -0.5rem; left: 0.90625rem; - box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF; + box-shadow: 0 0 0 1px #16345B, 0 7px 0 1px #16345B, 0 14px 0 1px #16345B; width: 1rem; } .tab-bar .menu-icon span:hover:after { - box-shadow: 0 0 0 1px #b3b3b3, 0 7px 0 1px #b3b3b3, 0 14px 0 1px #b3b3b3; } + box-shadow: 0 0 0 1px #0f2440, 0 7px 0 1px #0f2440, 0 14px 0 1px #0f2440; } .left-off-canvas-menu { -webkit-backface-visibility: hidden; @@ -5608,9 +5608,9 @@ ul.off-canvas-list { padding: 0.6666666667rem; transition: background 300ms ease; } ul.off-canvas-list li a:hover { - background: #4a0324; } + background: #b3b3b3; } ul.off-canvas-list li a:active { - background: #4a0324; } + background: #b3b3b3; } .move-right > .inner-wrap { -webkit-transform: translate3d(15.625rem, 0, 0); @@ -6742,16 +6742,12 @@ a[href^=tel] { text-decoration: none; } header#page-header { - height: 295px; background: -webkit-linear-gradient(top, #ffffff 8%, rgba(255, 255, 255, 0) 100%); background: -moz-linear-gradient(center top, #ffffff 8%, rgba(255, 255, 255, 0) 100%); background: -ms-linear-gradient(top, #ffffff 8%, rgba(255, 255, 255, 0) 100%); position: relative; padding-top: 11px; z-index: 5; } - @media only screen and (max-width: 40em) { - header#page-header { - height: 185px; } } @media only screen and (max-width: 40em) { header#page-header { position: static; } } @@ -6822,8 +6818,17 @@ header#page-header { position: relative; bottom: -17px; } -#sm-logo img { - padding-top: 20px; } +#sm-logo { + position: absolute; + left: 50%; + transform: translateX(-50%); + width: 220px; + top: -15px; } + @media only screen and (max-width: 40em) { + #sm-logo { + left: 66%; } } + #sm-logo img { + padding-top: 20px; } .golf-container { position: relative; } @@ -7381,11 +7386,9 @@ main.search-results #head-img { #slideshow { position: relative; - margin-top: -295px; z-index: -1; } @media only screen and (max-width: 40em) { #slideshow { - margin-top: -140px; max-height: 230px; } } #slideshow .metaslider { max-height: 610px; diff --git a/header.php b/header.php index c7efe6d..2b0ca1f 100644 --- a/header.php +++ b/header.php @@ -71,7 +71,7 @@ Note 2: 'Nb cols' parameter for Bootstrap only.
@@ -85,7 +85,7 @@ Note 2: 'Nb cols' parameter for Bootstrap only.
- + ID ) == "page-golf-template.php") { ?>
diff --git a/parts/top-bar.php b/parts/top-bar.php index 78a929d..90144fb 100644 --- a/parts/top-bar.php +++ b/parts/top-bar.php @@ -6,5 +6,7 @@ diff --git a/scss/_page.header.scss b/scss/_page.header.scss index fb4ac92..ea17b7d 100644 --- a/scss/_page.header.scss +++ b/scss/_page.header.scss @@ -1,7 +1,7 @@ header#page-header { - height: 295px; + // height: 295px; @media #{$small-only} { - height: 185px; + // height: 185px; } @include gradient (rgba(white, 1), rgba($white, 0)); position: relative; @@ -135,6 +135,15 @@ header#page-header { bottom: -17px; } #sm-logo { + position: absolute; + left: 50%; + @media #{$small-only}{ + left: 66%; + } + + transform: translateX(-50%); + width: 220px; + top: -15px; img { padding-top: 20px; } diff --git a/scss/_settings.scss b/scss/_settings.scss index 73ca03d..5bf17b2 100644 --- a/scss/_settings.scss +++ b/scss/_settings.scss @@ -837,11 +837,11 @@ $small-font-color: scale-color($header-font-color, $lightness: 35%); // Off Canvas Tab Bar Variables // $include-html-off-canvas-classes: $include-html-classes; - $tabbar-bg: $maroon; + $tabbar-bg: $white; // $tabbar-height: rem-calc(45); // $tabbar-icon-width: $tabbar-height; // $tabbar-line-height: $tabbar-height; -// $tabbar-color: $white; +$tabbar-color: $revamp-blue; // $tabbar-middle-padding: 0 rem-calc(10); // Off Canvas Divider Styles @@ -880,7 +880,7 @@ $small-font-color: scale-color($header-font-color, $lightness: 35%); // $off-canvas-back-hover-border-bottom: none; // Off Canvas Menu Icon Variables -// $tabbar-menu-icon-color: $white; +$tabbar-menu-icon-color: $revamp-blue; // $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%); $tabbar-menu-icon-text-indent: rem-calc(50); diff --git a/scss/_slideshow.scss b/scss/_slideshow.scss index 7d403ac..7d4d5db 100644 --- a/scss/_slideshow.scss +++ b/scss/_slideshow.scss @@ -1,10 +1,10 @@ #slideshow { position: relative; - margin-top: -295px; + // margin-top: -295px; // top: -185px; z-index: -1; @media #{$small-only} { - margin-top: -140px; + // margin-top: -140px; max-height: 230px; } .metaslider {