Saved: 2017-11-20 02:30
Torey Heinz
committed Nov 20, 2017
commit e7093d4e817224e3085bc3d2349dda93bd8e258c
Showing 4
changed files with
45 additions
and 13 deletions
app/views/pages/layouts/application.liquid
+12
-6
| @@ | @@ -30,15 +30,21 @@ is_layout: true |
| </ul> | |
| </div> | |
| <div class="top-bar-right"> | |
| - | <div class="contact-bar text-center">(616) 956-6800 | <a href="mailto:info@choicecastings.com">info@choicecastings.com</a></div> |
| - | <ul class="dropdown menu" data-dropdown-menu data-alignment="left"> |
| + | <div class="contact-bar"> |
| + | (616) 956-6800 | <a href="mailto:info@choicecastings.com">info@choicecastings.com</a> |
| + | </div> |
| + | <div class="title-bar" data-responsive-toggle="topbar-menu" data-hide-for="medium"> |
| + | <button class="menu-icon" type="button" data-toggle="topbar-menu"></button> |
| + | <div class="title-bar-title">Menu</div> |
| + | </div> |
| + | <ul id="topbar-menu" class="vertical medium-horizontal menu" data-responsive-menu="medium-dropdown" data-alignment="left"> |
| <li><a href="/">Home</a></li> | |
| {% for page in site.pages %} | |
| {% if page.depth == 1 and page.listed? %} | |
| <li> | |
| {% link_to page %} | |
| {% unless page.children.size == 0 %} | |
| - | <ul class="menu"> |
| + | <ul class="nested vertical medium-horizontal menu"> |
| {% for subpage in page.children %} | |
| <li>{% link_to subpage %}</li> | |
| {% endfor %} | |
| @@ | @@ -81,13 +87,13 @@ is_layout: true |
| <li class="menu-text"><img src="{{ 'ChoiceCastingsLogo-web.png' | theme_image_url }}"></li> | |
| </ul> | |
| </div> | |
| - | <div class="column medium-3"> |
| + | <div class="column medium-3 hide-for-small-only"> |
| {% include 'footer-menu-block' with slug: 'solutions' %} | |
| </div> | |
| - | <div class="column medium-3"> |
| + | <div class="column medium-3 hide-for-small-only"> |
| {% include 'footer-menu-block' with slug: 'materials' %} | |
| </div> | |
| - | <div class="column medium-3"> |
| + | <div class="column medium-3 hide-for-small-only"> |
| {% include 'footer-products-menu' %} | |
| </div> | |
| </div> | |
public/javascripts/app.js
+12
-2
| @@ | @@ -3,9 +3,19 @@ |
| $(document).foundation(); | |
| // $(".top-bar").sticky({zIndex:10}); | |
| - | $('nav#top-nav > ul').addClass('dropdown menu') |
| - | $('nav#top-nav > ul ul').addClass('menu') |
| + | // $('nav#top-nav > ul').addClass('dropdown menu') |
| + | // $('nav#top-nav > ul ul').addClass('menu') |
| + | $(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){ |
| + | console.log(newSize); |
| + | console.log(oldSize); |
| + | }); |
| + | |
| + | if (Foundation.MediaQuery.current == 'small') { |
| + | console.log(Foundation.MediaQuery.current); |
| + | // $('#topbar-menu').hide(); |
| + | // $('.is-drilldown').hide(); |
| + | }; |
| function nextSlide() { | |
| slides[currentSlide].className = 'slide'; | |
public/stylesheets/_settings.scss
+5
-5
| @@ | @@ -78,7 +78,7 @@ $foundation-palette: ( |
| ); | |
| $light-gray: #e6e6e6; | |
| $medium-gray: #cacaca; | |
| - | $dark-gray: #8a8a8a; |
| + | $dark-gray: #201E1F; |
| $black: #0a0a0a; | |
| $white: #fefefe; | |
| $body-background: $white; | |
| @@ | @@ -363,9 +363,9 @@ $drilldown-transition: transform 0.15s linear; |
| $drilldown-arrows: true; | |
| $drilldown-padding: $global-menu-padding; | |
| $drilldown-nested-margin: 0; | |
| - | $drilldown-background: $white; |
| + | $drilldown-background: $dark-gray; |
| $drilldown-submenu-padding: $drilldown-padding; | |
| - | $drilldown-submenu-background: $white; |
| + | $drilldown-submenu-background: $dark-gray; |
| $drilldown-arrow-color: $primary-color; | |
| $drilldown-arrow-size: 6px; | |
| @@ | @@ -848,8 +848,8 @@ $tooltip-radius: $global-radius; |
| // ----------- | |
| $topbar-padding: 0.0rem; | |
| - | $topbar-background: #201E1F; |
| - | $topbar-submenu-background: $topbar-background; |
| + | $topbar-background: $dark-gray; |
| + | $topbar-submenu-background: $dark-gray; |
| $topbar-title-spacing: 0.5rem 1rem 0.5rem 0; | |
| $topbar-input-width: 200px; | |
| $topbar-unstack-breakpoint: medium; | |
public/stylesheets/app.scss
+16
-0
| @@ | @@ -82,6 +82,11 @@ html { |
| .top-bar { | |
| box-shadow: 0 1px 2px rgba(0,0,0,0.24); | |
| // background-color: #201E1F; | |
| + | @include breakpoint(small only) { |
| + | .top-bar-left { |
| + | text-align: center; |
| + | } |
| + | } |
| .top-bar-right { | |
| text-align: right; | |
| @@ | @@ -99,11 +104,22 @@ html { |
| background-color: $primary-color; | |
| color: $white; | |
| font-weight: bold; | |
| + | text-align: center; |
| a:hover { | |
| color: $white; | |
| text-decoration: underline; | |
| } | |
| + | |
| + | @include breakpoint(small only) { |
| + | width: 100%; |
| + | border-radius: 0; |
| + | // text-align: right; |
| + | } |
| + | } |
| + | |
| + | .title-bar { |
| + | text-align: left; |
| } | |
| .logo img { | |