AndrewSymes (Talk | contribs) |
AndrewSymes (Talk | contribs) |
||
Line 12: | Line 12: | ||
HQ_page .mobile-banner-back { | HQ_page .mobile-banner-back { | ||
− | width: 100%; z-index: 2; transition: top 0.2s ease-in-out; | + | width: 100%; z-index: 2; transition: top 0.2s ease-in-out;https://static.igem.org/mediawiki/2019/9/90/T--Calgary--header-background.jpg |
background-color: #257D93; | background-color: #257D93; |
Revision as of 21:23, 12 June 2020
iGEMwiki toolssearchlogin
Template:Calgary/Banner-Styling /* --- [ 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; } }