Difference between revisions of "Template:Melbourne"

 
(42 intermediate revisions by 2 users not shown)
Line 3: Line 3:
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  
−
 
−
/* Open */
 
−
function openNav() {
 
−
    document.getElementById("myNav").style.height = "100%";
 
−
}
 
−
 
−
/* Close */
 
−
function closeNav() {
 
−
    document.getElementById("myNav").style.height = "0%";
 
−
}
 
  
  
Line 93: Line 83:
 
.nav_text{
 
.nav_text{
 
font-size: 18px;
 
font-size: 18px;
−
width: 15%;
+
margin-top: 10px;
−
margin-top: 15px;
+
−
text-align: center;
+
 
padding-top: 35px;
 
padding-top: 35px;
 
padding-bottom: 35px;
 
padding-bottom: 35px;
−
 
 
}
 
}
  
−
.nav_icon{
+
.nav_icon {
 
padding-top: 10px;
 
padding-top: 10px;
 
padding-bottom: 5px;
 
padding-bottom: 5px;
−
padding-left:25px;
 
−
padding-right:25px;
 
 
}
 
}
 +
  
  
Line 115: Line 101:
 
     width: 100%; /* Full width */
 
     width: 100%; /* Full width */
 
     transition: top 0.3s; /* Transition effect when sliding down (and up) */
 
     transition: top 0.3s; /* Transition effect when sliding down (and up) */
−
 
 
}
 
}
  
Line 124: Line 109:
 
     color: white;
 
     color: white;
 
     text-decoration: none;
 
     text-decoration: none;
 +
width: 20%;
 +
text-align: center;
 +
 
}
 
}
  
Line 131: Line 119:
 
}
 
}
  
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
/* The Overlay (background) */
 
−
.overlay {
 
−
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
 
−
    height: 100%;
 
−
    width: 0;
 
−
    position: fixed; /* Stay in place */
 
−
    z-index: 1; /* Sit on top */
 
−
    left: 0;
 
−
    top: 0;
 
−
    background-color: rgb(0,0,0); /* Black fallback color */
 
−
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
 
−
    overflow-x: hidden; /* Disable horizontal scroll */
 
−
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
 
−
}
 
−
 
−
/* Position the content inside the overlay */
 
−
.overlay-content {
 
−
    position: relative;
 
−
    top: 25%; /* 25% from the top */
 
−
    width: 100%; /* 100% width */
 
−
    text-align: center; /* Centered text/links */
 
−
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
 
−
}
 
−
 
−
/* The navigation links inside the overlay */
 
−
.overlay a {
 
−
    padding: 8px;
 
−
    text-decoration: none;
 
−
    font-size: 36px;
 
−
    color: #818181;
 
−
    display: block; /* Display block instead of inline */
 
−
    transition: 0.3s; /* Transition effects on hover (color) */
 
−
}
 
−
 
−
/* When you mouse over the navigation links, change their color */
 
−
.overlay a:hover, .overlay a:focus {
 
−
    color: #f1f1f1;
 
−
}
 
−
 
−
/* Position the close button (top right corner) */
 
−
.overlay .closebtn {
 
−
    position: absolute;
 
−
    top: 20px;
 
−
    right: 45px;
 
−
    font-size: 60px;
 
−
}
 
−
 
−
/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
 
−
@media screen and (max-height: 450px) {
 
−
    .overlay a {font-size: 20px}
 
−
    .overlay .closebtn {
 
−
        font-size: 40px;
 
−
        top: 15px;
 
−
        right: 35px;
 
−
    }
 
−
}
 
  
  
Line 655: Line 580:
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
  
−
<!-- The overlay -->
 
−
<div id="myNav" class="overlay">
 
  
−
  <!-- Button to close the overlay navigation -->
+
<div id="navbar">
−
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
+
  
−
  <!-- Overlay content -->
 
−
  <div class="overlay-content">
 
−
    <a href="#">About</a>
 
−
    <a href="#">Services</a>
 
−
    <a href="#">Clients</a>
 
−
    <a href="#">Contact</a>
 
−
  </div>
 
  
−
</div>
 
  
  
−
 
+
<a href="https://2018.igem.org/Team:Melbourne" class="nav_item, nav_text">Home</a>
−
<div id="navbar">
+
  <a href="https://2018.igem.org/Team:Melbourne/Team" class="nav_item, nav_text">Team</a>
−
 
+
<a href="https://igem.org/2018_Judging_Form?team=Melbourne" class="nav_item, nav_icon">
−
<a href="#home" class="nav_icon" onclick="openNav()">
+
 
<img src="http://www.ampc.ms.unimelb.edu.au/srg/index_files/UOM.png" width="115px", height="95px">
 
<img src="http://www.ampc.ms.unimelb.edu.au/srg/index_files/UOM.png" width="115px", height="95px">
 
</a>
 
</a>
−
 
+
  <a href="https://2018.igem.org/Team:Melbourne/Project" class="nav_item, nav_text">Project</a>
−
 
+
   <a href="https://2018.igem.org/Team:Melbourne/Experiment" class="nav_item, nav_text">Experiment</a>
−
<a href="#home" class="nav_text">Home</a>
+
−
  <a href="#home" class="nav_text">Team</a>
+
−
  <a href="#home" class="nav_text">Project</a>
+
−
   <a href="#home" class="nav_text">Safety</a>
+
  
  
Line 694: Line 603:
 
<!--- 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 13:15, 17 October 2018