From: Stephen Cameron Date: Thu, 26 Sep 2019 16:13:37 +0000 (+0200) Subject: WIP #3053 @7.5 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=a5c098be236fb4e23cf73195fa8db1572b2bf81e;p=ccv-wordpress.git WIP #3053 @7.5 --- diff --git a/wp-content/themes/CCV/app/setup.php b/wp-content/themes/CCV/app/setup.php index 232b85d..9785ff0 100755 --- a/wp-content/themes/CCV/app/setup.php +++ b/wp-content/themes/CCV/app/setup.php @@ -93,12 +93,15 @@ add_action('widgets_init', function () { ]; register_sidebar([ - 'name' => __('Primary', 'sage'), - 'id' => 'sidebar-primary' - ] + $config); - + 'name' => __('Footer Column 1', 'ccv'), + 'id' => 'sidebar-footer-1' + ] + $config); + register_sidebar([ + 'name' => __('Footer Column 2', 'ccv'), + 'id' => 'sidebar-footer-2' + ] + $config); register_sidebar([ - 'name' => __('Footer', 'sage'), - 'id' => 'sidebar-footer' - ] + $config); + 'name' => __('Footer Copyright', 'ccv'), + 'id' => 'sidebar-footer-copyright' + ] + $config); }); diff --git a/wp-content/themes/CCV/resources/assets/images/logo.svg b/wp-content/themes/CCV/resources/assets/images/logo.svg new file mode 100644 index 0000000..eef1c25 --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/images/logo.svg @@ -0,0 +1 @@ + diff --git a/wp-content/themes/CCV/resources/assets/styles/app.styl b/wp-content/themes/CCV/resources/assets/styles/app.styl index 9011bc7..d3bcac7 100644 --- a/wp-content/themes/CCV/resources/assets/styles/app.styl +++ b/wp-content/themes/CCV/resources/assets/styles/app.styl @@ -6,10 +6,12 @@ @import 'common/setup' @import 'common/mixins' @import 'common/debug' +@import 'common/global' +@import 'common/layout' +@import 'common/spacing' // Extracted components or custom styles that can't be done with utilities -@import 'common/global' -//@import 'components/*' +@import 'components/*' //@import 'pages/*' // Utilities go last in source order so they can diff --git a/wp-content/themes/CCV/resources/assets/styles/common/debug.styl b/wp-content/themes/CCV/resources/assets/styles/common/debug.styl index 749f038..e3e09dd 100644 --- a/wp-content/themes/CCV/resources/assets/styles/common/debug.styl +++ b/wp-content/themes/CCV/resources/assets/styles/common/debug.styl @@ -13,10 +13,10 @@ if ($debug.overlays) opacity: 0.2 !important html - lost-utility: overlay ($content-max-width) 1 10px theme('colors.green.700'); + lost-utility: overlay ($base-width) 1 10px theme('colors.green.700'); body - lost-utility: overlay ($base-width * 0.8) 1 2px theme('colors.blue.300'); + lost-utility: overlay ($content-max-width * 0.9) 1 2px theme('colors.blue.300'); // Centre line &:after diff --git a/wp-content/themes/CCV/resources/assets/styles/common/global.styl b/wp-content/themes/CCV/resources/assets/styles/common/global.styl index ad5e328..a75592b 100644 --- a/wp-content/themes/CCV/resources/assets/styles/common/global.styl +++ b/wp-content/themes/CCV/resources/assets/styles/common/global.styl @@ -1,5 +1,5 @@ html - font-size: 22px // Base used for REM calculations + font-size: $font-size-base // Base used for REM calculations body min-width: 320px diff --git a/wp-content/themes/CCV/resources/assets/styles/common/layout.styl b/wp-content/themes/CCV/resources/assets/styles/common/layout.styl new file mode 100644 index 0000000..8579835 --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/styles/common/layout.styl @@ -0,0 +1,39 @@ +// Make sure widget has height when column flex align-items is set +// This is for widgets that don't take up height on their own, like +// the flexible background image. Ideally the parent column shouldn't +// have an alignment set (so it stretches) but this doesn't seem to do any +// harm and it's more intuitive behaviour... +.elementor-widget-wrap + height: 100% + +.container, +.elementor-section-boxed > .elementor-container + horizontal-spacing() + center($content-max-width) + + // Account for the extra padding Elementor adds with the "extended" column gap (15px) + &.elementor-column-gap-extended + padding-left: s('calc(%s - 15px)', $horizontal-gutter) + padding-right: @padding-left + + // Nested containers should have no padding + .elementor-container, &.elementor-column-gap-no + padding-left: 0 + padding-right: 0 + +.elementor-section-wrap > .elementor-section + vertical-spacing() + + +// Override default spacing between widgets +.elementor-widget:not(:last-child) + constrain(margin-bottom, $vertical-gutter) // Set margin bottom to standard gutter + +// Get rid of default 10px padding around elements +.elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated + padding: 0 + +.elementor-column-gap-wide > .elementor-row > .elementor-column > .elementor-element-populated + +below(450px) + padding-left: 0 + padding-right: 0 diff --git a/wp-content/themes/CCV/resources/assets/styles/common/mixins.styl b/wp-content/themes/CCV/resources/assets/styles/common/mixins.styl index b2ecaa7..900149e 100644 --- a/wp-content/themes/CCV/resources/assets/styles/common/mixins.styl +++ b/wp-content/themes/CCV/resources/assets/styles/common/mixins.styl @@ -77,7 +77,7 @@ r(value) u = unit(value) if (u is 'px') - return unit(value / $font-size.base, 'rem') + return unit(value / $font-size-base, 'rem') else return value diff --git a/wp-content/themes/CCV/resources/assets/styles/common/setup.styl b/wp-content/themes/CCV/resources/assets/styles/common/setup.styl index 744fe20..741acd7 100644 --- a/wp-content/themes/CCV/resources/assets/styles/common/setup.styl +++ b/wp-content/themes/CCV/resources/assets/styles/common/setup.styl @@ -1,15 +1,16 @@ // General Setup $debug = { - overlays: false, - outlines: false, + //overlays: true, + //outlines: true, } $base-width = 1920px // Basis for vw unit calculations on large screens -$content-max-width = $base-width * 0.9 // Allows 5% either side +$content-max-width = $base-width // No extra padding added +$font-size-base = 22px // Used for REM calculations and starting size // Gutters (assumed to always be a vw, vh or % unit) $horizontal-gutter = 5vw -$vertical-gutter = 5vw +$vertical-gutter = 7.5vw // Breakpoints in Rupture (https://github.com/jescalan/rupture) $breakpoint-columns = 768px // NOTE: this should align with the 'sm' screen value in tailwind.config.js diff --git a/wp-content/themes/CCV/resources/assets/styles/common/spacing.styl b/wp-content/themes/CCV/resources/assets/styles/common/spacing.styl new file mode 100644 index 0000000..516131f --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/styles/common/spacing.styl @@ -0,0 +1,74 @@ +// Generate utility classes for padding/margin based on vw units +// This will generate classes like pt-1v, pt-2v, pr-1v etc. + +$vw-spacing = { + '1': 2.5vw, + '2': 5vw, + '3': 7.5vw, + '4': 10vw, + '5': 12.5vw, +} + +$sides = { + t: top, + r: right, + b: bottom, + l: left, + x: horizontal, // special case for both left & right padding + y: vertical, // special case for both top & bottom padding +} + +// Generate classes with responsive variations +@responsive + for counter, vwAmount in $vw-spacing + + // First, generate classes for all sides + grid gaps... + + // Padding (p-1v, p-2v etc) + .p-{counter}v + constrain(padding, vwAmount) + + // Margins (m-1v, m-2v etc) + .m-{counter}v + constrain(margin, vwAmount) + + // Negative margins (-m-1v, -m-2v etc) + .-m-{counter}v + constrain(margin, - vwAmount) + + + // Next, generate classes for individual sides + for sideAbbreviation, side in $sides + + // Padding utilities (pt, pr, pb, pl, px, py) + .p{sideAbbreviation}-{counter}v + $property = s('padding-%s', side) + + if (side is 'horizontal') + horizontal-spacing(vwAmount) + else if (side is 'vertical') + vertical-spacing(vwAmount) + else + constrain($property, vwAmount) + + // Margin utilities (mt, mr, mb, ml, mx, my) + .m{sideAbbreviation}-{counter}v + $property = s('margin-%s', side) + + if (side is 'horizontal') + horizontal-spacing(vwAmount, 'margin') + else if (side is 'vertical') + vertical-spacing(vwAmount, 'margin') + else + constrain($property, vwAmount) + + // Negative margin utilities (-mt, -mr, -mb, -ml, -mx, -my) + .-m{sideAbbreviation}-{counter}v + $property = s('margin-%s', side) + + if (side is 'horizontal') + horizontal-spacing( - vwAmount, 'margin') + else if (side is 'vertical') + vertical-spacing( - vwAmount, 'margin') + else + constrain($property, - vwAmount) diff --git a/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl b/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl new file mode 100644 index 0000000..b2800db --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/styles/components/navigation.styl @@ -0,0 +1,23 @@ +.nav-primary + + .menu-list + @apply flex + + .menu-item + @apply block mx-5 + @apply border-b-2 border-transparent // Reserve space for active border + @apply py-1 leading-tight // Adjust active border spacing + + &.current-menu-item + @apply border-pink + + &:last-child + @apply mr-0 // So menu sits flush with edge of content area + + a + @apply whitespace-no-wrap + transition: color 0.3s + + &:hover + @apply text-pink + diff --git a/wp-content/themes/CCV/resources/views/layouts/app.blade.php b/wp-content/themes/CCV/resources/views/layouts/app.blade.php index 08c1d8b..e30ce92 100644 --- a/wp-content/themes/CCV/resources/views/layouts/app.blade.php +++ b/wp-content/themes/CCV/resources/views/layouts/app.blade.php @@ -2,22 +2,22 @@ @include('partials.head') - + @php(wp_body_open()) @php(do_action('get_header')) @include('partials.header') -

- @yield('content') -

+ @yield('content') +

- @hasSection('sidebar') - - @endif -

+ {{-- + @hasSection('sidebar') + + @endif + --}} @php(do_action('get_footer')) @include('partials.footer') diff --git a/wp-content/themes/CCV/resources/views/partials/footer.blade.php b/wp-content/themes/CCV/resources/views/partials/footer.blade.php index ee9095c..e9dd92a 100644 --- a/wp-content/themes/CCV/resources/views/partials/footer.blade.php +++ b/wp-content/themes/CCV/resources/views/partials/footer.blade.php @@ -1,5 +1,17 @@ -