Difference between revisions of "Team:LUBBOCK TTU/Notebook"

Line 241: Line 241:
  
 
<!-- lightbox css -->
 
<!-- lightbox css -->
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img {
+
/*Reset leafbox*/
  margin: 0;
+
figure.leafbox img, figure.leafbox:target, a.close {top: 0;left: 0;right: 0;bottom: 0;}
padding: 0;
+
figure.leafbox {margin: 0;overflow: hidden;position: fixed;width: 100%;left: -100%;}
border: 0;
+
figure.leafbox a.close {height: 100%;width: 100%;position: absolute;}
outline: 0;
+
figure.leafbox img, a.close {
 +
  -webkit-user-select: none;
 +
  -moz-user-select: none;
 +
/*no hay soporte para las siguientes
 +
  propiedades pero igual las incluyo*/
 +
  -ms-user-select: none;
 +
  -o-user-select: none;
 +
/*box-sizing*/
 +
  box-sizing: border-box;
 +
  -webkit-box-sizing: border-box;
 +
  -moz-box-sizing: border-box;
 
}
 
}
  
#content {
+
/*transiciones*/
  position: static;
+
figure.leafbox:target img {
border: 1px solid #ddd;
+
  -webkit-transition-timing-function: cubic-bezier(0.7, 0.2, 0.5, 1.6);
  overflow: hidden;
+
  -moz-transition-timing-function: cubic-bezier(0.7, 0.2, 0.5, 1.6);
  width: 400px;
+
  -o-transition-timing-function: cubic-bezier(0.7, 0.2, 0.5, 1.6);
margin: 0 auto;
+
  transition-timing-function: cubic-bezier(0.7, 0.2, 0.5, 1.6);
  padding: 10px;
+
/****/
  margin-top: 20px;
+
  -webkit-transition-property: transform, opacity, max-height, max-width;
  font-size: 70%;
+
  -moz-transition-property: transform, opacity, max-height, max-width;
line-height: 1.2;
+
  -o-transition-property: transform, opacity, max-height, max-width;
 +
  transition-property: transform, opacity, max-height, max-width;
 +
/****/
 +
  -webkit-transition-duration: 500ms;
 +
  -moz-transition-duration: 500ms;
 +
  -o-transition-duration: 500ms;
 +
  transition-duration: 500ms;
 +
/*Fix chrome
 +
--------------------------*/
 +
  -webkit-transform: translateZ(0);
 
}
 
}
  
.gallery .light {
+
figure.leafbox {
  display:block;
+
  -webkit-transition: opacity 0.5s ease 0s;
  position:fixed;
+
  -moz-transition: opacity 0.5s ease 0s;
  height:100%;
+
  -o-transition: opacity 0.5s ease 0s;
  width:100%;
+
  transition: opacity 0.5s ease 0s;
  top:0;
+
/*Fix chrome
  bottom:0;
+
--------------------------*/
  right:0;
+
  -webkit-transform: translateZ(0);
  left:-9999px;
+
  background-color:black;
+
  z-index:19;
+
  cursor:default;
+
 
}
 
}
  
.gallery .lightbox {
+
figure.leafbox {
  display: table;
+
  background: rgba(0, 0, 0, 0.6);
  position:fixed;
+
  opacity: 0;
  height:100%;
+
  width:100%;
+
  top:0;
+
  bottom:0;
+
  right:0;
+
  left:-9999px;
+
  z-index:20;
+
  cursor:default;
+
 
}
 
}
 +
figure.leafbox:target {opacity: 1; z-index: 9999;}
  
.gallery .lightbox .middle {
+
figure.leafbox img {
  display: table-cell;
+
  background:#333;
vertical-align: middle;
+
  box-shadow:0 0 5px rgba(0, 0, 0, 0.3);
 +
  box-sizing:border-box;
 +
  margin:auto;
 +
  padding:8px;
 +
  position:absolute;
 +
  z-index:500;
 +
  transform:translateY(-40%);
 +
  -moz-transform:translateY(-40%);
 +
  -webkit-transform:translateY(-40%);
 +
  -o-transform:translateY(-40%);
 +
  -ms-transform:translateY(-40%);
 
}
 
}
  
.gallery .lightbox .inner {
+
figure.leafbox:target img, .lf-ease figure.leafbox:target img {transform:translateY(0px);-moz-transform:translateY(0px);-ms-transform:translateY(0px);-webkit-transform:translateY(0px);-o-transform:translateY(0px);}
  display:table;
+
  margin:0 auto;
+
  margin-top:-5%;
+
  text-align:center;
+
  background-color:white;
+
  padding:20px;
+
}
+
  
