Difference between revisions of "Template:Austin UTexas"

 
(317 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
 
 
<style>
 
<style>
  
Line 6: Line 5:
  
 
#sideMenu, #top_title {display:none;}
 
#sideMenu, #top_title {display:none;}
−
#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
+
#content { padding:0px; width:100%; margin-top: 0px; margin-left:0px;}
 
body {background-color:white; }
 
body {background-color:white; }
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; margin-top: 0px}
  
 
/********************************* MENU ********************************/
 
/********************************* MENU ********************************/
−
/* Wrapper for the menu */
+
 
 +
/*********************new menu formatting*******************/
 +
 
 +
.menu-wrap {
 +
    width:100%;
 +
    background:#FFF;
 +
    position:relative;
 +
}
 +
 +
.menu {
 +
    margin-top:-6px;
 +
    padding:0;
 +
    position: fixed;
 +
    z-index:1;
 +
    left: 0px;
 +
    width:100%;
 +
    background:#FFF;
 +
}
 +
 +
.menu li {
 +
    margin:0px;
 +
    list-style:none;
 +
}
 +
 +
.menu a {
 +
    transition:all linear 0.15s;
 +
    padding:10px;
 +
    color:#BDBDBD;
 +
}
 +
 +
.menu li:hover > a, .menu .current-item > a {
 +
    text-decoration:none;
 +
    color:#000000;
 +
}
 +
 +
.menu .arrow {
 +
    font-size:11px;
 +
    line-height:0%;
 +
}
 +
 +
/*----- Top Level -----*/
 +
menu > ul {
 +
    white-space: nowrap;
 +
}
 +
 
 +
 
 +
.menu > ul > li {
 +
    margin-top:-5px;
 +
    float:left;
 +
    display:inline-block;
 +
    position:relative;
 +
    font-size:12px;
 +
}
 +
 +
.menu > ul > li > a {
 +
      display: inline-block;
 +
      float: none;
 +
}
 +
 +
.menu > ul > li:hover > a, .menu > ul > .current-item > a {
 +
    background:#DF7F3E;
 +
}
 +
 +
/*----- Bottom Level -----*/
 +
.menu li:hover ul {
 +
    display:block;
 +
}
 +
 +
.sub-menu {
 +
    width:200%;
 +
    padding:0px 0px;
 +
    position:absolute;
 +
    top:90%;
 +
    left:0px;
 +
    transition:opacity linear 0.15s;
 +
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
 +
    background:#2e2728;
 +
    display:none;
 +
    z-index:1;
 +
}
 +
 +
.sub-menu li {
 +
    display:block;
 +
    font-size:13px;
 +
}
 +
 +
.sub-menu li a {
 +
    padding:10px 10px;
 +
    display:block;
 +
}
 +
 +
