Team:TAS Taipei/css/homepage.less
From 2014hs.igem.org
Xiaoyangkao2 (Talk | contribs) |
Xiaoyangkao2 (Talk | contribs) |
||
Line 99: | Line 99: | ||
opacity:0.85; | opacity:0.85; | ||
float:left; | float:left; | ||
+ | margin-right:5px; | ||
} | } | ||
h4 { | h4 { | ||
color:white; | color:white; | ||
+ | padding:5px; | ||
+ | margin:0; | ||
+ | font-family:Roboto; | ||
+ | font-size:16px; | ||
+ | |||
} | } | ||
.subcategories_container { | .subcategories_container { | ||
Line 129: | Line 135: | ||
display:inline-block; | display:inline-block; | ||
margin-right: -4px; | margin-right: -4px; | ||
- | + | >a { | |
- | + | ||
- | + | ||
- | + | ||
text-decoration:none; | text-decoration:none; | ||
+ | display:block; | ||
+ | } | ||
+ | a>h4 { | ||
+ | color:white; | ||
font-weight:normal; | font-weight:normal; | ||
font-size:16px; | font-size:16px; | ||
text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.6); | text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.6); | ||
padding:0; | padding:0; | ||
+ | margin:0; | ||
+ | } | ||
+ | a>h4 { | ||
+ | padding:12px 53px; | ||
} | } | ||
} | } | ||
@human_practice: rgba(243, 156, 18, 1); | @human_practice: rgba(243, 156, 18, 1); | ||
- | @ | + | @project: rgba(39, 174, 96,1); |
@experiments: rgba(41, 128, 185,1); | @experiments: rgba(41, 128, 185,1); | ||
@safety: rgba(192, 57, 43,1); | @safety: rgba(192, 57, 43,1); | ||
Line 149: | Line 160: | ||
li.dropdown:nth-child(1) { | li.dropdown:nth-child(1) { | ||
- | background-color: @ | + | background-color:@experiments; |
>.dropdown-menu { | >.dropdown-menu { | ||
- | background-image:url( | + | background-image:url(https://static.igem.org/mediawiki/2014hs/d/d6/Experimental.jpg); |
background-size:400px; | background-size:400px; | ||
width:400px; | width:400px; | ||
.subcategories_container>div { | .subcategories_container>div { | ||
- | background-color:fade(@ | + | background-color:fade(@experiments, 60%); |
} | } | ||
} | } | ||
} | } | ||
+ | |||
li.dropdown:nth-child(2) { | li.dropdown:nth-child(2) { | ||
- | background-color:@ | + | background-color:@project; |
>.dropdown-menu { | >.dropdown-menu { | ||
- | background-image:url( | + | background-image:url(https://static.igem.org/mediawiki/2014hs/8/89/Modeling.jpg); |
background-size:400px; | background-size:400px; | ||
width:400px; | width:400px; | ||
.subcategories_container>div { | .subcategories_container>div { | ||
- | background-color:fade(@ | + | background-color:fade(@project, 60%); |
} | } | ||
} | } | ||
} | } | ||
- | |||
li.dropdown:nth-child(3) { | li.dropdown:nth-child(3) { | ||
- | background-color:@ | + | background-color: @human_practice; |
>.dropdown-menu { | >.dropdown-menu { | ||
- | background-image:url( | + | background-image:url(https://static.igem.org/mediawiki/2014hs/f/f3/Human_practice.jpg); |
background-size:400px; | background-size:400px; | ||
width:400px; | width:400px; | ||
.subcategories_container>div { | .subcategories_container>div { | ||
- | background-color:fade(@ | + | background-color:fade(@human_practice, 60%); |
} | } | ||
} | } | ||
} | } | ||
+ | |||
li.dropdown:nth-child(4) { | li.dropdown:nth-child(4) { | ||
background-color:@safety; | background-color:@safety; | ||
>.dropdown-menu { | >.dropdown-menu { | ||
- | background-image:url( | + | background-image:url(https://static.igem.org/mediawiki/2014hs/b/b2/Safety_tas.jpg); |
background-size:400px; | background-size:400px; | ||
width:400px; | width:400px; | ||
Line 197: | Line 209: | ||
background-color:@team; | background-color:@team; | ||
>.dropdown-menu { | >.dropdown-menu { | ||
- | background-image:url( | + | background-image:url(https://static.igem.org/mediawiki/2014hs/5/53/Team_tas.jpg); |
background-size:300px; | background-size:300px; | ||
width:300px; | width:300px; | ||
Line 206: | Line 218: | ||
} | } | ||
li.dropdown:nth-child(6) { | li.dropdown:nth-child(6) { | ||
- | |||
background-color:@notebook; | background-color:@notebook; | ||
>.dropdown-menu { | >.dropdown-menu { | ||
- | background-image:url( | + | background-image:url(https://static.igem.org/mediawiki/2014hs/9/93/Notebook.jpg); |
background-size:300px; | background-size:300px; | ||
width:300px; | width:300px; | ||
Line 250: | Line 261: | ||
@text_color: rgb(221, 221, 221); | @text_color: rgb(221, 221, 221); | ||
background: url(static/cardboard_flat.jpg); | background: url(static/cardboard_flat.jpg); | ||
+ | .overview_header { | ||
+ | text-align:center; | ||
+ | } | ||
h1, h2, h3, h4, h5 { | h1, h2, h3, h4, h5 { | ||
font-family: Railway; | font-family: Railway; | ||
Line 325: | Line 339: | ||
font-family: Railway; | font-family: Railway; | ||
} | } | ||
- | .nav ul li { | + | .nav>ul>li, .nav>ul>ul>li { |
a { | a { | ||
font-size:14px; | font-size:14px; | ||
Line 337: | Line 351: | ||
padding-bottom:4px; | padding-bottom:4px; | ||
} | } | ||
- | .nav ul li:hover { | + | .nav>ul>ul>li { |
+ | margin-left: 35px; | ||
+ | } | ||
+ | .nav>ul>li:hover, .nav>ul>ul>li:hover { | ||
background: rgba(255, 255, 255, 0.5); | 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 { | .affix { | ||
- | top: | + | top:30px; |
} | } | ||
+ | .container { | ||
+ | min-width:1140px; | ||
+ | } | ||
- | p { | + | p, ol>li, td, th, caption, .ulstyled>li, .calendar>li { |
font-family: Roboto; | font-family: Roboto; | ||
font-size: 15px; | 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:hover { |
Revision as of 02:05, 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(static/cardboard_flat.jpg); .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;
}