Difference between revisions of "Template:UCopenhagen-header/CSS"

 
(9 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<!DOCTYPE html>
+
<html>
  
<html lang="en">
+
<script>
  
    <meta charset="utf-8">
+
// This is the jquery part of your template. 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
// Try not modify any of this code too much since it makes your menu work.
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
    <meta name="description" content="UCPH - iGEM">
+
    <meta name="author" content="InCell">
+
  
<head>
+
$(document).ready(function() {
<title>inCell</title>
+
<link rel="stylesheet" type="text/css" href="style.css">
+
  
</head>
+
$("#HQ_page").attr('id','');
  
<body>
+
// call the functions that control the menu  
<nav class="menu">
+
menu_functionality();
+
hide_show_menu();
<ul id="rmenu">
+
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen"> HOME</a>
+
+
</li>
+
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen/team">TEAM</a>
+
<div class="sub-content">
+
<div class="sub-drop">
+
<ul>
+
<li><a href="https://2017.igem.org/Team:UCopenhagen/Team" class="sub-item">The Team</a></li>
+
<li><a href="#" class="sub-item">Team Attribution</a></li>
+
</ul>
+
</div>
+
</div>
+
</li>
+
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen/Project">PROJECT</a>
+
<div class="sub-content">
+
<div class="sub-drop">
+
<ul>
+
  
  
<li><a href="https://2017.igem.org/Team:UCopenhagen/Project" class="sub-item">The Project</a></li>
 
<li><a href="#" class="sub-item">Modeling</a>
 
<ul id="subx-menu">
 
<li><a href="#" class="subx-item">Genetic stability</a></li>
 
<li><a href="#" class="subx-item">Glyoxylate Shunt</a></li>
 
<li><a href="#" class="subx-item">Biosensor</a></li>
 
<li><a href="#" class="subx-item">Transporter</a></li>
 
</ul>
 
  
</li>
+
//this function controls the expand and collapse buttons of the menu and changes the +/- symbols
 +
function menu_functionality() {
  
 +
//when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
 +
$(".menu_button").click(function(){
  
</ul>
+
// add or remove the class "open" , this class holds the "-"
</div>
+
$(this).children().toggleClass("open");
</div>
+
// show or hide the submenu
 +
$(this).next('.submenu_wrapper').fadeToggle(400);
 +
});
  
</li>
+
// when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen/Parts">PARTS</a>
+
$("#display_menu_control").click(function(){
<div class="sub-content">
+
$('#menu_content').fadeToggle(400);
<div class="sub-drop">
+
});
<ul>
+
<li><a href="https://2017.igem.org/Team:Amsterdam/News" class="sub-item">The news</a></li>
+
<li><a href="#" class="sub-item">Newsletters</a></li>
+
<li><a href="#" class="sub-item">Online articles</a></li>
+
<li><a href="#" class="sub-item">Magazines</a></li>
+
<li><a href="#" class="sub-item">Platforms</a></li>
+
</ul>
+
</div>
+
</div> </li>
+
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen/Outreach">OUTREACH</a> </li>
+
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen/Sponsors">SPONSORS</a> </li>
+
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen/Safety">SAFETY</a>
+
<div class="sub-content">
+
<div class="sub-drop">
+
<ul>
+
<li><a href="#" class="sub-item">Parts</a></li>
+
<li><a href="#" class="sub-item">Labjournal</a></li>
+
<li><a href="#" class="sub-item">Protocols</a></li>
+
</ul>
+
</div>
+
</div>
+
</li>
+
<li> <a class="menu-item" href="https://2017.igem.org/Team:UCopenhagen/Achievements">ACHIEVEMENTS</a> </li>
+
<li> <a class="menu-item" href="#">SAFETY</a> </li>
+
+
+
+
</ul>
+
</nav>
+
+
  
</body>
+
// call the current page highlight function
 +
highlight_current_page();
 +
}
  
<!-- //////////////////////////////////////////// -->
 
  
 +
// call the highlight current page function to show it on the menu with a different background color
 +
function highlight_current_page() {
  
<style>
+
// select a page from the menu based on the id assigned to it and the current page name and add the class "current page" to make it change background color
* {
+
$("#"+  wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ) + "_page").addClass("current_page");
margin: 0;
+
padding: 0;
+
font: 1em "Tahoma", Geneva, sans-serif;
+
}
+
body {
+
  
background-color: transparent;
+
// now that the current_page class has been added to a menu item, make the submenu fade in
}
+
$(".current_page").parents(".submenu_wrapper").fadeIn(400);
 +
// change the +/- symbol of the corresponding menu button
 +
$(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open");
 +
 +
}
  
  
  
/*.....................................*/
+
// allow button on the black menu bar to show/hide the side menu
 
+
function hide_show_menu() {
.menu {
+
position: fixed;
+
left: 0;
+
top: 0;
+
border-top: 0;
+
z-index: 100;
+
box-shadow: -1px 15px 1px rgba(0,0,0,0.3);
+
width: 100%;
+
background-color: #264653;
+
        color: white;
+
height: 60px; 
+
}
+
.myimg {
+
width: 200px;
+
float: right;
+
height: 30px;
+
padding: 15px 30px;
+
}
+
.menu #logo {
+
float: left;
+
height: 30px;
+
padding: 15px 30px;
+
font-size: 1.2em;
+
line-height: 30px;
+
display: none;
+
}
+
.menu > ul {
+
margin: 0;
+
padding: 0;
+
float: left;
+
list-style-type: none;
+
}
+
 
+
.menu > ul > li {
+
      overflow: hidden;
+
float: left;
+
}
+
 
+
.menu-item {
+
display: inline-block;
+
padding: 15px 10px;
+
height: 30px;
+
line-height: 30px;
+
color: #fff;
+
text-decoration: none;
+
}
+
 
+
.menu-item:hover {
+
background-color: #2a9d8f;
+
}
+
 
+
 
+
/*................STYLING SUB.....................*/
+
 
+
.sub-content {
+
 
 
position: absolute;
+
// in case you preview mode is selected, the menu is hidden for better visibility
top: 100%;
+
if (window.location.href.indexOf("submit") >= 0) {
overflow: hidden;
+
$(".igem_2017_menu_wrapper").hide();
background-color: #333;
+
}
max-height: 0;
+
}
+
  
.sub-content a {
+
// if the black menu bar has been loaded
color: #fff;
+
  if (document.getElementById('bars_item')) {
text-decoration: none;
+
}
+
  
.sub-drop {
+
// when the "bars_item" has been clicked
 +
$("#bars_item").click(function() {
 +
$("#sideMenu").hide();
  
padding: 0;
+
// show/hide the menu wrapper
}
+
$(".igem_2017_menu_wrapper").fadeToggle("100");
 +
});
 +
  }  
  
.sub-drop ul {
+
// because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet
width: 100%;
+
else {
padding: 0;
+
    setTimeout(hide_show_menu, 15);
margin: 0;
+
}
list-style-type: none;
+
}
}
+
  
.sub-drop ul li a {
 
display: inline-block;
 
padding: 10px 20px;
 
}
 
  
.sub-drop ul li:hover {
+
});
background-color: #ff0055;
+
}
+
  
