|
|
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> |