Difference between revisions of "Team:Hawaii"

Line 1: Line 1:
 +
  
 
<!-- HEADER -->
 
<!-- HEADER -->
Line 29: Line 30:
  
 
<style type="text/css">
 
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Cabin:700|Cabin+Condensed|Raleway|Roboto+Condensed|Open+Sans+Condensed:300|Work+Sans|Tajawal|Fjalla+One|Noto+Sans|EB+Garamond|Oswald');
+
  * {
body {
+
      margin:0;
  margin: 0px;
+
      padding:0;
  padding: 0px;
+
      text-decoration:none
  color: rgb(40,40,40);
+
  }
  width: calc(100vw);
+
}
+
h1 {
+
  font-size: 30px;
+
  font-family: 'Cabin', sans-serif;
+
}
+
h2 {
+
  font-size: 26px;
+
  font-family: 'Roboto Condensed', sans-serif;
+
}
+
h3 {
+
  font-size: 22px;
+
  font-family: 'Roboto Condensed', sans-serif;
+
  letter-spacing: 1px;
+
}
+
h4 {
+
  font-size: 20px;
+
  font-family: 'Cabin', sans-serif;
+
  letter-spacing: 2px;
+
}
+
h5 {
+
  font-size: 18px;
+
  font-family: 'Raleway', sans-serif;
+
}
+
p {
+
  font-size: 20px;
+
  font-family: 'EB Garamond', sans-serif;
+
  display: flex;
+
  align-items: center;
+
}
+
li {
+
  list-style-type: none;
+
  padding-right: 30px;
+
}
+
a {
+
  text-decoration: none;
+
  color: inherit;
+
  font-size: 18px;
+
}
+
.big-section {
+
  margin-bottom: 100px;
+
}
+
/* Accessory styles. */
+
/* #triangle {
+
  width: 0;
+
  height: 0;
+
  border-bottom: 1000px solid rgb(30,30,40);
+
  border-right: calc(100vw) solid transparent;
+
  position: absolute;
+
  left: 0px;
+
  z-index: 1;
+
} */
+
/* Nav styles. */
+
#top-nav {
+
  width: 100%;
+
  height: 100px;
+
  display: flex;
+
  justify-content: center;
+
  align-items: center;
+
  letter-spacing: 1px;
+
}
+
#top-nav ul {
+
  width: 1100px;
+
  padding: 0px;
+
  display: flex;
+
  justify-content: space-around;
+
  align-items: center;
+
  flex-direction: row;
+
  z-index: 1;
+
}
+
.dropdown {
+
  position: relative;
+
}
+
.dropdown-content {
+
  height: auto;
+
  width: auto;
+
  display: none;
+
  position: absolute;
+
  background-color: white;
+
  padding: 20px;
+
}
+
.dropdown-content div {
+
  padding-bottom: 10px;
+
  padding-top: 10px;
+
}
+
.dropdown:hover .dropdown-content {
+
  display: flex;
+
  flex-direction: column;
+
  justify-content: space-around;
+
}
+
.dropdown-content div:hover {
+
  color: rgb(200,200,200);
+
}
+
/* Footer styles. */
+
#footer {
+
  width: calc(100vw);
+
  height: 250px;
+
  background-color: rgb(30,30,40);
+
  color: rgb(210,210,210);
+
  display: flex;
+
  justify-content: space-around;
+
}
+
.footer-block ul{
+
  padding: 0px;
+
}
+
/* Content Styles */
+
#content {
+
  width: 100%;
+
  height: auto;
+
  display: flex;
+
  justify-content: center;
+
}
+
#section1 {
+
  width: 70%;
+
  min-height: 900px;
