|
|
| Line 1: |
Line 1: |
| − | <!--
| |
| − | V5
| |
| − |
| |
| − | Changes
| |
| − | *
| |
| − |
| |
| − | Detailed Changes
| |
| − | *
| |
| − |
| |
| − |
| |
| − | Missing
| |
| − | *
| |
| − |
| |
| − | -->
| |
| − |
| |
| − |
| |
| − | <!---{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_General_Format}} ------>
| |
| | <html> | | <html> |
| | | | |
| | <head> | | <head> |
| − | <meta name="viewport" content="width=device-width,initial-scale=1.0">
| |
| − | <!--bootstrap core css-->
| |
| − | <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/bootstrapmin?action=raw&ctype=text/css" rel="stylesheet">
| |
| − | <link href="https://2018.igem.org/Team:Tec-Monterrey/CSS/fontawesomemin?action=raw&ctype=text/css" rel="stylesheet" type="text/css">
| |
| − |
| |
| − |
| |
| − |
| |
| | <style> | | <style> |
| − | /**************************************** Clear the default wiki settings *********************************/
| + | #chartdiv { |
| − | | + | |
| − | #home_logo, | + | |
| − | #sideMenu {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | #sideMenu,
| + | |
| − | #top_title,
| + | |
| − | .patrollink {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | #content,
| + | |
| − | #HQ_page {
| + | |
| | width: 100%; | | width: 100%; |
| − | padding: 0; | + | height: 500px; |
| − | margin: 0;
| + | |
| − | background-color: white; //font-size: 100% !important;
| + | |
| | } | | } |
| | | | |
| − | #content { | + | .map-marker { |
| − | margin-top: -16px; | + | /* adjusting for the marker dimensions |
| | + | so that it is centered on coordinates */ |
| | + | margin-left: -8px; |
| | + | margin-top: -8px; |
| | } | | } |
| | | | |
| − | #globalWrapper, | + | .map-marker.map-clickable { |
| − | #content,
| + | cursor: pointer; |
| − | #HQ_page,
| + | |
| − | #bodyContent,
| + | |
| − | #mw-content-text {
| + | |
| − | height: 100%; | + | |
| − | width: 100%;
| + | |
| | } | | } |
| | | | |
| − | /*Bootstrap.min altered the way the top menu looks, by changing box-sizing: from border-box to initial, the damage is undone*/ | + | .pulse { |
| − | | + | width: 10px; |
| − | #top_menu_14 {
| + | height: 10px; |
| − | box-sizing: initial; | + | border: 5px solid #f7f14c; |
| | + | -webkit-border-radius: 30px; |
| | + | -moz-border-radius: 30px; |
| | + | border-radius: 30px; |
| | + | background-color: #716f42; |
| | + | z-index: 10; |
| | + | position: absolute; |
| | } | | } |
| | | | |
| − | td a {
| + | .map-marker .dot { |
| − | padding-right: 0px !important;
| + | border: 10px solid #fff601; |
| − | }
| + | background: transparent; |
| − | | + | -webkit-border-radius: 60px; |
| − | #globalWrapper {
| + | -moz-border-radius: 60px; |
| − | padding-bottom: 0;
| + | border-radius: 60px; |
| − | }
| + | height: 50px; |
| − | | + | |
| − | /*************************************************** Bootstrap Stuff ************************************************/
| + | |
| − | | + | |
| − | .portfolio-item .caption .caption-content p { | + | |
| − | font-weight: 300; | + | |
| − | font-size: 1.2rem; | + | |
| − | }
| + | |
| − | | + | |
| − | @media (min-width: 992px) {
| + | |
| − | .portfolio-item {
| + | |
| − | max-width: none;
| + | |
| − | margin: 0;
| + | |
| − | }
| + | |
| − | .portfolio-item .caption {
| + | |
| − | -webkit-transition: -webkit-clip-path 0.25s ease-out, background-color 0.7s;
| + | |
| − | -webkit-clip-path: inset(0px);
| + | |
| − | clip-path: inset(0px);
| + | |
| − | } | + | |
| − | .portfolio-item .caption .caption-content {
| + | |
| − | transition: opacity 0.25s;
| + | |
| − | margin-left: 5rem;
| + | |
| − | margin-right: 5rem;
| + | |
| − | margin-bottom: 5rem;
| + | |
| − | }
| + | |
| − | .portfolio-item img {
| + | |
| − | -webkit-transition: -webkit-clip-path 0.25s ease-out;
| + | |
| − | -webkit-clip-path: inset(-1px);
| + | |
| − | clip-path: inset(-1px);
| + | |
| − | }
| + | |
| − | .portfolio-item:hover img {
| + | |
| − | -webkit-clip-path: inset(2rem);
| + | |
| − | clip-path: inset(2rem);
| + | |
| − | }
| + | |
| − | .portfolio-item:hover .caption {
| + | |
| − | background-color: rgba(29, 128, 159, 0.9);
| + | |
| − | -webkit-clip-path: inset(2rem);
| + | |
| − | clip-path: inset(2rem);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | a {
| + | |
| − | color: #1D809F;
| + | |
| − | }
| + | |
| − | | + | |
| − | a:hover,
| + | |
| − | a:focus,
| + | |
| − | a:active {
| + | |
| − | color: #155d74;
| + | |
| − | }
| + | |
| − | | + | |
| − | .btn-primary {
| + | |
| − | background-color: #1D809F !important;
| + | |
| − | border-color: #1D809F !important;
| + | |
| − | color: #fff !important; | + | |
| − | }
| + | |
| − | | + | |
| − | .btn-primary:hover,
| + | |
| − | .btn-primary:focus,
| + | |
| − | .btn-primary:active {
| + | |
| − | background-color: #155d74 !important;
| + | |
| − | border-color: #155d74 !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .btn {
| + | |
| − | box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
| + | |
| − | font-weight: 700;
| + | |
| − | }
| + | |
| − | | + | |
| − | .btn-xl {
| + | |
| − | padding: 1.25rem 2.5rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | /*****************************************************custom css*****************************************************/
| + | |
| − | | + | |
| − | @font-face {
| + | |
| − | font-family: "Norwester";
| + | |
| − | src: url('https://static.igem.org/mediawiki/2018/d/da/T--Tec-Monterrey--Norwester.woff') format('woff'),
| + | |
| − | url('https://static.igem.org/mediawiki/2018/8/8d/T--Tec-Monterrey--Norwester.ttf') format('truetype');
| + | |
| − | }
| + | |
| − | | + | |
| − | @font-face {
| + | |
| − | font-family: "Montserrat";
| + | |
| − | src: url('https://static.igem.org/mediawiki/2018/4/44/T--Tec-Monterrey--Montserrat.woff') format('woff'),
| + | |
| − | url('https://static.igem.org/mediawiki/2018/a/ad/T--Tec-Monterrey--Montserrat.ttf') format('truetype');
| + | |
| − | }
| + | |
| − | | + | |
| − | @font-face {
| + | |
| − | font-family: "DosisRegular";
| + | |
| − | src: url('https://static.igem.org/mediawiki/2018/8/84/T--Tec-Monterrey--Dosis_regular.woff') format('woff'),
| + | |
| − | url('https://static.igem.org/mediawiki/2018/e/e1/T--Tec-Monterrey--Dosis_regular.ttf') format('truetype');
| + | |
| − | }
| + | |
| − | | + | |
| − | body,
| + | |
| − | html {
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | body {
| + | |
| − | font-family: "DosisRegular", sans-serif !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul {
| + | |
| − | margin: 0 !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | h1,
| + | |
| − | h2,
| + | |
| − | h3,
| + | |
| − | h4,
| + | |
| − | h5,
| + | |
| − | h6 {
| + | |
| − | font-weight: 700;
| + | |
| − | padding: 0 0 0 0;
| + | |
| − | margin: 0 0 0 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .text-faded {
| + | |
| − | color: rgba(255, 255, 255, 0.7);
| + | |
| − | }
| + | |
| − | | + | |
| − | .masthead {
| + | |
| − | height: 100%;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .header-top {
| + | |
| − | height: 70%;
| + | |
| − | width: 100%;
| + | |
| − | position: relative;
| + | |
| − | background: rgb(248, 247, 246);
| + | |
| − | }
| + | |
| − | | + | |
| − | .header-bottom {
| + | |
| − | height: 30%;
| + | |
| − | position: relative;
| + | |
| − | background: white;
| + | |
| − | padding: 10px 0px 10px 10px;
| + | |
| − | margin: 0px 0px 0px 0px;
| + | |
| − | "
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | .div-header-bottom {
| + | |
| − | padding: 5px 0px 0px 10px;
| + | |
| − | border-left: 10px solid #2f6361; | + | |
| − | }
| + | |
| − | | + | |
| − | .header-title {
| + | |
| − | font-family: "Norwester", sans-serif !important; | + | |
| − | text-align: left !important;
| + | |
| − | font-size: 9vw;
| + | |
| − | font-weight: 700 !important;
| + | |
| − | line-height: 1em;
| + | |
| − | padding-bottom: 0;
| + | |
| − | margin-bottom: -5px;
| + | |
| − | color: #3582d2;
| + | |
| − | }
| + | |
| − | | + | |
| − | .header-subtitle {
| + | |
| − | font-family: "Montserrat", monospace;
| + | |
| − | text-align: left !important;
| + | |
| − | font-size: 3.5vw;
| + | |
| − | font-weight: 600 !important;
| + | |
| − | line-height: 1em;
| + | |
| − | padding-bottom: 4px;
| + | |
| − | color: #5da565;
| + | |
| − | }
| + | |
| − | | + | |
| − | .body-title {
| + | |
| − | font-family: "Norwester", sans-serif !important;
| + | |
| − | font-size: 4vw;
| + | |
| − | font-weight: 600 !important;
| + | |
| − | line-height: 1em;
| + | |
| − | padding: 10px 0 10px 0;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | .body-title h1 {
| + | |
| − | margin: 0 !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .body-subtitle {
| + | |
| − | font-family: "Montserrat", monospace !important;
| + | |
| − | font-size: 2.5vw;
| + | |
| − | font-weight: 400 !important;
| + | |
| − | line-height: 1.2em;
| + | |
| − | padding: 3% 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .scroll-to-top {
| + | |
| − | position: fixed;
| + | |
| − | right: 10px;
| + | |
| − | bottom: 10px;
| + | |
| − | display: none;
| + | |
| | width: 50px; | | width: 50px; |
| − | height: 50px; | + | -webkit-animation: pulse 3s ease-out; |
| − | text-align: center;
| + | -moz-animation: pulse 3s ease-out; |
| − | color: white !important;
| + | animation: pulse 3s ease-out; |
| − | background: rgba(52, 58, 64, 0.5);
| + | -webkit-animation-iteration-count: infinite; |
| − | line-height: 45px;
| + | -moz-animation-iteration-count: infinite; |
| − | }
| + | animation-iteration-count: infinite; |
| − | | + | |
| − | .scroll-to-top:focus,
| + | |
| − | .scroll-to-top:hover {
| + | |
| − | color: white !important; | + | |
| − | }
| + | |
| − | | + | |
| − | .scroll-to-top:hover {
| + | |
| − | background: #343a40;
| + | |
| − | }
| + | |
| − | | + | |
| − | .scroll-to-top i {
| + | |
| − | font-weight: 800;
| + | |
| − | }
| + | |
| − | | + | |
| − | .hide {
| + | |
| − | display: none; | + | |
| − | }
| + | |
| − | | + | |
| − | .footer {
| + | |
| − | padding-top: 1rem;
| + | |
| − | padding-bottom: 1rem; | + | |
| − | background: #404040;
| + | |
| − | }
| + | |
| − | | + | |
| − | #footerCopyright {
| + | |
| − | text-align: center !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .social-link {
| + | |
| − | color: #6c757d;
| + | |
| − | }
| + | |
| − | | + | |
| − | .social-link:hover {
| + | |
| − | color: #eeeeee;
| + | |
| − | }
| + | |
| − | | + | |
| − | /******************************************************* TOPBAR MENU *********************************************/
| + | |
| − | | + | |
| − | #topBarWrapper {}
| + | |
| − | | + | |
| − | .topBar {
| + | |
| − | position: fixed;
| + | |
| − | top: 18px;
| + | |
| − | z-index: 2; | + | |
| − | height: 8vh;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | #navbar {
| + | |
| − | position: fixed;
| + | |
| − | z-index: 2;
| + | |
| − | height: 8vh;
| + | |
| − | width: 100%;
| + | |
| − | background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
| + | |
| − | transition: all 0.3s;
| + | |
| − | -webkit-transition: all 0.3s; | + | |
| − | }
| + | |
| − | | + | |
| − | #navbarLogoWrapper {
| + | |
| | position: absolute; | | position: absolute; |
| − | display: inline-block; | + | top: -20px; |
| − | height: 100%; | + | left: -20px; |
| − | -webkit-transition: all 0.3s;
| + | z-index: 1; |
| − | transition: all 0.3s; | + | |
| − | }
| + | |
| − | | + | |
| − | #navbarLogoText {
| + | |
| − | display: inline-block;
| + | |
| − | font-size: 1vw;
| + | |
| − | color: white;
| + | |
| | opacity: 0; | | opacity: 0; |
| − | -webkit-transition: opacity 0.3s;
| |
| − | transition: opacity 0.3s;
| |
| | } | | } |
| | | | |
| − | #navbarLogo { | + | @-moz-keyframes pulse { |
| − | height: 80%; | + | 0% { |
| − | margin-top: 5%;
| + | -moz-transform: scale(0); |
| − | margin-bottom: 15%;
| + | opacity: 0.0; |
| − | margin-left: 20px;
| + | } |
| − | padding-left: 20px; | + | |
| − | border-left: 1px solid white;
| + | |
| − | display: inline-block;
| + | |
| − | }
| + | |
| | | | |
| − | #navbarGif {
| + | 25% { |
| − | height: 80%; | + | -moz-transform: scale(0); |
| − | margin-top: 5%;
| + | opacity: 0.1; |
| − | margin-bottom: 15%;
| + | } |
| − | margin-left: 20px;
| + | |
| − | padding-left: 20px; | + | |
| − | display: none;
| + | |
| − | }
| + | |
| | | | |
| − | #navbarGif,
| + | 50% { |
| − | #navbarLogoWrapper:hover #navbarLogo {
| + | -moz-transform: scale(0.1); |
| − | display: none;
| + | opacity: 0.3; |
| − | border: 0;
| + | } |
| − | }
| + | |
| | | | |
| − | #navbarLogo,
| + | 75% { |
| − | #navbarLogoWrapper:hover #navbarGif {
| + | -moz-transform: scale(0.5); |
| − | display: inline-block;
| + | opacity: 0.5; |
| − | }
| + | } |
| | | | |
| − | #navbarLogoWrapper:hover {
| + | 100% { |
| − | transform: scale(1.4, 1.4);
| + | -moz-transform: scale(1); |
| − | cursor: pointer;
| + | opacity: 0.0; |
| | + | } |
| | } | | } |
| | | | |
| − | #navbarLogoWrapper:hover>#navbarLogoText { | + | @-webkit-keyframes "pulse" { |
| − | opacity: 1;
| + | 0% { |
| − | }
| + | -webkit-transform: scale(0); |
| − | | + | opacity: 0.0; |
| − | #navContainer {
| + | |
| − | z-index: 2;
| + | |
| − | height: 8vh;
| + | |
| − | width: 80%;
| + | |
| − | left: 10%;
| + | |
| − | position: fixed;
| + | |
| − | background-color: rgba(0, 0, 0, 0);
| + | |
| − | color: #fff;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-linkContainer {
| + | |
| − | height: 100%;
| + | |
| − | width: 20%;
| + | |
| − | color: white;
| + | |
| − | background-color: rgba(0, 0, 0, 0);
| + | |
| − | -webkit-transition: all 0.3s;
| + | |
| − | transition: all 0.3s;
| + | |
| − | position: relative;
| + | |
| − | float: left;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-linkContainerChild {
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | bottom: 0;
| + | |
| − | left: 0;
| + | |
| − | right: 0;
| + | |
| − | width: 80%;
| + | |
| − | height: 1em;
| + | |
| − | margin: auto;
| + | |
| − | font-family: "Norwester", sans-serif;
| + | |
| − | font-weight: 700;
| + | |
| − | font-size: 1.5vw;
| + | |
| − | line-height: 1em;
| + | |
| − | border-left: 1px solid white;
| + | |
| − | border-right: 1px solid white;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-linkContainer.active {
| + | |
| − | transform: scale(1.05, 1.05); | + | |
| − | border-radius: 5%;
| + | |
| − | box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
| + | |
| − | background-color: #5da565;
| + | |
| − | -webkit-transition: all 0.3s;
| + | |
| − | transition: all 0.3s;
| + | |
| − | }
| + | |
| − | | + | |
| − | .activeChild {
| + | |
| − | border: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .collapsedMenu {
| + | |
| − | top: calc(8vh + 18px);
| + | |
| − | position: fixed;
| + | |
| − | z-index: 1;
| + | |
| − | width: 100%;
| + | |
| − | background-color: aquamarine;
| + | |
| − | }
| + | |
| − | | + | |
| − | .containerCollapse {
| + | |
| − | padding: 0 10px 30px 10px;
| + | |
| − | width: 80%;
| + | |
| − | margin-left: 10%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .height-support {
| + | |
| − | height: 20px;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .mask {
| + | |
| − | height: 8vh;
| + | |
| − | width: 100%;
| + | |
| − | background-color: rgba(0, 0, 0, 0);
| + | |
| − | z-index: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbarList {
| + | |
| − | float: left;
| + | |
| − | height: 100%;
| + | |
| − | width: 20%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbarItem {
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbarItemHeader {
| + | |
| − | display: inline-block;
| + | |
| − | position: relative;
| + | |
| − | font-family: "Norwester", sans-serif;
| + | |
| − | font-weight: 500;
| + | |
| − | font-size: 1.8vw;
| + | |
| − | color: black;
| + | |
| − | text-decoration: none;
| + | |
| − | padding-top: 10px;
| + | |
| − | width: auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbarItemContent {
| + | |
| − | display: inline-block;
| + | |
| − | position: relative;
| + | |
| − | color: black;
| + | |
| − | font-size: 1.5vw;
| + | |
| − | line-height: 1.5em;
| + | |
| − | text-decoration: none;
| + | |
| − | width: auto;
| + | |
| − | padding-top: 10px;
| + | |
| − | }
| + | |
| − | | + | |
| − | a.navbarItemHeader::after,
| + | |
| − | a.navbarItemContent::after {
| + | |
| − | content: "";
| + | |
| − | position: absolute;
| + | |
| − | width: 0;
| + | |
| − | height: 2px;
| + | |
| − | display: block;
| + | |
| − | margin-top: 5px;
| + | |
| − | right: 0;
| + | |
| − | background-color: #000;
| + | |
| − | -webkit-transition: width 0.3s ease-in-out 0s;
| + | |
| − | transition: width 0.3s ease-in-out 0s;
| + | |
| − | padding: 0;
| + | |
| − | margin: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | a.navbarItemHeader:link,
| + | |
| − | a.navbarItemContent:link {
| + | |
| − | color: black;
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | a.navbarItemHeader:visited,
| + | |
| − | a.navbarItemContent:visited {
| + | |
| − | color: black;
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | a.navbarItemHeader:active,
| + | |
| − | a.navbarItemContent:active {
| + | |
| − | color: black;
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | a.navbarItemHeader:hover,
| + | |
| − | a.navbarItemContent:hover {
| + | |
| − | color: black;
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | a.navbarItemHeader:hover::after,
| + | |
| − | a.navbarItemContent:hover::after {
| + | |
| − | width: 100%;
| + | |
| − | left: 0;
| + | |
| − | background: #000;
| + | |
| − | }
| + | |
| − | | + | |
| − | .clearBoth {
| + | |
| − | clear: both;
| + | |
| − | }
| + | |
| − |
| + | |
| − | /****** SQUEEZED MENU MOBILE STARTS ******/
| + | |
| − | | + | |
| − | #squeezedBtnWrapper {}
| + | |
| − | | + | |
| − | #squeezedNavBtn {
| + | |
| − | position: fixed;
| + | |
| − | top: 18px;
| + | |
| − | z-index: 3;
| + | |
| − | height: 8vh;
| + | |
| − | width: 80px;
| + | |
| − | right: 10%;
| + | |
| − | text-align: center;
| + | |
| − | font-size: 6vh;
| + | |
| − | color: whitesmoke;
| + | |
| − | }
| + | |
| − | | + | |
| − | #sqCollapse {
| + | |
| − | background-color: #397471;
| + | |
| − | height: 100%;
| + | |
| − | width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | #sqContainer {
| + | |
| − | background-color: #397471;
| + | |
| − | height: 100%;
| + | |
| − | width: 80%;
| + | |
| − | left: 10%;
| + | |
| − | }
| + | |
| − | | + | |
| − | #sqContainer a:link {
| + | |
| − | font-size: 40px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .sqzCollapsedMenu {
| + | |
| − | height: auto;
| + | |
| − | width: 100%;
| + | |
| − | background-color: #397471;
| + | |
| − | }
| + | |
| − |
| + | |
| − | /****** SQUEEZED MENU MOBILE ENDS ******/
| + | |
| − | | + | |
| − | /********************************************************* TOPBAR MENU ENDS *********************************************/
| + | |
| − | | + | |
| − | /********************************** CODE FOR HIDING OR SHOWING THE MENUS DEPENDING ON SCREEN SIZE ***********************/
| + | |
| − | | + | |
| − | @media screen and (min-width: 906px) {
| + | |
| − | #squeezedNavBtn {
| + | |
| − | display: none;
| + | |
| | } | | } |
| − | }
| |
| | | | |
| − | @media screen and (max-width: 906px) {
| + | 25% { |
| − | #navContainer {
| + | -webkit-transform: scale(0); |
| − | display: none; | + | opacity: 0.1; |
| | } | | } |
| − | }
| |
| − | </style>
| |
| − | </head>
| |
| | | | |
| − | <body>
| + | 50% { |
| − |
| + | -webkit-transform: scale(0.1); |
| − | <!--Mobile Jquery-->
| + | opacity: 0.3; |
| − | <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
| + | |
| − | <script type="text/javascript">
| + | |
| − |
| + | |
| − |
| + | |
| − | /*--- Squeezed Menu ---*/
| + | |
| − | var openSq = false;
| + | |
| − | var activeChild;
| + | |
| − |
| + | |
| − | $(document).on( "vclick", "#squeezedNavBtn", function() { // event vclick
| + | |
| − | if (openSq) { | + | |
| − | openSq = false; | + | |
| − | $('#squeezedNavBtn').css('color', 'whitesmoke');
| + | |
| − | $("#sqCollapse").stop().slideUp(400);
| + | |
| − | try {
| + | |
| − | activeChild.stop().slideUp(400);
| + | |
| − | } catch(error) {
| + | |
| − | console.error("No hay child");
| + | |
| − | }
| + | |
| − | console.log("si entra al slideup alv");
| + | |
| − | setTimeout(
| + | |
| − | function() {
| + | |
| − | if ($(".topBar").offset().top > 300) {
| + | |
| − | $('#navbar').css('background', '#2A8481');
| + | |
| − | } else {
| + | |
| − | $('#navbar').css('background', 'linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
| + | |
| − | }
| + | |
| − | }, 400);
| + | |
| − | } else {
| + | |
| − | openSq = true; | + | |
| − | setTimeout(
| + | |
| − | function() {
| + | |
| − | $('#squeezedNavBtn').css('color', 'white');
| + | |
| − | $("#sqCollapse").stop().slideDown(400);
| + | |
| − | console.log("si entra al slidedown alv");
| + | |
| − | }, 100);
| + | |
| − | $('#navbar').css('background', '#2A8481');
| + | |
| | } | | } |
| − |
| |
| − | });
| |
| − |
| |
| − | if (openSq) {
| |
| − | $('#navbar').css('background', '#2A8481');
| |
| − | }
| |
| − |
| |
| − | $(document).on( "vclick", ".sqzNavbarItemHeader", function() { // event vclick
| |
| − | console.log("Entro al else");
| |
| − | try {
| |
| − | activeChild.stop().slideUp(400);
| |
| − | } catch(error) {
| |
| − | console.error("No hay child");
| |
| − | }
| |
| − | activeChild = $(this).next(".sqzCollapsedMenu");
| |
| − | activeChild.stop().slideDown(400);
| |
| − | console.log("si jala navBarItemHeader alv");
| |
| − | });
| |
| | | | |
| − | $(window).scroll(colorNavbar);
| + | 75% { |
| − | $(document).ready(colorNavbar);
| + | -webkit-transform: scale(0.5); |
| − | </script>
| + | opacity: 0.5; |
| − | <!-- Navigation Bar-->
| + | |
| − | <!--------------------------------------------------------- TOPBAR MENU STARTS ------------------------------------------->
| + | |
| − | <div id="squeezedBtnWrapper">
| + | |
| − | <div id="squeezedNavBtn">
| + | |
| − | <div style="height: 5px"></div> | + | |
| − | <i class="fa fa-bars"></i>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div id="topBarWrapper">
| + | |
| − | <div class="topBar d-flex">
| + | |
| − | <div id="navbar">
| + | |
| − | <div id="navbarLogoWrapper">
| + | |
| − | <img id="navbarLogo" src="https://static.igem.org/mediawiki/2018/7/76/T--Tec-Monterrey--ECoding_Menu_Logo_Still_200.png" /><img id="navbarGif" src="https://static.igem.org/mediawiki/2018/c/c3/T--Tec-Monterrey--ECoding_Menu_Gif.gif" />
| + | |
| − | <h5 id="navbarLogoText">Home</h5>
| + | |
| − | </div>
| + | |
| − | <div id="navContainer">
| + | |
| − | <a href="#collapseProject">
| + | |
| − | <div class="navbar-linkContainer" id="linkContainer_Project">
| + | |
| − | <div class="navbar-linkContainerChild" id="linkContainer_ProjectChild">PROJECT</div>
| + | |
| − | </div>
| + | |
| − | </a>
| + | |
| − | <a href="#collapseParts">
| + | |
| − | <div class="navbar-linkContainer" id="linkContainer_Parts">
| + | |
| − | <div class="navbar-linkContainerChild" id="linkContainer_PartsChild">PARTS</div>
| + | |
| − | </div>
| + | |
| − | </a>
| + | |
| − | <a href="#collapsePeople">
| + | |
| − | <div class="navbar-linkContainer" id="linkContainer_People">
| + | |
| − | <div class="navbar-linkContainerChild" id="linkContainer_PeopleChild">PEOPLE</div>
| + | |
| − | </div>
| + | |
| − | </a>
| + | |
| − | <a href="#collapseHP">
| + | |
| − | <div class="navbar-linkContainer" id="linkContainer_HP">
| + | |
| − | <div class="navbar-linkContainerChild" id="linkContainer_HPChild">HUMAN PRACTICES</div>
| + | |
| − | </div>
| + | |
| − | </a>
| + | |
| − | <a href="#collapseModeling">
| + | |
| − | <div class="navbar-linkContainer" id="linkContainer_Modeling">
| + | |
| − | <div class="navbar-linkContainerChild" id="linkContainer_ModelingChild">MODELING</div>
| + | |
| − | </div>
| + | |
| − | </a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <!-- Project collapsed -->
| + | |
| − | <div class="collapse collapsedMenu" id="collapseProject">
| + | |
| − | <div class="containerCollapse">
| + | |
| − | <div class="height-support">
| + | |
| − | </div>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="" class="navbarItemHeader">Description</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">Overview</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">Introduction</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">The System</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">Applications</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">Prototype</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a class="navbarItemHeader">Design</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">Background</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">Module I</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">Module II</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">Module III</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">Module IV</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a class="navbarItemHeader">Experiments</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">Protocols</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">Safety</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a class="navbarItemHeader">Notebook</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">Calendar</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">Meetings</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a class="navbarItemHeader">Results</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">Overview</a>
| + | |
| − | <br>
| + | |
| − | <a class="navbarItemContent">Introduction</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <br class="clearBoth" />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <!-- Parts collapsed -->
| + | |
| − | <div class="collapse collapsedMenu" id="collapseParts">
| + | |
| − | <div class="containerCollapse">
| + | |
| − | <div class="height-support">
| + | |
| − | </div>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Basic Parts</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Overview</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Best Basic Part</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Composite Parts</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Overview</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Best Composite Part</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Parts Collection</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Best Parts</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Improved Parts</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Overview</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Part I</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Part II</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Part III</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Part IV</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Parts List</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <br class="clearBoth" />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <!-- People collapsed -->
| + | |
| − | <div class="collapse collapsedMenu" id="collapsePeople">
| + | |
| − | <div class="containerCollapse" id="collapsedMenu">
| + | |
| − | <div class="height-support">
| + | |
| − | </div>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Team</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Header</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Team Members</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Advisors</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Instructors</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Collaborations</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Collab 1</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Collab 2</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Collab 3</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Collab 4</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Attributions</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Design Team</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Programmers</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Investigators</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Ex-iGEMers</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Sponsors</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Principal</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Secondary</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <br class="clearBoth" />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <!-- HP collapsed -->
| + | |
| − | <div class="collapse collapsedMenu" id="collapseHP">
| + | |
| − | <div class="containerCollapse">
| + | |
| − | <div class="height-support">
| + | |
| − | </div>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Chiapas</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Overview</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Sampling</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Analysis</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Reuslts</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">References</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Integrated HP</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Gold HP</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">System Usage</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">References</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList" style="width: 25%;">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Public Engagement</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Milenio News</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Conexion Tec</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Genobiotec</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Curiosamente</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Tec Review</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList" style="width: 25%;">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Educational Engagement</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Seminar</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Congress</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Talks</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <br class="clearBoth" />
| + | |
| − | </div> | + | |
| − | </div>
| + | |
| − | <!-- Modeling collapsed -->
| + | |
| − | <div class="collapse collapsedMenu" id="collapseModeling">
| + | |
| − | <div class="containerCollapse">
| + | |
| − | <div class="height-support">
| + | |
| − | </div>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList" style="width: 25%;">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">Mathematical Model</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Overview</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Growth</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Enzimes</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="navbarItemHeader">InterLab</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Overview</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Protocols</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Absorbance</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" class="navbarItemContent">Fluorescence</a>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <br class="clearBoth" />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <!-- Squeezed collapsed -->
| + | |
| − | <div class="collapse collapsedMenu" id="sqCollapse">
| + | |
| − | <div class="containerCollapse" id="sqContainer">
| + | |
| − | <div class="height-support">
| + | |
| − | </div>
| + | |
| − | <ul class="navbar-nav mr-auto navbarList" style="height: 50%; width: 100%">
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="sqzNavbarItemHeader" style="color: white; font-family: 'Norwester', sans-serif; font-size: 35px">Project</a>
| + | |
| − | <div class="collapse sqzCollapsedMenu" id="collapseProjectSqz">
| + | |
| − | <div class="containerCollapse">
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Description</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Design</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Experiments</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Notebook</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Results</a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | </li>
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="sqzNavbarItemHeader" style="color: white; font-family: 'Norwester', sans-serif; font-size: 35px">Parts</a>
| + | |
| − | <div class="collapse sqzCollapsedMenu" id="collapseProjectSqz">
| + | |
| − | <div class="containerCollapse">
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Basic Parts</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Composite Parts</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Parts Collection</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Improved Parts</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Parts List</a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="sqzNavbarItemHeader" style="color: white; font-family: 'Norwester', sans-serif; font-size: 35px">People</a>
| + | |
| − | <div class="collapse sqzCollapsedMenu" id="collapseProjectSqz">
| + | |
| − | <div class="containerCollapse">
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Team</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Collaborations</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Attributions</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Sponsors</a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="sqzNavbarItemHeader" style="color: white; font-family: 'Norwester', sans-serif; font-size: 35px">Human Practices</a>
| + | |
| − | <div class="collapse sqzCollapsedMenu" id="collapseProjectSqz">
| + | |
| − | <div class="containerCollapse">
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Chiapas</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Integrated HP</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Public Engagement</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Educational Engagement</a>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | <li class="nav-item navbarItem">
| + | |
| − | <a href="#page-top" class="sqzNavbarItemHeader" style="color: white; font-family: 'Norwester', sans-serif; font-size: 35px">Modeling</a>
| + | |
| − | <div class="collapse sqzCollapsedMenu" id="collapseProjectSqz">
| + | |
| − | <div class="containerCollapse">
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">Mathematical Model</a>
| + | |
| − | <br>
| + | |
| − | <a href="#page-top" style="font-size: 20px; color: white">InterLab</a>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </li>
| + | |
| − | </ul>
| + | |
| − | <br class="clearBoth" />
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="mask"></div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <!--------------------------------------------------------- TOPBAR MENU ENDS --------------------------------------------->
| + | |
| − |
| + | |
| − |
| + | |
| − | <!------- sidebar dots navigation ---->
| + | |
| − | <link href='https://fonts.googleapis.com/css?family=Sintony:400,700' rel='stylesheet' type='text/css'>
| + | |
| − | | + | |
| − | <link rel="stylesheet" href="https://2018.igem.org/Team:Tec-Monterrey/T--Tec-Monterrey--reset?action=raw&ctype=text/css">
| + | |
| − | <!-- CSS reset -->
| + | |
| − | <link rel="stylesheet" href="https://2018.igem.org/Team:Tec-Monterrey/T--Tec-Monterrey--style?action=raw&ctype=text/css">
| + | |
| − | <!-- Resource style -->
| + | |
| − | <script src="https://2018.igem.org/Team:Tec-Monterrey/T--Tec-Monterrey--modernizr?action=raw&ctype=text/javascript"></script>
| + | |
| − | <!-- Modernizr -->
| + | |
| − |
| + | |
| − |
| + | |
| − | <!------------SideBar dots navigation -------->
| + | |
| − | | + | |
| − | <nav class="cd-vertical-nav">
| + | |
| − | <ul>
| + | |
| − | <li><a href="#project" class="active"><span class="label">Project</span></a></li>
| + | |
| − | <li><a href="#team"><span class="label">Team</span></a></li>
| + | |
| − | <li><a href="#HP"><span class="label">Human Practices</span></a></li>
| + | |
| − | <li><a href="#section4"><span class="label">Share</span></a></li>
| + | |
| − | </ul>
| + | |
| − | </nav>
| + | |
| − | <!-- .cd-vertical-nav -->
| + | |
| − |
| + | |
| − | <script src="https://2018.igem.org/Team:Tec-Monterrey/T--Tec-Monterrey--main?action=raw&ctype=text/javascript"></script>
| + | |
| − |
| + | |
| − | <script>
| + | |
| − | $(".cd-vertical-nav").hover(
| + | |
| − | function() {
| + | |
| − | $('.cd-vertical-nav a').css('font-size', '0 px'); | + | |
| − | },
| + | |
| − | function() {
| + | |
| − | $('.cd-vertical-nav a').css('font-size', '1 rem');
| + | |
| | } | | } |
| − | );
| |
| − | </script>
| |
| − | <!-- Resource jQuery -->
| |
| − |
| |
| − |
| |
| − | <!--Scroll to top button-->
| |
| − | <a class="scroll-to-top rounded" href="#page-top">
| |
| − | <i class="fa fa-angle-up"></i>
| |
| − | </a>
| |
| | | | |
| − | </body>
| + | 100% { |
| − | | + | -webkit-transform: scale(1); |
| − | </html>
| + | opacity: 0.0; |
| − | | + | |
| − | | + | |
| − | <!---MAIN--->
| + | |
| − | <html>
| + | |
| − | | + | |
| − | <head>
| + | |
| − |
| + | |
| − |
| + | |
| − | <style>
| + | |
| − | #globalWrapper {
| + | |
| − | background: rgb(248, 247, 246); | + | |
| − | }
| + | |
| − | | + | |
| − | #myImage {
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | right: 0;
| + | |
| − | max-width: 100%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .masthead {
| + | |
| − | min-height: 30rem;
| + | |
| − | position: relative;
| + | |
| − | width: 100%;
| + | |
| − | padding-top: 8rem;
| + | |
| − | padding-bottom: 8rem;
| + | |
| − | background: rgb(248, 247, 246);
| + | |
| − | }
| + | |
| − | | + | |
| − | .masthead h1 {
| + | |
| − | font-size: 4rem;
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | @media (min-width: 992px) {
| + | |
| − | .masthead {
| + | |
| − | height: 100vh;
| + | |
| − | }
| + | |
| − | .masthead h1 {
| + | |
| − | font-size: 5.5rem;
| + | |
| | } | | } |
| | } | | } |
| − |
| |
| − | #project {
| |
| − | -webkit-transition: height 4s;
| |
| − | -moz-transition: height 4s;
| |
| − | -ms-transition: height 4s;
| |
| − | -o-transition: height 4s;
| |
| − | transition: height 4s;
| |
| − | height: auto;
| |
| − | background-image: url('/img/logoOficialCirculos.png');
| |
| − | background-repeat: no-repeat;
| |
| − | background-position: center;
| |
| − | background-size: contain;
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | #team {
| |
| − | text-align: center;
| |
| − | }
| |
| − |
| |
| − | #myTable {
| |
| − | width: 95%;
| |
| − | margin: 0px auto !important;
| |
| − | padding: 10px;
| |
| − | border: 2px solid rgb(1, 99, 60) !important;
| |
| − | border-collapse: collapse;
| |
| − | vertical-align: middle !important;
| |
| − | table-layout: fixed;
| |
| − | }
| |
| − |
| |
| − | #myTable td {
| |
| − | width: 33%;
| |
| − | border: 2px solid rgb(1, 99, 60) !important;
| |
| − | border-collapse: collapse;
| |
| − | text-align: center;
| |
| − | padding: 5px;
| |
| − | }
| |
| − |
| |
| − | #myTable p {
| |
| − | text-align: center;
| |
| − | font-size: 14px;
| |
| − | }
| |
| − |
| |
| − | #HP {
| |
| − | background: rgb(248, 247, 246);
| |
| − | }
| |
| − |
| |
| − | .service-icon {
| |
| − | background-color: #fff;
| |
| − | color: #1D809F;
| |
| − | height: 7rem;
| |
| − | width: 7rem;
| |
| − | display: block;
| |
| − | line-height: 7.5rem;
| |
| − | font-size: 2.25rem;
| |
| − | box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.1);
| |
| − | }
| |
| − |
| |
| − | .callout {
| |
| − | padding: 15rem 0;
| |
| − | background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%), url("../img/bg-callout.jpg");
| |
| − | background-position: center center;
| |
| − | background-repeat: no-repeat;
| |
| − | background-size: cover;
| |
| − | }
| |
| − |
| |
| − | .callout h2 {
| |
| − | font-size: 3.5rem;
| |
| − | font-weight: 700;
| |
| − | display: block;
| |
| − | max-width: 30rem;
| |
| − | }
| |
| − |
| |
| − | .portfolio-item {
| |
| − | display: block;
| |
| − | position: relative;
| |
| − | overflow: hidden;
| |
| − | max-width: 530px;
| |
| − | margin: auto auto 1rem;
| |
| − | }
| |
| − |
| |
| − | .portfolio-item .caption {
| |
| − | display: flex;
| |
| − | height: 100%;
| |
| − | width: 100%;
| |
| − | background-color: rgba(33, 37, 41, 0.2);
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | bottom: 0;
| |
| − | z-index: 1;
| |
| − | }
| |
| − |
| |
| − | .portfolio-item .caption .caption-content {
| |
| − | color: #fff;
| |
| − | margin: auto 2rem 2rem;
| |
| − | }
| |
| − |
| |
| − | .portfolio-item .caption .caption-content h2 {
| |
| − | font-size: 0.8rem;
| |
| − | text-transform: uppercase;
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| | </style> | | </style> |
| − | </head>
| |
| − | <body id="page-top">
| |
| − |
| |
| − | <!-- Header -->
| |
| − | <header class="masthead" style="border-bottom: 20px solid #2f6361;">
| |
| − | <img id="myImage" src="https://static.igem.org/mediawiki/2018/8/82/T--Tec-Monterrey--Tec_ECoding_background.jpeg">
| |
| − | <div class="container text-center my-auto" style="position: relative; top: 60%; left: 9%; max-width: 50%;">
| |
| − | <a class="btn btn-primary btn-xl" href="#project">Learn about the project</a>
| |
| − | </div>
| |
| − | <div class="overlay"></div>
| |
| − | </header>
| |
| − |
| |
| − | <!-- Project -->
| |
| − | <section id="project" style="background: #d3edf2; text-align: center;">
| |
| − | <div style="width: 80%; margin: auto; text-align: justify; background: #f2fafc;">
| |
| − | <div style="width: 96%; margin: auto; text-align: justify; background: #fdfdfd; padding-top: 10px;">
| |
| − | <div style="border-left: 5px solid #2f6361; padding: 20px 0px 20px 20px; margin: 0px 0px 0px 10px;">
| |
| − | <div class="header-title" style="color: #3582d2;">
| |
| − | E-Coding
| |
| − | </div>
| |
| − | <div class="header-subtitle" style="color: #5da565;">
| |
| − | Storing the world one base at a time
| |
| − | </div>
| |
| − | </div>
| |
| − | <div style="border-top: 5px solid #397471; border-right: 5px solid #2a8481; padding: 20px 20px 20px 20px; margin: 0px 10px 0px 10px; color: #2f6361;">
| |
| − | The research for storing vast amounts of information in smaller devices has been an attention seeking topic in multidisciplinary areas of knowledge all around the world.
| |
| − | <br>
| |
| − | <br>
| |
| − | <q>DNA is an attractive target for information storage because of its capacity for high-density information encoding, longevity under easily achieved conditions, and proven track record as an information bearer</q> <br> Baum, 1995
| |
| − | </div>
| |
| − | <div style="padding: 0px 20px 20px 20px; margin: 0px 10px 0px 10px; color: #2f6361;">
| |
| − | Nevertheless, this potential has been limited due to the lack of efficient editing tools. CRISPR-Cas has become popular as an editing tool for its high specificity, low cost, and easy handling, compared to other editing techniques. In our work, we use Cas1-Cas2, proteins in charge of new protospacer adquisition in the CRISPR array. Predesigned sequences (-70pb aprox) in the form of ssDNA are produced in E.coli by induction of a promoter, and adquired by the complex Cas1-Cas2 to be integrated into the array. To produce this oligonucleotides, we use the retrotranscriptase EC86. A subsequent sequencing of the array will confirm the integration of the oligos in the CRISPR locus. We measure the integration rate in terms of stimuli intensity, and time. We hypothise that this system can store ordered data in vivo of many stimuli, just by changing the promoter.
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </section>
| |
| − |
| |
| − | <!-- Team-->
| |
| − | <section id="team" style="border-bottom: 20px solid #2f6361; background:#d3edf2;">
| |
| − | <div style="width: 80%; margin: 0 auto; text-align: justify; background: #f2fafc;">
| |
| − | <div style="width: 96%; margin: 0 auto; text-align: justify; background: #fdfdfd; padding-top: 20px; padding-bottom: 20px;">
| |
| − | <div>
| |
| − | <table align="center" id="myTable">
| |
| − | <tr>
| |
| − | <th colspan="3" style="text-align:center;">
| |
| − | <h5>Team Members</h5>
| |
| − | </th>
| |
| − | </tr>
| |
| − | <tr>
| |
| − | <td>
| |
| − | <h6>Esteban de la Peña <a href="https://www.linkedin.com/in/esteban-de-la-pe%C3%B1a-th%C3%A9venet/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
| |
| − | <p>In charge of making the wiki</p>
| |
| − | </td>
| |
| − | <td>
| |
| − | <h6>Alan Ávila <a href="https://www.linkedin.com/in/alanavilarmz/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
| |
| − | <p>Team Management/Wet Lab</p>
| |
| − | </td>
| |
| − | <td>
| |
| − | <h6>Adrián Hernández <a href="https://www.linkedin.com/in/adri%C3%A1n-hern%C3%A1ndez-mendoza-0184ba14b/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
| |
| − | <p>Interlab managment & Dry Lab</p>
| |
| − | </td>
| |
| − | </tr>
| |
| − | <tr>
| |
| − | <td>
| |
| − | <h6>Sofia Lara <a href="https://www.linkedin.com/in/sof%C3%ADa-lara-507773123" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
| |
| − | <p>In charge of Human Practices</p>
| |
| − | </td>
| |
| − | <td>
| |
| − | <h6>José Arnulfo Juárez Figueroa <a href="https://www.linkedin.com/in/jos%C3%A9-arnulfo-ju%C3%A1rez-figueroa-1478a1159/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
| |
| − | <p>Team Management</p>
| |
| − | </td>
| |
| − | <td>
| |
| − | <h6>Ana E. Lasso de la Vega <a href="https://www.linkedin.com/in/ana-elizabeth-ldlv/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
| |
| − | <p>Team Management</p>
| |
| − | </td>
| |
| − | </tr>
| |
| − | <tr>
| |
| − | <td>
| |
| − | <h6>Miranda Iriarte <a href="https://www.linkedin.com/in/mirandairiarte/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
| |
| − | <p>Congress of Sciences iGEM</p>
| |
| − | </td>
| |
| − | <td>
| |
| − | <h6>Valeria Fuentes</h6>
| |
| − | <p>Congress of Sciences iGEM</p>
| |
| − | </td>
| |
| − | <td>
| |
| − | <h6>Juan Fernández <a href="https://www.linkedin.com/in/juanfernandezdelagarza/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
| |
| − | <p>Mathematical Model</p>
| |
| − | </td>
| |
| − | </tr>
| |
| − | <tr>
| |
| − | <td>
| |
| − | <h6>Norma Garza <a href="https://www.linkedin.com/in/norma-garza-893065126/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
| |
| − | <p>Interlab managment/Drylab</p>
| |
| − | </td>
| |
| − | <td>
| |
| − | <h6>Miriam Salas Ramírez <a href="https://www.linkedin.com/in/miriamsalas" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
| |
| − | <p>Congress of Sciences iGEM</p>
| |
| − | </td>
| |
| − | <td>
| |
| − | <h6>Victor Robledo</h6>
| |
| − | <p>Wetlab/Drylab</p>
| |
| − | </td>
| |
| − | </tr>
| |
| − | <tr>
| |
| − | <td>
| |
| − | <h6>Carlos Javier Cordero <a href="https://www.linkedin.com/in/carlos-javier-cordero-oropeza-386593a9/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
| |
| − | <p>Drylab</p>
| |
| − | </td>
| |
| − | <td>
| |
| − | <h6>Nora Torres</h6>
| |
| − | <p>Team Management</p>
| |
| − | </td>
| |
| − | <td>
| |
| − | <h6>Roberto Vásquez <a href="https://www.linkedin.com/in/robertovzz/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
| |
| − | <p>Mathematical Model</p>
| |
| − | </td>
| |
| − | </tr>
| |
| − | <tr>
| |
| − | <td>
| |
| − | <h6>Samantha Peña</h6>
| |
| − | <p>Human Practices, and design</p>
| |
| − | </td>
| |
| − | <td>
| |
| − | <h6>Andrés Sánchez <a href="http://linkedin.com/in/andresbsanchez" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
| |
| − | <p>Mathematical Model</p>
| |
| − | </td>
| |
| − | <td>
| |
| − | <h6>Diego Valadez</h6>
| |
| − | <p>Wiki/Dry Lab</p>
| |
| − | </td>
| |
| − | </tr>
| |
| − | <tr>
| |
| − | <td>
| |
| − | <h6>Jesús Héctor López <a href="https://www.linkedin.com/in/jesushectorlopezgrajeda" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
| |
| − | <p>Dry Lab</p>
| |
| − | </td>
| |
| − | <td>
| |
| − | <h6>Adriana Lizeth Rubio <a href="https://mx.linkedin.com/in/adriana-lizeth-rubio-aguirre-56b10a15a" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
| |
| − | <p>Mathematical Model</p>
| |
| − | </td>
| |
| − | <td>
| |
| − | <h6>María Eugenia Reyna <a href="https://www.linkedin.com/in/mar%C3%ADa-eugenia-reyna-fern%C3%A1ndez-775732167/" target="_blank"><i class="fa fa-linkedin-square"></i></a></h6>
| |
| − | <p>Wetlab</p>
| |
| − | </td>
| |
| − | </tr>
| |
| − | </table>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </section>
| |
| − |
| |
| − | <!-- Human Practices -->
| |
| − | <section id="HP" style="text-align: center;">
| |
| − | <div style="width: 80%; display: inline-block; margin: 20px auto 10px auto;">
| |
| − | <div style="width: 40%; float: left; padding-right: 20px;">
| |
| − | <img src="https://static.igem.org/mediawiki/2018/5/53/T--Tec-Monterrey--Imagen_Memo_Pensante.jpeg">
| |
| − | </div>
| |
| − | <div style="width: 60%; float: right; padding-top: 60px">
| |
| − | <div class="header-title" style="color: #3582d2;">
| |
| − | Human Practices
| |
| − | </div>
| |
| − | <div class="header-subtitle" style="color: #5da565;">
| |
| − | Pollutants in Chiapas and Mexico
| |
| − | </div>
| |
| − | <p style="font-size: 18px; color: #2f6361;">Our project has many applications, but we decided to face a critical environmental problem in one southern state of Mexico: Chiapas. Chiapas is a beautiful state with megadiverse ecosystems, but it also has a severe water pollution problem that affects many communities close to the natural and polluted water sources. With the help of Cecropia and CONANP we will obtain water samples from the polluted sources and analyze them with several techniques in order to make a valuable overview.</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | </section>
| |
| − | </body>
| |
| − |
| |
| − | </html>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!--{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}} -->
| |
| − | <html>
| |
| − |
| |
| − | <body>
| |
| − |
| |
| − |
| |
| − | <!-- Footer -->
| |
| − | <footer class="footer text-center">
| |
| − | <div class="container row" style="margin: 0px auto;">
| |
| − | <div class="col-md-3">
| |
| − | <h4 class="text-muted">Follow Us</h4>
| |
| − | <ul class="list-inline mb-5">
| |
| − | <li class="list-inline-item">
| |
| − | <a href="https://www.facebook.com/IgemTecMty" target="_blank"><i class="fa fa-facebook-square social-link" style="font-size: 100px;"></i></a>
| |
| − | </li>
| |
| − | <li class="list-inline-item">
| |
| − | <a href="https://twitter.com/igemtecmty" target="_blank"><i class="fa fa-twitter-square social-link" style="font-size: 100px;"></i></a>
| |
| − | </li>
| |
| − | <li class="list-inline-item">
| |
| − | <a href="mailto:igemtecmonterrey@gmail.com"><i class="fa fa-envelope-square social-link" style="font-size: 100px;"></i></a>
| |
| − | </li>
| |
| − | <li class="list-inline-item">
| |
| − | <a href="https://www.instagram.com/igemtecmty/" target="_blank"><i class="fa fa-instagram social-link" style="font-size: 100px;"></i></a>
| |
| − | </li>
| |
| − | <li style="padding-left:20px;">
| |
| − | <p class="text-muted" style="margin-bottom: 0;"><i class="fa fa-map-pin"></i> Av. Eugenio Garza Sada 2501</p>
| |
| − | <p class="text-muted">64849 Monterrey, Mexico</p>
| |
| − | </li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | <div class="col-md-6">
| |
| − | <h4 class="text-muted">Sponsors</h4>
| |
| − | <ul class="list-inline">
| |
| − | <li class="list-inline-item">
| |
| − | <p class="text-muted">Waiting for a Miracle</p>
| |
| − | </li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | <div class="col-md-3">
| |
| − | <h4 class="text-muted">Quote</h4>
| |
| − | <p class="text-muted">“DNA is an attractive target for information storage because of its capacity for high-density information encoding, longevity under easily achieved conditions, and proven track record as an information bearer.”</p>
| |
| − | <p class="text-muted">Baum, 1995</p>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div>
| |
| − | <p id="footerCopyright" class="text-muted small mb-0">Copyright © 2018</p>
| |
| − | </div>
| |
| − | </footer>
| |
| − |
| |
| − | <!-- Optional JavaScript -->
| |
| − | <!-- jQuery first, then Popper.js, then Bootstrap JS -->
| |
| − | <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
| |
| − | <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
| |
| − | <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
| |
| − |
| |
| − | <!-- Script controls collapsedMenus -->
| |
| | <script> | | <script> |
| − | /*------------MENU STARTS-----------*/ | + | /** |
| | + | * This example uses pulsating circles CSS by Kevin Urrutia |
| | + | * http://kevinurrutia.tumblr.com/post/16411271583/creating-a-css3-pulsating-circle |
| | + | */ |
| | | | |
| − | //Menu collapsing
| + | var map = AmCharts.makeChart( "chartdiv", { |
| | + | "type": "map", |
| | + | "theme": "light", |
| | + | "projection": "miller", |
| | | | |
| − | $("#linkContainer_Project").hover(
| + | "imagesSettings": { |
| − | function() {
| + | "rollOverColor": "#089282", |
| − | $('#navbar').css('background', '#2A8481');
| + | "rollOverScale": 3, |
| − | $("#linkContainer_Project").addClass("active");
| + | "selectedScale": 3, |
| − | $("#linkContainer_ProjectChild").addClass("activeChild");
| + | "selectedColor": "#089282", |
| − | openMenu('#collapseProject', '#b0e0e4');
| + | "color": "#13564e" |
| | + | }, |
| | | | |
| − | },
| + | "areasSettings": { |
| − | function() {
| + | "unlistedAreasColor": "#15A892" |
| − | $("#linkContainer_Project").removeClass("active");
| + | }, |
| − | $("#linkContainer_ProjectChild").removeClass("activeChild");
| + | |
| − | closeMenu('#collapseProject');
| + | |
| − | colorNavbar();
| + | |
| | | | |
| − | $('#collapseProject').mouseenter(function() {
| + | "dataProvider": { |
| − | $('#navbar').css('background', '#2A8481');
| + | "map": "worldLow", |
| − | $("#linkContainer_Project").addClass("active");
| + | "images": [ { |
| − | $("#linkContainer_ProjectChild").addClass("activeChild");
| + | "zoomLevel": 5, |
| − | openMenu('#collapseProject', '#b0e0e4');
| + | "scale": 0.5, |
| − | });
| + | "title": "Brussels", |
| − | $('#collapseProject').mouseleave(function() {
| + | "latitude": 50.8371, |
| − | colorNavbar();
| + | "longitude": 4.3676 |
| − | $("#linkContainer_Project").removeClass("active");
| + | }, { |
| − | $("#linkContainer_ProjectChild").removeClass("activeChild");
| + | "zoomLevel": 5, |
| − | closeMenu('#collapseProject');
| + | "scale": 0.5, |
| − | });
| + | "title": "Copenhagen", |
| − | }
| + | "latitude": 55.6763, |
| − | );
| + | "longitude": 12.5681 |
| | + | }, { |
| | + | "zoomLevel": 5, |
| | + | "scale": 0.5, |
| | + | "title": "Paris", |
| | + | "latitude": 48.8567, |
| | + | "longitude": 2.3510 |
| | + | }, { |
| | + | "zoomLevel": 5, |
| | + | "scale": 0.5, |
| | + | "title": "Reykjavik", |
| | + | "latitude": 64.1353, |
| | + | "longitude": -21.8952 |
| | + | }, { |
| | + | "zoomLevel": 5, |
| | + | "scale": 0.5, |
| | + | "title": "Moscow", |
| | + | "latitude": 55.7558, |
| | + | "longitude": 37.6176 |
| | + | }, { |
| | + | "zoomLevel": 5, |
| | + | "scale": 0.5, |
| | + | "title": "Madrid", |
| | + | "latitude": 40.4167, |
| | + | "longitude": -3.7033 |
| | + | }, { |
| | + | "zoomLevel": 5, |
| | + | "scale": 0.5, |
| | + | "title": "London", |
| | + | "latitude": 51.5002, |
| | + | "longitude": -0.1262, |
| | + | "url": "http://www.google.co.uk" |
| | + | }, { |
| | + | "zoomLevel": 5, |
| | + | "scale": 0.5, |
| | + | "title": "Peking", |
| | + | "latitude": 39.9056, |
| | + | "longitude": 116.3958 |
| | + | }, { |
| | + | "zoomLevel": 5, |
| | + | "scale": 0.5, |
| | + | "title": "New Delhi", |
| | + | "latitude": 28.6353, |
| | + | "longitude": 77.2250 |
| | + | }, { |
| | + | "zoomLevel": 5, |
| | + | "scale": 0.5, |
| | + | "title": "Tokyo", |
| | + | "latitude": 35.6785, |
| | + | "longitude": 139.6823, |
| | + | "url": "http://www.google.co.jp" |
| | + | }, { |
| | + | "zoomLevel": 5, |
| | + | "scale": 0.5, |
| | + | "title": "Ankara", |
| | + | "latitude": 39.9439, |
| | + | "longitude": 32.8560 |
| | + | }, { |
| | + | "zoomLevel": 5, |
| | + | "scale": 0.5, |
| | + | "title": "Buenos Aires", |
| | + | "latitude": -34.6118, |
| | + | "longitude": -58.4173 |
| | + | }, { |
| | + | "zoomLevel": 5, |
| | + | "scale": 0.5, |
| | + | "title": "Brasilia", |
| | + | "latitude": -15.7801, |
| | + | "longitude": -47.9292 |
| | + | }, { |
| | + | "zoomLevel": 5, |
| | + | "scale": 0.5, |
| | + | "title": "Ottawa", |
| | + | "latitude": 45.4235, |
| | + | "longitude": -75.6979 |
| | + | }, { |
| | + | "zoomLevel": 5, |
| | + | "scale": 0.5, |
| | + | "title": "Washington", |
| | + | "latitude": 38.8921, |
| | + | "longitude": -77.0241 |
| | + | }, { |
| | + | "zoomLevel": 5, |
| | + | "scale": 0.5, |
| | + | "title": "Kinshasa", |
| | + | "latitude": -4.3369, |
| | + | "longitude": 15.3271 |
| | + | }, { |
| | + | "zoomLevel": 5, |
| | + | "scale": 0.5, |
| | + | "title": "Cairo", |
| | + | "latitude": 30.0571, |
| | + | "longitude": 31.2272 |
| | + | }, { |
| | + | "zoomLevel": 5, |
| | + | "scale": 0.5, |
| | + | "title": "Pretoria", |
| | + | "latitude": -25.7463, |
| | + | "longitude": 28.1876 |
| | + | } ] |
| | + | } |
| | + | } ); |
| | | | |
| − | $("#linkContainer_Parts").hover(
| + | // add events to recalculate map position when the map is moved or zoomed |
| − | function() {
| + | map.addListener( "positionChanged", updateCustomMarkers ); |
| − | $('#navbar').css('background', '#2A8481');
| + | |
| − | $("#linkContainer_Parts").addClass("active");
| + | |
| − | $("#linkContainer_PartsChild").addClass("activeChild");
| + | |
| − | openMenu('#collapseParts', '#bae4e8');
| + | |
| − | },
| + | |
| − | function() {
| + | |
| − | colorNavbar();
| + | |
| − | $("#linkContainer_Parts").removeClass("active");
| + | |
| − | $("#linkContainer_PartsChild").removeClass("activeChild");
| + | |
| − | closeMenu('#collapseParts');
| + | |
| | | | |
| − | $('#collapseParts').mouseenter(function() {
| + | // this function will take current images on the map and create HTML elements for them |
| − | $('#navbar').css('background', '#2A8481');
| + | function updateCustomMarkers( event ) { |
| − | $("#linkContainer_Parts").addClass("active");
| + | // get map object |
| − | $("#linkContainer_PartsChild").addClass("activeChild");
| + | var map = event.chart; |
| − | openMenu('#collapseParts', '#bae4e8');
| + | |
| − | });
| + | |
| − | $('#collapseParts').mouseleave(function() {
| + | |
| − | colorNavbar();
| + | |
| − | $("#linkContainer_Parts").removeClass("active");
| + | |
| − | $("#linkContainer_PartsChild").removeClass("activeChild");
| + | |
| − | closeMenu('#collapseParts');
| + | |
| − | });
| + | |
| − | }
| + | |
| − | );
| + | |
| | | | |
| − | $("#linkContainer_People").hover(
| + | // go through all of the images |
| − | function() {
| + | for ( var x in map.dataProvider.images ) { |
| − | $('#navbar').css('background', '#2A8481');
| + | // get MapImage object |
| − | $("#linkContainer_People").addClass("active");
| + | var image = map.dataProvider.images[ x ]; |
| − | $("#linkContainer_PeopleChild").addClass("activeChild");
| + | |
| − | openMenu('#collapsePeople', '#caeaed');
| + | |
| − | },
| + | |
| − | function() {
| + | |
| − | colorNavbar();
| + | |
| − | $("#linkContainer_People").removeClass("active");
| + | |
| − | $("#linkContainer_PeopleChild").removeClass("activeChild");
| + | |
| − | closeMenu('#collapsePeople');
| + | |
| | | | |
| − | $('#collapsePeople').mouseenter(function() {
| + | // check if it has corresponding HTML element |
| − | $('#navbar').css('background', '#2A8481');
| + | if ( 'undefined' == typeof image.externalElement ) |
| − | $("#linkContainer_People").addClass("active");
| + | image.externalElement = createCustomMarker( image ); |
| − | $("#linkContainer_PeopleChild").addClass("activeChild");
| + | |
| − | openMenu('#collapsePeople', '#caeaed');
| + | |
| − | });
| + | |
| − | $('#collapsePeople').mouseleave(function() {
| + | |
| − | colorNavbar();
| + | |
| − | $("#linkContainer_People").removeClass("active");
| + | |
| − | $("#linkContainer_PeopleChild").removeClass("activeChild");
| + | |
| − | closeMenu('#collapsePeople');
| + | |
| − | });
| + | |
| − | }
| + | |
| − | );
| + | |
| | | | |
| − | $("#linkContainer_HP").hover(
| + | // reposition the element accoridng to coordinates |
| − | function() {
| + | var xy = map.coordinatesToStageXY( image.longitude, image.latitude ); |
| − | $('#navbar').css('background', '#2A8481');
| + | image.externalElement.style.top = xy.y + 'px'; |
| − | $("#linkContainer_HP").addClass("active");
| + | image.externalElement.style.left = xy.x + 'px'; |
| − | $("#linkContainer_HPChild").addClass("activeChild");
| + | } |
| − | openMenu('#collapseHP', '#d8f0f2');
| + | } |
| − | },
| + | |
| − | function() {
| + | |
| − | colorNavbar();
| + | |
| − | $("#linkContainer_HP").removeClass("active");
| + | |
| − | $("#linkContainer_HPChild").removeClass("activeChild");
| + | |
| − | closeMenu('#collapseHP');
| + | |
| | | | |
| − | $('#collapseHP').mouseenter(function() {
| + | // this function creates and returns a new marker element |
| − | $('#navbar').css('background', '#2A8481');
| + | function createCustomMarker( image ) { |
| − | $("#linkContainer_HP").addClass("active");
| + | // create holder |
| − | $("#linkContainer_HPChild").addClass("activeChild");
| + | var holder = document.createElement( 'div' ); |
| − | openMenu('#collapseHP', '#d8f0f2');
| + | holder.className = 'map-marker'; |
| − | });
| + | holder.title = image.title; |
| − | $('#collapseHP').mouseleave(function() {
| + | holder.style.position = 'absolute'; |
| − | colorNavbar();
| + | |
| − | $("#linkContainer_HP").removeClass("active");
| + | |
| − | $("#linkContainer_HPChild").removeClass("activeChild");
| + | |
| − | closeMenu('#collapseHP');
| + | |
| − | });
| + | |
| − | }
| + | |
| − | );
| + | |
| | | | |
| − | $("#linkContainer_Modeling").hover(
| + | // maybe add a link to it? |
| − | function() {
| + | if ( undefined != image.url ) { |
| − | $('#navbar').css('background', '#2A8481');
| + | holder.onclick = function() { |
| − | $("#linkContainer_Modeling").addClass("active");
| + | window.location.href = image.url; |
| − | $("#linkContainer_ModelingChild").addClass("activeChild");
| + | }; |
| − | openMenu('#collapseModeling', '#e7f6f7');
| + | holder.className += ' map-clickable'; |
| − | },
| + | } |
| − | function() {
| + | |
| − | colorNavbar();
| + | |
| − | $("#linkContainer_Modeling").removeClass("active");
| + | |
| − | $("#linkContainer_ModelingChild").removeClass("activeChild");
| + | |
| − | closeMenu('#collapseModeling');
| + | |
| | | | |
| − | $('#collapseModeling').mouseenter(function() {
| + | // create dot |
| − | $('#navbar').css('background', '#2A8481');
| + | var dot = document.createElement( 'div' ); |
| − | $("#linkContainer_Modeling").addClass("active");
| + | dot.className = 'dot'; |
| − | $("#linkContainer_ModelingChild").addClass("activeChild");
| + | holder.appendChild( dot ); |
| − | openMenu('#collapseModeling', '#e7f6f7');
| + | |
| − | });
| + | |
| − | $('#collapseModeling').mouseleave(function() {
| + | |
| − | colorNavbar();
| + | |
| − | $("#linkContainer_Modeling").removeClass("active");
| + | |
| − | $("#linkContainer_ModelingChild").removeClass("activeChild");
| + | |
| − | closeMenu('#collapseModeling');
| + | |
| − | });
| + | |
| − | }
| + | |
| − | );
| + | |
| | | | |
| − | $("#navbarLogoWrapper").click(function() {
| + | // create pulse |
| − | window.location.href = "https://2018.igem.org/Team:Tec-Monterrey";
| + | var pulse = document.createElement( 'div' ); |
| − | });
| + | pulse.className = 'pulse'; |
| | + | holder.appendChild( pulse ); |
| | | | |
| − | function openMenu(collapseName, collapseColor) {
| + | // append the marker to the map container |
| − | $(".topBar").css({
| + | image.chart.chartDiv.appendChild( holder ); |
| − | 'height': '100%'
| + | |
| − | });
| + | |
| − | $(".mask").css({
| + | |
| − | 'background': 'rgba(0,123,255,0.5)',
| + | |
| − | 'height': '100%'
| + | |
| − | });
| + | |
| − | $(collapseName).css({
| + | |
| − | 'background-color': collapseColor
| + | |
| − | });
| + | |
| − | if ($(".topBar").offset().top < 300) {
| + | |
| − | $(collapseName).stop().fadeIn(300);
| + | |
| − | } else {
| + | |
| − | $(collapseName).stop().slideDown(400);
| + | |
| − | }
| + | |
| − | }
| + | |
| | | | |
| − | function colorNavbar() {
| + | return holder; |
| − | if ($(".topBar").offset().top > 300) {
| + | } |
| − | $('#navbar').css('background', '#2A8481');
| + | |
| − | } else {
| + | |
| − | $('#navbar').css('background', 'linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(255,255,255,0) 100%)');
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | function closeMenu(collapseName) {
| + | |
| − | $(".topBar").css({
| + | |
| − | 'height': '8vh'
| + | |
| − | });
| + | |
| − | $(".mask").css({
| + | |
| − | 'background': 'rgba(0,0,0,0)',
| + | |
| − | 'height': '8vh'
| + | |
| − | });
| + | |
| − | if ($(".topBar").offset().top < 300) {
| + | |
| − | $(collapseName).stop().fadeOut(200);
| + | |
| − | } else {
| + | |
| − | $(collapseName).stop().slideUp(300);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | $(window).scroll(colorNavbar);
| + | |
| − | $(document).ready(colorNavbar);
| + | |
| − |
| + | |
| − | /*------------MENU ENDS-----------*/
| + | |
| | </script> | | </script> |
| | + | <script src="https://www.amcharts.com/lib/3/ammap.js"></script> |
| | + | <script src="https://www.amcharts.com/lib/3/maps/js/worldLow.js"></script> |
| | + | <script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> |
| | + | <link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" /> |
| | + | <script src="https://www.amcharts.com/lib/3/themes/light.js"></script> |
| | + | </head> |
| | | | |
| | + | <body> |
| | + | <div id="chartdiv"></div> |
| | | | |
| − | <!-- Custom JavaScript
| |
| − | <script src="https://2018.igem.org/Team:Tec-Monterrey/Javascript/StylishPortfolio?action=raw&ctype=text/javascript" type="text/javascript"></script>
| |
| − | <script src="https://2018.igem.org/Team:Tec-Monterrey/Javascript/jqueryeasingmin?action=raw&ctype=text/javascript" type="text/javascript"></script>
| |
| − | -->
| |
| | </body> | | </body> |
| | | | |
| | </html> | | </html> |
