angular-cn/public/resources/css/module/_hero.scss

112 lines
2.7 KiB
SCSS
Raw Normal View History

2015-02-25 10:15:46 -05:00
$hero-padding: $unit * 2;
.hero {
position: relative;
padding: $hero-padding;
2015-02-26 09:45:32 -05:00
height: 192px;
2015-02-25 10:15:46 -05:00
2015-03-04 10:13:59 -05:00
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
height: auto;
2015-03-05 00:54:44 -05:00
padding-top: 40px;
2015-03-04 10:13:59 -05:00
}
2015-02-25 10:15:46 -05:00
&.is-large {
2015-02-26 09:45:32 -05:00
height: 478px;
2015-02-25 10:15:46 -05:00
text-align: center;
2015-03-04 10:13:59 -05:00
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
height: auto;
}
2015-02-25 10:15:46 -05:00
}
2015-02-26 09:45:32 -05:00
.hero-title {
text-transform: uppercase;
margin: ($unit * 9) 0px 0px ($unit * 10);
opacity: .87;
2015-03-04 10:13:59 -05:00
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
margin: ($unit * 6) 0px 0px 0px;
}
2015-02-26 09:45:32 -05:00
}
.hero-subtitle {
margin: 0px 0px 0px ($unit * 10);
opacity: .87;
2015-03-04 10:13:59 -05:00
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
margin: 0px;
}
2015-02-26 09:45:32 -05:00
}
2015-02-25 10:15:46 -05:00
// LARGE SHEILD LOGO
.hero-logo {
background: url('/resources/images/logos/standard/shield-large.png') top center no-repeat;
padding-top: 224px;
opacity: 1;
width: $unit * 70;
2015-02-26 09:45:32 -05:00
margin: ($unit * 3) auto ($unit * 5) auto;
font-weight: 400;
2015-03-04 10:13:59 -05:00
2015-03-05 08:57:37 -05:00
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
background: url('/resources/images/logos/standard/shield-large@2x.png') top center no-repeat;
background-size: 184px 200px;
}
2015-03-04 10:13:59 -05:00
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
width: auto;
font-size: 20px;
line-height: 28px;
margin: ($unit * 2) auto;
padding-top: 208px;
}
2015-02-25 10:15:46 -05:00
}
2015-02-26 09:45:32 -05:00
// CTA BUTTONS
.button {
margin: 0px $unit;
2015-03-05 00:39:57 -05:00
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
margin: ($unit * 2) 0px;
display: block;
}
2015-02-26 09:45:32 -05:00
}
2015-02-25 10:15:46 -05:00
// SOCIAL ICONS
.social-icons {
position: absolute;
top: $unit * 3;
right: $unit * 3;
z-index: $layer-1;
2015-03-04 10:13:59 -05:00
@media handheld and (max-width: $phone-breakpoint),
screen and (max-device-width: $phone-breakpoint),
screen and (max-width: $tablet-breakpoint) {
right: auto;
left: 0;
}
2015-03-03 09:34:45 -05:00
button {
2015-02-25 10:15:46 -05:00
color: $snow;
opacity: .56;
font-size: 18px;
text-decoration: none;
margin-left: $unit * 2;
2015-03-03 09:34:45 -05:00
padding: 0;
background: none;
border: none;
outline: none;
2015-02-25 10:15:46 -05:00
}
}
}