Difference between revisions of "Template:UCSC"

(Prototype team template page)
 
Line 1: Line 1:
−
<html>
+
/* INSTRUCTIONS: Copy this file text into your editor, and update relevant sections as you progress */
−
<script>
+
−
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
  
−
$(document).ready(function() {
+
/* Define main theme variables */
 +
:root {
 +
    --main-bg-color: #0C5798;
 +
    --hover-bg-color: #F0AE2F;
 +
    --active-bg-color: #F0AE2F;
  
−
$("#HQ_page").attr('id','');
+
    --main-txt-color: #F0AE2F;
−
+
    --hover-txt-color: #0C5798;
 +
    --active-txt-color: #0C5798;
 +
}
  
−
//highlight current page on the menu
+
div, dropdown {
−
highlight_current_page_menu();
+
    background-color: var(--main-bg-color);
−
+
    border-radius: var(--div-border-radius);
−
//accessing submenus
+
}
−
$(".menu_item").click(function(){
+
−
$(".submenu_control_icon", this).toggleClass("open");
+
−
$(this).next(".submenu").fadeToggle(400);
+
−
});
+
−
+
−
//mobile menu access
+
−
$(".igem_2018_team_mobile_bar").click(function(){
+
−
$(this).next().toggleClass("displaying_menu");
+
−
});
+
−
+
−
});
+
  
 +
p {
 +
    color: var(--main-txt-color);
 +
}
  
−
function highlight_current_page_menu() {
+
/*-----NAV BAR THEME-----*/
−
+
−
var page_url="https://2018.igem.org/";
+
−
page_url = page_url + wgPageName;
+
−
$("a[href$='"+ page_url +"']").children().addClass("current_page");
+
−
+
−
//if the page is in a submenu, open the submenu and make the appropiate changes
+
−
if( $( ".current_page" ).hasClass( "submenu_item" )){
+
−
+
−
$(".current_page").parent().parent().fadeToggle(400);
+
−
$(".current_page").parent().parent().prev().addClass("current_page");
+
−
$(".menu_item.current_page > .submenu_control_icon").toggleClass("open");
+
−
+
−
}
+
−
}
+
  
 +
/* Add the background color to the top navigation */
 +
.topnav {
 +
    overflow: hidden;
 +
}
  
−
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
/* Style the links inside the navigation bar */
−
</script>
+
.topnav a {
 +
    float: left;
 +
    display: block;
 +
    color: var(--main-txt-color);
 +
    text-align: center;
 +
    padding: 14px 16px;
 +
    text-decoration: none;
 +
    font-size: 17px;
 +
}
  
 +
/* Add an active class to highlight the current page */
 +
.active {
 +
    background-color: var(--active-bg-color);
 +
    color: white;
 +
}
  
−
<style>
+
.topnav a:hover {
−
/**************************************************************************************************************************************************************************************************/
+
    border-radius: 0px;
 +
}
  
 +
.topnav div div > :first-child:hover {
 +
    border-top-right-radius: var(--div-border-radius);
 +
}
  
 +
.topnav div div > :last-child:hover {
 +
    border-bottom-left-radius: var(--div-border-radius);
 +
    border-bottom-right-radius: var(--div-border-radius);
 +
}
  
−
/**************************************************************************************************************************************************************************************************/
+
/* Hide the link that should open and close the topnav on small screens */
−
/* DEFAULT WIKI SETTINGS */
+
.topnav .icon {
−
/**************************************************************************************************************************************************************************************************/
+
    display: none;
 +
}
  
 +
/* Dropdown container - needed to position the dropdown content */
 +
.dropdown {
 +
    float: left;
 +
    overflow: hidden;
 +
    border-radius: 0px;
 +
}
  
−
#home_logo, #sideMenu { display:none; }
+
/* Style the dropdown button to fit inside the topnav */
−
#sideMenu, #top_title, .patrollink  {display:none;}
+
.dropdown .dropbtn {
−
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
+
    font-size: 17px;
−
body {background-color:white; }
+
    border: none;
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
    outline: none;
 +
    color: var(--main-txt-color);
 +
    /*padding: 14px 16px;*/
 +
    background-color: inherit;
 +
    font-family: inherit;
 +
    margin: 0;
 +
}
  
−
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
+
/* Style the dropdown content (hidden by default) */
 +
.dropdown-content {
 +
    display: none;
 +
    border-top-left-radius: 0px;
 +
    position: absolute;
 +
    min-width: 160px;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
    z-index: 1;
 +
}
  
 +
