Team:Cornell/sandbox

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{:Team:Cornell/sandbox/header}}
+
/* -----------------------------------------
-
<html>
+
Table of Contents
-
<body>
+
-----------------------------------------
-
<div class="navbar" style="position: relative; z-index: 20; margin-top: -29px; font-weight: 600;">
+
:: iGEM Reset
-
<a><div class="head"> Project </div></a>
+
:: Basic Styles
-
<a><div class="head"> Outreach </div></a>
+
:: Parallax
-
<div class="head">
+
*/
-
<img style="width: 450px; padding: 0 30px; margin-top: -10px;" src="https://static.igem.org/mediawiki/2013/f/fa/Cornell_iGEM_logo.png">
+
-
</div>
+
/* -----------------------------------------
-
<a><div class="head"> Notebook</div></a>
+
iGEM Reset
-
<a><div class="head"> Team</div></a>
+
----------------------------------------- */
-
</div>
+
#globalWrapper {
-
<div class="wrapper home">
+
background-color: transparent;
-
<div id="first-screen" class="screen" data-speed="500" data-dist="100">
+
border: none;
-
<span class="layer1" style="font-size:60px; top: 20%; left: 20%;">Home Page</span>
+
margin: 0;
-
<img class="layer4 spin" src="http://www.iconarchive.com/download/i74335/visualpharm/icons8-metro-style/Very-Basic-Settings.ico" style="left: 57%; height: 90%; width: 30%;">
+
padding: 0;
-
<span class="layer1" style="left:20%; top: 45%">Use arrow keys to move through slider -></span>
+
width: 100%;
-
<span class="layer1" style="left:20%; top: 55%">I'll get mouse controls working in a bit</span>
+
height: 100%;
-
</div>
+
}
-
<div id="second-last-screen" class="screen" data-speed="500" data-dist="100" style="left: 100%;">
+
#content {
-
<span class="layer1" style="left:25%; top: 45%">There's no parallax effect right now... It's giving me some trouble</span>
+
background-color: transparent;
-
<span class="layer1" style="left:25%; top: 55%">Also all the colors and images are temporary -></span>
+
border: none;
-
</div>
+
padding: 0;
-
<div class="screen" data-speed="500" data-dist="100" style="left: 200%;">
+
margin: 0;
-
<span class="layer1" style="left:25%; top: 45%">General page layout coming soon</span>
+
width: 100%;
-
<span class="layer1" style="left:25%; top: 55%">...and the hprac page that I keep forgetting to work on</span>
+
overflow: visible;
-
</div>
+
height: 100%;
-
</div>
+
line-height: inherit;
-
<div class="navbar" style="position: fixed; z-index: 10; bottom: -1px;">
+
color: rgb(70, 70, 70);
-
<div style="display: inline-block">
+
}
-
<a>
+
#bodyContent {
-
<img src ="https://static.igem.org/mediawiki/igem.org/6/67/IGEMsmall.png" style="margin-left: 15px; margin-right: 20px;">
+
border: none;
-
</a>
+
padding: 0px;
-
</div>
+
margin: 0px;
 +
width: 100%;
 +
height: 100%;
 +
}
 +
#top-section {
 +
height: 15px;
 +
margin: 0px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
margin-bottom: 0 !important;
 +
padding: 0;
 +
border: none;
 +
font-size: 10px;
 +
}
 +
#p-logo {
 +
height: 1px;
 +
overflow: hidden;
 +
display: none;
 +
}
 +
#search-controls {
 +
overflow: hidden;
 +
display: block;
 +
background: none;
 +
position: absolute;
 +
top: 100px;
 +
right: 40px;
 +
}
 +
#menubar.left-menu {
 +
/* margin-top: -80px; uncomment this when page goes live */
 +
background: none;
 +
height: 20px;
 +
left: 20px;
 +
float: left;
 +
}
 +
.left-menu ul {
 +
visibility: hidden;
 +
}
 +
.left-menu:hover ul {
 +
visibility: visible;
 +
}
 +
.left-menu:hover ul li a {
 +
color: #666;
 +
}
 +
.left-menu li a:hover {
 +
color: #aaaaff !important;
 +
text-decoration: underline;
 +
}
 +
#menubar.right-menu {
 +
display: block;
 +
width: 300px;
 +
float: left;
 +
margin-top: 2px;
 +
margin-right: 0px;
 +
border: none;
 +
}
 +
.right-menu ul {
 +
width: 300px;
 +
margin: 0px;
 +
visibility: hidden;
 +
}
 +
.right-menu ul li a {
 +
background: none;
 +
color: #666;
 +
}
 +
.right-menu:hover ul {
 +
visibility: visible;
 +
}
 +
#footer-box {
 +
width: 100%;
 +
margin: -10px auto 0 auto;
 +