/*...............Sub-sub Menu.....................*/
 
  
ul#subx-menu {
+
</script>
position: absolute;
+
top: 36px;
+
left: 99px;
+
background-color: #333;
+
overflow: hidden;
+
max-width: 0;
+
}
+
  
ul#subx-menu {
 
width: 130px;
 
}
 
  
.sub-drop ul li:hover > ul#subx-menu {
 
max-width: 400px;
 
transition: max-width 0.5s ease-in;
 
-webkit-transition: max-height 0.3s ease-in;
 
-moz-transition: max-height 0.3s ease-in;
 
}
 
  
  
/*...............Sub Drop.....................*/
 
  
 +
<style>
  
  
.sub-drop > ul {
+
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
overflow: hidden;
+
/* Clear the default wiki settings */
visibility: hidden;
+
#home_logo, #sideMenu { display:none; }
opacity: 0;
+
#sideMenu, #top_title, .patrollink  {display:none;}
}
+
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 +
body {background-color:white; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
.menu ul li:hover .sub-drop ul{
+
/********************************* HTML STYLING  *********************************/
visibility: visible;
+
opacity: 1;
+
transition: visibility 0s, opacity 0.3s ease-in;
+
}
+
  
 +
*/body{font-family:Lora,'Helvetica Neue',Helvetica,Arial,sans-serif;position:relative;width:100%;height:100%;color:#fff;background-color:#000}html{width:100%;height:100%}h1,h2,h3,h4,h5,h6{font-family:Cabin,'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;margin:0 0 35px;letter-spacing:1px;text-transform:uppercase}p{font-size:16px;line-height:1.5;margin:0 0 25px}@media (min-width:768px){p{font-size:18px;line-height:1.6;margin:0 0 35px}}a{-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out;color:#42dca3}a:focus,a:hover{text-decoration:none;color:#1d9b6c}#mainNav{font-family:Cabin,'Helvetica Neue',Helvetica,Arial,sans-serif;margin-bottom:0;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.3);background-color:#000}#mainNav .navbar-toggler{font-size:14px;padding:11px;color:#fff;border:1px solid #fff}#mainNav .navbar-brand{font-weight:700}#mainNav a{color:#fff}#mainNav .navbar-nav .nav-item{-webkit-transition:background .3s ease-in-out;-moz-transition:background .3s ease-in-out;transition:background .3s ease-in-out}#mainNav .navbar-nav .nav-item:hover{color:fade(white,80%);outline:0;background-color:transparent}#mainNav .navbar-nav .nav-item:active,#mainNav .navbar-nav .nav-item:focus{outline:0;background-color:transparent}@media (min-width:992px){#mainNav{padding-top:20px;padding-bottom:20px;-webkit-transition:background .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s;-moz-transition:background .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s;transition:background .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s;letter-spacing:1px;border-bottom:none;background:0 0}#mainNav.navbar-shrink{padding-top:10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.3);background:#000}#mainNav .nav-link.active{outline:0;background-color:rgba(255,255,255,.3)}#mainNav .nav-link.active:hover{color:#fff}}.masthead{display:table;width:100%;height:auto;padding:200px 0;text-align:center;color:#fff;background:url(../img/intro-bg.jpg) no-repeat bottom center scroll;background-color:#000;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}.masthead .intro-body{display:table-cell;vertical-align:middle}.masthead .intro-body .brand-heading{font-size:50px}.masthead .intro-body .intro-text{font-size:18px}@media (min-width:768px){.masthead{height:100%;padding:0}.masthead .intro-body .brand-heading{font-size:100px}.masthead .intro-body .intro-text{font-size:22px}}.btn-circle{font-size:26px;width:55px;height:55px;margin-top:15px;line-height:38px;-webkit-transition:background .3s ease-in-out;-moz-transition:background .3s ease-in-out;transition:background .3s ease-in-out;color:#fff;border:2px solid #fff;border-radius:100%!important;background:0 0}.btn-circle:focus,.btn-circle:hover{color:#fff;outline:0;background:rgba(255,255,255,.1)}.content-section{padding-top:150px;padding-bottom:150px}.download-section{color:#fff;background:url(../img/downloads-bg.jpg) no-repeat center center scroll;background-color:#000;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}#map{width:100%;height:300px}@media (min-width:992px){.content-section{padding-top:200px;padding-bottom:200px}#map{height:350px}}.btn{font-family:Cabin,'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:400;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out;text-transform:uppercase;border-radius:0}.btn-default{color:#42dca3;border:1px solid #42dca3;background-color:transparent}.btn-default:focus,.btn-default:hover{color:#000;border:1px solid #42dca3;outline:0;background-color:#42dca3}ul.banner-social-buttons{margin-top:0}@media (max-width:1199px){ul.banner-social-buttons{margin-top:15px}}@media (max-width:767px){ul.banner-social-buttons li{display:block;margin-bottom:20px;padding:0}ul.banner-social-buttons li:last-child{margin-bottom:0}}footer{padding:50px 0}footer p{font-size:14px;margin:0}::-moz-selection{background:#fcfcfc;background:rgba(255,255,255,.2);text-shadow:none}::selection{background:#fcfcfc;background:rgba(255,255,255,.2);text-shadow:none}img::selection{background:0 0}img::-moz-selection{background:0 0}body{-webkit-tap-highlight-color:rgba(255,255,255,.2)}
  
/*................Controling.....................*/
+
</style>
  
 
+
</html>
.menu-item:focus {
+
 
+
background-color: #ff0055;
+
}
+
 
+
.menu ul li:hover .sub-content {
+
max-height: 400px;
+
overflow: visible;
+
transition: max-height 0.3s ease-in;
+
-webkit-transition: max-height 0.3s ease-in;
+
-moz-transition: max-height 0.3s ease-in;
+
}
+
 
+
#rmenu {
+
+
float:right;
+
}
+
 
+
#sideMenu {
+
    display: none;
+
}
+
#top_title {
+
    display: none;
