Update beta banner styles to match mockup

This commit is contained in:
Connor Hudson 2018-07-16 10:09:34 -04:00
parent ae49bbf74f
commit 664fc1998e
3 changed files with 26 additions and 3 deletions

View file

@ -47,6 +47,17 @@
color: $ui-white;
}
.beta-header {
font-size: 1.7rem;
}
.beta-copy {
margin-bottom: 1rem;
max-width: 350px;
line-height: 1.7rem;
font-size: 1.3rem;
}
.beta-try-it {
border-radius: 10px;
padding: 1em 2em;

View file

@ -11,7 +11,7 @@ const SmallTopBanner = () => (
<TitleBanner className="beta-small-top-banner">
<FlexRow className="beta-small-top-container">
<h2 className="beta-copy">
<FormattedMessage id="betabanner.calloutTitle" />
<FormattedMessage id="betabanner.subtitle" />
</h2>
<a
className="beta-try-it button"

View file

@ -52,6 +52,14 @@
color: $ui-white;
}
.beta-header {
font-size: 2.2rem;
}
.beta-copy {
font-size: 1.3rem;
}
.beta-try-it {
border-radius: 10px;
padding: 1em 2em;
@ -59,9 +67,13 @@
}
}
@media only screen and (min-width: $tablet) and (max-width: 1150px) {
@media only screen and (min-width: $tablet) and (max-width: 1200px) {
.beta-top-banner {
height: 23rem;
height: 22rem;
.beta-top-container {
bottom: 4rem;
}
.beta-banner-image {
width: 20rem;