Difference between revisions of "Template:Tongji Software/css/MenuStyle css"
| (46 intermediate revisions by the same user not shown) | |||
| Line 8: | Line 8: | ||
} | } | ||
| − | #sideMenu, | + | #sideMenu, #top_title { |
| − | + | ||
display: none; | display: none; | ||
} | } | ||
| Line 20: | Line 19: | ||
} | } | ||
| − | + | ||
| − | + | #bodyContent a[href ^="https://"] { | |
| − | + | padding: .4em 1em; | |
| − | #bodyContent | + | |
| − | + | ||
} | } | ||
/*content style*/ | /*content style*/ | ||
| Line 147: | Line 144: | ||
} | } | ||
| − | blockquote:before, | + | blockquote:before,blockquote:after,q:before,q:after { |
| − | + | ||
| − | + | ||
| − | + | ||
content: ''; | content: ''; | ||
content: none; | content: none; | ||
| Line 161: | Line 155: | ||
/* -------------------------------- Primary style -------------------------------- */ | /* -------------------------------- Primary style -------------------------------- */ | ||
| − | *, | + | *,*:after,*:before { |
| − | + | ||
| − | + | ||
-webkit-box-sizing: border-box; | -webkit-box-sizing: border-box; | ||
-moz-box-sizing: border-box; | -moz-box-sizing: border-box; | ||
| Line 172: | Line 164: | ||
font-size: 100%; | font-size: 100%; | ||
font-family: "Source Sans Pro", sans-serif; | font-family: "Source Sans Pro", sans-serif; | ||
| − | |||
| − | |||
--color-bg: #1f174e; | --color-bg: #1f174e; | ||
--color-bg-2: #151436; | --color-bg-2: #151436; | ||
| − | --color-bg-3: # | + | --color-bg-3: #060029; |
| − | --color- | + | 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;*/ | /*overflow: hidden;*/ | ||
/* 溢出隐藏 */ | /* 溢出隐藏 */ | ||
| Line 197: | Line 186: | ||
} | } | ||
| − | a:hover, | + | a:hover, a:visited { |
| − | + | ||
color: white; | color: white; | ||
| + | text-decoration: none; | ||
} | } | ||
/* -------------------------------- Modules - reusable parts of our design -------------------------------- */ | /* -------------------------------- Modules - reusable parts of our design -------------------------------- */ | ||
| Line 217: | Line 206: | ||
/* -------------------------------- Main components -------------------------------- */ | /* -------------------------------- Main components -------------------------------- */ | ||
| − | html, | + | html,body { |
| − | + | ||
height: 100%; | height: 100%; | ||
} | } | ||
| Line 250: | Line 238: | ||
-moz-transition: background-color 0.3s; | -moz-transition: background-color 0.3s; | ||
transition: background-color 0.3s; | transition: background-color 0.3s; | ||
| − | + | ||
-webkit-transform: translate3d(0, 0, 0); | -webkit-transform: translate3d(0, 0, 0); | ||
-moz-transform: translate3d(0, 0, 0); | -moz-transform: translate3d(0, 0, 0); | ||
| Line 258: | Line 246: | ||
-webkit-backface-visibility: hidden; | -webkit-backface-visibility: hidden; | ||
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 267: | Line 256: | ||
-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 276: | Line 265: | ||
transform: translate3d(0, 100%, 0); | transform: translate3d(0, 100%, 0); | ||
} | } | ||
| − | .cd-header.menu-is-open { | + | .cd-header .is-visible ul{ |
| + | margin-left: 0vw; | ||
| + | } | ||
| + | |||
| + | .cd-header .menu-is-open { | ||
/* add a background color to the header when the navigation is open */ | /* add a background color to the header when the navigation is open */ | ||
/*菜单打开后最上边那条横杠的颜色*/ | /*菜单打开后最上边那条横杠的颜色*/ | ||
| Line 353: | 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 358: | Line 357: | ||
display: inline-block; | display: inline-block; | ||
position: fixed; | position: fixed; | ||
| − | + | ||
| − | + | ||
bottom: auto; | bottom: auto; | ||
right: auto; | right: auto; | ||
| Line 432: | Line 430: | ||
line-height: 30px; | line-height: 30px; | ||
/*菜单栏整体位置*/ | /*菜单栏整体位置*/ | ||
| − | left: - | + | left: -1.5vw; |
| − | top: | + | top: 11vh; |
bottom: auto; | bottom: auto; | ||
-webkit-transform: translateY(-50%); | -webkit-transform: translateY(-50%); | ||
| Line 456: | Line 454: | ||
position: fixed; | position: fixed; | ||
height: 100%; | height: 100%; | ||
| − | width: | + | 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-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)); | |
| − | + | box-shadow:10px 0px 15px rgba(0,0,0,0.5); | |
| − | + | ||
| − | + | ||
z-index: 2; | z-index: 2; | ||
text-align: center; | text-align: center; | ||
| Line 476: | 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: | + | -webkit-transform: translateX(-92%); |
| − | -moz-transform: | + | -moz-transform: translateX(-100%); |
| − | -ms-transform: | + | -ms-transform: translateX(-100%); |
| − | -o-transform: | + | -o-transform: translateX(-100%); |
| − | transform: | + | transform: translateX(-100%); |
-webkit-transition-property: -webkit-transform; | -webkit-transition-property: -webkit-transform; | ||
-moz-transition-property: -moz-transform; | -moz-transition-property: -moz-transform; | ||
| Line 533: | Line 529: | ||
height: 44px; | height: 44px; | ||
padding: 0; | padding: 0; | ||
| − | background-image: url("../ | + | 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 556: | Line 552: | ||
background-position: -132px 0; | background-position: -132px 0; | ||
} | } | ||
| − | + | .cd-primary-nav.is-visible { | |
| − | + | ||
-webkit-transform: translateY(0); | -webkit-transform: translateY(0); | ||
-moz-transform: translateY(0); | -moz-transform: translateY(0); | ||
| Line 564: | Line 559: | ||
transform: translateY(0); | transform: translateY(0); | ||
} | } | ||
| + | |||
@media only screen and (min-width: 768px) { | @media only screen and (min-width: 768px) { | ||
| Line 642: | Line 638: | ||
} | } | ||
</style> | </style> | ||
| − | |||
| − | |||
| − | |||
</head> | </head> | ||
<body> | <body> | ||
| − | <div id="coverText" > | + | <div id="coverText"> |
</div> | </div> | ||
<div id="indexMenu" style="position:fixed; z-index:10"> | <div id="indexMenu" style="position:fixed; z-index:10"> | ||
| Line 663: | Line 656: | ||
<ul class="cd-primary-nav"> | <ul class="cd-primary-nav"> | ||
<li style="height:8vh"></li> | <li style="height:8vh"></li> | ||
| − | + | <li><a href="https://2019.igem.org/Team:Tongji_Software">HOME</a></li> | |
| − | + | <li class="cd-label">About Us</li> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | <li><a href="https://2019.igem.org/Team:Tongji_Software/Project">Our Project</a></li> | |
| − | + | <li><a href="https://2019.igem.org/Team:Tongji_Software/Attributions">Team Information</a></li> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | <li class="cd-label">Other</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/Public_Engagement">Education & Engagement</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://igem.org/2019_Judging_Form?id=3094">Judging Form</a></li> | ||
| − | + | <li class="cd-label">Follow us</li> | |
| − | + | <br> | |
| − | + | <li class="cd-socia" style="color:white">Twitter@IGEMtongjisoft </li> | |
| − | + | ||
</ul> | </ul> | ||
</nav> | </nav> | ||
| Line 690: | Line 680: | ||
</div> | </div> | ||
</main> | </main> | ||
| + | <!-- <script src="js/jquery-2.1.0.min.js"></script> | ||
| + | <script src="js/main.js"></script> --> | ||
<script src="https://2019.igem.org/Template:Tongji_Software/js/jquery_210_min_js?action=raw&ctype=text/javascript"></script> | <script src="https://2019.igem.org/Template:Tongji_Software/js/jquery_210_min_js?action=raw&ctype=text/javascript"></script> | ||
<script src="https://2019.igem.org/Template:Tongji_Software/js/main_js?action=raw&ctype=text/javascript"></script> | <script src="https://2019.igem.org/Template:Tongji_Software/js/main_js?action=raw&ctype=text/javascript"></script> | ||
Latest revision as of 02:31, 22 October 2019