|
|
| Line 178: |
Line 178: |
| | } | | } |
| | | | |
| − | /**********Navigation Variables*************/
| |
| − | $content-width: 1000px;
| |
| − | $breakpoint: 799px;
| |
| − | $nav-height: 70px;
| |
| − | $nav-background: white;
| |
| − | $nav-font-color: #24305E;
| |
| − | $link-hover-color: #7EF397;
| |
| − | $link-hover-shadow: 1px 1px #D0FADE;
| |
| − | $link-hover-color: #7EF397;
| |
| − | $sub-link-hover-color: rgb(248, 59, 122);
| |
| − | $sub-link-hover-shadow lightpink;
| |
| | | | |
| − | /************** Outer navigation wrapper *****************/
| + | |
| | + | |
| | .navigation { | | .navigation { |
| | height: $nav-height; | | height: $nav-height; |
| Line 200: |
Line 190: |
| | } | | } |
| | | | |
| − | Container with no padding for navbar
| + | |
| | .nav-container { | | .nav-container { |
| | max-width: 1000px $content-width; | | max-width: 1000px $content-width; |
| Line 206: |
Line 196: |
| | } | | } |
| | | | |
| − | /************** Navigation *******************/
| + | |
| | nav { | | nav { |
| | float: right; | | float: right; |
| Line 233: |
Line 223: |
| | padding-left: 4px; | | padding-left: 4px; |
| | content: ' ▾'; | | content: ' ▾'; |
| − | }
| |
| − | } // Dropdown list
| |
| − | ul li {
| |
| − | min-width: 190px;
| |
| − | a {
| |
| − | padding: 15px;
| |
| − | line-height: 20px;
| |
| − | &:hover{
| |
| − | color: $sub-link-hover-color;
| |
| − | text-shadow: $sub-link-hover-shadow;
| |
| − | }
| |
| | } | | } |
| | } | | } |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | ///********************************* Dropdown list binds to JS toggle event ********************************/
| |
| − | .nav-dropdown {
| |
| − | position: absolute;
| |
| − | display: none;
| |
| − | z-index: 1;
| |
| − | box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
| |
| − | }
| |
| − |
| |
| − | /* Mobile navigation */
| |
| − |
| |
| − | ///********************************* toggle event Binds to JS Toggle ********************************/
| |
| − | .nav-mobile {
| |
| − | display: none;
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | right: 0;
| |
| − | background: $nav-background;
| |
| − | height: $nav-height;
| |
| − | width: $nav-height;
| |
| − | }
| |
| − |
| |
| − | @media only screen and (max-width: 798px) {
| |
| − | // Hamburger nav visible on mobile only
| |
| − | .nav-mobile {
| |
| − | display: block;
| |
| − | }
| |
| − | nav {
| |
| − | width: 100%;
| |
| − | padding: $nav-height 0 15px;
| |
| − | ul {
| |
| − | display: none;
| |
| − | li {
| |
| − | float: none;
| |
| − | a {
| |
| − | padding: 15px;
| |
| − | line-height: 20px;
| |
| − | }
| |
| − | ul li a {
| |
| − | padding-left: 30px;
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − | .nav-dropdown {
| |
| − | position: static;
| |
| − | }
| |
| − | }
| |
| − | @media screen and (min-width: $breakpoint) {
| |
| − | .nav-list {
| |
| − | display: block !important;
| |
| − | }
| |
| − | }
| |
| − | #nav-toggle {
| |
| − | position: absolute;
| |
| − | left: 18px;
| |
| − | top: 22px;
| |
| − | cursor: pointer;
| |
| − | padding: 10px 35px 16px 0px;
| |
| − | span,
| |
| − | span:before,
| |
| − | span:after {
| |
| − | cursor: pointer;
| |
| − | border-radius: 1px;
| |
| − | height: 5px;
| |
| − | width: 35px;
| |
| − | background: $nav-font-color;
| |
| − | position: absolute;
| |
| − | display: block;
| |
| − | content: '';
| |
| − | transition: all 300ms ease-in-out;
| |
| − | }
| |
| − | span:before {
| |
| − | top: -10px;
| |
| − | }
| |
| − | span:after {
| |
| − | bottom: -10px;
| |
| − | }
| |
| − | &.active span {
| |
| − | background-color: transparent;
| |
| − | &:before,
| |
| − | &:after {
| |
| − | top: 0;
| |
| − | }
| |
| − | &:before {
| |
| − | transform: rotate(45deg);
| |
| − | }
| |
| − | &:after {
| |
| − | transform: rotate(-45deg);
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /********************************* CONTENT OF THE PAGE ********************************/
| |
| − | #HQ_page
| |
| − | h1{
| |
| − | margin: auto;
| |
| − | padding: 20px;
| |
| − | margin-top: 12%;
| |
| − | font-size: 70px;
| |
| − | background-color:none;
| |
| − | text-align: center;
| |
| − | font-family: 'Varela Round', sans-serif !important;
| |
| − | color:#24305E;
| |
| − | overflow: visible;
| |
| − | }
| |
| − |
| |
| − | h2{
| |
| − | font-size: 22px;
| |
| − | background:none;
| |
| − | width:90%;
| |
| − | margin: auto;
| |
| − | margin-bottom:2%;
| |
| − | display: list-item;
| |
| − | list-style-type: disc;
| |
| − | list-style-position: inside;
| |
| − | overflow: visible;
| |
| − |
| |
| − | }
| |
| − | h3{
| |
| − | text-align: center;
| |
| − | font-size: 40px;
| |
| − | margin:3% 2% 2% 2%;
| |
| − | font-family: 'Varela Round', sans-serif;
| |
| − | color:#24305E;
| |
| − | overflow: visible
| |
| − | }
| |
| − |
| |
| − | h4{
| |
| − | font-size: 30px;
| |
| − | font-family: 'Varela Round', sans-serif;
| |
| − | color:#24305E;
| |
| − | overflow: visible;
| |
| − |
| |
| − | }
| |
| − | h5{
| |
| − | text-align: left;
| |
| − | font-size: 35px;
| |
| − | margin:0;
| |
| − | margin-top: 5%;
| |
| − | margin-bottom: 8%;
| |
| − | font-family: 'Varela Round', sans-serif;
| |
| − | color:#24305E;
| |
| − | overflow: visible;
| |
| − |
| |
| − | }
| |
| − | h6{
| |
| − | text-align: center;
| |
| − | font-size: 35px;
| |
| − | margin: 0;
| |
| − | font-family: 'Varela Round', sans-serif !important;
| |
| − | color:#24305E;
| |
| − | overflow: visible;
| |
| − | }
| |
| − |
| |
| − | p{
| |
| − | font-size: 18px !important;
| |
| − | font-family: 'Varela Round', sans-serif !important;
| |
| − | color:#24305E;
| |
| − |
| |
| − | }
| |
| − | p1{
| |
| − | width:30%;
| |
| − | text-align: center !important;
| |
| − | margin: 3px;
| |
| − | font-size:20px !important;
| |
| − | line-height: 2em;
| |
| − | }
| |
| − | p2{
| |
| − | width:30%;
| |
| − | font-size: 22px;
| |
| − | line-height: 24px;
| |
| − | text-align: center;
| |
| − | background: none;
| |
| − | font-family: 'Varela Round', sans-serif;
| |
| − | color:#24305E;
| |
| − | }
| |
| − |
| |
| − | p3{
| |
| − | width: 10%;
| |
| − | margin-top: 3%;
| |
| − | font-size:20px;
| |
| − | font-family: 'Varela Round', sans-serif;
| |
| − | color:#24305E;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | </style>
| |
| − |
| |
| − | </head>
| |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <!--- THIS IS WHERE THE HTML BEGINS --->
| |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − |
| |
| − |
| |
| − |
| |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <!--- Menu --->
| |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − |
| |
| − | <body>
| |
| − | <section class="navigation">
| |
| − | <div class="nav-container">
| |
| − | <div class="logo">
| |
| − | <a href="#"> <img class="pixcell" src="https://static.igem.org/mediawiki/2018/8/80/T--Imperial_College--pixcell.png"></a>
| |
| − | <a href="#"> <img class="iclogo " src="https://static.igem.org/mediawiki/2018/8/8b/T--Imperial_College--college.png"></a>
| |
| − | </div>
| |
| − | <nav>
| |
| − | <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
| |
| − | <ul class="nav-list">
| |
| − | <li>
| |
| − | <a href="#">PROJECT<i class="fa fa-caret-down" aria-hidden="true"></i></a>
| |
| − | <ul class="nav-dropdown">
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:Imperial_College/Project" "="">DESCRIPTION</a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:Imperial_College/Mechanisms">DESIGN</a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:Imperial_College/Applications">APPLICATIONS</a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:Imperial_College/Achievements">ACHIEVEMENTS</a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:Imperial_College/Future">FUTURE WORK</a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:Imperial_College/Brainstorming">BRAINSTORM</a>
| |
| − | </li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="#">DRY LAB<i class="fa fa-caret-down" aria-hidden="true"></i></a>
| |
| − | <ul class="nav-dropdown">
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:Imperial_College/Dryover">OVERVIEW</a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:Imperial_College/Modelling">MODELLING</a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:Imperial_College/Hardware">HARDWARE</a>
| |
| − | </li>
| |
| − | </ul>
| |
| − | <li>
| |
| − | <a href="#">WET LAB<i class="fa fa-caret-down" aria-hidden="true"></i></a>
| |
| − | <ul class="nav-dropdown">
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:Imperial_College/Wetover">OVERVIEW</a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:Imperial_College/Results">RESULTS</a></li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:Imperial_College/Experiments">EXPERIMENTS</a></li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:Imperial_College/Protocols">PROTOCOLS</a></li>
| |
| − | <li>
| |
| − | <a href="Parts">PARTS</a>
| |
| − | </li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="#">HUMAN PRACTICES<i class="fa fa-caret-down" aria-hidden="true"></i></a>
| |
| − | <ul class="nav-dropdown">
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:Imperial_College/HP">OVERVIEW</a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:Imperial_College/IHP">INTEGRATED HP</a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:Imperial_College/Communication">COMMUNICATION</a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:Imperial_College/Outreach">OUTREACH</a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:Imperial_College/Collaborations">COLLABORATIONS</a>
| |
| − | </li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="#">PEOPLE<i class="fa fa-caret-down" aria-hidden="true"></i></a>
| |
| − | <ul class="nav-dropdown">
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:Imperial_College/Team">TEAM</a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:Imperial_College/Attributions">ATTRIBUTIONS</a></li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:Imperial_College/Sponsors">SPONSORS</a>
| |
| − | </li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:Imperial_College/Judges">FOR JUDGES</a>
| |
| − | </li>
| |
| − | <li>
| |
| − | <a href="https://2018.igem.org/Team:Imperial_College/Journal">JOURNAL</a>
| |
| − | </li>
| |
| − | </ul>
| |
| − | </nav>
| |
| − | </div>
| |
| − | </section>
| |
| − |
| |
| − | </body>
| |
| − |
| |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
| − | <!--- Content of the page --->
| |
| − | <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
| |
