"
Team:TAS Taipei/css/homepage.less
From 2014hs.igem.org
@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;
}
h4 {
color:white;
}
.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;
padding:10px 50px;
a {
font-family:Helvetica;
color:white;
text-decoration:none;
font-weight:normal;
font-size:16px;
text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.6);
padding:0;
}
}
@human_practice: rgba(243, 156, 18, 1); @modeling: 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: @human_practice; >.dropdown-menu { background-image:url(photos/human_practice.jpg); background-size:400px; width:400px; .subcategories_container>div { background-color:fade(@human_practice, 60%); } } } li.dropdown:nth-child(2) { background-color:@modeling; >.dropdown-menu { background-image:url(photos/modeling.jpg); background-size:400px; width:400px; .subcategories_container>div { background-color:fade(@modeling, 60%); } } }
li.dropdown:nth-child(3) {
background-color:@experiments;
>.dropdown-menu {
background-image:url(photos/experimental.jpg);
background-size:400px;
width:400px;
.subcategories_container>div {
background-color:fade(@experiments, 60%);
}
}
}
li.dropdown:nth-child(4) {
background-color:@safety;
>.dropdown-menu {
background-image:url(photos/safety.jpg);
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(photos/team.jpg);
background-size:300px;
width:300px;
.subcategories_container>div {
background-color:fade(@team, 60%);
}
}
}
li.dropdown:nth-child(6) {
padding-right:45px;
background-color:@notebook;
>.dropdown-menu {
background-image:url(photos/notebook.jpg);
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); 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 { 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 li:hover { background: rgba(255, 255, 255, 0.5); } }
.affix { top:0; }
p {
font-family: Roboto;
font-size: 15px;
}
.dropdown:hover { >.dropdown-menu { display:block; } }
.clearfix:after {
content: " "; display: block; height: 0; clear: both;
}
