status-im
/
consul
mirror of https://github.com/status-im/consul.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
consul/website/pages/consul-on-kubernetes/style.module.css

52 lines
860 B
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
.sideBySideTitle {
composes: g-type-display-2 from global;
margin-top: 0;
margin-bottom: 64px;
}
.leftSideText {
composes: g-type-body from global;
margin-bottom: 46px;
}
.getStartedWrapper {
composes: g-grid-container from global;
padding-top: 131px;
padding-bottom: 227px;
& .getStartedContent {
display: flex;
flex-wrap: wrap;
@media (--large) {
flex-wrap: nowrap;
justify-content: space-between;
}
& .getStartedCards {
width: 100%;
margin-bottom: 120px;
@media (--large) {
margin-bottom: 0;
width: 584px;
}
}
& .getStartedDocs {
width: 100%;
@media (--large) {
max-width: 488px;
margin-left: 60px;
}
}
}
}
.getStartedTitle {
composes: g-type-display-1 from global;
margin-top: 0;
margin-bottom: 72px;
}