Difference between revisions of "Team:Rotterdam HR"

(Undo revision 178362 by Rensb (talk))
Line 1: Line 1:
−
/* ----- color palet ----- */
+
<html>
 +
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<link rel="stylesheet" href="https://2018.igem.org/Template:Rotterdam_HR/css/main?action=raw&ctype=text/css">
 +
<style>
  
−
:root {
+
.menu #index, .menu #index-category {
−
--color-primary: #1B5E20;
+
color: goldenrod;
−
--color-secondary: #C8E6C9;
+
}
 +
 +
</style>
 +
</head>
 +
<body>
  
−
--color-dark: rgb(50, 50, 50);
+
<style>
−
 
+
.header::before {
−
--color-wetlab: #1B5E20;
+
background: black url("https://static.igem.org/mediawiki/2018/c/c1/T--Rotterdam_HR--graffiti.jpeg") no-repeat left;
−
+
  background-size: 100%;
−
--color-hardware: #3949AB;
+
−
 
+
−
--color-software: #424242;
+
−
--color-software-secondary: #6a6a6a;
+
−
}
+
−
 
+
−
/* ------ PAGE ------ */
+
−
.page-index, .page-description {
+
−
background: var(--color-secondary);
+
−
}
+
−
.page-software {
+
−
background: var(--color-software-secondary);
+
−
}
+
−
 
+
−
/* ----- iGEM STYLE FIXES ----- */
+
−
 
+
−
ul {
+
−
list-style-image: none;
+
−
}
+
−
 
+
−
#content {
+
−
width: 100%;
+
−
margin: 0;
+
−
padding: 0;
+
−
background: none;
+
−
}
+
−
 
+
−
#bodyContent a[href ^="https://"], .link-https {
+
−
    background: whitesmoke;
+
−
    padding: 5px 0;
+
−
}
+
−
 
+
−
#HQ_page h1, #HQ_page h2, #HQ_page h3, #HQ_page p, #HQ_page span, #HQ_page a{
+
−
font-family: candara;
+
−
line-height: initial;
+
−
}
+
−
 
+
−
#bodyContent h3, #bodyContent h4, #bodyContent h5 {
+
−
margin-bottom: 0;
+
−
padding: 0 5px;
+
−
line-height: 1.1em;
+
−
}
+
−
 
+
−
#top_title, #top_menu_under {
+
−
display: none;
+
−
}
+
−
 
+
−
#top_menu_14 {
+
−
position: initial;
+
−
}
+
−
 
+
−
#top_menu_inside #user_item {
+
−
margin-right: 0;
+
−
float: none;
+
−
}
+
−
#top_menu_inside {
+
−
margin: 0 auto;
+
−
width: 90%;
+
−
}
+
−
 
+
−
body {
+
−
font-family: candara;
+
−
background: white;
+
−
  font-size: 13px;
+
−
}
+
−
 
+
−
/* ----- NAVBAR ----- */
+
−
.menu {
+
−
display: flex;
+
−
}
+
−
 
+
−
.menu,
+
−
.sub-menu {
+
−
  margin: 0;
+
−
  padding: 0;
+
−
  list-style: none;
+
−
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1);
+
−
}
+
−
 
+
−
.menu .main-item {
+
−
  position: relative;
+
−
  display: flex;
+
−
  flex-direction: column;
+
−
  align-items: center;
+
−
  flex: 1;
+
−
  height: 44px;
+
−
  padding: 5px;
+
−
  text-align: center;
+
−
  text-decoration: none;
+
−
  color: white;
+
−
  background: var(--color-dark);
+
−
fill: currentColor;
+
−
z-index: 1;
+
−
}
+
−
 
+
−
.menu .main-item::before {
+
−
  content: "";
+
−
  position: absolute;
+
−
  bottom: 0;
+
−
  left: 0;
+
−
  right: 0;
+
−
  height: 3px;
+
−
  background: currentColor;
+
−
  transform: scale(0, 1);
+
−
  transform-origin: left;
+
−
  transition: transform 200ms;
+
−
}
+
−
 
+
−
.menu .home-button {
+
−
  width: 200px;
+
−
  position: relative;
+
−
}
+
−
 