/* Style the links inside the dropdown */
 +
.dropdown-content a {
 +
    float: none;
 +
    color: var(--main-txt-color);
 +
    padding: 12px 16px;
 +
    text-decoration: none;
 +
    display: block;
 +
    text-align: left;
 +
}
  
−
/**************************************************************************************************************************************************************************************************/
+
/* Add a dark background on topnav links and the dropdown button on hover */
−
/* MENU */
+
.topnav a:hover, .dropdown:hover .dropbtn {
−
/**************************************************************************************************************************************************************************************************/
+
    background-color: var(--hover-bg-color);
 +
    color: var(--hover-txt-color);
 +
}
  
−
/*this wraps the whole of the menu*/
+
/* Add a grey background to dropdown links on hover */
−
.igem_2018_team_menu {  
+
.dropdown-content a:hover {
−
background-color:#c4baba;
+
    background-color: var(--hover-bg-color);
−
border-left: 1px solid #c4baba;
+
    color: var(--hover-txt-color);
−
display:block;
+
}
−
float:right;
+
−
height:100vh;
+
−
max-width: 270px;
+
−
overflow-y: auto;
+
−
overflow-x: hidden;
+
−
padding:0px;
+
−
position:fixed;
+
−
right:0%;
+
−
text-align:left;
+
−
width: 15%;  
+
−
}
+
  
 +
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
 +
.dropdown:hover .dropdown-content {
 +
    display: block;
 +
}
  
−
.igem_2018_team_menu.displaying_menu{
+
/*-----PAGE IN PROGRESS-----*/
−
display:block;
+
−
}
+
  
−
.igem_2018_team_menu  a {
+
.workInProgress {
−
color: #484848;
+
    margin: 25px;
−
text-decoration:none;
+
    border-radius: 10px;
−
}
+
    /*border-style: dashed;
 +
    border-color: var(--hover-bg-color);
 +
    border-width: medium;*/
 +
    padding: 10px;
 +
    background-color: var(--main-bg-color);
 +
    align-content: center;
 +
    align-items: center;
 +
    align-self: center;
 +
}
  
−
.igem_2018_team_menu img {
+
.workInProgress:hover {
−
width:100%;
+
    background-color: green;
−
}
+
}
  
 +
.workInProgress p {
 +
    text-align: center;
 +
    font-size: 2vw;
 +
}
  
−
.igem_2018_team_menu .menu_item {
 
−
    background-color: #c4baba;
 
−
    border-bottom: 1px solid #928b8b;
 
−
    clear: both;
 
−
color: #484848;
 
−
    cursor: pointer;
 
−
float: left;
 
−
    font-size: 120%;
 
−
    font-weight: bold;
 
−
    padding: 15px 0px 15px 5%;
 
−
  width: 100%;
 
−
}
 
  
−
.igem_2018_team_menu .menu_item.direct_link {
 
−
color: #484848;
 
−
padding-left: 15%;
 
−
}
 
−
.igem_2018_team_menu .menu_item:hover {
 
−
background-color: #ecb656;
 
−
}
 
  
 +
/*-----Team Page Classes-----*/
  
−
.igem_2018_team_menu .menu_item .submenu_control_icon {
+
.column {
−
color: #484848;
+
    float: left;
−
float: left;
+
    width: 25%;
−
width: 10%;
+
    padding: 0px;
−
}
+
    background-color: #515151;
 +
}
  
−
/* submenu icon "+"  "-"*/
+
/* Clearfix (clear floats) */
−
.igem_2018_team_menu .menu_item .submenu_control_icon::before {
+
.row::after {
−
content: "+";  
+
    content: "";
−
}
+
    clear: both;
 +
    display: table;
 +
    background-color: #515151;
 +
}
  
−
/* submenu icon "+"  "-"*/
+
/* Slideshow container */
−
.igem_2018_team_menu .menu_item .submenu_control_icon.open::before {
+
.slideshow-container {
−
content: "-";  
+
  max-width: 1000px;
−
}
+
  position: relative;
 +
  margin: auto;
 +
  overflow:hidden;
 +
  border-top:3px solid black;
 +
  border-bottom:3px solid black;
 +
  border-left:1.5px solid black;
 +
  border-right: 1.5px solid black;
 +
  background-color: #515151;
 +
}
  
