Difference between revisions of "Template:Tongji Software/CSS"

 
(93 intermediate revisions by the same user not shown)
Line 4: Line 4:
 
     <title>Tongji Software | Pathlab</title>
 
     <title>Tongji Software | Pathlab</title>
 
     <style>
 
     <style>
 +
        *::-webkit-scrollbar {
 +
            display: none;
 +
        }
 +
       
 
         #sideMenu,
 
         #sideMenu,
 
         #top_title {
 
         #top_title {
Line 11: Line 15:
 
         #content {
 
         #content {
 
             padding: 0px;
 
             padding: 0px;
−
             width: 120vw;
+
             width: 90vw;
 
             margin-top: -13px;
 
             margin-top: -13px;
−
             margin-left: 0vw;
+
             margin-left: 10px;
 +
        }
 +
       
 +
        #indexMenu ul {
 +
            margin-left: -10px;
 +
        }
 +
       
 +
        #bodyContent a[href ^="https://"] {
 +
            padding: .4em 1em;
 
         }
 
         }
 
         /*content style*/
 
         /*content style*/
Line 102: Line 114:
 
             border: 0;
 
             border: 0;
 
             font-size: 100%;
 
             font-size: 100%;
−
             font: inherit;
+
             /* font: inherit;*/
 
             vertical-align: baseline;
 
             vertical-align: baseline;
 
         }
 
         }
Line 150: Line 162:
 
         /* -------------------------------- Primary style -------------------------------- */
 
         /* -------------------------------- Primary style -------------------------------- */
 
          
 
          
−
         *, *:after, *:before {
+
         *,
 +
        *:after,
 +
        *:before {
 
             -webkit-box-sizing: border-box;
 
             -webkit-box-sizing: border-box;
 
             -moz-box-sizing: border-box;
 
             -moz-box-sizing: border-box;
Line 160: Line 174:
 
             font-family: "Source Sans Pro", sans-serif;
 
             font-family: "Source Sans Pro", sans-serif;
 
             color: rgba(2, 23, 37, 0.7);
 
             color: rgba(2, 23, 37, 0.7);
−
             background-color: grey;
+
             --color-bg: #1f174e;
−
             overflow: hidden;
+
            --color-bg-2: #151436;
 +
            --color-bg-3: #060029;
 +
            background: linear-gradient(90deg, var(--color-bg-3), var(--color-bg-2),var(--color-bg),var(--color-bg-2), var(--color-bg-3));
 +
             /*overflow: hidden;*/
 
             /* 溢出隐藏 */
 
             /* 溢出隐藏 */
 
             /*background: url("../img/cover.jpg") center no-repeat;*/
 
             /*background: url("../img/cover.jpg") center no-repeat;*/
Line 177: Line 194:
 
             text-decoration: none;
 
             text-decoration: none;
 
         }
 
         }
−
         a:hover, a:focus {
+
       
−
            transform: translateY(0);
+
         a:hover,
−
        }
+
 
         a:visited {
 
         a:visited {
−
             color:white;
+
             color: white;
 
         }
 
         }
 
         /* -------------------------------- Modules - reusable parts of our design -------------------------------- */
 
         /* -------------------------------- Modules - reusable parts of our design -------------------------------- */
Line 199: Line 215:
 
         /* -------------------------------- Main components -------------------------------- */
 
         /* -------------------------------- Main components -------------------------------- */
 
          
 
          
−
         html, body {
+
         html,
 +
        body {
 
             height: 100%;
 
             height: 100%;
 
         }
 
         }
Line 240: Line 257:
 
                 backface-visibility: hidden;
 
                 backface-visibility: hidden;
 
             }
 
             }
−
             /*.cd-header.is-fixed {
+
             /*.cd-header .is-fixed {
 
                 /* when the user scrolls down, we hide the header right above the viewport */
 
                 /* when the user scrolls down, we hide the header right above the viewport */
 
                 position: fixed;
 
                 position: fixed;
Line 248: Line 265:
 
                 -moz-transition: -moz-transform 0.3s;
 
                 -moz-transition: -moz-transform 0.3s;
 
                 transition: transform 0.3s;
 
                 transition: transform 0.3s;
−
             }*/
+
             } */