+
−
.menu .home-button a {
+
−
  position: absolute;
+
−
  top: 0;
+
−
  left: 0;
+
−
  right: 0;
+
−
  bottom: -80px;
+
−
  border-radius: 0 0 50% 50%;
+
−
  background: var(--color-dark);
+
−
}
+
−
 
+
−
.sub-menu {
+
−
  position: absolute;
+
−
  top: 54px;
+
−
  left: 0;
+
−
  right: 0;
+
−
  transform: scale(1, 0);
+
−
  transform-origin: top;
+
−
  transition: transform 250ms;
+
−
}
+
−
 
+
−
.sub-menu .sub-item {
+
−
  padding: 10px 5px;
+
−
  border-top: rgba(255, 255, 255, 0.25) solid 2px;
+
−
  color: var(--color-dark);
+
−
transition: color 200ms;
+
−
min-width: 96px;
+
−
max-height: fit-content;
+
−
}
+
−
 
+
−
.menu .construction::after {
+
−
  content: url('https://static.igem.org/mediawiki/2018/4/4a/T--Rotterdam_HR--wrench.svg');
+
−
  position: absolute;
+
−
  top: 5px;
+
−
  left: 0;
+
−
  right: 0;
+
−
  bottom: 5px;
+
−
  display: flex;
+
−
  flex-direction: column;
+
−
  align-items: center;
+
−
  font-size: 12px;
+
−
  color: orange;
+
−
  background: var(--color-dark);
+
−
  transform: scale(1, 0);
+
−
  transform-origin: bottom;
+
−
  transition: transform 250ms;
+
−
}
+
−
 
+
−
.menu .main-item:hover::before {
+
−
  transform: scale(1, 1);
+
−
}
+
−
 
+
−
 
+
−
.menu .construction:hover::after {
+
−
  transform: scale(1, 1);
+
−
}
+
−
 
+
−
.menu .main-item:hover .sub-menu {
+
−
  transform: scale(1, 1);
+
−
}
+
−
 
+
−
.menu .main-item:hover .sub-menu .sub-item {
+
−
  color: white;
+
−
  transition: color 200ms 100ms;
+
−
}
+
−
 
+
−
#menuToggle a {
+
−
  text-decoration: none;
+
−
  color: white;
+
−
  transition: color 0.3s ease;
+
−
}
+
−
 
+
−
#menuToggle a:hover {
+
−
  color: gray;
+
−
}
+
−
 
+
−
#menuToggle {
+
−
  display: none;
+
−
  position: relative;
+
−
  top: -35px;
+
−
left: 20px;
+
−
width: 50px;
+
−
  z-index: 1;
+
−
  -webkit-user-select: none;
+
−
  user-select: none;
+
−
}
+
−
 
+
−
#menuToggle input {
+
−
  display: block;
+
−
  width: 40px;
+
−
  height: 32px;
+
−
  position: absolute;
+
−
  top: -7px;
+
−
  left: -5px;
+
−
 
+
−
  cursor: pointer;
+
−
 
+
−
  opacity: 0; /* hide this */
+
−
  z-index: 2; /* and place it over the hamburger */
+
−
 
+
−
  -webkit-touch-callout: none;
+
−
}
+
−
 
+
−
/*
+
−
* Just a quick hamburger
+
−
*/
+
−
#menuToggle span {
+
−
  display: block;
+
−
  width: 33px;
+
−
  height: 4px;
+
−
  margin-bottom: 5px;
+
−
  position: relative;
+
−
  background: white;
+
−
  border-radius: 3px;
+
−
 
+
−
  z-index: 1;
+
−
 
+
−
  transform-origin: 4px 0px;
+
−
 
+
−
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+
−
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+
−
              opacity 0.55s ease;
+
−
}
+
−
 
+
−
#menuToggle span:first-child
+
−
{
+
−
  transform-origin: 0% 0%;
+
−
}
+
−
 
+
−
#menuToggle span:nth-last-child(2)
+
−
{
+
−
  transform-origin: 0% 100%;
+
−
}
+
−
 
