[AV-77311] Changing direction and removing collapse.js and its entry from footer-scripts.hbs

Created new handlebars layouts for the capella landing page to change spacing and other settings without upsetting other pages.

Adding a lot more CSS to landing-page.css and adding comments to explain what the classes are doing.

Author: sarahlwelton

src/css/landing-page.css

@@ -256,20 +256,95 @@
   box-shadow: 0 0 15px -5px #ccc;
 }
 
-/* CSS for card-style landing page */
+/* CSS for redesigned Capella Landing Page */
+
+/* Adjusting spacing gutters around the content */
+@media screen and (min-width: 769px) {
+  main.capella-article {
+    padding-right: 1.5rem;
+    padding-left: 1.5rem;
+    margin: 0 auto;
+    max-width: clamp(55em, 60%, var(--width-page-area));
+  }
+}
+
+/* CSS for top section: H1, H2, and Capella Stars image */
+.doc.landing-page-capella .top-row {
+  display: flex;
+  flex-direction: row;
+  padding: 1rem;
+  margin-bottom: 2rem;
+  margin-top: -1rem;
+}
+
+.doc.landing-page-capella .top-row > .positioned-image {
+  flex-direction: row;
+  width: 35%;
+  min-width: 300px;
+  height: auto;
+  position: relative;
+  margin-top: -2.5rem; /* Adjust to position image right below the div */
+  margin-left: 1rem; /* Adjust to position image to the right of the div */
+}
+
+.doc.landing-page-capella .top-row > .top-row-text-container {
+  flex-direction: column;
+  padding-right: 1rem;
+  position: relative;
+}
+
+.doc.landing-page-capella .top-row > .top-row-text-container > h1 {
+  font-weight: 600;
+  margin-top: 1rem;
+}
+
+/* Adjusted CSS for Tabbed "Ten Minutes" Content */
+.doc.landing-page-capella .tabs {
+  margin: 2rem 0 2rem 0;
+  width: 80%;
+}
+
+.doc.landing-page-capella .tabs .tablist > ul li {
+  align-content: space-around;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  margin-right: 1rem;
+}
+
+.doc.landing-page-capella .tablist.ulist {
+  display: flex;
+  justify-content: center;
+}
+
+.doc.landing-page-capella .tabpanel {
+  display: flex;
+  padding: 2em 1.25em;
+}
+
+.doc.landing-page-capella .tabpanel > .text-tabs-container {
+  flex-direction: column;
+  padding: 2rem 4rem 2rem 1rem;
+  width: 50%;
+}
+
+.doc.landing-page-capella .tabpanel > .text-tabs-container > .paragraph > p > a {
+  font-weight: var(--weight-semibold);
+}
 
-.centered > h2 {
+/* CSS for How Do You Want To Start Building Today? section */
+.doc.landing-page-capella .centered > h2 {
   text-align: center;
+  margin-top: 4rem;
 }
 
-.card-container {
+.doc.landing-page-capella .card-container {
   display: flex;
   flex-wrap: wrap;
-  width: 80%;
+  width: 100%;
   margin: 20px auto;
 }
 
-.card-box {
+.doc.landing-page-capella .card-box {
   width: 30%;
   margin: 1.66%;
   padding: 2rem;
@@ -279,60 +354,43 @@
   border-radius: 8.8px;
 }
 
-.card-box > .fa-regular {
+.doc.landing-page-capella .card-box:hover {
+  transition: box-shadow 0.3s ease-in-out;
+  box-shadow: 5px 10px 29.48px 0 rgba(0, 0, 0, 0.4);
+}
+
+.doc.landing-page-capella .card-box > .fa-regular {
   color: var(--color-brand-red);
 }
 
-.card-box > h3 {
+.doc.landing-page-capella .card-box > h3 {
   margin-block-start: 0;
   padding-left: 0;
   text-align: center;
 }
 
-.card-box > div.ulist > ul li {
+.doc.landing-page-capella .card-box > p {
+  margin-top: 1rem;
+}
+
+.doc.landing-page-capella .card-box > div.ulist > ul li {
   list-style-type: disc;
   color: var(--color-link);
   font-weight: var(--weight-semibold);
 }
 
-.card-box > div.ulist > ul li:hover {
+.doc.landing-page-capella .card-box > div.ulist > ul li:hover {
   text-decoration: underline;
 }
 
-.ten-minutes-container {
-  display: flex;
-}
-
-.ten-minutes-container > .collapsible-section {
-  flex: 1;
-}
-
-.ten-minutes-container > .collapsible-section > .collapsible {
-  border: 1px solid #ccc;
-  padding: 10px;
-  margin: 5px;
-  cursor: pointer;
-}
-
-.ten-minutes-container > .collapsible-section > .collapsible h3 {
-  margin: 0;
-}
-
-.ten-minutes-container > .collapsible-section > .collapsible .content {
-  display: none;
-  margin-top: 10px;
-}
-
-.image-section {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.image-section img {
-  max-width: 100%;
+.doc.landing-page-capella .ending-image {
+  width: 100%; /* Adjust as needed */
   height: auto;
+  display: block;
+  margin: 0 auto;
+  position: relative;
+  top: 150px; /* Adjust this value to control the amount of overlap */
+  z-index: 1;
 }
 
 /* CSS for nav filter */

src/helpers/collapse.js

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+{{> head-first}}
+<title>{{{detag (or page.title 'landing page')}}}{{#if site.title}} | {{{site.title}}}{{/if}}</title>
+{{> head-last}}
+</head>
+<body class="landing-page">
+{{> header}}
+{{> body-landing-page-capella}}
+{{> footer}}
+</body>
+</html>

src/layouts/landing-page-capella.hbs

@@ -10,9 +10,9 @@
 {{/if}}
 {{/with}}
 {{/if}}
-<main class="article" data-ceiling="topbar">
-<article class="doc landing-page-doc">
+<main class="capella-article" data-ceiling="topbar">
+<article class="doc landing-page-capella">
 {{{page.contents}}}
 </article>
 </main>
-</div>
+</div>

src/partials/body-landing-page-capella.hbs

@@ -49,6 +49,3 @@ MathJax.Hub.Register.StartupHook("AsciiMath Jax Ready", function () {
 {{#if (eq env.SHOW_FEEDBACK_BUTTON 'true')}}
 <script async id="feedback-script" src="{{{uiRootPath}}}/js/vendor/feedback.js?v=1" data-collector-id="{{#if env.JIRA_COLLECTOR_ID}}{{env.JIRA_COLLECTOR_ID}}{{else}}709818cb{{/if}}"></script>
 {{/if}}
-{{#if (eq page.layout 'landing-page-capella')}}
-<script async id="collapsible" src="{{{uiRootPath}}}/js/collapse.js"></script>
-{{/if}}