Team:TAS Taipei/css/homepage.less
From 2014hs.igem.org
Xiaoyangkao2 (Talk | contribs) |
Xiaoyangkao2 (Talk | contribs) m |
||
Line 260: | Line 260: | ||
padding:10px 0; | padding:10px 0; | ||
@text_color: rgb(221, 221, 221); | @text_color: rgb(221, 221, 221); | ||
- | background: url(static/ | + | background: url(https://static.igem.org/mediawiki/2014hs/1/10/Cardboard_flat.jpg); |
.overview_header { | .overview_header { | ||
text-align:center; | text-align:center; |
Revision as of 02:14, 21 June 2014
@font-face {
font-family: "Railway"; src: url("https://github.com/GregFleming/Railway-Sans/raw/master/fonts/WebFonts/railway-webfont.woff") format('woff');
}
button:focus {outline:0 !important;} a:focus {outline:0 !important;}
img { max-width:100%; }
a { text-decoration:none; color:inherit; }
a:hover { color:inherit; }
.full { padding:0; }
.slidesjs-pagination {
margin-top: -25px;
margin-right: 10px;
z-index: 10;
position: relative;
}
- slides .heroImageContainer {
background-size: cover; padding-top: 54%; background-position: 50% 50%; background-repeat: no-repeat; h3 { opacity:0.85; max-width:400px; position: absolute; padding: 10px 20px; font-weight: normal; color: white; font-size: 35px; font-family: Railway; span { font-size:21px; display:block; } } h3.topleft { top: 0; left: 0; margin-left:20px; } h3.topright { top:0; right:5px; margin-right:20px; } h3.bottomleft { bottom: 0; left: 0; margin-bottom: 35px; margin-left:20px; } h3.bottomright { bottom: 0; right: 5px; margin-bottom: 35px; margin-right:20px; } h3.red { background-color: rgb(209, 0, 0); } h3.purple { background-color: #8e44ad; } h3.blue { background-color: #2c3e50; } h3.belize { background-color: #2980b9; } h3.green { background-color: #27ae60; } h3.orange { background-color: #f39c12; } h3.hide {display:none;} .slidesjs-control, .slidesjs-container { width:100% !important; } }
nav {
ul {
margin:0;
padding:0;
}
.dropdown-menu {
border:0px;
margin-top:0px;
padding:10px;
img {
width:90px;
opacity:0.85;
float:left;
margin-right:5px;
}
h4 {
color:white;
padding:5px;
margin:0;
font-family:Roboto;
font-size:16px;
} .subcategories_container { display:inline-block; width:100%; cursor:pointer; >div { width:100%; display:inline-block; text-align:center; border: 1px solid #494949; border-bottom:none; } >div:last-child { border-bottom:1px solid #494949; } h5 { font-family:Railway; text-transform:uppercase; font-size:16px; color:white; text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.6); } } } li.dropdown { display:inline-block; margin-right: -4px; >a { text-decoration:none; display:block; } a>h4 { color:white; font-weight:normal; font-size:16px; text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.6); padding:0; margin:0; } a>h4 { padding:12px 53px; } }
@human_practice: rgba(243, 156, 18, 1); @project: rgba(39, 174, 96,1); @experiments: rgba(41, 128, 185,1); @safety: rgba(192, 57, 43,1); @team: rgba(142, 68, 173,1); @notebook: rgba(52, 73, 94,1);
li.dropdown:nth-child(1) { background-color:@experiments; >.dropdown-menu { background-image:url(); background-size:400px; width:400px; .subcategories_container>div { background-color:fade(@experiments, 60%); } } }
li.dropdown:nth-child(2) { background-color:@project; >.dropdown-menu { background-image:url(); background-size:400px; width:400px; .subcategories_container>div { background-color:fade(@project, 60%); } } }
li.dropdown:nth-child(3) { background-color: @human_practice; >.dropdown-menu { background-image:url(); background-size:400px; width:400px; .subcategories_container>div { background-color:fade(@human_practice, 60%); } } }
li.dropdown:nth-child(4) { background-color:@safety; >.dropdown-menu { background-image:url(); background-size:400px; width:400px; .subcategories_container>div { background-color:fade(@safety, 60%); } } } li.dropdown:nth-child(5) { background-color:@team; >.dropdown-menu { background-image:url(); background-size:300px; width:300px; .subcategories_container>div { background-color:fade(@team, 60%); } } } li.dropdown:nth-child(6) { background-color:@notebook; >.dropdown-menu { background-image:url(); background-size:300px; width:300px; margin-left:-120px; .subcategories_container>div { background-color:fade(@notebook, 60%); } } } }
footer {
height:70px;
background-color:#2c3e50;
.cornered {
float: left;
width: 300px;
height: 0px;
border-top: 70px solid #bdc3c7;
border-right: 45px solid transparent;
}
.footer_right {
color:white;
padding:25px;
float: right;
height: 100%;
span {
opacity:0.5;
}
}
}
- bodycontainer {
padding:10px 0; @text_color: rgb(221, 221, 221); background: url(); .overview_header { text-align:center; } h1, h2, h3, h4, h5 { font-family: Railway; text-transform: uppercase; margin: 10px 0px; } .buttonrow { margin-bottom:20px; } .igem_button { position:relative; overflow: hidden; img { transition: 0.4s ease; -webkit-filter: grayscale(0%); } .button_description { transition: 0.5s ease; background: rgba(44, 62, 80, 0.75); position: absolute; top: 100%; left: 0; width: 100%; height:100%; } h2 { margin: 0 auto; margin-top:-27px; color: @text_color; font-size: 16px; text-align: center; width: 100%; padding: 5px 0px; background: rgba(0, 0, 0, 0.41); font-family: Railway; text-transform: uppercase; border-bottom:1px solid rgba(255, 255, 255, 0.3); } p { color:@text_color; padding:5px; } } .igem_button:hover { >.button_description { top:27px; } >img { -webkit-filter: grayscale(100%); } }
.red h2 { background: rgb(209, 0, 0); } .purple h2 { background: #8e44ad; } .blue h2 { background: #2c3e50; } .belize h2 { background: #2980b9; } .green h2 { background: #27ae60; } .orange h2 { background: #f39c12; } }
- category_navbar {
color: black; padding-left:0; padding: 5px; .active { background: rgba(255, 156, 0, 0.17); border: 1px solid rgba(0, 0, 0, 0.17); } .nav>li>a { text-transform:uppercase; font-size: 20px; font-family: Railway; } .nav>ul>li, .nav>ul>ul>li { a { font-size:14px; } list-style-type: none; display: block; color: inherit; border:0; margin-left: 10px; padding-top:4px; padding-bottom:4px; } .nav>ul>ul>li { margin-left: 35px; } .nav>ul>li:hover, .nav>ul>ul>li:hover { background: rgba(255, 255, 255, 0.5); } }
- member_spotlight {
h5 { padding: 5px 7px; color: white; } .intro_large h5 { font-size:20px; padding: 15px 15px; margin-bottom: 30px; } #spotlight_question_1 { h5 { background: rgb(192, 57, 43); width: 200px; } } #spotlight_question_2 { h5 { background: rgb(142, 68, 173); width: 192px; margin-left: auto; margin-right: 0; } } #spotlight_question_3 { h5 { background: rgb(41, 128, 185); width: 135px; } } #spotlight_question_intro { h5 { background: rgb(230, 126, 34); width: 176px; margin-left: auto; margin-right: 0;
} } }
- lab_notes {
text-align:center; img { margin: 0 auto; display: block; } :hover img { -webkit-transform:scale(1.1); } }
.block_header { display: inline-block; color: white; padding: 7px 11px; padding-bottom: 5px; }
.affix {
top:30px;
}
.container { min-width:1140px; }
p, ol>li, td, th, caption, .ulstyled>li, .calendar>li { font-family: Roboto; font-size: 15px; a { text-decoration:underline; color:#3b5998; } }
.calendar {
padding-left:10px;
>li {font-size:13px;}
}
figcaption { color: white; padding: 4px 5px; display:inline-block; }
figure { margin-bottom:10px; }
.red { background: #c0392b; }
.purple { background: #8e44ad; }
.blue { background: #2c3e50; }
.belize { background: #2980b9; }
.green { background: #27ae60; }
.orange { background: #f39c12; }
.darkblue { background: #34495e; }
.table-bordered, .table-bordered>thead>tr>th, .table-bordered>tbody>tr>th, .table-bordered>tfoot>tr>th, .table-bordered>thead>tr>td, .table-bordered>tbody>tr>td, .table-bordered>tfoot>tr>td {
border: 1px solid black;
}
.col-lg-offset-1half { margin-left: 11.111111111111%; }
.dropdown:hover { >.dropdown-menu { display:block; } }
.clearfix:after {
content: " "; display: block; height: 0; clear: both;
}