+
}
+
  
 +
  body {
 +
      background:#555;
 +
  }
 +
 +
  header {
 +
      z-index: 9999;
 +
      position:relative;
 +
      width:100%;
 +
      background:#333;
 +
  }
 +
 +
  .logo-header-custom {
 +
      position:relative;
 +
      z-index:123;
 +
      padding-left: 12px;
 +
      padding-right: 10px;
 +
      padding-top: 2px;
 +
      padding-bottom: 2px;
 +
      font:18px verdana;
 +
      color:#6DDB07;
 +
      float:left;
 +
      width:15%
 +
  }
 +
 +
  .logo-header-custom a {
 +
      color:#6DDB07;
 +
  }
 +
 +
  nav {
 +
      position:relative;
 +
      width:100%;
 +
      margin:0 auto;
 +
  }
 +
 +
  #cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile {
 +
      border:0;
 +
      list-style:none;
 +
      margin-bottom: -1px;
 +
      display:block;
 +
      position:relative;
 +
      -webkit-box-sizing:border-box;
 +
      -moz-box-sizing:border-box;
 +
      box-sizing:border-box
 +
  }
 +
 +
  #cssmenu:after,#cssmenu > ul:after {
 +
      content:".";
 +
      display:block;
 +
      clear:both;
 +
      visibility:hidden;
 +
      line-height:0;
 +
      height:0
 +
  }
 +
 +
  #cssmenu #head-mobile {
 +
      display:none
 +
  }
 +
 +
  #cssmenu {
 +
      font-family:"Objektiv-mk1";
 +
      background: #fff;
 +
      top: 16px;
 +
  }
 +
 +
  #cssmenu > ul > li {
 +
      float:right;
 +
  }
 +
 +
  #cssmenu > ul > li > a {
 +
      padding:17px;
 +
      font-size:14px;
 +
      letter-spacing:1px;
 +
      text-decoration:none;
 +
      color:#333;
 +
      font-weight:300;
 +
  }
 +
 +
  #cssmenu > ul > li:hover > a,#cssmenu ul li.active a {
 +
      color:#fff !important;
 +
  }
 +
 +
  #cssmenu ul li:hover {
 +
      color: white !important;
 +
  }
 +
 +
  #cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover {
 +
      background-color:#50A500!important;
 +
      -webkit-transition:background .3s ease;
 +
      -ms-transition:background .3s ease;
 +
      transition:background .3s ease;
 +
  }
 +
 +
  #cssmenu > ul > li.has-sub > a {
 +
      padding-right:30px
 +
  }
 +
 +
  #cssmenu > ul > li.has-sub > a:after {
 +
      position:absolute;
 +
      top:28px;
 +
      right:11px;
 +
      width:8px;
 +
      height:2px;
 +
      display:block;
 +
      background:#363636;
 +
      content:''
 +
  }
 +
 +
  #cssmenu > ul > li.has-sub > a:before {
 +
      position:absolute;
 +
      top:25px;
 +
      right:14px;
 +
      display:block;
 +
      width:2px;
 +
      height:8px;
 +
      background:#363636;
 +
      content:'';
 +
      -webkit-transition:all .25s ease;
 +
      -ms-transition:all .25s ease;
 +
      transition:all .25s ease
 +
  }
 +
 +
  #cssmenu > ul > li.has-sub:hover > a:before {
 +
      top:29px;
 +
      height:0
 +
  }
 +
 +
  #cssmenu ul ul {
 +
      position:fixed;
 +
      left:-9999px;
 +
      top: 75px;
 +
  }
 +
 +
  #cssmenu ul ul li {
 +
      height:0;
 +
      line-height: 1;
 +
      -webkit-transition:all .25s ease;
 +
      -ms-transition:all .25s ease;
 +
      background: #fff;
 +
      transition: all .25s ease;
 +
      border-bottom: 1px solid #999;
 +
      border-left: 1px solid #999;
 +
      border-right: 1px solid #999;
 +
  }
 +
 +
  #cssmenu ul ul li:hover {
 +
      background-color: #DCDCDC;
 +
  }
 +
 +
  #cssmenu ul ul li.has-sub:hover {
 +
      background-color: #DCDCDC !important;
 +
  }
 +
 +
  #cssmenu li:hover > ul {
 +
      left:auto
 +
  }
 +
 +
  #cssmenu li:hover > ul > li {
 +
      height:35px
 +
  }
 +
 +
  #cssmenu ul ul li a {
 +
      border-bottom:1px solid rgba(150,150,150,0.15);
 +
      padding:11px 15px;
 +
      width:200px;
 +
      font-size:11px;
 +
      text-decoration:none;
 +
      color:#333;
 +
      font-weight:300;
 +
  }
 +
 +
  #cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a {
 +
      border-bottom:0
 +
  }
 +
 +
  #cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover {
 +
      color:#fff
 +
  }
 +
 +
  #cssmenu ul ul li.has-sub > a:after {
 +
      position:absolute;
 +
      top:16px;
 +
      right:11px;
 +
      display:block;
 +
      width:8px;
 +
      height:2px;
 +
      background:#363636;
 +
      content:''
 +
  }
 +
 +
  #cssmenu ul ul li.has-sub > a:before {
 +
      position:absolute;
 +
      top:13px;
 +
      right:14px;
 +
      display:block;
 +
      width:2px;
 +
      height:8px;
 +
      background:#363636;
 +
      content:'';
 +
      -webkit-transition:all .25s ease;
 +
      -ms-transition:all .25s ease;
 +
      transition:all .25s ease
 +
  }
 +
 +
  #cssmenu ul ul > li.has-sub:hover > a:before {
 +
      top:17px;
 +
      height:0
 +
  }
 +
 +
  #cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover {
 +
      background:#363636;
 +
  }
 +
 +
  #cssmenu ul ul ul li.active a {
 +
      border-left:1px solid #333
 +
  }
 +
 +
  #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a {
 +
      border-top:1px solid #333
 +
  }
 +
 +
