|
|
Line 4: |
Line 4: |
| {{Template:NCKU_Tainan/template_css}} | | {{Template:NCKU_Tainan/template_css}} |
| {{Template:NCKU_Tainan/fullpage_min_css}} | | {{Template:NCKU_Tainan/fullpage_min_css}} |
− | <html>
| + | {{Template:NCKU_Tainan/header}} |
− | <style>
| + | |
− | /* Navagation Bar */
| + | |
− | /* Works only in media wiki */
| + | |
− | #bodyContent nav a[href ^="https://"]:hover, .link-https:hover{
| + | |
− | background:#698EC3;
| + | |
− | padding-right:none;
| + | |
− | }
| + | |
− | /*fix public engagement oversize*/
| + | |
− | #bodyContent nav a[href ^="https://"], .link-https {
| + | |
− | padding-right:1.5rem;
| + | |
− | }
| + | |
− | /* compansate the background above */ | + | |
− | #bodyContent .navbar .navbar-brand:hover{
| + | |
− | background:none;
| + | |
− | } | + | |
− | a:visited {
| + | |
− | color:#FFFBF3;
| + | |
− | } | + | |
− | .fixed-top {
| + | |
− | top: 16px;
| + | |
− | }
| + | |
− | nav {
| + | |
− | background-color: #335489;
| + | |
− | opacity:0.96;
| + | |
− | font-size:1.3rem;
| + | |
− | }
| + | |
− | .navbar {
| + | |
− | padding: 0rem 1rem;
| + | |
− | }
| + | |
− | nav .fake {
| + | |
− | width:56px;
| + | |
− | height:40px;
| + | |
− | }
| + | |
− | .navbar-brand {
| + | |
− | width: 30vw;
| + | |
− | height:auto;
| + | |
− | margin-right: 0;
| + | |
− | }
| + | |
− | | + | |
− | .navbar-brand img {
| + | |
− | width: 100%;
| + | |
− | height: auto;
| + | |
− | }
| + | |
− | | + | |
− | .navbar-dark .navbar-nav .nav-link {
| + | |
− | color:F6DAB1;
| + | |
− | }
| + | |
− | .dropdown-menu {
| + | |
− | background-color: #698EC3;
| + | |
− | border-radius: 0 0 .25rem .25rem;
| + | |
− | margin-top:0;
| + | |
− | border-style: none;
| + | |
− | display:none;
| + | |
− | z-index:5;
| + | |
− | }
| + | |
− | .dropdown:hover .dropdown-menu {
| + | |
− | display: block;
| + | |
− | }
| + | |
− | .dropdown-menu::before {
| + | |
− | /*在menu跟dropdown中間加一塊透明的block*/
| + | |
− | content: "";
| + | |
− | display: block;
| + | |
− | position: absolute;
| + | |
− | height: 100px;
| + | |
− | width:160px;
| + | |
− | top: -30px;
| + | |
− | left: 0;
| + | |
− | background-color:transparent;
| + | |
− | cursor: pointer;
| + | |
− | z-index:-2;
| + | |
− | }
| + | |
− | | + | |
− | .dropdown > .dropdown-toggle:active {
| + | |
− | /*Without this, clicking will make it sticky*/
| + | |
− | /*target active才不會讓滑鼠滑上去的時候沒改變*/
| + | |
− | pointer-events: none;
| + | |
− | }
| + | |
− | | + | |
− | /* Large devices (desktops, 992px and up)*/
| + | |
− | @media (min-width: 992px) {
| + | |
− | .navbar-expand-lg .navbar-nav.navbar-nav {
| + | |
− | flex-grow: 1;
| + | |
− | padding: 0 10% 0 15%;
| + | |
− | }
| + | |
− | .navbar-brand {
| + | |
− | width: 13vw;
| + | |
− | height:auto;
| + | |
− | }
| + | |
− | }
| + | |
− | .bread {
| + | |
− | height: 2.5rem;
| + | |
− | margin: 0;
| + | |
− | padding: 0;
| + | |
− | position: relative;
| + | |
− | opacity:0.96;
| + | |
− | z-index:-5;
| + | |
− | }
| + | |
− | .bread .shape {
| + | |
− | width: calc(20% - 2.5rem);
| + | |
− | height: 100%;
| + | |
− | display: inline-flex;
| + | |
− | align-items: center;
| + | |
− | justify-content: center;
| + | |
− | position: absolute;
| + | |
− | background: #355489;
| + | |
− | }
| + | |
− | .bread::after {
| + | |
− | content: "";
| + | |
− | position: absolute;
| + | |
− | left: calc(20% - 2.5rem);
| + | |
− | width: 0;
| + | |
− | height: 0;
| + | |
− | border-top: 2.5rem solid #355489;
| + | |
− | border-right: 2.5rem solid transparent;
| + | |
− | }
| + | |
− | #breadtext{
| + | |
− | font-style:none;
| + | |
− | color:#FFFBF3;
| + | |
− | margin: 0;
| + | |
− | font-size: 0.9rem;
| + | |
− | }
| + | |
− | #breadtext a{
| + | |
− | color: #936657;
| + | |
− | }
| + | |
− | #breadtext a:link, #breadtext a:visited{
| + | |
− | color: #FFFBF3;
| + | |
− | }
| + | |
− | #navbarDropdownMenuLink span{
| + | |
− | font-size: 1.3rem;
| + | |
− | }
| + | |
− | </style>
| + | |
− | <header class="fixed-top">
| + | |
− | <nav class="navbar navbar-expand-lg navbar-dark">
| + | |
− | <div class="d-inline-block d-lg-none " width="56" height="40" ></div>
| + | |
− | <a class="navbar-brand d-flex align-items-center" href="https://2019.igem.org/Team:NCKU_Tainan">
| + | |
− | <img class="d-none d-lg-inline-block" src="https://static.igem.org/mediawiki/2019/thumb/d/da/T--NCKU_Tainan--Logo.png/800px-T--NCKU_Tainan--Logo.png" alt="Logo">
| + | |
− | <img class="d-inline-block d-lg-none" src="https://static.igem.org/mediawiki/2019/thumb/0/08/T--NCKU_Tainan--Logo_mobile.png/320px-T--NCKU_Tainan--Logo_mobile.png" alt="logo-mobile">
| + | |
− | </a>
| + | |
− | <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
| + | |
− | <span class="navbar-toggler-icon"></span>
| + | |
− | </button>
| + | |
− | <div class="collapse navbar-collapse" id="navbarNavDropdown">
| + | |
− | <ul class="navbar-nav justify-content-around align-items-stretch">
| + | |
− | <li class="nav-item dropdown">
| + | |
− | <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
| + | |
− | <span>Project</span>
| + | |
− | </a>
| + | |
− | <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
| + | |
− | <a class="dropdown-item" href="https://2019.igem.org/Team:NCKU_Tainan/Description">Description</a>
| + | |
− | <a class="dropdown-item" href="https://2019.igem.org/Team:NCKU_Tainan/Design">Design</a>
| + | |
− | <a class="dropdown-item" href="https://2019.igem.org/Team:NCKU_Tainan/Measurement">Measurement</a>
| + | |
− | <a class="dropdown-item" href="https://2019.igem.org/Team:NCKU_Tainan/Model">Model</a>
| + | |
− | <a class="dropdown-item" href="https://2019.igem.org/Team:NCKU_Tainan/Hardware">Hardware</a>
| + | |
− | <a class="dropdown-item" href="https://2019.igem.org/Team:NCKU_Tainan/Entrepreneurship">Entrepreneurship</a>
| + | |
− | <a class="dropdown-item" href="https://2019.igem.org/Team:NCKU_Tainan/Safety">Safety</a>
| + | |
− | </div>
| + | |
− | </li>
| + | |
− | <li class="nav-item dropdown">
| + | |
− | <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
| + | |
− | <span>Results</span>
| + | |
− | </a>
| + | |
− | <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
| + | |
− | <a class="dropdown-item" href="https://2019.igem.org/Team:NCKU_Tainan/Results">Results</a>
| + | |
− | <a class="dropdown-item" href="https://2019.igem.org/Team:NCKU_Tainan/Demonstrate">Demonstrate</a>
| + | |
− | <a class="dropdown-item" href="https://2019.igem.org/Team:NCKU_Tainan/Future">Future</a>
| + | |
− | </div>
| + | |
− | </li>
| + | |
− | <li class="nav-item dropdown">
| + | |
− | <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
| + | |
− | <span>HP</span>
| + | |
− | </a>
| + | |
− | <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
| + | |
− | <a class="dropdown-item" href="https://2019.igem.org/Team:NCKU_Tainan/Human_Practices">Human Practice</a>
| + | |
− | <a class="dropdown-item" href="https://2019.igem.org/Team:NCKU_Tainan/Public_Engagement">Public Engagement</a>
| + | |
− | <a class="dropdown-item" href="https://2019.igem.org/Team:NCKU_Tainan/Collaborations">Collaboration</a>
| + | |
− | <a class="dropdown-item" href="https://2019.igem.org/Team:NCKU_Tainan/Software">OMG Game Room</a>
| + | |
− | </div>
| + | |
− | </li>
| + | |
− | <li class="nav-item dropdown">
| + | |
− | <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
| + | |
− | <span>Parts</span>
| + | |
− | </a>
| + | |
− | <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
| + | |
− | <a class="dropdown-item" href="https://2019.igem.org/Team:NCKU_Tainan/Parts">Parts</a>
| + | |
− | <a class="dropdown-item" href="https://2019.igem.org/Team:NCKU_Tainan/Improve">Improvement</a>
| + | |
− | </div>
| + | |
− | </li>
| + | |
− | <li class="nav-item dropdown">
| + | |
− | <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
| + | |
− | <span>Team</span>
| + | |
− | </a>
| + | |
− | <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
| + | |
− | <a class="dropdown-item" href="https://2019.igem.org/Team:NCKU_Tainan/Team">Team</a>
| + | |
− | <a class="dropdown-item" href="https://2019.igem.org/Team:NCKU_Tainan/Attributions">Attributions</a>
| + | |
− | </div>
| + | |
− | </li>
| + | |
− | <li class="nav-item dropdown">
| + | |
− | <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
| + | |
− | <span>Notebook</span>
| + | |
− | </a>
| + | |
− | <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
| + | |
− | <a class="dropdown-item" href="https://2019.igem.org/Team:NCKU_Tainan/Notebook">Notebook</a>
| + | |
− | <a class="dropdown-item" href="https://2019.igem.org/Team:NCKU_Tainan/Protocols">Protocols</a>
| + | |
− | </div>
| + | |
− | </li>
| + | |
− | <li class="nav-item dropdown">
| + | |
− | <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
| + | |
− | <span>Awards</span>
| + | |
− | </a>
| + | |
− | <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
| + | |
− | <a class="dropdown-item" href="https://2019.igem.org/Team:NCKU_Tainan/Awards">Awards</a>
| + | |
− | <a class="dropdown-item" href="https://2019.igem.org/Team:NCKU_Tainan/Criteria">Criteria</a>
| + | |
− | </div>
| + | |
− | </li>
| + | |
− | </ul>
| + | |
− | </div>
| + | |
− | </nav>
| + | |
− | <div class="bread d-none d-lg-block">
| + | |
− | <div class="shape">
| + | |
− | <p id="breadtext"><a href="#"></a> > <a href="#"></a>
| + | |
− | </p>
| + | |
− | </div>
| + | |
− | </div>
| + | |
− | </header>
| + | |
− | <script>
| + | |
− | | + | |
− | </script>
| + | |
− | </html>
| + | |
− | | + | |
| {{Template:NCKU_Tainan/home_css}} | | {{Template:NCKU_Tainan/home_css}} |
| <html> | | <html> |