Team:NTU-Taida/Templates/CSS/ntu-taida-wiki
From 2012.igem.org
Line 1: | Line 1: | ||
- | #contentSub,#search-controls,.firstHeading,#footer-box,#catlinks,#p-logo,#toctitle,#top-section{display:none}#globalWrapper{font-size:100%;padding-bottom: | + | /* Remove MediaWiki Annoyances */ |
+ | /*-----------------------------*/ | ||
+ | #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo, #toctitle, #top-section | ||
+ | { | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | #globalWrapper { | ||
+ | font-size:100%; | ||
+ | padding-bottom: 0px; | ||
+ | } | ||
+ | |||
+ | #content { | ||
+ | width:100%; | ||
+ | margin:0px; | ||
+ | padding:0px; | ||
+ | border:none; | ||
+ | } | ||
+ | body, html | ||
+ | { | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | #bodyContent | ||
+ | { | ||
+ | border: none; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | width: 100%; | ||
+ | } | ||
+ | |||
+ | h1, h2, h3, h4, h5, h6 | ||
+ | { | ||
+ | border: none; | ||
+ | height: 100%; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | width: 100%; | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5, #bodyContent h6{ | ||
+ | margin-bottom: 10px; | ||
+ | } | ||
+ | |||
+ | #bodyContent li { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | /* Self Custom CSS style */ | ||
+ | #bodyContent { | ||
+ | position: relative; /* To make the scrollspy works normally*/ | ||
+ | padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */ | ||
+ | } | ||
+ | |||
+ | /* Marketing section of Overview -------------------------------------------------- */ | ||
+ | .marketing { | ||
+ | text-align: center; | ||
+ | color: #5a5a5a; | ||
+ | } | ||
+ | .marketing h1 { | ||
+ | margin: 30px 0 10px; | ||
+ | font-size: 60px; | ||
+ | font-weight: 200; | ||
+ | line-height: 1; | ||
+ | letter-spacing: -1px; | ||
+ | } | ||
+ | .marketing h2 { | ||
+ | font-weight: 200; | ||
+ | margin-bottom: 5px; | ||
+ | } | ||
+ | .marketing p { | ||
+ | font-size: 16px; | ||
+ | line-height: 1.5; | ||
+ | } | ||
+ | .marketing > .row-fluid p{ | ||
+ | padding-bottom: 60px; | ||
+ | } | ||
+ | .marketing .marketing-byline { | ||
+ | margin-bottom: 40px; | ||
+ | font-size: 20px; | ||
+ | font-weight: 300; | ||
+ | line-height: 25px; | ||
+ | color: #999; | ||
+ | } | ||
+ | .marketing img { | ||
+ | display: block; | ||
+ | margin: 0 auto 30px; | ||
+ | } | ||
+ | |||
+ | /* Jumbotron -------------------------------------------------- */ | ||
+ | .jumbotron{ | ||
+ | height: 150px; | ||
+ | width: 100%; | ||
+ | background: url(https://static.igem.org/mediawiki/2012/0/0c/NTU-Taida-header-2012.jpg) no-repeat center center; | ||
+ | opacity: .4; | ||
+ | /*background-color: pink;*/ | ||
+ | background-size: 100%; | ||
+ | /*margin-bottom: 50px;*/ | ||
+ | } | ||
+ | |||
+ | /* for navigaion */ | ||
+ | section { | ||
+ | padding-top: 60px; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | padding-top: 60px; | ||
+ | padding-bottom: 40px; | ||
+ | } | ||
+ | |||
+ | |||
+ | /* Sidebar -------------------------------------------------- */ | ||
+ | .span3 { | ||
+ | min-height: 100px; | ||
+ | } | ||
+ | .row-logo{ | ||
+ | text-align: center; | ||
+ | /*margin: 0 auto;*/ | ||
+ | padding-bottom: 20px; | ||
+ | } | ||
+ | .my-sidebar-nav { | ||
+ | width: 228px; | ||
+ | margin: 30px 0 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | .my-sidebar-nav.affix { | ||
+ | top: 60px; | ||
+ | } | ||
+ | .my-sidebar-nav.affix-top { | ||
+ | position: absolute; | ||
+ | top: 60px; | ||
+ | } | ||
+ | .my-sidebar-nav.affix-bottom { | ||
+ | position: absolute; | ||
+ | top: auto; | ||
+ | bottom: 0px; | ||
+ | } | ||
+ | |||
+ | ul.sub-navlist{ | ||
+ | -webkit-border-radius: 6px; | ||
+ | -moz-border-radius: 6px; | ||
+ | border-radius: 6px; | ||
+ | -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065); | ||
+ | -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065); | ||
+ | box-shadow: 0 1px 4px rgba(0,0,0,.065); | ||
+ | |||
+ | } | ||
+ | .nav-header { | ||
+ | *width: 190px; | ||
+ | margin: 0 0 -1px; | ||
+ | padding: 8px 14px; | ||
+ | border: 1px solid #e5e5e5; | ||
+ | } | ||
+ | .dropdown-menu > .nav-header { | ||
+ | border: none; | ||
+ | } | ||
+ | .sub-navlist > li > a { | ||
+ | display: block; | ||
+ | *width: 190px; | ||
+ | margin: 0 0 -1px; | ||
+ | padding: 8px 14px; | ||
+ | border: 1px solid #e5e5e5; | ||
+ | } | ||
+ | .sub-navlist > ul { | ||
+ | margin-bottom: 0 px; | ||
+ | } | ||
+ | .sub-navlist > li:first-child > a, | ||
+ | .sub-navlist > .nav-header:first-child { | ||
+ | -webkit-border-radius: 6px 6px 0 0; | ||
+ | -moz-border-radius: 6px 6px 0 0; | ||
+ | border-radius: 6px 6px 0 0; | ||
+ | } | ||
+ | .sub-navlist > li:last-child > a { | ||
+ | -webkit-border-radius: 0 0 6px 6px; | ||
+ | -moz-border-radius: 0 0 6px 6px; | ||
+ | border-radius: 0 0 6px 6px; | ||
+ | } | ||
+ | .sub-navlist > .active > a { | ||
+ | position: relative; | ||
+ | z-index: 2; | ||
+ | padding: 9px 15px; | ||
+ | border: 0; | ||
+ | text-shadow: 0 1px 0 rgba(0,0,0,.15); | ||
+ | -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); | ||
+ | -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); | ||
+ | box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); | ||
+ | } | ||
+ | |||
+ | .sub-navlist > .active > a, | ||
+ | .sub-navlist > .active > a:hover{ | ||
+ | color: white; | ||
+ | text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); | ||
+ | background-color: #08C; | ||
+ | |||
+ | } | ||
+ | @media (max-width: 980px) { | ||
+ | /* Sidenav */ | ||
+ | .my-sidebar{ | ||
+ | width: 70%; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | .my-sidebar-nav { | ||
+ | width: auto; | ||
+ | margin-bottom: 20px; | ||
+ | } | ||
+ | .my-sidebar-nav.affix, .my-sidebar-nav.affix-top{ | ||
+ | position: static; | ||
+ | width: auto; | ||
+ | top: 0; | ||
+ | } | ||
+ | .my-sidebar-nav.affix-bottom { | ||
+ | position: absolute; | ||
+ | top: auto; | ||
+ | bottom: 0px; | ||
+ | } | ||
+ | .row-logo { | ||
+ | width: 200px; | ||
+ | margin:0 auto; | ||
+ | } | ||
+ | } |
Revision as of 11:36, 26 September 2012
/* Remove MediaWiki Annoyances */ /*-----------------------------*/
- contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo, #toctitle, #top-section
{
display:none;
}
- globalWrapper {
font-size:100%; padding-bottom: 0px;
}
- content {
width:100%; margin:0px; padding:0px; border:none;
} body, html {
margin: 0;
}
- bodyContent
{
border: none; margin: 0; padding: 0; width: 100%;
}
h1, h2, h3, h4, h5, h6 {
border: none; height: 100%; margin: 0; padding: 0; width: 100%; margin-bottom: 10px;
}
- bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5, #bodyContent h6{
margin-bottom: 10px;
}
- bodyContent li {
margin-bottom: 0;
} /* Self Custom CSS style */
- bodyContent {
position: relative; /* To make the scrollspy works normally*/ padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */
}
/* Marketing section of Overview -------------------------------------------------- */ .marketing {
text-align: center; color: #5a5a5a;
} .marketing h1 {
margin: 30px 0 10px; font-size: 60px; font-weight: 200; line-height: 1; letter-spacing: -1px;
} .marketing h2 {
font-weight: 200; margin-bottom: 5px;
} .marketing p {
font-size: 16px; line-height: 1.5;
} .marketing > .row-fluid p{
padding-bottom: 60px;
} .marketing .marketing-byline {
margin-bottom: 40px; font-size: 20px; font-weight: 300; line-height: 25px; color: #999;
} .marketing img {
display: block; margin: 0 auto 30px;
}
/* Jumbotron -------------------------------------------------- */ .jumbotron{
height: 150px; width: 100%; background: url() no-repeat center center; opacity: .4; /*background-color: pink;*/ background-size: 100%; /*margin-bottom: 50px;*/
}
/* for navigaion */ section {
padding-top: 60px;
}
body {
padding-top: 60px; padding-bottom: 40px;
}
/* Sidebar -------------------------------------------------- */
.span3 {
min-height: 100px;
} .row-logo{
text-align: center; /*margin: 0 auto;*/ padding-bottom: 20px;
} .my-sidebar-nav {
width: 228px; margin: 30px 0 0; padding: 0;
} .my-sidebar-nav.affix {
top: 60px;
} .my-sidebar-nav.affix-top {
position: absolute; top: 60px;
} .my-sidebar-nav.affix-bottom {
position: absolute; top: auto; bottom: 0px;
}
ul.sub-navlist{
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065); box-shadow: 0 1px 4px rgba(0,0,0,.065);
} .nav-header {
*width: 190px; margin: 0 0 -1px; padding: 8px 14px; border: 1px solid #e5e5e5;
} .dropdown-menu > .nav-header {
border: none;
} .sub-navlist > li > a {
display: block; *width: 190px; margin: 0 0 -1px; padding: 8px 14px; border: 1px solid #e5e5e5;
} .sub-navlist > ul {
margin-bottom: 0 px;
} .sub-navlist > li:first-child > a, .sub-navlist > .nav-header:first-child {
-webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
} .sub-navlist > li:last-child > a {
-webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
} .sub-navlist > .active > a {
position: relative; z-index: 2; padding: 9px 15px; border: 0; text-shadow: 0 1px 0 rgba(0,0,0,.15); -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1);
}
.sub-navlist > .active > a, .sub-navlist > .active > a:hover{
color: white; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); background-color: #08C;
} @media (max-width: 980px) {
/* Sidenav */ .my-sidebar{ width: 70%; margin: 0 auto; } .my-sidebar-nav { width: auto; margin-bottom: 20px; } .my-sidebar-nav.affix, .my-sidebar-nav.affix-top{ position: static; width: auto; top: 0; } .my-sidebar-nav.affix-bottom { position: absolute; top: auto; bottom: 0px; } .row-logo { width: 200px; margin:0 auto; }
}