+
−
/*
+
−
* Transform all the slices of hamburger
+
−
* into a crossmark.
+
−
*/
+
−
#menuToggle input:checked ~ span
+
−
{
+
−
  opacity: 1;
+
−
  transform: rotate(45deg) translate(-2px, -1px);
+
−
  background: white;
+
−
}
+
−
 
+
−
/*
+
−
* But let's hide the middle one.
+
−
*/
+
−
#menuToggle input:checked ~ span:nth-last-child(3)
+
−
{
+
−
  opacity: 0;
+
−
  transform: rotate(0deg) scale(0.2, 0.2);
+
−
}
+
−
 
+
−
/*
+
−
* Ohyeah and the last one should go the other direction
+
−
*/
+
−
#menuToggle input:checked ~ span:nth-last-child(2)
+
−
{
+
−
  transform: rotate(-45deg) translate(0, -1px);
+
−
}
+
−
 
+
−
/*
+
−
* Make this absolute positioned
+
−
* at the top left of the screen
+
−
*/
+
−
#mobile-menu
+
−
{
+
−
  position: absolute;
+
−
width: 200px;
+
−
  margin: -100px 0 0 -50px;
+
−
  padding: 50px;
+
−
  padding-top: 125px;
+
−
  background: var(--color-dark);
+
−
  list-style-type: none;
+
−
  -webkit-font-smoothing: antialiased;
+
−
/* to stop flickering of text in safari */
+
−
 
+
−
  transform-origin: 0% 0%;
+
−
  transform: translate(-100%, 0);
+
−
 
+
−
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
+
−
}
+
−
 
+
−
#mobile-menu li
+
−
{
+
−
  padding: 5px 0;
+
−
  font-size: 16px;
+
−
  height: 0.75em;
+
−
  display: flex;
+
−
  align-items: center;
+
−
}
+
−
 
+
−
#mobile-menu li svg {
+
−
  width: 1em;
+
−
  height: 1em;
+
−
  margin-right: 10px;
+
−
  fill: currentColor;
+
−
}
+
−
 
+
−
#mobile-menu li span {
+
−
  width: 100%;
+
−
  height: 0.75em;
+
−
  background: none;
+
−
}
+
−
 
+
−
/*
+
−
* And let's slide it in from the left
+
−
*/
+
−
#menuToggle input:checked ~ ul
+
−
{
+
−
  transform: none;
+
−
}
+
−
 
+
−
@media only screen and (max-width: 1400px) {
+
−
  .main-item {
+
−
    font-size: smaller;
+
−
  }
+
−
 
+
−
}
+
−
 
+
−
@media only screen and (max-width: 1060px) {
+
−
.home-button {
+
−
display: none;
+
 
}
 
}
  
−
}
+
@media screen and (max-width: 720px) {
−
 
+
.header::before {
−
@media only screen and (max-width: 900px) {
+
background: black url("https://static.igem.org/mediawiki/2018/0/0c/T--Rotterdam_HR--Graffiti-banner_small.jpeg") no-repeat left;
−
  .menu {
+
background-size: 100% 100%;
−
    height: 50px;
+
}
−
    width: 100%;
+
−
    background: var(--color-dark);
+
−
  }
+
−
 
+
−
  .menu .main-item {
+
−
    display: none;
+
 
}
 
}
−
+
</style>
−
#menuToggle {
+
−
display: block;
+
−
  }
+
−
 
+
−
}
+
−
 
+
−
/* ------ HEADER ------ */
+
−
 
+
−
.header {
+
−
  position: relative;
+
−
  height: 40vh;
+
−
  width: 100%;
+
−
  background: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.5), rgba(255,255,255,0.3));
+
−
  display: flex;
+
−
  align-items: center;
+
−
  text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.4);
+
−
}
+
−
 
+
−
.header::before {
+
−
  content: '';
+
−
  position: absolute;
+
−
  z-index: -1;
+
−
  top: 0;
+
−
  left: 0;
+
−
  right: 0;
+
−
  bottom: 0;
+
−
}
+
−
 
+
−
.header div {
+
−
  margin: auto;
+
−
  display: flex;
+
−
  flex-direction: column;
+
−
align-items: center;
+
−
}
+
−
 
