Difference between revisions of "Team:XJTLU-CHINA/css/main"

 
(31 intermediate revisions by 4 users not shown)
Line 5: Line 5:
 
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {
 
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {
 
display: none;
 
display: none;
 +
}
 +
 +
.text-center {
 +
  text-align: center;
 
}
 
}
  
Line 11: Line 15:
 
}
 
}
  
 +
#HQ_page p{
 +
    margin: 0 auto;
 +
    text-align: justify;
 +
 +
}
 
.centerImage
 
.centerImage
 
{
 
{
Line 24: Line 33:
 
   height: 200px;
 
   height: 200px;
 
   background-color: #999;
 
   background-color: #999;
 +
  marign: 0 auto;
 
}
 
}
 
#sideMenu .sideMenuTitle, #sideMenu .expand_subMenus, #sideMenu .switch_Menus{
 
#sideMenu .sideMenuTitle, #sideMenu .expand_subMenus, #sideMenu .switch_Menus{
Line 50: Line 60:
 
     padding: 0px;
 
     padding: 0px;
 
     font-size: 100%;
 
     font-size: 100%;
 +
  marign: 0 auto;
 +
 
}
 
}
 
 
Line 56: Line 68:
 
     height: 100%;
 
     height: 100%;
 
     background-color: transparent;
 
     background-color: transparent;
 +
    marign: 0 auto;
 +
 
}
 
}
  
Line 69: Line 83:
 
.verticalLine {
 
.verticalLine {
 
     border-left: 2px dotted #808080;
 
     border-left: 2px dotted #808080;
−
    padding-left: 2em;
 
 
     float: right;
 
     float: right;
 +
    height: 385px;
 
}
 
}
 
