|
|
Line 241: |
Line 241: |
| | | |
| <!-- lightbox css --> | | <!-- lightbox css --> |
− | /*Reset leafbox*/
| |
− | figure.leafbox img, figure.leafbox:target, a.close {top: 0;left: 0;right: 0;bottom: 0;}
| |
− | figure.leafbox {margin: 0;overflow: hidden;position: fixed;width: 100%;left: -100%;}
| |
− | figure.leafbox a.close {height: 100%;width: 100%;position: absolute;}
| |
− | 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;
| |
− | }
| |
− |
| |
− | /*transiciones*/
| |
− | figure.leafbox:target img {
| |
− | -webkit-transition-timing-function: cubic-bezier(0.7, 0.2, 0.5, 1.6);
| |
− | -moz-transition-timing-function: cubic-bezier(0.7, 0.2, 0.5, 1.6);
| |
− | -o-transition-timing-function: cubic-bezier(0.7, 0.2, 0.5, 1.6);
| |
− | transition-timing-function: cubic-bezier(0.7, 0.2, 0.5, 1.6);
| |
− | /****/
| |
− | -webkit-transition-property: transform, opacity, max-height, max-width;
| |
− | -moz-transition-property: transform, opacity, max-height, max-width;
| |
− | -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);
| |
− | }
| |
− |
| |
− | figure.leafbox {
| |
− | -webkit-transition: opacity 0.5s ease 0s;
| |
− | -moz-transition: opacity 0.5s ease 0s;
| |
− | -o-transition: opacity 0.5s ease 0s;
| |
− | transition: opacity 0.5s ease 0s;
| |
− | /*Fix chrome
| |
− | --------------------------*/
| |
− | -webkit-transform: translateZ(0);
| |
− | }
| |
− |
| |
− | figure.leafbox {
| |
− | background: rgba(0, 0, 0, 0.6);
| |
− | opacity: 0;
| |
− | }
| |
− | figure.leafbox:target {opacity: 1; z-index: 9999;}
| |
− |
| |
− | figure.leafbox img {
| |
− | background:#333;
| |
− | 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%);
| |
− | }
| |
− |
| |
− | 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);}
| |
− |
| |
− | figure.leafbox a.close {
| |
− | display: block;
| |
− | z-index: 400;
| |
− | cursor: default;
| |
− | }
| |
− |
| |
− | /*Estilos de ayuda*/
| |
− | .lf-ease figure.leafbox:target img, .lf-zin figure.leafbox:target img, .lf-fade figure.leafbox:target img, .lf-zout figure.leafbox:target img {
| |
− | -webkit-transition-timing-function: ease;
| |
− | -moz-transition-timing-function: ease;
| |
− | -o-transition-timing-function: ease;
| |
− | transition-timing-function: ease;
| |
− | }
| |
− | figure.leafbox img, .lf-zin figure.leafbox:target img, .lf-zin figure.leafbox:target img {
| |
− | max-height: 90%;
| |
− | max-width: 90%;
| |
− | }
| |
− | .lf-fade figure.leafbox img, .lf-zin figure.leafbox img, .lf-zout figure.leafbox img {
| |
− | transform: translateY(0px);
| |
− | -moz-transform: translateY(0px);
| |
− | -webkit-transform: translateY(0px);
| |
− | -o-transform: translateY(0px);
| |
− | -ms-transform: translateY(0px);
| |
− | }
| |
− |
| |
− | /*Ease*/
| |
− | .lf-ease figure.leafbox img {
| |
− | transform: translateY(40%);
| |
− | -moz-transform: translateY(40%);
| |
− | -webkit-transform: translateY(40%);
| |
− | -o-transform: translateY(40%);
| |
− | -ms-transform: translateY(40%);
| |
− | }
| |
− | /*Fade -zin [inherit]*/
| |
− |
| |
− | /*Zoom-In*/
| |
− | .lf-zin figure.leafbox img {
| |
− | max-height: 0%;
| |
− | max-width: 0%;
| |
− | opacity: 1;
| |
− | }
| |
− |
| |
− | /*Zoom-Out*/
| |
− | .lf-zout figure.leafbox img {
| |
− | transform: scale(3,2);
| |
− | -moz-transform: scale(3,2);
| |
− | -webkit-transform: scale(3,2);
| |
− | -o-transform: scale(3,2);
| |
− | -ms-transform: scale(3,2);
| |
− | }
| |
− | .lf-zout figure.leafbox:target img {
| |
− | transform: scale(1,1);
| |
− | -moz-transform: scale(1,1);
| |
− | -ms-transform: scale(1,1);
| |
− | -o-transform: scale(1,1);
| |
− | -webkit-transform: scale(1,1);
| |
− | }
| |
− |
| |
− | ul {
| |
− | margin: 0;
| |
− | padding: 0;
| |
− | text-align: center;
| |
− | font-size: 0;
| |
− | line-height: 0;
| |
− | }
| |
− | ul li {
| |
− | display: inline-block;
| |
− | width: 15%;
| |
− | height: 0;
| |
− | padding-bottom: 16%;
| |
− | margin: 1%;
| |
− | overflow: hidden;
| |
− | }
| |
| </style> | | </style> |
| | | |
Line 441: |
Line 297: |
| <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> |
| | | |
− | <ul>
| + | |
− | <li>
| + | |
− | <a class="leaf" href="#ejemplo">
| + | |
− | <img src="http://lorempixel.com/400/300/sports/1"/>
| + | |
− | </a>
| + | |
− | <figure id="ejemplo" class="leafbox">
| + | |
− | <img src="http://lorempixel.com/400/300/sports/1"/><a class="close" href="#_"></a>
| + | |
− | </figure>
| + | |
− | </li>
| + | |
− | <li class="lf-ease">
| + | |
− | <a class="leaf" href="#ejemplo2">
| + | |
− | <img src="http://lorempixel.com/400/300/sports/2"/>
| + | |
− | </a>
| + | |
− | <figure id="ejemplo2" class="leafbox">
| + | |
− | <img src="http://lorempixel.com/400/300/sports/2"/><a class="close" href="#_"></a>
| + | |
− | </figure>
| + | |
− | </li>
| + | |
− | <li class="lf-fade">
| + | |
− | <a class="leaf" href="#ejemplo3">
| + | |
− | <img src="http://lorempixel.com/400/300/sports/3"/>
| + | |
− | </a>
| + | |
− | <figure id="ejemplo3" class="leafbox">
| + | |
− | <img src="http://lorempixel.com/400/300/sports/3"/><a class="close" href="#_"></a>
| + | |
− | </figure>
| + | |
− | </li>
| + | |
− | <li class="lf-zin">
| + | |
− | <a class="leaf" href="#ejemplo4">
| + | |
− | <img src="http://lorempixel.com/400/300/sports/4"/>
| + | |
− | </a>
| + | |
− | <figure id="ejemplo4" class="leafbox">
| + | |
− | <img src="http://lorempixel.com/400/300/sports/4"/><a class="close" href="#_"></a>
| + | |
− | </figure>
| + | |
− | </li>
| + | |
− | <li class="lf-zout">
| + | |
− | <a class="leaf" href="#ejemplo5">
| + | |
− | <img src="http://lorempixel.com/400/300/sports/5"/>
| + | |
− | </a>
| + | |
− | <figure id="ejemplo5" class="leafbox">
| + | |
− | <img src="http://lorempixel.com/400/300/sports/5"/><a class="close" href="#_"></a>
| + | |
− | </figure>
| + | |
− | </li>
| + | |
− | </ul>
| + | |
| | | |
| <p><b>Tip:</b> Click any image to enlarge.</b></p> | | <p><b>Tip:</b> Click any image to enlarge.</b></p> |