Difference between revisions of "Team:Newcastle/Notebook/Diary"

 
(16 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{Newcastle}}
+
{{Newcastle
−
<br><br>
+
}}
−
<br><br>
+
−
 
+
 
<html>
 
<html>
−
// Responsive Timeline
 
−
// Timeline for a personal project
 
−
// Github: http://github.com/itbruno/responsive-timeline
 
 
<style>
 
<style>
−
@import "http://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700";
+
#HQ_page th
 +
{
 +
background-color: #e35c5c;
 +
padding: 10px;
 +
color: #292000;
 +
border: none;
 +
font-size: 2rem;
 +
}
 +
#HQ_page td
 +
{
 +
color: #292000;
 +
border: none;
 +
font-family: 'Didact Gothic';
 +
font-size: 2rem;
 +
}
  
−
// Variables
+
#HQ_page table
−
$bg-body: #f9f9f9;
+
{
 +
    border: none;
 +
}
  
−
$red: #ee4d4d;
+
figcaption
−
$blue: #2b2e48;
+
{
−
$primary-color: $red;
+
    text-align: center;
−
$secondary-color: $blue;
+
    /* font-weight: bold; */
 +
    font-size: 1.5rem;
 +
    color: #292000;
 +
}
  
−
 
+
figure img
−
// Typography
+
{
−
$base-font: helvetica, arial, tahoma, verdana;
+
    max-width: 100%;
−
$base-font-title: "Dosis", arial, tahoma, verdana;
+
    transform: scale(0.9, 0.9);
−
 
+
    display: block;
−
$base-font-color: #726f77;
+
    margin-left: auto;
−
 
+
    margin-right: auto;
−
// Timeline
+
−
$timeline-color: $primary-color;
+
−
 
+
−
 
+
−
// Mixins and Placeholders
+
−
%clearfix {
+
−
&:after, &:before {
+
−
content: '';
+
−
display: block;
+
−
width: 100%;
+
−
clear: both;
+
−
}
+
 
}
 
}
  
−
@mixin prefix($prop, $val) {
+
a, a:focus, a:hover, li > a
−
@each $prefix in '-webkit-', '-moz-', '-ms-', '' {
+
{
−
#{$prefix}#{$prop}: $val;
+
    color: #e35c5c;
−
}
+
 
}
 
}
−
*, *:before, *:after {
+
.col-md-4 a{
−
box-sizing: border-box;
+
    color: #e35c5c;
−
-webkit-box-sizing: border-box;
+
}
−
-moz-box-sizing: border-box;
+
.nav > li > a:focus, .nav > li > a:hover, .nav-pills > li.active > a
 +
{
 +
    background-color: #e35c5c;
 
}
 
}
  
−
body, html {
+
#hq_page p
−
height: 100%;
+
{
 +
font-size: 2rem;
 
}
 
}
−
body {
+
div p, ul li, ol li
−
background: $bg-body;
+
{
−
background-size: cover;
+
    color: #292000;
−
margin: 0;
+
−
padding: 0;
+
−
font-family: $base-font;
+
−
line-height: 20px;
+
−
font-size: 14px;
+
−
color: $base-font-color;
+
 
}
 
}
  
−
img {max-width: 100%;}
+
ul.checked, ul.question, ul.dot
−
 
+
{
−
a {
+
list-style: none;
−
text-decoration: none;
+
 
}
 
}
  
−
.container {
+
ul.checked li, ul.question li, ul.dot li
−
max-width: 1100px;
+
{
−
margin: 0 auto;
+
font-family: 'Didact Gothic';
 +
font-size: 16px;
 
}
 
}
  
−
h1, h2, h3, h4 {
+
ul.checked li:before {
−
   font:{
+
   position: absolute;
−
family: $base-font-title;
+
  margin-left: -1.3em;
−
weight: 500;
+
  font-weight: bold;
−
}
+
−
}
+
  
−
.project-name {
+
   content: "\2713";
−
   text-align: center;
+
   color: darkgreen;
−
   padding: 10px 0;
+
 
}
 
}
  
−
// Header
+
ul.question li:before {
−
header {
+
  position: absolute;
−
background: $secondary-color;
+
  margin-left: -1.3em;
−
padding: 10px;
+
  font-weight: bold;
−
@include prefix(box-shadow, 0 3px 3px rgba(0,0,0,0.05));  
+
−
@extend %clearfix;
+
  
−
.logo {
+
  content: "?";
−
color: $primary-color;
+
  color: #3c0e09;
−
float: left;
+
−
font:{
+
−
family: $base-font-title;
+
−
size: 22px;
+
−
weight: 500;
+
−
}
+
−
+
−
> span {
+
−
color: lighten($primary-color, 20%);
+
−
font-weight: 300;
+
−
}
+
−
}
+
−
 
+
−
.social {
+
−
float: right;
+
−
.btn {
+
−
font-family: "Dosis";
+
−
font-size: 14px;
+
−
margin: 10px 5px;
+
−
}
+
−
}
+
 
}
 
}
  
 +