.sub-menu li a:hover, .sub-menu .current-item a {
 +
    text-color:#000000;
 +
    background:#DF7F3E;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
/* Wrapper for the menu */
 
.menu_wrapper {  
 
.menu_wrapper {  
−
width:150px;  
+
width:100%;
−
height:100vh;  
+
                margin-top:-10px;
 +
                margin-left:-20px;
 +
height:0px;  
 
position:fixed;  
 
position:fixed;  
 
padding:0px;
 
padding:0px;
−
float:left;  
+
display:inline;  
−
background-color:#f2f2f2;  
+
                list-style: none;  
−
text-align:left;
+
              box-shadow:0px 1px 3px rgba(0,0,0,0.2);
 
}
 
}
 +
  
 
/* styling for the menu items */
 
/* styling for the menu items */
 
.menu_item {
 
.menu_item {
−
width:100%;  
+
                background-color:#f2f2f2;
−
margin:-2px 0px 0px -20px;  
+
width:11%;
−
padding: 10px 10px;
+
                float:left;
 +
margin:0px 0px 0px 0px;  
 +
                padding-top: 10px;
 +
                padding-bottom: 10px;  
 
border-bottom: 1px solid #d3d3d3;  
 
border-bottom: 1px solid #d3d3d3;  
 
font-weight:bold;
 
font-weight:bold;
 +
                text-align: center;
 
color:#000000;  
 
color:#000000;  
 
cursor: pointer;  
 
cursor: pointer;  
 +
                list-style: none;
 
}
 
}
  
Line 41: Line 147:
 
/* decoration icon for the menu buttons*/
 
/* decoration icon for the menu buttons*/
 
.icon {
 
.icon {
−
float:right;   
+
float:left;   
−
font-size:16px;  
+
font-size:12px;  
 
font-weight:bold;  
 
font-weight:bold;  
 
}
 
}
Line 48: Line 154:
 
/* this is the icon for when the content is collapsed */
 
/* this is the icon for when the content is collapsed */
 
.plus::before {
 
.plus::before {
−
content: "&#129304";  
+
content:"✊";
 +
                color:#CF5300;
 
}
 
}
 
/* this is the icon for when the content is expanded */
 
/* this is the icon for when the content is expanded */
 
.less::before {
 
.less::before {
−
content: "–";  
+
content: "✌";
 +
                color:#CF5300;  
 
}
 
}
  
Line 65: Line 173:
 
/* styling for the li that are the menu items */
 
/* styling for the li that are the menu items */
 
.menu_items li {  
 
.menu_items li {  
−
width:90%;  
+
width:100%;  
−
margin-top:-2px;  
+
margin-top: 0px;  
−
padding: 15px 0px 15px 15px ;  
+
padding: 0px 0px 0px 0px ;  
 
display:block;
 
display:block;
−
border-bottom: 1px solid #d3d3d3; 
+
border-bottom: 1px solid #d3d3d3
−
text-align:left;
+
 
font-weight:bold;
 
font-weight:bold;
 
text-decoration:none;  
 
text-decoration:none;  
 
color:#000000;  
 
color:#000000;  
 +
                text-align:left;
 
list-style-type:none;  
 
list-style-type:none;  
 
cursor:pointer;  
 
cursor:pointer;  
Line 92: Line 200:
 
/* When hovering on a menu item */
 
/* When hovering on a menu item */
 
.menu_items li:hover {  
 
.menu_items li:hover {  
−
background-color:#CF5300;
+
background-color:#ff9900;
 
color: #000000;
 
color: #000000;
 
}
 
}
Line 117: Line 225:
 
margin-left: 10px;
 
margin-left: 10px;
 
margin-bottom: 0px;
 
margin-bottom: 0px;
 +
                list-style-type: none;
 
}
 
}
  
Line 130: Line 239:
 
color:#000000;  
 
color:#000000;  
 
}
 
}
−
 
−
 
  
 
