Difference between revisions of "Team:Glasgow/main.css"

 
(248 intermediate revisions by 3 users not shown)
Line 20: Line 20:
 
margin:  0px;
 
margin:  0px;
 
top: -20px;
 
top: -20px;
 +
}
 +
 +
div#globalWrapper{
 +
padding: 0px;
 +
height: 100%;
 +
}
 +
 +
div.thumb{
 +
border:none;
 
}
 
}
  
Line 26: Line 35:
 
/* Light blue: #C2E0D5;
 
/* Light blue: #C2E0D5;
 
Dark blue: #44ABA0;
 
Dark blue: #44ABA0;
−
*/
+
 
 +
Yellow: #FFCE2F;
 +
Light orange: #FFAC03;
 +
Dark orange: #FF8302;
 +
*/
  
 
/* == Header Styles == */
 
/* == Header Styles == */
Line 43: Line 56:
 
}
 
}
  
−
.dropdown.menu>li.is-dropdown-submenu-parent>a:after{
+
.dropdown.menu.large-horizontal>li.is-dropdown-submenu-parent>a:after{
 
/* Hide the dropdown menu arrows */
 
/* Hide the dropdown menu arrows */
 
display:none;
 
display:none;
 +
}
 +
 +
.is-dropdown-submenu{
 +
border:none;
 +
}
 +
 +
.title-bar-title{
 +
font-size: 1.8rem;
 
}
 
}
  
 
.top-bar-title{
 
.top-bar-title{
−
background-image: url(https://static.igem.org/mediawiki/2016/0/02/Glasgow_Logo.png);
 
−
width: 100%;
 
 
height: 100%;
 
height: 100%;
 +
display: inline-block;
 
}
 
}
  
 
#header_logo{
 
#header_logo{
 
float: left;
 
float: left;
−
width: 40%;
+
height: 10em;
 +
margin: 1em;
 
}
 
}
  
 
#main-nav{
 
#main-nav{
 
/*Style the top bar menu*/
 
/*Style the top bar menu*/
−
color: #44ABA0;
+
color: #ffce2f;
−
font-size: 2em;
+
font-size: 3em;
 +
height: 2em;
 +
line-height: 2em;
 +
 
 
}
 
}
  
 +
.top-bar-right{
 +
padding: 4em 0em;
 +
}
  
 
li.is-dropdown-submenu-item{
 
li.is-dropdown-submenu-item{
Line 73: Line 100:
 
#main-nav .menu.vertical{
 
#main-nav .menu.vertical{
 
/*Style top bar dropdown menu backgrounds*/
 
/*Style top bar dropdown menu backgrounds*/
−
background-color:#C2E0D5;
+
background-color:#0085B2;
 
text-align: center;
 
text-align: center;
 
}
 
}
Line 82: Line 109:
  
 
.top-bar, .dropdown.menu{
 
.top-bar, .dropdown.menu{
−
background-color: #C2E0D5;
+
height:100;
 +
background-color: #0085B2;
 
}
 
}
  
Line 88: Line 116:
  
 
.footer_container{
 
.footer_container{
−
background-color: #C2E0D5;
+
background-color: #0085B2;
−
padding: 1rem 0rem 0rem 2rem;
+
padding: 1rem 0rem 0rem 4rem;
−
color: #44ABA0;
+
color: #ffce2f;
 
}
 
}
  
