Difference between revisions of "Team:KSA KOREA"

m
 
(65 intermediate revisions by the same user not shown)
Line 2: Line 2:
  
 
<head>
 
<head>
 +
 +
<style>
 +
.navbar-item.has-dropdown.is-hoverable {
 +
  padding-right: 20px;
 +
}
 +
 +
 +
#sideMenu, #top_title, .patrollink, #firstHeading, #home_logo, #sideMenu { display:none; }
 +
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; border:none;}
 +
body, html {background-color:white; width: 100%; height: 100%;}
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
#bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
 +
</style>
 +
 
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/Bulma&action=raw&ctype=text/css" />
 
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/Bulma&action=raw&ctype=text/css" />
  
Line 8: Line 22:
 
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/demo&action=raw&ctype=text/css" />
 
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/demo&action=raw&ctype=text/css" />
  
 +
<style>
  
  
 +
.bb-custom-wrapper {
 +
  width: 100%;
 +
  height: 100%;
 +
  position: relative;
 +
 
 +
}
  
−
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/bookCSS&action=raw&ctype=text/css" />
+
.bb-custom-wrapper .bb-bookblock {
 +
  width: 100%;
 +
  height: 100%;
 +
  -webkit-perspective: 2000px;
 +
  perspective: 2000px;
 +
}
  
−
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/imageZoomcss&action=raw&ctype=text/css" />
+
.bb-custom-side {
 +
  width: 50%;
 +
  float: left;
 +
  height: 100%;
 +
  overflow: hidden;
 +
  background: #fff;
 +
 
 +
  display: -webkit-box;
 +
  display: -moz-box;
 +
  display: -webkit-flex;
 +
  display: flex;
 +
  -webkit-flex-direction: row;
 +
  flex-direction: row;
 +
  -webkit-flex-wrap: wrap;
 +
  flex-wrap: wrap;
 +
  -webkit-box-pack: center;
 +
  -moz-box-pack: center;
 +
  -webkit-justify-content: center;
 +
  justify-content: center;
 +
  -webkit-box-align: center;
 +
  -moz-box-align: center;
 +
  -webkit-align-items: center;
 +
  align-items: center;
 +
}
  
 +
.bb-custom-firstpage h1 {
 +
  font-size: 2.625em;
 +
  line-height: 1.3;
 +
  margin: 0;
 +
  font-weight: 300;
 +
  background: #fff;
 +
}
 +
 +
.bb-custom-firstpage h1 span {
 +
  display: block;
 +
  font-size: 60%;
 +
  opacity: 0.3;
 +
  padding: 0 0 0.6em 0.1em;
 +
}
 +
 +
.bb-custom-firstpage {
 +
  text-align: center;
 +
  padding-top: 15%;
 +
  width: 50%;
 +
  float: left;
 +
  height: 100%;
 +
}
 +
 +
.bb-custom-side p {
 +
  padding: 8%;
 +
  font-size: 1.8em;
 +
  font-weight: 300;
 +
}
 +
 +
.bb-custom-wrapper h3 {
 +
  font-size: 1.4em;
 +
  font-weight: 300;
 +
  margin: 0.4em 0 1em;
 +
}
 +
 +
.bb-custom-wrapper>nav {
 +
  width: 100%;
 +
  height: 40px;
 +
  margin: 1em auto 0;
 +
  position: fixed;
 +
  bottom: 20px;
 +
  z-index: 1000;
 +
  text-align: center;
 +
}
 +
 +
#page-nav {
 +
  width: 100%;
 +
  height: 40px;
 +
  margin: 1em auto 0;
 +
  position: fixed;
 +
  bottom: 20px;
 +
  z-index: 1000;
 +
  text-align: center;
 +
}
 +
 +
#page-nav a {
 +
  display: inline-block;
 +
  width: 40px;
 +
  height: 40px;
 +
  text-align: center;
 +
  border-radius: 2px;
 +
  background: #1baede;
 +
  color: #fff;
 +
  font-size: 0;
 +
  margin: 2px;
 +
}
 +
 +
.bb-custom-wrapper>nav a {
 +
  display: inline-block;
 +
  width: 40px;
 +
  height: 40px;
 +
  text-align: center;
 +
  border-radius: 2px;
 +
  background: #1baede;
 +
  color: #fff;
 +
  font-size: 0;
 +
  margin: 2px;
 +
}
 +
 +
#page-nav a:hover {
 +
  opacity: 0.6;
 +
}
 +
 +
.bb-custom-wrapper>nav a:hover {
 +
  opacity: 0.6;
 +
}
 +
 +
.bb-custom-icon:before {
 +
  font-family: 'arrows';
 +
  speak: none;
 +
  font-style: normal;
 +
  font-weight: normal;
 +
  font-variant: normal;
 +
  text-transform: none;
 +
  line-height: 1;
 +
  font-size: 30px;
 +
  line-height: 40px;
 +
  display: block;
 +
  -webkit-font-smoothing: antialiased;
 +
}
 +
 +
.bb-custom-icon-first:before,
 +
.bb-custom-icon-last:before {
 +
  content: "\e002";
 +
}
 +
 +
.bb-custom-icon-arrow-left:before,
 +
.bb-custom-icon-arrow-right:before {
 +
  content: "\e003";
 +
}
 +
 +
.bb-custom-icon-arrow-left:before,
 +
.bb-custom-icon-first:before {
 +
  -webkit-transform: rotate(180deg);
 +
  transform: rotate(180deg);
 +
}
 +
 +
 +
.no-js .bb-custom-wrapper {
 +
  height: auto;
 +
}
 +
 +
.no-js .bb-custom-content {
 +
  height: 470px;
 +
}
 +
 +
@media screen and (max-width: 61.75em) {
 +
  .bb-custom-side {
 +
    font-size: 70%;
 +
  }
 +
}
 +
 +
@media screen and (max-width: 33em) {
 +
  .bb-custom-side {
 +
    font-size: 60%;
 +
  }
 +
}
 +
</style>
 +
 +
 +
 +
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/fa4&action=raw&ctype=text/css" />
  
  
  
 
<style>
 
<style>
−
html, body, .footer {
+
*, *:after, *:before {
−
   background-color: #93D1D5;
+
   -webkit-box-sizing: border-box;
 +
  -moz-box-sizing: border-box;
 +
  box-sizing: border-box;
 
}
 
}
  
−
.wrap {
+
* {
−
   /* margin-left: 75px;
+
   margin: 0;
−
   margin-right: 75px; */
+
   padding: 0;
−
  margin: 0 auto;
+
−
  width: 90vw;
+
 
}
 
}
  
