Difference between revisions of "Team:TrinityCollegeDublin/stylesheet"
(9 intermediate revisions by the same user not shown) | |||
Line 244: | Line 244: | ||
0% {left: 44%; | 0% {left: 44%; | ||
top: 42%; | top: 42%; | ||
− | transform: scale( | + | transform: scale(4.5);} |
80%{left: 44%; | 80%{left: 44%; | ||
top: 42%; | top: 42%; | ||
− | transform: scale( | + | transform: scale(4);} |
100%{left: 8px; | 100%{left: 8px; | ||
Line 257: | Line 257: | ||
0% {left: 44%; | 0% {left: 44%; | ||
top: 42%; | top: 42%; | ||
− | -webkit-transform: scale( | + | -webkit-transform: scale(4.5);} |
80%{left: 44%; | 80%{left: 44%; | ||
top: 42%; | top: 42%; | ||
− | -webkit-transform: scale( | + | -webkit-transform: scale(4);} |
100%{left: 8px; | 100%{left: 8px; | ||
Line 271: | Line 271: | ||
0% {left: 44%; | 0% {left: 44%; | ||
top: 42%; | top: 42%; | ||
− | transform: scale( | + | transform: scale(4.5);} |
80%{left: 44%; | 80%{left: 44%; | ||
top: 42%; | top: 42%; | ||
− | transform: scale( | + | transform: scale(4);} |
100%{left: 8px; | 100%{left: 8px; | ||
Line 344: | Line 344: | ||
opacity: 0.4; | opacity: 0.4; | ||
filter: alpha(opacity=40); /* For IE8 and earlier */ | filter: alpha(opacity=40); /* For IE8 and earlier */ | ||
− | margin-top: | + | left: -20px; |
+ | margin-top: -10px; | ||
margin-left: auto; | margin-left: auto; | ||
margin-right: 100%; | margin-right: 100%; | ||
Line 394: | Line 395: | ||
.leftContainer{ | .leftContainer{ | ||
position: relative; | position: relative; | ||
− | width: | + | width: 35%; |
display: inline-block; | display: inline-block; | ||
float: left; | float: left; | ||
padding-left: 10%; | padding-left: 10%; | ||
+ | text-align: justify; | ||
+ | text-justify: inter-word; | ||
} | } | ||
Line 416: | Line 419: | ||
.smallMosquito{ | .smallMosquito{ | ||
text-align: right; | text-align: right; | ||
+ | margin-right: -50px; | ||
+ | margin-top: -70px; | ||
+ | margin-bottom: -10px; | ||
} | } | ||
Latest revision as of 12:59, 6 October 2015
body {
margin: 0; padding: 0; width:100%; height:100%; background-color: white;
font: none; }
/*-------------------------Import-------------------------*/
- contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .visualClear {display: none;} /*-- hides default wiki settings --*/
html, body, .wrapper { /*-- changes default wiki settings --*/
width: 100%; height: 100%; background-color: transparent;
}
- globalWrapper, #content { /*-- changes default wiki settings --*/
width: 100%; height: 100%; border: 0px; background-color: transparent; margin: 0px; padding: 0px;
}
.firstHeading{ display:none !important; }
/*-------------------------NavBar-------------------------*/
nav{ z-index: 100; background-color: rgba(255,255,255,0.7); padding: 0.3em; /*NavBarHeight*/ min-height: 3em; line-height: 1em; max-height: 130px; }
nav a:visited{
color:black !important;
}
nav > ul {
margin-top: 15px !important; margin-left: 7.5em !important; padding-right: 12em !important; text-align: right; transition: max-height 0.25s linear;
}
.menu {
position: fixed; top: 0; left: 0 !important; right: 0 !important; top: 0px !important;
}
.menu ul > li {
transition: visibility .5s linear; display: inline-block; text-align: left; padding: 0.8em 0em; margin: 0 .5em; position: relative;
}
nav li:hover {
-webkit-transform: scale(1.4); transform: scale(1.4);
}
/* Hide Dropdowns by Default and giving it a position of absolute */ nav ul ul {
display: none; position: absolute; margin-left: 0; padding-left: 0; margin-top: 14 !important;
}
nav a, u {
text-decoration: none !important; color: black;}
/* Display Dropdowns on Hover */ .menu li:hover > ul {
display: block;
}
/* Fisrt Tier Dropdown */ nav ul ul li {
min-width:170px; float:none; position: relative;
}
.menu > ul > li > ul > li{
background-color: rgba(255,255,255,0.7);
} /*-------------------------Media Rules-------------------------*/ @media (max-width: 970px) {
.menu > ul > li{ padding-left: 1px; padding-right: 1px;}
}
@media (max-width: 890px) {
.menu > ul { padding-right: 0;}
}
@media (max-width: 800px) {
.menu > ul > li{ padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0;} .logo > img { width: 120px;} .menu > ul { padding-left: 5;}
}
@media (max-width: 640px) {
.logo > img { width: 85px;} .menu > ul { margin-left: 65;}
}
@media (min-width: 585px) {
.menu li ul { position: absolute; margin-top: 1px; left: -1px; right: -1px; } .menu li li { margin: -1px 0 0 0; box-sizing: border-box; width: 100%; }
} @media (max-width: 584px) {
.menu{ max-height: 50; } .menu > ul > li { visibility: hidden; display: inline-block; padding: 0.1em 0.1em; border: none;
}
.logo > img { width: 65px;
}
.artemisininGIF img { margin-top: -60px;
}
.menu > ul { max-height: 0; margin: 5.7em 3em 1em 3em; background-color: rgba(255,255,255,0.85);
}
.menu .navBarDropdown { display: block;
}
#navBarCheckbox:checked + .menu > ul { max-height: 500px;
}
#navBarCheckbox:checked + .menu > ul > li { visibility: visible;
} }
/*-------------------------Dropdown-------------------------*/ .navBarCheckbox {
display: none;
} .navBarDropdown {
display: none; cursor: pointer; position: relative; font-size: 45px; padding: .5em 0; height: 0; width: 1.66666667em; border-top: 0.13333333em solid;
} .navBarDropdown:before, .navBarDropdown:after {
position: absolute; left: 0; right: 0; content: ' '; border-top: 0.13333333em solid;
} .navBarDropdown:before {
top: 0.37777778em;
} .navBarDropdown:after {
top: 0.88888889em;
} .menu {
position: fixed; top: 0; left: 0; right: 0;
} .menu .navBarDropdown {
position: absolute; font-size: 1.2em; top: 0.7em; right: 12px; z-index: 10;
} /*-------------------------Animations-------------------------*/ .logo {
position: fixed; left: 8px; top: 20px; z-index: 111;
}
@-moz-keyframes logoAnimation {
0% {left: 44%; top: 42%; transform: scale(4.5);}
80%{left: 44%; top: 42%; transform: scale(4);} 100%{left: 8px; top: 20px;}
}
@-webkit-keyframes logoAnimation {
0% {left: 44%; top: 42%; -webkit-transform: scale(4.5);}
80%{left: 44%; top: 42%; -webkit-transform: scale(4);} 100%{left: 8px; top: 20px;}
}
@keyframes logoAnimation {
0% {left: 44%; top: 42%; transform: scale(4.5);}
80%{left: 44%; top: 42%; transform: scale(4);} 100%{left: 8px; top: 20px;}
}
.logoAnimation { -webkit-animation:logoAnimation ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ -moz-animation:logoAnimation ease-in 1; animation:logoAnimation ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;
-webkit-animation-duration:2s; -moz-animation-duration:2s; animation-duration:2s;
-webkit-animation-delay: 0s; -moz-animation-delay: 0s; animation-delay: 0s; -webkit-transition: width 2s, height 4s; /* Safari */ transition: width 2s, height 4s;
}
/*-------------------------NavBar-------------------------*/
/*-------------------------FadeIn-------------------------*/ @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fadeIn { opacity:0; /* make things invisible upon start */ -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;
-webkit-animation-duration:2s; -moz-animation-duration:2s; animation-duration:2s;
-webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s; animation-delay: 1.5s;
} /*-------------------------FadeIn-------------------------*/
.standardMargin {
margin-left: 10%; margin-right: 10%;
}
.standardMarginB {
margin-left: 10%; margin-right: 10%;
}
.leftSeparator img {
float:left; width:50%; opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */
left: -20px;
margin-top: -10px; margin-left: auto; margin-right: 100%;
}
.rightSeparator img {
float:right; width:70%; opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */ margin-right: -5%;
}
.artemisininGIF {
position: relative; width:100%; height: auto; text-align: center; margin-top: 130px;
}
.artemisininGIF img {
display: inline-block; vertical-align: middle; min-width: 350px;
}
.mainPicture {
position: relative; width:100%; height: auto; text-align: center !important; margin-top: 130px;
}
.mainPicture img {
display: inline-block; vertical-align: middle !important; min-width: 350px; max-height: 75%;
}
.container{
position: relative; width: 100%; height:inherit;}
.leftContainer{
position: relative; width: 35%; display: inline-block; float: left; padding-left: 10%; text-align: justify;
text-justify: inter-word; }
.rightContainer{
position:relative; width: 40%; display: inline-block; float: right; padding-right: 10%;
}
.projectVideo{
text-align: center; min-height: 500px !important;; min-width: 600px !important;;
}
.smallMosquito{
text-align: right; margin-right: -50px; margin-top: -70px; margin-bottom: -10px;
}
@font-face {
font-family: heading; src: url(https://static.igem.org/mediawiki/2015/e/e9/TrinityDublin15_NellaSue.ttf); font
}
@font-face {
font-family: subHeading; src: url(https://static.igem.org/mediawiki/2015/8/8f/TrinityDublin15_Myriad.otf); font-weight: bold;
}
@font-face {
font-family: paragraph; src: url(https://static.igem.org/mediawiki/2015/8/8f/TrinityDublin15_Myriad.otf);
}
.centre {
text-align: center;
}
h1{ font-family: 'heading' !important; z-index: 2; font-size: 300% !important; font: 'heading' !important; font: heading; font-weight: none !important; }
h2{ font-family: 'subHeading' !important; font: 'subHeading' !important; }
p{ font-family: 'paragraph' !important; font: 'paragraph' !important; }
p, h1, h2, h3, h4, h5, h6, html, span {
color: #000; margin: 0px; padding-top: 0.5em; padding-bottom: 0.5em; border-bottom: none !important; font-weight: none !important; font: heading;
}
}
.headingOne{ font-family: 'heading' !important; font-size: 300% !important; font: 'heading' !important; font: heading; }