Difference between revisions of "Team:TEC-Costa Rica/Template:Stylesheet"

 
(42 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
<link href="https://fonts.googleapis.com/css?family=Poppins:400,600" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Poppins:400,600" rel="stylesheet">
 
<style type="text/css">
 
<style type="text/css">
−
 
 
/* Setting the WIKI config to default. START */
 
/* Setting the WIKI config to default. START */
 
* {
 
* {
Line 55: Line 54:
 
/* Setting the WIKI config to default. END */
 
/* Setting the WIKI config to default. END */
  
−
body {
+
body { background: #FFFFFF url('https://static.igem.org/mediawiki/2016/4/4c/T--TEC-Costa_Rica--gplaypattern_background.png') top left repeat; }
−
background: #FFFFFF url('https://static.igem.org/mediawiki/2016/4/4c/T--TEC-Costa_Rica--gplaypattern_background.png') top left repeat;
+
#HQ_page h1, #HQ_page h2, #HQ_page h3 {
 +
font-family: 'Poppins', sans-serif;
 +
font-weight: bold;
 +
margin-top: 10px;
 +
margin-bottom: 0;
 
}
 
}
−
#HQ_page h1, #HQ_page h2, #HQ_page h3 { font-family: 'Poppins', sans-serif; }
 
 
#HQ_page h1 { font-size: 26px; }
 
#HQ_page h1 { font-size: 26px; }
 
#HQ_page h2 { font-size: 22px; }
 
#HQ_page h2 { font-size: 22px; }
Line 68: Line 70:
 
padding: 0;
 
padding: 0;
 
border: 0;
 
border: 0;
−
text-align: justify;
 
 
}
 
}
  
Line 78: Line 79:
 
background: #FFFFFF url('https://static.igem.org/mediawiki/2016/7/7e/T--TEC-Costa_Rica--lodyas_background.png') top left repeat;
 
background: #FFFFFF url('https://static.igem.org/mediawiki/2016/7/7e/T--TEC-Costa_Rica--lodyas_background.png') top left repeat;
 
}
 
}
 +
#navbar { float: right; }
 
