Difference between revisions of "Team:Calgary/Layout"

 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
/* General */
+
<html lang="en">
−
html body {
+
−
    background-color: white;
+
−
    color: rgba(0, 0, 0, 0.5);
+
−
    font-family: 'Josefin Sans', sans-serif;
+
−
}
+
  
−
.navbar {
+
<head>
−
     background: none;
+
    <meta charset="UTF-8">
−
     padding: 40px;
+
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
−
     position: fixed;
+
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
−
     top: 0;
+
    <!-- CSS -->
−
     width: 100%;
+
    <link rel="stylesheet" href="https://2018.igem.org/Team:Calgary/WikiResetCSSImposter?action=raw&ctype=text/css">
−
     z-index: 1;
+
     <link rel="stylesheet" href="https://2018.igem.org/Team:Calgary/bootstrap_min_css?action=raw&ctype=text/css">
−
}
+
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Sans">
 +
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
 +
     <link rel="stylesheet" href="https://2018.igem.org/Team:Calgary/jquery_fullPage_css?action=raw&ctype=text/css">
 +
     <link rel="stylesheet" href="https://2018.igem.org/Team:Calgary/animation_css?action=raw&ctype=text/css">
 +
    <link rel="stylesheet" href="https://2018.igem.org/Team:Calgary/layout_css?action=raw&ctype=text/css">
 +
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
 +
        crossorigin="anonymous">
 +
    <link rel="stylesheet" href="https://2018.igem.org/Team:Calgary/animation_css?action=raw&ctype=text/css">
 +
  <link rel="stylesheet" href="https://2018.igem.org/Team:Calgary/ProjectCSS_css?action=raw&ctype=text/css">
 +
    <!-- JS -->
 +
    <script src="https://2018.igem.org/Team:Calgary/jquery_3_3_1_min_js?action=raw&ctype=text/javascript"></script>
 +
    <script src="https://2018.igem.org/Team:Calgary/jquery_fullPage_js?action=raw&ctype=text/javascript"></script>
 +
    <script>
 +
        $(document).ready(function () {
 +
            $('#fullpage').fullpage({
 +
                loopBottom: true,
 +
                loopTop: true,
 +
                responsiveWidth: 750,
 +
                responsiveHeight: 400,
 +
                afterResponsive: function (isResponsive) { }
 +
            });
 +
        });
 +
    window.onscroll = function() {scrollFunction()};
  
−
.navbar-nav {
+
function scrollFunction() {
−
     margin-inline-start: 0px !important;
+
     if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
−
    margin-top: 0px !important;
+
        document.getElementById("topBtn").style.display = "block";
−
     padding-top: 30px !important;
+
     } else {
−
     position: absolute;
+
        document.getElementById("topBtn").style.display = "none";
 +
     }
 
}
 
}
  
−
.navbar-nav > li {
+
// When the user clicks on the button, scroll to the top of the document
−
     white-space: nowrap;
+
function topFunction() {
 +
     document.body.scrollTop = 0;
 +
    document.documentElement.scrollTop = 0;
 
}
 
}
  
−
.navbar-logo {
+
    </script>
−
     height: 90px;
+
     <script src="https://2018.igem.org/Team:Calgary/bootstrap_min_js?action=raw&ctype=text/javascript"></script>
−
}
+
</head>
  