@media screen and (min-width: 1020px) {
 +
 +
  /*#bodyContent h4 {
 +
      margin-bottom: 0px;
 +
      position: fixed;
 +
      top: 12px;
 +
      right: 5px;
 +
      font-size: 80%;
 +
  }*/
 +
 +
  #cssmenu ul ul li {
 +
      left: -28px;
 +
  }
 +
 +
  #cssmenu ul ul li a:hover {
 +
      color: white !important;
 +
      background-color: #1B4900 !important;
 +
  }
 +
 +
  #cssmenu ul ul ul li {
 +
      position: relative;
 +
      left: 171px !important;
 +
      top: 34px;
 +
  }
 +
 +
 +
  #cssmenu ul ul ul a:before{
 +
      display: none;
 +
      position: absolute;
 +
      left: -9999px;
 +
      top: 20px;
 +
  }
 +
 +
  #cssmenu ul ul ul a:after {
 +
      display: block;
 +
      position: absolute;
 +
      left: -9999px;
 +
      top: 20px;
 +
  }
 +
 +
  /*h4 {
 +
      display: none;
 +
  }*/
 +
 +
  .tiny-little-menu-word-above-button {
 +
      display: none;
 +
  }
 +
}
  
 
@media screen and (min-width: 200px) and (max-width:1020px){
 
@media screen and (min-width: 200px) and (max-width:1020px){
  
 
+
  .logo-header-custom2 {
 +
      display:none
 +
  }
 +
 
 +
  header {
 +
      display: block;
 +
      z-index: 999999;
 +
  }
 +
 
 +
  nav {
 +
      width:100%;
 +
      z-index: 999999;
 +
  }
 +
 
 +
  .tiny-little-menu-word-above-button {
 +
      display: block;
 +
      font-family: 'objektiv-mk1';
 +
      font-size: 80%;
 +
      font-weight: 400;
 +
      margin-bottom: 0px;
 +
      position: fixed;
 +
      top: 21px;
 +
      right: 7px;
 +
  }
 +
 
 +
  /*h4 {
 +
      display: block;
 +
  }*/
 +
 
 +
  #cssmenu {
 +
      display: block;
 +
      width:100%;
 +
      z-index: 999999;
 +
  }
 +
 
 +
  #cssmenu ul {
 +
      z-index: 9999;
 +
      width:100%;
 +
      display:none;
 +
      margin-left: 0px;
 +
      margin-top: 20px;
 +
  }
 +
 
 +
  #cssmenu ul li {
 +
      width:100%;
 +
      border-top:1px solid #444;
 +
      border-bottom: 1px solid #444;
 +
  }
 +
 
 +
  #cssmenu ul li,#cssmenu ul li a {
 +
      line-height: 0.6;
 +
  }
 +
 
 +
  #cssmenu ul li:hover {
 +
      color: #fff !important;
 +
      background:#1B4900;
 +
  }
 +
 
 +
  #cssmenu ul ul li,#cssmenu li:hover > ul > li {
 +
      height:auto
 +
  }
 +
 
 +
  #cssmenu ul li a,#cssmenu ul ul li a {
 +
      width:100%;
 +
      border-bottom:0
 +
  }
 +
 
 +
  #cssmenu > ul > li {
 +
      float:none;
 +
  }
 +
 
 +
  #cssmenu ul ul li a {
 +
      padding-left:25px
 +
  }
 +
 
 +
  #cssmenu ul ul li {
 +
      background:#DCDCDC!important;
 +
  }
 +
 
 +
  #cssmenu li a:hover {
 +
      color: #fff !important;
 +
  }
 +
 
 +
  #cssmenu ul ul li:hover {
 +
      color: #fff !important;
 +
      background:#1B4900!important;
 +
  }
 +
 
 +
  #cssmenu ul ul ul li a {
 +
      padding-left:50px
 +
  }
 +
 
 +
  #cssmenu ul ul li a {
 +
      color:#ddd;
 +
      background:none
 +
  }
 +
 
 +
  #cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a {
 +
      color:#ddd
 +
  }
 +
 
 +
  #cssmenu ul ul,#cssmenu ul ul ul {
 +
      position:initial;
 +
      left:0;
 +
      width:100%;
 +
      margin:0;
 +
      text-align:left
 +
  }
 +
 
 +
  #cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before {
 +
      display:none
 +
  }
 +
 
 +
  #cssmenu #head-mobile {
 +
      display:block;
 +
      padding:23px;
 +
      color:#ddd;
 +
      font-size:12px;
 +
      font-weight:700
 +
  }
 +
 
 +
  .button-custom {
 +
      width:55px;
 +
      height:46px;
 +
      position:absolute;
 +
      right:0;
 +
      top:16px;
 +
      cursor:pointer;
 +
      z-index: 12399994;
 +
  }
 +
 
 +
  .button-custom:after {
 +
      position:absolute;
 +
      top:22px;
 +
      right:20px;
 +
      display:block;
 +
      height:8px;
 +
      width:20px;
 +
      border-top:2px solid #363636;
 +
      border-bottom:2px solid #363636;
 +
      content:''
 +
  }
 +
 
 +
  .button-custom:before {
 +
      -webkit-transition:all .3s ease;
 +
      -ms-transition:all .3s ease;
 +
      transition:all .3s ease;
 +
      position:absolute;
 +
      top:16px;
 +
      right:20px;
 +
      display:block;
 +
      height:2px;
 +
      width:20px;
 +
      background:#363636;
 +
      content:''
 +
  }
 +
 
 +
  .button-custom.menu-opened:after {
 +
      -webkit-transition:all .3s ease;
 +
      -ms-transition:all .3s ease;
 +
      transition:all .3s ease;
 +
      top:23px;
 +
      border:0;height:2px;
 +
      width:19px;
 +
      background:#363636;
 +
      -webkit-transform:rotate(45deg);
 +
      -moz-transform:rotate(45deg);
 +
      -ms-transform:rotate(45deg);
 +
      -o-transform:rotate(45deg);
 +
      transform:rotate(45deg)
 +
  }
 +
 
 +
  .button-custom.menu-opened:before {
 +
      top:23px;
 +
      background:#363636;
 +
      width:19px;
 +
      -webkit-transform:rotate(-45deg);
 +
      -moz-transform:rotate(-45deg);
 +
      -ms-transform:rotate(-45deg);
 +
      -o-transform:rotate(-45deg);
 +
      transform:rotate(-45deg)
 +
  }
 +
 
 +
  #cssmenu .submenu-button-custom {
 +
      position:absolute;
 +
      z-index:99;
 +
      right:0;
 +
      top:0;
 +
      display:block;
 +
      border-left:1px solid #444;
 +
      height:42px;
 +
      width:46px;
 +
      cursor:pointer
 +
  }
 +
 
 +
  #cssmenu .submenu-button-custom.submenu-opened {
 +
 
 +
  }
 +
 
 +
  #cssmenu ul ul .submenu-button-custom {
 +
      height:28px;
 +
      width:34px
 +
  }
 +
 
 +
  #cssmenu .submenu-button-custom:after {
 +
      position:absolute;
 +
      top:22px;
 +
      right:19px;
 +
      width:8px;
 +
      height:2px;
 +
      display:block;
 +
      background:#363636;
 +
      content:''
 +
  }
 +
 
 +
  #cssmenu ul ul .submenu-button-custom:after {
 +
      top:15px;
 +
      right:13px
 +
  }
 +
 
 +
  #cssmenu .submenu-button-custom.submenu-opened:after {
 +
      background:#fff
 +
  }
 +
 
 +
  #cssmenu .submenu-button-custom:before {
 +
      position:absolute;
 +
      top:19px;
 +
      right:22px;
 +
      display:block;
 +
      width:2px;
 +
      height:8px;
 +
      background:#363636;
 +
      content:''
 +
  }
 +
 
 +
  #cssmenu ul ul .submenu-button-custom:before {
 +
      top:12px;
 +
      right:16px
 +
  }
 +
 
 +
  #cssmenu .submenu-button-custom.submenu-opened:before {
 +
      display:none
 +
  }
 +
 
 +
  #cssmenu ul ul ul li.active a {
 +
      border-left:none
 +
  }
 +
 
 +
  #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a {
 +
      border-top:none
 +
  }
 +
 
 +
}
 
