Difference between revisions of "Template:TecMonterrey GDL"

Line 56: Line 56:
 
             font-family: 'Montserrat Alternates', sans-serif !important;
 
             font-family: 'Montserrat Alternates', sans-serif !important;
 
         }
 
         }
−
         .igem_2018_team_content{
+
         /* .igem_2018_team_content{
 
             padding-top: 63px;
 
             padding-top: 63px;
−
         }
+
         } */
 
         .igem_2018_team_content p{
 
         .igem_2018_team_content p{
 
             margin-bottom: 1rem !important;
 
             margin-bottom: 1rem !important;
Line 100: Line 100:
 
         /*------------------------------------------------*/
 
         /*------------------------------------------------*/
  
−
        .white-color,
 
−
        .white-color:hover,
 
−
        .white-color:visited{
 
−
            color: rgb(255, 255, 255);
 
−
        }
 
−
        .purple-color,
 
−
        .purple-color:hover,
 
−
        .purple-color:visited{
 
−
            color: rgb(105, 67, 100);
 
−
        }
 
−
       
 
−
        .blue1-back,
 
−
        .blue1-back:hover{
 
−
            background-color: rgb(113, 166, 204);
 
−
        }
 
−
        .blue2-back,
 
−
        .blue2-back:hover{
 
−
            background-color: rgb(120, 180, 222);
 
−
        }
 
−
        .blue3-back,
 
−
        .blue3-back:hover{
 
−
            background-color: rgb(123, 178, 216);
 
−
        }
 
  
−
        .sky1-back,
 
−
        .sky1-back:hover{
 
−
            background-color: rgb(205, 238, 244);
 
−
        }
 
−
        .sky2-back,
 
−
        .sky2-back:hover{
 
−
            background-color: rgb(185, 234, 244);
 
−
        }
 
−
        .sky3-back,
 
−
        .sky3-back:hover{
 
−
            background-color: rgb(166, 238, 244);
 
−
        }
 
−
 
−
        .pink1-back,
 
−
        .pink1-back:hover{
 
−
            background-color: rgb(236, 202, 218);
 
−
        }
 
−
        .pink2-back,
 
−
        .pink2-back:hover{
 
−
            background-color: rgb(236, 191, 214);
 
−
        }
 
−
        .pink3-back,
 
−
        .pink3-back:hover{
 
−
            background-color: rgb(223, 180, 203);
 
−
        }
 
−
        .pink4-back,
 
−
        .pink4-back:hover{
 
−
            background-color: rgb(223, 170, 200);
 
−
        }
 
−
 
−
        .magenta1-back,
 
−
        .magenta1-back:hover{
 
−
            background-color: rgb(219, 185, 244);
 
−
        }
 
−
        .magenta2-back,
 
−
        .magenta2-back:hover{
 
−
            background-color: rgb(212, 174, 244);
 
−
        }
 
−
 
−
        .violet1-back,
 
−
        .violet1-back:hover{
 
−
            background-color: rgb(165, 111, 157);
 
−
        }
 
−
        .violet2-back,
 
−
        .violet2-back:hover{
 
−
            background-color: rgb(171, 117, 163);
 
−
        }
 
−
        .violet3-back,
 
−
        .violet3-back:hover{
 
−
            background-color: rgb(193, 130, 185);
 
−
        }
 
 
         /*------------------------------------------------*/
 
         /*------------------------------------------------*/
 
         /*----------------- NAVIGATION -------------------*/
 
         /*----------------- NAVIGATION -------------------*/
 
         /*------------------------------------------------*/
 
         /*------------------------------------------------*/
 
          
 
          
−
         .header{
+
         /* .header{
 
             position: fixed;
 
             position: fixed;
 
             z-index: 100000;
 
             z-index: 100000;
 
             width: 100%;
 
             width: 100%;
 +
        } */
 +
 +
        .navbar{
 +
            padding-top: 1rem;
 +
            padding-bottom: 0;
 +
            background-color: #ffffff !important;
 +
            position: relative;
 +
            padding-left: 12rem;
 +
            padding-right: 8rem;
 
         }
 
         }
−
        /* Links and logo style*/
+
 
−
         .logo{
+
         .lactobachill-icon, .logo{
−
             width: 7rem;
+
             position: absolute;
 
         }
 
         }
−
         .social{
+
 
−
             width: 2rem;
+
         .lactobachill-icon{
 +
             width: 12rem;
 +
            top: 0;
 +
            left: 0;
 
         }
 
         }
−
         .social-links{
+
         .logo{
−
             padding: .5rem 0 0 0;
+
             width: 8rem;
−
        }
+
            top: 0;
−
        .social-links a{
+
             right: 0;
−
             padding-right: 0 !important;
+
 
         }
 
         }
 
          
 
          
−
        /* Style of navbar */
+
         .nav-item > .active{
−
         .nav li a{
+
            border-bottom-right-radius: 0px;
−
             font-size: 20px;
+
            border-bottom-left-radius: 0px;
 +
            border-radius: 14px 14px 0 0;
 +
            background-color: #c2f2de !important;
 +
             font-weight: 900;
 +
            color: #145944 !important;
 
         }
 
         }
−
         .home-link{
+
 
−
             background-color: rgb(70, 102, 142);
+
         .nav-link{
 +
             padding-bottom: 15px;
 
         }
 
         }
−
         .proyect-link{
+
 
−
             background-color: rgb(90, 147, 187);
+
         .nav-item a{
 +
             font-size: 28px;
 
         }
 
         }
−
        .dry-link{
+
 
−
            background-color: rgb(218, 240, 243);
+
         /* Dropdown Style*/  
−
        }
+
 
−
        .wet-link{
+
−
            background-color: #ead1dcff;
+
−
        }
+
−
        .human-link{
+
−
            background-color: rgb(225, 192, 243);
+
−
        }
+
−
        .notebook-link{
+
−
            background-color: rgb(151, 97, 144);
+
−
        }
+
−
        .checklist-link{
+
−
            background-color: rgb(105, 67, 100);
+
−
        }
+
−
        .all-link{
+
−
          background-color: rgb(255,255,255);
+
−
        }
+
−
        .active-link{
+
−
          background-color: rgb(194, 242, 222);
+
−
        }
+
−
         /*Remove padding from dropdown menu*/
+
−
   
+
−
/**/   
+
 
         .dropdown-menu {
 
         .dropdown-menu {
 
             display: none;
 
             display: none;
 +
            padding: 0;
 +
            margin-top: 0;
 
             width: 100%;
 
             width: 100%;
 
             box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 
             box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
Line 246: Line 170:
 
         }
 
         }
  
−
         .dropdownHover:hover .dropdown-menu {
+
         .dropdown:hover .dropdown-menu {
 
             display: block;
 
             display: block;
 
         }
 
         }
−
       
 
−
/**/
 
  
−
        .dropdown-menu{
 
−
            padding: 0;
 
−
            margin-top: 0;
 
−
        }
 
 
         .dropdown-menu a{
 
         .dropdown-menu a{
 
             text-align: center;
 
             text-align: center;
 
             font-size: 22px !important;
 
             font-size: 22px !important;
 +
            display: block;
 +
        }
 +
 +
        /*------------------------------------------------*/
 +
        /*----------------- SOCIAL LINKS -----------------*/
 +
        /*------------------------------------------------*/
 +
 +
        .social-links{
 +
            width: 4rem;
 +
            margin: 0;
 +
            z-index: 1000;
 +
            background-color: rgb(19, 94, 73);
 +
            z-index: 10000;
 +
            position: absolute;
 +
            left: .4em;
 +
            top: 50%;
 +
            border-radius: 20px;
 +
            pointer-events: auto;
 +
        }
 +
 +
        .social-icons{
 +
            padding: 22px 10px 22px 10px;
 +
        }
 +
 +
        .social-links img{
 +
            width: 100%;
 +
            border-radius: 8px;
 +
            margin-bottom: 20px;
 
         }
 
         }
 
          
 
          
 +
        .social-links a:last-child img{
 +
            margin-bottom: 0;
 +
        }
  
 +
        .social-container{
 +
            position: fixed;
 +
            top: 0;
 +
            left: 0;
 +
            z-index: 100000;
 +
            width: 100%;
 +
            height: 100%;
 +
            overflow: hidden;
 +
            pointer-events: none;
 +
        }
 +
       
 
     </style>
 
     </style>
  
−
     <!-- HTML BEGINS HERE -->
+
     <script>
  
−
    <!-- Body begins here (No idea why body tag did not appear on the template)-->
+
        // Make social-links div draggable
 +
        $(document).ready(function(){
  
−
     <div class="container-fluid">
+
            function handle_mousedown(event) {
−
         <div class="row header">
+
                window.curr_drag = {};
−
             <div class="col-1 text-center">
+
                curr_drag.pageX0 = event.pageX;
−
                 <img class="logo" src="https://static.igem.org/mediawiki/2018/7/76/T--TecMonterrey_GDL--Lactobachill01.png" alt="igem logo">
+
                curr_drag.pageY0 = event.pageY;
 +
                curr_drag.element = this;
 +
                curr_drag.offset0 = $(this).offset();
 +
 
 +
                function handle_dragging(event){
 +
                    $('body').css({'cursor': 'grabbing', 'cursor': '-moz-grabbing', 'cursor': '-webkit-grabbing'});
 +
                    var left = curr_drag.offset0.left + (event.pageX - curr_drag.pageX0);
 +
                    var top = curr_drag.offset0.top + (event.pageY - curr_drag.pageY0);
 +
                    $(curr_drag.element)
 +
                    .offset({top: top, left: left});
 +
                }
 +
 
 +
                function handle_mouseup(event){
 +
                    $('body').css({'cursor': 'grab', 'cursor': '-moz-grab', 'cursor': '-webkit-grab'});
 +
                    $('body')
 +
                    .off('mousemove', handle_dragging)
 +
                    .off('mouseup', handle_mouseup);
 +
                }
 +
 
 +
                function pauseEvent(event){
 +
                    if(event.stopPropagation) event.stopPropagation();
 +
                    if(event.preventDefault) event.preventDefault();
 +
                    event.cancelBubble=true;
 +
                    event.returnValue=false;
 +
                    return false;
 +
                }
 +
                pauseEvent(event);
 +
                $('body')
 +
                .on('mouseup', handle_mouseup)
 +
                .on('mousemove', handle_dragging);
 +
            }
 +
 
 +
            $("#social-draggable").mousedown(handle_mousedown);
 +
            $("#social-draggable").hover(function() {
 +
                $('body').css({'cursor': 'grab', 'cursor': '-moz-grab', 'cursor': '-webkit-grab'});
 +
            }, function() {
 +
                $('body').css({'cursor': 'default'});
 +
            });
 +
        });
 +
    </script>
 +
 
 +
 
 +
    <!-- HTML BEGINS HERE -->
 +
 
 +
     <div class="social-container">
 +
         <div class="social-links" id="social-draggable">
 +
             <div class="social-icons">
 +
                 <a href=""><img src="instagram.png" /></a>
 +
                <a href=""><img src="facebook.png" /></a>
 +
                <a href=""><img src="twitter.png" /></a>
 
             </div>
 
             </div>
−
            <div class="col-10">
+
        </div>
−
               
+
    </div>
−
                <ul class="nav nav-fill">
+
−
                    <li class="nav-item active">
+
−
                        <a class="nav-link active-link purple-color align-middle" href="https://2018.igem.org/Team:TecMonterrey_GDL">Home </a>
+
−
                    </li>
+
  
−
                     <li class="nav-item dropdown dropdownHover">
+
    <div class="container-fluid pl-0 pr-0">
−
                         <a class="nav-link dropdown-toggle all-link purple-color" href="https://2018.igem.org/Team:TecMonterrey_GDL/Description">Project</a>
+
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
 +
            <img class="lactobachill-icon" src="LactobachillIcon.png" alt="lactobachill icon"/>
 +
           
 +
            <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
 +
                <ul class="navbar-nav mt-2 mt-lg-0 nav-pills nav-fill" style="width: 100%">
 +
                    <li class="nav-item">
 +
                        <a class="nav-link active" href="#">Home</a>
 +
                    </li>
 +
                     <li class="nav-item dropdown">
 +
                         <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Project</a>
 
                         <div class="dropdown-menu">
 
                         <div class="dropdown-menu">
−
                             <a class="dropdown-item blue1-back white-color" href="https://2018.igem.org/TecMonterrey_GDL/Abstract">Abstract</a>
+
                             <a class="dropdown-item" href="https://2018.igem.org/TecMonterrey_GDL/Abstract">Abstract</a>
−
                             <a class="dropdown-item blue2-back white-color" href="https://2018.igem.org/TecMonterrey_GDL/OurTeam">Our team</a>
+
                             <a class="dropdown-item" href="https://2018.igem.org/TecMonterrey_GDL/OurTeam">Our team</a>
−
                             <a class="dropdown-item blue3-back white-color" href="https://2018.igem.org/TecMonterrey_GDL/Attributions">Attributions</a>
+
                             <a class="dropdown-item" href="https://2018.igem.org/TecMonterrey_GDL/Attributions">Attributions</a>
 
                         </div>
 
                         </div>
 
                     </li>
 
                     </li>
−
                   
+
                     <li class="nav-item dropdown">
−
                     <li class="nav-item dropdown dropdownHover">
+
                         <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dry labs</a>
−
                         <a class="nav-link dropdown-toggle all-link purple-color" href="#" id="dry-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dry Lab</a>
+
                         <div class="dropdown-menu">
−
                         <div class="dropdown-menu" aria-labelledby="dry-dropdown">
+
                             <a class="dropdown-item" href="https://2018.igem.org/Team:TecMonterrey_GDL/Parts ">Parts</a>
−
                             <a class="dropdown-item sky1-back purple-color" href="https://2018.igem.org/Team:TecMonterrey_GDL/Parts ">Parts</a>
+
                             <a class="dropdown-item" href="https://2018.igem.org/Team:TecMonterrey_GDL/Constructs">Constructs</a>
−
                             <a class="dropdown-item sky2-back purple-color" href="https://2018.igem.org/Team:TecMonterrey_GDL/Constructs">Constructs</a>
+
                             <a class="dropdown-item" href="https://2018.igem.org/Team:TecMonterrey_GDL/Model">Mathematical model</a>
−
                             <a class="dropdown-item sky3-back purple-color" href="https://2018.igem.org/Team:TecMonterrey_GDL/Model">Mathematical model</a>
+
 
                         </div>
 
                         </div>
 
                     </li>
 
                     </li>
−
                     <li class="nav-item dropdown dropdownHover">
+
                     <li class="nav-item dropdown">
−
                         <a class="nav-link dropdown-toggle all-link purple-color" href="#" id="wet-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Wet Lab</a>
+
                         <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Wet lab</a>
−
                         <div class="dropdown-menu" aria-labelledby="wet-dropdown">
+
                         <div class="dropdown-menu">
−
                             <a class="dropdown-item pink1-back purple-color" href="https://2018.igem.org/TecMonterrey_GDL/InterLab">Interlab</a>
+
                             <a class="dropdown-item" href="https://2018.igem.org/TecMonterrey_GDL/InterLab">Interlab</a>
−
                             <a class="dropdown-item pink2-back purple-color" href="https://2018.igem.org/TecMonterrey_GDL/Collaborations">Collaborations</a>
+
                             <a class="dropdown-item" href="https://2018.igem.org/TecMonterrey_GDL/Collaborations">Collaborations</a>
−
                             <a class="dropdown-item pink3-back purple-color" href="https://2018.igem.org/TecMonterrey_GDL/Demonstrate">Demonstrate</a>
+
                             <a class="dropdown-item" href="https://2018.igem.org/TecMonterrey_GDL/Demonstrate">Demonstrate</a>
−
                             <a class="dropdown-item pink4-back purple-color" href="https://2018.igem.org/TecMonterrey_GDL/Improve">Improvement prev. parts</a>
+
                             <a class="dropdown-item" href="https://2018.igem.org/TecMonterrey_GDL/Improve">Improvement prev. parts</a>
 
                         </div>
 
                         </div>
 
                     </li>
 
                     </li>
−
 
+
                     <li class="nav-item dropdown">
−
                     <li class="nav-item dropdown dropdownHover">
+
                         <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Human practices</a>
−
                         <a class="nav-link dropdown-toggle all-link purple-color" href="https://2018.igem.org/Team:TecMonterrey_GDL/Human_Practices" id="human-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Human Practices</a>
+
                         <div class="dropdown-menu">
−
                         <div class="dropdown-menu" aria-labelledby="human-dropdown">
+
                             <a class="dropdown-item" href="https://2018.igem.org/TecMonterrey_GDL/HP/Silver">Timeline</a>
−
                             <a class="dropdown-item magenta1-back purple-color" href="https://2018.igem.org/TecMonterrey_GDL/HP/Silver">Timeline</a>
+
                             <a class="dropdown-item" href="https://2018.igem.org/TecMonterrey_GDL/HP/Gold_Integrated">Public engagement</a>
−
                             <a class="dropdown-item magenta2-back purple-color" href="https://2018.igem.org/TecMonterrey_GDL/HP/Gold_Integrated">Public engagement</a>
+
 
                         </div>
 
                         </div>
 
                     </li>
 
                     </li>
−
 
+
                     <li class="nav-item dropdown">
−
                     <li class="nav-item dropdown dropdownHover">
+
                         <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Notebook</a>
−
                         <a class="nav-link dropdown-toggle all-link purple-color" href="#" id="notebook-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Notebook</a>
+
                         <div class="dropdown-menu">
−
                         <div class="dropdown-menu" aria-labelledby="notebook-dropdown">
+
                             <a class="dropdown-item" href="https://2018.igem.org/Team:TecMonterrey_GDL/Protocols">Protocols</a>
−
                             <a class="dropdown-item violet1-back white-color" href="https://2018.igem.org/Team:TecMonterrey_GDL/Protocols">Protocols</a>
+
                             <a class="dropdown-item" href="https://2018.igem.org/Team:TecMonterrey_GDL/Lab_Logs">Lab. logs</a>
−
                             <a class="dropdown-item violet2-back white-color" href="https://2018.igem.org/Team:TecMonterrey_GDL/Lab_Logs">Lab. logs</a>
+
                             <a class="dropdown-item" href="https://2018.igem.org/Team:TecMonterrey_GDL/Results">Results</a>
−
                             <a class="dropdown-item violet3-back white-color" href="https://2018.igem.org/Team:TecMonterrey_GDL/Results">Results</a>
+
 
                         </div>
 
                         </div>
 
                     </li>
 
                     </li>
 
                     <li class="nav-item">
 
                     <li class="nav-item">
−
                         <a class="nav-link all-link purple-color" href="https://2018.igem.org/Team:TecMonterrey_GDL/Checklist">Checklist</a>
+
                         <a class="nav-link" href="#">Checklist</a>
 
                     </li>
 
                     </li>
−
                    <!-- <li class="nav-item dropdown">
 
−
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 
−
                        Dropdown link
 
−
                        </a>
 
−
                        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
 
−
                        <a class="dropdown-item" href="#">Action</a>
 
−
                        <a class="dropdown-item" href="#">Another action</a>
 
−
                        <a class="dropdown-item" href="#">Something else here</a>
 
−
                        </div>
 
−
                    </li> -->
 
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
−
             <div class="col-1 social-links text-center">
+
             <img class="logo" src="logo.png" alt="lactobachill icon"/>
−
                <img class="logo" src="https://static.igem.org/mediawiki/2018/c/c8/T--TecMonterrey_GDL--logo.png" alt="igem logo">
+
 
−
             </div>
+
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
−
         </div>
+
                <span class="navbar-toggler-icon"></span>
 +
             </button>
 +
         </nav>
 
     </div>
 
     </div>
  
 +
    <div style="height: 300vh">
 +
 +
    </div>
  
  

Revision as of 04:06, 18 July 2018