Difference between revisions of "Team:BostonU/Notebook"

(Replaced content with "{{BU17_template_global}} {{BU17_template_menubar}}")
Line 1: Line 1:
 
{{BU17_template_global}}
 
{{BU17_template_global}}
 
{{BU17_template_menubar}}
 
{{BU17_template_menubar}}
 +
<html>
 +
<head>
 +
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
 +
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:400,900" rel="stylesheet">
 +
<style>
 +
#top_menu_inside ul li > a { /* RECOLORS IGEM MENU */
 +
color: #a9a9a9 !important;
 +
}
 +
.menu-type {
 +
font-family: 'Roboto Condensed', sans-serif;
 +
letter-spacing: 5 pt !important;
 +
font-size: 14pt !important;
 +
text-align: center;
 +
text-decoration: none !important;
 +
text-transform: uppercase;
 +
font-weight: 700;
 +
-webkit-font-smoothing: antialiased;
 +
font-smoothing: antialiased;
 +
}
 +
.wide-heading-type {
 +
font-family: 'Roboto', sans-serif;
 +
font-size: 24pt !important;
 +
letter-spacing: 5pt !important;
 +
text-align: center;
 +
text-decoration: none !important;
 +
text-transform: uppercase;
 +
font-weight: bold;
 +
-webkit-font-smoothing: antialiased;
 +
font-smoothing: antialiased;
 +
}
 +
.body-type {
 +
font-family: 'Roboto', sans-serif;
 +
font-size: 16pt !important;
 +
text-decoration: none !important;
 +
line-height: 2;
 +
-webkit-font-smoothing: antialiased;
 +
font-smoothing: antialiased;
 +
}
 +
.caption-type {
 +
font-family: 'Roboto', sans-serif;
 +
font-size: 18pt !important;
 +
text-decoration: none !important;
 +
-webkit-font-smoothing: antialiased;
 +
font-smoothing: antialiased;
 +
}
 +
.inline-heading-type {
 +
font-family: 'Roboto', sans-serif !important;
 +
font-size: 20pt !important;
 +
font-weight: bold !important;
 +
text-decoration: none !important;
 +
line-height: 2 pt !important;
 +
-webkit-font-smoothing: antialiased;
 +
font-smoothing: antialiased;
 +
}
 +
.float-left {
 +
float: left !important;
 +
}
 +
.float-right {
 +
float: right !important;
 +
}
 +
.align-right {
 +
text-align: right !important;
 +
}
 +
.align-center {
 +
text-align: center !important;
 +
}
 +
.indented {
 +
text-indent: 80px;
 +
}
 +
.mainwrap {
 +
width: 90%;
 +
max-width: 960px;
 +
min-width: 360px;
 +
margin: 0 auto;
 +
top:0;
 +
display: none;
 +
}
 +
body {
 +
background-image: url("https://static.igem.org/mediawiki/2017/c/c1/T--BostonU--seaport.png");
 +
background-repeat: no-repeat;
 +
    background-attachment: fixed;
 +
-webkit-background-size: cover;
 +
-moz-background-size: cover;
 +
-o-background-size: cover;
 +
background-size: cover !important;
 +
}
 +
#backgroundimage1 {
 +
margin-top: -85px;
 +
background-image: url("#");
 +
background-repeat: no-repeat;
 +
    background-attachment: cover;
 +
-webkit-background-size: cover;
 +
-moz-background-size: cover;
 +
-o-background-size: cover;
 +
background-size: cover !important;
 +
height: 360px;
 +
width: 100%;
 +
align-content:center;
 +
text-align:center
 +
vertical-align:middle;
 +
}
 +
#backgroundimage1 p {
 +
top: 40%;
 +
color: #8C181B;
 +
position: relative;
 +
}
 +