−
.shelf {
+
::before,
 +
::after {
 +
  content: "";
 +
}
 +
 
 +
html,
 +
body {
 +
  height: 100%;
 +
  -webkit-font-smoothing: subpixel-antialiased;
 +
}
 +
 
 +
html {
 +
  font-size: 100%;
 +
}
 +
 
 +
body {
 +
  background: #ecf0f1;
 +
  color: #34495e;
 +
  font-family: 'Lato', 'Arial', sans-serif;
 +
  font-weight: 400;
 +
  line-height: 1.2;
 +
}
 +
 
 +
ul {
 +
  margin: 0;
 +
  padding: 0;
 +
  list-style: none;
 +
}
 +
 
 +
a {
 +
  color: #2c3e50;
 +
  text-decoration: none;
 +
}
 +
 
 +
.btn {
 +
 +
  display: block;
 +
  text-transform: uppercase;
 +
 
 +
  margin-top: 20px;
 +
  font-size: 0.7em;
 +
  font-weight: 700;
 +
  padding: 0.1em 0.4em;
 +
  text-align: center;
 +
  -webkit-transition: color 0.3s, border-color 0.3s;
 +
  -moz-transition: color 0.3s, border-color 0.3s;
 +
  transition: color 0.3s, border-color 0.3s;
 +
}
 +
 
 +
.btn:hover {
 +
  border-color: #16a085;
 +
  color: #16a085;
 +
}
 +
 
 +
 
 +
.align {
 +
  clear: both;
 +
  margin: 90px auto 20px;
 
   width: 100%;
 
   width: 100%;
−
   height: 150px;
+
   /* max-width: 1170px; */
−
   z-index: -1;
+
   max-width: 1400px;
−
   background: transparent url(https://static.igem.org/mediawiki/2020/e/ea/T--KSA_KOREA--shelf.png) no-repeat center center;
+
  text-align: center;
−
   background-size: contain;
+
   margin-left: 0;
 +
  margin-top: 0;
 +
   margin-bottom: 0;
 +
margin-right: 1.6em;
 
}
 
}
  
 
.align>li {
 
.align>li {
−
   width: 100px;
+
   /* width: 500px; */
 +
  width: 140px;
 +
  /* min-height: 300px; */
 +
  display: inline-block;
 +
  /* margin: 30px 20px 30px 30px; */
 +
  /* padding: 0 0 0 60px; */
 +
  vertical-align: top;
 +
  margin-bottom: -25px;
 +
  margin-top: 30px;
 +
  margin-right: 40px;
 
}
 
}
  
−
.book-wrapper {
+
 
 +
.book {
 +
  position: relative;
 +
 +
  width: 120px;
 +
 
 +
  height: 160px;
 +
  -webkit-perspective: 1000px;
 +
  -moz-perspective: 1000px;
 +
  perspective: 1000px;
 +
  -webkit-transform-style: preserve-3d;
 +
  -moz-transform-style: preserve-3d;
 +
  transform-style: preserve-3d;
 +
}
 +
 
 +
 
 +
.hardcover_front li:first-child {
 +
  background-color: #eee;
 +
  -webkit-backface-visibility: hidden;
 +
  -moz-backface-visibility: hidden;
 +
  backface-visibility: hidden;
 +
}
 +
 
 +
 
 +
.hardcover_front li:last-child {
 +
  background: #fffbec;
 +
}
 +
 
 +
 
 +
.hardcover_back li:first-child {
 +
  background: #fffbec;
 +
}
 +
 
 +
 
 +
.hardcover_back li:last-child {
 +
  background: #fffbec;
 +
}
 +
 
 +
.book_spine li:first-child {
 +
  background: #eee;
 +
}
 +
 
 +
.book_spine li:last-child {
 +
  background: #333;
 +
}
 +
 
 +
 
 +
.hardcover_front li:first-child:after,
 +
.hardcover_front li:first-child:before,
 +
.hardcover_front li:last-child:after,
 +
.hardcover_front li:last-child:before,
 +
.hardcover_back li:first-child:after,
 +
.hardcover_back li:first-child:before,
 +
.hardcover_back li:last-child:after,
 +
.hardcover_back li:last-child:before,
 +
.book_spine li:first-child:after,
 +
.book_spine li:first-child:before,
 +
.book_spine li:last-child:after,
 +
.book_spine li:last-child:before {
 +
  background: #999;
 +
}
 +
 
 +
 
 +
.page>li {
 +
  background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
 +
  background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
 +
  background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
 +
  background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
 +
  box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2);
 +
  border-radius: 0px 5px 5px 0px;
 +
}
 +
 
 +
 
 +
.hardcover_front {
 +
  -webkit-transform: rotateY(-34deg) translateZ(8px);
 +
  -moz-transform: rotateY(-34deg) translateZ(8px);
 +
  transform: rotateY(-34deg) translateZ(8px);
 +
  z-index: 100;
 +
}
 +
 
 +
.hardcover_back {
 +
  -webkit-transform: rotateY(-15deg) translateZ(-8px);
 +
  -moz-transform: rotateY(-15deg) translateZ(-8px);
 +
  transform: rotateY(-15deg) translateZ(-8px);
 +
}
 +
 
 +
.page li:nth-child(1) {
 +
  -webkit-transform: rotateY(-28deg);
 +
  -moz-transform: rotateY(-28deg);
 +
  transform: rotateY(-28deg);
 +
}
 +
 
 +
.page li:nth-child(2) {
 +
  -webkit-transform: rotateY(-30deg);
 +
  -moz-transform: rotateY(-30deg);
 +
  transform: rotateY(-30deg);
 +
}
 +
 
 +
.page li:nth-child(3) {
 +
  -webkit-transform: rotateY(-32deg);
 +
  -moz-transform: rotateY(-32deg);
 +
  transform: rotateY(-32deg);
 +
}
 +
 
 +
.page li:nth-child(4) {
 +
  -webkit-transform: rotateY(-34deg);
 +
  -moz-transform: rotateY(-34deg);
 +
  transform: rotateY(-34deg);
 +
}
 +
 
 +
.page li:nth-child(5) {
 +
  -webkit-transform: rotateY(-36deg);
 +
  -moz-transform: rotateY(-36deg);
 +
  transform: rotateY(-36deg);
 +
}
 +
 
 +
 
 +
.hardcover_front,
 +
.hardcover_back,
 +
.book_spine,
 +
.hardcover_front li,
 +
.hardcover_back li,
 +
.book_spine li {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  width: 100%;
 
   height: 100%;
 
   height: 100%;
−
   width: 90vw;
+
   -webkit-transform-style: preserve-3d;
−
   margin: 0 auto;
+
   -moz-transform-style: preserve-3d;
 +
  transform-style: preserve-3d;
 
}
 
}
  
