|
|
| Line 1: |
Line 1: |
| | {{CSS_UCL2}} | | {{CSS_UCL2}} |
| | | | |
| − | <html>
| + | text |
| − | | + | |
| − | <script type="text/javascript">
| + | |
| − | /** Used Only For Touch Devices **/
| + | |
| − | (function(window) {
| + | |
| − | | + | |
| − | // for touch devices: add class cs-hover to the figures when touching the items
| + | |
| − | if (Modernizr.touch) {
| + | |
| − | | + | |
| − | // classie.js https://github.com/desandro/classie/blob/master/classie.js
| + | |
| − | // class helper functions from bonzo https://github.com/ded/bonzo
| + | |
| − | | + | |
| − | function classReg(className) {
| + | |
| − | return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
| + | |
| − | }
| + | |
| − | | + | |
| − | // classList support for class management
| + | |
| − | // altho to be fair, the api sucks because it won't accept multiple classes at once
| + | |
| − | var hasClass, addClass, removeClass;
| + | |
| − | | + | |
| − | if ('classList' in document.documentElement) {
| + | |
| − | hasClass = function(elem, c) {
| + | |
| − | return elem.classList.contains(c);
| + | |
| − | };
| + | |
| − | addClass = function(elem, c) {
| + | |
| − | elem.classList.add(c);
| + | |
| − | };
| + | |
| − | removeClass = function(elem, c) {
| + | |
| − | elem.classList.remove(c);
| + | |
| − | };
| + | |
| − | } else {
| + | |
| − | hasClass = function(elem, c) {
| + | |
| − | return classReg(c).test(elem.className);
| + | |
| − | };
| + | |
| − | addClass = function(elem, c) {
| + | |
| − | if (!hasClass(elem, c)) {
| + | |
| − | elem.className = elem.className + ' ' + c;
| + | |
| − | }
| + | |
| − | };
| + | |
| − | removeClass = function(elem, c) {
| + | |
| − | elem.className = elem.className.replace(classReg(c), ' ');
| + | |
| − | };
| + | |
| − | }
| + | |
| − | | + | |
| − | function toggleClass(elem, c) {
| + | |
| − | var fn = hasClass(elem, c) ? removeClass : addClass;
| + | |
| − | fn(elem, c);
| + | |
| − | }
| + | |
| − | | + | |
| − | var classie = {
| + | |
| − | // full names
| + | |
| − | hasClass: hasClass,
| + | |
| − | addClass: addClass,
| + | |
| − | removeClass: removeClass,
| + | |
| − | toggleClass: toggleClass,
| + | |
| − | // short names
| + | |
| − | has: hasClass,
| + | |
| − | add: addClass,
| + | |
| − | remove: removeClass,
| + | |
| − | toggle: toggleClass
| + | |
| − | };
| + | |
| − | | + | |
| − | // transport
| + | |
| − | if (typeof define === 'function' && define.amd) {
| + | |
| − | // AMD
| + | |
| − | define(classie);
| + | |
| − | } else {
| + | |
| − | // browser global
| + | |
| − | window.classie = classie;
| + | |
| − | }
| + | |
| − | | + | |
| − | [].slice.call(document.querySelectorAll('.team-grid__member')).forEach(function(el, i) {
| + | |
| − | el.querySelector('.member__info').addEventListener('touchstart', function(e) {
| + | |
| − | e.stopPropagation();
| + | |
| − | }, false);
| + | |
| − | el.addEventListener('touchstart', function(e) {
| + | |
| − | classie.toggle(this, 'cs-hover');
| + | |
| − | }, false);
| + | |
| − | });
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | })(window);
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <style type="text/css">
| + | |
| − | $tisa: ff-tisa-web-pro;
| + | |
| − | | + | |
| − | $burlywood: #D9BC55;
| + | |
| − | $title-on-black: $burlywood;
| + | |
| − | | + | |
| − | .wrapper--team {
| + | |
| − | margin: 0;
| + | |
| − | padding: 2rem 1rem;
| + | |
| − | background-color: #EFE2E5;
| + | |
| − | }
| + | |
| − | | + | |
| − | .l-container {
| + | |
| − | margin: 0 auto;
| + | |
| − | }
| + | |
| − | @media screen and (min-width: 64em) {
| + | |
| − | .l-container {
| + | |
| − | max-width: 64rem;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @media screen and (min-width: 75em) {
| + | |
| − | .l-container {
| + | |
| − | max-width: 75rem;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | .team-grid {
| + | |
| − | margin: 0;
| + | |
| − | text-align: center;
| + | |
| − | *zoom: 1;
| + | |
| − | | + | |
| − | &:before, &:after {
| + | |
| − | content: " ";
| + | |
| − | display: table;
| + | |
| − | }
| + | |
| − | | + | |
| − | &:after {
| + | |
| − | clear: both;
| + | |
| − | }
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | .team-grid__member {
| + | |
| − | font-family: $tisa;
| + | |
| − |
| + | |
| − | max-width: 100%;
| + | |
| − | padding: 0.5rem;
| + | |
| − | margin: 0 0 0.5rem;
| + | |
| − | | + | |
| − | display: inline-block;
| + | |
| − | float: none;
| + | |
| − | width: 100%;
| + | |
| − | | + | |
| − | text-align: justify;
| + | |
| − | box-sizing: border-box;
| + | |
| − |
| + | |
| − | }
| + | |
| − | | + | |
| − | @media screen and (min-width: 28em) {
| + | |
| − | .team-grid__member {
| + | |
| − | width: 49%;
| + | |
| − | max-width: none;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @media screen and (min-width: 42em) {
| + | |
| − | .team-grid__member {
| + | |
| − | width: 32.5%;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | @media screen and (min-width: 62em) {
| + | |
| − | .team-grid__member {
| + | |
| − | width: 30%;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | //////////////////////
| + | |
| − | // MODULE GRID
| + | |
| − | //////////////////////
| + | |
| − | .team-grid__member {
| + | |
| − | position: relative;
| + | |
| − | overflow: hidden;
| + | |
| − | }
| + | |
| − | | + | |
| − | .team-grid__member img {
| + | |
| − | width: 100%;
| + | |
| − | height: auto;
| + | |
| − | border: 8px solid #fff;
| + | |
| − | box-sizing: border-box;
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | | + | |
| − | .center-vert-content img {border: none; display: inline; float: right; }
| + | |
| − | | + | |
| − | .member__info {
| + | |
| − | color: #3D3543;
| + | |
| − | height: auto;
| + | |
| − | width: auto;
| + | |
| − | opacity: 0;
| + | |
| − | position: absolute;
| + | |
| − | top: 1rem;
| + | |
| − | left: 1rem;
| + | |
| − | right: 1rem;
| + | |
| − | bottom: 1rem;
| + | |
| − | padding: 0.5rem;
| + | |
| − | background: rgba(255, 255, 255, 0.85);
| + | |
| − | | + | |
| − | backface-visibility: hidden;
| + | |
| − | transition: opacity 0.4s ease-in-out;
| + | |
| − | }
| + | |
| − | | + | |
| − | .member__name__1 {
| + | |
| − | color: #1E6073;
| + | |
| − | font-size: 1.2rem;
| + | |
| − | letter-spacing: 1px;
| + | |
| − | line-height: 1.2rem;
| + | |
| − | margin-bottom: 0;
| + | |
| − | padding: 0 12px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .member__name__2 {
| + | |
| − | color: #FE6C68;
| + | |
| − | font-size: 1.2rem;
| + | |
| − | letter-spacing: 1px;
| + | |
| − | line-height: 1.2rem;
| + | |
| − | margin-bottom: 0;
| + | |
| − | padding: 0 12px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .member__name__3 {
| + | |
| − | color: #57a89e;
| + | |
| − | font-size: 1.2rem;
| + | |
| − | letter-spacing: 1px;
| + | |
| − | line-height: 1.2rem;
| + | |
| − | margin-bottom: 0;
| + | |
| − | padding: 0 12px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .member__title {
| + | |
| − | margin-bottom: 0.75rem;
| + | |
| − | font-size: 0.8rem;
| + | |
| − | font-weight: normal;
| + | |
| − | line-height: 1rem;
| + | |
| − | padding: 5px 12px;
| + | |
| − | }
| + | |
| − | | + | |
| − | // FIX THE TOUCH METHOD
| + | |
| − | //.no-touch .team-grid__member:hover .member__info,
| + | |
| − | //.team-grid__member.cs-hover .member__info {
| + | |
| − | // opacity: 1;
| + | |
| − | //}
| + | |
| − | | + | |
| − | .team-grid__member:hover .member__info {
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | // ----- Middle Alignment Vertical ----- //
| + | |
| − | .member__info:before {
| + | |
| − | content: '';
| + | |
| − | display: inline-block;
| + | |
| − | height: 100%;
| + | |
| − | vertical-align: middle;
| + | |
| − | margin-right: -0.25em;
| + | |
| − | }
| + | |
| − | | + | |
| − | .center-vert-content {
| + | |
| − | display: inline-block;
| + | |
| − | vertical-align: middle;
| + | |
| − | }
| + | |
| − | | + | |
| − | </style>
| + | |
| − | | + | |
| − | <script type="text/javascript" src="//use.typekit.net/npe3lft.js"></script>
| + | |
| − | <script type="text/javascript">
| + | |
| − | try {
| + | |
| − | Typekit.load();
| + | |
| − | } catch (e) {}
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <div class="wrapper--team">
| + | |
| − |
| + | |
| − | <div class="l-container">
| + | |
| − | <h3>Team Members</h3>
| + | |
| − | <div class="team-grid">
| + | |
| − | | + | |
| − | <div class="team-grid__member hover">
| + | |
| − | <div class="member__info">
| + | |
| − | <div class="center-vert-content">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2015/8/82/Avatar2.png.png" style="width: 45px; height: 48px;">
| + | |
| − | <h3 class="member__name__1">Marta Napiorkowska</h3>
| + | |
| − | <p class="member__title">BSc Biotechnology (3rd year)</p>
| + | |
| − | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2015/8/80/MG_0417.jpg" alt="Marta">
| + | |
| − | </div>
| + | |
| − |
| + | |
| − |
| + | |
| − | <div class="team-grid__member hover">
| + | |
| − | <div class="member__info">
| + | |
| − | <div class="center-vert-content"><img src="https://static.igem.org/mediawiki/2015/4/46/Avatar1.png.png" style="width: 50px; height: 48px;">
| + | |
| − | <h3 class="member__name__2">Paloma Portella Tores</h3>
| + | |
| − | <p class="member__title">BSc Molecular Biology (2nd Year)</p>
| + | |
| − | I only found out about iGEM when the UCL 2014 team had already been formed, and ever since, I have held on to being part of it as my little joy to look forward to. I enjoy making things, talking to people and taking pictures of both. In iGEM I will try
| + | |
| − | to learn as much as I can from the lab and not make it too untidy, get in touch with people, and make some graphics and pictures.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2015/9/94/MG_0523.jpg" alt="Paloma">
| + | |
| − | </div>
| + | |
| − | | + | |
| − |
| + | |
| − | | + | |
| − | <div class="team-grid__member hover">
| + | |
| − | <div class="member__info">
| + | |
| − | <div class="center-vert-content">
| + | |
| − | <img src="https://static.igem.org/mediawiki/2015/4/4e/Avatar3.png.png" style="width: 40px; height: 48px;">
| + | |
| − | <h3 class="member__name__3">Marta Lebrusant Fernandez</h3>
| + | |
| − |
| + | |
| − | <p class="member__title">Biotechnology (1st year)</p>
| + | |
| − | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2015/9/9c/MG_0410.jpg" alt="Marta">
| + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | </div>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | </html>
| + | |