</style>
 
</style>
  
Line 221: Line 626:
  
 
<header>
 
<header>
@import url('https://fonts.googleapis.com/css?family=Cabin:700|Cabin+Condensed|Raleway|Roboto+Condensed|Open+Sans+Condensed:300|Work+Sans|Tajawal|Fjalla+One|Noto+Sans|EB+Garamond|Oswald');
+
<nav id='cssmenu' style="position: fixed;">
body {
+
<div class="logo-header-custom">
  margin: 0px;
+
  <a href="https://2018.igem.org/Team:Hawaii">
  padding: 0px;
+
      <img class="logo" src="https://static.igem.org/mediawiki/2018/f/f3/T--Hawaii--UHSeal.jpg" height="60" width="auto">
  color: rgb(40,40,40);
+
      <!--<img class="logo" src="https://static.igem.org/mediawiki/2018/f/f3/T--Hawaii--UHSeal.jpg" height ="60" width="auto">-->
  width: calc(100vw);
+
  </a>
 +
</div>
 +
<div id="head-mobile"></div>
 +
<div class="button-custom">
 +
  <div class="tiny-little-menu-word-above-button">MENU</div>
 +
</div>
 +
<ul>
 +
  <li><a href="https://igem.org/2018_Judging_Form?team=Hawaii">JUDGING</a></li>
 +
  <li><a href='https://2018.igem.org/Team:Hawaii/Notebook'>NOTEBOOK</a></li>
 +
  <!-- <li><a href=''>FUTURE STUDIES</a>
 +
      <ul>
 +
        <li><a href="">IMPLEMENTATION</a></li>
 +
        <li><a href="">TARGET ORGANISM</a></li>
 +
      </ul>
 +
  </li> -->
 +
  <li><a href="https://2018.igem.org/Team:Hawaii/Human_Practices">HUMAN PRACTICES</a>
 +
      <ul>
 +
        <li><a href="https://2018.igem.org/Team:Hawaii/Human_Practices">INTRODUCTION</a></li>
 +
        <li><a href="https://2018.igem.org/Team:Hawaii/Safety">SAFETY</a></li>
 +
        <li><a href="https://2018.igem.org/Team:Hawaii/Design">DESIGN</a></li>
 +
        <li><a href="https://2018.igem.org/Team:Hawaii/Public_Engagement">EDUCATION</a></li>
 +
        <li><a href="">COLLABORATIONS</a></li>
 +
        <li><a href="">BRONZE</a></li>
 +
        <li><a href="">SILVER</a></li>
 +
        <li><a href="">GOLD</a></li>
 +
      </ul>
 +
  </li>
 +
  <li><a href="https://2018.igem.org/Team:Hawaii/Description">PROJECT</a>
 +
      <ul>
 +
        <li><a href="https://2018.igem.org/Team:Hawaii/Description">THE PROJECT</a></li>
 +
        <li><a href="https://2018.igem.org/Team:Hawaii/Project_Meetings"> Project Meetings</a></li>
 +
        <li><a href="#">CENTROMERE-SPECIFIC RETROTRANSPOSONS</a>
 +
            <ul>
 +
              <li><a href="">GAG</a></li>
 +
              <li><a href="">PROTEASE</li>
 +
              <li><a href="">REVERSE TRANSCRIPTASE-RNASEH</li>
 +
              <li><a href="">INTEGRASE</li>
 +
            </ul>
 +
        </li>
 +
        <li><a href="https://2018.igem.org/Team:Hawaii/Model">MODELING</a></li>
 +
        <li><a href="https://2018.igem.org/Team:Hawaii/Results">RESULTS</a></li>
 +
        <li><a href="https://2018.igem.org/Team:Hawaii/Part_Collection">PARTS</a></li>
 +
        <li><a href="https://2018.igem.org/Team:Hawaii/InterLab">INTERLAB STUDY</a></li>
 +
      </ul>
 +
  </li>
 +
  <li><a href="https://2018.igem.org/Team:Hawaii/Team">TEAM</a>
 +
      <ul>
 +
        <li><a href="https://2018.igem.org/Team:Hawaii/Team">MEET THE TEAM</a></li>
 +
<li><a href="#">RESEARCH JOURNALS</a>
 +
            <ul>
 +
              <li><a href="https://2018.igem.org/Team:Hawaii/Chan">CHAN JEONG</a></li>
 +
              <li><a href="https://2018.igem.org/Team:Hawaii/Emily">EMILY YANG</li>
 +
              <li><a href="https://2018.igem.org/Team:Hawaii/Fernanda">FERNANDA HENNIG</li>
 +
              <li><a href="https://2018.igem.org/Team:Hawaii/Gina">GINA WATANABE</li>
 +
              <li><a href="https://2018.igem.org/Team:Hawaii/John">JOHN BANASIHAN</li>
 +
              <li><a href="https://2018.igem.org/Team:Hawaii/Jon">JON TELLO</li>
 +
              <li><a href="https://2018.igem.org/Team:Hawaii/Ryan">RYAN SHONTELL</li>
 +
              <li><a href="https://2018.igem.org/Team:Hawaii/Shelby">SHELBY ROBERSON</li>
 +
            </ul>
 +
        <li><a href="https://2018.igem.org/Team:Hawaii/Attributions">ATTRIBUTIONS</a></li>
 +
      </ul>
 +
  </li>
 +
  <li><a href='https://2018.igem.org/Team:Hawaii'>HOME</a></li>
 +
</ul>
 +
</nav>
 +
</header>
 +
<!-- END HEADER -->
 +
 
 +
 
 +
 
 +
<!-- START STYLE -->
 +
 
 +
<style>
 +
 
 +
/* This styling below is for th3 Homepage */
 +
 
 +
 
 +
 
 +
html, body {
 +
    max-width: 100%;
 +
    overflow-x: hidden;
 
}
 
}
h1 {
+
 
   font-size: 30px;
+
 
   font-family: 'Cabin', sans-serif;
+
 
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
/*styles consistent across pages below:*/
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 +
 
 +
 
 +
/*.pageflow {
 +
   margin-right: 0px;
 +
  margin-left: 0px;
 +
  margin-top:30px;
 +
  background: honeydew;
 +
}*/
 +
 
 +
/*h1 {
 +
   font-family: 'objektiv-mk1'!important;
 +
  font-size: 300%;
 +
  font-weight: 300 !important;
 +
    width: 80%;
 
}
 
}
 +
 
h2 {
 
h2 {
   font-size: 26px;
+
   font-family: 'objektiv-mk1' !important;
   font-family: 'Roboto Condensed', sans-serif;
+
   font-size: 200%;
 +
  font-weight: 300;
 
}
 
}
h3 {
+
 
   font-size: 22px;
+
#page {
  font-family: 'Roboto Condensed', sans-serif;
+
   background: honeydew;
  letter-spacing: 1px;
+
 
}
 
}
h4 {
+
 
  font-size: 20px;
+
.proj-button {
  font-family: 'Cabin', sans-serif;
+
    position: relative;
  letter-spacing: 2px;
+
    width: 10%;
 
}
 
}
h5 {
+
 
   font-size: 18px;
+
.proj-button-image {
   font-family: 'Raleway', sans-serif;
+
   opacity: 1;
 +
   display: inline-block;
 +
  width: 14%;
 +
  height: auto;
 +
  transition: .5s ease;
 +
  backface-visibility: hidden;
 
}
 
}
p {
+
 
  font-size: 20px;
+
.proj-button-desc {
  font-family: 'EB Garamond', sans-serif;
+
   transition: .5s ease;
  display: flex;
+
   opacity: 0;
  align-items: center;
+
}
+
li {
+
   list-style-type: none;
+
  padding-right: 30px;
+
}
+
a {
+
  text-decoration: none;
+
  color: inherit;
+
  font-size: 18px;
+
}
+
.big-section {
+
  margin-bottom: 100px;
+
}
+
/* Accessory styles. */
+
/* #triangle {
+
   width: 0;
+
  height: 0;
+
  border-bottom: 1000px solid rgb(30,30,40);
+
  border-right: calc(100vw) solid transparent;
+
 
   position: absolute;
 
   position: absolute;
   left: 0px;
+
   top: 100%;
  z-index: 1;
+
   left: 50%;
} */
+
   background: transparent;
/* Nav styles. */
+
   transform: translate(-50%, -50%);
#top-nav {
+
   -ms-transform: translate(-50%, -50%)
  width: 100%;
+
   height: 100px;
+
   display: flex;
+
   justify-content: center;
+
   align-items: center;
+
  letter-spacing: 1px;
+
 
}
 
}
#top-nav ul {
+
 
  width: 1100px;