padding: 20px 0;
 +
display: none; /* uncomment when page goes live */
 +
}
 +
.visualClear {
 +
display: none;
 +
}
 +
#footer {
 +
border: none;
 +
width: 965px;
 +
margin: 0 auto;
 +
padding: 0;
 +
}
 +
.firstHeading {
 +
display: none;
 +
}
 +
#f-list a {
 +
color: #333;
 +
font-size: 10px;
 +
}
 +
#f-list a:hover {
 +
color: #666;
 +
}
 +
.printfooter {
 +
display: none;
 +
}
 +
#footer ul {
 +
margin: 0;
 +
padding: 0;
 +
}
 +
#footer ul li {
 +
margin-top: 0;
 +
margin-bottom: 0;
 +
margin-left: 10px;
 +
margin-right: 10px;
 +
padding: 0;
 +
}
 +
#search-controls {
 +
display: none;
 +
}
 +
h3#siteSub {
 +
display: none;
 +
}
 +
#contentSub {
 +
display: none;
 +
}
 +
p:first-child {
 +
display: none;
 +
}
 +
#catlinks {
 +
display: none;
 +
}
 +
#footer-box {
 +
width: 977px;
 +
margin-bottom: 20px;
 +
}
-
<a>
+
/* -----------------------------------------
-
<div class="tail">
+
Basic Styles
-
<span>Nickel</span>
+
----------------------------------------- */
-
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Sport-Activities-Skydiving-gear-icon.png">
+
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
-
</div>
+
 
-
</a>
+
html { font-size: 62.5%; height: 100%;}
-
<a>
+
 
-
<div class="tail">
+
body {
-
<span>Mercury</span>
+
background: #f2f2f2;
-
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/256/Accommodation-Jacuzzi-icon.png">
+
font-family: 'Droid Sans', Helvetica, sans-serif;
-
</div>
+
font-size: 20px;
-
</a>
+
line-height: 23px;
-
<a>
+
-webkit-font-smoothing: antialiased;
-
<div class="tail">
+
height: 100%;
-
<span style="margin-left: -7%">Lead</span>
+
overflow: hidden;
-
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/256/Sport-Activities-Fishing-icon.png">
+
}
-
</div>
+
-
</a>
+
div.wrapper {
-
<a>
+
position: relative;
-
<div class="tail">
+
margin: 0 2%;
-
<span style="margin-left: -9%">Reporters</span>
+
overflow: hidden;
-
<img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/256/Sport-Activities-Base-jumping-icon.png">
+
}
-
</div>
+
 
-
</a>
+
div.wrapper:not(.home) {
-
</div>
+
height: 100%;
-
</body>
+
}
-
</html>
+
 
 +
/* Navbars */
 +
.navbar {
 +
width: 100%;
 +
height: 100px;
 +
background-color: rgb(236, 236, 236);
 +
text-align: center;
 +
}
 +
 
 +
.head {
 +
display: inline-block;
 +
padding: 0 10px;
 +
color: rgb(70, 70, 70);
 +
}
 +
 +
.tail {
 +
display: inline-block;
 +
height: 90px;
 +
width: 20%;
 +
margin-top: 5px;
 +
border-radius: 3px;
 +
background-color: rgb(168, 168, 168);
 +
text-align: center;
 +
vertical-align: middle;
 +
line-height: 75px;
 +
color: rgb(70, 70, 70);
 +
}
 +
 +
.tail img{
 +
position: absolute;
 +
height: 110%;
 +
margin-top: -2%;
 +
width: 9%;
 +
}
 +
 +
.tail:hover > img{
 +
transform: scale(1, 1.5);
 +
-ms-transform: scale(1.5, 1.5); /* IE 9 */
 +
-webkit-transform: scale(1.2, 1.2); /* Safari and Chrome */
 +
-o-transform: scale(1.5, 1.5); /* Opera */
 +
-moz-transform: scale(1.5, 1.5); /* Firefox */
 +
}
 +
 +
.tail span{
 +
position: absolute;
 +
margin-left: -8%;
 +
margin-top: 0.7%;
 +
font-size: 28px;
 +
font-variant: small-caps;
 +
}
 +
 +
/* Spin Animation */
 +
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
 +
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
 +
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
 +
 +
.spin:hover {
 +
-webkit-animation:spin 2s linear infinite;
 +
-moz-animation:spin 2s linear infinite;
 +
animation:spin 2s linear infinite;
 +
}
 +
 +
/* Headers */
 +
h1, h2, h3, h4, h5, h6 {
 +
font-family: Helvetica, serif;
 +
font-weight: normal;
 +
border-bottom: none;
 +
margin-bottom: 0px !important;
 +
}
 +
 
 +
h1 { font-size: 44px; }
 +
h2 { font-size: 37px; }
 +
h3 { font-size: 27px; }
 +
