Difference between revisions of "Template:Tsinghua-A"

 
(31 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
<script>
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
 
$(document).ready(function() {
 
 
$("#HQ_page").attr('id','');
 
 
 
//highlight current page on the menu
 
highlight_current_page_menu();
 
 
//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");
 
});
 
 
});
 
 
 
function highlight_current_page_menu() {
 
 
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");
 
 
}
 
}
 
 
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
</script>
 
 
  
 
<style>
 
<style>
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
 
 
  
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
Line 56: Line 9:
  
  
#home_logo, #sideMenu { display:none; }
+
    #home_logo, #sideMenu { display:none; }
#sideMenu, #top_title, .patrollink  {display:none;}
+
    #sideMenu, #top_title, .patrollink  {display:none;}
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
+
    #content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
+
    .judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
  
  
Line 66: Line 19:
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  
/*this wraps the whole of the menu*/
+
    /*this wraps the whole of the menu*/
.igem_2018_team_menu {  
+
    .igem_2018_team_menu {  
background-color:#c4baba;  
+
        background-color:#c4baba;  
border-left: 1px solid #c4baba;
+
        border-left: 1px solid #c4baba;
display:block;
+
        display:block;
float:right;  
+
        float:right;  
height:100vh;  
+
        height:100vh;  
max-width: 270px;
+
        max-width: 270px;
overflow-y: auto;
+
        overflow-y: auto;
overflow-x: hidden;
+
        overflow-x: hidden;
padding:0px;
+
        padding:0px;
position:fixed;  
+
        position:fixed;  
right:0%;
+
        right:0%;
text-align:left;
+
        text-align:left;
width: 15%;  
+
        width: 15%;  
}
+
    }
  
  
.igem_2018_team_menu.displaying_menu{
+
    .igem_2018_team_menu.displaying_menu{
display:block;
+
        display:block;
}
+
    }
  
.igem_2018_team_menu  a {
+
    .igem_2018_team_menu  a {
color: #484848;
+
        color: #484848;
text-decoration:none;
+
        text-decoration:none;
}
+
    }
  
.igem_2018_team_menu img {
+
    .igem_2018_team_menu img {
width:100%;
+
        width:100%;
}
+
    }
  
  
.igem_2018_team_menu .menu_item {
+
    .igem_2018_team_menu .menu_item {
    background-color: #c4baba;
+
        background-color: #c4baba;
    border-bottom: 1px solid #928b8b;
+
        border-bottom: 1px solid #928b8b;
    clear: both;
+
        clear: both;
color: #484848;
+
        color: #484848;
    cursor: pointer;
+
        cursor: pointer;
float: left;
+
        float: left;
    font-size: 120%;
+
        font-size: 120%;
    font-weight: bold;
+
        font-weight: bold;
    padding: 15px 0px 15px 5%;
+
        padding: 15px 0px 15px 5%;
  width: 100%;
+
        width: 100%;
}
+
    }
  
.igem_2018_team_menu .menu_item.direct_link {
+
    .igem_2018_team_menu .menu_item.direct_link {
color: #484848;
+
        color: #484848;
padding-left: 15%;
+
        padding-left: 15%;
}
+
    }
.igem_2018_team_menu .menu_item:hover {
+
    .igem_2018_team_menu .menu_item:hover {
background-color: #ecb656;
+
        background-color: #ecb656;
}
+
    }
  
  
.igem_2018_team_menu .menu_item .submenu_control_icon {
+
    .igem_2018_team_menu .menu_item .submenu_control_icon {
color: #484848;
+
        color: #484848;
float: left;
+
        float: left;
width: 10%;
+
        width: 10%;
}
+
    }
  
/* submenu icon "+"  "-"*/
+
    /* submenu icon "+"  "-"*/
.igem_2018_team_menu .menu_item .submenu_control_icon::before {
+
    .igem_2018_team_menu .menu_item .submenu_control_icon::before {
content: "+";  
+
        content: "+";  
}
+
    }
  
