Landing page redesign

.stylelintrc

@@ -6,7 +6,7 @@
   "rules": {
     "order/properties-alphabetical-order": true,
     "at-rule-no-unknown": [ true, {
-      "ignoreAtRules": ["extend", "include"]
-    } ],
+      "ignoreAtRules": ["extend", "include", "mixin"]
+    } ]
   }
 }

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",

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);
+    });
+  });
+}

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;
+    }
+  }
+}

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;
       }

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;
   }

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;
   }
 

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);
     }
   }

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;
 

templates/_layout.html

@@ -32,7 +32,7 @@
   {% endblock %}
 </head>
 
-<body>
+<body class="is-paper">
 <!-- Google Tag Manager -->
 <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-K9KCMZ"
 height="0" width="0"
@@ -46,10 +46,18 @@
 
 {% include 'shared/header.html' %}
 
+<script src="{{ versioned_static('js/navigation.js') }}"></script>
+<script src="/static/js/src/libs/global-nav/global-nav.js"></script>
+<script>
+  initNavDropdowns(".p-navigation__item--dropdown-toggle");
+</script>
+
 <main id="main-content">
   {% block content %}{% endblock content %}
 </main>
 
+{% include "footer.html" %}
+
 <script type="text/template" id="cookie-warning-template">
   <div class="cookie-policy" style="position: fixed; bottom: 0; width: 100%;">
     <div class="row">
@@ -69,62 +77,6 @@
   </div>
 </script>
 
-<footer class="p-strip--suru-top has-accent is-dark" style="background-image: url('https://assets.ubuntu.com/v1/8951dc67-suru-left.svg'), linear-gradient(266deg, #044f66, #022935);background-size: auto 100%, cover;">
-  <div class="row">
-    <div class="col-8">
-        <p class="u-no-max-width">&copy; {{ current_year }} Canonical Ltd. Ubuntu and Canonical are registered trademarks of Canonical Ltd.</p>
-        <ul class="p-inline-list--middot is-dark">
-          <li class="p-inline-list__item">
-            <a class="p-link--inverted p-link--external" href="https://www.ubuntu.com/legal">Legal Information</a>
-          </li>
-          <li class="p-inline-list__item">
-            <a href="" class="p-link--inverted js-revoke-cookie-manager">Manage your tracker settings</a>
-          </li>
-          <li class="p-inline-list__item">
-            <a class="p-link--inverted" href="{{ external_urls.issues }}">Report a bug on this site</a>
-          </li>
-        </ul>
-        <nav>
-          <ul class="p-inline-list--middot is-dark">
-            <li class="p-inline-list__item">
-              <a class="p-link--inverted p-link--external" href="{{ external_urls.docs }}">Docs</a>
-            </li>
-            <li class="p-inline-list__item">
-              <a class="p-link--inverted" href="{{ url_for('jaasai.community') }}">Community</a>
-            </li>
-            <li class="p-inline-list__item">
-              <a class="p-link--inverted p-link--external" href="{{ external_urls.blog }}">Blog</a>
-            </li>
-            <li class="p-inline-list__item">
-              <a class="p-link--inverted p-link--external" href="{{ external_urls.docs }}/installing">Install Juju</a>
-            </li>
-          </ul>
-          <span class="u-off-screen">
-            <a href="#">Go to the top of the page</a>
-          </span>
-      </nav>
-    </div>
-    <div class="col-4 u-align--right">
-      <ul class="p-inline-list">
-        <li class="p-inline-list__item">
-            <a class="p-icon--facebook" href="http://www.facebook.com/ubuntucloud" target="_blank" rel="noopener noreferrer">
-              Facebook
-            </a>
-        </li>
-        <li class="p-inline-list__item">
-          <a class="p-icon--twitter" href="http://www.twitter.com/juju_devops" target="_blank" rel="noopener noreferrer">
-            Twitter
-          </a>
-        </li>
-        <li class="p-inline-list__item">
-          <a class="p-icon--youtube" href="http://youtube.com/jujucharms" target="_blank" rel="noopener noreferrer">
-            Youtube
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</footer>
 <!-- begin usabilla live embed code -->
 <script type="text/javascript">/*{literal}<![CDATA[*/window.lightningjs||function(c){function g(b,d){d&&(d+=(/\?/.test(d)?"&":"?")+"lv=1");c[b]||function(){var i=window,h=document,j=b,g=h.location.protocol,l="load",k=0;(function(){function b(){a.P(l);a.w=1;c[j]("_load")}c[j]=function(){function m(){m.id=e;return c[j].apply(m,arguments)}var b,e=++k;b=this&&this!=i?this.id||0:0;(a.s=a.s||[]).push([e,b,arguments]);m.then=function(b,c,h){var d=a.fh[e]=a.fh[e]||[],j=a.eh[e]=a.eh[e]||[],f=a.ph[e]=a.ph[e]||[];b&&d.push(b);c&&j.push(c);h&&f.push(h);return m};return m};var a=c[j]._={};a.fh={};a.eh={};a.ph={};a.l=d?d.replace(/^\/\//,(g=="https:"?g:"http:")+"//"):d;a.p={0:+new Date};a.P=function(b){a.p[b]=new Date-a.p[0]};a.w&&b();i.addEventListener?i.addEventListener(l,b,!1):i.attachEvent("on"+l,b);var q=function(){function b(){return["<head></head><",c,' onload="var d=',n,";d.getElementsByTagName('head')[0].",d,"(d.",g,"('script')).",i,"='",a.l,"'\"></",c,">"].join("")}var c="body",e=h[c];if(!e)return setTimeout(q,100);a.P(1);var d="appendChild",g="createElement",i="src",k=h[g]("div"),l=k[d](h[g]("div")),f=h[g]("iframe"),n="document",p;k.style.display="none";e.insertBefore(k,e.firstChild).id=o+"-"+j;f.frameBorder="0";f.id=o+"-frame-"+j;/MSIE[ ]+6/.test(navigator.userAgent)&&(f[i]="javascript:false");f.allowTransparency="true";l[d](f);try{f.contentWindow[n].open()}catch(s){a.domain=h.domain,p="javascript:var d="+n+".open();d.domain='"+h.domain+"';",f[i]=p+"void(0);"}try{var r=f.contentWindow[n];r.write(b());r.close()}catch(t){f[i]=p+'d.write("'+b().replace(/"/g,String.fromCharCode(92)+'"')+'");d.close();'}a.P(2)};a.l&&setTimeout(q,0)})()}();c[b].lv="1";return c[b]}var o="lightningjs",k=window[o]=g(o);k.require=g;k.modules=c}({});
 window.usabilla_live = lightningjs.require("usabilla_live", "//w.usabilla.com/3dcbd8f54975.js");