diff --git a/src/css/landing-page.css b/src/css/landing-page.css index 8c3f82b1..fb7e211a 100644 --- a/src/css/landing-page.css +++ b/src/css/landing-page.css @@ -173,7 +173,7 @@ } .doc.landing-page-doc img { - max-width: 100%; + overflow: visible; } .doc.landing-page-doc ul { @@ -256,6 +256,267 @@ box-shadow: 0 0 15px -5px #ccc; } +/* 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); +} + +.doc.landing-page-capella .tabpanel > .tabs-image { + width: 50%; +} + +/* CSS for How Do You Want To Start Building Today? section */ +.doc.landing-page-capella .centered > h2 { + text-align: center; + margin-top: 4rem; +} + +.doc.landing-page-capella .card-container { + display: flex; + flex-wrap: wrap; + width: 100%; + margin: 20px auto; +} + +.doc.landing-page-capella .card-box { + width: 30%; + margin: 1.66%; + padding: 2rem; + background-color: white; + border-bottom: 20px solid var(--color-brand-orange); + box-shadow: 0 0 29.48px 0 rgba(0, 0, 0, 0.1); + border-radius: 8.8px; +} + +.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 > .svg-inline--fa { + color: var(--color-brand-red); + font-size: 2em; + margin-bottom: 0.5em; +} + +.doc.landing-page-capella .card-box > h3 { + margin-block-start: 0; + padding-left: 1.5em; + text-align: left; +} + +.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); +} + +.doc.landing-page-capella .card-box > div.ulist > ul li:hover { + text-decoration: underline; +} + +.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; +} + +/* Screen size considerations */ + +@media screen and (min-width: 340px) and (max-width: 499px) { + .doc.landing-page-capella .top-row > .positioned-image { + min-width: 130px; + margin-top: -37.5rem; /* Adjust to position image right below the div */ + } + + .doc.landing-page-capella .tabs { + margin: 2rem 0; + width: 100%; + } + + .doc.landing-page-capella .tabpanel { + display: block; + } + + .doc.landing-page-capella .tabpanel > .text-tabs-container { + flex-direction: column; + width: 100%; + } + + .doc.landing-page-capella .tabpanel > .tabs-image { + width: 250px; + } + + .doc.landing-page-capella .card-container { + flex-direction: column; + width: 100%; + } + + .doc.landing-page-capella .card-box { + width: 100%; + } +} + +@media screen and (min-width: 500px) and (max-width: 700px) { + .doc.landing-page-capella .top-row > .positioned-image { + min-width: 130px; + margin-top: -29rem; /* Adjust to position image right below the div */ + } + + .doc.landing-page-capella .tabs { + margin: 2rem 0; + width: 100%; + } + + .doc.landing-page-capella .tabpanel { + display: block; + } + + .doc.landing-page-capella .tabpanel > .text-tabs-container { + flex-direction: column; + width: 100%; + } + + .doc.landing-page-capella .tabpanel > .tabs-image { + width: 275px; + } + + .doc.landing-page-capella .card-container { + flex-direction: column; + width: 100%; + } + + .doc.landing-page-capella .card-box { + width: 100%; + } +} + +@media screen and (min-width: 701px) and (max-width: 1699px) { + .doc.landing-page-capella .top-row > .positioned-image { + min-width: 150px; + margin-top: -15rem; /* Adjust to position image right below the div */ + } + + .doc.landing-page-capella .tabs { + margin: 2rem 0; + width: 100%; + } + + .doc.landing-page-capella .tabpanel { + display: block; + padding: 2em 1.25em; + } + + .doc.landing-page-capella .tabpanel > .text-tabs-container { + flex-direction: column; + width: 100%; + } + + .doc.landing-page-capella .tabpanel > .tabs-image { + width: 50%; + } + + .doc.landing-page-capella .card-container { + width: 100%; + } + + .doc.landing-page-capella .card-box { + width: 46%; + } +} + +@media screen and (min-width: 1700px) { + .doc.landing-page-capella .tabpanel > .text-tabs-container { + width: 50%; + } + + .doc.landing-page-capella .tabpanel > .tabs-image { + width: 50%; + } + + .doc.landing-page-capella .card-box { + width: 30%; + } +} + /* CSS for nav filter */ .nav.tutorials-filter .nav-menu { padding: 20px; diff --git a/src/layouts/landing-page-capella.hbs b/src/layouts/landing-page-capella.hbs new file mode 100644 index 00000000..ce5b99cb --- /dev/null +++ b/src/layouts/landing-page-capella.hbs @@ -0,0 +1,13 @@ + + +
+{{> head-first}} +