−
/*submenu wrapper*/
+
/* Next & previous buttons */
−
.igem_2018_team_menu .submenu{
+
.prev, .next {
−
background-color: #e4dede;
+
  cursor: pointer;
−
clear:both;
+
  position: absolute;
−
display:none;
+
  top: 50%;
−
float: left;
+
  width: auto;
−
width:100%;
+
  padding: 16px;
−
}
+
  margin-top: -22px;
 +
  color: white;
 +
  font-weight: bold;
 +
  font-size: 18px;
 +
  transition: 0.6s ease;
 +
  border-radius: 0 3px 3px 0;
 +
  user-select: none;
 +
  opacity: .3;
 +
}
  
−
/*styling for a submenu item*/
+
/* Position the "next button" to the right */
−
.igem_2018_team_menu .submenu .submenu_item {
+
.next {
−
border-bottom: 1px solid #c4baba;
+
  right: 0;
−
  color: #635d5d;
+
  border-radius: 3px 0 0 3px;
−
    height: 30px;
+
}
−
  float: left;
+
−
    font-size: 110%;
+
−
font-weight: bold;
+
−
    padding: 12px 0px 0px 15%;
+
−
    width: 100%;
+
−
}
+
  
−
.igem_2018_team_menu .submenu .submenu_item:hover {
+
/* On hover, add a grey background color */
−
background-color: #f3bd5d;
+
.prev:hover, .next:hover {
−
}
+
  background-color: #f1f1f1;
 +
  color: black;
 +
}
  
 +
/* The dots/bullets/indicators */
 +
.dot {
 +
  cursor: pointer;
 +
  height: 10px;
 +
  width: 10px;
 +
  margin: 0 2px;
 +
  background-color: #bbb;
 +
  border-radius: 50%;
 +
  display: inline-block;
 +
  transition: background-color 0.6s ease;
 +
}
  
−
.igem_2018_team_menu .submenu .submenu_item.current_page,
+
.active, .dot:hover {
−
.igem_2018_team_menu .menu_item.current_page,
+
  background-color: #717171;
−
.igem_2018_team_menu .menu_item.direct_link.current_page {
+
}
−
background-color:#7acbd8;
+
−
}
+
  
 +
/* Fading animation */
 +
.fade {
 +
  -webkit-animation-name: fade;
 +
  -webkit-animation-duration: 1.5s;
 +
  animation-name: fade;
 +
  animation-duration: 1.5s;
 +
  background-color: #515151
 +
}
  
 +
.FullNames {
 +
  text-align: center;
 +
  font-size:175%;
 +
  margin-top:-0px;
 +
  background-color: #515151;
 +
  color: #F0AE2F
 +
}
  
−
/*mobile menu bar styling*/
+
@-webkit-keyframes fade {
−
/**************************************************************************************************************************************************************************************************/
+
  from {opacity: .75}
 +
  to {opacity: 1}
 +
}
 +
@keyframes fade {
 +
  from {opacity: .75}
 +
  to {opacity: 1}
 +
}
  
 +
/* Sliding animation */
 +
.slide {
 +
  overflow-x: hidden;
 +
  transition-property: all;
 +
  transition-duration: .5s;
 +
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
 +
}
  
−
.igem_2018_team_mobile_bar {
+
.slide.closed {
−
background-color:#e4dede;
+
  max-width: 0;
−
border-bottom: 1px solid #c4baba;
+
}
−
cursor:pointer;
+
−
display:none;
+
−
float:left;
+
−
margin-top: 0;
+
−
padding: 5px 0;
+
−
position:fixed;
+
−
width:100%;
+
−
}
+
  
−
.igem_logo_mobile img {
 
−
width:70px;
 
−
}
 
  
−
.igem_logo_mobile {
 
−
float:left;
 
−
padding-left: 5%;
 
−
width: 30%;
 
−
}
 
  
−
.igem_menu_control_mobile img {
+
/*-----Header Styles-----*/
−
width:25px;
+
−
}
+
  
−
.igem_menu_control_mobile {
 
−
float:right;
 
−
padding-right:5%;
 
−
padding-top:5px;
 
−
text-align:right;
 
−
width: 30%;
 
−
}
 
  
  
  
−
/**************************************************************************************************************************************************************************************************/
 
−
/* CONTENT OF THE PAGE */
 