−
.bb-custom-side>img {
+
.hardcover_front,
−
   display: flex;
+
.hardcover_back {
 +
  -webkit-transform-origin: 0% 100%;
 +
  -moz-transform-origin: 0% 100%;
 +
  transform-origin: 0% 100%;
 +
}
 +
 
 +
.hardcover_front {
 +
  -webkit-transition: all 0.8s ease, z-index 0.6s;
 +
  -moz-transition: all 0.8s ease, z-index 0.6s;
 +
  transition: all 0.8s ease, z-index 0.6s;
 +
}
 +
 
 +
 
 +
.hardcover_front li:first-child {
 +
  cursor: default;
 +
  -webkit-user-select: none;
 +
  -moz-user-select: none;
 +
  user-select: none;
 +
  -webkit-transform: translateZ(2px);
 +
  -moz-transform: translateZ(2px);
 +
  transform: translateZ(2px);
 +
}
 +
 
 +
.hardcover_front li:last-child {
 +
  -webkit-transform: rotateY(180deg) translateZ(2px);
 +
  -moz-transform: rotateY(180deg) translateZ(2px);
 +
  transform: rotateY(180deg) translateZ(2px);
 +
}
 +
 
 +
 
 +
.hardcover_back li:first-child {
 +
  -webkit-transform: translateZ(2px);
 +
  -moz-transform: translateZ(2px);
 +
  transform: translateZ(2px);
 +
}
 +
 
 +
.hardcover_back li:last-child {
 +
  -webkit-transform: translateZ(-2px);
 +
  -moz-transform: translateZ(-2px);
 +
  transform: translateZ(-2px);
 +
}
 +
 
 +
 
 +
.hardcover_front li:first-child:after,
 +
.hardcover_front li:first-child:before,
 +
.hardcover_front li:last-child:after,
 +
.hardcover_front li:last-child:before,
 +
.hardcover_back li:first-child:after,
 +
.hardcover_back li:first-child:before,
 +
.hardcover_back li:last-child:after,
 +
.hardcover_back li:last-child:before,
 +
.book_spine li:first-child:after,
 +
.book_spine li:first-child:before,
 +
.book_spine li:last-child:after,
 +
.book_spine li:last-child:before {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
}
 +
 
 +
 
 +
.hardcover_front li:first-child:after,
 +
.hardcover_front li:first-child:before {
 +
 
 +
  height: 100%;
 +
}
 +
 
 +
.hardcover_front li:first-child:after {
 +
  -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
  -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
  transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
}
 +
 
 +
.hardcover_front li:first-child:before {
 +
  -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
 +
  -moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
 +
  transform: rotateY(90deg) translateZ(158px) translateX(2px);
 +
}
 +
 
 +
.hardcover_front li:last-child:after,
 +
.hardcover_front li:last-child:before {
 +
 +
  height: 160px;
 +
}
 +
 
 +
.hardcover_front li:last-child:after {
 +
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
 +
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
 +
  transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
 +
}
 +
 
 +
.hardcover_front li:last-child:before {
 +
 
 +
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
 +
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
 +
  transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
 +
}
 +
 
 +
 
 +
.hardcover_back li:first-child:after,
 +
.hardcover_back li:first-child:before {
 +
 +
  height: 100%;
 +
}
 +
 
 +
.hardcover_back li:first-child:after {
 +
  -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
  -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
  transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
}
 +
 
 +
.hardcover_back li:first-child:before {
 +
  -webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
 +
  -moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
 +
  transform: rotateY(90deg) translateZ(158px) translateX(2px);
 +
}
 +
 
 +
.hardcover_back li:last-child:after,
 +
.hardcover_back li:last-child:before {
 +
 +
  height: 160px;
 +
}
 +
 
 +
.hardcover_back li:last-child:after {
 +
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
 +
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
 +
  transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
 +
}
 +
 
 +
.hardcover_back li:last-child:before {
 +
 
 +
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
 +
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
 +
  transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
 +
}
 +
 
 +
 
 +
.book_spine {
 +
  -webkit-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
 +
  -moz-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
 +
  transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
 +
 
 +
  width: 20px;
 +
  z-index: 0;
 +
}
 +
 
 +
.book_spine li:first-child {
 +
  -webkit-transform: translateZ(2px);
 +
  -moz-transform: translateZ(2px);
 +
  transform: translateZ(2px);
 +
}
 +
 
 +
.book_spine li:last-child {
 +
  -webkit-transform: translateZ(-2px);
 +
  -moz-transform: translateZ(-2px);
 +
  transform: translateZ(-2px);
 +
}
 +
 
 +
 
 +
.book_spine li:first-child:after,
 +
.book_spine li:first-child:before {
 +
  width: 4px;
 +
  height: 100%;
 +
}
 +
 
 +
.book_spine li:first-child:after {
 +
  -webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
  -moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
  transform: rotateY(90deg) translateZ(-2px) translateX(2px);
 +
}
 +
 
 +
.book_spine li:first-child:before {
 +
  -webkit-transform: rotateY(-90deg) translateZ(-12px);
 +
  -moz-transform: rotateY(-90deg) translateZ(-12px);
 +
  transform: rotateY(-90deg) translateZ(-12px);
 +
}
 +
 
 +
.book_spine li:last-child:after,
 +
.book_spine li:last-child:before {
 +
 
 +
  height: 16px;
 +
}
 +
 
 +
.book_spine li:last-child:after {
 +
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
 +
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
 +
  transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
 +
}
 +
 
 +
.book_spine li:last-child:before {
 +
 +
  -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
 +
  -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
 +
  transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
 +
}
 +
 
 +
.page,
 +
.page>li {
 +
   position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  -webkit-transform-style: preserve-3d;
 +
  -moz-transform-style: preserve-3d;
 +
  transform-style: preserve-3d;
 +
}
 +
 
 +
.page {
 
   width: 100%;
 
   width: 100%;
−
   /* height: 100%; */
+
   height: 98%;
−
   object-fit: contain;
+
   top: 1%;
 +
  left: 3%;
 +
  z-index: 10;
 
}
 
}
  
