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

 
(180 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
<head>
 
<head>
 
<style>
 
<style>
 +
#Banner{
 +
max-width: 100%;
 +
margin-top: -5rem;
 +
border: none;
 +
}
 +
 
#sideMenu, #top_title {
 
#sideMenu, #top_title {
 
display: none;
 
display: none;
Line 18: Line 24:
  
 
b{
 
b{
−
color: #83859e;
+
color: #5ec3af;
 
}
 
}
 +
  
 
#SocialMedia{
 
#SocialMedia{
Line 62: Line 69:
  
 
#HQ_page h2{
 
#HQ_page h2{
−
font-size: 18px;
+
font-size: 24px;
 
color: #fcb633;
 
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 88: Line 101:
 
#OneCol{
 
#OneCol{
 
text-align: center;
 
text-align: center;
−
padding-top: 2rem;
+
 
−
padding-left: 2rem;
+
−
padding-right: 2rem;
+
−
padding-bottom: 1rem;
+
 
}
 
}
  
 
#OneCol img{
 
#OneCol img{
−
max-width: 95%;
+
max-width: 100%;
 
}
 
}
  
Line 104: Line 114:
 
}
 
}
  
 +
#ThreeCols div{
 +
display: inline-block;
 +
}
  
 
#ThreeCols img{
 
#ThreeCols img{
−
display: inline-block;
 
 
max-width: 31%;
 
max-width: 31%;
 
padding: 1%;
 
padding: 1%;
Line 114: Line 126:
 
#FourCols img{
 
#FourCols img{
 
display: inline-block;
 
display: inline-block;
−
max-width: 24%;
+
max-width: 21%;
−
padding: 0.25%;
+
padding: 2%;
 
}
 
}
  
 
#TopBar{
 
#TopBar{
−
padding-top: 0.5rem;
+
  /* position: fixed; */ /*Set the navbar to fixed position */
−
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 */
 
     top: 0; /* Position the navbar at the top of the page */
−
    width: 70%; /* Full width */
+
     text-align: left;
−
    align-items: middle;
+
background-color: #d24f2b;
−
     text-align: center;
+
−
margin: 0;
+
−
margin-left: -43rem;
+
−
margin-top: 1.5rem;
+
−
background-color: #65998f;
+
 
     list-style: none;
 
     list-style: none;
−
 
+
z-index: 9;
−
   background-image: url("https://static.igem.org/mediawiki/2017/7/73/Calgary2017_Header2.png");
+
margin-top: -1.5rem;
−
 
+
/*
−
  /* everything shrinks to an extent */
+
   background-image: url("https://static.igem.org/mediawiki/2017/e/e0/Calgary2017_HeaderRedNoBorder.png");
 
   background-repeat: no-repeat;
 
   background-repeat: no-repeat;
−
  background-position: center center;
 
−
  background-attachment: fixed;
 
−
 
−
  /* make sure the background doesnt move when you scroll */
 
 
   background-attachment: fixed;
 
   background-attachment: fixed;
 +
background-size: 100%;
  
 +
background-position: 0px -15px;
 +
*/
 
}
 
}
  
 
#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:#faece5;
+
color: #faece5;
 
font-weight: 900;
 
font-weight: 900;
 
}
 
}
Line 165: Line 184:
 
#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;
 
 
     line-height: 2.2rem;
 
     line-height: 2.2rem;
 
     box-shadow: 5px 5px 15px #DDDDDD;
 
     box-shadow: 5px 5px 15px #DDDDDD;
−
     width: 90%;
+
     width: 75%;
−
     max-width: 900px;
+
     max-width: 1050px;
 +
margin-top: 0rem;
 
}
 
}
−
div>p{
+
 
−
text-indent: 2.6rem;
+
#MainContent a {
 +
color: #d24f2b !important;
 
}
 
}
 +
 
#BottomFooter{
 
#BottomFooter{
 
     background: #f7e1d7;
 
     background: #f7e1d7;
 
     text-align: center;
 
     text-align: center;
−
    margin-top: 2rem;
 
 
     padding: 1rem;
 
     padding: 1rem;
 
     padding-top: 0;
 
     padding-top: 0;
Line 190: Line 210:
 