.socialBar{
 
.socialBar{
Line 100: Line 114:
 
.light {
 
.light {
 
   font-weight: 400;
 
   font-weight: 400;
−
}
 
−
.navbar-custom {
 
−
  margin-bottom: 0;
 
−
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 
−
  text-transform: uppercase;
 
−
  font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
 
−
  background-color: black;
 
−
}
 
−
.navbar-custom .navbar-toggle {
 
−
  color: white;
 
−
  background-color: rgba(255, 255, 255, 0.2);
 
−
  font-size: 12px;
 
−
}
 
−
.navbar-custom .navbar-toggle:focus,
 
−
.navbar-custom .navbar-toggle:active {
 
−
  outline: none;
 
−
}
 
−
.navbar-custom .navbar-brand {
 
−
  margin-top: 15px;
 
−
  font-weight: 700;
 
−
}
 
−
.navbar-custom .navbar-brand:focus {
 
−
  outline: none;
 
−
}
 
−
.navbar-custom a {
 
−
  color: white;
 
−
}
 
−
.navbar-custom .nav li a {
 
−
  -webkit-transition: background 0.3s ease-in-out;
 
−
  -moz-transition: background 0.3s ease-in-out;
 
−
  transition: background 0.3s ease-in-out;
 
−
}
 
−
.navbar-custom .nav li a:hover {
 
−
  color: rgba(255, 255, 255, 0.8);
 
−
  outline: none;
 
−
  background-color: black;
 
−
}
 
−
.navbar-custom .nav li a:focus,
 
−
.navbar-custom .nav li a:active {
 
−
  outline: none;
 
−
  background-color: black;
 
−
}
 
−
.navbar-custom .nav li.active {
 
−
  outline: none;
 
−
}
 
−
.navbar-custom .nav li.active a {
 
−
  background-color: rgba(0, 0, 0, 0);
 
−
}
 
−
.navbar-custom .nav li.active a:hover {
 
−
  color: black;
 
−
}
 
−
@media (min-width: 768px) {
 
−
  .navbar-custom {
 
−
    margin-top: 8px;
 
−
    padding: 20px 0;
 
−
    border-bottom: none;
 
−
    letter-spacing: 1px;
 
−
    background: black;
 
−
    -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
 
−
    -moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
 
−
    transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
 
−
  }
 
−
  .navbar-custom.top-nav-collapse {
 
−
    padding: 0;
 
−
    background: black;
 
−
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 
−
  }
 
 
}
 
}
 +
 +
 +
 +
  
 
.header-image {
 
.header-image {
 
     margin: 0 auto;
 
     margin: 0 auto;
 +
    margin-top: -25px;
 
     display: block;
 
     display: block;
 
     width: 100%;
 
     width: 100%;
 +
    height: 897px;
 
     text-align: center;
 
     text-align: center;
 
     background: url('https://static.igem.org/mediawiki/2016/0/07/Headerimage.png') ;
 
     background: url('https://static.igem.org/mediawiki/2016/0/07/Headerimage.png') ;
Line 181: Line 134:
 
}
 
}
  
−
.headline {
 
−
    padding: 0;
 
−
}
 
  
−
.headline h1 {
 
−
    font-size: 130px;
 
−
    color: white;
 
  
−
}
+
  
−
.headline h2 {
 
−
    font-size: 77px;
 
−
    color: white;
 
−
}
 
  
−
.featurette-divider {
 
−
    margin: 80px 0;
 
−
}
 
−
 
−
.featurette {
 
−
    overflow: hidden;
 
−
}
 
−
 
−
.featurette-image.pull-left {
 
−
    margin-right: 40px;
 
−
}
 
−
 
−
.featurette-image.pull-right {
 
−
    margin-left: 40px;
 
−
}
 
−
 
−
.featurette-heading {
 
−
    font-size: 50px;
 
−
}
 
−
 
−
 
−
 
−
footer {
 
−
  color: white;
 
−
 
−
 
−
}
 
−
 
−
footer h3 {
 
−
  margin-bottom: 30px;
 
−
  font: Helvetica;
 
−
  text-transform: uppercase;
 
−
  font-weight: 700;
 
−
}
 
−
 
−
footer p{
 
−
font-size: 20px;
 
−
}
 
−
footer ul{
 
−
font-size: 20px;
 
−
}
 
−
footer .footer-above {
 
−
  padding-top: 30px;
 
−
  background-color: #2C3E50;
 
−
}
 
−
footer .footer-col {
 
−
  margin-bottom: 50px;
 
 
   
 
   
−
 
−
}
 
−
footer .footer-below {
 
−
  padding: 25px 0;
 
−
  background-color: #233140;
 
−
 
−
 
−
}
 
−
 
−
@media (min-width: 767px) {
 
 
.btn-outline {
 
.btn-outline {
 
   color: white;
 
   color: white;
Line 260: Line 146:
 
   background: transparent;
 
   background: transparent;
 
   transition: all 0.3s ease-in-out;
 
   transition: all 0.3s ease-in-out;
−
  margin-top: 15px;
 
 
}
 
}
 
.btn-outline:hover,
 
.btn-outline:hover,
Line 277: Line 162:
 
   border: 2px solid white;
 
   border: 2px solid white;
 
   border-radius: 100%;
 
   border-radius: 100%;
−
   text-align: center;
+
   text-align: right;
 
   font-size: 20px;
 
   font-size: 20px;
 
   line-height: 45px;
 
   line-height: 45px;
 
}
 
}
 +
 +
.headline {
 +
    padding: 120px 0;
 
}
 
}
  
−
@media(max-width:1200px) {
+
.headline h1 {
−
    .headline h1 {
+
    font-size: 130px;
−
        font-size: 140px;
+
 
−
    }
+
}
  
−
    .headline h2 {
+
.headline h2 {
−
        font-size: 63px;
+
    font-size: 77px;
−
    }
+
 
 +
}
  
−
    .featurette-divider {
+
.featurette-divider {
−
        margin: 50px 0;
+
    margin: 80px 0;
−
    }
+
}
  
−
    .featurette-image.pull-left {
+
.featurette {
−
        margin-right: 20px;
+
    overflow: hidden;
−
    }
+
}
  
−
    .featurette-image.pull-right {
+
.featurette-image.pull-left {
−
        margin-left: 20px;
+
    margin-right: 40px;
−
    }
+
}
  
−
    .featurette-heading {
+
.featurette-image.pull-right {
−
        font-size: 35px;
+
    margin-left: 40px;
−
    }
+
 
}
 
}
  
