Difference between revisions of "Template:Team:Calgary/StyleSheets/styling.css"

 
(247 intermediate revisions by the same user not shown)
Line 8: Line 8:
 
html{
 
html{
 
font-size: 14px;
 
font-size: 14px;
 +
font-family: Karla, serif;
 
}
 
}
  
 
html body{
 
html body{
 
   background-color: #daede9;
 
   background-color: #daede9;
−
font-family: 'Patrick Hand SC', sans-serif;
+
font-family: 'Varela Round', sans-serif;
 +
font-size: 14px;
 +
}
 +
 
 +
b{
 +
color: #5ec3af;
 +
}
 +
 
 +
#Caption{
 +
font-size: 14px !important;
 +
text-align: center !important;
 +
}
 +
 
 +
#Caption b{
 +
color: #000;
 +
}
 +
 
 +
#SocialMedia{
 +
justify-content: center;
 +
}
 +
 
 +
#SocialMedia img{
 +
justify-content: center;
 +
max-width: 50px;
 +
padding-top: 2rem;
 +
padding-left: 2rem;
 +
padding-right: 2rem;
 +
padding-bottom: 1rem;
 +
opacity: 1.0;
 +
    filter: alpha(opacity=50);
 +
}
 +
 
 +
 
 +
#SocialMedia img:hover {
 +
    opacity: 0.5;
 +
    filter: alpha(opacity=100);
 +
}
 +
 
 +
#HQ_page p{
 +
line-height: 150%;
 +
margin-top: 12px;
 +
font-family: Karla, serif;
 +
}
 +
 
 +
#HQ_page table{
 +
margin-left: 0;
 +
width: 100%;
 +
}
 +
 
 +
#HQ_page h1, h2, h3, h4, h5{
 +
font-family: 'Varela Round';
 +
font-size:28px;
 +
text-transform: uppercase;
 +
}
 +
 
 +
#HQ_page h1{
 +
text-transform: uppercase;
 +
font-weight: bold;
 +
text-align: center;
 +
padding-top: 2rem;
 +
}
 +
 
 +
#HQ_page h2{
 +
font-size: 24px;
 +
color: #fcb633;
 +
}
 +
 
 +
#HQ_page h3{
 +
font-size: 16px;
 +
color: #5ec3af;
 +
margin-top: 1rem;
 +
}
 +
 
 +
#HQ_page h4{
 +
font-size: 14px;
 +
color: #d24f2b;
 
}
 
}
  
 
body{
 
body{
−
margin: 9rem auto;
+
margin: 5rem auto;
−
padding: 2 rem;
+
padding: 2 rem;
−
width: 75%;
+
width: 100%;
 
}
 
}
  
−
a:link, a:visited{
+
#InfoBox{
−
font-family: 'Patrick Hand SC';
+
    background: #fcb633;
−
color:#faece5;
+
color: #fff;
 +
    display: inline-block;
 +
    padding: 2em;
 +
    z-index: 2;
 +
border: 10px dashed #fff;
 +
}
 +
 
 +
#OneCol{
 +
text-align: center;
 +
padding-top: 2rem;
 +
padding-left: 2rem;
 +
padding-right: 2rem;
 +
padding-bottom: 1rem;
 +
}
 +
 
 +
#OneCol img{
 +
max-width: 95%;
 +
}
 +
 
 +
#TwoCols img{
 +
vertical-align: top;
 +
display: inline-block;
 +
max-width: 45.5%;
 +
padding: 2%;
 +
}
 +
 
 +
#ThreeCols div{
 +
display: inline-block;
 +
vertical-align: top;
 +
}
 +
 
 +
#ThreeCols img{
 +
vertical-align: top;
 +
max-width: 31%;
 +
padding: 1%;
 +
 
 +
}
 +
 
 +
#FourCols img{
 +
vertical-align: top;
 +
display: inline-block;
 +
max-width: 24%;
 +
padding: 0.25%;
 +
}
 +
 
 +
#TopBar{
 +
padding-top: 0.5rem;
 +
padding-right: 60rem;
 +
padding-left: 15%;
 +
    position: fixed; /* Set the navbar to fixed position */
 +
    top: 0; /* Position the navbar at the top of the page */
 +
    width: 70%; /* Full width */
 +
    text-align: left;
 +
margin-top: 1.5rem;
 +
background-color: #d24f2b;
 +
    list-style: none;
 +
z-index: 9;
 +
 
 +
 
 +
  background-image: url("https://static.igem.org/mediawiki/2017/e/e0/Calgary2017_HeaderRedNoBorder.png");
 +
  background-repeat: no-repeat;
 +
  background-attachment: fixed;
 +