+
}
+
 
+
#content {
+
    width:100%;
+
      height: 100%;
+
      padding: 0px; 
+
      margin-top:-30px;
+
      margin-left:0px;
+
      background-color: #2A9D8F;
+
      color: #264653;
+
      font-family: Tahoma, Geneva, sans-serif;
+
    }
+
 
+
#globalWrapper{
+
    height: 100%; }
+
    body { background-color: #2A9D8F; height: 100%; }
+
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
 
+
#top_menu_under {
+
    height: 0px;
+
      background: #2A9D8F;
+
 
+
}
+
 
+
ul {
+
    list-style-image: none; //removes the iGEM wiki bullets
+
}
+
 
+
.light {
+
      font-weight: 400;
+
      background: #2A9D8F;
+
    }
+
 
+
/*.....................................*/
+
 
+
a:link {
+
    color: white;
+
    background-color: transparent;
+
    text-decoration: none;
+
}
+
 
+
a:visited {
+
    color: white;
+
    background-color: transparent;
+
    text-decoration: none;
+
}
+
 
+
    html {
+
      width: 100%;
+
      height: 100%;
+
    }
+
    h1,
+
    h2,
+
    h3,
+
    h4,
+
    h5,
+
    h6 {
+
      margin: 0 0 35px;
+
      text-transform: uppercase;
+
      font-family: Tahoma, Geneva, sans-serif;
+
      font-weight: 700;
+
      letter-spacing: 1px;
+
    }
