Difference between revisions of "Team:Shanghaitech/ScientificInsights"

Line 12: Line 12:
 
<div class="column half_size">
 
<div class="column half_size">
 
<style type="text/css">
 
<style type="text/css">
−
*,
+
.photo-stack-grid{list-style:none;margin:0;padding:0;text-align:center}.photo-stack-grid *,.photo-stack-grid *:before,.photo-stack-grid *:after{-webkit-box-sizing:border-box;box-sizing:border-box}.photo-stack-grid:after{content:" ";display:table;clear:both}.photo-stack-grid li{width:46%;float:left;margin:0 8% 2.8em 0}.photo-stack-grid li:nth-child(2n){margin-right:0}.photo-stack-grid li:nth-child(2n+1){clear:left}.photo-stack-grid a{display:block;color:#333;text-decoration:none;font:600 0.8em/1.3 "Open Sans", sans-serif}.photo-stack-grid .sspan{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:block}.photo-stack-grid .photo-stack{position:relative;margin:0 4% 2em;display:block}.photo-stack-grid .photo-stack:before,.photo-stack-grid .photo-stack:after,.photo-stack-grid .photo-stack img{display:block;background:#ccc;border:5px solid #fff;border-radius:3px;padding:1px}.photo-stack-grid .photo-stack:before,.photo-stack-grid .photo-stack:after{content:'';position:absolute;left:0px;top:0px;width:100%;height:100%;background:#969289;-webkit-box-shadow:0 1px 3px 1px rgba(0,0,0,0.3);box-shadow:0 1px 3px 1px rgba(0,0,0,0.3);-webkit-transform:rotate(6deg);transform:rotate(6deg)}.photo-stack-grid .photo-stack:after{-webkit-transform:rotate(10deg);transform:rotate(10deg);z-index:-1}.photo-stack-grid .photo-stack img{-webkit-transform:rotate(0deg);transform:rotate(0deg);width:100%;-webkit-box-shadow:0 0 1px 1px rgba(0,0,0,0.2),0 14px 18px -12px rgba(0,0,0,0.9);box-shadow:0 0 1px 1px rgba(0,0,0,0.2),0 14px 18px -12px rgba(0,0,0,0.9)}.photo-stack-grid .ie8 .photo-stack:before,.photo-stack-grid .ie8 .photo-stack:after{display:none}@media (min-width: 620px){.photo-stack-grid li{width:19%}.photo-stack-grid li:nth-child(2n){margin-right:8%}.photo-stack-grid li:nth-child(2n+1){clear:none}.photo-stack-grid li:nth-child(4n){margin-right:0}.photo-stack-grid li:nth-child(4n+1){clear:left}}
−
*:before,
+
</style>
−
*:after {
+
−
    box-sizing: border-box;
+
−
}
+
  
−
 
+
<h4 style="font-size:10px;text-align:center">Click pictures to see details</h4>
−
 
+
−
.photo-stack-grid {
+
−
    list-style: none;
+
−
    margin: 0;
+
−
    padding: 0;
+
−
    text-align: center;
+
−
}
+
−
 
+
−
.photo-stack-grid:after {
+
−
    content: " ";
+
−
    display: table;
+
−
    clear: both;
+
−
}
+
−
 
+
−
.photo-stack-grid li {
+
−
    width: 46%;
+
−
    float: left;
+
−
    margin: 0 8% 2.8em 0;
+
−
}
+
−
 
+
−
.photo-stack-grid li:nth-child(2n) {
+
−
    margin-right: 0;
+
−
}
+
−
 
+
−
 
+
−
/* remember to clear first item in each row */
+
−
 
+
−
.photo-stack-grid li:nth-child(2n + 1) {
+
−
    clear: left;
+
−
}
+
−
 
+
−
.photo-stack-grid a {
+
−
    display: block;
+
−
    color: #333;
+
−
    text-decoration: none;
+
−
    font: 600 0.8em/1.3 "Open Sans", sans-serif;
+
−
}
+
−
 
+
−
.sspan {
+
−
    text-overflow: ellipsis;
+
−
    white-space: nowrap;
+
−
    overflow: hidden;
+
−
    display: block;
+
−
}
+
−
 
+
−
.photo-stack {
+
−
    position: relative;
+
−
    margin: 0 4% 2em;
+
−
    display: block;
+
−
}
+
−
 
+
−
.photo-stack:before,
+
−
.photo-stack:after,
+
−
.photo-stack img {
+
−
    display: block;
+
−
    background: #ccc;
+
−
    border: 5px solid #fff;
+
−
    border-radius: 3px;
+
−
    padding: 1px;
+
−
}
+
−
 
+
−
.photo-stack:before,
+
−
.photo-stack:after {
+
−
    content: '';
+
−
    position: absolute;
+
−
    left: 0px;
+
−
    top: 0px;
+
−
    width: 100%;
+
−
    height: 100%;
+
−
    background: #969289;
+
−
    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.3);
+
−
    transform: rotate(6deg);
+
−
}
+
−
 
+
−
.photo-stack:after {
+
−
    transform: rotate(10deg);
+
−
    z-index: -1;
+
−
}
+
−
 
+
−
.photo-stack img {
+
−
    transform: rotate(0deg);
+
−
    width: 100%;
+
−
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2),
+
−
    0 14px 18px -12px rgba(0, 0, 0, 0.9);
+
−
}
+
−
 
+
−
.ie8 .photo-stack:before,
+
−
.ie8 .photo-stack:after {
+
−
    display: none;
+
−
}
+
−
 
+
−
@media (min-width: 620px) {
+
−
    body {
+
−
        font-size: 120%;
+
−
    }
+
−
    .photo-stack-grid li {
+
−
        width: 19%;
+
−
    }
+
−
    .photo-stack-grid li:nth-child(2n) {
+
−
        margin-right: 8%;
+
−
    }
+
−
    .photo-stack-grid li:nth-child(2n + 1) {
+
−
        clear: none;
+
−
    }
+
−
    .photo-stack-grid li:nth-child(4n) {
+
−
        margin-right: 0;
+
−
    }
+
−
    .photo-stack-grid li:nth-child(4n + 1) {
+
−
        clear: left;
+
−
    }
+
−
}
+
−
</style>
+
−
<center>
+
−
<h4 font-size="10px;">Click pictures to see details</h4>
+
−
</center>
+
 
<br>
 
<br>
 
<ul class="photo-stack-grid">
 
<ul class="photo-stack-grid">

Revision as of 21:06, 1 November 2017

Professional Insights


Click pictures to see details


In addition to the public and community’s feedback, we also obtained professional insights and suggestion to improve our project. We visited and interviewed scholars from different backgrounds including computational biology, synthetic biology, and electronic engineering. Interchanging of thoughts between our team and those experts inspired and encouraged us to further perfecting our project’s design and practicing. These insights provide guidelines for our follow-up works including human practice, hardware and software design, and modeling.