−
/* .dropdown {
+
.page>li {
 +
  width: 100%;
 +
  height: 100%;
 +
  -webkit-transform-origin: left center;
 +
  -moz-transform-origin: left center;
 +
  transform-origin: left center;
 +
  -webkit-transition-property: transform;
 +
  -moz-transition-property: transform;
 +
  transition-property: transform;
 +
  -webkit-transition-timing-function: ease;
 +
  -moz-transition-timing-function: ease;
 +
  transition-timing-function: ease;
 +
}
 +
 
 +
.page>li:nth-child(1) {
 +
  -webkit-transition-duration: 0.6s;
 +
  -moz-transition-duration: 0.6s;
 +
  transition-duration: 0.6s;
 +
}
 +
 
 +
.page>li:nth-child(2) {
 +
  -webkit-transition-duration: 0.6s;
 +
  -moz-transition-duration: 0.6s;
 +
  transition-duration: 0.6s;
 +
}
 +
 
 +
.page>li:nth-child(3) {
 +
  -webkit-transition-duration: 0.4s;
 +
  -moz-transition-duration: 0.4s;
 +
  transition-duration: 0.4s;
 +
}
 +
 
 +
.page>li:nth-child(4) {
 +
  -webkit-transition-duration: 0.5s;
 +
  -moz-transition-duration: 0.5s;
 +
  transition-duration: 0.5s;
 +
}
 +
 
 +
.page>li:nth-child(5) {
 +
  -webkit-transition-duration: 0.6s;
 +
  -moz-transition-duration: 0.6s;
 +
  transition-duration: 0.6s;
 +
}
 +
 
 +
 
 +
.book:hover>.hardcover_front {
 +
  -webkit-transform: rotateY(-145deg) translateZ(0);
 +
  -moz-transform: rotateY(-145deg) translateZ(0);
 +
  transform: rotateY(-145deg) translateZ(0);
 +
  z-index: 0;
 +
}
 +
 
 +
.book:hover>.page li:nth-child(1) {
 +
  -webkit-transform: rotateY(-30deg);
 +
  -moz-transform: rotateY(-30deg);
 +
  transform: rotateY(-30deg);
 +
  -webkit-transition-duration: 1.5s;
 +
  -moz-transition-duration: 1.5s;
 +
  transition-duration: 1.5s;
 +
}
 +
 
 +
.book:hover>.page li:nth-child(2) {
 +
  -webkit-transform: rotateY(-35deg);
 +
  -moz-transform: rotateY(-35deg);
 +
  transform: rotateY(-35deg);
 +
  -webkit-transition-duration: 1.8s;
 +
  -moz-transition-duration: 1.8s;
 +
  transition-duration: 1.8s;
 +
}
 +
 
 +
.book:hover>.page li:nth-child(3) {
 +
  -webkit-transform: rotateY(-118deg);
 +
  -moz-transform: rotateY(-118deg);
 +
  transform: rotateY(-118deg);
 +
  -webkit-transition-duration: 1.6s;
 +
  -moz-transition-duration: 1.6s;
 +
  transition-duration: 1.6s;
 +
}
 +
 
 +
.book:hover>.page li:nth-child(4) {
 +
  -webkit-transform: rotateY(-130deg);
 +
  -moz-transform: rotateY(-130deg);
 +
  transform: rotateY(-130deg);
 +
  -webkit-transition-duration: 1.4s;
 +
  -moz-transition-duration: 1.4s;
 +
  transition-duration: 1.4s;
 +
}
 +
 
 +
.book:hover>.page li:nth-child(5) {
 +
  -webkit-transform: rotateY(-140deg);
 +
  -moz-transform: rotateY(-140deg);
 +
  transform: rotateY(-140deg);
 +
  -webkit-transition-duration: 1.2s;
 +
  -moz-transition-duration: 1.2s;
 +
  transition-duration: 1.2s;
 +
}
 +
 
 +
 
 +
.coverDesign {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  bottom: 0;
 +
  right: 0;
 +
  overflow: hidden;
 +
  z-index: 1;
 +
  -webkit-backface-visibility: hidden;
 +
  -moz-backface-visibility: hidden;
 +
  backface-visibility: hidden;
 +
}
 +
 
 +
.coverDesign::after {
 +
  background-image: -webkit-linear-gradient(-135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
 +
  background-image: -moz-linear-gradient(-135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
 +
  background-image: linear-gradient(-135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  bottom: 0;
 +
  right: 0;
 +
}
 +
 
 +
.coverDesign h1 {
 +
  color: #fff;
 +
  font-size: 2.2em;
 +
  letter-spacing: 0.05em;
 +
  text-align: center;
 +
  margin: 54% 0 0 0;
 +
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1);
 +
}
 +
 
 +
.coverDesign p {
 +
  color: #f8f8f8;
 +
  font-size: 1em;
 +
  text-align: center;
 +
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.1);
 +
}
 +
 
 +
.yellow {
 +
  background-color: #f1c40f;
 +
  background-image: -webkit-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
 +
  background-image: -moz-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
 +
  background-image: linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
 +
}
 +
 
 +
.blue {
 +
  background-color: #3498db;
 +
  background-image: -webkit-linear-gradient(top, #3498db 58%, #2a90d4 0%);
 +
  background-image: -moz-linear-gradient(top, #3498db 58%, #2a90d4 0%);
 +
  background-image: linear-gradient(top, #3498db 58%, #2a90d4 0%);
 +
}
 +
 
 +
.grey {
 +
  background-color: #f8e9d1;
 +
  background-image: -webkit-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
 +
  background-image: -moz-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
 +
  background-image: linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
 +
}
 +
 
 +
 
 +
.ribbon {
 +
  background: #c0392b;
 +
  color: #fff;
 +
  display: block;
 +
  font-size: 0.7em;
 +
  position: absolute;
 +
  top: 11px;
 +
  right: 1px;
 +
  width: 40px;
 +
  height: 20px;
 +
  line-height: 20px;
 +
  letter-spacing: 0.15em;
 +
  text-align: center;
 +
  -webkit-transform: rotateZ(45deg) translateZ(1px);
 +
  -moz-transform: rotateZ(45deg) translateZ(1px);
 +
  transform: rotateZ(45deg) translateZ(1px);
 +
  -webkit-backface-visibility: hidden;
 +
  -moz-backface-visibility: hidden;
 +
  backface-visibility: hidden;
 +
  z-index: 10;
 +
}
 +
 
 +
.ribbon::before,
 +
.ribbon::after {
 +
  position: absolute;
 +
  top: -20px;
 +
  width: 0;
 +
  height: 0;
 +
  border-bottom: 20px solid #c0392b;
 +
  border-top: 20px solid transparent;
 +
}
 +
 
 +
.ribbon::before {
 +
  left: -20px;
 +
  border-left: 20px solid transparent;
 +
}
 +
 
 +
.ribbon::after {
 +
  right: -20px;
 +
  border-right: 20px solid transparent;
 +
}
 +
 
 +
 
 +
@media screen and (max-width: 37.8125em) {
 +
  .align>li {
 +
    width: 100%;
 +
    min-height: 440px;
 +
    height: auto;
 +
    padding: 0;
 +
    margin: 0 0 30px 0;
 +
  }
 +
 
 +
  .book {
 +
    margin: 0 auto;
 +
  }
 +
 
 +
  figcaption {
 +
    text-align: center;
 +
    width: 320px;
 +
    top: 250px;
 +
    padding-left: 0;
 +
    left: -80px;
 +
    font-size: 90%;
 +
  }
 +
}
 +
</style>
 +
 
 +
 
 +
 
 +
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/imageZoomcss&action=raw&ctype=text/css" />
 +
 
 +
 
 +
 
 +
 
 +
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/modernizr&action=raw&ctype=text/javascript"></script>
 +
 
 +
<style>
 +
    html,
 +
    body,
 +
    .footer {
 +
      background-color: #93D1D5;
 +
    }
 +
 
 +
    .wrap {
 +
      /* margin-left: 75px;
 +
  margin-right: 75px; */
 +
      margin: 0 auto;
 +
      width: 90vw;
 +
    }
 +
 
 +
    .shelf {
 +
      width: 100%;
 +
      height: 150px;
 +
      z-index: -1;
 +
      background: transparent url(https://static.igem.org/mediawiki/2020/e/ea/T--KSA_KOREA--shelf.png) no-repeat center center;
 +
      background-size: contain;
 +
    }
 +
 
 +
    .align>li {
 +
      width: 100px;
 +
    }
 +
 
 +
    .book-wrapper {
 +
      height: 100vh;
 +
      width: 90vw;
 +
      margin: 0 auto;
 +
    }
 +
 
 +
    .bb-custom-side>img {
 +
      display: flex;
 +
      width: 100%;
 +
      /* height: 100%; */
 +
      object-fit: contain;
 +
    }
 +
 
 +
    /* .dropdown {
 
   z-index: 2000;
 
   z-index: 2000;
 
   position: fixed;
 
   position: fixed;
Line 61: Line 931:
 
   right: 1%;
 
   right: 1%;
 
} */
 
} */
−
.navbar.is-fixed-top {
+
    .navbar.is-fixed-top {
−
  z-index: 2000;
+
      z-index: 2000;
−
  width: 90vw;
+
      width: 90vw;
−
  margin: 0 auto;
+
      margin: 0 auto;
−
}
+
    }
  
