Difference between revisions of "Template:Calgary/Banner-Styling"

Revision as of 21:50, 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; } }

@@ Line 45: / Line 45: @@
 #HQ_page .desktop-banner-back {
-   background-image: url("https://static.igem.org/mediawiki/2020/5/53/T--Calgary--Nimaya.png");
+   background-image: url("https://static.igem.org/mediawiki/2020/6/65/T--Calgary--AllisonsPaint.jpg");
    background-color: #cccccc;
    height: 380;