Difference between revisions of "Template:BUHW2016"

Line 28: Line 28:
  
 
* {
 
* {
−
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif
+
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif
−
 
+
 
}
 
}
  
Line 84: Line 83:
 
     background-color: rgba(255,255,255,0.8);
 
     background-color: rgba(255,255,255,0.8);
 
}
 
}
−
 
  
 
/* Custom Horizontal Rule */
 
/* Custom Horizontal Rule */
Line 120: Line 118:
 
     list-style: none;
 
     list-style: none;
 
}
 
}
−
 
−
.sidebar-nav li {
 
−
    text-indent: 20px;
 
−
    line-height: 40px;
 
−
}
 
−
 
−
.sidebar-nav li a {
 
−
    display: block;
 
−
    text-decoration: none;
 
−
    color: #999;
 
−
}
 
−
 
−
.sidebar-nav li a:hover {
 
−
    text-decoration: none;
 
−
    color: #fff;
 
−
    background: rgba(255,255,255,0.2);
 
−
}
 
−
 
−
.sidebar-nav li a:active,
 
−
.sidebar-nav li a:focus {
 
−
    text-decoration: none;
 
−
}
 
−
 
−
.sidebar-nav > .sidebar-brand {
 
−
    height: 55px;
 
−
    font-size: 18px;
 
−
    line-height: 55px;
 
−
}
 
−
 
−
.sidebar-nav > .sidebar-brand a {
 
−
    color: #999;
 
−
}
 
−
 
−
.sidebar-nav > .sidebar-brand a:hover {
 
−
    color: #fff;
 
−
    background: none;
 
−
}
 
−
 
−
 
  
 
#sidebar-wrapper.active {
 
#sidebar-wrapper.active {
Line 200: Line 159:
 
     margin-bottom: 30px;
 
     margin-bottom: 30px;
 
}
 
}
 +
 +
 +
.sidebar-nav li {
 +
    text-indent: 20px;
 +
    line-height: 40px;
 +
}
 +
 +
.sidebar-nav li a {
 +
    display: block;
 +
    text-decoration: none;
 +
    color: #999;
 +
}
 +
 +
.sidebar-nav li a:hover {
 +
    text-decoration: none;
 +
    color: #fff;
 +
    background: rgba(255,255,255,0.2);
 +
}
 +
 +
.sidebar-nav li a:active,
 +
.sidebar-nav li a:focus {
 +
    text-decoration: none;
 +
}
 +
 +
.sidebar-nav > .sidebar-brand {
 +
    height: 55px;
 +
    font-size: 18px;
 +
    line-height: 55px;
 +
}
 +
 +
.sidebar-nav > .sidebar-brand a {
 +
    color: #999;
 +
}
 +
 +
.sidebar-nav > .sidebar-brand a:hover {
 +
    color: #fff;
 +
    background: none;
 +
}
 +
  
 
/* Callout */
 
/* Callout */
Line 266: Line 264:
  
 
.navbar-default {
 
.navbar-default {
−
  background-color: white;
+
    background-color: white;
−
  border-color: rgba(34, 34, 34, 0.05);
+
    border-color: rgba(34, 34, 34, 0.05);
−
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
+
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
−
  -webkit-transition: all 0.35s;
+
    -webkit-transition: all 0.35s;
−
  -moz-transition: all 0.35s;
+
    -moz-transition: all 0.35s;
−
  transition: all 0.35s;
+
    transition: all 0.35s;
 
}
 
}
 +
 
.navbar-default .navbar-header .navbar-brand {
 
.navbar-default .navbar-header .navbar-brand {
−
  color: #f05f40;
+
    color: #c0392b;
−
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
+
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
−
  font-weight: 700;
+
    font-weight: 700;
−
  text-transform: uppercase;
+
    text-transform: uppercase;
 
}
 
}
 +
 
.navbar-default .navbar-header .navbar-brand:hover,
 
.navbar-default .navbar-header .navbar-brand:hover,
 
.navbar-default .navbar-header .navbar-brand:focus {
 
.navbar-default .navbar-header .navbar-brand:focus {
−
  color: #eb3812;
+
    color: #c0392b;
 
}
 
}
 +
 
.navbar-default .nav > li > a,
 
.navbar-default .nav > li > a,
 
.navbar-default .nav > li > a:focus {
 
.navbar-default .nav > li > a:focus {
−
  text-transform: uppercase;
+
    text-transform: uppercase;
−
  font-weight: 700;
+
    font-weight: 700;
−
  font-size: 13px;
+
    font-size: 13px;
−
  color: #222222;
+
    color: #222222;
 
}
 
}
 +
 
.navbar-default .nav > li > a:hover,
 
.navbar-default .nav > li > a:hover,
 
.navbar-default .nav > li > a:focus:hover {
 
.navbar-default .nav > li > a:focus:hover {
−
  color: #f05f40;
+
    color: #c0392b;
 
}
 
}
 +
 
.navbar-default .nav > li.active > a,
 
.navbar-default .nav > li.active > a,
 
