AndrewSymes (Talk | contribs) |
AndrewSymes (Talk | contribs) |
||
Line 1: | Line 1: | ||
− | + | /* --- [ MOBILE PAGE BANNER] --- */ | |
− | + | #HQ_page .mobile-banner-back .page-banner .page-subtitle .emphasis { | |
− | + | color: rgb(255, 255, 255); | |
+ | font-weight: 600; | ||
+ | font-size: 15px; | ||
+ | } | ||
− | HQ_page .mobile-banner-back .page-banner . | + | #HQ_page .mobile-banner-back .page-banner button.toggle { |
− | color: rgb(255, 255, 255); | + | border: none; |
+ | background: none; | ||
+ | color: rgb(255, 255, 255); | ||
+ | } | ||
− | HQ_page .mobile-banner-back | + | #HQ_page .mobile-banner-back { |
− | + | width: 100%; | |
+ | z-index: 2; | ||
+ | transition: top 0.2s ease-in-out; | ||
+ | background-color: #257D93; | ||
+ | } | ||
− | HQ_page .mobile-banner-back { | + | #HQ_page .mobile-banner-back .page-banner { |
− | + | display: flex; | |
+ | justify-content: space-between; | ||
+ | line-height: 1; | ||
+ | padding: 15px 15px 15px 15px; | ||
+ | font-size: 15px; | ||
+ | } | ||
− | + | #HQ_page .mobile-banner-back .page-banner h2 { | |
+ | font-size: 15px; | ||
+ | padding-top: 10px; | ||
+ | color: rgba(255, 255, 255, 0.6); | ||
+ | text-transform: uppercase; | ||
} | } | ||
− | HQ_page .mobile-banner-back .page-banner { | + | #HQ_page .mobile-banner-back .page-banner .toggle-button { |
− | + | font-weight: 600; | |
+ | color: rgba(255,255,255,1); | ||
+ | } | ||
− | |||
− | |||
− | + | /* --- [ DESKTOP PAGE BANNER] --- */ | |
− | + | ||
+ | #HQ_page .desktop-banner-back { | ||
+ | background-image: url("https://static.igem.org/mediawiki/2019/9/90/T--Calgary--header-background.jpg"); | ||
+ | background-color: #cccccc; | ||
+ | height: 380; | ||
+ | background-position: center; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | position: relative; | ||
+ | } | ||
− | + | #HQ_page .desktop-banner-back .text-area { | |
− | + | <!--min-height: 300px;--> | |
− | HQ_page .desktop-banner-back { | + | z-index: -10; |
− | + | min-height: 380px; | |
− | + | display: flex; | |
− | + | flex-direction: column; | |
− | + | justify-content: center; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | |||
− | |||
− | |||
.hero-image { | .hero-image { | ||
} | } | ||
+ | <!-- | ||
+ | #HQ_page .desktop-banner-back .overlap-area { | ||
+ | min-height: 80px; | ||
+ | position: absolute; | ||
+ | width: 100%; | ||
+ | z-index: -10; | ||
+ | }--> | ||
− | HQ_page .desktop-banner-back .text-area .page-banner { | + | #HQ_page .desktop-banner-back .text-area .page-banner { |
− | text-align: center; text-transform: uppercase; } | + | text-align: center; |
+ | text-transform: uppercase; | ||
+ | } | ||
− | HQ_page .desktop-banner-back .text-area .page-banner .page-subtitle { | + | #HQ_page .desktop-banner-back .text-area .page-banner .page-subtitle { |
− | font-size: 30px; color: rgba(255, 255, 255, 0.6); } | + | font-size: 30px; |
+ | color: rgba(255, 255, 255, 0.6); | ||
+ | } | ||
− | HQ_page .desktop-banner-back .text-area .page-banner .page-title { | + | #HQ_page .desktop-banner-back .text-area .page-banner .page-title { |
− | font-size: 60px; color: white; font-weight: 500; } | + | font-size: 60px; |
+ | color: white; | ||
+ | font-weight: 500; | ||
+ | } | ||
− | bodyContent .page-banner h2, #bodyContent .page-banner h1 { | + | #bodyContent .page-banner h2, #bodyContent .page-banner h1 { |
− | + | margin-bottom: 0px; | |
} | } | ||
− | /* —————— [ MOBILE TO DESKTOP TRANSISTION ] —————— */ | + | |
+ | /* —————— [ MOBILE TO DESKTOP TRANSISTION ] —————— */ | ||
@media only screen and (min-width: 769px) { | @media only screen and (min-width: 769px) { | ||
− | #HQ_page .mobile-banner-back { display: none; } | + | #HQ_page .mobile-banner-back { |
+ | display: none; | ||
+ | } | ||
− | #HQ_page .desktop-banner-back { display: inherit; } | + | #HQ_page .desktop-banner-back { |
+ | display: inherit; | ||
+ | } | ||
− | #HQ_page #team-page-banner.desktop-banner-back { display: inherit; } } | + | #HQ_page #team-page-banner.desktop-banner-back { |
+ | display: inherit; | ||
+ | } | ||
+ | } |
Revision as of 21:27, 12 June 2020
/* --- [ MOBILE PAGE BANNER] --- */
- HQ_page .mobile-banner-back .page-banner .page-subtitle .emphasis {
color: rgb(255, 255, 255); font-weight: 600; font-size: 15px; }
- HQ_page .mobile-banner-back .page-banner button.toggle {
border: none; background: none; color: rgb(255, 255, 255); }
- HQ_page .mobile-banner-back {
width: 100%; z-index: 2; transition: top 0.2s ease-in-out;
background-color: #257D93;
}
- HQ_page .mobile-banner-back .page-banner {
display: flex; justify-content: space-between; line-height: 1; padding: 15px 15px 15px 15px; font-size: 15px; }
- HQ_page .mobile-banner-back .page-banner h2 {
font-size: 15px; padding-top: 10px; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; }
- HQ_page .mobile-banner-back .page-banner .toggle-button {
font-weight: 600; color: rgba(255,255,255,1); }
/* --- [ DESKTOP PAGE BANNER] --- */
- HQ_page .desktop-banner-back {
background-image: url(""); background-color: #cccccc; height: 380; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative;
}
- HQ_page .desktop-banner-back .text-area {
z-index: -10; min-height: 380px; display: flex; flex-direction: column; justify-content: center; }
.hero-image {
}
- HQ_page .desktop-banner-back .text-area .page-banner {
text-align: center; text-transform: uppercase; }
- HQ_page .desktop-banner-back .text-area .page-banner .page-subtitle {
font-size: 30px; color: rgba(255, 255, 255, 0.6); }
- HQ_page .desktop-banner-back .text-area .page-banner .page-title {
font-size: 60px; color: white; font-weight: 500; }
- bodyContent .page-banner h2, #bodyContent .page-banner h1 {
margin-bottom: 0px;
}
/* —————— [ MOBILE TO DESKTOP TRANSISTION ] —————— */
@media only screen and (min-width: 769px) {
#HQ_page .mobile-banner-back { display: none; }
#HQ_page .desktop-banner-back { display: inherit; }
#HQ_page #team-page-banner.desktop-banner-back { display: inherit; } }