−
/* .navbar.is-dark {
+
    /* .navbar.is-dark {
 
   background-color: #7FBEBC;
 
   background-color: #7FBEBC;
 
} */
 
} */
−
.coverDesign h1 {
+
    .coverDesign h1 {
−
  font-size: 1.3em;
+
      font-size: 1.3em;
 +
    }
 +
 
 +
    /* Video Stuff */
 +
    .hero.is-medium .hero-body {
 +
      padding-top: 0;
 +
      padding-left: 0;
 +
      padding-right: 0;
 +
      padding-bottom: 3rem;
 +
    }
 +
 
 +
    nav#left-pages {
 +
      position: fixed;
 +
      left: 1%;
 +
      top: 40%;
 +
      z-index: 9999;
 +
    }
 +
 
 +
    nav#right-pages {
 +
      position: fixed;
 +
      right: 1%;
 +
      top: 40%;
 +
      z-index: 9999;
 +
    }
 +
 
 +
    nav#left-pages a,
 +
    nav#right-pages a {
 +
      display: block;
 +
      margin-top: 2em;
 +
    }
 +
 
 +
    .navbar.is-primary,
 +
    .button.is-primary {
 +
      background-color: #93D1D5;
 +
    }
 +
 
 +
    a.btn.bookLink {
 +
padding-top: 0;
 +
margin-top: 0;
 
}
 
}
  
−
/* Video Stuff */
+
#flip-nav .button {
−
.hero.is-medium .hero-body {
+
    color: white;
−
  padding-top: 0;
+
    background-color: transparent;
−
  padding-left: 0;
+
    border: none;
−
  padding-right: 0;
+
max-width: 100%;
−
  padding-bottom: 3rem;
+
font-size: 2em;
 +
    padding: 0;
 +
    padding-bottom: 1.5em;
 +
 
 
}
 
}
  
−
nav#left-pages {
+
#flip-nav .button:hover {
−
  position: fixed;
+
background-color: #00d1b2;
−
  left: 1%;
+
−
  top: 40%;
+
−
  z-index: 9999;
+
 
}
 
}
  
−
nav#right-pages {
+
.footer {
−
  position: fixed;
+
      width: 100%;
−
  right: 1%;
+
      min-height: 35vh;
−
  top: 40%;
+
      z-index: -1;
−
  z-index: 9999;
+
      background: transparent url(https://static.igem.org/mediawiki/2020/e/eb/T--KSA_KOREA--footer.png) no-repeat center center;
 +
      background-size: contain;
 +
    }
 +
 
 +
 
 +
.navbar.is-primary .navbar-brand>a.navbar-item:hover {
 +
background-color: transparent;
 
}
 
}
  
−
nav#left-pages a,
+
.navbar-item img {
−
nav#right-pages a {
+
max-height: 6rem;
−
  display: block;
+
−
  margin-top: 2em;
+
 
}
 
}
  
−
.navbar.is-primary,
+
#bookGroup {
−
.button.is-primary {
+
   margin: 0 auto;
−
   background-color: #93D1D5;
+
  margin-bottom: 15px;
 
}
 
}
−
</style>
+
 
 +
iframe {
 +
display: block;
 +
margin: 0 auto;
 +
}
 +
 
 +
 
 +
  </style>
  
  
Line 115: Line 1,034:
  
 
<div class="wrap">
 
<div class="wrap">
−
     <ul class="align">
+
     <ul class="align" id="bookGroup">
 
       <li>
 
       <li>
 
         <figure class='book'>
 
         <figure class='book'>
Line 129: Line 1,048:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
−
               <a class="btn" href="#">Description</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Description">Description</a>
−
               <a class="btn" href="#">Results</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Results">Results</a>
−
               <a class="btn" href="#">Implementation</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Measurement">Measurement</a>
−
               <a class="btn" href="#">Appendix</a>
+
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Modeling">Modeling</a>
 +
              <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Implementation">Implementation</a>
 +
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Project/Appendix">Appendix</a>
 
             </li>
 
             </li>
 
             <li></li>
 
             <li></li>
Line 163: Line 1,084:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
−
               <a class="btn" href="#">Basic</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Ligninator">Ligninator</a>
−
               <a class="btn" href="#">Composite</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Biosensor">Biosensor</a>
−
               <a class="btn" href="#">Collection</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Collection">Collection</a>
−
               <a class="btn" href="#">Contribution</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Contribution">Contribution</a>
 
             </li>
 
             </li>
 
             <li></li>
 
             <li></li>
Line 196: Line 1,117:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
−
               <a class="btn" href="#">Fluorometer</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HW/Flourometer">Fluorometer</a>
