Merge pull request #2692 from britneywwc/fix-virtualization-solutions

fix: tab overlaps and use vanilla classes

Author: britneywwc

templates/solutions/infrastructure/virtualization-solutions/index.html

@@ -224,7 +224,7 @@ <h2>Canonical's open source virtualization software</h2>
             </div>
           </div>
         </div>
-          <div class="virtualization-tabs" data-tablist="virtualization-software">
+          <div data-tablist="virtualization-software">
             {% include "solutions/infrastructure/virtualization-solutions/tabs/lxd.html" %}
             {% include "solutions/infrastructure/virtualization-solutions/tabs/multipass.html" %}
             {% include "solutions/infrastructure/virtualization-solutions/tabs/microcloud.html" %}
@@ -233,15 +233,6 @@ <h2>Canonical's open source virtualization software</h2>
         </div>
       </div>
       </div>
-      <style nonce="{{ csp_nonce }}">
-        .tabs-cta {
-          padding-bottom: 2rem;
-        }
-
-        .virtualization-tabs {
-          height: 250px;
-        }
-      </style>
   </section>
 
   <section class="p-section">

templates/solutions/infrastructure/virtualization-solutions/tabs/lxd.html

@@ -2,22 +2,24 @@
   tabindex="0"
   role="tabpanel"
   id="lxd-tab"
-  aria-labelledby="lxd-tab"
+  aria-labelledby="lxd"
   aria-hidden="true"
 >
-  <div class="row">
-    <div class="col">
-      {{ image(url="https://assets.ubuntu.com/v1/22c7cc8b-lxd_logo.png",
-        alt="LXD",
-        width="320",
-        height="520",
-        hi_def=True,
-        loading="auto|lazy",
-        attrs={"class": "p-image-container__image", "style": "height: 5.5rem; width:auto;"}) | safe
-      }}
+  <div class="grid-row">
+    <div class="grid-col">
+      <div class="p-image-container--16-9">
+        {{ image(url="https://assets.ubuntu.com/v1/22c7cc8b-lxd_logo.png",
+          alt="LXD",
+          width="320",
+          height="520",
+          hi_def=True,
+          loading="auto",
+          attrs={"class": "p-image-container__image"}) | safe
+        }}
+      </div>
       <p>LXD is Canonical's comprehensive open source virtualization platform. It operates through a user-friendly web interface, helping you to manage KVM-based VMs and LXC-based system containers with ease.</p>
-      <div class="tabs-cta">
-        <a href="https://canonical.com/lxd" target="_blank" rel="noopener noreferrer">Learn more about LXD&nbsp;&rsaquo;</a>
+      <div class="p-cta-block">
+        <a href="/lxd" target="_blank" rel="noopener noreferrer">Learn more about LXD&nbsp;&rsaquo;</a>
       </div>
     </div>
   </div>

templates/solutions/infrastructure/virtualization-solutions/tabs/microcloud.html

@@ -2,22 +2,24 @@
   tabindex="2"
   role="tabpanel"
   id="microcloud-tab"
-  aria-labelledby="microcloud-tab"
+  aria-labelledby="microcloud"
   aria-hidden="true"
 >
-  <div class="row">
-    <div class="col">
-      {{ image(url="https://assets.ubuntu.com/v1/6660b4dc-microcloud_logo.png",
-        alt="MicroCloud",
-        width="655",
-        height="520",
-        hi_def=True,
-        loading="auto|lazy",
-        attrs={"class": "p-image-container__image", "style": "height: 5.5rem; width:auto;"}) | safe
-      }}
+  <div class="grid-row">
+    <div class="grid-col">
+      <div class="p-image-container--16-9">
+        {{ image(url="https://assets.ubuntu.com/v1/6660b4dc-microcloud_logo.png",
+          alt="MicroCloud",
+          width="655",
+          height="520",
+          hi_def=True,
+          loading="lazy",
+          attrs={"class": "p-image-container__image"}) | safe
+        }}
+      </div>
       <p>MicroCloud is Canonical's low entry barrier, open source cloud platform. You can build a MicroCloud in minutes, and manage its operations easily &ndash; no more navigating cloud complexity.</p>
