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

 
(96 intermediate revisions by the same user not shown)
Line 12: Line 12:
  
 
html body{
 
html body{
−
   background-color: #faece5;
+
   background-color: #daede9;
 
font-family: 'Varela Round', sans-serif;
 
font-family: 'Varela Round', sans-serif;
 
font-size: 14px;
 
font-size: 14px;
Line 18: Line 18:
  
 
b{
 
b{
−
color: #d24f2b;
+
color: #5ec3af;
 +
}
 +
 
 +
#Caption{
 +
font-size: 14px !important;
 +
text-align: center !important;
 +
}
 +
 
 +
#Caption b{
 +
color: #000;
 
}
 
}
  
Line 46: Line 55:
 
margin-top: 12px;
 
margin-top: 12px;
 
font-family: Karla, serif;
 
font-family: Karla, serif;
 +
}
 +
 +
#HQ_page table{
 +
margin-left: 0;
 +
width: 100%;
 
}
 
}
  
Line 62: Line 76:
  
 
#HQ_page h2{
 
#HQ_page h2{
−
font-size: 18px;
+
font-size: 24px;
−
color: #d24f2b;
+
color: #fcb633;
 
}
 
}
  
 
#HQ_page h3{
 
#HQ_page h3{
−
font-size: 18px;
+
font-size: 16px;
−
color: #fff;
+
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%;
 
}
 
}
  
Line 99: Line 119:
  
 
#TwoCols img{
 
#TwoCols img{
 +
vertical-align: top;
 
display: inline-block;
 
display: inline-block;
 
max-width: 45.5%;
 
max-width: 45.5%;
Line 104: Line 125:
 
}
 
}
  
 +
#ThreeCols div{
 +
display: inline-block;
 +
vertical-align: top;
 +
}
  
 
#ThreeCols img{
 
#ThreeCols img{
−
display: inline-block;
+
vertical-align: top;
 
max-width: 31%;
 
max-width: 31%;
 
padding: 1%;
 
padding: 1%;
Line 113: Line 138:
  
 
#FourCols img{
 
#FourCols img{
 +
vertical-align: top;
 
display: inline-block;
 
display: inline-block;
 
max-width: 24%;
 
max-width: 24%;
Line 121: Line 147:
 
padding-top: 0.5rem;
 
padding-top: 0.5rem;
 
padding-right: 60rem;
 
padding-right: 60rem;
−
padding-left: 45rem;
+
padding-left: 15%;
 
     position: fixed; /* Set the navbar to fixed position */
 
     position: fixed; /* Set the navbar to fixed position */
 
     top: 0; /* Position the navbar at the top of the page */
 
     top: 0; /* Position the navbar at the top of the page */
 
     width: 70%; /* Full width */
 
     width: 70%; /* Full width */
−
    align-items: middle;
+
     text-align: left;
−
     text-align: center;
+
−
margin: 0;
+
−
margin-left: -43rem;
+
 
margin-top: 1.5rem;
 
margin-top: 1.5rem;
−
background-color: #daede9;
+
background-color: #d24f2b;
 
     list-style: none;
 
     list-style: none;
−
/*
+
z-index: 9;
−
   background-image: url("https://c1.staticflickr.com/6/5542/9395473897_870fec2eef_b.jpg");
+
 
 +
 
 +
   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-size: 100%;
−
*/
+
 
 +
background-position: 0px -35px;
 +
 
 
}
 
}
  
 
#TopBar li {
 
#TopBar li {
 
     list-style: none;
 
     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{
 
#TopBar a:link, a:visited{
 
font-family: 'Varela Round';
 
font-family: 'Varela Round';
−
color:#000;
+
color: #faece5;
 
font-weight: 900;
 
font-weight: 900;
 
}
 
}
Line 158: Line 203:
 
#MainContent{
 
#MainContent{
 
margin: 5rem auto;
 
margin: 5rem auto;
−
     background-color: #faece5;
+
     background-color: #f2f9f8;
 
     padding: 3.5rem;
 
     padding: 3.5rem;
 
     padding-right: 5rem;
 
     padding-right: 5rem;
 
     padding-left: 5rem;
 
     padding-left: 5rem;
−
     margin-top: 12rem;
+
     margin-top: 10rem;
 
     line-height: 2.2rem;
 
     line-height: 2.2rem;
 
     box-shadow: 5px 5px 15px #DDDDDD;
 
     box-shadow: 5px 5px 15px #DDDDDD;
 
     width: 75%;
 
     width: 75%;
−
     max-width: 900px;
+
     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;
Line 183: Line 238:
 
.toggle-menu{
 
.toggle-menu{
 
display: none;
 
display: none;
 +
}
 +
 +
#drop{
 +
margin-top: -1rem;
 
}
 
}
  
 
.toggle-drop{
 
.toggle-drop{
 
display: none;
 
display: none;
 +
}
 +
 +
.toggle-drop2{
 +
display: none;
 +
}
 +
 +
.logo{
 +
text-align:center;
 
}
 
}
  
 
.logo img{
 
.logo img{
−
max-width: 150px;
+
max-width: 100px;
 
display: inline-block;
 
display: inline-block;
 
vertical-align: middle;
 
vertical-align: middle;
Line 216: Line 283:
 
position: absolute;
 
position: absolute;
 
z-index: 1010;
 
z-index: 1010;
−
background-color: #65998f;
+
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 243: 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{
 
#ThreeCols img{
Line 292: Line 368:
 
@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{
 
#MainContent{
−
width: 100%;
+
padding: 0.5rem;
−
padding: 2rem;
+
margin: 0;
 +
width: 97%;
 
}
 
}
  
Line 317: Line 400:
  
 
.nav-bar{
 
.nav-bar{
−
width: 100%;
+
width: 103%;
 
position: inline;
 
position: inline;
 
}
 
}
Line 344: Line 427:
 
}
 
}
  
 +
  .toggle-drop2{
 +
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 358: Line 444:
  
 
.active{
 
.active{
 +
max-height: 100%;
 +
overflow: auto;
 +
}
 +
 +
.active2{
 
max-height: 100%;
 
max-height: 100%;
 
overflow: auto;
 
overflow: auto;
Line 374: Line 465:
 
position: static;
 
position: static;
 
background-image:none;
 
background-image:none;
−
    padding-right: 12rem;
+
width: 103% ;
−
    padding-left: 47rem;
+
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;
 +
}
 +
  
 
#InfoBox{
 
#InfoBox{
−
     display: none;
+
     padding: 1em;
 +
    position: inline;
 +
    z-index: 2;
 +
border: 5px dashed #fff;
 +
margin: 0;
 
}
 
}
  
 
}
 
}
  
−
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{
+
.mw-content-ltr li, .mw-content-ltr ul, .mw-content-ltr ol, .mw-content-rtl .mw-content-ltr ul{
 
margin: 0;
 
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