h4 { font-size: 23px; }
 +
h5 { font-size: 17px; }
 +
h6 { font-size: 14px; }
 +
 +
h1.centered, h2.centered, h3.centered, h4.centered, h5.centered, h6.centered {
 +
text-align: center;
 +
}
 +
 +
/* Links */
 +
a, a:visited {
 +
color: #b31b1b;
 +
text-decoration: none;
 +
}
 +
 
 +
a:hover {
 +
color: #871414;
 +
text-decoration: none;
 +
cursor: pointer;
 +
cursor: hand;
 +
}
 +
 +
/* Lists */
 +
ul, ol {
 +
font-size: 14px;
 +
line-height: 1.6;
 +
margin-bottom: 17px;
 +
list-style-position: inside;
 +
}
 +
ul li ul, ul li ol { margin-left: 20px; margin-bottom: 0; }
 +
ul.square, ul.circle, ul.disc { margin-left: 17px; }
 +
ul.square { list-style-type: square; }
 +
ul.square li ul { list-style: inherit; }
 +
ul.circle { list-style-type: circle; }
 +
ul.circle li ul { list-style: inherit; }
 +
ul.disc { list-style-type: disc; }
 +
ul.disc li ul { list-style: inherit; }
 +
ul.no-bullet { list-style: none; }
 +
ol li ul, ol li ol { margin-left: 20px; margin-bottom: 0; }
 +
 +
 +
/* Misc */
 +
.left { float: left; }
 +
.right { float: right; }
 +
.text-left { text-align: left; }
 +
.text-right { text-align: right; }
 +
.text-center { text-align: center; }
 +
.hide { display: none; }
 +
