Difference between revisions of "Template:Groningen"

 
(60 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
 
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 
<script>
 
<script>
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Line 8: Line 8:
 
$("#HQ_page").attr('id','');
 
$("#HQ_page").attr('id','');
 
 
−
 
 
//highlight current page on the menu
 
//highlight current page on the menu
 
highlight_current_page_menu();
 
highlight_current_page_menu();
Line 22: Line 21:
 
$(this).next().toggleClass("displaying_menu");
 
$(this).next().toggleClass("displaying_menu");
 
});
 
});
−
+
 
});
 
});
  
Line 44: Line 43:
  
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 +
 +
 +
 +
 +
 +
 +
  document.addEventListener('DOMContentLoaded', function() {
 +
    var elems = document.querySelectorAll('.modal');
 +
    var instances = M.Modal.init(elems, options);
 +
  });
 +
 +
  // Or with jQuery
 +
 +
  $(document).ready(function(){
 +
    $('.modal').modal();
 +
  });
 +
 
</script>
 
</script>
  
Line 64: Line 80:
  
 
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2%; width: 92%;}
 
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2%; width: 92%;}
−
 
−
 
−
/**************************************************************************************************************************************************************************************************/
 
−
/* MENU */
 
−
/**************************************************************************************************************************************************************************************************/
 
−
 
−
/*this wraps the whole of the menu*/
 
−
.igem_2018_team_menu {
 
−
background-color:#c4baba;
 
−
border-left: 1px solid #c4baba;
 
−
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%;
 
−
}
 
−
 
−
 
−
.igem_2018_team_menu.displaying_menu{
 
−
display:block;
 
−
}
 
−
 
−
.igem_2018_team_menu  a {
 
−
color: #484848;
 
−
text-decoration:none;
 
−
}
 
−
 
−
.igem_2018_team_menu img {
 
−
width:100%;
 
−
}
 
−
 
−
 
−
.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;
 
−
}
 
−
 
−
 
−
.igem_2018_team_menu .menu_item .submenu_control_icon {
 
−
color: #484848;
 
−
float: left;
 
−
width: 10%;
 
−
}
 
−
 
−
/* submenu icon "+"  "-"*/
 
−
.igem_2018_team_menu .menu_item .submenu_control_icon::before {
 
−
content: "+";
 
−
}
 
−
 
−
/* submenu icon "+"  "-"*/
 
−
.igem_2018_team_menu .menu_item .submenu_control_icon.open::before {
 
−
content: "-";
 
−
}
 
−
 
−
/*submenu wrapper*/
 
−
.igem_2018_team_menu .submenu{
 
−
background-color: #e4dede;
 
−
clear:both;
 
−
display:none;
 
−
float: left; 
 
−
width:100%;
 
−
}
 
−
 
−
/*styling for a submenu item*/
 
−
.igem_2018_team_menu .submenu .submenu_item {
 
−
border-bottom: 1px solid #c4baba;
 
−
color: #635d5d;
 
−
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 {
 
−
background-color: #f3bd5d;
 
−
}
 
−
 
−
 
−
.igem_2018_team_menu .submenu .submenu_item.current_page,
 
−
.igem_2018_team_menu .menu_item.current_page,
 
−
.igem_2018_team_menu .menu_item.direct_link.current_page {
 
−
background-color:#7acbd8;
 
−
}
 
−
 
−
 
−
 
−
/*mobile menu bar styling*/
 
−
/**************************************************************************************************************************************************************************************************/
 
−
 
−
 
−
.igem_2018_team_mobile_bar {
 
−
background-color:#e4dede;
 
−
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 {
 
−
width:25px;
 
−
}
 
−
 
−
.igem_menu_control_mobile {
 
−
float:right;
 
−
padding-right:5%;
 
−
padding-top:5px;
 
−
text-align:right;
 
−
width: 30%;
 
−
}
 
−
 
−
 
  
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
Line 222: Line 89:
 
background-color:white;  
 
background-color:white;  
 
display:block;
 
display:block;
−
width: 87%;
+
width: 100%;
 
}
 
}
  