+
−
.header div svg {
+
−
  width: 160px;
+
−
  height: 160px;
+
−
}
+
−
 
+
−
.header div h1 {
+
−
padding: 0;
+
−
  margin-top: 0;
+
−
  font-size: 50px;
+
−
}
+
−
 
+
−
/* ------ FOOTER ------ */
+
−
 
+
−
.multiple-items-footer {
+
−
margin: 0 auto;
+
−
display: flex;
+
−
justify-content: space-around;
+
−
width: 250px;
+
−
}
+
−
 
+
−
.item-footer {
+
−
width: 50px;
+
−
height: 50px;
+
−
margin: 5px;
+
−
filter: invert(50%);
+
−
transition: 0.4s;
+
−
}
+
−
 
+
−
.item-footer:hover {
+
−
filter: invert(100%);
+
−
transition: 0.1s;
+
−
}
+
−
 
+
−
#footer {
+
−
padding: 40px 0;
+
−
background: rgb(50, 50, 50);
+
−
text-align: center;
+
−
color: white;
+
−
font-size: 18px;
+
−
}
+
−
 
+
−
/* ------ CONTAINERS ------ */
+
−
 
+
−
.nav-cards {
+
−
  display: flex;
+
−
  flex-wrap: wrap;
+
−
  justify-content: center;
+
−
  margin: 20px auto;
+
−
}
+
−
 
+
−
.nav-card {
+
−
  width: 180px;
+
−
  height: 180px;
+
−
  margin: 10px;
+
−
  position: relative;
+
−
  color: white;
+
−
  text-align: center;
+
−
  background: var(--color-software);
+
−
  box-shadow: 2px 2px 10px rgba(0,0,0,0.25);
+
−
  transition: 200ms;
+
−
  border-radius: 3px;
+
−
}
+
−
 
+
−
.nav-card svg {
+
−
  position: absolute;
+
−
  fill: white;
+
−
  width: 50%;
+
−
  height: 50%;
+
−
  top: 10%;
+
−
  left: 25%;
+
−
}
+
−
 
+
−
.nav-card h2 {
+
−
  position: absolute;
+
−
  bottom: 0;
+
−
  left: 5px;
+
−
right: 5px;
+
−
color: white;
+
−
}
+
−
 
+
−
.nav-card::before, .nav-card::after {
+
−
  content: '';
+
−
  position: absolute;
+
−
  top: 5px;
+
−
  left: 5px;
+
−
  right: 5px;
+
−
  bottom: 5px;
+
−
  transition: transform 400ms;
+
−
}
+
−
 
+
−
.nav-card::before {
+
−
  border-top: white solid 1px;
+
−
  border-bottom: white solid 1px;
+
−
  transform: scale(0, 1);
+
−
}
+
−
 
+
−
.nav-card::after {
+
−
  border-left: white solid 1px;
+
−
  border-right: white solid 1px;
+
−
  transform: scale(1, 0);
+
−
}
+
−
 
+
−
.nav-card:hover::before {
+
−
  transform: scale(1, 1);
+
−
}
+
−
 
+
−
.nav-card:hover::after {
+
−
  transform: scale(1, 1);
+
−
}
+
−
 
+
−
.text-container {
+
−
  position: relative;
+
−
  text-align: center;
+
−
  margin: 60px auto;
+
−
  padding: 10px;
+
−
  max-width: 1000px;
+
−
}
+
−
 
+
−
.text-container h1 {
+
−
  font-size: 40px;
+
−
  position: relative;
+
−
  color: var(--color-primary);
+
−
}
+
−
 
+
−
.text-container h1::after {
+
−
  content: '';
+
−
  position: absolute;
+
−
  bottom: 0;
+
−
  left: 10%;
+
−
  right: 10%;
+
−
  height: 4px;
+
−
  border-radius: 2px;
+
−
  background: currentColor;
+
−
}
+
−
 
+
−
.text-container p {
+
−
  margin-bottom: 20px;
+
−
  font-size: 24px !important;
+
−
  text-align: center !important;
+
−
}
+
  
