Difference between revisions of "Team:Lambert GA/Human Practices"

Line 9: Line 9:
 
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">
 
 
 
<style type="text/css">
 
<style type="text/css">
 
#holder {
 
#holder {
Line 207: Line 205:
 
width: 100%;
 
width: 100%;
 
}
 
}
 
 
 
 
@import compass
 
 
 
/* -------------------------------------
 
* For horizontal version, set the
 
* $vertical variable to false
 
* ------------------------------------- */
 
$vertical: true
 
 
/* -------------------------------------
 
* General Style
 
* ------------------------------------- */
 
 
// Colours
 
$bg: #48b379
 
$white: #eee9dc
 
$red: #f98262
 
 
@import url(https://fonts.googleapis.com/css?family=Noto+Sans)
 
 
body
 
  @if $vertical
 
    max-width: 1200px
 
    margin: 0 auto
 
  @else
 
    margin: 0
 
  padding: 0 5%
 
  font-size: 100%
 
  font-family: 'Noto Sans', sans-serif
 
  color: $white
 
  background: $bg
 
 
h2
 
  margin: 3em 0 0 0
 
  font-size: 1.5em
 
  letter-spacing: 2px
 
  text-transform: uppercase
 
 
/* -------------------------------------
 
* timeline
 
* ------------------------------------- */
 
 
#timeline
 
  list-style: none
 
  @if $vertical
 
    margin: 50px 0 30px 120px
 
    padding-left: 30px
 
    border-left: 8px solid $white
 
  @else
 
    margin: 120px 0 0
 
    padding: 0
 
    border-top: 8px solid $white
 
    display: table
 
    border-spacing: 30px 0
 
  li
 
    @if $vertical
 
      margin: 40px 0
 
      position: relative
 
    @else
 
      display: table-cell
 
      // for Firefox
 
      .relative
 
        position: relative
 
  p
 
    margin: 0 0 15px
 
 
.date
 
  @if $vertical
 
    margin-top: -10px
 
    top: 50%
 
    left: -158px
 
  @else
 
    text-align: center
 
    top: -55px
 
    left: 0
 
    right: 0
 
  font-size: 0.95em
 
  line-height: 20px
 
  position: absolute
 
.circle
 
  @if $vertical
 
    margin-top: -10px
 
    top: 50%
 
    left: -44px
 
  @else
 
    margin: 0 auto
 
    top: -14px
 
    left: 0
 
    right: 0
 
  width: 10px
 
  height: 10px
 
  background: $bg
 
  border: 5px solid $white
 
  border-radius: 50%
 
  display: block
 
  position: absolute
 
 
.content
 
  @if $vertical
 
    max-height: 20px
 
    padding: 50px 20px 0
 
    border-color: transparent
 
  @else
 
    width: 200px
 
    max-height: 0
 
    margin-top: 40px
 
    vertical-align: top
 
    padding: 50px 15px 15px
 
    transition: width 0.4s linear, max-height 0.4s linear
 
  border-width: 2px
 
  border-style: solid
 
  border-radius: 0.5em
 
  position: relative
 
  &:before, &:after
 
    content: ""
 
    width: 0
 
    height: 0
 
    border: solid transparent
 
    position: absolute
 
    pointer-events: none
 
    @if $vertical
 
      right: 100%
 
    @else
 
      bottom: 100%
 
  &:before
 
    @if $vertical
 
      border-right-color: inherit
 
      border-width: 20px
 
      top: 50%
 
      margin-top: -20px
 
    @else
 
      border-bottom-color: inherit
 
      border-width: 15px
 
      left: 50%
 
      margin-left: -15px
 
  &:after
 
    @if $vertical
 
      border-right-color: $bg
 
      border-width: 17px
 
      top: 50%
 
      margin-top: -17px
 
    @else
 
      border-bottom-color: $bg
 
      border-width: 12px
 
      left: 50%
 
      margin-left: -12px
 
  p
 
    max-height: 0
 
    color: transparent
 
    text-align: justify
 
    word-break: break-word
 
    hyphens: auto
 
    overflow: hidden
 
 
label
 
  font-size: 1.3em
 
  position: absolute
 
  z-index: 100
 
  cursor: pointer
 
  @if $vertical
 
    top: 20px
 
    transition: transform 0.2s linear
 
  @else
 
    width: 200px
 
    white-space: nowrap
 
    text-overflow: ellipsis
 
    overflow: hidden
 
    display: block
 
    top: 60px
 
    left: 15px
 
 
.radio
 
  display: none
 
.radio:checked
 
  & + .relative
 
    label
 
      cursor: auto
 
      @if $vertical
 
        transform: translateX(42px)
 
      @else
 
        width: 400px
 
        transition: width 0.3s linear 0.2s
 
    .circle
 
      background: $red
 
  & ~ .content
 
    max-height: 180px
 
    border-color: $white
 
    @if $vertical
 
      margin-right: 20px
 
      transform: translateX(20px)
 
      transition: max-height 0.4s linear, border-color 0.5s linear, transform 0.2s linear
 
    @else
 
      width: 400px
 
    p
 
      max-height: 200px
 
      color: $white
 
      transition: color 0.3s linear 0.3s
 
 
/* -------------------------------------
 
* mobile phones (vertical version only)
 
* ------------------------------------- */
 
@if $vertical
 
  @media screen and (max-width: 767px)
 
    #timeline
 
      margin-left: 0
 
      padding-left: 0
 
      border-left: none
 
      li
 
        margin: 50px 0
 
    label
 
      width: 85%
 
      font-size: 1.1em
 
      white-space: nowrap
 
      text-overflow: ellipsis
 
      overflow: hidden
 
      display: block
 
      transform: translateX(18px)
 
    .content
 
      padding-top: 45px
 
      border-color: $white
 
      &:before, &:after
 
        border: solid transparent
 
        bottom: 100%
 
      &:before
 
        border-bottom-color: inherit
 
        border-width: 17px
 
        top: -16px
 
        left: 50px
 
        margin-left: -17px
 
      &:after
 
        border-bottom-color: $bg
 
        border-width: 20px
 
        top: -20px
 
        left: 50px
 
        margin-left: -20px
 
      p
 
        font-size: 0.9em
 
        line-height: 1.4
 
    .circle, .date
 
      display: none
 
 
 
</style>
 
</style>
 
</head>
 
</head>
Line 590: Line 343:
  
 
</div>
 
</div>
 
 
<h2>CSS3 Timeline</h2>
 
<p>Please set the $vertical variable to false to see the horizontal version.</p>
 
<ul id='timeline'>
 
  <li class='work'>
 
    <input class='radio' id='work5' name='works' type='radio' checked>
 
    <div class="relative">
 
      <label for='work5'>Lorem ipsum dolor sit amet</label>
 
      <span class='date'>12 May 2013</span>
 
      <span class='circle'></span>
 
    </div>
 
    <div class='content'>
 
      <p>
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
 
      </p>
 
    </div>
 
  </li>
 
  <li class='work'>
 
    <input class='radio' id='work4' name='works' type='radio'>
 
    <div class="relative">
 
      <label for='work4'>Lorem ipsum dolor sit amet</label>
 
      <span class='date'>11 May 2013</span>
 
      <span class='circle'></span>
 
    </div>
 
    <div class='content'>
 
      <p>
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
 
      </p>
 
    </div>
 
  </li>
 
  <li class='work'>
 
    <input class='radio' id='work3' name='works' type='radio'>
 
    <div class="relative">
 
      <label for='work3'>Lorem ipsum dolor sit amet</label>
 
      <span class='date'>10 May 2013</span>
 
      <span class='circle'></span>
 
    </div>
 
    <div class='content'>
 
      <p>
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
 
      </p>
 
    </div>
 
  </li>
 
  <li class='work'>
 
    <input class='radio' id='work2' name='works' type='radio'>
 
    <div class="relative">
 
      <label for='work2'>Lorem ipsum dolor sit amet</label>
 
      <span class='date'>09 May 2013</span>
 
      <span class='circle'></span>
 
    </div>
 
    <div class='content'>
 
      <p>
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
 
      </p>
 
    </div>
 
  </li>
 
  <li class='work'>
 
    <input class='radio' id='work1' name='works' type='radio'>
 
    <div class="relative">
 
      <label for='work1'>Lorem ipsum dolor sit amet</label>
 
      <span class='date'>08 May 2013</span>
 
      <span class='circle'></span>
 
    </div>
 
    <div class='content'>
 
      <p>
 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
 
      </p>
 
    </div>
 
  </li>
 
</ul>
 
 
 
 
 
</div>
 
</div>
 
<div id="footer">
 
<div id="footer">

Revision as of 03:57, 27 August 2018

H U M A N P R A C T I C E S



































★ ALERT!

This page is used by the judges to evaluate your team for the medal criterion or award listed below.

Delete this box in order to be evaluated for this medal criterion and/or award. See more information at Instructions for Pages for awards.

Human Practices

At iGEM we believe societal considerations should be upfront and integrated throughout the design and execution of synthetic biology projects. “Human Practices” refers to iGEM teams’ efforts to actively consider how the world affects their work and the work affects the world. Through your Human Practices activities, your team should demonstrate how you have thought carefully and creatively about whether your project is responsible and good for the world. We invite you to explore issues relating (but not limited) to the ethics, safety, security, and sustainability of your project, and to show how this exploration feeds back into your project purpose, design and execution.

For more information, please see the Human Practices Hub. There you will find:

  • an introduction to Human Practices at iGEM
  • tips on how to succeed including explanations of judging criteria and advice about how to conduct and document your Human Practices work
  • descriptions of exemplary work to inspire you
  • links to helpful resources
  • And more!

On this page, your team should document all of your Human Practices work and activities. You should write about the Human Practices topics you considered in your project, document any activities you conducted to explore these topics (such as engaging with experts and stakeholders), describe why you took a particular approach (including referencing any work you built upon), and explain if and how you integrated takeaways from your Human Practices work back into your project purpose, design and/or execution.

If your team has gone above and beyond in work related to safety, then you should document this work on your Safety wiki page and provide a description and link on this page. If your team has developed education and public engagement efforts that go beyond a focus on your particular project, and for which would like to nominate your team for the Best Education and Public Engagement Special Prize, you should document this work on your Education and Education wiki page and provide a description and link here.

The iGEM judges will review this page to assess whether you have met the Silver and/or Gold medal requirements based on the Integrated Human Practices criteria listed below. If you nominate your team for the Best Integrated Human Practices Special Prize by filling out the corresponding field in the judging form, the judges will also review this page to consider your team for that prize.

Silver Medal Criterion #3

Convince the judges you have thought carefully and creatively about whether your work is responsible and good for the world. Document how you have investigated these issues and engaged with your relevant communities, why you chose this approach, and what you have learned. Please note that surveys will not fulfill this criteria unless you follow scientifically valid methods.

Gold Medal Criterion #1

Expand on your silver medal activity by demonstrating how you have integrated the investigated issues into the purpose, design and/or execution of your project. Document how your project has changed based upon your human practices work.

Best Integrated Human Practices Special Prize

To compete for the Best Integrated Human Practices prize, please describe your work on this page and also fill out the description on the judging form.

How does your project affect society and how does society influence the direction of your project? How might ethical considerations and stakeholder input guide your project purpose and design and the experiments you conduct in the lab? How does this feedback enter into the process of your work all through the iGEM competition? Document a thoughtful and creative approach to exploring these questions and how your project evolved in the process to compete for this award!

You must also delete the message box on the top of this page to be eligible for this prize.