From 0aad6af2997776b4e8bfdeca0bfa854508d63d7e Mon Sep 17 00:00:00 2001 From: Eric Rihlmann Date: Fri, 12 May 2017 15:17:24 -0400 Subject: [PATCH 1/7] Sync Sass Settings with Foundation Defaults --- assets/scss/global/_settings.scss | 13 ++++++------- assets/scss/modules/_navigation.scss | 4 ++-- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/assets/scss/global/_settings.scss b/assets/scss/global/_settings.scss index 79db2f525..2d32ea611 100644 --- a/assets/scss/global/_settings.scss +++ b/assets/scss/global/_settings.scss @@ -61,10 +61,9 @@ $medium-gray: #cacaca; $dark-gray: #8a8a8a; $black: #0a0a0a; $white: #fefefe; -$outer-space: #2c3840; $body-background: $white; $body-font-color: $black; -$body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; +$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; $body-antialiased: true; $global-margin: 1rem; $global-padding: 1rem; @@ -434,7 +433,7 @@ $meter-fill-bad: $alert-color; $offcanvas-size: 250px; $offcanvas-vertical-size: 250px; -$offcanvas-background: $outer-space; +$offcanvas-background: $light-gray; $offcanvas-shadow: 0 0 10px rgba($black, 0.7); $offcanvas-push-zindex: 1; $offcanvas-overlap-zindex: 10; @@ -589,7 +588,7 @@ $thumbnail-radius: $global-radius; // 35. Title Bar // ------------- -$titlebar-background: $outer-space; +$titlebar-background: $black; $titlebar-color: $white; $titlebar-padding: 0.5rem; $titlebar-text-font-weight: bold; @@ -613,9 +612,9 @@ $tooltip-radius: $global-radius; // 37. Top Bar // ----------- -$topbar-padding: 0; -$topbar-background: $outer-space; -$topbar-submenu-background: $outer-space; +$topbar-padding: 0.5rem; +$topbar-background: $light-gray; +$topbar-submenu-background: $topbar-background; $topbar-title-spacing: 0.5rem 1rem 0.5rem 0; $topbar-input-width: 200px; $topbar-unstack-breakpoint: medium; diff --git a/assets/scss/modules/_navigation.scss b/assets/scss/modules/_navigation.scss index e8e0e758e..ccd9f819c 100644 --- a/assets/scss/modules/_navigation.scss +++ b/assets/scss/modules/_navigation.scss @@ -36,7 +36,7 @@ } } - .menu .active > a { background-color: lighten($outer-space, 10%); } + .menu .active > a { background-color: lighten($black, 10%); } } @@ -68,7 +68,7 @@ } } - .menu .active > a { background-color: lighten($outer-space, 10%); } + .menu .active > a { background-color: lighten($black, 10%); } .menu>li:not(.menu-text)>a { padding: 1rem; } .menu li:not(:last-child) { border-right: 1px solid #4e4e4e; } From 0a246c720b4715ccc7e832c4fa2e370d3b003232 Mon Sep 17 00:00:00 2001 From: Eric Rihlmann Date: Tue, 16 May 2017 16:13:29 -0400 Subject: [PATCH 2/7] Simplify Navigation Sass and HTML Removed unnecessary styling that deviates from vanilla Foundation. Added new classes to use as selectors in place of Foundation component classes. This prevents additional Foundation components like the Top Bar from being affected by the unique navigation styling. Updated HMTL for Title Bar and Top Bar components to match the Docs for the title. --- assets/scss/global/_settings.scss | 8 +- assets/scss/modules/_navigation.scss | 128 ++++++++++++--------------- header.php | 21 ++--- template-parts/mobile-off-canvas.php | 2 +- template-parts/mobile-top-bar.php | 4 +- 5 files changed, 77 insertions(+), 86 deletions(-) diff --git a/assets/scss/global/_settings.scss b/assets/scss/global/_settings.scss index 2d32ea611..8eb193e97 100644 --- a/assets/scss/global/_settings.scss +++ b/assets/scss/global/_settings.scss @@ -588,12 +588,12 @@ $thumbnail-radius: $global-radius; // 35. Title Bar // ------------- -$titlebar-background: $black; -$titlebar-color: $white; +$titlebar-background: $light-gray; +$titlebar-color: $body-font-color; $titlebar-padding: 0.5rem; $titlebar-text-font-weight: bold; -$titlebar-icon-color: $white; -$titlebar-icon-color-hover: $medium-gray; +$titlebar-icon-color: $body-font-color; +$titlebar-icon-color-hover: $black; $titlebar-icon-spacing: 0.25rem; // 36. Tooltip diff --git a/assets/scss/modules/_navigation.scss b/assets/scss/modules/_navigation.scss index ccd9f819c..35820b9ca 100644 --- a/assets/scss/modules/_navigation.scss +++ b/assets/scss/modules/_navigation.scss @@ -1,95 +1,85 @@ // Navigation breakpoints -.desktop-menu, .top-bar-left { - @include show-for(medium); -} - -#mobile-menu, .title-bar { +.mobile-menu, +.site-title-bar { @include hide-for(medium); } -// Mobile menu -.off-canvas { - > ul.menu { - height: 100vh; - padding: 1rem; - - a { - color: $white; - font-weight: 600; - font-size: rem-calc(18); - opacity: .75; - } +.desktop-menu, +.site-navigation .top-bar-left { + @include show-for(medium); +} - .is-accordion-submenu-parent > a::after { - display: block; - width: 0; - height: 0; - border: inset 6px; - content: ''; - border-bottom-width: 0; - border-top-style: solid; - border-color: $white transparent transparent; - position: absolute; - top: 50%; - margin-top: -3px; - right: 1rem; - } - } - .menu .active > a { background-color: lighten($black, 10%); } +// Site title +.site-mobile-title a { + // placeholder +} +.site-desktop-title a { + font-weight: bold; } -.title-bar-title { - a { - font-size: 1rem; - color: #B9B9B9; - } + + +// Mobile menu +.mobile-menu { + display: none; // prevents repaint caused by JS hiding menu onload } -// Tablet and desktop menu -.top-bar { - .menu .home a { - font-size: 1rem; - color: #B9B9B9; + +.mobile-menu, +.mobile-off-canvas-menu { + + // submenu arrow + .is-accordion-submenu-parent { + > a::after { + border-color: $accordionmenu-arrow-color transparent transparent; + } + &.active > a::after { + border-color: $menu-item-color-active transparent transparent; + } } - .menu a { - color: #e6e6e6; - padding-top: 0; - padding-bottom: 0; + // current page + .current_page_item > a { font-weight: bold; - font-size: 0.8rem; - line-height: 1; + } +} + + - &:hover:not(.button) { - background-color: #42525D; +// Tablet and desktop menu +.desktop-menu { + + // submenu arrow + li.is-dropdown-submenu-parent { + > a::after { + border-color: $accordionmenu-arrow-color transparent transparent; + } + &.active > a::after { + border-color: $menu-item-color-active transparent transparent; } } +} - .menu .active > a { background-color: lighten($black, 10%); } +.site-navigation { + @include breakpoint(small only) { + padding: 0; // prevents container visibility on small screens + } +} - .menu>li:not(.menu-text)>a { padding: 1rem; } - .menu li:not(:last-child) { border-right: 1px solid #4e4e4e; } - .dropdown.menu .submenu { border: 0; } - .dropdown.menu .has-submenu.is-down-arrow a { padding-right: 1rem; } - .dropdown.menu .has-submenu.is-down-arrow > a::after { border: 0; } - .dropdown.menu:first-child > li.is-dropdown-submenu-parent > a::after { display: none; } -} -// Basic styles for post navigation. Nicolas Gallagher's "Micro clearfix" -// https://css-tricks.com/snippets/css/clear-fix/ -.post-navigation:before, -.post-navigation:after { - content: ""; - display: table; +// WP post navigation +.post-navigation { + @include clearfix; } -.post-navigation:after { - clear:both; +.nav-previous { + float:left; } -.nav-previous { float:left; } -.nav-next { float:right; } +.nav-next { + float:right; +} \ No newline at end of file diff --git a/header.php b/header.php index 326ca8443..e748aa43b 100644 --- a/header.php +++ b/header.php @@ -26,19 +26,20 @@ -