−
.nav-button {
+
<div class="header">
−
position: relative;
+
  <div>
−
  padding: 10px 20px;
+
<div id="icon"></div>
−
   background: var(--color-primary);
+
<script> $('#icon').load("https://2018.igem.org/Template:Rotterdam_HR/icon/index?action=raw&ctype=text/html"); </script>
−
  color: white;
+
    <h1 style="background: none;">Home</h1>
−
  text-decoration: none;
+
   </div>
−
   box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
+
</div>
−
   font-size: 24px !important;
+
<div class="page-index">
−
}
+
<div id="navbar" style="position: -webkit-sticky;position: sticky;top: -2px; width: 100%; z-index: 100; margin-bottom: 100px;"></div>
 +
<div class="text-container">
 +
   <h1>Team Rotterdam</h1>
 +
  <p style="font-size: 20px; text-align: center;">
 +
    We are team Rotterdam, the first iGEM team from the Rotterdam University of Applied Sciences. We are a team with multiple disciplinaries: five biology and medical laboratory research students; two chemistry students; two electrical engineer students and even a computer science student. Together we make an efficient and effective team.
 +
    <br><br>
 +
    We stand out because of our focus on the hardware due to our two electrical engineers. We also have the ability to create powerful software to bolster our efficiency.
 +
   </p>
 +
  <a href="https://2018.igem.org/Team:Rotterdam_HR/Team" class="nav-button" style="color: white; text-decoration: none;">To the team page</a>
 +
</div>
  
−
.nav-button::before {
+
<div class="text-container">
−
  content: '> ';
+
<h1>Relevant pages</h1>
−
}
+
<div class="nav-cards">
 +
<a href="https://2018.igem.org/Team:Rotterdam_HR/Description" class="nav-card">
 +
<h2>Project Description</h2>
 +
<svg viewBox="0 0 24 24">
 +
<path d="M9.46,6.28L11.05,9C8.47,9.26 6.5,11.41 6.5,14A5,5 0 0,0 11.5,19C13.55,19 15.31,17.77 16.08,16H13.5V14H21.5V16H19.25C18.84,17.57 17.97,18.96 16.79,20H19.5V22H3.5V20H6.21C4.55,18.53 3.5,16.39 3.5,14C3.5,10.37 5.96,7.2 9.46,6.28M12.74,2.07L13.5,3.37L14.36,2.87L17.86,8.93L14.39,10.93L10.89,4.87L11.76,4.37L11,3.07L12.74,2.07Z"></path>
 +
</svg>
 +
</a>
 +
<a href="https://2018.igem.org/Team:Rotterdam_HR/Team" class="nav-card">
 +
<h2>Team Rotterdam</h2>
 +
<svg viewBox="0 0 24 24">
 +
<path d="M16,13C15.71,13 15.38,13 15.03,13.05C16.19,13.89 17,15 17,16.5V19H23V16.5C23,14.17 18.33,13 16,13M8,13C5.67,13 1,14.17 1,16.5V19H15V16.5C15,14.17 10.33,13 8,13M8,11A3,3 0 0,0 11,8A3,3 0 0,0 8,5A3,3 0 0,0 5,8A3,3 0 0,0 8,11M16,11A3,3 0 0,0 19,8A3,3 0 0,0 16,5A3,3 0 0,0 13,8A3,3 0 0,0 16,11Z" />
 +
</svg>
 +
</a>
 +
<a href="https://2018.igem.org/Team:Rotterdam_HR/Hardware" class="nav-card">
 +
<h2>Hardware</h2>
 +
<svg viewBox="0 0 24 24">
 +