−
.underline-animation::after {
+
<body>
−
    content: '';
+
    <button onclick="topFunction()" id="topBtn" title="Go to top">TOP</button>
−
    display: block;
+
    <!-- Header -->
−
    width: 0;
+
    <nav class="navbar navbar-expand-lg navbar-light">
−
    height: 2px;
+
        <a class="navbar-brand" href="https://2018.igem.org/Team:Calgary">
−
    background: #7CCFB8;
+
            <img class="navbar-logo" src="https://static.igem.org/mediawiki/2018/4/43/T--Calgary--LogoNavOff.png">
−
    transition: width .3s;
+
        </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">
 +
                <li class="nav-item dropdown">
 +
                    <a class="nav-link underline-animation" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 +
                        Project
 +
                    </a>
 +
                    <div class="dropdown-menu dropdown-menu-center" aria-labelledby="navbarDropdownMenuLink">
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Description">Description</a>
 +
                      <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/CRISPR">CRISPR</a>
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/FLP-Beta">FLP-Beta</a>
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Chromatin_Modifying_Elements">CME</a>
 +
                      <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Applied_Design">Product Design</a>
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Model">Modelling</a>
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Software">Software</a>
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Results">Results</a>
 +
                    </div>
 +
                </li>
  
−
.underline-animation:hover::after {
+
                <li class="nav-item dropdown">
−
    width: 100%;
+
                    <a class="nav-link underline-animation" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
−
}
+
                        Notebook
 +
                    </a>
 +
                    <div class="dropdown-menu dropdown-menu-center" aria-labelledby="navbarDropdownMenuLink">
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Notebook">Journals</a>
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Protocols">Protocols</a>
 +
                    </div>
 +
                </li>
  
−
.dropdown-toggle::after {
+
                <li class="nav-item dropdown">
−
    display: none;
+
                    <a class="nav-link underline-animation" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
−
}
+
                        Team
 +
                    </a>
 +
                    <div class="dropdown-menu dropdown-menu-center" aria-labelledby="navbarDropdownMenuLink">
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Team">Team Members</a>
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Attributions">Attributions</a>
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Sponsors">Sponsors</a>
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Contact_Us">Contact Us</a>
 +
                    </div>
 +
                </li>
  
−
.dropdown-item {
+
                <li class="nav-item dropdown">
−
    color: #212529 !important;
+
                    <a class="nav-link underline-animation" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
−
}
+
                        Human Practices
 +
                    </a>
 +
                    <div class="dropdown-menu dropdown-menu-center" aria-labelledby="navbarDropdownMenuLink">
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Human_Practices">Summary</a>
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Human_Practices/Silver">Silver</a>
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Human_Practices/Gold_Integrated">Integrated</a>
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Collaborations">Collaborations</a>
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Public_Engagement">Public Engagement</a>
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Safety">Safety</a>
 +
                    </div>
 +
                </li>
  
−
.dropdown-menu > a:active {
+
                <li class="nav-item dropdown">
−
    background-color: #7CCFB8;
+
                    <a class="nav-link underline-animation" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
−
    color: white !important;
+
                        Judging
−
}
+
                    </a>
 +
                    <div class="dropdown-menu dropdown-menu-center" aria-labelledby="navbarDropdownMenuLink">
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/MedalRequirements">Medal Requirements</a>
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Parts">Parts</a>
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/Improve">Improved Part</a>
 +
                        <a class="dropdown-item" href="https://2018.igem.org/Team:Calgary/InterLab">Interlab</a>
 +
                    </div>
 +
                </li>
  
−
.dropdown-menu > a:focus {
+
            </ul>
−
    background-color: #7CCFB8;
+
        </div>
−
    color: white !important;
+
    </nav>
−
}
+
    <!-- Social Media -->
 +
    <div class="bottom-left">
 +
        <ul id="social-media-icons">
 +
            <li>
 +
                <a class="social-media-link" href="https://2018.igem.org/Team:Calgary/MedalRequirements">
 +
                    <i class="fas fa-medal achievements-icon" aria-hidden="true"></i>
 +
                </a>
 +
            </li>
 +
            <li>
 +
                <a class="social-media-link" href="https://www.facebook.com/igemcalgary/" target="_blank">
 +
                    <i class="fab fa-facebook-f social-media-icon" aria-hidden="true"></i>
 +
                </a>
 +
            </li>
 +
            <li>
 +
                <a class="social-media-link" href="https://www.instagram.com/igemcalgary/?hl=en" target="_blank">
 +
                    <i class="fab fa-instagram social-media-icon" aria-hidden="true"></i>
 +
                </a>
 +
            </li>
 +
            <li>
 +
                <a class="social-media-link" href="https://twitter.com/igemcalgary?lang=en" target="_blank">
 +
                    <i class="fab fa-twitter social-media-icon" aria-hidden="true"></i>
 +
                </a>
 +
            </li>
 +
            <li>
 +
                <a class="social-media-link" href="https://2018.igem.org/Team:Calgary/Contact_Us" target="_blank">
 +
                    <i class="far fa-envelope social-media-icon" aria-hidden="true"></i>
 +
                </a>
 +
            </li>
 +
        </ul>
 +
    </div>
 +
</body>
  
−
.collapse.show .navbar-nav > li {
+
</html>
−
    background-color: white !important;
+
−
}
+
−
 
+
−
.bottom-left {
+
−
    bottom: 20px;
+
−
    left: 20px;
+
−
    line-height: 3 !important;
+
−
    position: fixed;
+
−
    text-align: center;
+
−
    z-index: 2;
+
−
}
+
−
 
+
−
.top-right {
+
−
    top: 20px;
+
−
    right: 70px;
+
−
    line-height: 3 !important;
+
−
    position: fixed;
+
−
    text-align: center;
+
−
    z-index: 2;
+
−
}
+
−
 
+
−
#social-media-icons {
+
−
    line-height: 3;
+
−
    list-style: none;
+
−
    margin-bottom: 1rem;
+
−
    margin-inline-start: 0px;
+
−
    margin-top: 0px;
+
−
    padding-inline-start: 40px;
+
−
}
+
−
 
+
−
.social-media-link {
+
−
    padding: 0px !important;
+
−
}
+
−
 
+
−
.social-media-icon {
+
−
    color: rgba(0, 0, 0, 0.5);
+
−
    font-size: 24px;
+
−
}
+
−
 
+
−
.social-media-icon:hover {
+
−
    color: rgba(0, 0, 0, 0.9);
+
−
}
+
−
 
+
−
.apa-reference p {
+
−
    margin-left: 6em;
+
−
    text-indent: -4em;
+
−
}
+
−
 
+
−
@media only screen and (min-width: 1000px) {
+
−
    .navbar {
+
−
        background: linear-gradient(to bottom, white, white, white, white, rgba(255, 255, 255, 0));
+
−
    }
+
−
 
+
−
    .navbar-nav {
+
−
        left: 50%;
+
−
        transform: translatex(-50%);
+
−
    }
+
−
   
+
−
    .navbar-nav > li {
+
−
        margin-left: 40px;
+
−
        margin-right: 40px;
+
−
    }
+
−
 
+
−
    .dropdown-menu-center {
+
−
        left: 50%;
+
−
        text-align: center;
+
−
        transform: translate(-50%);
+
−
    }
+
−
}
+
−
 
+
−
@media only screen and (max-width: 1480px) {
+
−
    .bottom-left {
+
−
        display: none;
+
−
    }
+
−
}
+
−
 
+
−
@media only screen and (max-width: 991px) {
+
−
    .navbar {
+
−
        background: white;
+
−
        padding: 30px;
+
−
    }
+
−
 
+
−
    .navbar-nav {
+
−
        height: 100vh;
+
−
        padding-top: 30px;
+
−
    }
+
−
 
+
−
    .navbar-logo {
+
−
        height: 60px;
+
−
    }
+
−
 
+
−
    .navbar-collapse {
+
−
        height: 100vh;
+
−
    }
+
−
 
+
−
    .underline-animation::after {
+
−
        display: none;
+
−
    }
+
−
}
+

Latest revision as of 23:22, 25 November 2018