+
    p {
+
      margin: 0 0 25px;
+
      font-size: 18px;
+
      line-height: 1.5;
+
    }
+
    @media (min-width: 768px) {
+
      p {
+
        margin: 0 0 35px;
+
        font-size: 20px;
+
        line-height: 1.6;
+
      }
+
    }
+
 
+
    a {
+
      color: white;
+
      -webkit-transition: all 0.2s ease-in-out;
+
      -moz-transition: all 0.2s ease-in-out;
+
      transition: all 0.2s ease-in-out;
+
    }
+
 
+
    a:hover,
+
    a:focus {
+
      text-decoration: none;
+
      color: white;
+
    }
+
 
+
 
+
/*.....................................*/
+
  .myintro {
+
      display: table;
+
      width: 100%;
+
      height: 100%;
+
      padding: 200px 0;
+
      text-align: center;
+
      color: #E8DBD7;
+
      background-color: #264653;
+
      -webkit-background-size: cover;
+
      -moz-background-size: cover;
+
      background-size: cover;
+
      -o-background-size: cover;
+
    }
+
    .myintro .myintro-body {
+
      display: table-cell;
+
      vertical-align: middle;
+
    }
+
    .myintro .myintro-body .brand-heading {
+
      font-size: 40px;
+
    }
+
    .myintro .myintro-body .myintro-text {
+
      font-size: 18px;
+
      font-family: Tahoma, Geneva, sans-serif;
+
    }
+
 
+
@media (min-width: 768px) {
+
      .myintro {
+
        height: 100%;
+
        padding: 0;
+
      }
+
      .myintro .myintro-body .brand-heading {
+
        font-size: 100px;
+
      }
+
      .myintro .myintro-body .myintro-text {
+
        font-size: 26px;
+
      }
+
    }
+
    .btn-circle {
+
      width: 70px;
+
      height: 70px;
+
      margin-top: 15px;
+
      padding: 7px 16px;
+
      border: 2px solid black;
+
      border-radius: 100% !important;
+
      font-size: 40px;
+
      color: black;
+
      background: transparent;
+
      -webkit-transition: background 0.3s ease-in-out;
+
      -moz-transition: background 0.3s ease-in-out;
+
      transition: background 0.3s ease-in-out;
+
    }
+
    #downarrow img {
+
      border: 2px solid black;
+
      padding: 10px 10px;
+
      border-radius: 100% !important;
+
      height: 55px;
+
      display: block;
+
      margin: auto;
+
    }