−
/**************************************************************************************************************************************************************************************************/
 
  
−
/* general wrapper for the content */
+
/*-----SCREEN RESPONSIVENESS (MOBILE VERSION)-----*/
−
.igem_2018_team_content {
+
−
background-color:white;
+
−
display:block;
+
−
width: 87%;
+
−
}
+
  
−
/* subwrapper to center content */
+
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
−
.igem_2018_team_content .igem_2018_team_column_wrapper {
+
@media screen and (max-width: 600px) {
−
margin:auto;
+
    .topnav {
−
max-width: 1400px;
+
        background-color: var(--active-bg-color);
−
width:90%;
+
    }
−
}
+
  .topnav :not(:first-child) {display: none;}
 +
  .topnav .icon {
 +
    float: right;
 +
    display: block;
 +
  }
  
 +
}
  
 +
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
 +
@media screen and (max-width: 600px) {
 +
  .topnav.responsive {
 +
      position: relative;
 +
      background-color: var(--main-bg-color);
 +
  }
 +
  .topnav.responsive a.icon {
 +
    position: absolute;
 +
    right: 0;
 +
    top: 0;
 +
  }
 +
  .topnav.responsive a {
 +
    float: none;
 +
    display: block;
 +
    text-align: left;
 +
  }
 +
  .topnav.responsive .dropdown {float: none;}
 +
  .topnav.responsive .dropdown-content {position: relative;}
 +
  .topnav.responsive .dropdown .dropbtn {
 +
    display: block;
 +
    width: 100%;
 +
    text-align: left;
 +
  }
  
−
/*general styling*/
+
  .workInProgress p {
−
/**************************************************************************************************************************************************************************************************/
+
      text-align: center;
 +
      font-size: 5vw;
 +
  }
 +
}
  