−
               <a class="btn" href="#">Computer Vision</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HW/Business">Business</a>
−
              <a class="btn" href="#">Entrepreneurship</a>
+
−
              <a class="btn" href="#">Modeling</a>
+
 
             </li>
 
             </li>
 
             <li></li>
 
             <li></li>
Line 229: Line 1,148:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
−
               <a class="btn" href="#">Software 1</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Software/Biosensor">Biosensor App.</a>
−
              <a class="btn" href="#">Software 2</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Software/Crispy">Crispy</a>
−
               <a class="btn" href="#">Software 3</a>
+
       
−
              <a class="btn" href="#">Software 4</a>
+
 
             </li>
 
             </li>
 
             <li></li>
 
             <li></li>
Line 262: Line 1,180:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
−
               <a class="btn" href="#">overview</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HP/Overview">Overview</a>
−
               <a class="btn" href="#">Identification</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HP/Identification">Identification</a>
−
               <a class="btn" href="#">Integration</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HP/Integration">Integration</a>
−
               <a class="btn" href="#">Improvement</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/HP/Improvement">Improvement</a>
 +
              <a class="btn bookLink" href="https://docs.google.com/document/d/e/2PACX-1vSt2M1WlhUYAtq64M2OOh4E0CNE-a7yO33OZq_PeJLidhzN4fS84CBk1EqZLObt9OoZd1eoCzVsr26Z/pub">Survey Analysis</a>
 
             </li>
 
             </li>
 
             <li></li>
 
             <li></li>
Line 295: Line 1,214:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
−
               <a class="btn" href="#">Education</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Education">Education</a>
−
               <a class="btn" href="#">Collaboration</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Collaboration">Collaboration</a>
−
               <a class="btn" href="#">Web Presence</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Web">Web Presence</a>
 
             </li>
 
             </li>
 
             <li></li>
 
             <li></li>
Line 327: Line 1,246:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
−
               <a class="btn" href="#">About Us</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Members">Members</a>
−
               <a class="btn" href="#">Members</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Attributions">Attributions</a>
 
             </li>
 
             </li>
 
             <li></li>
 
             <li></li>
Line 359: Line 1,278:
 
             <li></li>
 
             <li></li>
 
             <li>
 
             <li>
−
               <a class="btn" href="#">Awards</a>
+
               <a class="btn bookLink" href="https://2020.igem.org/Team:KSA_KOREA/Logistics/Judging">Judging</a>
−
              <a class="btn" href="#">Judging Form</a>
+
     
−
              <a class="btn" href="#">Safety</a>
+
         
−
              <a class="btn" href="#">Attribution</a>
+
 
             </li>
 
             </li>
 
             <li></li>
 
             <li></li>
Line 392: Line 1,310:
 
     <nav class="navbar is-fixed-top is-primary is-spaced" role="navigation" aria-label="main navigation">
 
     <nav class="navbar is-fixed-top is-primary is-spaced" role="navigation" aria-label="main navigation">
 
       <div class="navbar-brand">
 
       <div class="navbar-brand">
−
         <a class="navbar-item" href="#">
+
         <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA">
−
           <img src="images/ksalogo.png" width="100" height="50">
+
           <img src="https://static.igem.org/mediawiki/2020/6/64/T--KSA_KOREA--logo.png" width="100" height="50">
 
         </a>
 
         </a>
 
         <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
 
         <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
Line 403: Line 1,321:
 
       <div id="navbarBasicExample" class="navbar-menu">
 
       <div id="navbarBasicExample" class="navbar-menu">
 
         <div class="navbar-start">
 
         <div class="navbar-start">
−
           <a class="navbar-item">
+
            
−
            Home
+
−
          </a>
+
  
 
           <!-- This is end of navbar start -->
 
           <!-- This is end of navbar start -->
Line 418: Line 1,334:
  
 
             <div class="navbar-dropdown">
 
             <div class="navbar-dropdown">
−
               <a class="navbar-item">
+
               <a class="navbar-item has-text-light has-background-primary" href="https://2020.igem.org/Team:KSA_KOREA/Members">
 
                 Members
 
                 Members
 
               </a>
 
               </a>
−
               <a class="navbar-item has-text-light has-background-primary">
+
             
−
                Collaboration
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Attributions">
−
              </a>
+
                 Attributions
−
              <a class="navbar-item">
+
−
                 Attribution
+
 
               </a>
 
               </a>
 
             </div>
 
             </div>
Line 438: Line 1,352:
  
 
             <div class="navbar-dropdown">
 
             <div class="navbar-dropdown">
−
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Project/Description">
−
                Description/Inspiration
+
                 Description
−
              </a>
+
−
              <a class="navbar-item">
+
−
                Design
+
−
              </a>
+
−
              <a class="navbar-item">
+
−
                Labnotes
+
−
              </a>
+
−
              <a class="navbar-item">
+
−
                 Protocol
+
 
               </a>
 
               </a>
−
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Project/Results">
 
                 Results
 
                 Results
 
               </a>
 
               </a>
−
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Project/Measurement">
−
                 Parts
+
                 Measurement
 +
              </a>
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Project/Modeling">
 +
                Modeling
 
               </a>
 
               </a>
 
             </div>
 
             </div>
 
           </div>
 
           </div>
  
−
           <!-- Device -->
+
           <!-- PARTS-->
  
 
           <div class="navbar-item has-dropdown is-hoverable ">
 
           <div class="navbar-item has-dropdown is-hoverable ">
 
             <a class="navbar-link">
 
             <a class="navbar-link">
−
               Device
+
               Parts
 
             </a>
 
             </a>
  
 
             <div class="navbar-dropdown">
 
             <div class="navbar-dropdown">
−
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Ligninator">
−
                 Software
+
                 Ligninator
 
               </a>
 
               </a>
−
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Biosensor">
−
                 Hardware
+
                 Biosensor
 +
              </a>
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Collection">
 +
                Collection
 +
              </a>
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Parts/Contribution">
 +
                Contribution
 
               </a>
 
               </a>
  
Line 481: Line 1,395:
 
               Human Practices
 
               Human Practices
 
             </a>
 
             </a>
−
 
 
             <div class="navbar-dropdown">
 
             <div class="navbar-dropdown">
−
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HP/Overview">
−
                 Introduction
+
                 Overview
 
               </a>
 
               </a>
−
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HP/Identification">
−
                 Education
+
                 Identification
 
               </a>
 
               </a>
−
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HP/Integration">
−
                 Campaign
+
                 Integration
 
               </a>
 
               </a>
−
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HP/Improvement">
−
                 Interviews
+
                 Improvement
 
               </a>
 
               </a>
