diff --git a/.stylelintrc b/.stylelintrc index 41d359ea..4245296e 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -6,7 +6,7 @@ "rules": { "order/properties-alphabetical-order": true, "at-rule-no-unknown": [ true, { - "ignoreAtRules": ["extend", "include"] - } ], + "ignoreAtRules": ["extend", "include", "mixin"] + } ] } } diff --git a/package.json b/package.json index fa5bd357..ace967b6 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "@babel/core": "7.20.12", "@babel/preset-env": "7.20.2", "@canonical/cookie-policy": "3.4.0", - "@canonical/global-nav": "2.7.0", + "@canonical/global-nav": "3.6.0", "@canonical/latest-news": "1.4.1", "@sentry/browser": "5.30.0", "autoprefixer": "10.4.13", @@ -40,11 +40,11 @@ "postcss": "8.4.21", "postcss-cli": "8.3.1", "sass": "1.57.1", - "vanilla-framework": "2.37.1", + "terser-webpack-plugin": "5.3.6", + "vanilla-framework": "^4.3.0", "watch-cli": "0.2.3", "webpack": "5.75.0", - "webpack-cli": "4.10.0", - "terser-webpack-plugin": "5.3.6" + "webpack-cli": "4.10.0" }, "devDependencies": { "eslint": "7.32.0", diff --git a/static/js/navigation.js b/static/js/navigation.js new file mode 100644 index 00000000..206b0f22 --- /dev/null +++ b/static/js/navigation.js @@ -0,0 +1,50 @@ +function toggleDropdown(toggle, open) { + const parentElement = toggle.parentNode; + const dropdown = document.getElementById( + toggle.getAttribute("aria-controls") + ); + dropdown.setAttribute("aria-hidden", !open); + + if (open) { + parentElement.classList.add("is-active", "is-selected"); + } else { + parentElement.classList.remove("is-active", "is-selected"); + } +} + +function closeAllDropdowns(toggles) { + toggles.forEach((toggle) => { + toggleDropdown(toggle, false); + }); +} + +function handleClickOutside(toggles, containerClass) { + document.addEventListener("click", (event) => { + const {target} = event; + + if (target.closest) { + if (!target.closest(containerClass)) { + closeAllDropdowns(toggles); + } + } + }); +} + +function initNavDropdowns(containerClass) { + const toggles = [].slice.call( + document.querySelectorAll(`${containerClass } [aria-controls]`) + ); + + handleClickOutside(toggles, containerClass); + + toggles.forEach((toggle) => { + toggle.addEventListener("click", (e) => { + e.preventDefault(); + + const isOpen = e.target.parentNode.classList.contains("is-active"); + + closeAllDropdowns(toggles); + toggleDropdown(toggle, !isOpen); + }); + }); +} diff --git a/static/sass/_patterns_p-suru.scss b/static/sass/_patterns_p-suru.scss new file mode 100644 index 00000000..60d12d12 --- /dev/null +++ b/static/sass/_patterns_p-suru.scss @@ -0,0 +1,12 @@ +@mixin p-suru { + .p-suru--bottom-right { + background-image: url("#{$assets-path}a6474c5b-Suru%20top%20%20right%20angle.png"); + background-position: bottom right; + background-repeat: no-repeat; + background-size: 200px 149px; + + @media only screen and (min-width: $breakpoint-large) { + background-size: contain; + } + } +} diff --git a/static/sass/custom/_entities.scss b/static/sass/custom/_entities.scss index ca7dcab4..b6299d06 100644 --- a/static/sass/custom/_entities.scss +++ b/static/sass/custom/_entities.scss @@ -18,7 +18,7 @@ .entity { &__header { - @media (max-width: $breakpoint-medium) { + @media (max-width: $breakpoint-large - 1) { .series-tags { margin-bottom: 1rem; } diff --git a/static/sass/custom/_header.scss b/static/sass/custom/_header.scss index fedade2b..cbbca5ec 100644 --- a/static/sass/custom/_header.scss +++ b/static/sass/custom/_header.scss @@ -7,7 +7,7 @@ $breakpoint-navigation: 980px; order: 2; } -@media (min-width: $breakpoint-medium) and (max-width: $breakpoint-navigation) { +@media (min-width: 768px) and (max-width: $breakpoint-navigation) { .is-secondary-link { display: none !important; } diff --git a/static/sass/custom/_homepage-hero-promo.scss b/static/sass/custom/_homepage-hero-promo.scss index b1533890..5f8c01e2 100644 --- a/static/sass/custom/_homepage-hero-promo.scss +++ b/static/sass/custom/_homepage-hero-promo.scss @@ -1,7 +1,7 @@ // Homepage promo takeover .homepage-hero-promos { - @media (max-width: $breakpoint-medium) { + @media (max-width: $breakpoint-large - 1) { margin-top: 25vw; } diff --git a/static/sass/custom/_patterns_strips.scss b/static/sass/custom/_patterns_strips.scss index eaebfded..6a141465 100644 --- a/static/sass/custom/_patterns_strips.scss +++ b/static/sass/custom/_patterns_strips.scss @@ -163,7 +163,7 @@ background-repeat: no-repeat; background-size: 50% 100%, 20% 100%, 100% 100%, cover; - @media (max-width: $breakpoint-medium) { + @media (max-width: $breakpoint-large - 1) { background: #f0f5f7; } } @@ -192,7 +192,7 @@ background-repeat: no-repeat; background-size: 40% 100%, 80% 60%, 100% 100%; - @media (max-width: $breakpoint-medium) { + @media (max-width: $breakpoint-large - 1) { background: rgb(240, 245, 247); } } diff --git a/static/sass/styles.scss b/static/sass/styles.scss index 9d48764f..727b8fa6 100644 --- a/static/sass/styles.scss +++ b/static/sass/styles.scss @@ -35,9 +35,11 @@ $breakpoint-navigation-threshold: $breakpoint-large; @import 'custom/linkable-heading'; @import 'custom/case_studies'; @import 'custom/patterns_hero-tab'; +@import "patterns_p-suru"; @include jaas-hero-tab; @include jaas-p-strips; +@include p-suru; // Homepage Card footer margin .p-card.is-flex { @@ -64,15 +66,6 @@ $breakpoint-navigation-threshold: $breakpoint-large; } } -.p-card__footer { - margin-top: 1rem; - - &-link { - display: block; - margin: 0.5rem 0; - } -} - .play-video-cta { display: inline-block; position: relative; @@ -92,6 +85,39 @@ $breakpoint-navigation-threshold: $breakpoint-large; } } +.footer { + background-color: #222; + + a { + color: #69c; + + &:visited { + color: #a679d2; + } + } +} + +.homepage-tabs { + @media only screen and (min-width: $breakpoint-large) { + margin-top: 88px; + } +} + +.homepage-tabs-content { + display: flex; + flex-direction: column; + height: 100%; +} + +.tabs-content-wrapper { + flex: 1; +} + +.p-icon--github-white { + background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDI0IiBoZWlnaHQ9Ijk5OSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNTEyIDBDMjI5LjI1IDAgMCAyMjkuMjUgMCA1MTJjMCAyMjYuMjUgMTQ2LjY5IDQxOC4xMiAzNTAuMTYgNDg1LjgxIDI1LjU5IDQuNjkgMzQuOTMtMTEuMTIgMzQuOTMtMjQuNjIgMC0xMi4xOS0uNDctNTIuNTctLjcxLTk1LjMxQzI0MiA5MDguODEgMjExLjkxIDgxNy41IDIxMS45MSA4MTcuNWMtMjMuMzItNTkuMTItNTYuODUtNzQuODgtNTYuODUtNzQuODgtNDYuNTMtMzEuNzQgMy41My0zMS4xMiAzLjUzLTMxLjEyIDUxLjQxIDMuNTYgNzguNDcgNTIuNzUgNzguNDcgNTIuNzUgNDUuNjkgNzguMjUgMTE5Ljg4IDU1LjYzIDE0OSA0Mi41IDQuNjYtMzMgMTcuOTEtNTUuNjMgMzIuNS02OC4zNy0xMTMuNjUtMTIuOTQtMjMzLjIyLTU2Ljg4LTIzMy4yMi0yNTMuMDcgMC01NS45NCAxOS45Ny0xMDEuNTYgNTIuNjYtMTM3LjQtNS4yMi0xMy0yMi44NC02NS4xIDUuMDYtMTM1LjU3IDAgMCA0Mi45NC0xMy43NSAxNDAuODEgNTIuNSA0MC44Mi0xMS40IDg0LjYtMTcuMDMgMTI4LjEzLTE3LjIyIDQzLjUuMTkgODcuMzEgNS44OCAxMjguMTkgMTcuMjkgOTcuNjktNjYuMzIgMTQwLjY5LTUyLjUgMTQwLjY5LTUyLjUgMjggNzAuNTMgMTAuMzcgMTIyLjU2IDUuMTIgMTM1LjUgMzIuODEgMzUuODQgNTIuNjIgODEuNDcgNTIuNjIgMTM3LjQgMCAxOTYuNjktMTE5Ljc0IDI0MC0yMzMuODEgMjUyLjY5IDE4LjQ0IDE1Ljg4IDM0Ljc1IDQ3IDM0Ljc1IDk0Ljc1IDAgNjguNDQtLjY4IDEyMy42My0uNjggMTQwLjUgMCAxMy42MyA5LjMxIDI5LjU1IDM1LjI0IDI0LjU2Qzg3Ny40NCA5MzAgMTAyNCA3MzguMTIgMTAyNCA1MTIgMTAyNCAyMjkuMjUgNzk0Ljc1IDAgNTEyIDB6Ii8+PC9zdmc+Cg=="); +} + + // experts expert-cards $color-experts-highlight: #e95420; @@ -182,7 +208,7 @@ $color-experts-highlight: #e95420; // p-strip with bg image .has-image-bg { - @media (max-width: $breakpoint-medium) { + @media (max-width: $breakpoint-large - 1) { background: none !important; } } @@ -259,7 +285,7 @@ div .p-accordion__tab[aria-expanded] { } // Modelling steps on the homepage. -@media (min-width: $breakpoint-small) and (max-width: $breakpoint-medium) { +@media (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) { .step-block { display: flex; diff --git a/templates/_layout.html b/templates/_layout.html index 61f937e7..76c9d68e 100644 --- a/templates/_layout.html +++ b/templates/_layout.html @@ -32,7 +32,7 @@ {% endblock %} - +