background-size: 100%;
 +
 
 +
background-position: 0px -35px;
 +
 
 +
}
 +
 
 +
#TopBar li {
 +
    list-style: none;
 +
}
 +
 
 +
#TopBar ul ul li{
 +
float: none;
 +
position: relative;
 +
    font-family: 'Varela Round';
 +
    color: #faece5;
 +
    font-weight: 900;
 +
    text-transform: uppercase;
 +
}
 +
 
 +
#TopBar ul ul ul{
 +
position: absolute;
 +
left: 100%;
 +
top: 0;
 +
margin: 0;
 +
}
 +
 
 +
#TopBar a:link, a:visited{
 +
font-family: 'Varela Round';
 +
color: #faece5;
 
font-weight: 900;
 
font-weight: 900;
 
}
 
}
−
a:hover, a:active{
+
#TopBar a:hover, a:active{
 
color: #fcaa77;
 
color: #fcaa77;
 +
}
 +
 +
#TopBar a:-webkit-any-link {
 +
    text-decoration: none;
 
}
 
}
  
Line 33: Line 203:
 
#MainContent{
 
#MainContent{
 
margin: 5rem auto;
 
margin: 5rem auto;
−
background-color:#faece5;
+
    background-color: #f2f9f8;
−
padding: 2rem;
+
    padding: 3.5rem;
−
margin-top: 11rem;
+
    padding-right: 5rem;
−
line-height: 2.2rem;
+
    padding-left: 5rem;
−
box-shadow: 5px 5px 15px #DDDDDD;
+
    margin-top: 10rem;
−
width: 90%;
+
    line-height: 2.2rem;
 +
    box-shadow: 5px 5px 15px #DDDDDD;
 +
    width: 75%;
 +
    max-width: 1050px;
 
}
 
}
 +
 +
#MainContent li, ul, ol{
 +
margin-left: 2rem;
 +
}
 +
 +
#MainContent a {
 +
color: #d24f2b !important;
 +
}
 +
 +
 
div>p{
 
div>p{
 
text-indent: 2.6rem;
 
text-indent: 2.6rem;
 
}
 
}
 
#BottomFooter{
 
#BottomFooter{
−
     background: #e65c00;  
+
     background: #f7e1d7;
−
     color: #fbfbfb;
+
     text-align: center;
−
     text-align: center;  
+
     margin-top: 2rem;
−
     padding: 2em 0;
+
     padding: 1rem;
−
     box-shadow: 5px 5px 15px #DDDDDD;
+
     padding-top: 0;
 
}
 
}
  
−
#HQ_page h1, h2, h3, h4, h5{
 
−
font-family: 'Patrick Hand SC';
 
−
color: #538cc6;
 
−
font-size:18px;
 
−
}
 
−
 
−
img {
 
−
  max-width: 100%;
 
−
  height: auto;
 
−
  margin: 0 0 10px 0;
 
−
}
 
  
 
/*styling the header part*/
 
/*styling the header part*/
 
.toggle-menu{
 
.toggle-menu{
 
display: none;
 
display: none;
 +
}
 +
 +
#drop{
 +
margin-top: -1rem;
 
}
 
}
  
Line 72: Line 248:
 
}
 
}
  
−
#TopBar{
+
.toggle-drop2{
−
padding-top: 0.5rem;
+
display: none;
−
padding-right: 60rem;
+
−
padding-left: 45rem;
+
−
    position: fixed; /* Set the navbar to fixed position */
+
−
    top: 0; /* Position the navbar at the top of the page */
+
−
    width: 70%; /* Full width */
+
−
    align-items: middle;
+
−
    text-align: center;
+
−
margin: 0;
+
−
margin-left: -43rem;
+
−
margin-top: 1.5rem;
+
−
background-color: #e65c00;
+
−
    list-style: none;
+
 
}
 
}
  
−
#TopBar li {
+
.logo{
−
    list-style: none;
+
text-align:center;
 
}
 
}
  
Line 107: Line 271:
 
.nav-list > li {
 
.nav-list > li {
 
position: relative;
 
position: relative;
−
list-style-type: none;
+
list-style-type: none;
 
}
 
}
  
Line 119: Line 283:
 
position: absolute;
 
position: absolute;
 
z-index: 1010;
 
z-index: 1010;
−
background-color: #e65c00;
+
background-color: #d24f2b;
 
line-height: 2rem;
 
line-height: 2rem;
 
left: -9999px;
 
left: -9999px;
 
box-shadow: 5px 5px 15px #DDDDDD;
 
box-shadow: 5px 5px 15px #DDDDDD;
−
}
 
−
 
