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

Line 240: Line 240:
 
     }
 
     }
  
<!-- click to enlarge image css -->
+
<!-- lightbox css -->
/*Eliminates padding, centers the thumbnail */
+
.spacer
 +
{
 +
    height: 210px;
 +
}
  
body, html {
+
.pageWrapper
padding: 0;
+
{
margin: 0;
+
    width: 100%;
text-align: center;
+
    max-width: 960px;
 +
    margin: auto;
 +
    padding-right: 40px;
 +
    padding-left: 40px;
 
}
 
}
 +
/*
 +
Lightbox
 +
=============================================================*/
  
/* Styles the thumbnail */
+
.lightboxRow
 +
{
 +
    position: relative;
  
a.lightbox img {
+
    /*border-top: 1px solid #cfcfcf;*/
height: 150px;
+
    border-bottom: 1px solid #cfcfcf;
border: 3px solid white;
+
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
+
margin: 10px 10px 10px 10px;
+
 
}
 
}
  
/* Styles the lightbox, removes it from sight and adds the fade-in transition */
+
.lightbox
 +
{
 +
    width: 100%;
 +
    max-width: 674px;
 +
    margin: auto;
 +
}
  
.lightbox-target {
+
.light
position: fixed;
+
{
top: -100%;
+
    float: left;
width: 100%;
+
 
background: rgba(0,0,0,.7);
+
    box-sizing: border-box;
width: 100%;
+
    margin: 4px 0;
opacity: 0;
+
    padding: 0 4px 0 4px;
-webkit-transition: opacity .5s ease-in-out;
+
-moz-transition: opacity .5s ease-in-out;
+
-o-transition: opacity .5s ease-in-out;
+
transition: opacity .5s ease-in-out;
+
overflow: hidden;
+
 
}
 
}
  
/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */
+
label
 +
{
 +
    position: relative;
 +
 
 +
    display: block;
 +
    overflow: hidden;
  
.lightbox-target img {
+
    width: 100%;
margin: auto;
+
    margin: 0;
position: absolute;
+
    padding-top: 60%;
top: 0;
+
left:0;
+
right:0;
+
bottom: 0;
+
max-height: 0%;
+
max-width: 0%;
+
border: 3px solid white;
+
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
+
box-sizing: border-box;
+
-webkit-transition: .5s ease-in-out;
+
-moz-transition: .5s ease-in-out;
+
-o-transition: .5s ease-in-out;
+
transition: .5s ease-in-out;
+
 
}
 
}
  
/* Styles the close link, adds the slide down transition */
+
label img
 +
{
 +
    position: absolute;
 +
    top: 0;
 +
    left: 0;
  
a.lightbox-close {
+
    width: 100%;
display: block;
+
width:50px;
+
height:50px;
+
box-sizing: border-box;
+
background: white;
+
color: black;
+
text-decoration: none;
+
position: absolute;
+
top: -80px;
+
right: 0;
+
-webkit-transition: .5s ease-in-out;
+
-moz-transition: .5s ease-in-out;
+
-o-transition: .5s ease-in-out;
+
transition: .5s ease-in-out;
+
 
}
 
}
  
/* Provides part of the "X" to eliminate an image from the close link */
+
.lightswitch
 +
{
 +
    display: none;
 +
}
 +
 
 +
.imglarge
 +
{
 +
    position: absolute;
 +
    z-index: 1100;
 +
    top: 50%;
 +
    left: 50%;
 +
 
 +
    visibility: hidden;
 +
 
 +
    width: 100%;
 +
    max-width: 900px;
  
a.lightbox-close:before {
+
    transition: visibility 0s .2s;
content: "";
+
    transition-property: visibility;
display: block;
+
    -webkit-transform: translate(-50%, -50%);
height: 30px;
+
            transform: translate(-50%, -50%);
width: 1px;
+
background: black;
+
position: absolute;
+
left: 26px;
+
top:10px;
+
-webkit-transform:rotate(45deg);
+
-moz-transform:rotate(45deg);
+
-o-transform:rotate(45deg);
+
transform:rotate(45deg);
+
 
}
 
}
  
