Line 1: | Line 1: | ||
+ | /* Fix for random black bar at top :D*/ | ||
#content .mw-content-ltr > p { | #content .mw-content-ltr > p { | ||
margin: 0; | margin: 0; | ||
Line 60: | Line 61: | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
#content .banner { | #content .banner { | ||
Line 97: | Line 76: | ||
} | } | ||
− | #content .banner- | + | #content .banner-img { |
position: relative; | position: relative; | ||
margin-top: 30vh; | margin-top: 30vh; | ||
Line 104: | Line 83: | ||
} | } | ||
− | #content .banner- | + | #content .banner-img > img { |
height: 70vh; | height: 70vh; | ||
} | } | ||
Line 132: | Line 111: | ||
font-size: 2rem; | font-size: 2rem; | ||
font-weight: 300; | font-weight: 300; | ||
+ | } | ||
+ | |||
+ | #content .footer { | ||
+ | background: #F7F7F7; | ||
+ | margin-top: 50px; | ||
+ | padding-left: 50px; | ||
+ | padding-right: 50px; | ||
+ | padding-top: 20px; | ||
+ | } | ||
+ | |||
+ | #content .footer h4{ | ||
+ | text-align: center; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | |||
+ | #content .footer h5{ | ||
+ | text-align: center; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | |||
+ | #content footer p { | ||
+ | text-align: center; | ||
+ | margin: 0 !important; | ||
+ | padding-bottom: 16px; | ||
+ | } | ||
+ | |||
+ | #content .footer-social { | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #content .footer-social img { | ||
+ | width: 80px; | ||
+ | padding: 20px; | ||
+ | text-shadow: | ||
+ | } | ||
+ | |||
+ | #content .footer-team { | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #content .footer-team img { | ||
+ | height: 150px; | ||
+ | width: 150px; | ||
+ | } | ||
+ | |||
+ | #content .sponsor { | ||
+ | text-align: center; | ||
+ | filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ | ||
+ | filter: gray; /* IE6-9 */ | ||
+ | -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ | ||
+ | } | ||
+ | |||
+ | #content .sponsor p { | ||
+ | text-align: center; | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | #content .sponsor img { | ||
+ | margin: 20px; | ||
+ | width: 150px; | ||
+ | } | ||
+ | |||
+ | #content .sponsor:hover { | ||
+ | filter: none; | ||
+ | -webkit-filter: grayscale(0%); | ||
} | } | ||
Line 382: | Line 427: | ||
left: 100%; | left: 100%; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Line 483: | Line 523: | ||
} | } | ||
− | /* Bootstrap dropdown on hover */ | + | /* Bootstrap dropdown on hover*/ |
@media (min-width: 992px) { | @media (min-width: 992px) { | ||
− | + | #content .dropdown:hover .dropdown-menu { | |
− | + | display: block; | |
− | + | margin-top: 0; | |
− | + | animation: fadeInPop 100ms linear; | |
} | } | ||
} | } |
Revision as of 10:35, 25 July 2017
/* Fix for random black bar at top :D*/
- content .mw-content-ltr > p {
margin: 0;
}
- content .rounded-image {
border-radius: 15px;
}
- content .igem-logo {
position: absolute; top: 20px; right: 20px; width: 10vw; filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ opacity: 0.5;
}
- content .igem-logo img {
max-width: 100%;
}
- content .team {
text-align: center; width: 100%;
}
- content .smallheadshot {
text-align: center; height: 20vh; margin-top: 20px; border-radius: 100%;
}
- content .people {
overflow: hidden;
}
- content .notebook {
}
- content .notebook img {
height: 20vh; padding: 20px;
}
- content .notebook h2 {
font-size: 3rem;
}
- content .notebook li {
border: none; font-size: 1.3rem; font-weight: 300;
}
- content .notebookicon {
text-align: center;
}
- content .banner {
color: #ffffff; text-shadow: 2px 2px #9e9e9e; position: relative; overflow-x: hidden; min-height: 90vh; width: 100%; background: blue; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(#69C5D6 90%, #ffffff); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#69C5D6 90%, #ffffff); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#69C5D6 90%, #ffffff); /* For Firefox 3.6 to 15 */ background: linear-gradient(#69C5D6 90%, #ffffff); /* Standard syntax */
}
- content .banner-img {
position: relative; margin-top: 30vh; transform: translateY(-30%); text-align: center;
}
- content .banner-img > img {
height: 70vh;
}
- content .banner-sm {
width: 100%; position: relative; left: 50%; transform: translateX(-50%); overflow: hidden; min-height: 20vh;
}
- content .banner-text-sm {
text-align: center; position: relative; margin-top: 10vh; transform: translateY(-10%);
}
- content .banner-text-sm > h1 {
font-size: 5rem;
}
- content .banner-text-sm > p {
text-align: center; font-size: 2rem; font-weight: 300;
}
- content .footer {
background: #F7F7F7; margin-top: 50px; padding-left: 50px; padding-right: 50px; padding-top: 20px;
}
- content .footer h4{
text-align: center; font-weight: 300;
}
- content .footer h5{
text-align: center; font-weight: 300;
}
- content footer p {
text-align: center; margin: 0 !important; padding-bottom: 16px;
}
- content .footer-social {
width: 100%; text-align: center;
}
- content .footer-social img {
width: 80px; padding: 20px; text-shadow:
}
- content .footer-team {
text-align: center;
}
- content .footer-team img {
height: 150px; width: 150px;
}
- content .sponsor {
text-align: center; filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}
- content .sponsor p {
text-align: center; color: #fff;
}
- content .sponsor img {
margin: 20px; width: 150px;
}
- content .sponsor:hover {
filter: none; -webkit-filter: grayscale(0%);
}
- content .reactor-animation {
position: relative; overflow-x: hidden; min-height: 200px;
}
- content .reactor {
position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; transform: translate(-50%, -50%); background-color: #bbbbbb; border-radius: 5px;
}
- content .reactor div{
margin-top: 50%; transform: translateY(-50%); text-align: center; font-size: 4rem; color: #ffffff
}
- content .reactant {
position: absolute; width: 70px; height: 70px; border-radius: 70px; top: 50%; transform: translate(50%, -50%);
animation: reactant-animate 3s linear infinite;
}
- content .reactant::after {
position: relative; top: 15%; text-align: center; font-size: 2rem; color: #ffffff; transform: translate(-50%); animation: reactant-after-animate 3s linear infinite; content: "";
}
- content .reactant:nth-child(2) {
top: 20%; animation: reactant-animate -3s 5s linear infinite;
}
- content .reactant:nth-child(3) {
top: 60%; animation: reactant-animate -2s 4s linear infinite;
}
- content .reactant:nth-child(4) {
top: 80%; animation: reactant-animate -1s 6s linear infinite;
}
- content .reactant:nth-child(2)::after {
animation: reactant-after-animate -3s 5s linear infinite;
}
- content .reactant:nth-child(3)::after {
animation: reactant-after-animate -2s 4s linear infinite;
}
- content .reactant:nth-child(4)::after {
animation: reactant-after-animate -1s 6s linear infinite;
}
@keyframes reactant-animate {
0% { background-color: #0000bb; right: 100%; opacity: 0; }
10% { right: 90%; opacity: 1; }
49% { background-color: #0000bb; right: 50%; opacity: 1; }
51% { background-color: #00bb00; right: 50%; opacity: 1; }
90% { right: 10%; opacity: 1; }
100% { background-color: #00bb00; right: 0%; opacity: 0; }
}
@keyframes reactant-after-animate {
0%{ content: "NOx"; } 49%{ content: "NOx"; } 50% { content: "NH4"; } 100% { content: "NH4"; }
}
- content .x1 {
-webkit-animation: animateCloud -9s 20s linear infinite; -moz-animation: animateCloud -9s 20s linear infinite; animation: animateCloud -9s 20s linear infinite;
-webkit-transform: scale(0.3); -moz-transform: scale(0.3); transform: scale(0.3);
position: absolute; top: 5%; z-index: 2;
}
- content .x2 {
-webkit-animation: animateCloud -15s 35s linear infinite; -moz-animation: animateCloud -15s 35s linear infinite; animation: animateCloud -15s 35s linear infinite;
-webkit-transform: scale(0.65); -moz-transform: scale(0.65); transform: scale(0.65);
position: absolute; top: 20%; z-index: 2;
}
- content .x3 {
-webkit-animation: animateCloud -25s 30s linear infinite; -moz-animation: animateCloud -25s 30s linear infinite; animation: animateCloud -25s 30s linear infinite;
-webkit-transform: scale(0.5); -moz-transform: scale(0.5); transform: scale(0.5);
position: absolute; top: 35%; z-index: 2;
}
- content .x4 {
-webkit-animation: animateCloud -5s 18s linear infinite; -moz-animation: animateCloud -5s 18s linear infinite; animation: animateCloud -5s 18s linear infinite;
-webkit-transform: scale(0.4); -moz-transform: scale(0.4); transform: scale(0.4);
position: absolute; top: 45%; z-index: 2;
}
- content .x5 {
-webkit-animation: animateCloud -18s 25s linear infinite; -moz-animation: animateCloud -18s 25s linear infinite; animation: animateCloud -18s 25s linear infinite;
-webkit-transform: scale(0.55); -moz-transform: scale(0.55); transform: scale(0.55);
position: absolute; top: 60%; z-index: 2;
}
- content .cloud {
background: #fff; background: -moz-linear-gradient(top, #fff 5%, #f1f1f1 100%); background: -webkit-linear-gradient(top, #fff 5%,#f1f1f1 100%); background: -o-linear-gradient(top, #fff 5%,#f1f1f1 100%); background: -ms-linear-gradient(top, #fff 5%,#f1f1f1 100%); background: linear-gradient(top, #fff 5%,#f1f1f1 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#f1f1f1',GradientType=0 );
-webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;
-webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
height: 120px; position: relative; width: 350px; }
- content .cloud:after, .cloud:before {
background: #fff; content: ; position: absolute;
z-indeX: -1; }
- content .cloud:after {
-webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px;
height: 100px; left: 50px; top: -50px; width: 100px; }
- content .cloud:before {
-webkit-border-radius: 200px; -moz-border-radius: 200px; border-radius: 200px;
width: 180px; height: 180px; right: 50px; top: -90px; }
@keyframes animateCloud {
0% { left: -1000px; } 100% { left: 100%; }
}
- content .fadeIn {
}
- content .fadeIn.Up, .fadeIn .Up {
opacity: 0; transition: all 500ms ease-in; transform: translateY(5vh);
}
- content .fadedIn.Up, .fadedIn .Up {
opacity: 1; transform: translateY(0);
}
- content .fadeIn.Down, .fadeIn .Down {
opacity: 0; transition: all 500ms ease-in; transform: translateY(-5vh);
}
- content .fadedIn.Down, .fadedIn .Down {
opacity: 1; transform: translateY(0);
}
- content .fadeIn.Left, .fadeIn .Left {
opacity: 0; transition: all 500ms ease-in; transform: translateX(-10vw);
}
- content .fadedIn.Left, .fadedIn .Left {
opacity: 1; transform: translateX(0);
}
- content .fadeIn.Right, .fadeIn .Right {
opacity: 0; transition: all 500ms ease-in; transform: translateX(10vw);
}
- content .fadedIn.Right, .fadedIn .Right {
opacity: 1; transform: translateX(0);
}
- content .fadeIn.Pop, .fadeIn .Pop {
opacity: 0; transition: all 700ms ease-in;
}
- content .fadedIn.Pop, .fadedIn .Pop {
opacity: 1; animation: fadeInPop 700ms linear;
}
@keyframes fadeInPop {
0% { transform: scale(0); } 80% { transform: scale(1.1); } 100% { transform: scale(1); }
}
/* Featurettes
*/
- content .featurette-divider {
more */
}
/* Thin out the marketing headings */
- content .featurette-heading {
font-weight: 300; line-height: 1; letter-spacing: -.05rem;
}
- content .featurette-image {
border-radius: 100%; width: 100%; height: auto;
}
/* Remove bootstrap dropdown caret */
- content .dropdown-toggle::after {
display:none
}
/* Bootstrap dropdown on hover*/ @media (min-width: 992px) {
#content .dropdown:hover .dropdown-menu { display: block; margin-top: 0; animation: fadeInPop 100ms linear; }
}
/* RESPONSIVE CSS
*/
@media (min-width: 40em) {
/* Bump up size of carousel content */ #content .carousel-caption p { margin-bottom: 1.25rem; font-size: 1.25rem; line-height: 1.4; }
#content .featurette-heading { font-size: 50px; }
}
@media (min-width: 62em) {
#content .featurette-heading { margin-top: 7rem; }
}