Line 101: Line 129:
  
 
.main_footer_links>ul{
 
.main_footer_links>ul{
 +
font-family: Lato;
 +
font-size: 1rem;
 +
}
 +
 +
.social{
 +
margin: 0.5rem;
 +
}
 +
 +
.social>a{
 +
position: relative;
 +
top: -1rem;
 +
padding-left: 1rem;
 +
}
 +
 +
/* == Utility == */
 +
 +
.bold{
 +
font-weight: bold;
 +
}
 +
 +
.i{
 +
font-style: italic;
 +
}
 +
 +
 +
/*  == Front page == */
 +
 +
/* == Photo block == */
 +
.photo-block{
 +
min-height: 500px;
 +
background-position: center;
 +
background-size: cover;
 +
display: flex;
 +
flex-direction: column;
 +
justify-content: center;
 +
}
 +
 +
.photo-block > .text{
 +
color: #FFF;
 +
margin-left: 1em;
 +
}
 +
 +
.photo-block > .text > .title{
 +
font-family: Baloo;
 +
clear: both;
 +
font-size: 4em;
 +
line-height: 1em;
 +
padding: 0.9rem;
 +
background-color: rgba(0,0,0,0.5);
 +
}
 +
 +
.photo-block > .text > .sub{
 +
font-family: Lato;
 +
clear: both;
 +
font-size: 2.5em;
 +
padding: 1rem;
 +
background-color: rgba(0,0,0,0.5);
 +
}
 +
 +
.text.left{
 +
margin-left: 1em;
 +
}
 +
 +
.text.right{
 +
margin-right: 1em;
 +
}
 +
 +
.text.left > .title, .text.left > .sub{
 +
float: left;
 +
}
 +
 +
.text.right > .title, .text.right > .sub{
 +
float: right;
 +
}
 +
 +
.photo-block#headline{
 +
background-image: url(https://static.igem.org/mediawiki/2016/2/2a/T--Glasgow--Group1.jpg);
 +
}
 +
 +
.photo-block#beta-carotene{
 +
background-image: url(https://static.igem.org/mediawiki/2016/5/58/T--Glasgow--beta-carotene.jpg);
 +
}
 +
 +
.photo-block#biology{
 +
background-image: url(https://static.igem.org/mediawiki/2016/4/4e/T--Glasgow--Tubes.jpg);
 +
}
 +
 +
.photo-block#bottles{
 +
background-image: url(https://static.igem.org/mediawiki/2016/2/21/T--Glasgow--bottles.jpg);
 +
}
 +
 +
.photo-block#electronics{
 +
background-image: url(https://static.igem.org/mediawiki/2016/5/54/T--Glasgow--electronics.jpg);
 +
}
 +
 +
.photo-block#electronics2{
 +
background-image: url(https://static.igem.org/mediawiki/2016/b/bb/T--Glasgow--electronics2.jpg);
 +
}
 +
 +
.photo-block#eppendorf{
 +
background-image: url(https://static.igem.org/mediawiki/2016/0/02/T--Glasgow--eppendorf.jpg);
 +
}
 +
 +
.photo-block#eppendorf2{
 +
background-image: url(https://static.igem.org/mediawiki/2016/b/b9/T--Glasgow--eppendorf2.jpg);
 +
}
 +
 +
.photo-block#interlab{
 +
background-image: url(https://static.igem.org/mediawiki/2016/d/d8/T--Glasgow--interlab.jpg);
 +
}
 +
 +
.photo-block#killswitch{
 +
background-image: url(https://static.igem.org/mediawiki/2016/1/10/T--Glasgow--killswitch.jpg);
 +
}
 +
 +
.photo-block#measurement{
 +
background-image: url(https://static.igem.org/mediawiki/2016/c/cc/T--Glasgow--measurement.jpg);
 +
}
 +
 +
.photo-block#outreach{
 +
background-image: url(https://static.igem.org/mediawiki/2016/4/4d/T--Glasgow--outreach.jpg);
 +
}
 +
 +
.photo-block#solar_concentrator{
 +
background-image: url(https://static.igem.org/mediawiki/2016/9/99/T--Glasgow--solar_concentrator.jpg);
 +
}
 +
 +
.photo-block#amilCPtubes{
 +
background-image: url(https://static.igem.org/mediawiki/2016/a/a7/T--Glasgow--amilCPtubes.jpg);
 +
}
 +
 +
.photo-block#team{
 +
background-image:url(https://static.igem.org/mediawiki/2016/3/38/T--Glasgow--TeamLabCoats.jpg);
 +
}
 +
 +
.photo-block#protocols, .photo-block#project{
 +
background-image:url(https://static.igem.org/mediawiki/2016/f/fa/T--Glasgow--LiamWithDish.jpg);
 +
}
 +
 +
.photo-block#chassis{
 +
background-image:url(https://static.igem.org/mediawiki/2016/b/b3/T--Glasgow--chassis.jpg);
 +
}
 +
 +
.photo-block#matAndKatyPipette{
 +
background-image:url(https://static.igem.org/mediawiki/2016/3/39/T--Glasgow--Katy_with_pipette.jpg);
 +
}
 +
 +
.photo-block#prototype{
 +
background-image:url(https://static.igem.org/mediawiki/2016/c/ce/T--Glasgow--ThePrototype.jpg);
 +
}
 +
 +
.photo-block#GMO_legislation{
 +
background-image:url(https://static.igem.org/mediawiki/2016/8/87/T--Glasgow--GMO_Legislation.jpg);
 +
}
 +
 +
.photo-block#proof-of-concept{
 +
background-image: url(https://static.igem.org/mediawiki/2016/0/0c/T--Glasgow--Proof-of-concept.jpg);
 +
}
 +
 +
.photo-block#SIM{
 +
background-image: url(https://static.igem.org/mediawiki/2016/9/95/T--Glasgow--SIM.jpg);
 +
}
 +
 +
/* == Text block == */
 +
 +
.text-block{
 +
background-color: #FFAC03;
 +
padding: 1em;
 +
}
 +
 +
.text-block > .title{
 +
text-align: center;
 +
font-family: Baloo;
 +
font-size: 4em;
 +
margin: 1em;
 +
}
 +
 +
.text-block > .copy_container{
 +
max-width: 1000px;
 +
margin: 0 auto;
 +
}
 +
 +
p.copy{
 +
text-align: justify;
 +
font-family: Lato !important;
 +
font-size: 1.5em !important;
 +
line-height: 1.5;
 +
}
 +
 +
/* == Team Page == */
 +
 +
.section-header{
 +
margin: auto;
 +
font-family: Baloo;
 +
font-size: 3em;
 +
height: 2em;
 +
text-align: center;
 +
}
 +
 +
.section-header>.text{
 +
vertical-align: middle;
 +
}
 +
 +
/* == Team block == */
 +
 +
.team-block{
 +
background-color: #FFAC03;
 +
padding: 1em;
 +
width:100%;
 +
}
 +
 +
/* == Profile callout == */
 +
 +
.callout > .name{
 +
font-family: Baloo;
 +
font-size: 1.5em;
 +
text-align: center;
 +
margin-bottom: 10px;
 +
}
 +
 +
.callout > .profile{
 +
font-family: Lato;
 +
margin-top: 10px;
 +
}
 +
 +
 +
.profile > .degree{
 +
float: left;
 +
}
 +
 +
.profile > .from{
 +
float: right;
 +
}
 +
 +
.profile > .text{
 +
clear: right;
 +
}
 +
 +
/* == Sponsor page == */
 +
.acknowledge-block{
 +
background-color: #FFAC03;
 +
padding: 1em;
 +
}
 +
 +
.sponsor.callout{
 +
float:left;
 +
}
 +
 +
.callout > .logo{
 +
float: left;
 +
margin-right: 15px;
 +
width: 40%
 +
}
 +
 +
.callout > .name{
 +
font-family: Baloo;
 +
font-size: 1.5em;
 +
}
 +
 +
/* == Protocol page == */
 +
 +
.protocols-block{
 +
background-color: #FFAC03;
 +
padding: 1em;
 +
}
 +
 +
.container{
 +
max-width: 1000px;
 +
margin: auto;
 +
}
 +
 +
/* == Wiki page == */
 +
 +
.wiki-block{
 +
background-color: #FFAC03;
 +
padding: 1em;
 +
}
 +
 +
.wiki-block > .title{
 +
text-align: center;
 +
font-family: Baloo;
 +
font-size: 4em;
 +
margin: 1em;
 +
}
 +
 +
#article{
 +
max-width: 1000px;
 +
margin: auto;
 +
left: 260px;
 +
}
 +
 +
