|
|
| Line 1: |
Line 1: |
| - | /* -----------------------------------------
| + | {{:Team:Cornell/sandbox/header}} |
| - | Table of Contents
| + | <html> |
| - | -----------------------------------------
| + | <body> |
| - | :: iGEM Reset
| + | <div class="navbar" style="position: relative; z-index: 20; margin-top: -29px; font-weight: 600;"> |
| - | :: Basic Styles
| + | <a><div class="head"> Project </div></a> |
| - | :: Parallax
| + | <a><div class="head"> Outreach </div></a> |
| - | */
| + | <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> |
| - | iGEM Reset
| + | <a><div class="head"> Notebook</div></a> |
| - | ----------------------------------------- */
| + | <a><div class="head"> Team</div></a> |
| - | #globalWrapper {
| + | </div> |
| - | background-color: transparent; | + | <div class="wrapper home"> |
| - | border: none; | + | <div id="first-screen" class="screen" data-speed="500" data-dist="100"> |
| - | margin: 0;
| + | <span class="layer1" style="font-size:60px; top: 20%; left: 20%;">Home Page</span> |
| - | padding: 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%;"> |
| - | width: 100%;
| + | <span class="layer1" style="left:20%; top: 45%">Use arrow keys to move through slider -></span> |
| - | height: 100%;
| + | <span class="layer1" style="left:20%; top: 55%">I'll get mouse controls working in a bit</span> |
| - | }
| + | </div> |
| - | #content {
| + | <div id="second-last-screen" class="screen" data-speed="500" data-dist="100" style="left: 100%;"> |
| - | background-color: transparent;
| + | <span class="layer1" style="left:25%; top: 45%">There's no parallax effect right now... It's giving me some trouble</span> |
| - | border: none;
| + | <span class="layer1" style="left:25%; top: 55%">Also all the colors and images are temporary -></span> |
| - | padding: 0;
| + | </div> |
| - | margin: 0;
| + | <div class="screen" data-speed="500" data-dist="100" style="left: 200%;"> |
| - | width: 100%;
| + | <span class="layer1" style="left:25%; top: 45%">General page layout coming soon</span> |
| - | overflow: visible;
| + | <span class="layer1" style="left:25%; top: 55%">...and the hprac page that I keep forgetting to work on</span> |
| - | height: 100%;
| + | </div> |
| - | line-height: inherit;
| + | </div> |
| - | color: rgb(70, 70, 70);
| + | <div class="navbar" style="position: fixed; z-index: 10; bottom: -1px;"> |
| - | }
| + | <div style="display: inline-block"> |
| - | #bodyContent {
| + | <a> |
| - | border: none;
| + | <img src ="https://static.igem.org/mediawiki/igem.org/6/67/IGEMsmall.png" style="margin-left: 15px; margin-right: 20px;"> |
| - | padding: 0px;
| + | </a> |
| - | margin: 0px;
| + | </div> |
| - | 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> |
| - | Basic Styles
| + | <div class="tail"> |
| - | ----------------------------------------- */
| + | <span>Nickel</span> |
| - | * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
| + | <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/512/Sport-Activities-Skydiving-gear-icon.png"> |
| - | | + | </div> |
| - | html { font-size: 62.5%; height: 100%;}
| + | </a> |
| - | | + | <a> |
| - | body {
| + | <div class="tail"> |
| - | background: #f2f2f2;
| + | <span>Mercury</span> |
| - | font-family: 'Droid Sans', Helvetica, sans-serif;
| + | <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/256/Accommodation-Jacuzzi-icon.png"> |
| - | font-size: 20px;
| + | </div> |
| - | line-height: 23px;
| + | </a> |
| - | -webkit-font-smoothing: antialiased;
| + | <a> |
| - | height: 100%;
| + | <div class="tail"> |
| - | overflow: hidden;
| + | <span style="margin-left: -7%">Lead</span> |
| - | }
| + | <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/256/Sport-Activities-Fishing-icon.png"> |
| - |
| + | </div> |
| - | div.wrapper {
| + | </a> |
| - | position: relative;
| + | <a> |
| - | margin: 0 2%;
| + | <div class="tail"> |
| - | overflow: hidden;
| + | <span style="margin-left: -9%">Reporters</span> |
| - | }
| + | <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/256/Sport-Activities-Base-jumping-icon.png"> |
| - | | + | </div> |
| - | div.wrapper:not(.home) {
| + | </a> |
| - | height: 100%;
| + | </div> |
| - | }
| + | </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; }
| + | |
"
Use arrow keys to move through slider ->
I'll get mouse controls working in a bit