.gallery a:active .lightbox,
+
figure.leafbox a.close {
.gallery a:focus .lightbox {
+
  display: block;
  left:0;
+
  z-index: 400;
 +
  cursor: default;
 
}
 
}
  
.gallery a:active .light,
+
/*Estilos de ayuda*/
.gallery a:focus .light {
+
.lf-ease figure.leafbox:target img, .lf-zin figure.leafbox:target img, .lf-fade figure.leafbox:target img, .lf-zout figure.leafbox:target img {
  left:0;
+
  -webkit-transition-timing-function: ease;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* opacité sur IE */
+
  -moz-transition-timing-function: ease;
  filter: alpha(opacity=75);                                        
+
  -o-transition-timing-function: ease;
  opacity:0.75;
+
  transition-timing-function: ease;
 
}
 
}
 
+
figure.leafbox img, .lf-zin figure.leafbox:target img, .lf-zin figure.leafbox:target img {
.gallery a .close {
+
  max-height: 90%;
  display:block;
+
  max-width: 90%;
position:fixed;
+
right:-30px;
+
top:0;
+
width:16px;
+
height:16px;
+
background-image:url(img/close.gif);
+
z-index:200;
+
  margin: 10px 10px 0 0;
+
 
}
 
}
 
+
.lf-fade figure.leafbox img, .lf-zin figure.leafbox img, .lf-zout figure.leafbox img {
.gallery a:active .close,
+
  transform: translateY(0px);
.gallery a:focus .close {
+
  -moz-transform: translateY(0px);
  right:0;
+
  -webkit-transform: translateY(0px);
 +
  -o-transform: translateY(0px);
 +
  -ms-transform: translateY(0px);
 
}
 
}
  
#selfRef {
+
/*Ease*/
  display:block;
+
.lf-ease figure.leafbox img {
position:fixed;
+
  transform: translateY(40%);
width:16px;
+
  -moz-transform: translateY(40%);
height:16px;
+
  -webkit-transform: translateY(40%);
right:0;
+
  -o-transform: translateY(40%);
top:0;
+
  -ms-transform: translateY(40%);
z-index:300;
+
margin: 10px 10px 0 0;
+
outline:none;
+
  background-image:url(img/1x1.png);
+
 
}
 
}
 +
/*Fade -zin [inherit]*/
  
.gallery .lightbox .description {
+
/*Zoom-In*/
  display:inline-block;
+
.lf-zin figure.leafbox img {
max-width:500px;
+
  max-height: 0%;
  color:gray;
+
  max-width: 0%;
  margin-top:20px;
+
  opacity: 1;
 
}
 
}
  
.gallery {
+
/*Zoom-Out*/
  list-style:none;
+
.lf-zout figure.leafbox img {
float:left;
+
  transform: scale(3,2);
margin:0;
+
  -moz-transform: scale(3,2);
padding:10px 0 10px 0;
+
  -webkit-transform: scale(3,2);
width:240px;
+
  -o-transform: scale(3,2);
 +
  -ms-transform: scale(3,2);
 
}
 
}
 
+
.lf-zout figure.leafbox:target img {
.gallery li {
+
  transform: scale(1,1);
float:left;
+
  -moz-transform: scale(1,1);
  display:inline;
+
  -ms-transform: scale(1,1);
  padding:0;
+
  -o-transform: scale(1,1);
  width:50px;
+
  -webkit-transform: scale(1,1);
  margin:5px 10px 5px 0;
+
 
}
 
}
  
.gallery a,
+
ul {
.gallery a:visited,
+
  margin: 0;
.gallery a:hover {
+
  padding: 0;
   text-decoration:none;
+
   text-align: center;
 +
  font-size: 0;
 +
  line-height: 0;
 
}
 
}
 
+
ul li {
.gallery img {
+
   display: inline-block;
   display:block;
+
  width: 15%;
}
+
  height: 0;
 
+
   padding-bottom: 16%;
.gallery .lightbox img {
+
  margin: 1%;
   display:inline;
+
   overflow: hidden;
}
+
 
+
.clear {
+
   clear:both;
+
 
}
 
}
 
</style>
 
</style>
Line 440: Line 441:
 
<p align="left">The iGEM Raiders team met for the weekly meeting. Strategy and talking points were discussed to prepare members for recruiting funding from potential donors. Additionally, fundraising, university sponsor, and outreach updates were discussed.</p>
 
<p align="left">The iGEM Raiders team met for the weekly meeting. Strategy and talking points were discussed to prepare members for recruiting funding from potential donors. Additionally, fundraising, university sponsor, and outreach updates were discussed.</p>
  
<div><a id="selfRef" href="#"></a></div>
+
<ul>
<div id="content">
+
  <li>
 