.submenu li a:hover  {
 
.submenu li a:hover  {
Line 166: Line 273:
 
/* Wrapper for the content */
 
/* Wrapper for the content */
 
.content_wrapper {
 
.content_wrapper {
−
width: 85%;
+
width: 100%;
−
margin-left:150px;
+
margin-left: 0px;
−
padding:10px 0px;  
+
                margin-right: 0px;
−
float:left;  
+
                margin-top: 25px;
−
background-color:white;  
+
padding: 0px 0px;  
 +
float: left;  
 
}
 
}
  
 
/*LAYOUT */
 
/*LAYOUT */
 
.column  {  
 
.column  {  
−
padding: 10px 0px;
+
width: 100%;
−
float:left;  
+
  margin-left: auto ;
−
background-color:white;  
+
                margin-right: auto ;
 +
                margin-top: 20px;
 +
}
 +
 
 +
        .full_size{
 +
width:80%;  
 +
}
 +
 
 +
.full_size_outer{
 +
width:80%;
 +
              background: rgba(255, 255, 255, .70);
 
}
 
}
  
−
.full_size {
+
      /* only use inside .full_size_outer */
 +
        .full_size_inner{
 
width:100%;  
 
width:100%;  
 
}
 
}
  
 
.full_size img {  
 
.full_size img {  
−
padding: 10px 15px;
+
padding: 10px 0px;
−
width:96.5%;  
+
                width: 100%;
 
}
 
}
 +
       
 +
        .seventh_size {
 +
                width: 14.28%;
 +
                text-align: center;
 +
                float:left;
 +
        }
 +
 +
        .sixth_size{
 +
                width: 16.66%;
 +
                text-align: center;
 +
                float:left;
 +
        }
  
 +
        .fifth_size {
 +
                width: 20%;
 +
                text-align:center;
 +
                float:left;
 +
        }
 
.half_size {
 
.half_size {
 
width: 50%;  
 
width: 50%;  
 +
                float:left;
 
}
 
}
 
.half_size img {  
 
.half_size img {  
−
padding: 10px 15px;
+
padding: 0px 15px;
 
width: 93%;  
 
width: 93%;  
 
}
 
}
Line 203: Line 340:
  
 
.highlight {  
 
.highlight {  
−
width: 90%;  
+
width: 100%;  
 
margin: auto;  
 
margin: auto;  
−
padding: 15px 5px;
+
padding: 0px 5px;
 
background-color: #f2f2f2;  
 
background-color: #f2f2f2;  
 
}
 
}
Line 217: Line 354:
 
}
 
}
  
 +
  
 
/*STYLING */
 
/*STYLING */
  
 
/* styling for the titles */
 
/* styling for the titles */
−
.content_wrapper h1, .content_wrapper h2 {
+
.content_wrapper h1 {
−
padding:5px 15px;  
+
                padding: 0px 15px;
 +
border-bottom:0px;
 +
color:#FFFFFF;
 +
                font-family: 'Calisto MT', serif;
 +
 
 +
}
 +
        .content_wrapper h2 {
 +
padding: 15px 15px;  
 
border-bottom:0px;  
 
border-bottom:0px;  
 
color:#CF5300;
 
color:#CF5300;
 +
                font-family: 'Calisto MT', serif;
 +
                font-size: 40px;
  
 
}
 
}
−
.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {  
+
.content_wrapper h3 {  
−
padding:5px 15px;  
+
padding: 7px 15px;  
 
border-bottom:0px;  
 
border-bottom:0px;  
−
color: #000000;   
+
color: #CF5300;
 +
                font-family: 'Calisto MT', serif;
 +
                font-size: 30px; 
 +
}
 +
        .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {
 +
padding: 1px 15px;
 +
border-bottom:0px;
 +
color: #CF5300;
 +
                font-family: 'Calisto MT', serif;
 +
                font-size: 20px;   
 
}
 
}
  
Line 236: Line 392:
 
/* font and text */
 
/* font and text */
 
.content_wrapper p {  
 
.content_wrapper p {  
−
padding:0px 15px;  
+
padding:1px 15px;  
−
font-size: 13px;
+
font-size: 17px;
−
font-family:Tahoma, Geneva, sans-serif;  
+
font-family:'Calisto MT', serif;  
 
}
 
}
  
 
/* Links */
 
/* Links */
 