/* submenu icon "+"  "-"*/
+
    /* submenu icon "+"  "-"*/
.igem_2018_team_menu .menu_item .submenu_control_icon.open::before {
+
    .igem_2018_team_menu .menu_item .submenu_control_icon.open::before {
content: "-";  
+
        content: "-";  
}
+
    }
  
/*submenu wrapper*/
+
    /*submenu wrapper*/
.igem_2018_team_menu .submenu{
+
    .igem_2018_team_menu .submenu{
background-color: #e4dede;
+
        background-color: #e4dede;
clear:both;
+
        clear:both;
display:none;
+
        display:none;
float: left;
+
        float: left;      
width:100%;
+
        width:100%;
}
+
    }
  
/*styling for a submenu item*/
+
    /*styling for a submenu item*/
.igem_2018_team_menu .submenu .submenu_item {
+
    .igem_2018_team_menu .submenu .submenu_item {
border-bottom: 1px solid #c4baba;
+
        border-bottom: 1px solid #c4baba;
  color: #635d5d;
+
        color: #635d5d;
    height: 30px;
+
        height: 30px;
  float: left;
+
        float: left;
    font-size: 110%;
+
        font-size: 110%;
font-weight: bold;
+
        font-weight: bold;
    padding: 12px 0px 0px 15%;
+
        padding: 12px 0px 0px 15%;
    width: 100%;
+
        width: 100%;
}
+
    }
  
.igem_2018_team_menu .submenu .submenu_item:hover {
+
    .igem_2018_team_menu .submenu .submenu_item:hover {
background-color: #f3bd5d;
+
        background-color: #f3bd5d;
}
+
    }
  
  
.igem_2018_team_menu .submenu .submenu_item.current_page,
+
    .igem_2018_team_menu .submenu .submenu_item.current_page,
.igem_2018_team_menu .menu_item.current_page,  
+
    .igem_2018_team_menu .menu_item.current_page,  
.igem_2018_team_menu .menu_item.direct_link.current_page {
+
    .igem_2018_team_menu .menu_item.direct_link.current_page {
background-color:#7acbd8;
+
        background-color:#7acbd8;
}
+
    }
  
  
Line 174: Line 127:
  
  
.igem_2018_team_mobile_bar {
+
    .igem_2018_team_mobile_bar {
background-color:#e4dede;  
+
        background-color:#e4dede;  
border-bottom: 1px solid #c4baba;
+
        border-bottom: 1px solid #c4baba;
cursor:pointer;
+
        cursor:pointer;
display:none;  
+
        display:none;  
float:left;
+
        float:left;
margin-top: 0;
+
        margin-top: 0;
padding: 5px 0;
+
        padding: 5px 0;
position:fixed;
+
        position:fixed;
width:100%;  
+
        width:100%;  
}
+
    }
  
.igem_logo_mobile img {
+
    .igem_logo_mobile img {
width:70px;
+
        width:70px;
}
+
    }
  
.igem_logo_mobile {
+
    .igem_logo_mobile {
float:left;  
+
        float:left;  
padding-left: 5%;
+
        padding-left: 5%;
width: 30%;  
+
        width: 30%;  
}
+
    }
  
.igem_menu_control_mobile img {
+
    .igem_menu_control_mobile img {
width:25px;
+
        width:25px;
}
+
    }
  
.igem_menu_control_mobile {
+
    .igem_menu_control_mobile {
float:right;  
+
        float:right;  
padding-right:5%;  
+
        padding-right:5%;  
padding-top:5px;
+
        padding-top:5px;
text-align:right;  
+
        text-align:right;  
width: 30%;  
+
        width: 30%;  
}
+
    }
  
/*general styling*/
 
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
 
 
::selection {
 
    background:#666;
 
    color:#DDD;
 
}
 
 
::-webkit-scrollbar {
 
    width: 8px;
 
}
 
::-webkit-scrollbar-track {
 
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
 
    border-radius:9px;
 
}
 
