7d98ea2550
* Start new page * reset * Consul on Kubernetes - Features List Section (#11078) * Fix conflicts * Start adding and placing content * Add a lot of styling and background image * Looking like design. Before adding more global styles * Work on editing styles * Move imports and switch to flex * Add more styles and bottom left background image * Fix conflicts * Fix styles on mobile * Change images path in public * Updates from code review - Move data and update styles * Convert to tsx and add types * Change button props to get desired styling without using css * Remove margin on mobile * Consul On Kubernetes - Hero (#11089) * Start hero section * Increase max sizes for container * Minor Edits * Use g-grid-container * Edit video styles and test * Rename component * Start moving global styles over * Move hero styles to locl * Remove composes g-hero * Fix flex basis on media * Add display flex to media * Clean up some styles * Consul On Kubernetes - Block List (#11114) * Start block list * Enter data and start styles * Get all images in and update styles * Move data and convert to ts * Add comment in page * Consul On Kubernetes - Side by Side Section (#11122) * Start block list * Enter data and start styles * Get all images in and update styles * Start side by side * Add content and more styles * Some more styles * Add styles for text and titles * Edit styles and clean * Fix spacing between button and text in overview * Delete public folder * Fix images in block on page * remove extra file * Fix classnames import * Use fragment * Consul On Kubernetes - Docs List Component (#11150) * Add docs list component * Add docs list content * Change type declaration * Remove unecessary style * Use fragment * Change icons * Consul On Kubernetes - Card List & Get Started Section (#11168) * Start card list component * Begin adding content * Start wrapper styles * Add more styles for card * Fix style * Edit styles * Use next Link * Add minor formatting * Make entire card a link * Add transition * Change import * Use svg instead of button and make target blank * Move wrapper div to component and add classname prop, use color variable for border * Change min of card in grid * Less pxels for min * Update copy * Consul on Kubernetes Content (#11179) * Add content so far * Add hero content and switch video to embed - needs editing * Add overview and docs links * Use iframe in hero and style * Remove = null on prop * Add learn tutorials content so far * Change learn tutorials content * Change placeholder learn content * Add requested copy updates * Align numbers * Consul on Kubernetes Content & Design Updates (#11217) * Update docs icons * Update learn cards * Update challenges icon * Video poster pending * New image * Add split up background images * Looking pretty good * Fix up background image * Add more styles * Add meta description and new feature images * Revert img change * Fix up images and replace poster * Switch to grid * Move images * Clean up styles * Change hero button text * Update styles for hero video * Update youtube url * Use gray variable * Consul on Kubernetes Metadata (#11219) * Add meta data for sharing * Test * Test 2 * Add meta title * Update share image * CHange name * Test * Test again * Use relative url * Swap urls for hero ctas * Update tutorial card to be uniform * Change overview button text * Resolve conflicts and fix dependencies
110 lines
1.7 KiB
CSS
110 lines
1.7 KiB
CSS
.featureListContainer {
|
|
background-color: #000;
|
|
padding-top: 128px;
|
|
background-position: right top, left bottom;
|
|
background-repeat: no-repeat;
|
|
color: #fff;
|
|
}
|
|
|
|
.contentWrapper {
|
|
composes: g-grid-container from global;
|
|
}
|
|
|
|
.featureContainer {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
& .featureTextContainer {
|
|
display: flex;
|
|
}
|
|
|
|
& .imageContainer {
|
|
max-width: 490px;
|
|
margin: 0 auto;
|
|
padding-bottom: 40px;
|
|
|
|
& img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (--large) {
|
|
flex-wrap: nowrap;
|
|
flex-direction: row-reverse;
|
|
justify-content: space-between;
|
|
|
|
& .featureTextContainer {
|
|
margin-right: 60px;
|
|
}
|
|
|
|
& .featureText {
|
|
max-width: 488px;
|
|
}
|
|
|
|
& .imageContainer {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.featuresContainer {
|
|
padding-top: 157px;
|
|
padding-bottom: 394px;
|
|
display: grid;
|
|
row-gap: 120px;
|
|
}
|
|
|
|
.title {
|
|
composes: g-type-display-1 from global;
|
|
max-width: 488px;
|
|
margin: 0;
|
|
}
|
|
|
|
.listNumber {
|
|
composes: g-type-display-5 from global;
|
|
min-width: 40px;
|
|
height: 40px;
|
|
background-color: var(--consul);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 64px;
|
|
margin-top: 10px;
|
|
|
|
@media (--small) {
|
|
margin-right: 30px;
|
|
margin-top: 6px;
|
|
}
|
|
}
|
|
|
|
.featureTitle {
|
|
composes: g-type-display-2 from global;
|
|
margin: 0;
|
|
}
|
|
|
|
.featureSubtitle {
|
|
composes: g-type-body-large from global;
|
|
margin-top: 16px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.infoTitle {
|
|
composes: g-type-display-5 from global;
|
|
margin-top: 0;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.infoSection {
|
|
composes: g-type-body from global;
|
|
margin-top: 32px;
|
|
margin-bottom: 40px;
|
|
display: grid;
|
|
row-gap: 24px;
|
|
|
|
& p,
|
|
& ul {
|
|
margin: 0;
|
|
}
|
|
}
|