-      <div class="tabs-cta">
-        <a href="https://canonical.com/microcloud" target="_blank" rel="noopener noreferrer">Learn more about MicroCloud&nbsp;&rsaquo;</a>
+      <div class="p-cta-block">
+        <a href="/microcloud" target="_blank" rel="noopener noreferrer">Learn more about MicroCloud&nbsp;&rsaquo;</a>
       </div>
     </div>
   </div>

templates/solutions/infrastructure/virtualization-solutions/tabs/multipass.html

@@ -2,22 +2,24 @@
   tabindex="1"
   role="tabpanel"
   id="multipass-tab"
-  aria-labelledby="multipass-tab"
+  aria-labelledby="multipass"
   aria-hidden="true"
 >
-  <div class="row">
-    <div class="col">
-      {{ image(url="https://assets.ubuntu.com/v1/f939b404-multipass_logo.png",
-        alt="Multipass",
-        width="570",
-        height="520",
-        hi_def=True,
-        loading="auto|lazy",
-        attrs={"class": "p-image-container__image", "style": "height: 5.5rem; width:auto;"}) | safe
-      }}
+  <div class="grid-row">
+    <div class="grid-col">
+      <div class="p-image-container--16-9">
+        {{ image(url="https://assets.ubuntu.com/v1/f939b404-multipass_logo.png",
+          alt="Multipass",
+          width="570",
+          height="520",
+          hi_def=True,
+          loading="lazy",
+          attrs={"class": "p-image-container__image"}) | safe
+        }}
+      </div>
       <p>Multipass is a tool to generate cloud-style Ubuntu VMs quickly on Linux, macOS and Windows. It provides a simple but powerful CLI that enables you to quickly access an Ubuntu command line or create your own local mini-cloud.</p>
-      <div class="tabs-cta">
-        <a href="https://canonical.com/multipass" target="_blank" rel="noopener noreferrer">Learn more about Multipass&nbsp;&rsaquo;</a>
+      <div class="p-cta-block">
+        <a href="/multipass" target="_blank" rel="noopener noreferrer">Learn more about Multipass&nbsp;&rsaquo;</a>
       </div>
     </div>
   </div>

templates/solutions/infrastructure/virtualization-solutions/tabs/openstack.html

@@ -2,22 +2,24 @@
   tabindex="3"
   role="tabpanel"
   id="openstack-tab"
-  aria-labelledby="openstack-tab"
+  aria-labelledby="openstack"
   aria-hidden="true"
 >
-  <div class="row">
-    <div class="col">
-      {{ image(url="https://assets.ubuntu.com/v1/6ff3d48b-openstack_logo.png",
-        alt="OpenStack",
-        width="640",
-        height="520",
-        hi_def=True,
-        loading="auto|lazy",
-        attrs={"class": "p-image-container__image", "style": "height: 5.5rem; width:auto;"}) | safe
-      }}
+  <div class="grid-row">
+    <div class="grid-col">
+      <div class="p-image-container--16-9">
+        {{ image(url="https://assets.ubuntu.com/v1/6ff3d48b-openstack_logo.png",
+          alt="OpenStack",
+          width="640",
+          height="520",
+          hi_def=True,
+          loading="lazy",
+          attrs={"class": "p-image-container__image"}) | safe
+        }}
+      </div>
       <p>Canonical OpenStack is our highly customizable cloud platform. With Canonical OpenStack based on Sunbeam, getting to grips with Canonical OpenStack will be significantly easier &ndash; helping you to operate and scale your OpenStack control plane with kubernetes.</p>
-      <div class="tabs-cta">
-        <a href="https://canonical.com/openstack" target="_blank" rel="noopener noreferrer">Learn more about OpenStack&nbsp;&rsaquo;</a>
+      <div class="p-cta-block">
+        <a href="/openstack" target="_blank" rel="noopener noreferrer">Learn more about OpenStack&nbsp;&rsaquo;</a>
       </div>
     </div>
   </div>