Line 231: Line 98:
 
width:65%;
 
width:65%;
 
}
 
}
−
 
  
  
Line 248: Line 114:
 
.igem_2018_team_content .igem_2018_team_column_wrapper h1, .igem_2018_team_content .igem_2018_team_column_wrapper h2 {
 
.igem_2018_team_content .igem_2018_team_column_wrapper h1, .igem_2018_team_content .igem_2018_team_column_wrapper h2 {
 
border-bottom:0px;  
 
border-bottom:0px;  
−
color: #635d5d;
+
color: #83CF38;
 
font-family: Raleway, "Noto Sans", Helvetica, "Arial Black", Gadget, sans-serif;
 
font-family: Raleway, "Noto Sans", Helvetica, "Arial Black", Gadget, sans-serif;
 
padding: 10px 0px;
 
padding: 10px 0px;
Line 266: Line 132:
 
/* text */
 
/* text */
 
.igem_2018_team_content .igem_2018_team_column_wrapper p {  
 
.igem_2018_team_content .igem_2018_team_column_wrapper p {  
−
font-size: 130%;
 
 
font-family: Raleway, "Noto Sans", Helvetica, "Arial Black", Gadget, sans-serif;
 
font-family: Raleway, "Noto Sans", Helvetica, "Arial Black", Gadget, sans-serif;
 
padding: 5px 0px;
 
padding: 5px 0px;
Line 297: Line 162:
 
border: 1px solid #928b8b;  
 
border: 1px solid #928b8b;  
 
border-collapse: collapse;  
 
border-collapse: collapse;  
−
font-size: 130%;
 
 
width: 100%;  
 
width: 100%;  
 
}
 
}
Line 305: Line 169:
 
border: 1px solid #c4baba;  
 
border: 1px solid #c4baba;  
 
border-collapse: collapse;  
 
border-collapse: collapse;  
−
font-size: 105%;
+
font-size: 100%;
 
padding: 10px;
 
padding: 10px;
 
vertical-align: text-top;  
 
vertical-align: text-top;  
Line 311: Line 175:
  
 
/* table headers */
 
/* table headers */
−
.igem_2018_team_content .igem_2018_team_column_wrapper th {  
+
.igem_2018_team_content .igem_2018_team_column_wrapper th p {  
 
background-color:#c4baba;  
 
background-color:#c4baba;  
 
border: 1px solid #928b8b;  
 
border: 1px solid #928b8b;  
 
border-collapse: collapse;  
 
border-collapse: collapse;  
−
font-size: 110%;
+
font-size: 100%;
 
padding: 10px;  
 
padding: 10px;  
 
vertical-align: text-top;  
 
vertical-align: text-top;  
 
}
 
}
  
 +
.igem_2018_team_content .igem_2018_team_column_wrapper tr:nth-child(even) {
 +
background-color: #95F2A0;
 +
}
  
  
 
/* non numbered lists */
 
/* non numbered lists */
−
.igem_2018_team_content .igem_2018_team_column_wrapper ul, .igem_2018_team_content .igem_2018_team_column_wrapper ol {
+
.igem_2018_team_content .igem_2018_team_column_wrapper ul p, .igem_2018_team_content .igem_2018_team_column_wrapper ol p {
−
font-size: 130%;
+
font-size: 100%;
 
font-family: Arial, Helvetica, sans-serif;
 
font-family: Arial, Helvetica, sans-serif;
 
padding:0px 20px;
 
padding:0px 20px;
 +
}
 +
 +
.collapsible-header {
 +
font-size:130%;
 
}
 
}
  
Line 335: Line 206:
 
.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 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 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%; }
+
.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: 100%; }
  
  
Line 453: Line 324:
  
  
 +
 +
 +
img.portrait_photo {
 +
border-radius:50%;
 +
}
  
  
Line 462: Line 338:
 