+
.proj-button:hover .proj-button-image {
  padding: 0px;
+
   opacity: 0.3;
  display: flex;
+
  justify-content: space-around;
+
  align-items: center;
+
   flex-direction: row;
+
  z-index: 1;
+
 
}
 
}
.dropdown {
+
 
   position: relative;
+
.proj-button:hover .proj-button-desc {
 +
   opacity: 0.6;
 
}
 
}
.dropdown-content {
+
 
   height: auto;
+
.overlap-button-text {
   width: auto;
+
   background-color: transparent;
   display: none;
+
   color: black;
   position: absolute;
+
   font-size: 20px;
   background-color: white;
+
   font-family: "Objektiv-mk1" !important;
   padding: 20px;
+
   font-weight: 600 !important;
 +
   padding: 16px 32px;
 
}
 
}
.dropdown-content div {
+
 
   padding-bottom: 10px;
+
.pagagraph {
  padding-top: 10px;
+
   font-family: 'objektiv-mk1' !important;
 +
 
 
}
 
}
.dropdown:hover .dropdown-content {
+
 
   display: flex;
+
p {
  flex-direction: column;
+
   font-family: 'objektiv-mk1' !important;
   justify-content: space-around;
+
   font-size: large !important;
 
}
 
}
.dropdown-content div:hover {
+
 
   color: rgb(200,200,200);
+
.firstword {
 +
  font-family: 'objektiv-mk1' !important;
 +
   font-size: 100px;
 
}
 
}
/* Footer styles. */
+
 