/* Provides part of the "X" to eliminate an image from the close link */
 
  
a.lightbox-close:after {
+
.innerFloat
content: "";
+
{
display: block;
+
    position: relative;
height: 30px;
+
width: 1px;
+
background: black;
+
position: absolute;
+
left: 26px;
+
top:10px;
+
-webkit-transform:rotate(-45deg);
+
-moz-transform:rotate(-45deg);
+
-o-transform:rotate(-45deg);
+
transform:rotate(-45deg);
+
 
}
 
}
  
/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */
+
.imglarge img
 +
{
 +
    position: relative;
 +
    z-index: 1100;
 +
}
  
.lightbox-target:target {
+
.lighboxbkgnd
opacity: 1;
+
{
top: 0;
+
    position: fixed;
bottom: 0;
+
   
 +
    z-index: 1000;
 +
    top: 0;
 +
    left: 0;
 +
    right:0;
 +
    bottom:0;
 +
 
 +
    visibility: hidden;
 +
 
 +
    -webkit-transition: all .4s ease-in-out;
 +
      -moz-transition: all .4s ease-in-out;
 +
        -o-transition: all .4s ease-in-out;
 +
            transition: all .4s ease-in-out;
 +
    transition-property: opacity, visibility;
 +
 
 +
    opacity: 0;
 +
    /*background-color: rgba(0, 0, 0, .5);*/
 +
    background:    -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .9) 100%);
 +
    /* FF3.6+ */
 +
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, .65)), color-stop(100%, rgba(0, 0, 0, .9)));
 +
    /* Chrome,Safari4+ */
 +
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .9) 100%);
 +
    /* Chrome10+,Safari65.1+ */
 +
    background:      -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .9) 100%);
 +
    /* Opera 12+ */
 +
    background:     -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .9) 100%);
 +
    /* IE10+ */
 +
    background:         radial-gradient(ellipse at center, rgba(0, 0, 0, .65) 0%, rgba(0, 0, 0, .9) 100%);
 +
    /* W3C */
 +
 
 +
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#bf000000', GradientType=1);
 +
    /* IE6-9 fallback on horizontal gradient */
 
}
 
}
  
.lightbox-target:target img {
+
.leftArrow,
max-height: 100%;
+
.rightArrow,
max-width: 100%;
+
.offswitch,
 +
.caption
 +
{
 +
    font-family: gotham_mediumregular;
 +
 
 +
    position: absolute;
 +
    z-index: 1110;
 +
 
 +
    display: block;
 +
 
 +
    cursor: pointer !important;
 +
    transition-property: opacity;
 +
    text-decoration: none !important;
 +
 
 +
    opacity: 0;
 +
    color: white;
 +
    background-color: rgba(0, 0, 0, .5);
 
}
 
}
  
