open-consul/website/components/basic-hero/style.css

82 lines
1.8 KiB
CSS

.g-basic-hero {
padding: 88px 0;
& .g-type-display-1 {
color: var(--gray-1);
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 0;
max-width: 14em;
}
& .g-type-body-large {
color: var(--gray-3);
margin: 0 auto 0 auto;
text-align: center;
max-width: 40em;
}
& .links {
display: flex;
flex-wrap: wrap;
justify-content: center;
/*
* Margins here compensate for extra 8px margin on buttons
* which are needed to center and space properly regardless of whether
* buttons are wrapping to multiple lines or not.
*/
margin-top: calc(32px - 8px);
margin-bottom: -8px;
@media (--large) {
margin-top: calc(40px - 8px);
}
& .g-btn {
/*
* This ensures 16px between buttons at all times, while maintaining proper centering
* when buttons wrap to multiple lines.
* There will be an extra 8px space on all sides of the button group.
* The top and bottom are accounted for by the -8px adjustment on `.action` margins.
* The left and right excess is left as is - it's needed for proper centering when wrapping.
*/
margin: 8px;
}
}
& .third-link {
display: flex;
justify-content: center;
margin-top: 32px;
& a {
display: flex;
align-items: center;
color: var(--gray-4);
& .icon {
margin-left: 8px;
height: 24px;
}
}
}
&.has-background {
background-repeat: no-repeat;
background-color: var(--gray-7);
background-image: url(/img/hero/pattern-desktop.svg);
width: 100%;
background-size: cover;
background-position: center;
@media (max-width: 800px) {
background-image: url(/img/hero/pattern-mobile.svg);
}
& .g-btn {
background: var(--gray-7);
}
}
}