+
    <a class="leaf" href="#ejemplo">
<!-- Start gallery -->
+
      <img src="http://lorempixel.com/400/300/sports/1"/>
<ul class="gallery">
+
    </a>
<li>
+
    <figure id="ejemplo" class="leafbox">
<a href="#">
+
      <img src="http://lorempixel.com/400/300/sports/1"/><a class="close" href="#_"></a>
        <img src="http://maistriau.kooka.be/2012/img/atelier/mini/awake1.png" alt="" height="50" width="50">
+
    </figure>
<span class="lightbox">
+
  </li>
<span class="middle">
+
  <li class="lf-ease">
<span class="inner">
+
    <a class="leaf" href="#ejemplo2">
              <img src="http://maistriau.kooka.be/2012/img/atelier/mini/awake1.png" alt=""><br>
+
      <img src="http://lorempixel.com/400/300/sports/2"/>
<span class="description">AWAKE</span>
+
    </a>
</span>
+
    <figure id="ejemplo2" class="leafbox">
</span>
+
      <img src="http://lorempixel.com/400/300/sports/2"/><a class="close" href="#_"></a>
</span>
+
    </figure>
<span class="light"></span>
+
  </li>
<span class="close"></span>
+
  <li class="lf-fade">
</a>
+
    <a class="leaf" href="#ejemplo3">
</li>
+
      <img src="http://lorempixel.com/400/300/sports/3"/>
 
+
    </a>
<li>
+
    <figure id="ejemplo3" class="leafbox">
<a href="#">
+
      <img src="http://lorempixel.com/400/300/sports/3"/><a class="close" href="#_"></a>
<img src="http://maistriau.kooka.be/2012/img/atelier/mini/dna_intro.png" alt="" height="50" width="50">
+
    </figure>
<span class="lightbox">
+
  </li>
<span class="middle">
+
  <li class="lf-zin">
<span class="inner">
+
    <a class="leaf" href="#ejemplo4">
<img src="http://maistriau.kooka.be/2012/img/atelier/mini/dna_intro.png" alt=""><br>
+
      <img src="http://lorempixel.com/400/300/sports/4"/>
<span class="description">Dark Night for Angels</span>
+
    </a>
</span>
+
    <figure id="ejemplo4" class="leafbox">
</span>
+
      <img src="http://lorempixel.com/400/300/sports/4"/><a class="close" href="#_"></a>
</span>
+
    </figure>
<span class="light"></span>
+
  </li>
<span class="close"></span>
+
  <li class="lf-zout">
</a>
+
    <a class="leaf" href="#ejemplo5">
</li>
+
      <img src="http://lorempixel.com/400/300/sports/5"/>
 
+
    </a>
<li>
+
    <figure id="ejemplo5" class="leafbox">
<a href="#">
+
      <img src="http://lorempixel.com/400/300/sports/5"/><a class="close" href="#_"></a>
<img src="http://maistriau.kooka.be/2012/img/atelier/mini/lolotte1.png" alt="" height="50" width="50">
+
    </figure>
<span class="lightbox">
+
  </li>
<span class="middle">
+
</ul>
<span class="inner">
+
<img src="http://maistriau.kooka.be/2012/img/atelier/mini/lolotte1.png" alt=""><br>
+
<span class="description">Lolotte, le poisson-loupiotte</span>
+
</span>
+
</span>
+
</span>
+
<span class="light"></span>
+
<span class="close"></span>
+
</a>
+
</li>
+
<!-- End gallery -->
+
 
+
</div>
+
  
 
<p><b>Tip:</b> Click any image to enlarge.</b></p>
 
<p><b>Tip:</b> Click any image to enlarge.</b></p>

Revision as of 16:36, 26 May 2017

Notebook



Title 1

The iGEM Raiders team held a meeting to create a promotional flyer to be used for acquiring support and fundraising. Team members were assigned blurbs to write for the flyer covering topics including what iGEM is, what our project is, why iGEM should continue at Texas Tech, why it should be supported, and our prospective goals such as being published. Team member Kaitlyn was assigned the task of designing the flyer. View our flyer here.



Title 2

The iGEM Raiders team met for the weekly meeting. Officer elections were held and the team discussed funding for team registration, bio-curriculum to be taught at ULabs, and delegated tasks to members. Check our our members here!



Title 3

The iGEM Raiders team met for the weekly meeting. Strategy and talking points were discussed to prepare members for recruiting funding from potential donors. Additionally, fundraising, university sponsor, and outreach updates were discussed.

Tip: Click any image to enlarge.



Title 4

The iGEM Raiders team attended a dinner to get to know one another.