Difference between revisions of "Template:Tongji Software/css/MenuStyle css"

 
(42 intermediate revisions by the same user not shown)
Line 19: Line 19:
 
         }
 
         }
 
          
 
          
−
        #indexMenu ul {
+
 
−
            margin-left: -10px;
+
−
        }
+
−
       
+
 
         #bodyContent a[href ^="https://"] {
 
         #bodyContent a[href ^="https://"] {
 
             padding: .4em 1em;
 
             padding: .4em 1em;
Line 167: Line 164:
 
             font-size: 100%;
 
             font-size: 100%;
 
             font-family: "Source Sans Pro", sans-serif;
 
             font-family: "Source Sans Pro", sans-serif;
−
            color: rgba(2, 23, 37, 0.7);
 
−
            --color-text: #fff;
 
 
             --color-bg: #1f174e;
 
             --color-bg: #1f174e;
 
             --color-bg-2: #151436;
 
             --color-bg-2: #151436;
−
             --color-bg-3: #000;
+
             --color-bg-3: #060029;
−
             --color-link: #8596df;
+
             background: linear-gradient(90deg, var(--color-bg-3), var(--color-bg-2), var(--color-bg), var(--color-bg-2), var(--color-bg-3));
−
            --color-link-hover: #723bb7;
+
         
−
            background: radial-gradient(ellipse at 30% 48%, var(--color-bg) 0, var(--color-bg-2) 45%, var(--color-bg-3) 150%);
+
 
             /*overflow: hidden;*/
 
             /*overflow: hidden;*/
 
             /* 溢出隐藏 */
 
             /* 溢出隐藏 */
Line 192: Line 186:
 
         }
 
         }
 
          
 
          
−
         a:hover,a:visited {
+
         a:hover, a:visited {
 
             color: white;
 
             color: white;
 +
            text-decoration: none;
 
         }
 
         }
 
         /* -------------------------------- Modules - reusable parts of our design -------------------------------- */
 
         /* -------------------------------- Modules - reusable parts of our design -------------------------------- */
Line 269: Line 264:
 
                 -o-transform: translate3d(0, 100%, 0);
 
                 -o-transform: translate3d(0, 100%, 0);
 
                 transform: translate3d(0, 100%, 0);
 
                 transform: translate3d(0, 100%, 0);
 +
            }
 +
          .cd-header .is-visible ul{
 +
                  margin-left: 0vw;
 
             }
 
             }
  
Line 348: Line 346:
 
             text-decoration: none;
 
             text-decoration: none;
 
         }
 
         }
 +
        #cd-primary-naver ul{
 +
                margin-left:7vw;
 +
        }
 +
        #cd-primary-naver .is-visible{
 +
              margin-left:-5vw;
 +
        }
 
          
 
          
 
         .cd-primary-nav-trigger .cd-menu-icon {
 
         .cd-primary-nav-trigger .cd-menu-icon {
Line 426: Line 430:
 
                 line-height: 30px;
 
                 line-height: 30px;
 
                 /*菜单栏整体位置*/
 
                 /*菜单栏整体位置*/
−
                 left: -1vw;
+
                 left: -1.5vw;
−
                 top: 8vh;
+
                 top: 11vh;
 
                 bottom: auto;
 
                 bottom: auto;
 
                 -webkit-transform: translateY(-50%);
 
                 -webkit-transform: translateY(-50%);
Line 450: Line 454:
 
             position: fixed;
 
             position: fixed;
 
             height: 100%;
 
             height: 100%;
−
             width: 100%;
+
             width: 75%;
 
             margin: 10vh 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);*/
−
            --color-text: #fff;
+
        --color-bg: #1f174e;
−
            --color-bg: #1f174e;
+
        --color-bg-2: #151436;
−
            --color-bg-2: #151436;
+
        --color-bg-3: #060029;
−
            --color-bg-3: #000;
+
        background: linear-gradient(90deg, var(--color-bg-3), var(--color-bg-2), var(--color-bg), var(--color-bg-2), var(--color-bg-3));
−
            --color-link: #8596df;
+
            box-shadow:10px 0px 15px rgba(0,0,0,0.5);
−
            --color-link-hover: #723bb7;
+
−
            background: radial-gradient(ellipse at 30% 48%, var(--color-bg) 0, var(--color-bg-2) 45%, var(--color-bg-3) 150%);
+
 
             z-index: 2;
 
             z-index: 2;
 
             text-align: center;
 
             text-align: center;
Line 470: Line 472:
 
             /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
 
             /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
 
             -webkit-overflow-scrolling: touch;
 
             -webkit-overflow-scrolling: touch;
−
             -webkit-transform: translateY(-100%);
+
             -webkit-transform: translateX(-92%);
−
             -moz-transform: translateY(-100%);
+
             -moz-transform: translateX(-100%);
−
             -ms-transform: translateY(-100%);
+
             -ms-transform: translateX(-100%);
−
             -o-transform: translateY(-100%);
+
             -o-transform: translateX(-100%);
−
             transform: translateY(-100%);
+
             transform: translateX(-100%);
 
             -webkit-transition-property: -webkit-transform;
 
             -webkit-transition-property: -webkit-transform;
 
             -moz-transition-property: -moz-transform;
 
             -moz-transition-property: -moz-transform;
Line 527: Line 529:
 
             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 657: Line 659:
 
                 <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="https://2019.igem.org/Team:Tongji_Software/Demonstrate">Safety</a></li>
+
                 <li><a href="https://2019.igem.org/Team:Tongji_Software/Safety">Safety</a></li>
 
                 <li><a href="https://2019.igem.org/Team:Tongji_Software/Human_Practices">Human Practices</a></li>
 
                 <li><a href="https://2019.igem.org/Team:Tongji_Software/Human_Practices">Human Practices</a></li>
 
                 <li><a href="https://2019.igem.org/Team:Tongji_Software/Public_Engagement">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="https://2019.igem.org/Team:Tongji_Software/Medal">Medal</a></li>
 
                 <li><a href="https://2019.igem.org/Team:Tongji_Software/Medal">Medal</a></li>
 
                 <li><a href="https://igem.org/2019_Judging_Form?id=3094">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-social cd-facebook"><a href="#0">Facebook</a></li>
+
                 <li class="cd-socia" style="color:white">Twitter@IGEMtongjisoft </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 02:31, 22 October 2019

Tongji Software | Pathlab