−
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://docs.google.com/document/d/e/2PACX-1vSt2M1WlhUYAtq64M2OOh4E0CNE-a7yO33OZq_PeJLidhzN4fS84CBk1EqZLObt9OoZd1eoCzVsr26Z/pub">
 
                 Survey Analysis
 
                 Survey Analysis
 
               </a>
 
               </a>
−
               <a class="navbar-item">
+
            </div>
−
                 Integrated Human Practices
+
          </div>
 +
 
 +
 
 +
        <div class="navbar-item has-dropdown is-hoverable ">
 +
            <a class="navbar-link">
 +
              Hardware & Business
 +
            </a>
 +
            <div class="navbar-dropdown">
 +
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HW/Fluorometer">
 +
                Fluorometer
 +
              </a> 
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/HW/Business">
 +
                Business
 +
              </a> 
 +
            </div>
 +
          </div>
 +
 
 +
 
 +
        <div class="navbar-item has-dropdown is-hoverable ">
 +
            <a class="navbar-link">
 +
              Logistics
 +
            </a>
 +
            <div class="navbar-dropdown">
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Logistics/Judging">
 +
                 Judging
 
               </a>
 
               </a>
 +
             
 +
             
 +
            </div>
 +
          </div>
  
 +
        <div class="navbar-item has-dropdown is-hoverable ">
 +
            <a class="navbar-link">
 +
              Communication
 +
            </a>
 +
            <div class="navbar-dropdown">
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Education">
 +
                Education
 +
              </a>
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Collaboration">
 +
                Collaboration
 +
              </a>
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Communication/Web">
 +
                Web Presence
 +
              </a>
 +
            </div>
 +
          </div>
 +
 +
 +
        <div class="navbar-item has-dropdown is-hoverable ">
 +
            <a class="navbar-link">
 +
              Software
 +
            </a>
 +
            <div class="navbar-dropdown">
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Software/Biosensor">
 +
                Biosensor
 +
              </a>
 +
              <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Software/Crispy">
 +
                Crispy
 +
              </a>
 +
         
 
             </div>
 
             </div>
 
           </div>
 
           </div>
  
−
          <a class="navbar-item">
+
       
−
            Awards/Judging Form
+
−
          </a>
+
  
−
           <a class="navbar-item">
+
            
−
            Safety
+
−
          </a>
+
  
 
         </div>
 
         </div>
Line 522: Line 1,489:
 
     <div class="bb-custom-wrapper">
 
     <div class="bb-custom-wrapper">
 
       <div id="bb-bookblock" class="bb-bookblock">
 
       <div id="bb-bookblock" class="bb-bookblock">
−
         <div class="bb-item">
+
   
−
          <div class="bb-custom-firstpage">
+
          
−
            <h1>BookBlock <span>A Content Flip Plugin</span></h1>
+
      <iframe width="1200" height="800" src="https://www.youtube.com/embed/6eqk6ADKtFQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
−
            <nav class="codrops-demos">
+
          
−
              <a class="current-demo" href="index4.html">Demo 4</a>
+
−
              <a href="index5.html">Demo 5</a>
+
−
            </nav>
+
−
          </div>
+
−
          <div class="bb-custom-side">
+
−
            <p>Pastry bear claw oat cake danish croissant jujubes danish. Wypas soufflé muffin. Liquorice powder pastry danish. Candy toffee gummi bears chocolate bar lollipop applicake chocolate cake danish brownie.</p>
+
−
          </div>
+
−
        </div>
+
−
        <div class="bb-item">
+
−
          <div class="bb-custom-side">
+
−
            <p>Soufflé tootsie roll jelly beans. Sweet icing croissant dessert bear claw. Brownie dessert cheesecake danish jelly pudding bear claw soufflé.</p>
+
−
          </div>
+
−
          <div class="bb-custom-side">
+
−
            <p>Candy canes lollipop macaroon marshmallow gummi bears tiramisu. Dessert croissant cupcake candy canes. Bear claw faworki faworki lemon drops. Faworki marzipan sugar plum jelly-o marzipan jelly-o.</p>
+
−
          </div>
+
−
        </div>
+
−
        <div class="bb-item">
+
−
          <div class="bb-custom-side">
+
−
            <img src="images/left.png" />
+
−
          </div>
+
−
          <div class="bb-custom-side">
+
−
            <img src="images/right.png" />
+
−
          </div>
+
−
         </div>
+
−
        <div class="bb-item">
+
−
          <div class="bb-custom-side">
+
−
            <img src="images/ratioTest.png" />
+
−
          </div>
+
−
          <div class="bb-custom-side">
+
−
            <img src="images/edu_wiki.png" />
+
−
          </div>
+
−
        </div>
+
  
−
        <div class="bb-item">
+
     
−
          <div class="bb-custom-side">
+
−
            <p>Jujubes fruitcake tiramisu liquorice chocolate cake. Carrot cake faworki donut soufflé oat cake tootsie roll. Fruitcake fruitcake cake sweet pie jelly beans. Chocolate cake candy jujubes oat cake toffee croissant muffin.</p>
+
−
          </div>
+
−
          <div class="bb-custom-side">
+
−
            <p>Chocolate bar tiramisu marzipan. Croissant soufflé croissant lollipop liquorice dragée chupa chups carrot cake. Liquorice lollipop halvah toffee lollipop.</p>
+
−
          </div>
+
−
        </div>
+
 
       </div>
 
       </div>
  
Line 575: Line 1,503:
 
<!-- HERE IS END OF BOOK WRAPPER -->
 
<!-- HERE IS END OF BOOK WRAPPER -->
  
−
  <div id="flip-nav">
 
−
    <nav id="left-pages">
 
−
      <a id="bb-nav-prev" href="#" class="button is-primary"><i class="fa fa-angle-left fa-2x"></i></a>
 
−
      <a id="bb-nav-first" href="#" class="button is-primary"><i class="fa fa-angle-double-left fa-2x"></i></a>
 
−
    </nav>
 
  
  
−
    <nav id="right-pages">
+
<div class="footer"></div>
−
      <a id="bb-nav-next" href="#" class="button is-primary"><i class="fa fa-angle-right fa-2x"></i></a>
+
−
      <a id="bb-nav-last" class="button is-primary"><i class="fa fa-angle-double-right fa-2x"></i></a>
+
−
    </nav>
+
−
  </div>