/************************************************/
 
/************************************************/
 
@media only screen and (max-width: 1800px) {
 
@media only screen and (max-width: 1800px) {
−
.igem_2018_team_content { width: 100%;}
+
 
−
.igem_2018_team_menu {display:block;}
+
 
}
 
}
  
Line 469: Line 344:
 
/************************************************/
 
/************************************************/
 
@media only screen and (max-width: 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) {
 
@media only screen and (max-width: 1001px) {
−
.igem_2018_team_menu {display:block;}
+
 
 
}
 
}
  
Line 482: Line 355:
 
@media only screen and (max-width: 1000px) {
 
@media only screen and (max-width: 1000px) {
 
.igem_2018_team_content {width:100%; margin-left:0px;}
 
.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_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%; }
 
.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%; }
Line 490: Line 362:
  
 
@media only screen and (max-width: 500px) {
 
@media only screen and (max-width: 500px) {
−
.igem_2018_team_menu {min-width:100%; width:100%; }
+
 
 
}
 
}
  
Line 497: Line 369:
  
  
 +
</style>
  
−
/* NAVIGATION BAR */
+
<style>
−
#primary_nav_wrap
+
<!---OWN STYLE--->
−
{
+
<style>
−
margin-top:0px;
+
#scrollBtn {
−
overflow-x: visible;
+
  display: none;
−
/*position: relative;*/
+
  position: fixed;
−
/*overflow: hidden;*/
+
  bottom: 20px;
−
background-color: #333;
+
  right: 30px;
−
position: fixed;
+
  z-index: 99;
−
height: 32px;
+
  font-size: 18px;
−
width: 100%;
+
  border: none;
−
min-width: 1000px;
+
  outline: none;
−
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 3px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2)
+
  background-color: red;
−
}
+
  color: white;
−
#primary_nav_wrap ul
+
  cursor: pointer;
−
{
+
  padding: 15px;
−
list-style:none;
+
  border-radius: 4px;
−
position:relative;
+
−
float:left;
+
−
margin:0;
+
−
padding:0 0 0 20%;
+
−
}
+
−
#primary_nav_wrap ul a
+
−
{
+
−
display:block;
+
−
position:relative;
+
−
color: white;/*#333;*/
+
−
text-decoration:none;
+
−
font-weight:700;
+
−
font-size:15px;
+
−
line-height:32px;
+
−
padding:0 15px;
+
−
z-index: 2000;
+
−
}
+
−
#primary_nav_wrap ul li
+
−
{
+
−
z-index: 2000;
+
−
position:relative;
+
−
float:left;
+
−
margin:0;
+
−
padding:0;
+
−
font-family: Helvetica;
+
−
}
+
−
#primary_nav_wrap ul li.current-menu-item
+
−
{
+
−
background:red;
+
−
}
+
−
#primary_nav_wrap ul li:hover
+
−
{
+
−
background-color:rgba(160, 192, 239, 0.25);
+
−
transition: all .1s ease-out;
+
−
cursor: pointer
+
−
}
+
−
#primary_nav_wrap ul ul
+
−
{
+
−
position:absolute;
+
−
top:100%;
+
−
left:0;
+
−
background-color:rgba(15, 19, 25, 0.7);
+
−
padding:0;
+
−
transition: all .2s ease-out;
+
−
opacity: 0; /* for anim display:none; -> display:block; */
+
−
visibility: hidden;
+
−
margin: -20px 0 0 0;
+
−
}
+
−
#primary_nav_wrap ul ul li
+
−
{
+
−
line-height:120%;
+
−
padding:10px 15px;
+
−
color: rgba(255,255,255,0.5);
+
−
}
+
−
#primary_nav_wrap ul ul a
+
−
{
+
−
line-height:120%;
+
−
padding:10px 15px;
+
 
}
 
}
−
#primary_nav_wrap ul li:hover > ul
 