−
             .cd-header.is-visible {
+
             .cd-header .is-visible {
 
                 /* if the user changes the scrolling direction, we show the header */
 
                 /* if the user changes the scrolling direction, we show the header */
 
                 -webkit-transform: translate3d(0, 100%, 0);
 
                 -webkit-transform: translate3d(0, 100%, 0);
Line 322: Line 339:
 
             position: absolute;
 
             position: absolute;
 
             right: 0;
 
             right: 0;
−
             top: 0;
+
             top: 5vh;
 
             height: 100%;
 
             height: 100%;
 
             width: 50px;
 
             width: 50px;
Line 328: Line 345:
 
             background-color: rgba(2, 23, 37, 0);
 
             background-color: rgba(2, 23, 37, 0);
 
         }
 
         }
−
         .cd-primary-nav-trigger:hover{
+
          
−
            position: fixed;
+
        #cd-primary-naver a:hover {
−
            transform: translateY(0);
+
            background-color: white;
 +
            color: black;
 +
            text-decoration: none;
 
         }
 
         }
 
          
 
          
Line 354: Line 373:
 
             bottom: auto;
 
             bottom: auto;
 
             right: auto;
 
             right: auto;
−
             -webkit-transform: translateX(-50%) translateY(-50%);
+
             /*-webkit-transform: translateX(-50%) translateY(-50%);
 
             -moz-transform: translateX(-50%) translateY(-50%);
 
             -moz-transform: translateX(-50%) translateY(-50%);
 
             -ms-transform: translateX(-50%) translateY(-50%);
 
             -ms-transform: translateX(-50%) translateY(-50%);
 
             -o-transform: translateX(-50%) translateY(-50%);
 
             -o-transform: translateX(-50%) translateY(-50%);
−
             transform: translateX(-50%) translateY(-50%);
+
             transform: translateX(-50%) translateY(-50%);*/
 
             width: 28px;
 
             width: 28px;
 
             height: 2px;
 
             height: 2px;
Line 368: Line 387:
 
         }
 
         }
 
          
 
          
−
         .cd-primary-nav-trigger .cd-menu-icon::before, .cd-primary-nav-trigger .cd-menu-icon:after {
+
         .cd-primary-nav-trigger .cd-menu-icon::before,
 +
        .cd-primary-nav-trigger .cd-menu-icon:after {
 
             content: '';
 
             content: '';
 
             width: 100%;
 
             width: 100%;
Line 392: Line 412:
 
         }
 
         }
 
          
 
          
−
         .cd-primary-nav-trigger .cd-menu-icon.is-clicked::before, .cd-primary-nav-trigger .cd-menu-icon.is-clicked::after {
+
         .cd-primary-nav-trigger .cd-menu-icon.is-clicked::before,
 +
        .cd-primary-nav-trigger .cd-menu-icon.is-clicked::after {
 
             background-color: white;
 
             background-color: white;
 
         }
 
         }
Line 422: Line 443:
 
                 line-height: 30px;
 
                 line-height: 30px;
 
                 /*菜单栏整体位置*/
 
                 /*菜单栏整体位置*/
−
                 left: 0vw;
+
                 left: 6vw;
 
                 top: 10vh;
 
                 top: 10vh;
 
                 bottom: auto;
 
                 bottom: auto;
−
                 -webkit-transform: translateY(-50%);