+
  
  
Line 592: Line 1,511:
  
  
 +
  <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/bookBlockjs&action=raw&ctype=text/javascript"></script>
  
  
  
 +
  <script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/imageZoomjs&action=raw&ctype=text/javascript">
 +
  </script>
  
  
  
  
 +
  <script>
 +
    $(document).ready(function() {
 +
      var Page = (function() {
  
 +
        var config = {
 +
            $bookBlock: $('#bb-bookblock'),
 +
            $navNext: $('#bb-nav-next'),
 +
            $navPrev: $('#bb-nav-prev'),
 +
            $navFirst: $('#bb-nav-first'),
 +
            $navLast: $('#bb-nav-last')
 +
          },
 +
          init = function() {
 +
            console.log("enter");
 +
            var $content = $('#bb-bookblock');
 +
            while ($content.length === 0) {
 +
              setTimeout(() => {
 +
                console.log($content.length);
 +
              }, 200);
 +
              $content = $("bb-bookblock");
 +
            }
  
 +
            config.$bookBlock.bookblock({
 +
              speed: 1000,
 +
              shadowSides: 0.8,
 +
              shadowFlip: 0.4
 +
            });
 +
            initEvents();
 +
          },
 +
          initEvents = function() {
  
−
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/modernizr&action=raw&ctype=text/javascript"</script>
+
            var $slides = config.$bookBlock.children();
  
 +
            // add navigation events
 +
            config.$navNext.on('click touchstart', function() {
 +
              config.$bookBlock.bookblock('next');
 +
              return false;
 +
            });
  
 +
            config.$navPrev.on('click touchstart', function() {
 +
              config.$bookBlock.bookblock('prev');
 +
              return false;
 +
            });
  
 +
            config.$navFirst.on('click touchstart', function() {
 +
              config.$bookBlock.bookblock('first');
 +
              return false;
 +
            });
  
−
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/jqueryPP&action=raw&ctype=text/javascript"</script>
+
            config.$navLast.on('click touchstart', function() {
 +
              config.$bookBlock.bookblock('last');
 +
              return false;
 +
            });
  
−
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/bookBlockjsP&action=raw&ctype=text/javascript"</script>
+
            // add swipe events
 +
            $slides.on({
 +
              'swipeleft': function(event) {
 +
                config.$bookBlock.bookblock('next');
 +
                return false;
 +
              },
 +
              'swiperight': function(event) {
 +
                config.$bookBlock.bookblock('prev');
 +
                return false;
 +
              }
 +
            });
  
−
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/imageZoomjs&action=raw&ctype=text/javascript"</script>
+
            // add keyboard events
 +
            $(document).keydown(function(e) {
 +
              var keyCode = e.keyCode || e.which,
 +
                arrow = {
 +
                  left: 37,
 +
                  up: 38,
 +
                  right: 39,
 +
                  down: 40
 +
                };
  
 +
              switch (keyCode) {
 +
                case arrow.left:
 +
                  config.$bookBlock.bookblock('prev');
 +
                  break;
 +
                case arrow.right:
 +
                  config.$bookBlock.bookblock('next');
 +
                  break;
 +
              }
 +
            });
 +
          };
  
 +
        return {
 +
          init: init
 +
        };
 +
 +
      })();
 +
      Page.init();
 +
    });
 +
   
 +
  </script>
  
  
 
<script>
 
<script>
−
    var Page = (function() {
+
$(document).ready(function() {
 +
document.getElementById("content").style.background = "#93D1D5";
 +
});
  
−
      var config = {
+
</script>
−
          $bookBlock: $('#bb-bookblock'),
+
−
          $navNext: $('#bb-nav-next'),
+
−
          $navPrev: $('#bb-nav-prev'),
+
−
          $navFirst: $('#bb-nav-first'),
+
−
          $navLast: $('#bb-nav-last')
+
−
        },
+
−
        init = function() {
+
−
          config.$bookBlock.bookblock({
+
−
            speed: 1000,
+
−
            shadowSides: 0.8,
+
−
            shadowFlip: 0.4
+
−
          });
+
−
          initEvents();
+
−
        },
+
−
        initEvents = function() {
+
−
 
+
−
          var $slides = config.$bookBlock.children();
+
−
 
+
−
          // add navigation events
+
−
          config.$navNext.on('click touchstart', function() {
+
−
            config.$bookBlock.bookblock('next');
+
−
            return false;
+
−
          });
+
−
 
+
−
          config.$navPrev.on('click touchstart', function() {
+
−
            config.$bookBlock.bookblock('prev');
+
−
            return false;
+
−
          });
+
−
 
+
−
          config.$navFirst.on('click touchstart', function() {
+
−
            config.$bookBlock.bookblock('first');
+
−
            return false;
+
−
          });
+
−
 
+
−
          config.$navLast.on('click touchstart', function() {
+
−
            config.$bookBlock.bookblock('last');
+
−
            return false;
+
−
          });
+
−
 
+
−
          // add swipe events
+
−
          $slides.on({
+
−
            'swipeleft': function(event) {
+
−
              config.$bookBlock.bookblock('next');
+
−
              return false;
+
−
            },
+
−
            'swiperight': function(event) {
+
−
              config.$bookBlock.bookblock('prev');
+
−
              return false;
+
−
            }
+
−
          });
+
−
 
+
−
          // add keyboard events
+
−
          $(document).keydown(function(e) {
+
−
            var keyCode = e.keyCode || e.which,
+
−
              arrow = {
+
−
                left: 37,
+
−
                up: 38,
+
−
                right: 39,
+
−
                down: 40
+
−
              };
+
−
 
+
−
            switch (keyCode) {
+
−
              case arrow.left:
+
−
                config.$bookBlock.bookblock('prev');
+
−
                break;
+
−
              case arrow.right:
+
−
                config.$bookBlock.bookblock('next');
+
−
                break;
+
−
            }
+
−
          });
+
−
        };
+
−
 
+
−
      return {
+
−
        init: init
+
−
      };
+
−
     
+
−
    })();
+
−
    Page.init();
+
−
  </script>
+
  
  
Line 715: Line 1,640:
 
         $(window).scroll(function() {
 
         $(window).scroll(function() {
 
           // set distance user needs to scroll before we start fadeIn
 
           // set distance user needs to scroll before we start fadeIn
−
           if ($(this).scrollTop() > $books.height()) { //For dynamic effect use $nav.height() instead of '100'
+
           if ($(this).scrollTop() > $books.height()) {  
 
             $nav.fadeIn();
 
             $nav.fadeIn();
 
           } else {
 
           } else {
Line 726: Line 1,651:
 
         $(window).scroll(function() {
 
         $(window).scroll(function() {
 
           // set distance user needs to scroll before we start fadeIn
 
           // set distance user needs to scroll before we start fadeIn
−
           if ($(this).scrollTop() > $books.height()) { //For dynamic effect use $nav.height() instead of '100'
+
           if ($(this).scrollTop() > $books.height()) {  
 
             $pageNav.fadeIn();
 
             $pageNav.fadeIn();
 
           } else {
 
           } else {

Latest revision as of 13:52, 16 December 2020