::-webkit-scrollbar-thumb {
 
    background:rgba(10,10,10,0.4);
 
    -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
 
}
 
::-webkit-scrollbar-thumb:window-inactive {
 
    background:rgba(0,0,0,0.1);
 
}
 
 
html {
 
    padding: 80px 0 0 0;
 
    user-select: none;
 
    height: 100%;
 
    min-width: 800px;
 
    background-image: url(./bg.png);
 
    background-repeat: repeat;
 
    background-attachment:fixed;
 
    font-family: 'Roboto', 'Noto', sans-serif;
 
    font-weight: lighter;
 
    cursor: url('virus.png'), auto;
 
}
 
 
body {
 
    margin: 80px 15% 100px;
 
    width: 70%;
 
    font-size:100%;
 
}
 
 
#header-sroll {
 
    position:fixed;
 
    height: 100px;
 
    background:#EEE;
 
    left:0;
 
    top:0;
 
    float:left;
 
    width:100%;
 
    margin: 0;
 
    -ms-transition:    all 0.3s ease-out;
 
    -moz-transition:    all 0.3s ease-out;
 
    -webkit-transition: all 0.3s ease-out;
 
    -o-transition:      all 0.3s ease-out;
 
    transition:        all 0.3s ease-out;
 
    opacity:0.96;
 
    box-shadow:
 
        0 4px 5px -1px rgba(0, 0, 0, 0.08),
 
        0 1px 10px -1px rgba(0, 0, 0, 0.04),
 
        0 2px 4px -2px rgba(0, 0, 0, 0.3);
 
}
 
 
#header-sroll h1 {
 
    margin: 35px 0;
 
    min-width: 200px;
 
    font-size: 30px;
 
    text-align: center;
 
    transition: left 1s linear;
 
    -ms-transition:    all 0.3s ease-out;
 
    -moz-transition:    all 0.3s ease-out;
 
    -webkit-transition: all 0.3s ease-out;
 
    -o-transition:      all 0.3s ease-out;
 
    transition:        all 0.3s ease-out;
 
}
 
 
#header-sroll.small {
 
    height: 70px;
 
}
 
 
#header-sroll.small h1{
 
    margin: 20px 100% 26px 0;
 
    font-size: 24;
 
    opacity: 0.4;
 
}
 
 
div {
 
    margin: 30px 0;
 
    -ms-transition:    all 0.3s ease-out;
 
    -moz-transition:    all 0.3s ease-out;
 
    -webkit-transition: all 0.3s ease-out;
 
    -o-transition:      all 0.3s ease-out;
 
    transition:        all 0.3s ease-out;
 
}
 
 
div:hover {
 
    user-select: text;
 
}
 
 
div.container{
 
    background-color: #FAFAFA;
 
    margin: 0;
 
    padding: 40px 40px;
 
    border-width: 0 1px 0 1px;
 
    border-style: dashed;
 
    border-color: #eeeeee;
 
    box-shadow:
 
        0 4px 5px -1px rgba(0, 0, 0, 0.08),
 
        0 1px 10px -1px rgba(0, 0, 0, 0.04),
 
        0 2px 4px -2px rgba(0, 0, 0, 0.3);
 
}
 
 
div.container:hover {
 
    transition-property: box-shadow;
 
    transition: .3s;
 
    box-shadow:
 
        0 4px 5px 0 rgba(0, 0, 0, 0.14),
 
        0 1px 10px 0 rgba(0, 0, 0, 0.12),
 
        0 2px 4px -1px rgba(0, 0, 0, 0.4);
 
}
 
 
div.container:active {
 
    transition-property: box-shadow;
 
    transition: .1s;
 
    box-shadow:
 
        0 4px 5px 1px rgba(0, 0, 0, 0.24),
 
        0 1px 10px 1px rgba(0, 0, 0, 0.22),
 
        0 2px 4px 0 rgba(0, 0, 0, 0.5);
 
}
 
 
div#footer {
 
    z-index: -1;
 
    position: fixed;
 
    margin: 0;
 
    left: 0;
 
    bottom: 0;
 
    width: 100%;
 
    text-align: center;
 
    background-color: transparent;
 
    opacity: 0.2;
 
    user-select: none;
 
}
 
 
div#footer:hover {
 
    opacity: 0.6;
 
}
 
 
div#footer p {
 
    font-size: 1rem;
 
}
 
 
h1, h2, h3, h4, h5, h6{
 
    user-select: none;
 
    margin: 2.5rem 0 1.3rem 0;
 
    color: gray;
 
    font-weight: lighter;
 
}
 
 
h1 {
 
    transition-property: color;
 
    transition: .3s;
 
    color: #111111;
 
    font-size:2.25rem;
 
}
 
 
h1.title:hover {
 
    color: #7996BD;
 
}
 
 
h2 {
 
    font-size:2.0rem;
 
}
 
 
h3 {
 
    font-size:1.7rem;
 
}
 
 
h4 {
 
    font-size:1.4rem;
 
}
 
 
p {
 
    margin-bottom: 1rem;
 
    margin-top: 0;
 
    font-size:1.2rem;
 
    color: #222;
 
}
 
 
p:hover {
 
    color: #666;
 
}
 
 
ul {
 
    list-style-type: none;
 
}
 
 
li {
 
    line-height: 150%;
 
    font-size: 1rem;
 
}
 
 
a {
 
    text-decoration: none;
 
    color: #3377aa;
 
}
 
 
a:hover {
 
    color: white;
 
    background-color: #3377aa;
 
}
 
 
/**************************************************************************************************************************************************************************************************/
 
 
 
 
 
  
 