#footer {
+
.titleimg {
   width: calc(100vw);
+
   vertical-align: middle;
  height: 250px;
+
  background-color: rgb(30,30,40);
+
  color: rgb(210,210,210);
+
  display: flex;
+
  justify-content: space-around;
+
}
+
.footer-block ul{
+
  padding: 0px;
+
}
+
/* Content Styles */
+
#content {
+
 
   width: 100%;
 
   width: 100%;
  height: auto;
 
  display: flex;
 
  justify-content: center;
 
 
}
 
}
#section1 {
 
  width: 70%;
 
  min-height: 900px;
 
}
 
 
<style>
 
 
/* This styling below is for th3 Homepage */
 
  
 +
.titlebox {
 +
  margin-left: 200px !important;
 +
}*/
  
 
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
 
/*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/

Revision as of 04:02, 21 June 2018


University of Hawaii at Manoa iGEM Team 2018

Were Not Old, Just Retro

Before you start

Please read the following pages:

Styling your wiki

You may style this page as you like or you can simply leave the style as it is. You can easily keep the styling and edit the content of these default wiki pages with your project information and completely fulfill the requirement to document your project.

While you may not win Best Wiki with this styling, your team is still eligible for all other awards. This default wiki meets the requirements, it improves navigability and ease of use for visitors, and you should not feel it is necessary to style beyond what has been provided.

Uploading pictures and files

You must upload any pictures and files to the iGEM 2018 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name.

When you upload, set the "Destination Filename" to T--YourOfficialTeamName--NameOfFile.jpg. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)

Wiki template information

We have created these wiki template pages to help you get started and to help you think about how your team will be evaluated. You can find a list of all the pages tied to awards here at the Pages for awards link. You must edit these pages to be evaluated for medals and awards, but ultimately the design, layout, style and all other elements of your team wiki is up to you!

Editing your wiki

On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world!

Use WikiTools - Edit in the black menu bar to edit this page

Tips

This wiki will be your team’s first interaction with the rest of the world, so here are a few tips to help you get started:

  • State your accomplishments! Tell people what you have achieved from the start.
  • Be clear about what you are doing and how you plan to do this.
  • You have a global audience! Consider the different backgrounds that your users come from.
  • Make sure information is easy to find; nothing should be more than 3 clicks away.
  • Avoid using very small fonts and low contrast colors; information should be easy to read.
  • Start documenting your project as early as possible; don’t leave anything to the last minute before the Wiki Freeze. For a complete list of deadlines visit the iGEM 2018 calendar
  • Have lots of fun!

Inspiration

You can also view other team wikis for inspiration! Here are some examples: