Difference between revisions of "Template:NAU-CHINA"

 
(206 intermediate revisions by 4 users not shown)
Line 2: Line 2:
 
<html>
 
<html>
 
<head>
 
<head>
−
<script
+
    <meta charset="utf-8">
−
  src="https://code.jquery.com/jquery-3.3.1.js"
+
    <title>Template:2018_NAU-CHINA</title>
−
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
+
    <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NAU-CHINA/MainCSS&action=raw&ctype=text/css" />
−
  crossorigin="anonymous">  
+
    <script>
−
</script>
+
        $(document).ready(function () {
−
<style type="text/css">
+
            var icon1 = $('#icon1');
 +
            var icon2 = $('#icon2');
 +
            var icon3 = $('#icon3');
 +
            var icon4 = $('#icon4');
 +
            setInterval(function() {
 +
                var h = $(window).scrollTop();
 +
                var H = $(document).height();
 +
                if (h < 500) {
 +
                    if (h >= 200) {
 +
                        icon1.animate({ left: '1.6vw' }, 800);
 +
                        icon1.animate({ top: '30vh' }, 500);
  
 +
                        icon2.animate({ left: '1.6vw' }, 800);
 +
                        icon2.animate({ top: '45vh' }, 500);
  
−
body {
+
                        icon3.animate({ left: '1.6vw' }, 800);
−
    font-family: 'Goudy Old Style Regular','Helvetica','Arial',sans-serif;
+
                        icon3.animate({ top: '60vh' }, 500);
−
}
+
  
−
* {
+
                        icon4.animate({ left: '1.6vw' }, 800);
−
    box-sizing: border-box;
+
                        icon4.animate({ top: '75vh' }, 500);
−
}
+
                    }
 +
                }
 +
               
 +
                if (H - h <= 1000) {
 +
                    icon1.animate({ top: '80vh' }, 500);
 +
                    icon1.animate({ left: '35vw' }, 800);
  
−
a:link,a:visited {
+
                    icon2.animate({ top: '80vh' }, 500);
−
    color: black !important;
+
                    icon2.animate({ left: '45vw' }, 800);
−
}
+
  
 +
                    icon3.animate({ top: '80vh' }, 500);
 +
                    icon3.animate({ left: '55vw' }, 800);
  
 +
                    icon4.animate({ left: '5vw' }, 800);
 +
                    icon4.animate({ top: '65vh' }, 500);
 +
                }
 +
               
 +
            }, 10);
 +
        });
  
−
.menu-container {
+
     </script>
−
     width: 100%;
+
−
    margin: 0 auto;
+
−
    padding-right: 60px;
+
−
    /*background: #e9e9e9;*/
+
−
}
+
  
  
−
.menu > ul {
+
<style>
−
    margin: 0 auto;
+
        #icon1 {
−
    width: 100%;
+
            top: 60vh;
−
    list-style: none;
+
            left: 35vw;
−
    padding: 0;
+
        }
−
    position: relative;
+
        #icon2 {
−
    /* IF .menu position=relative -> ul = container width, ELSE ul = 100% width */
+
            top: 60vh;
−
    box-sizing: border-box;
+
            left: 45vw;
−
}
+
        }
 +
        #icon3 {
 +
            top: 60vh;
 +
            left: 55vw;
 +
        }
 +
        #icon4 {
 +
            top: 60vh;
 +
            left: 65vw;
 +
        }
 +
        @keyframes toSide {
 +
            0% {
 +
                left: initial;
 +
                top: initial;
 +
            }
  
−
.menu > ul:before,
+
            100% {
−
.menu > ul:after {
+
                left: 10vw
−
    content: "";
+
            }
−
    display: table;
+
        }
−
}
+
  
−
.menu > ul:after {
+
        .guide-icon {
−
     clear: both;
+
            width: 80px;
 +
            position: fixed;
 +
            z-index:999;
 +
            background-color:rgba(245,245,245,0.5);
 +
            border-radius:10%;
 +
        }
 +
 
 +
 
 +
/*==========================Global===============================*/
 +
body {
 +
     overflow-y: hidden;
 
}
 
}
  
−
.menu > ul > li {
+
#mw-content-text {
−
     float: right;
+
     margin: 60px 0 0 0;
−
    /*background: #e9e9e9;*/
+
−
    padding: 0;
+
−
    margin: 0;
+
 
}
 
}
  
−
.menu > ul > li a {
+
#banner img {
−
     text-decoration: none;
+
     width:100%;
−
    padding: 1.5em 1.5em;
+
−
    display: block;
+
 
}
 
}
  
−
.menu > ul > li:hover {
+
.top-title {
−
     background: #f0f0f0;
+
    margin:0 !important;
−
     transition: linear 0.5s;
+
    position: absolute !important;
 +
    font-family:sans-serif !important;
 +
    font-size: 9vw !important;
 +
    top:42vh !important;
 +
    left:9vw !important;
 +
}
 +
.sec-title {
 +
     margin:0 !important;
 +
    position: absolute !important;
 +
    font-size: 4vw !important;
 +
    color: #000000 !important;
 +
     top:72vh !important;
 +
    left:27vw !important;
 
}
 
}
  
−
.menu > ul > li > ul {
+
/*定义加载图像的格式*/
−
     display: none;
+
#loading_icon {
 +
     position: fixed;
 +
    left: 0px;
 +
    top: 0px;
 
     width: 100%;
 
     width: 100%;
−
     background-color: whitesmoke;
+
     height: 100%;
−
    /*padding: 20px;*/
+
     z-index: 99999999;
−
    position: absolute;
+
     background: url("https://static.igem.org/mediawiki/2018/0/0c/T--NAU-CHINA--loading_icon.gif") no-repeat black;
−
     z-index: 99;
+
     background-position: left 50% top 30%;
−
     left: 0;
+
     background-size: 22vw;
−
    margin: 0;
+
−
     list-style: none;
+
−
     box-sizing: border-box;
+
 
}
 
}
  
−
.menu > ul > li > ul:before,
+
/*定义加载文字的格式*/
−
.menu > ul > li > ul:after {
+
#loading_icon span {
−
     content: "";
+
    position: fixed;
−
     display: table;
+
    top: 60vh;
 +
    left: 41vw;
 +
    font-size: 3.5vw;
 +
    font-family: 'Vladimir Script','Rage Italic','sans-serif';
 +
    color:white;
 +
     text-align:center;
 +
     /*display:none;*/
 
}
 
}
  
−
.menu > ul > li > ul:after {
+
/*图像指针为小手，并且可以点开*/
−
     clear: both;
+
img.zoom {
 +
     cursor: pointer;
 
}
 
}
  
 +
/*指针悬停时图片上浮*/
 +
.img_zoom:hover {
 +
    padding-bottom: 5px;
 +
    transition: 0.5s;
 +
    margin-top: -5px;
 +
}
  
  
−
.menu > ul > li > ul > li a {
+
/*小图标移动放大*/
−
    color: #777;
+
.img_guide {
−
    /*padding: .2em 0;*/
+
     transform: scale(0.8);
−
    width: 100%;
+
     transition: 0.5s;
−
     display: block;
+
−
     border-bottom: 1px solid #ccc;
+
 
}
 
}
  
−
.menu > ul > li > ul.normal-sub {
+
.img_guide:hover {
−
     width: 200px;
+
     transform: scale(1);
−
     left: auto;
+
     transition: 0.5s;
−
    padding: 10px 20px;
+
 
}
 
}
  
−
.menu > ul > li > ul.normal-sub:before {
 
−
    width: 40px;
 
  
 +
/*=========================InPages===============================*/
 +
 +
.main-content {
 +
    margin:0 14%;
 +
    text-align:justify;
 
}
 
}
  
−
.menu > ul > li > ul.normal-sub > li {
+
figure {
−
     width: 100%;
+
     margin-top:15px !important;
 +
    margin-bottom:30px !important;
 
}
 
}
  
−
.menu > ul > li > ul.normal-sub > li a {
+
figure img {
−
     border: 0;
+
     display: block;
−
     padding: 1em 0;
+
     margin:15px auto 15px auto;
 +
    /*width:800px;*/
 
}
 
}
  
 +
figcaption {
 +
    text-align: justify;
 +
    font-family: 'Times New Roman','sans-serif';
 +
    font-size:0.9em;
 +
    line-height:1.2em;
  
−
</style>
+
}
 +
._table {
 +
    /*text-align: left;*/
 +
}
 +
.textblock {
 +
    margin-bottom:5em;
 +
}
 +
.section {
 +
    margin-bottom:2.5em;
 +
}
 +
.main-content h1 {
 +
    font-family: 'Avenir Next Condensed',sans-serif;
 +
    color: #a01111;
 +
    margin:32px 0 !important;
 +
    margin-left:40px !important;
 +
    font-size:48px;
 +
    font-weight:bold !important;
 +
    line-height:60px !important;
 +
}
  
 +
.main-content h2 {
 +
    font-size:24px !important;
 +
    margin:19px 0 !important;
 +
    font-weight:bold !important;
 +
    line-height:30px !important;
 +
}
  
−
</head>
+
.main-content p {
−
<body>
+
    font-family: 'Avenir Light','Helvetica',sans-serif !important;
−
<div class="menu-container">
+
     font-size: 20px !important;
−
  <div class="menu">
+
    line-height: 1.7em;
−
     <ul>
+
    text-align: justify !important;
−
      <li><a href="https://2018.igem.org/Team:NAU-CHINA/Human_Practices">Human Practices</a></li>
+
    margin-bottom: 2em;
  
 +
}
  
−
      <li><a href="https://2018.igem.org/Team:NAU-CHINA/Notebook">Notebook</a></li>
+
.main-content a {
−
      <li><a href="https://2018.igem.org/Team:NAU-CHINA/Safety">Safety</a></li>
+
    color:blue !important;
 +
}
  
−
      <li><a href="https://2018.igem.org/Team:NAU-CHINA/Model">Model</a></li>
+
.photo {
−
      <li><a href="https://2018.igem.org/Team:NAU-CHINA/Software">Software</a></li>
+
    width:100%;
−
      <li><a href="#">Project</a>
+
    margin:0 auto;
−
        <ul>
+
}
−
          <li><a href="https://2018.igem.org/Team:NAU-CHINA/Application_prospects">Application prospects</a></li>
+
.hp-photo {
−
          <li><a href="https://2018.igem.org/Team:NAU-CHINA/Parts">Parts</a></li>
+
    width:700px;
−
          <li><a href="https://2018.igem.org/Team:NAU-CHINA/Protocols">Protocols</a></li>
+
    margin:0 15%;
−
          <li><a href="https://2018.igem.org/Team:NAU-CHINA/Results">Results</a></li>
+
}
−
          <li><a href="https://2018.igem.org/Team:NAU-CHINA/Demonstrate">Demonstrate</a></li>
+
−
          <li><a href="https://2018.igem.org/Team:NAU-CHINA/Overview">Overview</a></li>
+
−
          <li><a href="https://2018.igem.org/Team:NAU-CHINA/Design">Design</a></li>
+
−
          <li><a href="https://2018.igem.org/Team:NAU-CHINA/InterLab">Interlab</a></li>
+
−
        </ul>
+
−
      </li>
+
−
      <li><a href="#">Team</a>
+
−
        <ul>
+
−
          <li><a href="https://2018.igem.org/Team:NAU-CHINA/Team_members">Team members</a></li>
+
−
          <li><a href="https://2018.igem.org/Team:NAU-CHINA/Collaborations">Collaborations</a></li>
+
−
          <li><a href="https://2018.igem.org/Team:NAU-CHINA/Attributions">Attributions</a></li>
+
−
        </ul>
+
−
      </li>
+
−
      <li><a href="https://2018.igem.org/Team:NAU-CHINA">Home</a></li>
+
  
 +
.divvideo,video {
 +
    text-align:center;
  
−
    </ul>
+
}
−
  </div>
+
−
</div>
+
  
 +
</style>
 +
    <script>
  
−
<script>
+
     //Change default shortcut icon
−
     /*global $ */
+
    $( document ).ready( function() {
−
  $(document).ready(function () {
+
      $('link[rel="shortcut icon"]').attr('href','https://static.igem.org/mediawiki/2018/2/26/T--NAU-CHINA--favicon.png');
 +
      //$('link[rel="shortcut icon"]').attr('href','https://static.igem.org/mediawiki/2018/4/4d/T--NAU-CHINA--MOSFET_LOGO.png');
  
−
      "use strict";
+
    });
  
 +
    //Page Loading...
 +
    $(document).ready(function() {
 +
        var L = $(window).width();
 +
        var lp = $("#loading_icon span").width()
 +
        //Loading Icon
 +
        $("#loading_icon").fadeOut(2000); //Aply: 2000，Debug: 1
  
 +
   
 +
        //Loading Text     
 +
        //$("#loading_icon span").css('left', (L +16 - lp)*100 / ((2 * （L+16）)) + 'vw');
  
  
−
      $('.menu > ul > li > ul:not(:has(ul))').addClass('normal-sub');
+
    });
−
      //Checks if drodown menu's li elements have anothere level (ul), if not the dropdown is shown as regular dropdown, not a mega menu (thanks Luka Kladaric)
+
  
 +
    //Ban the resize of pages
 +
/*
 +
    $(document).ready(function(){
 +
      $("body").css("min-width",1200);
 +
    });
 +
*/
  
−
      $(".menu > ul > li").hover(function (e) {
 
−
          if ($(window).width() > 943) {
 
−
              $(this).children("ul").stop(true, false).fadeToggle(100);
 
−
              e.preventDefault();
 
−
          }
 
−
      });
 
−
      //If width is more than 943px dropdowns are displayed on hover
 
  
−
      $(".menu > ul > li").click(function (e) {
+
    </script>
−
          if ($(window).width() <= 943) {
+
 
−
              $(this).children("ul").fadeToggle(150);
+
</head>
−
              e.preventDefault();
+
<body>
−
          }
+
    <div id="loading_icon">
−
      });
+
        <!--<span>MOSFET</span>-->
−
   
+
    </div>
−
  });
+
</body>
−
</script>
+
</html>

Latest revision as of 01:03, 9 November 2018

Template:2018_NAU-CHINA