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

 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
  
−
iGEMwiki toolssearchlogin
+
/* --- [ MOBILE PAGE BANNER] --- */
  
−
Template:Calgary/Banner-Styling
+
#HQ_page .mobile-banner-back .page-banner .page-subtitle .emphasis {
−
/* --- [ MOBILE PAGE BANNER] --- */
+
color: rgb(255, 255, 255);
 +
font-weight: 600;
 +
font-size: 15px;
 +
}
  
−
HQ_page .mobile-banner-back .page-banner .page-subtitle .emphasis {
+
#HQ_page .mobile-banner-back .page-banner button.toggle {
−
color: rgb(255, 255, 255); font-weight: 600; font-size: 15px; }
+
border: none;
 +
background: none;
 +
color: rgb(255, 255, 255);
 +
}
  
−
HQ_page .mobile-banner-back .page-banner button.toggle {
+
#HQ_page .mobile-banner-back {
−
border: none; background: none; color: rgb(255, 255, 255); }
+
width: 100%;
 +
z-index: 2;
 +
transition: top 0.2s ease-in-out;
 +
  background-color: #2EC4B6;  
 +
}
  
−
HQ_page .mobile-banner-back {
+
#HQ_page .mobile-banner-back .page-banner {
−
width: 100%; z-index: 2; transition: top 0.2s ease-in-out;
+
display: flex;
 +
justify-content: space-between;
 +
line-height: 1;
 +
padding: 15px 15px 15px 15px;
 +
font-size: 15px;
 +
}
  
−
background-color: #257D93;
+
#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 {
−
display: flex; justify-content: space-between; line-height: 1; padding: 15px 15px 15px 15px; font-size: 15px; }
+
font-weight: 600;
 +
color: rgba(255,255,255,1);
 +
}
  
−
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 {
+
/* --- [ DESKTOP PAGE BANNER] --- */
−
font-weight: 600; color: rgba(255,255,255,1); }
+
  
 +
#HQ_page .desktop-banner-back {
 +
  background-image: url("https://static.igem.org/mediawiki/2020/6/65/T--Calgary--AllisonsPaint.jpg");
 +
  background-color: #cccccc;
 +
  height: 380;
 +
  background-position: center;
 +
  background-repeat: no-repeat;
 +
  background-size: cover;
 +
  position: relative;
 +
}
  
−
/* --- [ DESKTOP PAGE BANNER] --- */
+
#HQ_page .desktop-banner-back .text-area {
−
 
+
<!--min-height: 300px;-->
−
HQ_page .desktop-banner-back {
+
z-index: -10;
−
background-image: url("https://static.igem.org/mediawiki/2019/9/90/T--Calgary--header-background.jpg");
+
min-height: 380px;
−
background-color: #cccccc;
+
display: flex;
−
height: 380;
+
flex-direction: column;
−
background-position: center;
+
justify-content: 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 {
 
.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: #E71D36; <!-- Changes colour of the titles -->
 +
}
  
−
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: #E71D36; <!-- Changes colour of the titles -->
 +
font-weight: 500;
 +
}
  
−
bodyContent .page-banner h2, #bodyContent .page-banner h1 {
+
#bodyContent .page-banner h2, #bodyContent .page-banner h1 {
−
  margin-bottom: 0px;
+
    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;
 +
}
 +
}

Latest revision as of 22:05, 12 June 2020

/* --- [ MOBILE PAGE BANNER] --- */

  1. HQ_page .mobile-banner-back .page-banner .page-subtitle .emphasis {

color: rgb(255, 255, 255); font-weight: 600; font-size: 15px; }

  1. HQ_page .mobile-banner-back .page-banner button.toggle {

border: none; background: none; color: rgb(255, 255, 255); }

  1. HQ_page .mobile-banner-back {

width: 100%; z-index: 2; transition: top 0.2s ease-in-out; 

 	background-color: #2EC4B6;

}

  1. HQ_page .mobile-banner-back .page-banner {

display: flex; justify-content: space-between; line-height: 1; padding: 15px 15px 15px 15px; font-size: 15px; }

  1. HQ_page .mobile-banner-back .page-banner h2 {

font-size: 15px; padding-top: 10px; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; }

  1. HQ_page .mobile-banner-back .page-banner .toggle-button {

font-weight: 600; color: rgba(255,255,255,1); }


/* --- [ DESKTOP PAGE BANNER] --- */

  1. HQ_page .desktop-banner-back {
 background-image: url("T--Calgary--AllisonsPaint.jpg");
 background-color: #cccccc;
 height: 380;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 position: relative;

}

  1. HQ_page .desktop-banner-back .text-area {

z-index: -10; min-height: 380px; display: flex; flex-direction: column; justify-content: center; }

.hero-image {

}

  1. HQ_page .desktop-banner-back .text-area .page-banner {

text-align: center; text-transform: uppercase; }

  1. HQ_page .desktop-banner-back .text-area .page-banner .page-subtitle {

font-size: 30px; color: #E71D36; }

  1. HQ_page .desktop-banner-back .text-area .page-banner .page-title {

font-size: 60px; color: #E71D36; font-weight: 500; }

  1. 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; } }