.navbar-nav li a {
 
.navbar-nav li a {
 
line-height: 25px;
 
line-height: 25px;
Line 87: Line 89:
 
.dropdown .dropdown-menu { margin: 0; }
 
.dropdown .dropdown-menu { margin: 0; }
 
.dropdown:hover {
 
.dropdown:hover {
−
border-bottom: 2px solid white;
+
border-bottom: 1px solid white;
 
background-color: black;
 
background-color: black;
 
}
 
}
−
.active {
+
.active { border-bottom: 1px solid white; }
−
border-bottom: 2px solid white;
+
.navbar-toggle { margin-top: 15px; }
−
}
+
.navbar-brand { padding-top: 7.5px; }
−
.navbar-toggle {
+
−
margin-top: 15px;
+
−
}
+
−
.navbar-brand {
+
−
padding-top: 7.5px;
+
−
}
+
 
.navbar-brand img {
 
.navbar-brand img {
 
height: 50px;  
 
height: 50px;  
 
width: 125px;
 
width: 125px;
 
}
 
}
−
.navbar .container-fluid {
+
.navbar .container-fluid { width: 90%; }
−
width: 85%;
+
.well { background-color: #FFFFFF; }
−
}
+
−
/* NAVBAR settings. START */
+
−
 
+
−
/* MAIN settings. START */
+
−
.well { background-color: rgba(245, 245, 245, 0.8); }
+
−
 
+
 
main {
 
main {
−
width: 85%;
+
width: 90%;
 
height: 100%;
 
height: 100%;
 
display: block;
 
display: block;
Line 119: Line 109:
 
position: relative;
 
position: relative;
 
padding-bottom: 200px;
 
padding-bottom: 200px;
−
padding-left: 25;
 
−
padding-right: 25;
 
 
}
 
}
−
main li {
+
.parallax {
−
font-family: 'Lato', sans-serif;
+
perspective: 1px;
−
font-size: 16px;
+
overflow-x: hidden;
−
}
+
overflow-y: auto;
−
main h1, main h2, main h3 { margin: 0; }
+
−
 
+
−
.home { width: 100% }
+
−
 
+
−
.modelling_simulations img {
+
−
height: 400px;
+
−
width: 400px;
+
−
}
+
−
 
+
−
.team .jumbotron img {
+
−
height: 50%;
+
−
width: 50%
+
−
}
+
−
.team { width: 100%; }
+
−
.team .team-header img {
+
−
height: 500px;
+
−
width: 100%;
+
−
display: block;
+
−
margin: 0 auto 0 auto;
+
−
}
+
−
.team .team-header h1 {
+
−
text-align: center;
+
−
margin: 10px 0 10px 0;
+
−
}
+
−
.team .team-details {
+
−
margin-top: 10px;
+
−
}
+
−
.team .marketing {
+
−
margin-top: 20px;
+
−
}
+
−
 
+
−
/* CUSTOMIZE THE CAROUSEL
+
−
-------------------------------------------------- */
+
−
 
+
−
.carousel { height: 500px; }
+
−
.carousel-caption { z-index: 10; }
+
−
.carousel .item {
+
−
height: 500px;
+
−
background-color: #777;
+
−
}
+
−
.carousel-inner > .item > img {
+
−
position: absolute;
+
−
top: 0;
+
−
left: 0;
+
−
min-width: 100%;
+
−
height: 500px;
+
−
}
+
−
.carousel-indicators, .mw-content-ltr ol {
+
−
position: absolute;
+
−
bottom: 10px;
+
−
left: 50%;
+
−
z-index: 15;
+
−
width: 60%;
+
−
padding-left: 0;
+
−
margin-left: -30%;
+
−
text-align: center;
+
−
list-style: none;
+
−
}
+
−
 
+
−
.carousel-caption {
+
−
background-color: rgba(0, 0, 0, 0.5);
+
−
padding: 20px;
+
−
width: 100%;
+
−
right: 0;
+
−
left: 0;
+
−
}
+
−
 
+
−
.carousel-caption h1 {
+
−
margin-bottom: 5px;
+
 
}
 
}
−
 
+
.concept {
−
 
+
−
/* MARKETING CONTENT
+
−
-------------------------------------------------- */
+
−
 
+
−
/* Center align the text within the three columns below the carousel */
+
−
.marketing .col-lg-4 {
+
−
margin-bottom: 20px;
+
−
text-align: center;
+
−
}
+
−
.marketing h2 { font-weight: normal; }
+
−
.marketing .col-lg-4 p {
+
−
margin-right: 10px;
+
−
margin-left: 10px;
+
−
}
+
−
 
+
−
/* FOOTER settings. START */
+
−
footer {
+
−
background-color: #3c3d41;
+
−
padding: 20px;
+
−
color: rgba(255, 255, 255, 1.00);
+
−
background: #FFFFFF url('https://static.igem.org/mediawiki/2016/7/7e/T--TEC-Costa_Rica--lodyas_background.png') top left repeat;
+
−
width: 100%;
+
−
height: auto;
+
−
bottom: 0;
+
−
}
+
−
footer .row {
+
−
width: 85%;
+
−
height: auto;
+
 
display: block;
 
display: block;
−
margin: 0 auto 0 auto;
+
text-align: center !important;
 +
margin: 10px auto 0 auto;
 +
width: 80%
 
}
 
}
−
footer .col-md-4 {
+
.concept p {
−
padding: 0 25px;
+
text-align: center !important;
−
height: auto;
+
−
border-color: transparent;
+
 
}
 
}
−
.footer-brand img { display: inline; }
+
.jumbotron span { font-size: 40px; }
−
.footer-brand #igem-logo {
+
.slideanim { visibility: hidden; }
−
height: 50px;  
+
.slide {
−
width: 50px;
+
    animation-name: slide;
 +
    -webkit-animation-name: slide;
 +
    animation-duration: 1s;
 +
    -webkit-animation-duration: 1s;
 +
    visibility: visible;
 
}
 
}
−
.footer-brand #tec-costarica-logo {
+
@keyframes slide {
−
height: 40px;
+
  0% {
−
width: 125px;
+
    opacity: 0;
−
}
+
    transform: translateY(70%);
−
.footer-brand p {  
+
  }  
−
font-size: 12px;  
+
  100% {
−
color: rgba(255, 255, 255, 0.70);
+
    opacity: 1;
−
text-align: left;
+
    transform: translateY(0%);
−
font-weight: normal;
+
  }
−
font-family: 'Poppins', sans-serif;
+
−
}
+
−
.footer-sponsors .sponsors {
+
−
list-style: none;
+
−
margin-left: 0;  
+
−
}
+
−
.footer-sponsors .sponsors li { margin-bottom: 5px; }
+
−
.footer-sponsors #logo-lisanatura {
+
−
height: 40px;
+
−
width: 125px;
+
 
}
 
}
−
.footer-sponsors #logo-ipci {
+
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {}
−
height: 90px;
+
@media screen and (max-width: 1280px) {
−
width: 140px;
+
 
}
 
}
−
.footer-sponsors #logo-enhmed {
+
@media screen and (max-width: 980px) {
−
height: 80px;
+
#navbar { float: left; }
−
width: 100px;
+
.well {
−
}
+
padding: 0;
−
.footer-sponsors #logo-snapgene {
+
}
−
height: 40px;  
+
−
width: 125px;
+
−
}
+
−
footer .footer-social .social-media {
+
−
list-style: none;
+
−
margin: 0;
+
 
}
 
}
−
footer .footer-social .social-media li {
+
@media screen and (max-width: 768px) {
−
display: inline;
+
#navbar {
−
padding: 0;
+
float: left;  
−
margin: 0;
+
width: 100%;
−
margin-left: 5px;  
+
}
 +
.navbar-nav li a { text-align: center; }
 
}
 
}
−
footer .footer-social .social-media li img {
+
@media screen and (max-width: 480px) {
−
height: 40px;
+
#navbar {  
−
width: 40px;
+
float: left;
−
}
+
width: 100%;
−
footer h4 {
+
−
font-family: 'Poppins', sans-serif;
+
−
font-size: 14px;
+
−
font-weight: bold;
+
−
letter-spacing: 1px;
+
−
margin-bottom: 20px;
+
−
}
+
−
 
+
−
/* RESPONSIVE CSS
+
−
-------------------------------------------------- */
+
−
@media (min-width: 768px) {
+
−
footer .footer-sponsors, footer .footer-social {  
+
−
border-left: solid 1px rgba(255, 255, 255, 0.10);  
+
 
}
 
}
−
}
+
.navbar-nav li a { text-align: center; }
−
@media (min-width: 768px) {
+
}
−
  /* Bump up size of carousel content */
+
−
  .carousel-caption p {
+
−
    margin-bottom: 20px;
+
−
    font-size: 21px;
+
−
    line-height: 1.4;
+
−
  }
+
−
}
+
−
/* FOOTER settings. END */
+
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 20:50, 2 December 2016