−
@media(max-width:991px) {
+
.featurette-heading {
−
     .headline h1 {
+
     font-size: 50px;
−
        font-size: 105px;
+
}
−
    }
+
  
−
    .headline h2 {
 
−
        font-size: 50px;
 
−
    }
 
  
−
    .featurette-divider {
 
−
        margin: 40px 0;
 
−
    }
 
  
−
    .featurette-image {
 
−
        max-width: 50%;
 
−
    }
 
  
−
    .featurette-image.pull-left {
+
.navbar-brand{
−
        margin-right: 10px;
+
  margin-top: 10px;
−
    }
+
−
 
+
−
    .featurette-image.pull-right {
+
−
        margin-left: 10px;
+
−
    }
+
−
 
+
−
    .featurette-heading {
+
−
        font-size: 30px;
+
−
    }
+
 
}
 
}
  
−
@media(max-width:768px) {
+
nav nav-bar{
−
     .container {
+
     margin-top: 10px;
−
        margin: 0 15px;
+
−
    }
+
−
 
+
−
    .featurette-divider {
+
−
        margin: 40px 0;
+
−
    }
+
−
 
+
−
    .featurette-heading {
+
−
        font-size: 25px;
+
−
    }
+
 
}
 
}
  
−
@media(max-width:668px) {
+
.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{
−
     .headline h1 {
+
     padding: 15px;
−
        font-size: 70px;
+
     font-size: 20px;
−
     }
+
−
 
+
−
    .headline h2 {
+
−
        font-size: 32px;
+
−
    }
+
−
 
+
−
    .featurette-divider {
+
−
        margin: 30px 0;
+
−
    }
+
 
}
 
}
  
−
@media(max-width:640px) {
 
−
    .headline {
 
−
        padding: 75px 0 25px 0;
 
−
    }
 
  
−
    .headline h1 {
 
−
        font-size: 60px;
 
−
    }
 
  
−
    .headline h2 {
+
#topcontrol {
−
        font-size: 30px;
+
  color: #fff;
−
    }
+
  z-index: 99;
 +
  width: 30px;
 +
  height: 30px;
 +
  font-size: 20px;
 +
  background: #222;
 +
  position: relative;
 +
  right: 14px !important;
 +
  bottom: 11px !important;
 +
  border-radius: 3px !important;
 
}
 
}
  
−
@media(max-width:375px) {
+
#topcontrol:after {
−
    .featurette-divider {
+
  top: -2px;
−
        margin: 10px 0;
+
  left: 8.5px;
−
    }
+
  content: "\f106";
−
 
+
  position: absolute;
−
    .featurette-image {
+
  text-align: center;
−
        max-width: 100%;
+
  font-family: FontAwesome;
−
    }
+
−
 
+
−
    .featurette-image.pull-left {
+
−
        margin-right: 0;
+
−
        margin-bottom: 10px;
+
−
    }
+
−
 
+
−
    .featurette-image.pull-right {
+
−
        margin-bottom: 10px;
+
−
        margin-left: 0;
+
−
    }
+
 
}
 
}
  
−
 
+
#topcontrol:hover {
−
footer-socials {
+
  color: #fff;
−
margin-top: 12px;
+
  background: #72c02c;
−
text-align: right;
+
  -webkit-transition: all 0.3s ease-in-out;
 +
  -moz-transition: all 0.3s ease-in-out;
 +
  -o-transition: all 0.3s ease-in-out;
 +
  transition: all 0.3s ease-in-out;
 
}
 
}
  
−
.footer-socials li a {
+
footer .contanier{
−
color: #fff;
+
    width: 1500px;
−
font-size: 16px;
+
 
}
 
}
  
−
 
+
nav ul{
−
 
+
    text-align: left;
−
@media (max-width: 991px) {
+
−
.footer-socials {
+
−
text-align: left;
+
−
}
+
−
 
+
 
}
 
}

Latest revision as of 14:45, 19 October 2016

  1. menu_MainPage, #content_MainPage, .rightColumn_Submenu, .submenu, #sideMenu, .logo_2016{

display:none; }

  1. contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {

display: none; }