.toggle-menu{
 
.toggle-menu{
 
display: none;
 
display: none;
 +
}
 +
 +
#drop{
 +
margin-top: -1rem;
 
}
 
}
  
 
.toggle-drop{
 
.toggle-drop{
 +
display: none;
 +
}
 +
 +
.toggle-drop2{
 
display: none;
 
display: none;
 
}
 
}
Line 206: Line 234:
 
flex-flow: row;
 
flex-flow: row;
 
justify-content: space-between;
 
justify-content: space-between;
−
align-items: center;
+
align-items: left;
 
white-space: nowrap;
 
white-space: nowrap;
 
}
 
}
Line 223: Line 251:
 
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;
Line 230: Line 258:
  
 
.nav-list li:hover{
 
.nav-list li:hover{
−
     background-color:#000;
+
     background-color: /*#daede5*/ #d24f2b;
 
}
 
}
 +
  
 
.nav-list ul a{
 
.nav-list ul a{
Line 250: Line 279:
  
 
#drop{
 
#drop{
 +
display:none;
 +
}
 +
 +
#drop2{
 
display:none;
 
display:none;
 
}
 
}
  
 
@media only screen and (max-width: 58.75rem){
 
@media only screen and (max-width: 58.75rem){
 +
html body{
 +
    margin-top: 2rem;
 +
}
 +
 +
#TopBar{
 +
background-position: 0px -5px;
 +
}
  
 
#ThreeCols img{
 
#ThreeCols img{
Line 280: Line 320:
 
.has-logo{
 
.has-logo{
 
display: none;
 
display: none;
−
}
 
−
.mobile-display{
 
−
display: block;
 
−
margin:2rem auto;
 
−
text-align: center
 
−
}
 
−
.nav-bar{
 
−
padding-top: 2rem;
 
−
padding-bottom: 1rem;
 
 
}
 
}
  
Line 294: Line 325:
 
margin-top: 0rem;
 
margin-top: 0rem;
 
}
 
}
 +
 +
#Banner{
 +
margin-top: -1rem;
 +
}
 +
 +
div>p{
 +
        text-indent: 2.6rem;
 +
}
  
 
}
 
}
Line 299: Line 338:
 
@media only screen and (max-width: 44.68rem){
 
@media only screen and (max-width: 44.68rem){
 
 
 +
.mobile-display{
 +
display: block;
 +
margin:2rem auto;
 +
text-align: center
 +
}
 +
#Banner{
 +
display:none;
 +
}
 +
 +
body, html{
 +
margin: 0rem;
 +
padding: 0rem;
 +
    width: 100%;
 +
}
 +
 +
#MainContent{
 +
padding: 0.5rem;
 +
margin: 0;
 +
width: 97%;
 +
}
 +
 
#TwoCols img{
 
#TwoCols img{
 
max-width: 95%;
 
max-width: 95%;
Line 319: Line 379:
  
 
.nav-bar{
 
.nav-bar{
−
width: 100%;
+
width: 103%;
 
position: inline;
 
position: inline;
 
}
 
}
Line 332: Line 392:
 
margin: 1rem auto;
 
margin: 1rem auto;
 
background-color: #65998f;
 
background-color: #65998f;
−
text-align: center;
+
text-align: left;
 
color: #fff !important;
 
color: #fff !important;
 
padding: 1rem;
 
padding: 1rem;
Line 348: Line 408:
 
.nav-list{
 
.nav-list{
 
display: block;
 
display: block;
−
width: 100%;
+
width: 103%;
 
position: static;
 
position: static;
 
line-height: 1rem;
 
line-height: 1rem;
Line 363: Line 423:
 
overflow: auto;
 
overflow: auto;
 
}
 
}
 +
 +
.active2{
 +
                max-height: 100%;
 +
                overflow: auto;
 +
        }
  
 
.logo img{
 
.logo img{
Line 376: Line 441:
 
position: static;
 
position: static;
 
background-image:none;
 
background-image:none;
 +
width: 100% ;
 +
}
 +
 +
#TopBar ul ul li{
 +
float: initial;
 +
position: initial;
 +
}
 +
 +
#TopBar ul ul ul{
 +
        position: initial;
 +
        left: initial;
 +
        top: initial;
 +
        margin: initial;
 +
padding-left: 1rem;
 
}
 
}
  
Line 388: Line 467:
 
}
 
}
  
−
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{
+
.mw-content-ltr li, .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{
 
margin: 0;
 
margin: 0;
 
}
 
}

Latest revision as of 22:33, 31 October 2017