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

 
(96 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<link href="https://fonts.googleapis.com/css?family=Oswald:300" rel="stylesheet">
 
 
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
−
<link href="https://fonts.googleapis.com/css?family=Poppins: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 */
−
#globalWrapper {
 
−
    margin: 0 auto;
 
−
    padding: 0;
 
−
top: 0;
 
−
left: 0;
 
−
bottom: 0;
 
−
    width: 100%;
 
−
    height: auto;
 
−
position: relative;
 
−
overflow: visible;
 
−
    background-color: transparent;
 
−
}
 
−
 
−
#content {
 
−
    margin: 0;
 
−
    padding: 0;
 
−
    border: none;
 
−
top: 0;
 
−
left: 0;
 
−
bottom: 0;
 
−
    width: 100%;
 
−
    height: auto;
 
−
    position: relative;
 
−
    z-index: 1;
 
−
background-color: transparent;
 
−
}
 
−
 
−
#bodyContent, #HQ_page, #mw-content-text {
 
−
    margin: 0 auto;
 
−
    padding: 0;
 
−
    border: none;
 
−
    border-color: none;
 
−
top: 0;
 
−
left: 0;
 
−
bottom: 0;
 
−
    height: auto;
 
−
    width: 100%;
 
−
position: relative;
 
−
    background-color: transparent;
 
−
}
 
−
 
−
#top_title, #sideMenu, #top_menu_under {
 
−
display: none;
 
−
}
 
−
 
−
#top_menu_14 {
 
−
position: fixed;
 
−
}
 
−
 
 
* {
 
* {
 
margin: 0;
 
margin: 0;
Line 63: Line 12:
 
vertical-align: baseline;
 
vertical-align: baseline;
 
}
 
}
−
 
+
#globalWrapper {
−
/* Setting the WIKI config to default. END */
+
margin: 0 auto;
−
 
+
padding: 0;
−
body {
+
top: 0;
−
background: #FFFFFF url('https://static.igem.org/mediawiki/2016/4/4c/T--TEC-Costa_Rica--gplaypattern_background.png') top left repeat;
+
left: 0;
 +
bottom: 0;
 +
width: 100%;
 +
height: auto;
 +
position: relative;
 +
overflow: visible;
 +
background-color: transparent;
 
}
 
}
−
 
+
#content {
−
#HQ_page h1, #HQ_page h2, #HQ_page h3 {
+
−
font-family: 'Poppins', sans-serif;
+
 
margin: 0;
 
margin: 0;
 
padding: 0;
 
padding: 0;
−
border: 0;
+
border: none;
 +
top: 0;
 +
left: 0;
 +
bottom: 0;
 +
width: 100%;
 +
height: auto;
 +
position: relative;
 +
z-index: 1;
 +
background-color: transparent;
 
}
 
}
−
 
+
#bodyContent, #HQ_page, #mw-content-text {
−
#HQ_page h1 {
+
margin: 0 auto;
−
font-size: 24px;
+
padding: 0;
 +
border: none;
 +
border-color: none;
 +
top: 0;
 +
left: 0;
 +
bottom: 0;
 +
height: auto;
 +
width: 100%;
 +
position: relative;
 +
background-color: transparent;
 
}
 
}
 +
#top_title, #sideMenu, #top_menu_under { display: none; }
 +
#top_menu_14 { position: fixed; }
 +
/* Setting the WIKI config to default. END */
  
−
#HQ_page h2 {
+
body { background: #FFFFFF url('https://static.igem.org/mediawiki/2016/4/4c/T--TEC-Costa_Rica--gplaypattern_background.png') top left repeat; }
−
font-size: 20px;
+
#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 { font-size: 26px; }
−
#HQ_page h3 {
+
#HQ_page h2 { font-size: 22px; }
−
font-size: 16px;
+
#HQ_page h3 { font-size: 18px; }
−
}
+
−
 
+
 
#HQ_page p {
 
#HQ_page p {
 
font-family: 'Lato', sans-serif;
 
font-family: 'Lato', sans-serif;
−
font-size: 14px;
+
font-size: 16px;
 
margin: 0;
 
margin: 0;
 
padding: 0;
 
padding: 0;
 
border: 0;
 
border: 0;
−
text-align: left;
 
 
}
 
}
  
Line 105: 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; }
−
@media (min-width: 768px) {
+
−
#navbar {
+
−
float: right;
+
−
}
+
−
}
+
−
@media (max-width: 768px) {
+
−
#navbar {
+
−
float: left;
+
−
}
+
−
}
+
−
 