+
    .btn-circle:hover,
+
    .btn-circle:focus {
+
      outline: none;
+
      color: white;
+
      background: rgba(255, 255, 255, 0.1);
+
    }
+
    .btn-circle i.animated {
+
      -webkit-transition-property: -webkit-transform;
+
      -webkit-transition-duration: 1s;
+
      -moz-transition-property: -moz-transform;
+
      -moz-transition-duration: 1s;
+
    }
+
    .btn-circle:hover i.animated {
+
      -webkit-animation-name: pulse;
+
      -moz-animation-name: pulse;
+
      -webkit-animation-duration: 1.5s;
+
      -moz-animation-duration: 1.5s;
+
      -webkit-animation-iteration-count: infinite;
+
      -moz-animation-iteration-count: infinite;
+
      -webkit-animation-timing-function: linear;
+
      -moz-animation-timing-function: linear;
+
    }
+
    @-webkit-keyframes pulse {
+
      0% {
+
        -webkit-transform: scale(1);
+
        transform: scale(1);
+
      }
+
      50% {
+
        -webkit-transform: scale(1.2);
+
        transform: scale(1.2);
+
      }
+
      100% {
+
        -webkit-transform: scale(1);
+
        transform: scale(1);
+
      }
+
    }
+
    @-moz-keyframes pulse {
+
      0% {
+
        -moz-transform: scale(1);
+
        transform: scale(1);
+
      }
+
      50% {
+
        -moz-transform: scale(1.2);
+
        transform: scale(1.2);
+
      }
+
      100% {
+
        -moz-transform: scale(1);
+
        transform: scale(1);
+
      }
+
    }
+
    .content-section {
+
      padding-top: 100px;
+
      padding-bottom: 100px;
+
      height: auto;
+
      min-height: 100% !important;
+
    }
+
 
+
    #map {
+
      width: 100%;
+
      height: 100px;
+
      margin-top: 100px;
+
    }
+
    @media (min-width: 767px) {
+
      .content-section {
+
        height: auto;
+
        padding-top: 100px;
+
        padding-bottom: 100px;
+
        min-height: 100% !mportant;
+
      }
+
    }
+
    .btn {
+
      text-transform: uppercase;
+
      font-family: Tahoma, Geneva, sans-serif;
+
      font-weight: 400;
+
      -webkit-transition: all 0.3s ease-in-out;
+
      -moz-transition: all 0.3s ease-in-out;
+
      transition: all 0.3s ease-in-out;
+
      border-radius: 0;
+
    }
+
    .btn-default {
+
      border: 1px solid #42DCA3;
+
      color: #42DCA3;
+
      background-color: transparent;
+
    }
+
    .btn-default:hover,
+
    .btn-default:focus {
+
      border: 1px solid #42DCA3;
+
      outline: none;
+
      color: black;
+
      background-color: #42DCA3;
+
    }
+
    ul.banner-social-buttons {
+
      margin-top: 0;
+
    }
+
    @media (max-width: 1199px) {
+
      ul.banner-social-buttons {
+
        margin-top: 15px;
+
      }
+
    }
+
    @media (max-width: 767px) {
+
      ul.banner-social-buttons li {
+
        display: block;
+
        margin-bottom: 20px;
+
        padding: 0;
+
      }
+
      ul.banner-social-buttons li:last-child {
+
        margin-bottom: 0;
+
      }
+
    }
+
    footer {
+
      padding: 50px 0;
+
    }
+
    footer p {
+
      margin: 0;
+
    }
+
    ::-moz-selection {
+
      text-shadow: none;
+
      background: #fcfcfc;
+
      background: rgba(255, 255, 255, 0.2);
+
    }
+
    ::selection {
+
      text-shadow: none;
+
      background: #fcfcfc;
+
      background: rgba(255, 255, 255, 0.2);
+
    }
+
    img::selection {
+
      background: transparent;
+
    }
+
    img::-moz-selection {
+
      background: transparent;
+
    }
+
    body {
+
      webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
+
    }
+
 
+
/*.....................................*/
+
 
+
.sup-drop:hover .dropdown-content {
+
    display: block;
+
}
+
 
+
    .sponsor-section {
+
      background-color: white;
+
      color: black;
+
    }
+
 
+
 
+
</style>
+

Latest revision as of 18:24, 24 August 2017