Difference between revisions of "Team:KSA KOREA"

(update with css links)
 
(71 intermediate revisions by the same user not shown)
Line 2: Line 2:
  
 
<head>
 
<head>
−
  <!-- Required meta tags -->
+
 
−
   <meta charset="utf-8">
+
<style>
−
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
.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 11: 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>
  
−
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/modernizr&action=raw&ctype=text/javascript"</script>
 
  
 +
.bb-custom-wrapper {
 +
  width: 100%;
 +
  height: 100%;
 +
  position: relative;
 +
 
 +
}
 +
 +
.bb-custom-wrapper .bb-bookblock {
 +
  width: 100%;
 +
  height: 100%;
 +
  -webkit-perspective: 2000px;
 +
  perspective: 2000px;
 +
}
 +
 +
.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/bookCSS&action=raw&ctype=text/css" />
 
  
−
<link rel="stylesheet" type="text/css" href="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/imageZoomcss&action=raw&ctype=text/css" />
 
  
 +
<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 65: 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>
 
−
<title>KSA Korea Wiki Page</title>
 
  
 +
iframe {
 +
display: block;
 +
margin: 0 auto;
 +
}
  
  
 +
  </style>
  
  
 
</head>
 
</head>
 +
 
<body>
 
<body>
 +
  
 
<div class="wrap">
 
<div class="wrap">
−
     <ul class="align">
+
     <ul class="align" id="bookGroup">
 
       <li>
 
       <li>
 
         <figure class='book'>
 
         <figure class='book'>
Line 135: 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 169: 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 202: 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 235: 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 268: 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 301: 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 333: 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 365: 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 398: 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 409: 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 424: 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 444: 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>
−
               <a class="navbar-item">
+
               <a class="navbar-item" href="https://2020.igem.org/Team:KSA_KOREA/Project/Results">
−
                Design
+
−
              </a>
+
−
              <a class="navbar-item">
+
−
                Labnotes
+
−
              </a>
+
−
              <a class="navbar-item">
+
−
                Protocol
+
−
              </a>
+
−
              <a class="navbar-item">
+
 
                 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 487: 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>
 
           </div>
  
−
          <a class="navbar-item">
 
−
            Awards/Judging Form
 
−
          </a>
 
  
−
          <a class="navbar-item">
+
        <div class="navbar-item has-dropdown is-hoverable ">
−
             Safety
+
            <a class="navbar-link">
−
           </a>
+
              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>
Line 528: 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 581: 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 598: 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() {
  
 +
            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;
 +
              }
 +
            });
  
−
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/JQuery&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
 +
                };
  
−
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/jqueryPP&action=raw&ctype=text/javascript"</script>
+
              switch (keyCode) {
−
 
+
                case arrow.left:
−
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/bookBlockjsP&action=raw&ctype=text/javascript"</script>
+
                  config.$bookBlock.bookblock('prev');
−
 
+
                  break;
−
<script type="text/javascript" src="https://2020.igem.org/wiki/index.php?title=Template:KSA_KOREA/imageZoomjs&action=raw&ctype=text/javascript"</script>
+
                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 724: 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 735: 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 {
Line 753: Line 1,669:
 
   </script>
 
   </script>
 
</body>
 
</body>
 +
 +
 
</html>
 
</html>

Latest revision as of 13:52, 16 December 2020