+
                 /* -webkit-transform: translateY(-50%);
 
                 -moz-transform: translateY(-50%);
 
                 -moz-transform: translateY(-50%);
 
                 -ms-transform: translateY(-50%);
 
                 -ms-transform: translateY(-50%);
 
                 -o-transform: translateY(-50%);
 
                 -o-transform: translateY(-50%);
−
                 transform: translateY(-50%);
+
                 transform: translateY(-50%);*/
 
             }
 
             }
 
             .cd-primary-nav-trigger .cd-menu-text {
 
             .cd-primary-nav-trigger .cd-menu-text {
Line 448: Line 469:
 
             /* by default it's hidden - on top of the viewport */
 
             /* by default it's hidden - on top of the viewport */
 
             position: fixed;
 
             position: fixed;
−
          /* left: 0;
 
−
            top: 0;*/
 
 
             height: 100%;
 
             height: 100%;
 
             width: 100%;
 
             width: 100%;
−
             margin:0vh 0vw 0vh 0vw;
+
             margin: 10vh 0vw 0vh 0vw;
 
             font-family: "Cambria";
 
             font-family: "Cambria";
 
             /*菜单下来后的背景色*/
 
             /*菜单下来后的背景色*/
 
             /*background: rgba(2, 23, 37, 0.8);*/
 
             /*background: rgba(2, 23, 37, 0.8);*/
−
             background: rgba(0, 0, 0, 0.7);
+
            --color-bg: #1f174e;
 +
            --color-bg-2: #151436;
 +
            --color-bg-3: #060029;
 +
             background: linear-gradient(90deg, var(--color-bg-3), var(--color-bg-2),var(--color-bg),var(--color-bg-2), var(--color-bg-3));
 
             z-index: 2;
 
             z-index: 2;
 
             text-align: center;
 
             text-align: center;
−
             padding: 50px 0;
+
             /*padding: 10vh 0 0 0;*/
 
             -webkit-backface-visibility: hidden;
 
             -webkit-backface-visibility: hidden;
 
             backface-visibility: hidden;
 
             backface-visibility: hidden;
Line 522: Line 544:
 
             height: 44px;
 
             height: 44px;
 
             padding: 0;
 
             padding: 0;
−
             background-image: url("../img/cd-socials.svg");
+
             background-image: url("https://static.igem.org/mediawiki/2019/9/93/T--Tongji_Software--menu_cd-socials.svg");
 
             background-repeat: no-repeat;
 
             background-repeat: no-repeat;
 
             /* image replacement */
 
             /* image replacement */
Line 649: Line 671:
 
         </header>
 
         </header>
  
−
         <nav>
+
         <nav id="cd-primary-naver">
 
             <ul class="cd-primary-nav">
 
             <ul class="cd-primary-nav">
−
                 <li><a href="#0">HOME</a></li>
+
                <li style="height:8vh"></li>
 +
                 <li><a id="url" href="https://2019.igem.org/Team:Tongji_Software">HOME</a></li>
 
                 <li class="cd-label">About Us</li>
 
                 <li class="cd-label">About Us</li>
  
−
                 <li><a href="#0">Our Projects</a></li>
+
                 <li><a href="https://2019.igem.org/Team:Tongji_Software/Project">Our Project</a></li>
−
                 <li><a href="#0">Team Information</a></li>
+
                 <li><a href="https://2019.igem.org/Team:Tongji_Software/Attributions">Team Information</a></li>
  
 
                 <li class="cd-label">Other</li>
 
                 <li class="cd-label">Other</li>
−
                 <li><a href="#0">Safety</a></li>
+
                 <li><a href="https://2019.igem.org/Team:Tongji_Software/Safety">Safety</a></li>
−
                 <li><a href="#0">Human Practices</a></li>
+
                 <li><a href="https://2019.igem.org/Team:Tongji_Software/Human_Practices">Human Practices</a></li>
−
                 <li><a href="#0">Education & Engagement</a></li>
+
                 <li><a href="https://2019.igem.org/Team:Tongji_Software/Public_Engagement">Education & Engagement</a></li>
−
                 <li><a href="#0">Model</a></li>
+
                 <li><a href="https://2019.igem.org/Team:Tongji_Software/Model">Model</a></li>
−
                 <li><a href="#0">Medal</a></li>
+
                 <li><a href="https://2019.igem.org/Team:Tongji_Software/Medal">Medal</a></li>
−
                 <li><a href="#0">Judging Form</a></li>
+
                 <li><a href="https://igem.org/2019_Judging_Form?id=3094">Judging Form</a></li>
  
 
                 <li class="cd-label">Follow us</li>
 
                 <li class="cd-label">Follow us</li>
 +
              <br>
 +
                <li class="cd-socia" style="color:white">Twitter@IGEMtongjisoft </li>
 +
 +
  
−
                <li class="cd-social cd-facebook"><a href="#0">Facebook</a></li>
 
−
                <li class="cd-social cd-instagram"><a href="#0">Instagram</a></li>
 
−
                <li class="cd-social cd-dribbble"><a href="#0">Dribbble</a></li>
 
−
                <li class="cd-social cd-twitter"><a href="#0">Twitter</a></li>
 
 
             </ul>
 
             </ul>
 
         </nav>
 
         </nav>

Latest revision as of 01:49, 22 October 2019

Tongji Software | Pathlab