Team:CityU HK/Template/CSS

From 2014.igem.org

(Difference between revisions)
 
(343 intermediate revisions not shown)
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=Indie+Flower' 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">
-
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {display: none;} /*-- hides default wiki settings --*/
+
/* Removing wiki-like stuff */
-
</style>
+
/****************************/
 +
#contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear {display: none;}  
 +
/****************************/
-
* html{
+
#top-section {     /*-- styling for default menu bar (edit, page, history, etc.) --*/
-
behavior:url("csshover3.htc");
+
background-color: #383838;
 +
border: 0 none;
 +
        height: 0px;
 +
        color: transparent;
 +
z-index: 100;
 +
top: 0;
 +
position: fixed;
 +
width: 975px;
 +
left: 50%;
 +
margin-left: -487px;
}
}
-
body {
+
#top-section:hover {  
-
      background: url("https://static.igem.org/mediawiki/2014/a/a5/CityU_HK_Background.jpg");
+
background-color: #383838;
-
background-size:contain;
+
border: 0 none;
-
background-repeat: no-repeat;
+
        height: 14px;
-
background-position:left;
+
z-index: 100;
-
background-attachment: fixed;
+
top: 0;
-
        background-size: cover
+
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;
 +
}
-
#menu {
+
#top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/
-
width:1168px;
+
background-color: #383838;
-
height:45px;
+
height: 14px;
-
margin-left:auto;
+
display: block;
-
margin-right:auto;
+
z-index: 10;
-
        z-index: 1;
+
position: fixed;
 +
width: 100%;
 +
top: 0;
}
}
-
#menu ul {
+
 
-
list-style-type:none;
+
#menubar a:link, #menubar a:active, #menubar a:visited, #menubar a:hover, #menubar:hover { /*-- styling for default menu bar links (edit, page, history, etc.) --*/
-
padding:0;
+
color: #727272;  
-
overflow:auto;
+
text-decoration: none;  
-
        z-index: 1;
+
background-color: transparent;
}
}
-
* html #menu ul {
+
 
-
height:45px;
+
 
-
        z-index: 1;
+
#globalWrapper, #content { /*-- changes default wiki settings --*/
 +
width: 100%;
 +
height: 100%;
 +
border: 0px;
 +
background-color: transparent;
 +
margin: 0px;
 +
padding: 0px;
}
}
-
#menu ul li {
+
 
-
float:left;
+
html, body, .wrapper { /*-- changes default wiki settings --*/
-
background:#0CF;
+
width: 100%;  
-
margin-left:20px;
+
height: 100%;  
-
        margin-top:-3px;
+
background-color: transparent;
-
        z-index: 1;
+
}
}
-
* html #menu ul li {
+
 
-
display:inline;
+
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 {
 +
border-bottom: solid 3px #e0e0e0;
 +
margin:0;
 +
                height: 8%;
 +
}
 +
 +
.navbar-brand {
 +
font-family: 'Indie Flower', cursive;
 +
                font-weight: bold;
 +
font-size: 1.8em;
 +
padding-top: 40px;
 +
padding-left: 2px;
 +
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;
}
}
-
#menu ul li a {
+
    .nav.navbar-nav.navbar-right a:link {    /*overwrite igem default style*/
-
display:block;
+
        color:#357385;
-
float:left;
+
    }
-
width: 158px;
+
 
-
text-align: center;
+
    .nav.navbar-nav.navbar-right a:hover {  
-
        z-index: 1;
+
        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;
}
}
-
#menu ul li ul {
+
nav li a:hover {
-
position:absolute;
+
color: #3cc;  
-
width:158px;
+
         background-color: transparent;
-
overflow:visible;
+
-
clear:left;
+
-
         z-index: 1;
+
}
}
-
*:first-child+html #menu ul li ul {
+
.dropdown li a: hover {
-
margin-top:-10px;
+
        background-color: transparent;
-
        z-index: 1;
+
 
}
}
-
* html #menu ul li ul {
+
.dropdown-menu li a:hover {
-
margin-top:-10px;
+
border: none;
 +
color: #3cc;
 +
/*font-weight:bold;*/
 +
        background: none;
}
}
-
#menu ul li ul li {
+
 
-
float:none;
+
 
-
text-align: center;
+
 
 +
#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;*/
}
}
-
#menu ul li ul li a {
+
 
-
float:none;
+
#footer h3 {
-
width: 100%;
+
color: #dde0e4;
 +
        font-family: 'Raleway', sans-serif;
 +
        font-size: 18px;
 +
        font-weight: bold;
 +
        padding-bottom: 20px;
}
}
-
#menu ul li ul li ul {
+
 
-
margin-top: 0px;
+
#footer p {
-
margin-right: 0;
+
color: #777777;
-
margin-bottom: 0;
+
text-align: center;
-
margin-left: 100px;
+
        font-size: 14px;
-
width: 100%;
+
}
}
-
*:first-child+html #menu ul li ul li ul {
+
#footer #email {
-
margin-top:-30px;
+
      font-size: 18px;
}
}
-
#menu ul li ul {
+
#footer a {
-
visibility:hidden;
+
color: #777777;
 +
text-decoration: none;
}
}
-
#menu ul li:hover ul {
+
 
-
visibility:visible;
+
#footer a:hover {
-
width:178px;
+
color: #3cc;
-
margin-left:-20px;
+
}
}
-
#menu ul li:hover ul li ul {
+
 
-
visibility:hidden;
+
#footer img {
 +
margin-left: 40px;
 +
margin-top: 30px;
 +
margin-bottom: 10px;
}
}
-
#menu {
+
#copyright {
-
font-size:12px;
+
        width:100%;
-
font-family:Arial, Helvetica, sans-serif;
+
        padding-top:10px;
-
         z-index: 1;
+
        padding-bottom: 10px;
 +
        background: rgba(0,0,0,0.8);
 +
        color: #777777;
 +
        font-family: 'Raleway', sans-serif;
 +
         font-size: 14px;
 +
        text-align: center;
}
}
-
#menu ul li a {
+
@media screen and (max-width: 480px) {
-
color:#FFF;
+
        .navbar-default {
-
text-decoration:none;
+
        height: auto;}
-
line-height: 30px;
+
 
-
         z-index: 1;
+
        /*.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;}
-
#menu ul li ul {
+
        #footer img {
-
background:#efefef;
+
        width: 30px;
 +
        height: 30px;}
}
}
 +
@media screen and （max-width： 800px）｛
 +
        #navbar-brand ｛
 +
        Font-size：25px；｝
 +
        #abstract p {
 +
        padding-left: 10px;
 +
        padding-right: 10px;
-
#menu ul li:hover, #menu ul li a:hover {
+
      #footer {
-
background:#efefef;
+
      height: 500px;}
-
}
+
-
#menu ul li:hover a {
+
-
color:#FFFFFF;
+
-
}
+
 +
｝
 +
</style>
</html>
</html>

Latest revision as of 00:33, 18 October 2014

Bootstrap 101 Template

Retrieved from "http://2014.igem.org/Team:CityU_HK/Template/CSS"