</style>
 
</style>
Line 435: Line 172:
 
<head>  
 
<head>  
  
<!-- This tells the browser that your page is responsive -->
+
        <link href="https://2018.igem.org/Template:Tsinghua-A/css/style?action=raw&ctype=text/css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1">  
+
        <link href="https://2018.igem.org/Template:Tsinghua-A/css/bootstrap?action=raw&ctype=text/css" rel="stylesheet" type="text/css" media="all">
 
+
        <link href="https://2018.igem.org/Template:Tsinghua-A/css/page-style?action=raw&ctype=text/css" rel="stylesheet" type="text/css" media="all" />
 +
        <!------ js ------>
 +
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"> </script>
 +
        <!------ js ------>
 +
        <!---- start-smoth-scrolling---->
 +
        <script type="text/javascript" src="https://2018.igem.org/Template:Tsinghua-A/js/move-top?action=raw&ctype=text/javascript"></script>
 +
        <script type="text/javascript" src="https://2018.igem.org/Template:Tsinghua-A/js/easing?action=raw&ctype=text/javascript"></script>
 +
        <script type="text/javascript">
 +
jQuery(document).ready(function($) {
 +
    $(".scroll").click(function(event){
 +
        event.preventDefault();
 +
        $('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
 +
    });
 +
});
 +
        </script>
 +
        <!---- start-smoth-scrolling---->
 +
        <script src="https://2018.igem.org/Template:Tsinghua-A/js/myscript?action=raw&ctype=text/javascript"> </script>
 +
        <script src="https://2018.igem.org/Template:Tsinghua-A/js/igemscript?action=raw&ctype=text/javascript"> </script>
 +
        <!--- fonts --->
 +
        <link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
 +
        <link href='https://fonts.googleapis.com/css?family=Monda:400,700' rel='stylesheet' type='text/css'>
 +
        <!-- fonts -->
 +
   
 
</head>
 
</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:Tsinghua-A">
 
<img src="http://placehold.it/350x150/e4dede/c4baba">
 
</a>
 
 
 
 
<a href="https://2018.igem.org/Team:Tsinghua-A">
 
<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:Tsinghua-A/Team">
 
<div class="submenu_item">
 
Team Members
 
</div>
 
</a>
 
 
<a href="https://2018.igem.org/Team:Tsinghua-A/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:Tsinghua-A/Description">
 
<div class="submenu_item">
 
Description
 
</div>
 
</a>
 
 
<a href="https://2018.igem.org/Team:Tsinghua-A/Design">
 
<div class="submenu_item">
 
Design
 
</div>
 
</a>
 
 
<a href="https://2018.igem.org/Team:Tsinghua-A/Experiments">
 
<div class="submenu_item">
 
Experiments
 
</div>
 
</a>
 
 
 
<a href="https://2018.igem.org/Team:Tsinghua-A/Notebook">
 
<div class="submenu_item">
 
Notebook
 
</div>
 
</a>
 
 
<a href="https://2018.igem.org/Team:Tsinghua-A/InterLab">
 
<div class="submenu_item">
 
InterLab
 
</div>
 
</a>
 
 
 
<a href="https://2018.igem.org/Team:Tsinghua-A/Model">
 
<div class="submenu_item">
 
Model
 
</div>
 
</a>
 
 
<a href="https://2018.igem.org/Team:Tsinghua-A/Results">
 
<div class="submenu_item">
 
Results
 
</div>
 
</a>
 
 
 
<a href="https://2018.igem.org/Team:Tsinghua-A/Demonstrate">
 
<div class="submenu_item">
 
Demonstrate
 
</div>
 
</a>
 
 
<a href="https://2018.igem.org/Team:Tsinghua-A/Improve">
 
<div class="submenu_item">
 
Improve
 
</div>
 
</a>
 
 
<a href="https://2018.igem.org/Team:Tsinghua-A/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:Tsinghua-A/Parts">
 
<div class="submenu_item">
 
Parts Overview
 
</div>
 
</a>
 
 
<a href="https://2018.igem.org/Team:Tsinghua-A/Basic_Part">
 
<div class="submenu_item">
 
Basic Parts
 
</div>
 
</a>
 
 
<a href="https://2018.igem.org/Team:Tsinghua-A/Composite_Part">
 
<div class="submenu_item">
 
Composite Parts
 
</div>
 
</a>
 
 
<a href="https://2018.igem.org/Team:Tsinghua-A/Part_Collection">
 
<div class="submenu_item">
 
Part Collection
 
</div>
 
</a>
 
</div>
 
 
 
 
 
 
 
<a href="https://2018.igem.org/Team:Tsinghua-A/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:Tsinghua-A/Human_Practices">
 
<div class="submenu_item">
 
Human Practices
 
</div>
 
</a>
 
 
 
<a href="https://2018.igem.org/Team:Tsinghua-A/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:Tsinghua-A/Applied_Design">
 
<div class="submenu_item">
 
Applied Design
 
</div>
 
</a>
 
 
<a href="https://2018.igem.org/Team:Tsinghua-A/Entrepreneurship">
 
<div class="submenu_item">
 
Entrepreneurship
 
</div>
 
</a>
 
 
<a href="https://2018.igem.org/Team:Tsinghua-A/Hardware">
 
<div class="submenu_item">
 
Hardware
 
</div>
 
</a>
 
 
<a href="https://2018.igem.org/Team:Tsinghua-A/Measurement">
 
<div class="submenu_item">
 
Measurement
 
</div>
 
</a>
 
 
<a href="https://2018.igem.org/Team:Tsinghua-A/Model">
 
<div class="submenu_item">
 
Model
 
</div>
 
</a>
 
 
<a href="https://2018.igem.org/Team:Tsinghua-A/Plant">
 
<div class="submenu_item">
 
Plant
 
</div>
 
</a>
 
 
 
<a href="https://2018.igem.org/Team:Tsinghua-A/Software">
 
<div class="submenu_item">
 
Software
 
</div>
 
</a>
 
 
</div>
 
 
 
 
<a href="https://igem.org/2018_Judging_Form?team=Tsinghua-A">
 
<div class="menu_item direct_link">
 
JUDGING FORM ⇗
 
</div>
 
</a>
 
 
</div>
 
  
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!--- Content of the page  --->
 
<!--- 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>
 

Latest revision as of 16:18, 11 October 2018