open-consul/website/components/features-list/style.module.css

110 lines
1.7 KiB
CSS
Raw Normal View History

[Assembly] Consul on Kubernetes Page (#11047) * 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
2021-10-08 19:50:36 +00:00
.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;
}
}