Difference between revisions of "Team:CityU HK/Template/CSS"

Line 1: Line 1:
 
<html>
 
<html>
 
    <meta charset="utf-8">
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap 101 Template</title>
 
 
    <!-- Bootstrap -->
 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 
    <link href='http://fonts.googleapis.com/css?family=Quattrocento+Sans' rel='stylesheet' type='text/css'>
 
   
 
    <!-- font -->
 
    <link href='http://fonts.googleapis.com/css?family=Raleway:100,300,400,500,600,700,900,100' rel='stylesheet' type='text/css'>
 
    <link href='http://fonts.googleapis.com/css?family=Dosis:200,400,700' rel='stylesheet' type='text/css'>
 
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
 
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:700' rel='stylesheet' type='text/css'>
 
 
 
 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
 
    <!--[if lt IE 9]>
 
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
 
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 
    <![endif]-->
 
 
 
 
<style type="text/css">
 
<style type="text/css">
  
Line 30: Line 5:
 
/****************************/
 
/****************************/
 
  #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;}  
 
  #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;}  
/****************************/
 
 
#top-section {    /*-- styling for default menu bar (edit, page, history, etc.) --*/
 
background-color: #383838;
 
border: 0 none;
 
        height: 0px;
 
        color: transparent;
 
z-index: 100;
 
top: 0;
 
position: fixed;
 
width: 975px;
 
left: 50%;
 
margin-left: -487px;
 
}
 
 
#top-section:hover {
 
background-color: #383838;
 
border: 0 none;
 
        height: 14px;
 
z-index: 100;
 
top: 0;
 
width: 975px;
 
left: 50%;
 
margin-left: -487px;
 
        -webkit-transition: all 0s linear .1s;
 
-moz-transition: all 0s linear .1s;
 
-ms-transition: all 0s linear .1s;
 
-o-transition: all 0s linear .1s;
 
transition: all 0s linear .1s;
 
}
 
 
#top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/
 
background-color: #383838;
 
height: 14px;
 
display: block;
 
z-index: 10;
 
position: fixed;
 
width: 100%;
 
top: 0;
 
}
 
 
#menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { /*-- styling for default menu bar links (edit, page, history, etc.) --*/
 
color: #727272;
 
text-decoration: none;
 
background-color: transparent;
 
}
 
 
  
 
#globalWrapper, #content { /*-- changes default wiki settings --*/
 
#globalWrapper, #content { /*-- changes default wiki settings --*/
Line 93: Line 21:
 
}
 
}
  
h2 {border-bottom: none;}
 
h1 {border-bottom: none;}
 
h3 {border-bottom: none;}
 
a:link {color: none;}
 
  
        h1, h2, h3, p {
 
                font-family: 'Raleway', sans-serif;
 
        }
 
  
  
.navbar-default {
 
/*background-color: #f9fccb ;*/
 
/*border-bottom: solid 3px #f40000;*/
 
margin:0;
 
                height: 8%;
 
}
 
 
.navbar-brand {
 
font-family: 'Roboto Condensed', sans-serif;
 
                font-weight: bold;
 
font-size: 1.6em;
 
padding-top: 40px;
 
padding-left: 20px;
 
padding-bottom: 70px;
 
}
 
  
        #igem {
 
                position: relative;
 
                top: -22px;
 
        }
 
       
 
        .nav .navbar-brand a:link {          /*overwrite igem default style*/
 
                color: #bebebe;
 
        }
 
 
.navbar-brand:hover {
 
color:#3cc;
 
}
 
 
    .navbar .container-fluid #bs-example-navbar-collapse-1 .nav.navbar-nav.navbar-right {
 
margin-top: 20px;
 
font-size: 14px;
 
font-family:'Raleway', sans-serif;
 
}
 
    .nav.navbar-nav.navbar-right a:link {    /*overwrite igem default style*/
 
        color:#357385;
 
    }
 
 
    .nav.navbar-nav.navbar-right a:hover {   
 
        color:#3cc;
 
        background: none;
 
    }
 
 
    .nav.navbar-nav.navbar-right .active a {
 
        background: none;
 
border-bottom-width: 3px;
 
border-bottom-style: solid;
 
border-bottom-color: #4eecba;
 
}
 
 
nav li a:hover {
 
color: #3cc;
 
        background-color: transparent;
 
}
 
 
.dropdown li a: hover {
 
        background-color: transparent;
 
 
}
 
 
.dropdown-menu li a:hover {
 
border: none;
 
color: #3cc;
 
/*font-weight:bold;*/
 
        background: none;
 
}
 
 
 
 
#footer {
 
background: rgba(0,0,0,0.8);
 
background-size:cover;
 
        width: 100%;
 
clear: both;
 
/*top: 0;*/
 
        margin: 0;
 
        padding: 10px 20px 0px 20px;
 
        border-top: solid 1px #e0e0e0;
 
      /* position: relative;*/
 
}
 
 
#footer h3 {
 
color: #dde0e4;
 
        font-family: 'Raleway', sans-serif;
 
        font-size: 18px;
 
        font-weight: bold;
 
        padding-bottom: 20px;
 
}
 
 
#footer p {
 
color: #777777;
 
text-align: center;
 
        font-size: 14px;
 
}
 
 
#footer #email {
 
      font-size: 18px;
 
}
 
 
#footer a {
 
color: #777777;
 
text-decoration: none;
 
}
 
 
#footer a:hover {
 
color: #3cc;
 
}
 
 
#footer img {
 
margin-left: 40px;
 
margin-top: 30px;
 
margin-bottom: 10px;
 
}
 
 
#copyright {
 
        width:100%;
 
        padding-top:10px;
 
        padding-bottom: 10px;
 
        background: rgba(0,0,0,0.8);
 
        color: #777777;
 
        font-family: 'Raleway', sans-serif;
 
        font-size: 14px;
 
        text-align: center;
 
}
 
 
 
@media screen and (max-width: 480px) {
 
        .navbar-default {
 
        height: auto;}
 
 
        /*.navbar-brand span{
 
        display: none;}*/
 
 
        .carousel-inner {
 
        height:auto;}
 
 
        #abstract h2 {
 
        font-size: 2em;
 
        padding-top: 10px;
 
        padding-bottom: 10px;
 
        margin-left: 30px;
 
        margin-right: 30px;}
 
 
        #abstract p {
 
        padding-left: 10px;
 
        padding-right: 10px;
 
        font-weight: 300;
 
        font-size: 14px;}
 
 
      #footer {
 
      height: 500px;}
 
 
        #footer img {
 
        width: 30px;
 
        height: 30px;}
 
}
 
  
@media screen and (max-width: 800px){
 
        #navbar-brand {
 
        Font-size:25px;}
 
  
        #abstract p {
 
        padding-left: 10px;
 
        padding-right: 10px;
 
  
      #footer {
 
      height: 500px;}
 
  
 
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 08:14, 12 July 2015