improve training page responsiveness (#413)

conf.py

@@ -1436,6 +1436,7 @@
     "meta": load_data('data/meta.yaml'),
     "ecosystem": load_data('data/ecosystem.yaml'),
     "homepage": load_data('data/homepage.yaml'),
+    "training": load_data('data/training.yaml'),
     }
 
 except ImportError:

data/training.yaml

@@ -0,0 +1,23 @@
+community_cards:
+  create_collection:
+    heading: Creating an Ansible collection
+    description: Learn how to create your own Ansible collection.
+    lab_url: https://play.instruqt.com/embedv2/redhat/tracks/ansible-community-creating-your-own-collection?token=em_zcnbza2ex66zqptw
+  test_pr:
+    heading: Testing a pull request locally
+    description: Learn how to test a pull request locally with Ansible.
+    lab_url: https://play.instruqt.com/embedv2/redhat/tracks/ansible-community-testing-pull-request-locally?token=em_6ke967cktu5m9cww
+  develop_module:
+    heading: Developing an Ansible module
+    description: Learn how to develop an Ansible module.
+    lab_url: https://play.instruqt.com/embedv2/redhat/tracks/ansible-community-developing-ansible-module?token=em_W1mnN4dZouYAhFBI
+  fix_collection_bug:
+    heading: Fixing bugs in collections
+    description: Learn how to fix a bug in your Ansible code.
+    lab_url: https://play.instruqt.com/embedv2/redhat/tracks/community-fixing-a-bug?token=em_l4flalsa12evd97a
+  add_integration_test:
+    heading: Adding integration tests
+    description: Learn how to add integration tests to your Ansible collections.
+    lab_url: https://play.instruqt.com/embedv2/redhat/tracks/adding-integration-tests-to-ansible-collections?token=em_6uMp_ZmBv4Fuug-z
+labels:
+  launch: Launch the self-paced lab

pages/ansible-community-training.md

@@ -1,48 +1,7 @@
 ---
+description: ''
 slug: ansible-community-training
 title: Ansible Community Training
 type: text
+template: training.tmpl
 ---
-
-Experiment, learn, and solve real-world problems with pre-configured Ansible environments that run in your browser and at your convenience.
-
-<!--first row-->
-<div class="ansible-row">
-  <div class="ansible-card">
-    <h2>Creating an Ansible collection</h2>
-    <p>Learn how to create your own Ansible collection.</p>
-    <br />
-    <span class="homepage-link"><a href="https://play.instruqt.com/embedv2/redhat/tracks/ansible-community-creating-your-own-collection?token=em_zcnbza2ex66zqptw" target="_blank">Launch the self-paced lab</a>&ensp;<i class="fa fa-arrow-right" aria-hidden="true" /></span>
-  </div>
-  <div class="ansible-card">
-    <h2>Testing a pull request locally</h2>
-    <p>Learn how to test a pull request locally with Ansible.</p>
-    <br />
-    <span class="homepage-link"><a href="https://play.instruqt.com/embedv2/redhat/tracks/ansible-community-testing-pull-request-locally?token=em_6ke967cktu5m9cww" target="_blank">Launch the self-paced lab</a>&ensp;<i class="fa fa-arrow-right" aria-hidden="true" /></span>
-  </div>
-  <div class="ansible-card">
-    <h2>Developing an Ansible module</h2>
-    <p>Learn how to develop an Ansible module.</p>
-    <br />
-    <span class="homepage-link"><a href="https://play.instruqt.com/embedv2/redhat/tracks/ansible-community-developing-ansible-module?token=em_W1mnN4dZouYAhFBI" target="_blank">Launch the self-paced lab</a>&ensp;<i class="fa fa-arrow-right" aria-hidden="true" /></span>
-  </div>
-</div>
-<!--second row-->
-<div class="ansible-row">
-  <div class="ansible-card">
-    <h2>Fixing bugs in collections</h2>
-    <p>Learn how to fix a bug in your Ansible code.</p>
-    <br />
-    <span class="homepage-link"><a href="https://play.instruqt.com/embedv2/redhat/tracks/community-fixing-a-bug?token=em_l4flalsa12evd97a" target="_blank">Launch the self-paced lab</a>&ensp;<i class="fa fa-arrow-right" aria-hidden="true" /></span>
-  </div>
-  <div class="ansible-card">
-    <h2>Adding integration tests</h2>
-    <p>Learn how to add integration tests to your Ansible collections.</p>
-    <br />
-    <span class="homepage-link"><a href="https://play.instruqt.com/embedv2/redhat/tracks/adding-integration-tests-to-ansible-collections?token=em_6uMp_ZmBv4Fuug-z" target="_blank">Launch the self-paced lab</a>&ensp;<i class="fa fa-arrow-right" aria-hidden="true" /></span>
-  </div>
-  <div class="ansible-card">
-    <h2>Coming soon</h2>
-    <p>New courses and learning resources will become available when they are completed.</p>
-  </div>
-</div>