+
 
.navbar-nav li a {
 
.navbar-nav li a {
 
line-height: 25px;
 
line-height: 25px;
−
font-family: 'Oswald', sans-serif;
+
font-family: 'Poppins', sans-serif;
 
font-weight: normal;
 
font-weight: normal;
−
font-size: 18px;
+
text-transform: uppercase;
 +
font-size: 12px;
 
}
 
}
−
 
+
.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 { border-bottom: 1px solid white; }
−
.active {
+
.navbar-toggle { margin-top: 15px; }
−
border-bottom: 2px solid white;
+
.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 { width: 90%; }
−
.navbar .container-fluid {
+
.well { background-color: #FFFFFF; }
−
width: 85%;
+
−
}
+
−
/* NAVBAR settings. START */
+
−
 
+
−
/* MAIN settings. START */
+
 
main {
 
main {
 
width: 90%;
 
width: 90%;
Line 163: Line 108:
 
margin-top: 90px;  
 
margin-top: 90px;  
 
position: relative;
 
position: relative;
−
  padding-bottom: 200px;  
+
padding-bottom: 200px;
 
}
 
}
−
 
+
.parallax {
−
/* CUSTOMIZE THE CAROUSEL
+
perspective: 1px;
−
-------------------------------------------------- */
+
overflow-x: hidden;
−
 
+
overflow-y: auto;
−
/* Carousel base class */
+
}
−
.carousel {
+
.concept {
−
  height: 500px;
+
−
}
+
−
/* Since positioning the image, we need to help out the caption */
+
−
.carousel-caption {
+
−
  z-index: 10;
+
−
}
+
−
/* Declare heights because of positioning of img element */
+
−
.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;
+
−
}
+
−
 
+
−
/* MAIN settings. START */
+
−
 
+
−
/* 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%
 
}
 
}
−
 
+
.concept p {
−
footer .col-md-4 {
+
text-align: center !important;
−
padding: 0 25px;
+
−
height: auto;
+
−
border-color: transparent;
+
 
}
 
}
−
 
+
.jumbotron span { font-size: 40px; }
−
.footer-brand img {
+
.slideanim { visibility: hidden; }
−
display: inline;
+
.slide {
 +
    animation-name: slide;
 +
    -webkit-animation-name: slide;
 +
    animation-duration: 1s;
 +
    -webkit-animation-duration: 1s;
 +
    visibility: visible;
 
}
 
}
−
 
+
@keyframes slide {
−
.footer-brand #igem-logo {
+
  0% {
−
height: 50px;  
+
    opacity: 0;
−
width: 50px;
+
    transform: translateY(70%);
 +
  }
 +
  100% {
 +
    opacity: 1;
 +
    transform: translateY(0%);
 +
  }
 +
}
 +
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {}
 +
@media screen and (max-width: 1280px) {
 
}
 
}
−
 
+
@media screen and (max-width: 980px) {
−
.footer-brand #tec-costarica-logo {
+
#navbar { float: left; }
−
height: 40px;  
+
.well {
−
width: 125px;
+
padding: 0;
 +
}
 
}
 
}
−
 
+
@media screen and (max-width: 768px) {
−
.footer-brand p {  
+
#navbar {
−
font-size: 12px;  
+
float: left;  
−
color: rgba(255, 255, 255, 0.70);
+
width: 100%;
−
text-align: left;
+
}
−
font-family: 'Lato', sans-serif;
+
.navbar-nav li a { text-align: center; }
 
}
 
}
−
 
+
@media screen and (max-width: 480px) {
−
footer .footer-social .social-media {
+
#navbar {  
−
list-style: none;
+
float: left;
−
margin: 0;
+
width: 100%;
−
}
+
−
 
+
−
footer .footer-social .social-media li {
+
−
display: inline;
+
−
padding: 0;
+
−
margin: 0;
+
−
margin-left: 15px;
+
−
}
+
−
 
+
−
 
+
−
footer .footer-social .social-media li img {
+
−
height: 50px;
+
−
width: 50px;
+
−
}
+
−
 
+
−
footer h4 {
+
−
font-family: 'Oswald', sans-serif;
+
−
font-size: 12px;
+
−
font-style: bold;
+
−
text-transform: uppercase;
+
−
letter-spacing: 1px;
+
−
margin-bottom: 10px;
+
−
}
+
−
 
+
−
/* 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