.lightbox-target:target a.lightbox-close {
+
.caption
top: 0px;
+
{
 +
    font-family: gotham_bookregular;
 +
    font-size: 18px;
 +
 
 +
    width: 100%;
 +
    padding: .9em .2em;
 +
 
 +
    cursor: initial !important;
 +
    text-align: center;
 +
}
 +
 
 +
.leftArrow:hover,
 +
.rightArrow:hover,
 +
.offswitch:hover
 +
{
 +
    color: white !important;
 +
}
 +
 
 +
.leftArrow,
 +
.rightArrow
 +
{
 +
    font-size: 30px;
 +
 
 +
    top: 50%;
 +
 
 +
    padding: .35em .45em;
 +
 
 +
    -webkit-transform: translateY(-50%);
 +
            transform: translateY(-50%);
 +
}
 +
 
 +
.leftArrow {
 +
left:0;
 +
}
 +
.rightArrow {
 +
right:0;
 +
}
 +
 
 +
.offswitch
 +
{
 +
    font-size: 12px;
 +
 
 +
    top: 0;
 +
    right: 0;
 +
 
 +
    padding: .54em .95em;
 +
}
 +
 
 +
.imglarge img
 +
{
 +
    transition-property: opacity, scale;
 +
    transform: scale(0);
 +
 
 +
    opacity: 0;
 +
}
 +
 
 +
.leftArrow,
 +
.rightArrow,
 +
.offswitch,
 +
.imglarge img
 +
{
 +
    -webkit-transition: all .7s ease-in-out;
 +
      -moz-transition: all .7s ease-in-out;
 +
        -o-transition: all .7s ease-in-out;
 +
            transition: all .7s ease-in-out;
 +
}
 +
/*
 +
animate in
 +
=============================================================*/
 +
 
 +
[type=radio]:checked ~ label ~ .imglarge
 +
{
 +
    visibility: visible;
 +
}
 +
 
 +
[type=radio]:checked ~ label ~ .imglarge img,
 +
:checked ~ label ~ .imglarge .offswitch,
 +
:checked ~ label ~ .imglarge .leftArrow,
 +
:checked ~ label ~ .imglarge .rightArrow,
 +
:checked ~ label ~ .imglarge .caption
 +
{
 +
    transform: scale(1);
 +
 
 +
    opacity: 1;
 +
}
 +
 
 +
[type=checkbox]:checked ~ .lighboxbkgnd
 +
{
 +
    visibility: visible;
 +
 
 +
    opacity: 1;
 +
}
 +
/*
 +
animate out
 +
=============================================================*/
 +
 
 +
[type=radio]:not(:checked) ~ label ~ .imglarge
 +
{
 +
    visibility: hidden;
 +
}
 +
 
 +
[type=radio]:not(:checked) ~ label ~ .imglarge img,
 +
[type=radio]:not(:checked) ~ label ~ .imglarge .lighboxbkgnd
 +
{
 +
    visibility: hidden;
 +
 
 +
    -webkit-transition: all .2s ease-in-out;
 +
      -moz-transition: all .2s ease-in-out;
 +
        -o-transition: all .2s ease-in-out;
 +
            transition: all .2s ease-in-out;
 +
 
 +
    opacity: 0;
 +
 
 +
    scale: 0;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/*============================================================
 +
Desktop Styles
 +
============================================================*/
 +
 
 +
@media only screen and (min-width: 641px)
 +
{
 +
    .imglarge img
 +
    {
 +
        width: 900px;
 +
    }
 +
    .leftArrow
 +
    {
 +
        -webkit-transform: translateX(120%);
 +
            transform: translateX(120%);
 +
      margin-left: -8%;
 +
           
 +
    }
 +
    .rightArrow
 +
    {
 +
        -webkit-transform: translateX(120%);
 +
            transform: translateX(120%);
 +
            margin-right: -8%;
 +
    }
 +
 
 +
    .light
 +
    {
 +
        width: 33.3%;
 +
    }
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
/*============================================================
 +
Mobile Styles
 +
============================================================*/
 +
 
 +
@media only screen and (max-width: 640px)
 +
{
 +
    .light
 +
    {
 +
        width: 50%;
 +
    }
 +
 
 +
    .imglarge img
 +
    {
 +
        width: 100%;
 +
    }
 +
  .leftArrow
 +
    {
 +
        -webkit-transform: translateX(0);
 +
            transform: translateX(0);
 +
            margin-left:0;
 +
    }
 +
    .rightArrow
 +
    {
 +
        -webkit-transform: translateX(0);
 +
            transform: translateX(0);
 +
            margin-left:0;
 +
    }
 +
    .imglarge
 +
    {
 +
        width: 100%;
 +
    }
 
}
 
}
 
</style>
 
</style>
Line 419: Line 639:
 
<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>
  
<map name=m1><area shape=rect coords="170 5 195 30" href=#img1></map>
+
<div class="pageWrapper">
<map name=m2><area shape=rect coords="170 5 195 30" href=#img2></map>
+
    <!--<div class="spacer"> </div>-->
<map name=m3><area shape=rect coords="170 5 195 30" href=#img3></map>
+
    <!--Lightbox-->
<map name=m4><area shape=rect coords="170 5 195 30" href=#img4></map>
+
    <div class="row centerContent lightboxRow">
<div id=wrapper>
+
        <form class="lightbox" name="lightbox">
  <img id=img1 class=img usemap=#m1 src=https://bit.ly/29OsQ4k />
+
            <!--background-->
  <a href=# class=close></a>
+
            <input type="checkbox" id="check1" name="lightbox" class="lightswitch">
  <img class=expand src=http://icons.iconarchive.com/icons/icons8/ios7/16/Editing-Expand-icon.png/ width=60>
+
            <div class="lighboxbkgnd"></div>
  <img id=img2 class=img usemap=#m2 src=https://bit.ly/2anclbb / width=60>
+
            <!--image 1-->
  <a href=# class=close></a>
+
            <div class="light">
  <img class=expand src=http://icons.iconarchive.com/icons/icons8/ios7/16/Editing-Expand-icon.png/ width=60>
+
                <input type="radio" id="switch1" name="lightbox" class="lightswitch" onclick="document.lightbox.check1.checked=true">
  <img id=img3 class=img usemap=#m3 src=https://bit.ly/2aQcqZl / width=60>
+
                <label for="switch1">
  <a href=# class=close></a>
+
                    <img alt="" src="http://static.uniworld.com/images/MiscImage/US-English/UW-MT-Lobby-0872=2.jpg" class="img-responsive">
  <img class=expand src=http://icons.iconarchive.com/icons/icons8/ios7/16/Editing-Expand-icon.png/ width=60>
+
                </label>
  <img id=img4 class=img usemap=#m4 src=https://bit.ly/2acSgrJ / width=60>
+
                <div id="imglarge1" class="imglarge">
  <a href=# class=close></a>
+
                    <div class="innerFloat">
  <img class=expand src=http://icons.iconarchive.com/icons/icons8/ios7/16/Editing-Expand-icon.png/ width=60>
+
                        <a class="leftArrow" onclick="document.lightbox.switch6.checked=true">&lt;&lt;</a>
 +
                        <a class="rightArrow" onclick="document.lightbox.switch2.checked=true">&gt;</a>
 +
                        <img alt="" src="http://static.uniworld.com/images/MiscImage/US-English/UW-MT-Lobby-0872=2.jpg">
 +
                        <div class="caption">A three-tiered lobby with marble staircase, hand-painted <em>tromp l’oeil</em> mural, Murano glass chandelier, and portrait of Maria Theresa evoke the décor of Vienna’s Schönbrunn Palace. </div>
 +
                        <a class="offswitch" onclick="document.lightbox.switch1.checked=false; document.lightbox.check1.checked=false">X</a>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <!--image 2-->
 +
            <div class="light">
 +
                <input type="radio" id="switch2" name="lightbox" class="lightswitch" onclick="document.lightbox.check1.checked=true">
 +
                <label for="switch2">
 +
                    <img alt="" src="http://static.uniworld.com/images/MiscImage/US-English/UW-MT-Lounge-0757=2.jpg" class="img-responsive">
 +
                </label>
 +
                <div id="imglarge1" class="imglarge">
 +
                    <div class="innerFloat">
 +
                        <a class="leftArrow" onclick="document.lightbox.switch1.checked=true">&lt;</a>
 +
                        <a class="rightArrow" onclick="document.lightbox.switch3.checked=true">&gt;</a>
 +
                        <img alt="" src="http://static.uniworld.com/images/MiscImage/US-English/UW-MT-Lounge-0757=2.jpg">
 +
                        <div class="caption">The Hapsburg Salon features five murals depicting the 18th-century Austrian countryside, hand-painted by specially commissioned Croxford and Saunders artists.</div>
 +
                        <a class="offswitch" onclick="document.lightbox.switch2.checked=false; document.lightbox.check1.checked=false">X</a>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <!--image 3-->
 +
            <div class="light">
 +
                <input type="radio" id="switch3" name="lightbox" class="lightswitch" onclick="document.lightbox.check1.checked=true">
 +
                <label for="switch3">
 +
                    <img alt="" src="http://static.uniworld.com/images/MiscImage/US-English/UW-MT-restaurant-0664=2.jpg" class="img-responsive">
 +
                </label>
 +
                <div id="imglarge1" class="imglarge">
 +
                    <div class="innerFloat">
 +
                        <a class="leftArrow" onclick="document.lightbox.switch2.checked=true">&lt;</a>
 +
                        <a class="rightArrow" onclick="document.lightbox.switch4.checked=true">&gt;</a>
 +
                        <img alt="" src="http://static.uniworld.com/images/MiscImage/US-English/UW-MT-restaurant-0664=2.jpg">
 +
                        <div class="caption">The Baroque restaurant provides a dining experience fit for royalty, with gilded coronets, custom-made furniture, and gold, brown, and blue-accented window coverings and carpet.</div>
 +
                        <a class="offswitch" onclick="document.lightbox.switch3.checked=false; document.lightbox.check1.checked=false">X</a>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <!--image 4-->
 +
            <div class="light">
 +
                <input type="radio" id="switch4" name="lightbox" class="lightswitch" onclick="document.lightbox.check1.checked=true">
 +
                <label for="switch4">
 +
                    <img alt="" src="http://static.uniworld.com/images/MiscImage/US-English/UW-MT-Suite407-0578=2.jpg" class="img-responsive">
 +
                </label>
 +
                <div id="imglarge1" class="imglarge">
 +
                    <div class="innerFloat">
 +
                        <a class="leftArrow" onclick="document.lightbox.switch3.checked=true">&lt;</a>
 +
                        <a class="rightArrow" onclick="document.lightbox.switch5.checked=true">&gt;</a>
 +
                        <img alt="" src="http://static.uniworld.com/images/MiscImage/US-English/UW-MT-Suite407-0578=2.jpg">
 +
                        <div class="caption">Guests staying in the ship’s 10 sumptuous suites or the splendid Royal Suite can indulge in extra-special pampering, including butler service and an in-suite wellness treatment.</div>
 +
                        <a class="offswitch" onclick="document.lightbox.switch4.checked=false; document.lightbox.check1.checked=false">X</a>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <!--image 5-->
 +
            <div class="light">
 +
                <input type="radio" id="switch5" name="lightbox" class="lightswitch" onclick="document.lightbox.check1.checked=true">
 +
                <label for="switch5">
 +
                    <img alt="" src="http://static.uniworld.com/images/MiscImage/US-English/UW-MT-Suite412-0731=2.jpg" class="img-responsive">
 +
                </label>
 +
                <div id="imglarge1" class="imglarge">
 +
                    <div class="innerFloat">
 +
                        <a class="leftArrow" onclick="document.lightbox.switch4.checked=true">&lt;</a>
 +
                        <a class="rightArrow" onclick="document.lightbox.switch6.checked=true">&gt;</a>
 +
                        <img alt="" src="http://static.uniworld.com/images/MiscImage/US-English/UW-MT-Suite412-0731=2.jpg">
 +
                        <div class="caption">The luxurious Baroque-style décor of the <em>S.S. Maria Theresa’s</em> elegant suites includes modern conveniences such as keypad-controlled lighting and drop-down televisions.</div>
 +
                        <a class="offswitch" onclick="document.lightbox.switch5.checked=false; document.lightbox.check1.checked=false">X</a>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <!--image 6-->
 +
            <div class="light">
 +
                <input type="radio" id="switch6" name="lightbox" class="lightswitch" onclick="document.lightbox.check1.checked=true">
 +
                <label for="switch6">
 +
                    <img alt="" src="http://static.uniworld.com/images/MiscImage/US-English/UW-MT-Cat3-Stateroom303-0475=3.jpg" class="img-responsive">
 +
                </label>
 +
                <div id="imglarge6" class="imglarge">
 +
                    <div class="innerFloat">
 +
                        <a class="leftArrow" onclick="document.lightbox.switch5.checked=true">&lt;</a>
 +
                        <a class="rightArrow" onclick="document.lightbox.switch1.checked=true">&gt;&gt;</a>
 +
                        <img alt="" src="http://static.uniworld.com/images/MiscImage/US-English/UW-MT-Cat3-Stateroom303-0475=3.jpg">
 +
                        <div class="caption">Every riverview stateroom features a handcrafted Savoir of England bed, flatscreen TV with infotainment center, and spacious marble bathroom with luxurious amenities.</div>
 +
                        <a class="offswitch" onclick="document.lightbox.switch6.checked=false; document.lightbox.check1.checked=false">X</a>
 +
                        <div class="innerFloat">
 +
                        </div>
 +
                    </div>
 +
                    <div class="clearfix"></div>
 +
        </form>
 +
              <div class="clearfix"></div>
 +
        </div>
 +
          <div class="clearfix"></div>
 +
        </div>
 +
       
 +
    </div>
 +
  <div class="spacer"> </div>
 +
</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:22, 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.



Title 4

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