.content_wrapper a {  
 
.content_wrapper a {  
−
font-weight: bold;  
+
font-weight: bold;
 +
                font-family:'Calisto MT', serif; 
 
text-decoration: underline;
 
text-decoration: underline;
 
text-decoration-color:#CF5300;
 
text-decoration-color:#CF5300;
Line 257: Line 414:
 
.content_wrapper a:hover {  
 
.content_wrapper a:hover {  
 
text-decoration:none;
 
text-decoration:none;
−
color:#000000;
+
color:#000000;
 
}
 
}
  
 
/* non numbered lists */
 
/* non numbered lists */
 
.content_wrapper ul {
 
.content_wrapper ul {
−
padding:0px 20px;
+
padding:1px 15px;  
−
font-size: 13px;
+
font-size: 17px;
−
font-family:Tahoma, Geneva, sans-serif;
+
font-family:'Calisto MT', serif;  
 
}
 
}
  
 
/* numbered lists */
 
/* numbered lists */
 
.content_wrapper ol {
 
.content_wrapper ol {
−
padding:0px;  
+
padding:1px 15px;  
−
font-size: 13px;
+
font-size: 17px;
−
font-family:Tahoma, Geneva, sans-serif;  
+
font-family:'Calisto MT', serif;
 
}
 
}
  
 
/* Table */
 
/* Table */
 
.content_wrapper table {  
 
.content_wrapper table {  
−
width: 97%;  
+
width: 100%;  
−
margin:15px 10px;  
+
margin: 0px 0px;  
 
border: 1px solid #d3d3d3;  
 
border: 1px solid #d3d3d3;  
 
border-collapse: collapse;  
 
border-collapse: collapse;  
Line 284: Line 441:
 
/* table cells */
 
/* table cells */
 
.content_wrapper  td {  
 
.content_wrapper  td {  
−
padding: 10px;
+
padding: 0px;
 
vertical-align: text-top;  
 
vertical-align: text-top;  
 
border: 1px solid #d3d3d3;  
 
border: 1px solid #d3d3d3;  
Line 292: Line 449:
 
/* table headers */
 
/* table headers */
 
.content_wrapper th {  
 
.content_wrapper th {  
−
padding: 10px;  
+
padding: 0px;  
 
vertical-align: text-top;  
 
vertical-align: text-top;  
 
border: 1px solid #d3d3d3;  
 
border: 1px solid #d3d3d3;  
Line 304: Line 461:
 
padding: 15px; width:12%;   
 
padding: 15px; width:12%;   
 
text-align:center;  
 
text-align:center;  
−
font-weight:bold;  
+
font-weight:bold;
 +
                font-family:'Calisto MT', serif; 
 
background-color: #CF5300;
 
background-color: #CF5300;
 
cursor:pointer;   
 
cursor:pointer;   
Line 319: Line 477:
 
color:#CF5300;
 
color:#CF5300;
 
}
 
}
 +
  
 
/********************************* RESPONSIVE STYLING ********************************/
 
/********************************* RESPONSIVE STYLING ********************************/
Line 358: Line 517:
 
<!-- This tells the browser that your page is responsive -->
 
<!-- This tells the browser that your page is responsive -->
  
−
<head>  
+
<div class="menu_wrap" >
−
<meta name="viewport" content="width=device-width, initial-scale=1">  
+
        <nav class="menu">
−
</head>
+
                <ul class="clearfix">
  
 +
<li> <a href="https://2016.igem.org/Team:Austin_UTexas">HOME </a> </li>
  
  
−
 
+
<li> <a href="">TEAM <span class="arrow">&#9660;</span></a>
−
<div class="menu_wrapper" >
+
<ul class="sub-menu">
−
 
+
−
 
+
−
 
+
−
 
+
−
<div class="collapsable_menu_control"> MENU ▤ </div>
+
−
 
+
−
<ul id="accordion" class="accordion">
+
−
 
+
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:Austin_UTexas">HOME </a> </li>
+
−
 
+
−
 
+
−
<li class="menu_item"> <div class="icon plus"></div> TEAM
+
−
<ul class="submenu">
+
 
<li> <a href=" https://2016.igem.org/Team:Austin_UTexas/Team"> Team  </a> </li>
 
<li> <a href=" https://2016.igem.org/Team:Austin_UTexas/Team"> Team  </a> </li>
 
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Collaborations">★  Collaborations </a> </li>
 
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Collaborations">★  Collaborations </a> </li>
Line 384: Line 531:
 
                 </li>
 
                 </li>
  
−
<li class="menu_item"> <div class="icon plus"></div> PROJECT 
+
<li>
−
<ul class="submenu">
+
                    <a href="">PROJECT  <span class="arrow">&#9660;</span></a>
 +
<ul class="sub-menu">
 
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Description"> ★  Description </a></li>
 
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Description"> ★  Description </a></li>
−
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Design"> ★ Design </a></li>
 
−
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Experiments"> Experiments </a></li>
 
−
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Proof"> ★ Proof of Concept </a></li>
 
 
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Demonstrate"> ★ Demonstrate </a></li>
 
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Demonstrate"> ★ Demonstrate </a></li>
 
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Results"> Results </a></li>
 
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Results"> Results </a></li>
−
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Notebook"> Notebook </a></li>
 
 
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Protocols"> Protocols </a></li>
 
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Protocols"> Protocols </a></li>
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
  
−
<li class="menu_item"> <div class="icon plus"></div> PARTS 
+
<li > <a href="https://2016.igem.org/Team:Austin_UTexas/Parts">PARTS </a></li>
−
<ul class="submenu">
+
−
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Parts">Parts </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Basic_Part"> ★ Basic Parts </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Composite_Part"> ★ Composite Parts </a></li>
+
−
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Part_Collection"> ★ Part Collection </a></li>
+
−
                    </ul>
+
−
                </li>
+
  
  
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:Austin_UTexas/Safety"> SAFETY </a> </li>
+
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Safety"> SAFETY </a> </li>
  
  
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:Austin_UTexas/Attributions">★  ATTRIBUTIONS </a></li>
+
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Attributions">★  ATTRIBUTIONS </a></li>
  
  
−
<li class="menu_item"> <div class="icon plus"></div> HUMAN PRACTICES
+
<li> <a href=""> HUMAN PRACTICES<span class="arrow">&#9660;</span></a>
−
<ul class="submenu">
+
<ul class="sub-menu">
−
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Human_Practices"> Human Practices </a></li>
+
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Human_Practices"> Human Practices         </a></li>
 
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/HP/Silver">★ Silver </a></li>
 
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/HP/Silver">★ Silver </a></li>
 
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/HP/Gold">★ Gold </a></li>
 
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/HP/Gold">★ Gold </a></li>
 
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Integrated_Practices"> ★ Integrated Practices </a></li>
 
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Integrated_Practices"> ★ Integrated Practices </a></li>
−
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Engagement">★ Engagement </a></li>
 
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
  
 +
              <li> <a href="https://2016.igem.org/Team:Austin_UTexas/Interlab Study">INTERLAB STUDY </a> </li>
  
−
<li class="menu_item"> <div class="icon plus"></div> AWARDS
 
−
<ul class="submenu">
 
−
<li><a href="https://2016.igem.org/Team:Austin_UTexas/Entrepreneurship"> ★ Entrepreneurship </a></li>
 
−
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Hardware"> ★ Hardware </a></li>
 
−
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Software">★ Software </a></li>
 
−
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Measurement">★  Measurement </a></li>
 
−
<li> <a href="https://2016.igem.org/Team:Austin_UTexas/Model">★ Model </a></li>
 
−
 
−
                    </ul>
 
−
                </li>
 
 
</ul>
 
</ul>
−
 
+
  </nav>
 
</div>
 
</div>
−
 
−
 
−
 
−
 
−
 
 
<div class="content_wrapper">
 
<div class="content_wrapper">
−
 
−
 
−
 
−
<h1 id="team_name">  </h1>
 
−
<h4 id="page_name">  </h4>
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
  
  
Line 470: Line 580:
 
}
 
}
  
−
else if (  ( (wgPageName.match(/\//g) || []).length ) == 0 ) {  // if it is the home page , just print the team's name
+
else if (  ( (wgPageName.match(/\//g) || []).length ) == 0 ) {  // if it is the home page , just print the team's name  
−
$("#team_name").html( wgPageName.substring( 5, wgPageName.length ) );
+
 
}
 
}
  
Line 521: Line 630:
  
 
</script>
 
</script>
−
 
−
 
 
</html>
 
</html>

Latest revision as of 21:46, 19 October 2016