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
62 lines
1.1 KiB
CSS
62 lines
1.1 KiB
CSS
.cardsWrapper {
|
|
display: grid;
|
|
column-gap: 40px;
|
|
row-gap: 40px;
|
|
grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
|
|
|
|
& .card {
|
|
border: 1px solid var(--gray-5);
|
|
box-shadow: 0 2px 3px rgba(37, 41, 55, 0.08);
|
|
border-radius: 1px;
|
|
transition: box-shadow 0.25s, transform 0.25s;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 24px 24px 28px;
|
|
justify-content: space-between;
|
|
|
|
&:hover {
|
|
box-shadow: 0 16px 28px rgba(37, 38, 45, 0.12);
|
|
transform: translateY(-4px);
|
|
}
|
|
|
|
& .cardContent {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
& .icon {
|
|
width: 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.title {
|
|
composes: g-type-display-3 from global;
|
|
margin-top: 0;
|
|
margin-bottom: 46px;
|
|
}
|
|
|
|
.eyebrow {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
composes: g-type-label from global;
|
|
color: var(--gray-2);
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.heading {
|
|
composes: g-type-display-6 from global;
|
|
margin-top: 0;
|
|
margin-bottom: 8px;
|
|
color: var(--black);
|
|
}
|
|
|
|
.description {
|
|
composes: g-type-body from global;
|
|
color: var(--gray-1);
|
|
margin-top: 0;
|
|
margin-bottom: 17px;
|
|
}
|