gaf-mobile/app/styles/layout/hero.less

GAF mobile Web site

@import (reference) '../themes/variables';

/* Hero section modular selectors */
// Media Queries used to fix section heights to full screen

.hero {
    display: table;
    position: relative;
    width: 100%;
    min-height: 420px;
    background-color: @primary-color;
    overflow: hidden;

    &,
    &-title,
    &-sub-title,
    &-footer-link {
        color: @septenary-color-xxxlight;
    }

    &-title {
        margin-top: 0;
    }

    &-inner {
        display: table-cell;
        height: 100%;
        width: 100%;
        vertical-align: middle;
    }
}

// Portrait: > iPhone 5
@media only screen and (min-width: 321px) and (orientation:portrait) {
    .hero {
        min-height: 560px;
    }
}

// Landscape: default ( <= iPhone 5 )
@media only screen and (max-width: 568px) and (orientation:landscape) {
    .hero {
        min-height: 355px;
    }
}

// Landscape: > iPhone 5
@media only screen and (min-width: 569px) and (orientation:landscape) {
    .hero {
        min-height: 310px;
    }
}