−
.igem_2018_team_content .igem_2018_team_column_wrapper h1 { font-size: 210%;}
+
/* On smaller screens, decrease text size */
−
.igem_2018_team_content .igem_2018_team_column_wrapper h2 { font-size: 190%;}
+
@media only screen and (max-width: 300px) {
−
.igem_2018_team_content .igem_2018_team_column_wrapper h3 { font-size: 170%;}
+
  .prev, .next,.text {font-size: 11px}
−
.igem_2018_team_content .igem_2018_team_column_wrapper h4 { font-size: 150%;}
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper h5 { font-size: 140%;}
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper h6 { font-size: 130%;}
+
−
 
+
−
 
+
−
/* styling for the titles h1, h2*/
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper h1, .igem_2018_team_content .igem_2018_team_column_wrapper h2 {
+
−
border-bottom:0px;
+
−
color: #635d5d;
+
−
font-family: "Arial Black", Gadget, sans-serif;
+
−
padding: 10px 0px;
+
−
}
+
−
 
+
−
/* styling for the titles h3, h3, h5, h6 */
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper h3,
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper h4,
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper h5,
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper h6 {
+
−
border-bottom:0px;
+
−
color: #928b8b; 
+
−
font-family: "Arial Black", Gadget, sans-serif;
+
−
padding: 5px 0px;
+
−
}
+
−
 
+
−
/* text */
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper p {
+
−
font-size: 130%;
+
−
font-family: Arial, Helvetica, sans-serif;
+
−
padding: 5px 0px;
+
−
text-align: left;
+
−
color: #484848;
+
−
}
+
−
 
+
−
/* Links */
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper a {
+
−
color: #5bc7d8;
+
−
font-weight: bold;
+
−
text-decoration: underline;
+
−
text-decoration-color:#5bc7d8;
+
−
transition: all 0.4s ease;
+
−
-webkit-transition: all 0.4s ease;
+
−
-moz-transition: all 0.4s ease;
+
−
-ms-transition: all 0.4s ease;
+
−
-o-transition: all 0.4s ease;
+
−
}
+
−
 
+
−
/* hover for the links */
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper a:hover {
+
−
color: #f8b732;
+
−
text-decoration:none;
+
−
}
+
−
 
+
−
 
+
−
/* Table */
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper table {
+
−
border: 1px solid #928b8b;
+
−
border-collapse: collapse;
+
−
font-size: 130%;
+
−
width: 100%;
+
−
}
+
−
 
+
−
/* table cells */
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper td {
+
−
border: 1px solid #c4baba;
+
−
border-collapse: collapse;
+
−
font-size: 105%;
+
−
padding: 10px;
+
−
vertical-align: text-top;
+
−
}
+
−
 
+
−
/* table headers */
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper th {
+
−
background-color:#c4baba;
+
−
border: 1px solid #928b8b;
+
−
border-collapse: collapse;
+
−
font-size: 110%;
+
−
padding: 10px;
+
−
vertical-align: text-top;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/* non numbered lists */
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper ul, .igem_2018_team_content .igem_2018_team_column_wrapper ol {
+
−
font-size: 130%;
+
−
font-family: Arial, Helvetica, sans-serif;
+
−
padding:0px 20px;
+
−
}
+
−
 
+
−
 
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper ul ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ul ul li,
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper ul ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ul ol li,
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper ol ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ol ul li,
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper ol ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ul ol ol li,
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper ol ul ul li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ol ul li,
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper ol ol ol li, .igem_2018_team_content .igem_2018_team_column_wrapper ol ul ol li{ font-size: 76%; }
+
−
 
+
−
 
+
−
 
+
−
/*layout classes*/
+
−
/**************************************************************************************************************************************************************************************************/
+
−
 
+
−
/*main layout class */
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .column  {
+
−
float:left;
+
−
margin: 1% 2%;
+
−
padding: 0px;
+
−
}
+
−
 
+
−
/* 100% */
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size { width:96%; }
+
−
 
+
−
/* 66% */
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size { width: 62.6%; }
+
−
 
+
−
/* 33% */
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size { width: 29.3%; }
+
−
 
+
−
 
+
−
 
+
−
 
+
−
/*styling for all images*/
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size img,
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size img,
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size img {
+
−
margin-bottom: 15px;
+
−
width: 100%;
+
−
}
+
−
 
+
−
 
+
−
/* page break */
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .clear {
+
−
clear:both;
+
−
}
+
−
/*add extra space to page break with clear class*/
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .clear.extra_space {
+
−
height: 30px;
+
−
}
+
−
 
+
−
/* horizontal line to divide the page*/
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .line_divider {
+
−
    border-top: 1px solid #c4baba;
+
−
  margin: auto;
+
−
  width: 98%;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
+
−
/*support classes*/
+
−
/**************************************************************************************************************************************************************************************************/
+
−
 
+
−
 
+
−
/*Button  */
+
−
/************************************************/
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .button_link {
+
−
font-size: 130%;
+
−
margin: 30px auto;
+
−
text-align: center;
+
−
}
+
−
 
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .button_link a  {
+
−
background-color: #5bc7d8;
+
−
color: #635d5d !important;
+
−
font-weight: bold;
+
−
margin: auto;
+
−
text-decoration: none !important;
+
−
padding: 10px 15px;
+
−
}
+
−
 
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .button_link a:hover {
+
−
background-color: #f8b732 !important; 
+
−
}
+
−
 
+
−
 
+
−
 
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight {
+
−
padding: 15px 20px;
+
−
}
+
−
 
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight p,
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h1,
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h2,
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h3,
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h4,
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h5,
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight h6 {
+
−
padding: 5px 15px;
+
−
}
+
−
 
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_background {
+
−
background-color: #e4dede;
+
−
}
+
−
 
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_top {
+
−
    border-top: 4px solid #5bc7d8;
+
−
}
+
−
 
+
−
 
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_A_full {
+
−
    border: 4px solid #5bc7d8;
+
−
}
+
−
 
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_top {
+
−
    border-top: 4px solid #f8b732
+
−
}
+
−
 
+
−
 
+
−
.igem_2018_team_content .igem_2018_team_column_wrapper .highlight.decoration_B_full {
+
−
    border: 4px solid #f8b732;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
/*mobile*/
+
−
/**************************************************************************************************************************************************************************************************/
+
−
 
+
−
 
+
−
/* 1800px  */
+
−
/************************************************/
+
−
@media only screen and (max-width: 1800px) {
+
−
.igem_2018_team_content { width: 85%;}
+
−
.igem_2018_team_menu {display:block;}
+
 
}
 
}
−
 
−
/* 1400px  */
 
−
/************************************************/
 
−
@media only screen and (max-width: 1400px) {
 
−
.igem_2018_team_menu .menu_item { font-size:100%;}
 
−
.igem_2018_team_menu .submenu .submenu_item { font-size:90%;}
 
−
.igem_2018_team_menu {display:block;}
 
−
}
 
−
 
−
@media only screen and (max-width: 1001px) {
 
−
.igem_2018_team_menu {display:block;}
 
−
}
 
−
 
−
/* 1000px  */
 
−
/************************************************/
 
−
@media only screen and (max-width: 1000px) {
 
−
.igem_2018_team_content {width:100%; margin-left:0px;}
 
−
.igem_2018_team_menu {display:none; margin-top: 45px; min-width:50%; width:50%;}
 
−
.igem_2018_team_mobile_bar {display:block;}
 
−
.igem_2018_team_content .igem_2018_team_column_wrapper .column.full_size, .igem_2018_team_content .igem_2018_team_column_wrapper .column.two_thirds_size,.igem_2018_team_content .igem_2018_team_column_wrapper .column.third_size {width:96%; }
 
−
 
−
}
 
−
 
−
 
−
@media only screen and (max-width: 500px) {
 
−
.igem_2018_team_menu {min-width:100%; width:100%; }
 
−
}
 
−
 
−
 
−
/**************************************************************************************************************************************************************************************************/
 
−
 
−
 
−
 
−
 
−
 
−
</style>
 
−
 
−
 
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
−
<!--- THIS IS WHERE THE HTML BEGINS --->
 
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
−
 
−
<head>
 
−
 
−
<!-- This tells the browser that your page is responsive -->
 
−
<meta name="viewport" content="width=device-width, initial-scale=1">
 
−
 
−
</head>
 
−
 
−
 
−
 
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
−
<!--- Menu --->
 
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
−
 
−
 
−
 
−
 
−
<div class="igem_2018_team_mobile_bar">
 
−
 
−
<div class="igem_logo_mobile">
 
−
<img src="https://static.igem.org/mediawiki/2018/4/4f/2018_igem_mobile_menu_logo.svg">
 
−
</div>
 
−
 
−
 
−
<div class="igem_menu_control_mobile">
 
−
<img id="menu_control_image" src="https://static.igem.org/mediawiki/igem.org/3/3b/Menu_icon.svg">
 
−
</div>
 
−
 
−
</div>
 
−
 
−
 
−
 
−
 
−
<div class="igem_2018_team_menu displaying_menu">
 
−
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC">
 
−
<img src="http://placehold.it/350x150/e4dede/c4baba">
 
−
</a>
 
−
 
−
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC">
 
−
<div class="menu_item direct_link">
 
−
HOME
 
−
</div>
 
−
</a>
 
−
 
−
<!-- Team -->
 
−
<div class="menu_item">
 
−
<div class="submenu_control_icon"> </div>
 
−
TEAM
 
−
</div>
 
−
<div class="submenu">
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Team">
 
−
<div class="submenu_item">
 
−
Team Members
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Collaborations">
 
−
<div class="submenu_item">
 
−
Collaborations
 
−
</div>
 
−
</a>
 
−
</div>
 
−
 
−
 
−
<!-- Project -->
 
−
<div class="menu_item">
 
−
<div class="submenu_control_icon"> </div>
 
−
PROJECT
 
−
</div>
 
−
<div class="submenu">
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Description">
 
−
<div class="submenu_item">
 
−
Description
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Design">
 
−
<div class="submenu_item">
 
−
Design
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Experiments">
 
−
<div class="submenu_item">
 
−
Experiments
 
−
</div>
 
−
</a>
 
−
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Notebook">
 
−
<div class="submenu_item">
 
−
Notebook
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/InterLab">
 
−
<div class="submenu_item">
 
−
InterLab
 
−
</div>
 
−
</a>
 
−
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Model">
 
−
<div class="submenu_item">
 
−
Model
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Results">
 
−
<div class="submenu_item">
 
−
Results
 
−
</div>
 
−
</a>
 
−
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Demonstrate">
 
−
<div class="submenu_item">
 
−
Demonstrate
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Improve">
 
−
<div class="submenu_item">
 
−
Improve
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Attributions">
 
−
<div class="submenu_item">
 
−
Attributions
 
−
</div>
 
−
</a>
 
−
 
−
</div>
 
−
 
−
 
−
<div class="menu_item">
 
−
<div class="submenu_control_icon"> </div>
 
−
PARTS
 
−
</div>
 
−
<div class="submenu">
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Parts">
 
−
<div class="submenu_item">
 
−
Parts Overview
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Basic_Part">
 
−
<div class="submenu_item">
 
−
Basic Parts
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Composite_Part">
 
−
<div class="submenu_item">
 
−
Composite Parts
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Part_Collection">
 
−
<div class="submenu_item">
 
−
Part Collection
 
−
</div>
 
−
</a>
 
−
</div>
 
−
 
−
 
−
 
−
 
−
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Safety">
 
−
<div class="menu_item direct_link">
 
−
SAFETY
 
−
</div>
 
−
</a>
 
−
 
−
 
−
 
−
 
−
 
−
 
−
<div class="menu_item">
 
−
<div class="submenu_control_icon"> </div>
 
−
HUMAN PRACTICES
 
−
</div>
 
−
 
−
<div class="submenu">
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Human_Practices">
 
−
<div class="submenu_item">
 
−
Human Practices
 
−
</div>
 
−
</a>
 
−
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Public_Engagement">
 
−
<div class="submenu_item">
 
−
Education & Engagement
 
−
</div>
 
−
</a>
 
−
 
−
</div>
 
−
 
−
 
−
 
−
 
−
 
−
<div class="menu_item">
 
−
<div class="submenu_control_icon"> </div>
 
−
AWARDS
 
−
</div>
 
−
 
−
<div class="submenu">
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Applied_Design">
 
−
<div class="submenu_item">
 
−
Applied Design
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Entrepreneurship">
 
−
<div class="submenu_item">
 
−
Entrepreneurship
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Hardware">
 
−
<div class="submenu_item">
 
−
Hardware
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Measurement">
 
−
<div class="submenu_item">
 
−
Measurement
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Model">
 
−
<div class="submenu_item">
 
−
Model
 
−
</div>
 
−
</a>
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Plant">
 
−
<div class="submenu_item">
 
−
Plant
 
−
</div>
 
−
</a>
 
−
 
−
 
−
<a href="https://2018.igem.org/Team:UCSC/Software">
 
−
<div class="submenu_item">
 
−
Software
 
−
</div>
 
−
</a>
 
−
 
−
</div>
 
−
 
−
 
−
 
−
<a href="https://igem.org/2018_Judging_Form?team=UCSC">
 
−
<div class="menu_item direct_link">
 
−
JUDGING FORM ⇗
 
−
</div>
 
−
</a>
 
−
 
−
 
−
 
−
 
−
 
−
 
−
</div>
 
−
 
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
−
<!--- Content of the page  --->
 
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
−
 
−
 
−
<div class="igem_2018_team_content">
 
−
<div class="igem_2018_team_column_wrapper">
 
−
<div class="clear extra_space"></div>
 
−
<div class="clear extra_space"></div>
 

Revision as of 18:04, 7 June 2018

/* INSTRUCTIONS: Copy this file text into your editor, and update relevant sections as you progress */

/* Define main theme variables */

root {
   --main-bg-color: #0C5798;
   --hover-bg-color: #F0AE2F;
   --active-bg-color: #F0AE2F;

   --main-txt-color: #F0AE2F;
   --hover-txt-color: #0C5798;
   --active-txt-color: #0C5798;

}

div, dropdown { 

   background-color: var(--main-bg-color);
   border-radius: var(--div-border-radius);

}

p { 

   color: var(--main-txt-color);

}

/*-----NAV BAR THEME-----*/

/* Add the background color to the top navigation */ .topnav { 

   overflow: hidden;

}

/* Style the links inside the navigation bar */ .topnav a { 

   float: left;
   display: block;
   color: var(--main-txt-color);
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 17px;

}

/* Add an active class to highlight the current page */ .active { 

   background-color: var(--active-bg-color);
   color: white;

}

.topnav a:hover { 

   border-radius: 0px;

}

.topnav div div > :first-child:hover { 

   border-top-right-radius: var(--div-border-radius);

}

.topnav div div > :last-child:hover { 

   border-bottom-left-radius: var(--div-border-radius);
   border-bottom-right-radius: var(--div-border-radius);

}

/* Hide the link that should open and close the topnav on small screens */ .topnav .icon { 

   display: none;

}

/* Dropdown container - needed to position the dropdown content */ .dropdown { 

   float: left;
   overflow: hidden;
   border-radius: 0px;

}

/* Style the dropdown button to fit inside the topnav */ .dropdown .dropbtn { 

   font-size: 17px;
   border: none;
   outline: none;
   color: var(--main-txt-color);
   /*padding: 14px 16px;*/
   background-color: inherit;
   font-family: inherit;
   margin: 0;

}

/* Style the dropdown content (hidden by default) */ .dropdown-content { 

   display: none;
   border-top-left-radius: 0px;
   position: absolute;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;

}

/* Style the links inside the dropdown */ .dropdown-content a { 

   float: none;
   color: var(--main-txt-color);
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;

}

/* Add a dark background on topnav links and the dropdown button on hover */ .topnav a:hover, .dropdown:hover .dropbtn { 

   background-color: var(--hover-bg-color);
   color: var(--hover-txt-color);

}

/* Add a grey background to dropdown links on hover */ .dropdown-content a:hover { 

   background-color: var(--hover-bg-color);
   color: var(--hover-txt-color);

}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */ .dropdown:hover .dropdown-content { 

   display: block;

}

/*-----PAGE IN PROGRESS-----*/

.workInProgress { 

   margin: 25px;
   border-radius: 10px;
   /*border-style: dashed;
   border-color: var(--hover-bg-color);
   border-width: medium;*/
   padding: 10px;
   background-color: var(--main-bg-color);
   align-content: center;
   align-items: center;
   align-self: center;

}

.workInProgress:hover { 

   background-color: green;

}

.workInProgress p { 

   text-align: center;
   font-size: 2vw;

}


/*-----Team Page Classes-----*/

.column { 

   float: left;
   width: 25%;
   padding: 0px;
   background-color: #515151;

}

/* Clearfix (clear floats) */ .row::after { 

   content: "";
   clear: both;
   display: table;
   background-color: #515151;

}

/* Slideshow container */ .slideshow-container { 

 max-width: 1000px;
 position: relative;
 margin: auto;
 overflow:hidden;
 border-top:3px solid black;
 border-bottom:3px solid black; 
 border-left:1.5px solid black; 
 border-right: 1.5px solid black;
 background-color: #515151;

}

/* Next & previous buttons */ .prev, .next { 

 cursor: pointer;
 position: absolute;
 top: 50%;
 width: auto;
 padding: 16px;
 margin-top: -22px;
 color: white;
 font-weight: bold;
 font-size: 18px;
 transition: 0.6s ease;
 border-radius: 0 3px 3px 0;
 user-select: none;
 opacity: .3;

}

/* Position the "next button" to the right */ .next { 

 right: 0;
 border-radius: 3px 0 0 3px;

}

/* On hover, add a grey background color */ .prev:hover, .next:hover { 

 background-color: #f1f1f1;
 color: black;

}

/* The dots/bullets/indicators */ .dot { 

 cursor: pointer;
 height: 10px;
 width: 10px;
 margin: 0 2px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
 transition: background-color 0.6s ease;

}

.active, .dot:hover { 

 background-color: #717171;

}

/* Fading animation */ .fade { 

 -webkit-animation-name: fade;
 -webkit-animation-duration: 1.5s;
 animation-name: fade;
 animation-duration: 1.5s;
 background-color: #515151

}

.FullNames { 

 text-align: center; 
 font-size:175%; 
 margin-top:-0px; 
 background-color: #515151; 
 color: #F0AE2F

}

@-webkit-keyframes fade { 

 from {opacity: .75} 
 to {opacity: 1}

} @keyframes fade { 

 from {opacity: .75} 
 to {opacity: 1}

}

/* Sliding animation */ .slide { 

 overflow-x: hidden;
 transition-property: all;
 transition-duration: .5s;
 transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

}

.slide.closed { 

 max-width: 0;

}


/*-----Header Styles-----*/



/*-----SCREEN RESPONSIVENESS (MOBILE VERSION)-----*/

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */ @media screen and (max-width: 600px) { 

   .topnav {
       background-color: var(--active-bg-color);
   }
 .topnav :not(:first-child) {display: none;}
 .topnav .icon {
   float: right;
   display: block;
 }

}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */ @media screen and (max-width: 600px) { 

 .topnav.responsive {
     position: relative;
     background-color: var(--main-bg-color);
 }
 .topnav.responsive a.icon {
   position: absolute;
   right: 0;
   top: 0;
 }
 .topnav.responsive a {
   float: none;
   display: block;
   text-align: left;
 }
 .topnav.responsive .dropdown {float: none;}
 .topnav.responsive .dropdown-content {position: relative;}
 .topnav.responsive .dropdown .dropbtn {
   display: block;
   width: 100%;
   text-align: left;
 }

 .workInProgress p {
     text-align: center;
     font-size: 5vw;
 }

}

/* On smaller screens, decrease text size */ @media only screen and (max-width: 300px) { 

 .prev, .next,.text {font-size: 11px}

}