−
.nav-list li:hover{
 
−
    background-color:#000;
 
 
}
 
}
  
Line 146: Line 306:
  
 
#drop{
 
#drop{
 +
display:none;
 +
}
 +
#drop2{
 
display:none;
 
display:none;
 
}
 
}
 +
 +
@media only screen and (max-width: 95.75rem){
 +
#TopBar{
 +
background-position: 0px -15px;
 +
}
 +
  
 
@media only screen and (max-width: 58.75rem){
 
@media only screen and (max-width: 58.75rem){
 +
#TopBar{
 +
background-position: 0px -5px;
 +
    margin-left: -15%;
 +
}
 +
 +
#ThreeCols img{
 +
max-width: 95%;
 +
display: block;
 +
padding: 2%;
 +
 +
}
 +
 +
#FourCols img{
 +
display: inline-block;
 +
max-width: 45.5%;
 +
padding: 2%;
 +
}
 +
 
html{
 
html{
 
font-size: 13px;
 
font-size: 13px;
Line 172: Line 359:
 
padding-bottom: 1rem;
 
padding-bottom: 1rem;
 
}
 
}
 +
 +
#MainContent{
 +
margin-top: 0rem;
 +
}
 +
 
}
 
}
  
−
@media only screen and (max-width: 44.68rem){
+
@media only screen and (max-width: 44.68rem){
 +
 +
body, html{
 +
margin: 0rem;
 +
padding: 0rem;
 +
    width: 100%;
 +
}
 +
 
 +
#MainContent{
 +
padding: 0.5rem;
 +
margin: 0;
 +
width: 97%;
 +
}
 +
 
 +
#TwoCols img{
 +
max-width: 95%;
 +
display: block;
 +
padding: 2%;
 +
}
 +
 
 +
#ThreeCols img{
 +
max-width: 95%;
 +
display: block;
 +
padding: 2%;
 +
}
 +
 
 +
#FourCols img{
 +
max-width: 95%;
 +
display: block;
 +
padding: 2%;
 +
}
 +
 
 +
 
 
.nav-bar{
 
.nav-bar{
−
width: 100%;
+
width: 103%;
−
position: static;
+
position: inline;
 
}
 
}
 
.logo{
 
.logo{
Line 188: Line 412:
 
max-width: min-content;
 
max-width: min-content;
 
margin: 1rem auto;
 
margin: 1rem auto;
−
background-color: #e65c00;
+
background-color: #65998f;
 
text-align: center;
 
text-align: center;
 
color: #fff !important;
 
color: #fff !important;
Line 203: Line 427:
 
}
 
}
  
−
   .nav-list ul{
+
   .toggle-drop2{
−
background-color: #f76e13;
+
display: block;
 
}
 
}
−
 
 
.nav-list{
 
.nav-list{
 
display: block;
 
display: block;
−
width: 100%;
+
width: 103%;
 
position: static;
 
position: static;
 
line-height: 1rem;
 
line-height: 1rem;
Line 221: Line 444:
  
 
.active{
 
.active{
 +
max-height: 100%;
 +
overflow: auto;
 +
}
 +
 +
.active2{
 
max-height: 100%;
 
max-height: 100%;
 
overflow: auto;
 
overflow: auto;
Line 234: Line 462:
 
box-shadow: none;
 
box-shadow: none;
 
}
 
}
 +
#TopBar{
 +
position: static;
 +
background-image:none;
 +
width: 103% ;
 +
padding-right: 0rem;
 +
}
 +
 +
#TopBar ul ul li{
 +
float: initial;
 +
position: initial;
 
}
 
}
  
 +
#TopBar ul ul ul{
 +
position: initial;
 +
left: initial;
 +
top: initial;
 +
margin: initial;
 +
padding-left: 1rem;
 +
}
  
−
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{
+
 
 +
#InfoBox{
 +
    padding: 1em;
 +
    position: inline;
 +
    z-index: 2;
 +
border: 5px dashed #fff;
 
margin: 0;
 
margin: 0;
 +
}
 +
 +
}
 +
 +
.mw-content-ltr li, .mw-content-ltr ul, .mw-content-ltr ol, .mw-content-rtl .mw-content-ltr ul{
 +
margin: 0;
 +
font-size: 16px;
 +
    font-family: 'Karla', sans-serif;
 +
}
 +
 +
#bodyContent h2 {
 +
    margin-bottom: .6em;
 +
    margin-top: 0.6em;
 +
}
 +
 +
 +
load.php?debug=…&skin=igem&*:1
 +
#bodyContent a[href ^="https://"], .link-https {
 +
padding-right: 0px;
 
}
 
}
  

Latest revision as of 22:33, 31 October 2017