.navbar-default .nav > li.active > a:focus {
 
.navbar-default .nav > li.active > a:focus {
−
  color: #f05f40 !important;
+
    color: #c0392b !important;
−
  background-color: transparent;
+
    background-color: transparent;
 
}
 
}
 +
 
.navbar-default .nav > li.active > a:hover,
 
.navbar-default .nav > li.active > a:hover,
 
.navbar-default .nav > li.active > a:focus:hover {
 
.navbar-default .nav > li.active > a:focus:hover {
−
  background-color: transparent;
+
    background-color: transparent;
 
}
 
}
 +
 
@media (min-width: 768px) {
 
@media (min-width: 768px) {
 
   .navbar-default {
 
   .navbar-default {
−
    background-color: transparent;
+
      background-color: transparent;
−
    border-color: rgba(255, 255, 255, 0.3);
+
      border-color: rgba(255, 255, 255, 0.3);
 
   }
 
   }
 
   .navbar-default .navbar-header .navbar-brand {
 
   .navbar-default .navbar-header .navbar-brand {
−
    color: rgba(255, 255, 255, 0.7);
+
      color: rgba(255, 255, 255, 0.7);
 
   }
 
   }
 
   .navbar-default .navbar-header .navbar-brand:hover,
 
   .navbar-default .navbar-header .navbar-brand:hover,
 
   .navbar-default .navbar-header .navbar-brand:focus {
 
   .navbar-default .navbar-header .navbar-brand:focus {
−
    color: white;
+
      color: white;
 
   }
 
   }
 
   .navbar-default .nav > li > a,
 
   .navbar-default .nav > li > a,
 
   .navbar-default .nav > li > a:focus {
 
   .navbar-default .nav > li > a:focus {
−
    color: rgba(255, 255, 255, 0.7);
+
      color: rgba(255, 255, 255, 0.7);
 
   }
 
   }
 
   .navbar-default .nav > li > a:hover,
 
   .navbar-default .nav > li > a:hover,
 
   .navbar-default .nav > li > a:focus:hover {
 
   .navbar-default .nav > li > a:focus:hover {
−
    color: white;
+
      color: white;
 
   }
 
   }
 
   .navbar-default.affix {
 
   .navbar-default.affix {
−
    background-color: white;
+
      background-color: white;
−
    border-color: rgba(34, 34, 34, 0.05);
+
      border-color: rgba(34, 34, 34, 0.05);
 
   }
 
   }
 
   .navbar-default.affix .navbar-header .navbar-brand {
 
   .navbar-default.affix .navbar-header .navbar-brand {
−
    color: #f05f40;
+
      color: #c0392b;
−
    font-size: 14px;
+
      font-size: 14px;
 
   }
 
   }
 
   .navbar-default.affix .navbar-header .navbar-brand:hover,
 
   .navbar-default.affix .navbar-header .navbar-brand:hover,
 
   .navbar-default.affix .navbar-header .navbar-brand:focus {
 
   .navbar-default.affix .navbar-header .navbar-brand:focus {
−
    color: #eb3812;
+
      color: #c0392b;
 
   }
 
   }
 
   .navbar-default.affix .nav > li > a,
 
   .navbar-default.affix .nav > li > a,
 
   .navbar-default.affix .nav > li > a:focus {
 
   .navbar-default.affix .nav > li > a:focus {
−
    color: #222222;
+
      color: #222222;
 
   }
 
   }
 
   .navbar-default.affix .nav > li > a:hover,
 
   .navbar-default.affix .nav > li > a:hover,
 
   .navbar-default.affix .nav > li > a:focus:hover {
 
   .navbar-default.affix .nav > li > a:focus:hover {
−
    color: #f05f40;
+
      color: #c0392b;
 
   }
 
   }
 
}
 
}
 
#mainNav {
 
#mainNav {
−
margin-top:15px;
+
  margin-top:15px;
−
background: black;
+
  transition:background-color .52s ease
 
}
 
}
 +
 +
 +
  
  
Line 359: Line 367:
  
 
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
 
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
−
        <div class="container-fluid">
+
    <div class="container-fluid">
 
             <!-- Brand and toggle get grouped for better mobile display -->
 
             <!-- Brand and toggle get grouped for better mobile display -->
−
            <div class="navbar-header">
+
        <div class="navbar-header">
−
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
+
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
−
                    <span class="sr-only">Toggle navigation</span>
+
                <span class="sr-only">Toggle navigation</span>
−
                    <span class="icon-bar"></span>
+
                <span class="icon-bar"></span>
−
                    <span class="icon-bar"></span>
+
                <span class="icon-bar"></span>
−
                    <span class="icon-bar"></span>
+
                <span class="icon-bar"></span>
−
                </button>
+
            </button>
−
                <a class="navbar-brand page-scroll" href="#page-top">BU HW 2016</a>
+
            <a class="navbar-brand page-scroll" href="#page-top">BU HW 2016</a>
−
            </div>
+
        </div>
 +
       
 +
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 +
            <ul class="nav navbar-nav navbar-right">
  