.text-center { 

  text-align: center;

}

  1. topBanner, #topBannerText{

display:none; }

  1. HQ_page p{
   margin: 0 auto;
   text-align: justify;

} .centerImage { 

   text-align:center;
   display:block;

}

.wraptocenter { 

 display: block;
 text-align: center;
 vertical-align: middle;
 width: 200px;
 height: 200px;
 background-color: #999;
 marign: 0 auto;

}

  1. sideMenu .sideMenuTitle, #sideMenu .expand_subMenus, #sideMenu .switch_Menus{
   display:none;

}

  1. logo-2016, #firstHeading, .firstHeading, #menu_MainPage {
   display: none;

}

  1. top-section { 
   margin:auto;

}

  1. top_menu_inside { 
  background-color: transparent;
  margin-left: 390px;

}

  1. globalWrapper, #content { 
   width: 100%;
   height: 100%;
   border: 0px;
   background-color: transparent;
   margin: 0 auto;
   padding: 0px;
   font-size: 100%;
 marign: 0 auto;

}

html, body, .wrapper { 

   width: 100%;
   height: 100%;
   background-color: transparent;
   marign: 0 auto;

}

.headerBreak{ 

 width:100%;
 height:2px;
 background-color:white;
 display:none;
 margin-bottom:10px;

}


.verticalLine { 

   border-left: 2px dotted #808080;
   float: right;
   height: 385px;

} .socialBar{ 

   background-color: #0085D5;
   margin:0 auto;
   overflow: hidden;

} .socialBar ul{ 

   padding: 0 9px;
   margin: 0 auto;
   color: white;
   font: robotoregular;

}


a { 

 -webkit-transition: all 0.2s ease-in-out;
 -moz-transition: all 0.2s ease-in-out;
 transition: all 0.2s ease-in-out;

} a:hover, a:focus { 

 text-decoration: none;
 color: #1d9b6c;

} .light { 

 font-weight: 400;

}



.header-image { 

   margin: 0 auto;
   margin-top: -25px;
   display: block;
   width: 100%;
   height: 897px;
   text-align: center;
   background: url('https://static.igem.org/mediawiki/2016/0/07/Headerimage.png') ;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;

}




.btn-outline { 

 color: white;
 font-size: 20px;
 border: solid 2px white;
 background: transparent;
 transition: all 0.3s ease-in-out;

} .btn-outline:hover, .btn-outline:focus, .btn-outline:active, .btn-outline.active { 

 color: #18BC9C;
 background: white;
 border: solid 2px white;

}

.btn-social { 

 display: inline-block;
 height: 50px;
 width: 50px;
 border: 2px solid white;
 border-radius: 100%;
 text-align: right;
 font-size: 20px;
 line-height: 45px;

}

.headline { 

   padding: 120px 0;

}

.headline h1 { 

   font-size: 130px;

}

.headline h2 { 

   font-size: 77px;

}

.featurette-divider { 

   margin: 80px 0;

}

.featurette { 

   overflow: hidden;

}

.featurette-image.pull-left { 

   margin-right: 40px;

}

.featurette-image.pull-right { 

   margin-left: 40px;

}

.featurette-heading { 

   font-size: 50px;

}



.navbar-brand{ 

  margin-top: 10px;

}

nav nav-bar{ 

   margin-top: 10px;

}

.mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{ 

   padding: 15px;
   font-size: 20px;

}


  1. topcontrol {
 color: #fff;
 z-index: 99;
 width: 30px;
 height: 30px;
 font-size: 20px;
 background: #222;
 position: relative;
 right: 14px !important;
 bottom: 11px !important;
 border-radius: 3px !important;

}

  1. topcontrol:after {
 top: -2px;
 left: 8.5px;
 content: "\f106";
 position: absolute;
 text-align: center;
 font-family: FontAwesome;

}

  1. topcontrol:hover {
 color: #fff;
 background: #72c02c;
 -webkit-transition: all 0.3s ease-in-out;
 -moz-transition: all 0.3s ease-in-out;
 -o-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;

}

footer .contanier{ 

   width: 1500px;

}

nav ul{ 

    text-align: left;

}