.highlight { background: #ffff99; }
 +
.absolute { position: absolute; }
 +
 
 +
#googlemap img, object, embed { max-width: none; }
 +
#map_canvas embed { max-width: none; }
 +
#map_canvas img { max-width: none; }
 +
#map_canvas object { max-width: none; }
 +
 +
.nohilite {
 +
-webkit-touch-callout: none;
 +
-webkit-user-select: none;
 +
-khtml-user-select: none;
 +
-moz-user-select: none;
 +
-ms-user-select: none;
 +
user-select: none;
 +
}
 +
div.clearfix {
 +
content: ".";
 +
display: block;
 +
clear: both;
 +
visibility: hidden;
 +
line-height: 0;
 +
height: 0;
 +
}
 +
.off-canvas {
 +
width: 100%;
 +
}
 +
 +
/* -----------------------------------------
 +
Parallax
 +
----------------------------------------- */
 +
.screen {
 +
position: absolute;
 +
height: 100%;
 +
width: 100%;
 +
//background-color: rgb(50, 187, 83);
 +
//border: 3px solid black;
 +
}
 +
 +
.screen img {position: absolute;}
 +
 +
.screen span {position: absolute;}
 +
 +
.parallax {
 +
position: absolute;
 +
white-space: nowrap;
 +
}
 +
 
 +
.layer1 { z-index: 4; }
 +
.layer2 { z-index: 3; }
 +
.layer3 { z-index: 2; }
 +
.layer4 { z-index: 1; }

Revision as of 17:39, 26 July 2014

/* ----------------------------------------- Table of Contents 

----------------------------------------- 
:: iGEM Reset
:: Basic Styles
:: Parallax
*/

/* ----------------------------------------- iGEM Reset 

----------------------------------------- */
  1. globalWrapper {

background-color: transparent; border: none; margin: 0; padding: 0; width: 100%; height: 100%; }

  1. content {

background-color: transparent; border: none; padding: 0; margin: 0; width: 100%; overflow: visible; height: 100%; line-height: inherit; color: rgb(70, 70, 70); }

  1. bodyContent {

border: none; padding: 0px; margin: 0px; width: 100%; height: 100%; }

  1. top-section {

height: 15px; margin: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0 !important; padding: 0; border: none; font-size: 10px; }

  1. p-logo {

height: 1px; overflow: hidden; display: none; }

  1. search-controls {

overflow: hidden; display: block; background: none; position: absolute; top: 100px; right: 40px; }

  1. menubar.left-menu {

/* margin-top: -80px; uncomment this when page goes live */ background: none; height: 20px; left: 20px; float: left; } .left-menu ul { visibility: hidden; } .left-menu:hover ul { visibility: visible; } .left-menu:hover ul li a { color: #666; } .left-menu li a:hover { color: #aaaaff !important; text-decoration: underline; }

  1. menubar.right-menu {

display: block; width: 300px; float: left; margin-top: 2px; margin-right: 0px; border: none; } .right-menu ul { width: 300px; margin: 0px; visibility: hidden; } .right-menu ul li a { background: none; color: #666; } .right-menu:hover ul { visibility: visible; }

  1. footer-box {

width: 100%; margin: -10px auto 0 auto; padding: 20px 0; display: none; /* uncomment when page goes live */ } .visualClear { display: none; }

  1. footer {

border: none; width: 965px; margin: 0 auto; padding: 0; } .firstHeading { display: none; }

  1. f-list a {

color: #333; font-size: 10px; }

  1. f-list a:hover {

color: #666; } .printfooter { display: none; }

  1. footer ul {

margin: 0; padding: 0; }

  1. footer ul li {

margin-top: 0; margin-bottom: 0; margin-left: 10px; margin-right: 10px; padding: 0; }

  1. search-controls {

display: none; } h3#siteSub { display: none; }

  1. contentSub {

display: none; } p:first-child { display: none; }

  1. catlinks {

display: none; }

  1. footer-box {

width: 977px; margin-bottom: 20px; }

/* ----------------------------------------- 

Basic Styles
----------------------------------------- */
  • { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html { font-size: 62.5%; height: 100%;}

body { background: #f2f2f2; font-family: 'Droid Sans', Helvetica, sans-serif; font-size: 20px; line-height: 23px; -webkit-font-smoothing: antialiased; height: 100%; overflow: hidden; }

div.wrapper { position: relative; margin: 0 2%; overflow: hidden; }

div.wrapper:not(.home) { height: 100%; }

/* Navbars */ .navbar { width: 100%; height: 100px; background-color: rgb(236, 236, 236); text-align: center; }

.head { display: inline-block; padding: 0 10px; color: rgb(70, 70, 70); }

.tail { display: inline-block; height: 90px; width: 20%; margin-top: 5px; border-radius: 3px; background-color: rgb(168, 168, 168); text-align: center; vertical-align: middle; line-height: 75px; color: rgb(70, 70, 70); }

.tail img{ position: absolute; height: 110%; margin-top: -2%; width: 9%; }

.tail:hover > img{ transform: scale(1, 1.5); -ms-transform: scale(1.5, 1.5); /* IE 9 */ -webkit-transform: scale(1.2, 1.2); /* Safari and Chrome */ -o-transform: scale(1.5, 1.5); /* Opera */ -moz-transform: scale(1.5, 1.5); /* Firefox */ }

.tail span{ position: absolute; margin-left: -8%; margin-top: 0.7%; font-size: 28px; font-variant: small-caps; }

/* Spin Animation */ @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.spin:hover { -webkit-animation:spin 2s linear infinite; -moz-animation:spin 2s linear infinite; animation:spin 2s linear infinite; }

/* Headers */ h1, h2, h3, h4, h5, h6 { font-family: Helvetica, serif; font-weight: normal; border-bottom: none; margin-bottom: 0px !important; }

h1 { font-size: 44px; } h2 { font-size: 37px; } h3 { font-size: 27px; } h4 { font-size: 23px; } h5 { font-size: 17px; } h6 { font-size: 14px; }

h1.centered, h2.centered, h3.centered, h4.centered, h5.centered, h6.centered { text-align: center; }

/* Links */ a, a:visited { color: #b31b1b; text-decoration: none; }

a:hover { color: #871414; text-decoration: none; cursor: pointer; cursor: hand; }

/* Lists */ ul, ol { font-size: 14px; line-height: 1.6; margin-bottom: 17px; list-style-position: inside; } ul li ul, ul li ol { margin-left: 20px; margin-bottom: 0; } ul.square, ul.circle, ul.disc { margin-left: 17px; } ul.square { list-style-type: square; } ul.square li ul { list-style: inherit; } ul.circle { list-style-type: circle; } ul.circle li ul { list-style: inherit; } ul.disc { list-style-type: disc; } ul.disc li ul { list-style: inherit; } ul.no-bullet { list-style: none; } ol li ul, ol li ol { margin-left: 20px; margin-bottom: 0; }


/* Misc */ .left { float: left; } .right { float: right; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .hide { display: none; } .highlight { background: #ffff99; } .absolute { position: absolute; }

  1. googlemap img, object, embed { max-width: none; }
  2. map_canvas embed { max-width: none; }
  3. map_canvas img { max-width: none; }
  4. map_canvas object { max-width: none; }

.nohilite { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } div.clearfix { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .off-canvas { width: 100%; }

/* ----------------------------------------- 

Parallax
----------------------------------------- */

.screen { position: absolute; height: 100%; width: 100%; //background-color: rgb(50, 187, 83); //border: 3px solid black; }

.screen img {position: absolute;}

.screen span {position: absolute;}

.parallax { position: absolute; white-space: nowrap; }

.layer1 { z-index: 4; } .layer2 { z-index: 3; } .layer3 { z-index: 2; } .layer4 { z-index: 1; }

Retrieved from "http://2013.igem.org/Team:Cornell/sandbox"