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

77 lines
1.8 KiB
CSS
Raw Normal View History

2020-04-24 18:52:30 +00:00
.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-2);
2020-04-24 18:52:30 +00:00
margin: 0 auto 0 auto;
text-align: center;
max-width: 40em;
}
& .links {
display: flex;
flex-wrap: wrap;
justify-content: center;
2020-05-19 19:29:18 +00:00
2020-04-24 18:52:30 +00:00
/*
* 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 {
color: var(--gray-2);
}
& svg * {
stroke: var(--gray-2) !important;
}
}
2020-04-24 18:52:30 +00:00
&.has-background {
background-repeat: no-repeat;
background-color: var(--gray-6);
2020-05-07 01:28:39 +00:00
background-image: url(/img/hero/pattern-desktop.svg);
2020-04-24 18:52:30 +00:00
width: 100%;
background-size: cover;
background-position: center;
@media (max-width: 800px) {
2020-05-07 01:28:39 +00:00
background-image: url(/img/hero/pattern-mobile.svg);
2020-04-24 18:52:30 +00:00
}
& .g-btn {
background: var(--gray-6);
2020-04-24 18:52:30 +00:00
}
}
}