ul.dot li:before {
 +
  position: absolute;
 +
  margin-left: -1.3em;
 +
  font-weight: bold;
  
−
// Timeline
+
   content: "\25A0";
−
#timeline {
+
  color: #292000;
−
width: 100%;
+
−
   margin: 30px auto;
+
−
position: relative;
+
−
  padding: 0 10px;
+
−
@include prefix(transition, all .4s ease);
+
−
 
+
−
&:before {
+
−
content:"";
+
−
width: 3px;
+
−
height: 100%;
+
−
background: $timeline-color;
+
−
left: 50%;
+
−
top: 0;
+
−
position: absolute;
+
−
}
+
−
 
+
−
&:after {
+
−
content: "";
+
−
clear: both;
+
−
display: table;
+
−
width: 100%;
+
−
}
+
−
+
−
.timeline-item {
+
−
margin-bottom: 50px;
+
−
position: relative;
+
−
@extend %clearfix;
+
−
 
+
−
.timeline-icon {
+
−
background: $timeline-color;
+
−
width: 50px;
+
−
height: 50px;
+
−
position: absolute;
+
−
top: 0;
+
−
left: 50%;
+
−
overflow: hidden;
+
−
margin-left: -23px;
+
−
@include prefix(border-radius, 50%);
+
−
 
+
−
svg {
+
−
position: relative;
+
−
top: 14px;
+
−
left: 14px;
+
−
}
+
−
}
+
−
 
+
−
.timeline-content {
+
−
width: 45%;
+
−
background: #fff;
+
−
padding: 20px;
+
−
@include prefix(box-shadow, 0 3px 0 rgba(0,0,0,0.1));
+
−
@include prefix(border-radius, 5px);
+
−
@include prefix(transition, all .3s ease);
+
−
 
+
−
h2 {
+
−
padding: 15px;
+
−
background: $timeline-color;
+
−
color: #fff;
+
−
margin: -20px -20px 0 -20px;
+
−
font-weight: 300;
+
−
@include prefix(border-radius, 3px 3px 0 0);
+
−
}
+
−
 
+
−
&:before {
+
−
content: '';
+
−
position: absolute;
+
−
left: 45%;
+
−
top: 20px;
+
−
width: 0;
+
−
height: 0;
+
−
border-top: 7px solid transparent;
+
−
border-bottom: 7px solid transparent;
+
−
border-left:7px solid $timeline-color;
+
−
}
+
−
 
+
−
&.right {
+
−
float: right;
+
−
 
+
−
&:before {
+
−
content: '';
+
−
right: 45%;
+
−
left: inherit;
+
−
border-left: 0;
+
−
border-right: 7px solid $timeline-color;
+
−
}
+
−
}
+
−
}
+
−
}
+
 
}
 
}
  
−
// Buttons
+
#right-menu
−
.btn {
+
{
−
padding: 5px 15px;
+
position: fixed;
−
text-decoration: none;
+
−
background: transparent;
+
−
border: 2px solid lighten($primary-color, 10%);
+
−
color: lighten($primary-color, 10%);
+
−
display: inline-block;
+
−
position: relative;
+
−
text-transform: uppercase;
+
−
font-size: 12px;
+
−
@include prefix(border-radius, 5px);
+
−
@include prefix(transition, background .3s ease);
+
−
@include prefix(box-shadow, 2px 2px 0 lighten($primary-color, 10%));
+
−
 
+
−
&:hover {
+
−
box-shadow: none ;
+
−
top: 2px;
+
−
left: 2px;
+
−
@include prefix(box-shadow, 2px 2px 0 transparent);
+
−
}
+
 
}
 
}
  
−
@media screen and (max-width: 768px) {
 
−
#timeline {
 
−
margin: 30px;
 
−
padding: 0px;
 
−
    width: 90%;
 
−
&:before {
 
−
left: 0;
 
−
}
 
−
 
−
.timeline-item {
 
−
.timeline-content {
 
−
width: 90%;
 
−
float: right;
 
−
 
−
&:before, &.right:before {
 
−
left: 10%;
 
−
margin-left: -6px;
 
−
border-left: 0;
 
−
border-right: 7px solid $timeline-color;
 
−
}
 
−
}
 
−
 
−
.timeline-icon {
 
−
left: 0;
 
−
}
 
−
}
 
−
}
 