−
{
 
−
opacity: 1;
 
−
visibility: visible;
 
−
margin: 0;
 
  
 +
#scrollBtn:hover {
 +
  background-color: #555;
 
}
 
}
  
 
</style>
 
</style>
−
 
  
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
Line 595: Line 406:
  
 
</head>
 
</head>
−
 
−
 
−
 
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
−
<!--- Menu --->
 
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
−
 
−
 
−
 
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
−
<!--- Content of the page  --->
 
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
−
<div class="navbar-fixed">
 
−
<nav class="row blue">
 
−
<div id="primary_nav_wrap" style="z-index: 2000">
 
−
<ul>
 
−
<li class="mobicon"> <a href="javascript:void(0);" onclick="mobnavtoggle()">≡ Menu</a></li>
 
−
<li><a href="https://2018.igem.org/Team:Groningen">Home</a></li>
 
−
<li><a onclick="">Team</a>
 
−
<ul>
 
−
<li class="dir"><a href="https://2018.igem.org/Team:Groningen/Team">Team Members</a></li>
 
−
<li class="dir"><a href="">Collaborations</a></li>
 
−
</ul>
 
−
</li>
 
−
<li><a onclick="">Project</a>
 
−
<ul>
 
−
<li><a href="https://2018.igem.org/Team:Groningen/InterLab">InterLab</a></li>
 
−
<li class="dir">Description</li>
 
−
<li class="dir">Design</li>
 
−
<li class="dir">Experiments</li>
 
−
<li class="dir">Notebook</li>
 
−
<li class="dir">Model</li>
 
−
<li class="dir">Results</li>
 
−
<li class="dir">Demonstrate</li>
 
−
<li class="dir">Improve</li>
 
−
<li class="dir">Attributions</li>
 
−
</ul>
 
−
</li>
 
−
<li><a onclick="">Human Practices</a>
 
−
<ul>
 
−
<li class="dir">Human Practices</li>
 
−
<li class="dir">Education & Engagement</li>
 
−
</ul>
 
−
</li>
 
−
<li><a onclick="">Parts</a>
 
−
<ul>
 
−
<li class="dir">Parts Overview</li>
 
−
<li class="dir">Basic Parts</li>
 
−
<li class="dir">Composite Parts</li>
 
−
<li class="dir">Part Collection</li>
 
−
</ul>
 
−
</li>
 
−
<li><a onclick="">Awards</a>
 
−
<ul>
 
−
<li class="dir">Applied Design</li>
 
−
<li class="dir">Entrepeneurship</li>
 
−
<li class="dir">Hardware</li>
 
−
<li class="dir">Measurement</li>
 
−
<li class="dir">Model</li>
 
−
<li class="dir">Plant</li>
 
−
<li class="dir">Software</li>
 
−
</ul>
 
−
</li>
 
−
<li><a onclick="">Acknowledgements</a>
 
−
                                <ul>
 
−
                                      <li><a href="https://2018.igem.org/Team:Groningen/Sponsors">Sponsors</a></li>
 
−
                                </ul>
 
−
                        </li>
 
−
</ul>
 
−
</div>
 
−
</nav>
 
−
<div>
 
−
 
−
<!------------- toggle mobile menu ----------->
 
−
<script>
 
−
function mobnavtoggle() {
 
−
document.getElementByID("primary_nav_wrap").classList.toggle("mobnav");
 
−
}
 
−
</script>
 
−
 
−
<style>
 
−
.mobicon {display:none;}
 
−
</style>
 
−
 
−
<div box-shadow="0 0 px 8px #10722B inset" visibility="hidden">
 
−
<img src="https://static.igem.org/mediawiki/2018/5/5c/T--Groningen--WikiBackgroundImage.png" width="100%" height="auto">
 
−
</div>
 
−
<div style="position:relative; height: 15px; ; z-index: 5; box-shadow: 0px 0px 8px 1px black; background-color: white"></div>
 

Latest revision as of 09:43, 17 October 2018