templates/training.tmpl

@@ -0,0 +1,24 @@
+{% extends "base.tmpl" %}
+{% block content %}
+  <div class="grid-wrapper training">
+    <div class="training-title width-12-12 width-12-12-m">
+      <h1>Ansible Community Training</h1>
+      <p>
+        Experiment, learn, and solve real-world problems with pre-configured Ansible environments that run in your browser and at your convenience.
+      </p>
+    </div>
+    {% for key, item in training.community_cards.items() %}
+      <div class="training-card width-6-12 width-12-12-m">
+        <div class="training-content">
+          <h2>{{ item.heading }}</h2>
+          <p>{{ item.description }}</p>
+          <span class="homepage-link"><a href="{{ item.lab_url }}" target="_blank">{{ training.labels.launch }}</a>&ensp;<i class="fa fa-arrow-right" aria-hidden="true" /></span>
+        </div>
+      </div>
+    {% endfor %}
+    <div class="training-coming-soon width-12-12 width-12-12-m">
+      <h2>Coming soon!</h2>
+      <p>New courses and learning resources will become available when they are completed.</p>
+    </div>
+  </div>
+{% endblock content %}

themes/ansible-community/sass/_ansible-content.scss

@@ -43,29 +43,6 @@ a.u-url {
   text-decoration: none;
 }
 
-.ansible-row {
-  display: flex;
-  justify-content: space-between;
-}
-
-.ansible-card {
-  width: 350px;
-  margin: 10px;
-  padding: 2rem;
-  border: 1px;
-  border-radius: 5px;
-  border-width: 1px;
-  background-color: #f0f0f0;
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-  transition: 0.3s;
-  justify-content: stretch;
-  h3 {
-    font-size: $font-lg;
-    font-weight: 600;
-    text-transform: none;
-  }
-}
-
 a.ansible-button {
   display: inline-block;
   width: 100%;

themes/ansible-community/sass/_training.scss

@@ -0,0 +1,48 @@
+.training {
+  gap: 4rem;
+  @media screen and (max-width: 768px) {
+    gap: 2rem;
+  }
+}
+
+.training-title {
+  h1 {
+    text-align: center;
+  }
+}
+
+.training-card {
+  display: flex;
+  padding: 2rem;
+  border: 1px;
+  border-radius: 5px;
+  border-width: 1px;
+  background-color: #f0f0f0;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+  transition: 0.3s;
+  justify-content: stretch;
+  min-width: fit-content;
+}
+
+.training-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  h2 {
+    font-size: $font-lg;
+    font-weight: 600;
+    text-transform: none;
+  }
+  p {
+    font-size: $font-sm;
+    text-transform: none;
+    text-align: left;
+  }
+  a {
+    font-size: $font-sm;
+  }
+}
+
+.training-coming-soon {
+  margin-top: 2rem;
+}

themes/ansible-community/sass/main.scss

@@ -22,6 +22,7 @@
 @import "homepage-platform-band";
 @import "ecosystem";
 @import "mission-statement";
+@import "training";
 @import "ansible-content";
 
 body {