feat: /security bubble redesign

package.json

@@ -121,7 +121,7 @@
     "url-polyfill": "1.1.12",
     "url-search-params-polyfill": "8.2.5",
     "use-query-params": "^2.2.1",
-    "vanilla-framework": "4.18.5",
+    "vanilla-framework": "4.20.3",
     "yup": "1.4.0"
   },
   "resolutions": {

requirements.txt

@@ -3,7 +3,7 @@ canonicalwebteam.http==1.0.4
 canonicalwebteam.blog==6.4.4
 canonicalwebteam.search==2.1.1
 canonicalwebteam.templatefinder==1.0.0
-canonicalwebteam.image-template==1.3.1
+canonicalwebteam.image-template==1.5.0
 canonicalwebteam.discourse==5.7.3
 python-dateutil==2.8.2
 pytz==2022.7.1

static/sass/styles.scss

@@ -1780,3 +1780,11 @@ legend {
 .p-table--mobile-card tr td {
   white-space: normal;
 }
+
+// XXX: Custom styling to remove the full-stop after the counter in 'p-stepped-list'
+ol.p-stepped-list.no-full-stop
+  .p-stepped-list__item
+  .p-stepped-list__title::before {
+  content: counter(p-stepped-list-counter);
+  text-align: left;
+}

templates/security/cc.html

@@ -1,113 +1,159 @@
 {% extends "security/base_security.html" %}
 
+{% from "_macros/vf_hero.jinja" import vf_hero %}
+
 {% block title %}Common Criteria{% endblock %}
 
-{% block meta_description %}Technical details on the Common Criteria security certification for Ubuntu Advantage subscribers.{% endblock meta_description %}
+{% block meta_description %}
+  Technical details on the Common Criteria security certification for Ubuntu Advantage subscribers.
+{% endblock meta_description %}
+
+{% block meta_copydoc %}
+  https://docs.google.com/document/d/1JLnHR9Xuuc1t6ojrnBuMWir5XABgf1L7WVpGGtlLaBo/edit#
+{% endblock meta_copydoc %}
 
-{% block meta_copydoc %}https://docs.google.com/document/d/1JLnHR9Xuuc1t6ojrnBuMWir5XABgf1L7WVpGGtlLaBo/edit#{% endblock meta_copydoc %}
+{% block body_class %}
+  is-paper
+{% endblock body_class %}
 
 {% block content %}
 
-<section class="p-strip--suru-topped">
-  <div class="row u-equal-height">
-    <div class="col-8">
-      <span class="u-sv3"><h1>Common Criteria</h1></span>
-      <span class="u-sv3"><p class="p-heading--4">Run high security workloads on the certified configuration of Ubuntu</p></span>
-      <p>Developing and deploying open source workloads on regulated and high security environments requires rigid certifications. <a href="/cloud/public-cloud">Ubuntu Pro</a> and <a href="/pro">Ubuntu Advantage</a> provide access to the necessary artifacts to comply with Common Criteria, an international (ISO/IEC 15408) computer security certification for high security environments.</p>
+  {% call(slot) vf_hero(
+    title_text='Common Criteria',
+    subtitle_text='Run high security workloads on the certified configuration of Ubuntu',
+    layout='50/50'
+    ) -%}
+    {%- if slot == 'description' -%}
       <p>
-        <a href="/security/contact-us" class="p-button--positive js-invoke-modal">Contact us</a>
+        Developing and running open source workloads on regulated and high security environments requires rigid certifications. <a href="/pro">Ubuntu Pro</a> provides access to the necessary artifacts to comply with Common Criteria, an international (ISO/IEC 15408) computer security certification for high security environments.
       </p>
+    {%- endif -%}
+    {%- if slot == 'cta' -%}
+      <a href="/security/contact-us"
+         class="p-button--positive js-invoke-modal">Contact us</a>
+    {%- endif -%}
+  {% endcall -%}
+
+  <section class="p-section">
+    <div class="row--50-50">
+      <hr class="p-rule" />
+      <div class="col">
+        <h2>What is Common Criteria?</h2>
+      </div>
+      <div class="col">
+        <p>
+          Common Criteria (CC) for Information Technology Security Evaluation is an international standard (ISO/IEC IS 15408) for computer security certification, used by Governments, U.S. Federal agencies, financial institutions and many other organizations dealing with sensitive data. It ensures that products are evaluated by licensed laboratories to verify their security properties and that a common methodology is applied in certification.
+        </p>
+        <p>
+          In brief, it is a common methodology to evaluate products' security controls against a set of security claims. The set of security claims is grouped per product and is called a protection profile. There are different protection profiles that apply to different products. The profile Ubuntu derives its security requirements is the Operating System Protection Profile (OSPP).
+        </p>
+      </div>
     </div>
-    <div class="col-4 u-vertically-center u-hide--medium u-hide--small u-align--center">
-      {{ image (
-        url="https://assets.ubuntu.com/v1/7953a068-security-1.svg",
-        alt="",
-        width="224",
-        height="300",
-        hi_def=True,
-        loading="lazy"
-        ) | safe
-      }}
-    </div>
-  </div>
-</section>
+  </section>
 
-<section class="p-strip--light is-bordered">
-  <div class="row">
-    <div class="col-8">
-      <h2>What is Common Criteria?</h2>
-      <p>Common Criteria (CC) for Information Technology Security Evaluation is an international standard (ISO/IEC IS 15408) for computer security certification, used by Governments, U.S. Federal agencies, financial institutions and many other organizations dealing with sensitive data. It ensures that products are evaluated by licensed laboratories to verify their security properties and that a common methodology is applied in certification.</p>
-      <p>In brief, it is a common methodology to evaluate products' security controls against a set of security claims. The set of security claims is grouped per product and is called a protection profile. There are different protection profiles that apply to different products. The profile Ubuntu derives its security requirements is the Operating System Protection Profile (OSPP).</p>
+  <section class="p-section">
+    <div class="row--50-50">
+      <hr class="p-rule" />
+      <div class="col">
+        <h2>
+          Where is
+          <br class="u-hide--small" />
+          Common Criteria accepted?
+        </h2>
+      </div>
+      <div class="col">
+        <p>
+          Internationally a Common Criteria certification is accepted by members of the <a href="https://www.commoncriteriaportal.org/ccra/members/">CCRA</a> agreement and the EU <a href="https://www.sogis.eu/">SOGIS</a> members.
+        </p>
+      </div>
     </div>
-  </div>
-  <div class="u-fixed-width">
-    <hr class="p-rule" />
-  </div>
-  <div class="row">
-    <div class="col-8">
-      <h2>Where is Common Criteria accepted?</h2>
-      <p>Internationally a Common Criteria certification is accepted by members of the <a href="https://www.commoncriteriaportal.org/ccra/members/">CCRA</a> agreement and the EU <a href="https://www.sogis.eu/">SOGIS</a> members. </p>
+  </section>
+
+  <section class="p-section">
+    <div class="p-section--shallow">
+      <div class="row--50-50">
+        <hr class="p-rule" />
+        <div class="col">
+          <h2>What gets certified in Ubuntu under Common Criteria?</h2>
+        </div>
+        <div class="col">
+          <div class="p-section--shallow">
+            <div class="p-section--shallow">
+              <div class="p-image-container is-highlighted">
+                {{ image(url="https://assets.ubuntu.com/v1/fc857049-csec.png",
+                                alt="Csec logo",
+                                width="1800",
+                                height="1013",
+                                hi_def=True,
+                                loading="lazy") | safe
+                }}
+              </div>
+            </div>
+            <p>
+              Ubuntu 18.04 LTS and 16.04 LTS have both been evaluated to assurance level EAL2 through <a href="https://www.fmv.se/en/Our-activities/CSEC---The-Swedish-Certification-Body-for-IT-Security/">CSEC &mdash; The Swedish Certification Body for IT Security</a>. The evaluation testing was performed by atsec Information Security. The following table provides a summary of the releases and platforms that have been certified.
+            </p>
+          </div>
+        </div>
+      </div>
     </div>
-  </div>
-  <div class="u-fixed-width">
-    <hr class="p-rule" />
-  </div>
-  <div class="row">
-    <div class="col-8">
-      <h2>What gets certified in Ubuntu under Common Criteria?</h2>
-      <p>Ubuntu 18.04 LTS and 16.04 LTS have both been evaluated to assurance level EAL2 through <a href="https://www.fmv.se/en/Our-activities/CSEC---The-Swedish-Certification-Body-for-IT-Security/">CSEC – The Swedish Certification Body for IT Security</a>. The evaluation testing was performed by atsec Information Security. The following table provides a summary of the releases and platforms that have been certified.</p>
+    <div class="u-fixed-width">
+      <table class="p-table--mobile-card"
+             aria-label="Common Criteria certification for Ubuntu releases">
+        <thead>
+          <tr>
+            <th>Ubuntu version</th>
+            <th>Platform</th>
+            <th>Certification report</th>
+            <th>Additional information</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th data-heading="Ubuntu version">Ubuntu 16.04 LTS</th>
+            <td data-heading="Platform">x86_64, IBM Power8 and IBM Z</td>
+            <td data-heading="Certification report">
+              <a href="https://www.commoncriteriaportal.org/files/epfiles/Certification%20Report%20Ubuntu%20LTS%2016.04.4.pdf">16.04.4</a>
+            </td>
+            <td data-heading="Additional information">
+              <a href="/security/certifications/docs/cc">Installation instructions</a>
+            </td>
+          </tr>
+          <tr>
+            <th data-heading="Ubuntu version">Ubuntu 18.04 LTS</th>
+            <td data-heading="Platform">x86_64 and IBM Z</td>
+            <td data-heading="Certification report">
+              <a href="https://www.commoncriteriaportal.org/files/epfiles/Certification%20Report%20-%20Canonical%20Ubuntu%20Server%2018.04%20LTS.pdf">18.04.4</a>
+            </td>
+            <td data-heading="Additional information">
+              <a href="/security/certifications/docs/cc">Installation instructions</a>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
-    <div class="col-4">
-      {{ image (
-        url="https://assets.ubuntu.com/v1/961a1ad1-csec-logo-removebg-preview.png",
-        alt="",
-        width="180",
-        height="205",
-        hi_def=True,
-        loading="lazy"
-        ) | safe
-      }}
+  </section>
+
+  <hr class="p-rule is-fixed-width" />
+
+  <section class="p-strip is-deep">
+    <div class="u-fixed-width">
+      <h2>
+        <a href="/security/contact-us" class="js-invoke-modal">Contact us&nbsp;&rsaquo;</a>
+      </h2>
     </div>
-  </div>
-  <div class="u-fixed-width">
-    <hr class="p-rule" />
-  </div>
-  <div class="u-fixed-width">
-    <table>
-      <thead>
-        <tr>
-          <th>Ubuntu version</th>
-          <th>Platform</th>
-          <th>Certification report</th>
-          <th>Additional information</th>
-        </tr>
-      </thead>
-      <t-body>
-        <tr>
-          <td>Ubuntu 16.04 LTS</td>
-          <td>x86_64, IBM Power8 and IBM Z</td>
-          <td><a href="https://www.commoncriteriaportal.org/files/epfiles/Certification%20Report%20Ubuntu%20LTS%2016.04.4.pdf">16.04.4</a></td>
-          <td><a href="/security/certifications/docs/cc">Installation instructions</a></td>
-        </tr>
-      </t-body>
-      <t-body>
-        <tr>
-          <td>Ubuntu 18.04 LTS</td>
-          <td>x86_64 and IBM Z</td>
-          <td><a href="https://www.commoncriteriaportal.org/files/epfiles/Certification%20Report%20-%20Canonical%20Ubuntu%20Server%2018.04%20LTS.pdf">18.04.4</a></td>
-          <td><a href="/security/certifications/docs/cc">Installation instructions</a></td>
-        </tr>
-      </t-body>
-    </table>
-    <p>
-      <a class="p-button--positive js-invoke-modal" href="/security/contact-us">Contact us</a>
-    </p>
-  </div>
-</section>
+  </section>
 
-<!-- Set default Marketo information for contact form below-->
-<div class="u-hide" id="contact-form-container" data-form-location="/shared/forms/interactive/general" data-form-id="1257" data-lp-id="2154" data-return-url="https://www.ubuntu.com/contact-us/form/thank-you" data-lp-url="https://pages.ubuntu.com/things-contact-us.html">
-</div>
+  <!-- Set default Marketo information for contact form below-->
+  <div class="u-hide"
+       id="contact-form-container"
+       data-form-location="/shared/forms/interactive/general"
+       data-form-id="1257"
+       data-lp-id="2154"
+       data-return-url="https://www.ubuntu.com/contact-us/form/thank-you"
+       data-lp-url="https://pages.ubuntu.com/things-contact-us.html"></div>
 
 {% endblock content %}
-{% block footer_extra %}{{ marketo }}{% endblock footer_extra %}
+
+{% block footer_extra %}
+  {{ marketo }}
+{% endblock footer_extra %}