.background-gradient-down {
 +
height: 360px;
 +
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efefee+0,efefee+100&0+0,1+100 */
 +
background: -moz-linear-gradient(top, rgba(239,239,238,0) 0%, rgba(239,239,238,1) 100%); /* FF3.6-15 */
 +
background: -webkit-linear-gradient(top, rgba(239,239,238,0) 0%,rgba(239,239,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
 +
background: linear-gradient(to bottom, rgba(239,239,238,0) 0%,rgba(239,239,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00efefee', endColorstr='#efefee',GradientType=0 ); /* IE6-9 */
 +
}
 +
.background-gradient-up {
 +
height: 360px;
 +
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efefee+0,efefee+100&1+0,0+100 */
 +
background: -moz-linear-gradient(top, rgba(239,239,238,1) 0%, rgba(239,239,238,0) 100%); /* FF3.6-15 */
 +
background: -webkit-linear-gradient(top, rgba(239,239,238,1) 0%,rgba(239,239,238,0) 100%); /* Chrome10-25,Safari5.1-6 */
 +
background: linear-gradient(to bottom, rgba(239,239,238,1) 0%,rgba(239,239,238,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefee', endColorstr='#00efefee',GradientType=0 ); /* IE6-9 */
 +
}
 +
.background-gradient-both {
 +
height: 360px;
 +
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efefee+0,efefee+50,efefee+100&1+0,0+50,1+100 */
 +
background: -moz-linear-gradient(top, rgba(239,239,238,1) 0%, rgba(239,239,238,0) 50%, rgba(239,239,238,1) 100%); /* FF3.6-15 */
 +
background: -webkit-linear-gradient(top, rgba(239,239,238,1) 0%,rgba(239,239,238,0) 50%,rgba(239,239,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
 +
background: linear-gradient(to bottom, rgba(239,239,238,1) 0%,rgba(239,239,238,0) 50%,rgba(239,239,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefee', endColorstr='#efefee',GradientType=0 ); /* IE6-9 */
 +
}
 +
#panel1 {
 +
background: #EFEFEE;
 +
width: 100%;
 +
color: #1d1d1d;
 +
z-index: 1;
 +
}
 +
#backgroundimage2 {
 +
background-image: url("#");
 +
background-repeat: no-repeat;
 +
    background-attachment: cover;
 +
-webkit-background-size: cover;
 +
-moz-background-size: cover;
 +
-o-background-size: cover;
 +
background-size: cover !important;
 +
height: 360px;
 +
width: 100%;
 +
position: relative;
 +
}
 +
#backgroundimage2 p {
 +
top: 40%;
 +
color: #8C181B;
 +
}
 +
#protocol-accordion .ui-accordion-content  {
 +
background: #FFFFFF;
 +
color: #A9A9A9;
 +
border-radius: 20px;
 +
}
 +
#protocol-accordion .ui-accordion-content > * {
 +
  margin: 0;
 +
  padding: 40px;
 +
}
 +
.link-slideup {
 +
position: relative;
 +
overflow: hidden;
 +
-webkit-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
}
 +
.link-slideup a {
 +
position: relative;
 +
display: inline-block;
 +
outline: none;
 +
color: #D45B5C;
 +
vertical-align: bottom;
 +
text-decoration: none;
 +
white-space: nowrap;
 +
}
 +
.link-slideup a::before, .link-slideup a::after {
 +
pointer-events: none;
 +
-webkit-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
}
 +
.link-slideup a {
 +
overflow: hidden;
 +
font-weight: 500;
 +
}
 +
.link-slideup a::before {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
z-index: -1;
 +
width: 100%;
 +
height: 100%;
 +
background-color: #A9A9A9;
 +
opacity: 1;
 +
content: '';
 +
-webkit-transition: -webkit-transform 0.2s;
 +
transition: transform 0.2s;
 +
-webkit-transform: translateY(95%);
 +
transform: translateY(95%);
 +
opacity: 0.3;
 +
}
 +
.link-slideup a:hover::before, .link-slideup a:focus::before {
 +
-webkit-transform: translateY(0);
 +
transform: translateY(0);
 +
}
 +
/* --- Carousel --- */
 +
.carousel {
 +
  position: relative;
 +
  width: 600px;
 +
  height: 400px;
 +
  overflow: hidden;
 +
  margin: 0 auto;
 +
  box-sizing: border-box;
 +
}
 +
.carousel:hover .slide:after,
 +
.carousel:hover .counter,
 +
.carousel:hover .slide:before {
 +
  opacity: 1;
 +
}
 +
.slide {
 +
  float: right;
 +
  position: absolute;
 +
  z-index: 1;
 +
  width: 600px;
 +
  height: 400px;
 +
  background-color: #eee;
 +
  text-align: center;
 +
  transition: opacity 0.4s;
 +
  opacity: 1;
 +
}
 +
.slide:before {
 +
  content: attr(annot);
 +
  display: block;
 +
  position: absolute;
 +
  left: 20px;
 +
  bottom: 20px;
 +
  color: rgba(255,255,255,0.9);
 +
  font-size: 14px;
 +
  font-weight: 300;
 +
  z-index: 12;
 +
  opacity: 0;
 +
  transition: opacity 0.3s;
 +
  text-shadow: 0 0 1px #000;
 +
}
 +
.slide:after {
 +
  content: attr(slide);
 +
  display: block;
 +
  position: absolute;
 +
  bottom: 0;
 +
  transition: opacity 0.3s;
 +
  width: 100%;
 +
  height: 80px;
 +
  opacity: 0;
 +
  background-image: linear-gradient(transparent, rgba(0,0,0,0.5));
 +
  text-align: left;
 +
  text-indent: 549px;
 +
  line-height: 101px;
 +
  font-size: 13px;
 +
  color: rgba(255,255,255,0.9);
 +
  text-shadow: 0 0 1px #000;
 +
}
 +
.counter {
 +
  position: absolute;
 +
  bottom: 20px;
 +
  right: 1px;
 +
  height: 20px;
 +
  width: 60px;
 +
  z-index: 2;
 +
  text-align: center;
 +
  color: #fff;
 +
  line-height: 21px;
 +
  font-size: 13px;
 +
  opacity: 0;
 +
  transition: opacity 0.3s;
 +
}
 +
.faux-ui-facia {
 +
  top: 0;
 +
  right: 0;
 +
  float: right;
 +
  position: absolute;
 +
  margin-top: 0;
 +
  z-index: 9;
 +
  height: 100%;
 +
  width: 100%;
 +
  opacity: 0;
 +
  cursor: pointer;
 +
}
 +
.faux-ui-facia:checked {
 +
  z-index: 8;
 +
}
 +
.faux-ui-facia:checked + .slide {
 +
  opacity: 0;
 +
}
 +
.faux-ui-facia:checked:nth-child(1):checked {
 +
  z-index: 9;
 +
}
 +
.faux-ui-facia:nth-child(1):checked {
 +
  float: left;
 +
  z-index: 9;
 +
}
 +
.faux-ui-facia:nth-child(1):checked + .slide {
 +
  opacity: 1;
 +
}
 +
.faux-ui-facia:nth-child(1):checked ~ .faux-ui-facia {
 +
  float: left;
 +
  z-index: 8;
 +
}
 +
.faux-ui-facia:nth-child(1):checked ~ .faux-ui-facia + .slide {
 +
  opacity: 0;
 +
}
 +
.faux-ui-facia:nth-child(1):checked ~ .faux-ui-facia:checked {
 +
  z-index: 9;
 +
}
 +
.faux-ui-facia:nth-child(1):checked ~ .faux-ui-facia:checked + .slide {
 +
  opacity: 1;
 +
}
 +
/* --- END of Carousel --- */
 +
</style>
 +
</head>
 +
<body>
 +
<div id="backgroundimage1"><div class="background-gradient-down">
 +
  <p class="wide-heading-type mainwrap align-center">LAB NOTEBOOK</p>
 +
</div></div>
 +
<div id="panel1" class="link-slideup">
 +
  <p class="body-type mainwrap indented">&nbsp;</p>
 +
  <p class="body-type mainwrap indented">Our Benchling-based lab notebook is available here as a PDF. It contains protocols, experimental setups, and everyday trials and tribulations at the lab bench that other teams may find useful or interesting.</p>
 +
  <p class="body-type mainwrap indented">&nbsp;</p>
 +
  <object width="400" height="400" data="https://static.igem.org/mediawiki/2017/3/3b/T--BostonU--benchling_notebook.pdf"></object>
 +
</div>
 +
<div id="backgroundimage2"><div class="background-gradient-up">
 +
</div></div>
 +
<script> /* THIS MAKES ANY WRAPPED ELEMENT ON THE PAGE FADE IN */
 +
$(document).ready(function () {
 +
    $('.mainwrap').fadeIn(1000);
 +
});
 +
</script>
 +
</body>
 +
</html>

Revision as of 20:51, 29 October 2017

LAB NOTEBOOK