#article, #article p{
 
font-family: Lato;
 
font-family: Lato;
 
font-size: 1.3rem;
 
font-size: 1.3rem;
 +
line-height: 1.5rem;
 +
}
 +
 +
code{
 +
font-size: 1rem;
 +
max-height: 400px;
 +
}
 +
 +
.mw-editsection{
 +
display: none;
 +
}
 +
 +
.sticky-container{
 +
position: absolute;
 +
max-width: 250px;
 +
width: 100%;
 +
}
 +
 +
h2, h3, h4{
 +
font-family: Baloo;
 +
}
 +
 +
ul{
 +
list-style-type: circle;
 +
list-style-image: none;
 +
}
 +
 +
/* == Wiki photo block == */
 +
.article-image-container{
 +
text-align: center;
 +
}
 +
 +
.article-image-caption{
 +
padding-top: 10px;
 +
text-align: justify;
 +
font-size: 0.8em;
 +
max-width: 70%;
 +
margin: auto;
 +
}
 
}
 
}
  
Line 114: Line 473:
  
 
.facebook{
 
.facebook{
−
background: url(https://static.igem.org/mediawiki/2016/c/c3/T--Glasgow--Facebook_square_blue.svg);
+
background: url(https://static.igem.org/mediawiki/2016/b/b5/T--Glasgow--Facebook_square_orange.svg);
 
}
 
}
  
 
.twitter{
 
.twitter{
−
background: url(https://static.igem.org/mediawiki/2016/b/bf/T--Glasgow--Twitter_square_blue.svg);
+
background: url(https://static.igem.org/mediawiki/2016/3/37/T--Glasgow--Twitter_square_orange.svg);
 
}
 
}
  
 
.instagram{
 
.instagram{
−
background: url(https://static.igem.org/mediawiki/2016/d/d5/T--Glasgow--Instagram_square_blue.svg);
+
background: url(https://static.igem.org/mediawiki/2016/c/c4/T--Glasgow--Instagram_square_orange.svg);
 
}
 
}

Latest revision as of 03:58, 20 October 2016

@import 'https://fonts.googleapis.com/css?family=Baloo%7CLato&subset=latin-ext';

/* iGEM Wiki overrides */

.footer_container ul{ margin: 0px; }

.top_level_container p{ font-family: Lato; }

  1. sideMenu, #top_title{

display:none; }

div#content{ width: 100%; padding: 0px; margin: 0px; top: -20px; }

div#globalWrapper{ padding: 0px; height: 100%; }

div.thumb{ border:none; }

/* End overrides */

/* Light blue: #C2E0D5; Dark blue: #44ABA0;

Yellow: #FFCE2F; Light orange: #FFAC03; Dark orange: #FF8302;

  • /

/* == Header Styles == */

a{ color:inherit; }

a:hover{ text-decoration: none; color: #000; }

a:visited{ color:inherit; }

.dropdown.menu.large-horizontal>li.is-dropdown-submenu-parent>a:after{ /* Hide the dropdown menu arrows */ display:none; }

.is-dropdown-submenu{ border:none; }

.title-bar-title{ font-size: 1.8rem; }

.top-bar-title{ height: 100%; display: inline-block; }

  1. header_logo{

float: left; height: 10em; margin: 1em; }

  1. main-nav{

/*Style the top bar menu*/ color: #ffce2f; font-size: 3em; height: 2em; line-height: 2em;

}

.top-bar-right{ padding: 4em 0em; }

li.is-dropdown-submenu-item{ /*Reset top bar dropdown menu text-size*/ font-size: 1rem; }

  1. main-nav .menu.vertical{

/*Style top bar dropdown menu backgrounds*/ background-color:#0085B2; text-align: center; }

.headline{ font-family: Baloo; }

.top-bar, .dropdown.menu{ height:100; background-color: #0085B2; }

/* == Footer Styles == */

.footer_container{ background-color: #0085B2; padding: 1rem 0rem 0rem 4rem; color: #ffce2f; }

li.main_footer_links{ vertical-align: top; font-family: Baloo; font-size: 1.4rem; text-align: left; }

.main_footer_links>ul{ font-family: Lato; font-size: 1rem; }

.social{ margin: 0.5rem; }

.social>a{ position: relative; top: -1rem; padding-left: 1rem; }

/* == Utility == */

.bold{ font-weight: bold; }

.i{ font-style: italic; }


/* == Front page == */

/* == Photo block == */ .photo-block{ min-height: 500px; background-position: center; background-size: cover; display: flex; flex-direction: column; justify-content: center; }

.photo-block > .text{ color: #FFF; margin-left: 1em; }

.photo-block > .text > .title{ font-family: Baloo; clear: both; font-size: 4em; line-height: 1em; padding: 0.9rem; background-color: rgba(0,0,0,0.5); }

.photo-block > .text > .sub{ font-family: Lato; clear: both; font-size: 2.5em; padding: 1rem; background-color: rgba(0,0,0,0.5); }

.text.left{ margin-left: 1em; }

.text.right{ margin-right: 1em; }

.text.left > .title, .text.left > .sub{ float: left; }

.text.right > .title, .text.right > .sub{ float: right; }

.photo-block#headline{ background-image: url(T--Glasgow--Group1.jpg); }

.photo-block#beta-carotene{ background-image: url(T--Glasgow--beta-carotene.jpg); }

.photo-block#biology{ background-image: url(T--Glasgow--Tubes.jpg); }

.photo-block#bottles{ background-image: url(T--Glasgow--bottles.jpg); }

.photo-block#electronics{ background-image: url(T--Glasgow--electronics.jpg); }

.photo-block#electronics2{ background-image: url(T--Glasgow--electronics2.jpg); }

.photo-block#eppendorf{ background-image: url(T--Glasgow--eppendorf.jpg); }

.photo-block#eppendorf2{ background-image: url(T--Glasgow--eppendorf2.jpg); }

.photo-block#interlab{ background-image: url(T--Glasgow--interlab.jpg); }

.photo-block#killswitch{ background-image: url(T--Glasgow--killswitch.jpg); }

.photo-block#measurement{ background-image: url(T--Glasgow--measurement.jpg); }

.photo-block#outreach{ background-image: url(T--Glasgow--outreach.jpg); }

.photo-block#solar_concentrator{ background-image: url(T--Glasgow--solar_concentrator.jpg); }

.photo-block#amilCPtubes{ background-image: url(T--Glasgow--amilCPtubes.jpg); }

.photo-block#team{ background-image:url(T--Glasgow--TeamLabCoats.jpg); }

.photo-block#protocols, .photo-block#project{ background-image:url(T--Glasgow--LiamWithDish.jpg); }

.photo-block#chassis{ background-image:url(T--Glasgow--chassis.jpg); }

.photo-block#matAndKatyPipette{ background-image:url(T--Glasgow--Katy_with_pipette.jpg); }

.photo-block#prototype{ background-image:url(T--Glasgow--ThePrototype.jpg); }

.photo-block#GMO_legislation{ background-image:url(T--Glasgow--GMO_Legislation.jpg); }

.photo-block#proof-of-concept{ background-image: url(T--Glasgow--Proof-of-concept.jpg); }

.photo-block#SIM{ background-image: url(T--Glasgow--SIM.jpg); }

/* == Text block == */

.text-block{ background-color: #FFAC03; padding: 1em; }

.text-block > .title{ text-align: center; font-family: Baloo; font-size: 4em; margin: 1em; }

.text-block > .copy_container{ max-width: 1000px; margin: 0 auto; }

p.copy{ text-align: justify; font-family: Lato !important; font-size: 1.5em !important; line-height: 1.5; }

/* == Team Page == */

.section-header{ margin: auto; font-family: Baloo; font-size: 3em; height: 2em; text-align: center; }

.section-header>.text{ vertical-align: middle; }

/* == Team block == */

.team-block{ background-color: #FFAC03; padding: 1em; width:100%; }

/* == Profile callout == */

.callout > .name{ font-family: Baloo; font-size: 1.5em; text-align: center; margin-bottom: 10px; }

.callout > .profile{ font-family: Lato; margin-top: 10px; }


.profile > .degree{ float: left; }

.profile > .from{ float: right; }

.profile > .text{ clear: right; }

/* == Sponsor page == */ .acknowledge-block{ background-color: #FFAC03; padding: 1em; }

.sponsor.callout{ float:left; }

.callout > .logo{ float: left; margin-right: 15px; width: 40% }

.callout > .name{ font-family: Baloo; font-size: 1.5em; }

/* == Protocol page == */

.protocols-block{ background-color: #FFAC03; padding: 1em; }

.container{ max-width: 1000px; margin: auto; }

/* == Wiki page == */

.wiki-block{ background-color: #FFAC03; padding: 1em; }

.wiki-block > .title{ text-align: center; font-family: Baloo; font-size: 4em; margin: 1em; }

  1. article{

max-width: 1000px; margin: auto; left: 260px; }

  1. article, #article p{

font-family: Lato; font-size: 1.3rem; line-height: 1.5rem; }

code{ font-size: 1rem; max-height: 400px; }

.mw-editsection{ display: none; }

.sticky-container{ position: absolute; max-width: 250px; width: 100%; }

h2, h3, h4{ font-family: Baloo; }

ul{ list-style-type: circle; list-style-image: none; }

/* == Wiki photo block == */ .article-image-container{ text-align: center; }

.article-image-caption{ padding-top: 10px; text-align: justify; font-size: 0.8em; max-width: 70%; margin: auto; } }

/* == Icon styles == */

.icon{ display: inline-block; height: 2.5rem; width: 2.5rem; }

.facebook{ background: url(https://static.igem.org/mediawiki/2016/b/b5/T--Glasgow--Facebook_square_orange.svg); }

.twitter{ background: url(https://static.igem.org/mediawiki/2016/3/37/T--Glasgow--Twitter_square_orange.svg); }

.instagram{ background: url(https://static.igem.org/mediawiki/2016/c/c4/T--Glasgow--Instagram_square_orange.svg); }