diff --git a/.DS_Store b/.DS_Store index c8db5615..60537b22 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/gulp-tasks/paths.js b/gulp-tasks/paths.js index 5cb93b2a..b6af2e76 100755 --- a/gulp-tasks/paths.js +++ b/gulp-tasks/paths.js @@ -27,6 +27,11 @@ module.exports = { src: 'src/www/wmcads-website.js', minName: 'wmcads-website.min.js', lint: true + }, + { + src: 'src/www/wmcads-templates.js', + minName: 'wmcads-templates.min.js', + lint: true } ], output: 'build/js/' // Output location of minified JS files diff --git a/src/wmcads/assets/img/logo.svg b/src/wmcads/assets/img/logo.svg index 2b69e646..3200e7ec 100644 --- a/src/wmcads/assets/img/logo.svg +++ b/src/wmcads/assets/img/logo.svg @@ -1 +1,11 @@ -logo \ No newline at end of file + + + + + + + + + + + diff --git a/src/wmcads/assets/sass/_utilities.scss b/src/wmcads/assets/sass/_utilities.scss index 03bd521b..9bd8a3e9 100755 --- a/src/wmcads/assets/sass/_utilities.scss +++ b/src/wmcads/assets/sass/_utilities.scss @@ -165,13 +165,13 @@ body { // Show/hide on desktop devices only .wmcads-hide-mobile { @media screen and (max-width: $breakpoint-md) { - display: none !important; + display: none; } } .wmcads-hide-desktop { @media screen and (min-width: $breakpoint-md) { - display: none !important; + display: none; } } diff --git a/src/wmcads/assets/sass/_vars.scss b/src/wmcads/assets/sass/_vars.scss index 6e60967a..4c40efbb 100755 --- a/src/wmcads/assets/sass/_vars.scss +++ b/src/wmcads/assets/sass/_vars.scss @@ -44,7 +44,7 @@ $black: #000000; } @font-face { - font-family: "Noto Sans Display"; + font-family: "Noto Sans Display Bold"; font-style: normal; font-weight: bold; // sass-lint:disable-block indentation @@ -56,6 +56,7 @@ $black: #000000; // TEXT $text-color: get-color($black); $x-font-family: "Noto Sans Display", sans-serif; +$x-font-family-bold: "Noto Sans Display Bold", sans-serif; $x-heading-font-family: "DM Sans", sans-serif; // Base font size and line height diff --git a/src/wmcads/assets/sass/wmcads-grid/_grid-css-grid.scss b/src/wmcads/assets/sass/wmcads-grid/_grid-css-grid.scss new file mode 100644 index 00000000..c225944e --- /dev/null +++ b/src/wmcads/assets/sass/wmcads-grid/_grid-css-grid.scss @@ -0,0 +1,36 @@ +// Creates a css-grid layout for content cards +.wmcads-css-grid { + display: inline; + + &-4-col { + display: grid; + grid-gap: $size-lg; + grid-template-columns: repeat(auto-fit, minmax(208px, 1fr)); + } + + &-3-col { + display: grid; + grid-gap: $size-lg; + grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); + } + + &-2-col { + display: grid; + grid-gap: $size-lg; + grid-template-columns: repeat(auto-fit, minmax(448px, 1fr)); + + @media (max-width: $breakpoint-sm) { + grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); + } + } + + &-block { + &--double { + grid-column: auto / span 2; + + @media (max-width: $breakpoint-sm) { + grid-column: auto / span 1; + } + } + } +} diff --git a/src/wmcads/assets/sass/wmcads-grid/_wmcads-grid.scss b/src/wmcads/assets/sass/wmcads-grid/_wmcads-grid.scss index ffb1f5ea..bd355d4d 100755 --- a/src/wmcads/assets/sass/wmcads-grid/_wmcads-grid.scss +++ b/src/wmcads/assets/sass/wmcads-grid/_wmcads-grid.scss @@ -34,5 +34,6 @@ textarea, } // Import grid components +@import "grid-css-grid"; @import "grid-cols"; @import "grid-spacing"; diff --git a/src/wmcads/assets/sass/wmcads-grid/grid.scss b/src/wmcads/assets/sass/wmcads-grid/grid.scss index 9a9d834b..4c00cb14 100644 --- a/src/wmcads/assets/sass/wmcads-grid/grid.scss +++ b/src/wmcads/assets/sass/wmcads-grid/grid.scss @@ -38,6 +38,7 @@ } // Import grid components + @import "grid-css-grid"; @import "grid-cols"; @import "grid-spacing"; diff --git a/src/wmcads/components/button/_button.scss b/src/wmcads/components/button/_button.scss index 86d51859..3ad4f15c 100755 --- a/src/wmcads/components/button/_button.scss +++ b/src/wmcads/components/button/_button.scss @@ -13,6 +13,7 @@ $btn-transition: ease-in-out background-color 0.2s, ease-in-out border 0.2s; border-radius: $btn-border-radius; color: $white; background-color: get-color(primary); + font-family: $x-font-family-bold; font-size: 1rem; font-weight: bold; text-align: center; diff --git a/src/wmcads/components/content-card/_content-card.njk b/src/wmcads/components/content-card/_content-card.njk index 174c3b68..3ae8ad4d 100755 --- a/src/wmcads/components/content-card/_content-card.njk +++ b/src/wmcads/components/content-card/_content-card.njk @@ -15,7 +15,7 @@ <{{tag}}{{attributes | safe}} class="wmcads-content-card{{"--blue" if params.isCta else "" }} {{"wmcads-content-card--event" if params.isEvent else "" }} {{"wmcads-content-card--news" if params.isNews else "" }} {{"wmcads-css-grid-block--double" if params.isDoubleCard else "" }} "> {% if(params.src) %} content image + src="https://www.wmca.org.uk/media/3415/wmca-bournville-131.jpg{{"?anchor=center&mode=crop&width=920&height=300&rnd=132122595620000000" if params.isNewsFirst else "" }}{{"?anchor=center&mode=crop&width=480&height=357&rnd=132122595620000000" if params.isNewsSub else "" }}{{"?anchor=center&mode=crop&width=896&height=334&rnd=132122595620000000" if params.isSrcDefault else "" }}{{"?anchor=center&mode=crop&width=1500&height=393&rnd=132122595620000000" if params.isDoubleCard else "" }}{{"?anchor=center&mode=crop&width=600&height=334&rnd=132122595620000000" if params.isThirdCard else "" }}{{"?anchor=center&mode=crop&width=700&height=334&rnd=132122595620000000" if params.isDefault else "" }}" alt="content image"> {% endif %} {% if(params.isCta) %}
diff --git a/src/wmcads/components/content-card/_content-card.scss b/src/wmcads/components/content-card/_content-card.scss index 54d9828a..a6734305 100755 --- a/src/wmcads/components/content-card/_content-card.scss +++ b/src/wmcads/components/content-card/_content-card.scss @@ -8,6 +8,10 @@ &:hover, &:focus { box-shadow: inset 0 0 0 1px get-color(primary); + + img { + padding: 1px; + } } } @@ -19,10 +23,6 @@ background-color: $white; text-decoration: none; - @media screen and (max-width: $breakpoint-sm) { - margin: 0 0 $size-lg 0; - } - @at-root a#{&} { display: block; color: get-color(text); @@ -74,10 +74,9 @@ img { height: 180px; - padding: 1px; object-fit: cover; - @media screen and (max-width: $breakpoint-sm) { + @media screen and (max-width: $breakpoint-lg) { height: auto; } } diff --git a/src/wmcads/components/page-header/_page-header.scss b/src/wmcads/components/page-header/_page-header.scss index de20c69b..587a3e6c 100644 --- a/src/wmcads/components/page-header/_page-header.scss +++ b/src/wmcads/components/page-header/_page-header.scss @@ -15,12 +15,11 @@ width: 75%; background-color: get-color(primary); - @media all and (max-width: 400px) { - width: 90%; + @media all and (max-width: $breakpoint-md) { + width: 85%; } h1 { - padding: 20px 20px 20px 30px; color: $white; @media all and (max-width: 400px) { @@ -31,6 +30,7 @@ &-container { height: 420px; + padding: 0 !important; } } } diff --git a/src/wmcads/patterns/header/_example.js b/src/wmcads/patterns/header/_example.js index 88ac5ed4..3b2e612a 100755 --- a/src/wmcads/patterns/header/_example.js +++ b/src/wmcads/patterns/header/_example.js @@ -2,7 +2,7 @@ const headerJs = () => { // get mega menu elements const megaMenus = document.querySelectorAll('.wmcads-mega-menu'); - const mobileMenu = window.matchMedia('(max-width: 767px)'); + const mobileMenu = window.matchMedia('(max-width: 992px)'); /* Mega menu helper functions @@ -272,8 +272,9 @@ const headerJs = () => { // if top level link doesn't have a mega-menu child add class to menu to hide overlay when hovered // has to be added/removed on mouseover to cover menus that have a mix of items with/without mega menus - const isTopLevelWithMenu = topLevelListItem.querySelectorAll('.wmcads-mega-menu__container') - .length; + const isTopLevelWithMenu = topLevelListItem.querySelectorAll( + '.wmcads-mega-menu__container' + ).length; if (isTopLevelWithMenu) { topLevelLink.addEventListener('mouseover', () => { diff --git a/src/wmcads/patterns/header/_header.njk b/src/wmcads/patterns/header/_header.njk index 2c02d61d..508e4e8a 100755 --- a/src/wmcads/patterns/header/_header.njk +++ b/src/wmcads/patterns/header/_header.njk @@ -59,7 +59,7 @@ {% set navItemContent = " and tickets" if navItem.name === "Swift and tickets" else navItem.name -%} {% if params.linkTopLevel -%}{{navItemIcon}} - + {{navItemIcon}}{{ navItemContent }} @@ -78,7 +78,7 @@