<path d="M15.9,18.45C17.25,18.45 18.35,17.35 18.35,16C18.35,14.65 17.25,13.55 15.9,13.55C14.54,13.55 13.45,14.65 13.45,16C13.45,17.35 14.54,18.45 15.9,18.45M21.1,16.68L22.58,17.84C22.71,17.95 22.75,18.13 22.66,18.29L21.26,20.71C21.17,20.86 21,20.92 20.83,20.86L19.09,20.16C18.73,20.44 18.33,20.67 17.91,20.85L17.64,22.7C17.62,22.87 17.47,23 17.3,23H14.5C14.32,23 14.18,22.87 14.15,22.7L13.89,20.85C13.46,20.67 13.07,20.44 12.71,20.16L10.96,20.86C10.81,20.92 10.62,20.86 10.54,20.71L9.14,18.29C9.05,18.13 9.09,17.95 9.22,17.84L10.7,16.68L10.65,16L10.7,15.31L9.22,14.16C9.09,14.05 9.05,13.86 9.14,13.71L10.54,11.29C10.62,11.13 10.81,11.07 10.96,11.13L12.71,11.84C13.07,11.56 13.46,11.32 13.89,11.15L14.15,9.29C14.18,9.13 14.32,9 14.5,9H17.3C17.47,9 17.62,9.13 17.64,9.29L17.91,11.15C18.33,11.32 18.73,11.56 19.09,11.84L20.83,11.13C21,11.07 21.17,11.13 21.26,11.29L22.66,13.71C22.75,13.86 22.71,14.05 22.58,14.16L21.1,15.31L21.15,16L21.1,16.68M6.69,8.07C7.56,8.07 8.26,7.37 8.26,6.5C8.26,5.63 7.56,4.92 6.69,4.92A1.58,1.58 0 0,0 5.11,6.5C5.11,7.37 5.82,8.07 6.69,8.07M10.03,6.94L11,7.68C11.07,7.75 11.09,7.87 11.03,7.97L10.13,9.53C10.08,9.63 9.96,9.67 9.86,9.63L8.74,9.18L8,9.62L7.81,10.81C7.79,10.92 7.7,11 7.59,11H5.79C5.67,11 5.58,10.92 5.56,10.81L5.4,9.62L4.64,9.18L3.5,9.63C3.41,9.67 3.3,9.63 3.24,9.53L2.34,7.97C2.28,7.87 2.31,7.75 2.39,7.68L3.34,6.94L3.31,6.5L3.34,6.06L2.39,5.32C2.31,5.25 2.28,5.13 2.34,5.03L3.24,3.47C3.3,3.37 3.41,3.33 3.5,3.37L4.63,3.82L5.4,3.38L5.56,2.19C5.58,2.08 5.67,2 5.79,2H7.59C7.7,2 7.79,2.08 7.81,2.19L8,3.38L8.74,3.82L9.86,3.37C9.96,3.33 10.08,3.37 10.13,3.47L11.03,5.03C11.09,5.13 11.07,5.25 11,5.32L10.03,6.06L10.06,6.5L10.03,6.94Z"></path>
 +
</svg>
 +
</a>
 +
<a href="https://2018.igem.org/Team:Rotterdam_HR/Wikistat" class="nav-card">
 +
<h2>Wiki statistics</h2>
 +
<svg viewBox="0 0 24 24">
 +
        <path d="M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" />
 +
      </svg>
 +
</a>
 +
</div>
 +
</div>
  
−
.nav-button::after {
+
<div id="footer"></div>
−
  content: '';
+
<script src="https://2018.igem.org/Template:Rotterdam_HR/js/main?action=raw&ctype=text/javascript"></script>
−
  position: absolute;
+
−
  left: 0;
+
−
  right: 0;
+
−
  bottom: 0;
+
−
  height: 3px;
+
−
  background: white;
+
−
  transform: scale(0, 1);
+
−
  transform-origin: left;
+
−
  transition: transform 200ms;
+
−
}
+
  
−
.nav-button:hover::after {
+
</div>
−
  transform: scale(1, 1);
+
</body>
−
}
+
</html>

Revision as of 12:34, 29 September 2018

Home

Team Rotterdam

We are team Rotterdam, the first iGEM team from the Rotterdam University of Applied Sciences. We are a team with multiple disciplinaries: five biology and medical laboratory research students; two chemistry students; two electrical engineer students and even a computer science student. Together we make an efficient and effective team.

We stand out because of our focus on the hardware due to our two electrical engineers. We also have the ability to create powerful software to bolster our efficiency.

To the team page

Relevant pages

Project Description

Team Rotterdam

Hardware

Wiki statistics