Difference between revisions of "Team:Calgary/Layout"

(Undo revision 493563 by Limrainer (talk))
Line 1: Line 1:
−
<html lang="en">
+
/* General */
 +
html body {
 +
    background-color: white;
 +
    color: rgba(0, 0, 0, 0.5);
 +
    font-family: 'Josefin Sans', sans-serif;
 +
}
  
−
<head>
+
.navbar {
−
    <meta charset="UTF-8">
+
     background: none;
−
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
     padding: 40px;
−
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
     position: fixed;
−
    <!-- CSS -->
+
     top: 0;
−
    <link rel="stylesheet" href="https://2018.igem.org/Team:Calgary/WikiResetCSSImposter?action=raw&ctype=text/css">
+
     width: 100%;
−
     <link rel="stylesheet" href="https://2018.igem.org/Team:Calgary/bootstrap_min_css?action=raw&ctype=text/css">
+
     z-index: 1;
−
     <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()};
+
  
−
function scrollFunction() {
+
.navbar-nav {
−
     if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+
     margin-inline-start: 0px !important;
−
        document.getElementById("topBtn").style.display = "block";
+
    margin-top: 0px !important;
−
     } else {
+
     padding-top: 30px !important;
−
        document.getElementById("topBtn").style.display = "none";
+
     position: absolute;
−
     }
+
 
}
 
}
  
−
// When the user clicks on the button, scroll to the top of the document
+
.navbar-nav > li {
−
function topFunction() {
+
     white-space: nowrap;
−
     document.body.scrollTop = 0;
+
−
    document.documentElement.scrollTop = 0;
+
 
}
 
}
  
−
    </script>
+
.navbar-logo {
−
     <script src="https://2018.igem.org/Team:Calgary/bootstrap_min_js?action=raw&ctype=text/javascript"></script>
+
     height: 90px;
−
</head>
+
}
  
−
<body>
+
.underline-animation::after {
−
    <button onclick="topFunction()" id="topBtn" title="Go to top">TOP</button>
+
    content: '';
−
    <!-- Header -->
+
    display: block;
−
    <nav class="navbar navbar-expand-lg navbar-light">
+
    width: 0;
−
        <a class="navbar-brand" href="https://2018.igem.org/Team:Calgary">
+
    height: 2px;
−
            <img class="navbar-logo" src="https://static.igem.org/mediawiki/2018/4/43/T--Calgary--LogoNavOff.png">
+
    background: #7CCFB8;
−
        </a>
+
    transition: width .3s;
−
        <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>
+
  
−
                <li class="nav-item dropdown">
+
.underline-animation:hover::after {
−
                    <a class="nav-link underline-animation" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+
    width: 100%;
−
                        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>
+
  
−
                <li class="nav-item dropdown">
+
.dropdown-toggle::after {
−
                    <a class="nav-link underline-animation" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+
    display: none;
−
                        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>
+
  
−
                <li class="nav-item dropdown">
+
.dropdown-item {
−
                    <a class="nav-link underline-animation" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+
    color: #212529 !important;
−
                        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>
+
  
−
                <li class="nav-item dropdown">
+
.dropdown-menu > a:active {
−
                    <a class="nav-link underline-animation" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+
    background-color: #7CCFB8;
−
                        Judging
+
    color: white !important;
−
                    </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>
+
  
−
            </ul>
+
.dropdown-menu > a:focus {
−
        </div>
+
    background-color: #7CCFB8;
−
    </nav>
+
    color: white !important;
−
    <!-- Social Media -->
+
}
−
    <div class="bottom-left">
+
−
        <ul id="social-media-icons">
+
−
            <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>
+
  
−
</html>
+
.collapse.show .navbar-nav > li {
 +
    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;
 +
    }
 +
}

Revision as of 22:29, 25 November 2018

/* General */ html body { 

   background-color: white;
   color: rgba(0, 0, 0, 0.5);
   font-family: 'Josefin Sans', sans-serif;

}

.navbar { 

   background: none;
   padding: 40px;
   position: fixed;
   top: 0;
   width: 100%;
   z-index: 1;

}

.navbar-nav { 

   margin-inline-start: 0px !important;
   margin-top: 0px !important;
   padding-top: 30px !important;
   position: absolute;

}

.navbar-nav > li { 

   white-space: nowrap;

}

.navbar-logo { 

   height: 90px;

}

.underline-animation::after { 

   content: ;
   display: block;
   width: 0;
   height: 2px;
   background: #7CCFB8;
   transition: width .3s;

}

.underline-animation:hover::after { 

   width: 100%;

}

.dropdown-toggle::after { 

   display: none;

}

.dropdown-item { 

   color: #212529 !important;

}

.dropdown-menu > a:active { 

   background-color: #7CCFB8;
   color: white !important;

}

.dropdown-menu > a:focus { 

   background-color: #7CCFB8;
   color: white !important;

}

.collapse.show .navbar-nav > li { 

   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;

}

  1. 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;
   }

}