−
            <!-- Collect the nav links, forms, and other content for toggling -->
+
                <li class="dropdown">
−
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
+
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Team <span class="caret"></span></a>
−
                <ul class="nav navbar-nav navbar-right">
+
                    <ul class="dropdown-menu">
−
                    <li>
+
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Team">Us</a></li>
−
                         <a class="page-scroll" href="https://2016.igem.org/Team:BostonU_HW/Team">Team</a>
+
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Collaborations">Collaborations</a></li>
−
                    </li>
+
                    </ul>
−
                    <li>
+
                </li>
−
                         <a class="page-scroll" href="https://2016.igem.org/Team:BostonU_HW/Description">Project</a>
+
 
−
                     </li>
+
                <li class="dropdown">
−
                    <li>
+
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Project <span class="caret"></span></a>
−
                        <a class="page-scroll" href="https://2016.igem.org/Team:BostonU_HW/Notebook">Notebook</a>
+
                    <ul class="dropdown-menu">
−
                    </li>
+
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Description">Overview</a></li>
−
                     <li>
+
                         <li><a href="https://2016.igem.org/Team:BostonU_HW/Results">Results</a></li>
−
                        <a class="page-scroll" href="https://2016.igem.org/Team:BostonU_HW/Safety">Safety</a>
+
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Demonstrate">Project Fabrication</a></li>
−
                    </li>
+
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Proof">Application</a></li>
−
                    <li>
+
                         <li><a href="https://2016.igem.org/Team:BostonU_HW/Design">Documentation</a></li>
−
                         <a class="page-scroll" href="https://2016.igem.org/Team:BostonU_HW/Attributions">Attributions</a>
+
                        <li role="separator" class="divider"></li>
−
                     </li>
+
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Attributions">Attributions</a></li>
−
                    <li>
+
                     </ul>
−
                        <a class="page-scroll" href="https://2016.igem.org/Team:BostonU_HW/Human_Practices">Human Practices</a>
+
                </li>
−
                    </li>
+
 
−
                    <li>
+
                <li class="dropdown">
−
                         <a class="page-scroll" href="#awards">Awards</a>
+
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Notebook <span class="caret"></span></a>
−
                     </li>
+
                    <ul class="dropdown-menu">
−
                 </ul>
+
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Notebook">Timeline</a></li>
−
            </div>
+
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Experiments">Experiments</a></li>
−
             <!-- /.navbar-collapse -->
+
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Safety">Safety</a></li>
 +
                     </ul>
 +
                </li>
 +
                <li class="dropdown">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Human Practices <span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Human_Practices">Overview</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/HP/Silver">Silver</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/HP/Gold">Gold</a></li>
 +
                         <li><a href="https://2016.igem.org/Team:BostonU_HW/Integrated_Practices">Integrated Practices</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Engagement">Engagement</a></li>
 +
                     </ul>
 +
                </li>
 +
                <li class="dropdown">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Awards <span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Hardware">Hardware</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Software">Software</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Entrepreneurship">Entrepreneurship</a></li>
 +
                         <li><a href="https://2016.igem.org/Team:BostonU_HW/Measurement">Measurement</a></li>
 +
                        <li><a href="https://2016.igem.org/Team:BostonU_HW/Model">Model</a></li>
 +
                     </ul>
 +
                </li>
 +
                 <li>
 +
                    <a class="page-scroll" href="#awards">Awards</a>
 +
                </li>
 +
             </ul>
 
         </div>
 
         </div>
 +
            <!-- /.navbar-collapse -->
 +
    </div>
 
         <!-- /.container-fluid -->
 
         <!-- /.container-fluid -->
−
    </nav>
+
</nav>
 +
 
 +
 
 +
 
  
−
   
 
  
  
Line 410: Line 451:
  
  
−
   
+
 
−
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
+
−
<script src="jquery.fittext.js"></script>
+
−
<script>
+
−
  jQuery("#responsive_headline").fitText();
+
−
</script>
+
  
  
Line 441: Line 477:
 
         event.preventDefault();
 
         event.preventDefault();
 
     });
 
     });
−
 
−
    // Highlight the top nav as scrolling occurs
 
−
    $('body').scrollspy({
 
−
        target: '.navbar-fixed-top',
 
−
        offset: 51
 
−
    })
 
  
 
     // Closes the Responsive Menu on Menu Item Click
 
     // Closes the Responsive Menu on Menu Item Click
Line 453: Line 483:
 
     });
 
     });
  
−
    // Fit Text Plugin for Main Header
+
 
−
    $("h1").fitText(
+
−
        1.2, {
+
−
            minFontSize: '35px',
+
−
            maxFontSize: '65px'
+
−
        }
+
−
    );
+
  
 
     // Offset for Main Navigation
 
     // Offset for Main Navigation
Line 502: Line 526:
  
 
})(jQuery); // End of use strict
 
})(jQuery); // End of use strict
−
 
  
 
</script>
 
</script>
 +
 +
  
  

Revision as of 19:46, 29 June 2016