−
}
 
 
</style>
 
</style>
−
<header>
+
<div class="column">
−
<div class="container">
+
    <div class="row">
−
<h1 class="logo">
+
      <div class="col-md-8">
−
BRUNO<span>RODRIGUES</span>
+
<br>
−
</h1>
+
            <h2>Important Dates</h2>
−
<section class="social">
+
            <br><br>
−
<a class="btn" href="http://www.github.com/itbruno">Github</a>
+
<p>01/05/2016 Team Registration for iGEM deadline</p>
−
<a class="btn" href="http://www.twitter.com/_brunoweb">Twitter</a>
+
<p>30/06/2016 InterLab Sign-up Deadline</p>
−
</section>
+
<p>01/07/2016 Project Description Deadline</p>
−
</div>
+
<p>02/07/2016 <a href="https://2016.igem.org/Team:Newcastle/Collaborations">European Teams Meet Up in Paris</a></p>
−
</header>
+
<p>15/07/2016 About our Lab Form Deadline</p>
−
 
+
<p>15/07/2016 About our Project Form Deadline</p>
−
<div class="container">
+
<p>28/07/2016 <a href="https://2016.igem.org/Team:Newcastle/Collaborations">Scottish Teams Meet Up in Edinburgh</a></p>
−
    <h1 class="project-name">RESPONSIVE TIMELINE</h1>
+
<p>12/08/2016 Track Selection Deadline – Foundational Advance</p>
−
<div id="timeline">
+
<p>12/08/2016 <a href="https://igem.org/Team.cgi">Title and Abstract Deadline</a></p>
−
<div class="timeline-item">
+
<p>17/08/2016 – 18/08/2016 <a href="https://2016.igem.org/Team:Newcastle/Collaborations">UK Teams Meet Up in Westminster, London</a></p>
−
<div class="timeline-icon">
+
<p>25/08/2016 <a href="https://2016.igem.org/Team:Newcastle/Collaborations">Edinburgh Undergraduate Team Visits Newcastle</a></p>
−
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+
<p>31/08/2016 Giant Jamboree Registration Deadline</p>
−
width="21px" height="20px" viewBox="0 0 21 20" enable-background="new 0 0 21 20" xml:space="preserve">
+
<p>02/09/2016 <a href="https://2016.igem.org/Team:Newcastle/InterLab">InterLab Data Deadline</a></p>
−
<path fill="#FFFFFF" d="M19.998,6.766l-5.759-0.544c-0.362-0.032-0.676-0.264-0.822-0.61l-2.064-4.999
+
<p>09/09/2016 Team Rosters Deadline</p>
−
c-0.329-0.825-1.5-0.825-1.83,0L7.476,5.611c-0.132,0.346-0.462,0.578-0.824,0.61L0.894,6.766C0.035,6.848-0.312,7.921,0.333,8.499
+
<p>16/09/2016 <a href="https://2016.igem.org/Team:Newcastle/Notebook/Safety">Final Safety Form Deadline</a></p>
−
l4.338,3.811c0.279,0.246,0.395,0.609,0.314,0.975l-1.304,5.345c-0.199,0.842,0.708,1.534,1.468,1.089l4.801-2.822
+
<p>07/10/2016 Team Banners Deadline</p>
−
c0.313-0.181,0.695-0.181,1.006,0l4.803,2.822c0.759,0.445,1.666-0.23,1.468-1.089l-1.288-5.345
+
<p>14/10/2016 <a href="https://igem.org/2016_Judging_Form?id=1895">Judging Form Deadline</a></p>
−
c-0.081-0.365,0.035-0.729,0.313-0.975l4.34-3.811C21.219,7.921,20.855,6.848,19.998,6.766z"/>
+
<p>19/10/2016 Wiki Freeze</p>
−
</svg>
+
<p>21/10/2016 <a href="http://parts.igem.org/cgi/dna_transfer/batch_list.cgi?group_id=2361">Part Submission Deadline</a></p>
−
 
+
<p>27/10/2016 – 31/10/2016 Giant Jamboree 2016 @ Hynes Convention Center, Boston, MA</p>
−
</div>
+
−
<div class="timeline-content">
+
−
<h2>LOREM IPSUM DOLOR</h2>
+
−
<p>
+
−
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+
−
Atque, facilis quo maiores magnam modi ab libero praesentium blanditiis.
+
−
</p>
+
−
<a href="#" class="btn">button</a>
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class="timeline-item">
+
−
<div class="timeline-icon">
+
−
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+
−
width="21px" height="20px" viewBox="0 0 21 20" enable-background="new 0 0 21 20" xml:space="preserve">
+
−
<g>
+
−
<path fill="#FFFFFF" d="M17.92,3.065l-1.669-2.302c-0.336-0.464-0.87-0.75-1.479-0.755C14.732,0.008,7.653,0,7.653,0v5.6
+
−
c0,0.096-0.047,0.185-0.127,0.237c-0.081,0.052-0.181,0.06-0.268,0.02l-1.413-0.64C5.773,5.183,5.69,5.183,5.617,5.215l-1.489,0.65
+
−
c-0.087,0.038-0.19,0.029-0.271-0.023c-0.079-0.052-0.13-0.141-0.13-0.235V0H2.191C1.655,0,1.233,0.434,1.233,0.97
+
−
c0,0,0.025,15.952,0.031,15.993c0.084,0.509,0.379,0.962,0.811,1.242l2.334,1.528C4.671,19.905,4.974,20,5.286,20h10.307
+
−
c1.452,0,2.634-1.189,2.634-2.64V4.007C18.227,3.666,18.12,3.339,17.92,3.065z M16.42,17.36c0,0.464-0.361,0.833-0.827,0.833H5.341
+
−
l-1.675-1.089h10.341c0.537,0,0.953-0.44,0.953-0.979V2.039l1.459,2.027V17.36L16.42,17.36z"/>
+
−
</g>
+
−
</svg>
+
−
 
+
−
</div>
+
−
<div class="timeline-content right">
+
−
<h2>LOREM IPSUM DOLOR</h2>
+
−
<p>
+
−
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, facilis quo. Maiores magnam modi ab libero praesentium blanditiis consequatur aspernatur accusantium maxime molestiae sunt ipsa.
+
−
</p>
+
−
<a href="#" class="btn">button</a>
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class="timeline-item">
+
−
<div class="timeline-icon">
+
−
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+
−
width="21px" height="20px" viewBox="0 0 21 20" enable-background="new 0 0 21 20" xml:space="preserve">
+
−
<path fill="#FFFFFF" d="M19.998,6.766l-5.759-0.544c-0.362-0.032-0.676-0.264-0.822-0.61l-2.064-4.999
+
−
c-0.329-0.825-1.5-0.825-1.83,0L7.476,5.611c-0.132,0.346-0.462,0.578-0.824,0.61L0.894,6.766C0.035,6.848-0.312,7.921,0.333,8.499
+
−
l4.338,3.811c0.279,0.246,0.395,0.609,0.314,0.975l-1.304,5.345c-0.199,0.842,0.708,1.534,1.468,1.089l4.801-2.822
+
−
c0.313-0.181,0.695-0.181,1.006,0l4.803,2.822c0.759,0.445,1.666-0.23,1.468-1.089l-1.288-5.345
+
−
c-0.081-0.365,0.035-0.729,0.313-0.975l4.34-3.811C21.219,7.921,20.855,6.848,19.998,6.766z"/>
+
−
</svg>
+
  
−
</div>
+
</body>
−
<div class="timeline-content">
+
−
<h2>LOREM IPSUM DOLOR</h2>
+
−
<p>
+
−
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque, facilis quo. Maiores magnam modi ab libero praesentium blanditiis consequatur aspernatur accusantium maxime molestiae sunt ipsa.
+
−
</p>
+
−
<a href="#" class="btn">button</a>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
 
</html>
 
</html>

Latest revision as of 22:11, 19 October 2016


Important Dates



01/05/2016 Team Registration for iGEM deadline

30/06/2016 InterLab Sign-up Deadline

01/07/2016 Project Description Deadline

02/07/2016 European Teams Meet Up in Paris

15/07/2016 About our Lab Form Deadline

15/07/2016 About our Project Form Deadline

28/07/2016 Scottish Teams Meet Up in Edinburgh

12/08/2016 Track Selection Deadline – Foundational Advance

12/08/2016 Title and Abstract Deadline

17/08/2016 – 18/08/2016 UK Teams Meet Up in Westminster, London

25/08/2016 Edinburgh Undergraduate Team Visits Newcastle

31/08/2016 Giant Jamboree Registration Deadline

02/09/2016 InterLab Data Deadline

09/09/2016 Team Rosters Deadline

16/09/2016 Final Safety Form Deadline

07/10/2016 Team Banners Deadline

14/10/2016 Judging Form Deadline

19/10/2016 Wiki Freeze

21/10/2016 Part Submission Deadline

27/10/2016 – 31/10/2016 Giant Jamboree 2016 @ Hynes Convention Center, Boston, MA