Line 4: | Line 4: | ||
<title>Tongji Software | Pathlab</title> | <title>Tongji Software | Pathlab</title> | ||
<style> | <style> | ||
− | #sideMenu,#top_title { | + | #sideMenu, |
+ | #top_title { | ||
display: none; | display: none; | ||
} | } | ||
Line 11: | Line 12: | ||
padding: 0px; | padding: 0px; | ||
width: 90vw; | width: 90vw; | ||
− | margin-top: - | + | margin-top: -13px; |
− | margin-left:10px; | + | margin-left: 10px; |
} | } | ||
− | #indexMenu ul{ | + | |
− | margin-left:-10px; | + | #indexMenu ul { |
+ | margin-left: -10px; | ||
} | } | ||
/*content style*/ | /*content style*/ | ||
Line 152: | Line 154: | ||
/* -------------------------------- 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 179: | Line 183: | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
− | a:hover, a:focus { | + | |
+ | a:hover, | ||
+ | a:focus { | ||
transform: translateY(0); | transform: translateY(0); | ||
} | } | ||
+ | |||
a:visited { | a:visited { | ||
− | color:white; | + | color: white; |
} | } | ||
/* -------------------------------- Modules - reusable parts of our design -------------------------------- */ | /* -------------------------------- Modules - reusable parts of our design -------------------------------- */ | ||
Line 201: | Line 208: | ||
/* -------------------------------- Main components -------------------------------- */ | /* -------------------------------- Main components -------------------------------- */ | ||
− | html, body { | + | html, |
+ | body { | ||
height: 100%; | height: 100%; | ||
} | } | ||
Line 247: | Line 255: | ||
top: -80px; | top: -80px; | ||
background-color: rgba(2, 23, 37, 0.96); | background-color: rgba(2, 23, 37, 0.96); | ||
− | + | -webkit-transition: -webkit-transform 0.3s; | |
-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 { | ||
Line 330: | Line 338: | ||
background-color: rgba(2, 23, 37, 0); | background-color: rgba(2, 23, 37, 0); | ||
} | } | ||
− | .cd-primary-nav-trigger:hover{ | + | |
− | + | .cd-primary-nav-trigger:hover { | |
− | + | position: fixed; | |
+ | transform: translateY(0); | ||
} | } | ||
− | + | ||
− | + | #cd-primary-naver a:hover { | |
− | + | background-color: white; | |
− | + | color: black; | |
+ | } | ||
+ | |||
.cd-primary-nav-trigger .cd-menu-text { | .cd-primary-nav-trigger .cd-menu-text { | ||
position: absolute; | position: absolute; | ||
Line 359: | Line 370: | ||
bottom: auto; | bottom: auto; | ||
right: auto; | right: auto; | ||
− | + | -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 373: | Line 384: | ||
} | } | ||
− | .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 397: | Line 409: | ||
} | } | ||
− | .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 442: | Line 455: | ||
left: auto; | left: auto; | ||
right: 1em; | right: 1em; | ||
− | + | -webkit-transform: translateX(0) translateY(-50%); | |
-moz-transform: translateX(0) translateY(-50%); | -moz-transform: translateX(0) translateY(-50%); | ||
-ms-transform: translateX(0) translateY(-50%); | -ms-transform: translateX(0) translateY(-50%); | ||
-o-transform: translateX(0) translateY(-50%); | -o-transform: translateX(0) translateY(-50%); | ||
− | transform: translateX(0) translateY(-50%); | + | transform: translateX(0) translateY(-50%); |
} | } | ||
} | } | ||
Line 455: | Line 468: | ||
height: 100%; | height: 100%; | ||
width: 100%; | width: 100%; | ||
− | 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);*/ | ||
− | + | background: rgba(0, 0, 0, 0.7); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
z-index: 2; | z-index: 2; | ||
text-align: center; | text-align: center; | ||
Line 475: | Line 481: | ||
/* 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%); | |
-moz-transform: translateY(-100%); | -moz-transform: translateY(-100%); | ||
-ms-transform: translateY(-100%); | -ms-transform: translateY(-100%); | ||
-o-transform: translateY(-100%); | -o-transform: translateY(-100%); | ||
− | transform: translateY(-100%); | + | transform: translateY(-100%); |
-webkit-transition-property: -webkit-transform; | -webkit-transition-property: -webkit-transform; | ||
-moz-transition-property: -moz-transform; | -moz-transition-property: -moz-transform; | ||
Line 661: | Line 667: | ||
<nav id="cd-primary-naver"> | <nav id="cd-primary-naver"> | ||
<ul class="cd-primary-nav"> | <ul class="cd-primary-nav"> | ||
− | <li style="height:8vh"><li> | + | <li style="height:8vh"> |
− | + | <li> | |
− | + | <li><a href="#0">HOME</a></li> | |
+ | <li class="cd-label">About Us</li> | ||
− | + | <li><a href="#0">Our Projects</a></li> | |
− | + | <li><a href="#0">Team Information</a></li> | |
− | + | <li class="cd-label">Other</li> | |
− | + | <li><a href="#0">Safety</a></li> | |
− | + | <li><a href="#0">Human Practices</a></li> | |
− | + | <li><a href="#0">Education & Engagement</a></li> | |
− | + | <li><a href="#0">Model</a></li> | |
− | + | <li><a href="#0">Medal</a></li> | |
− | + | <li><a href="#0">Judging Form</a></li> | |
− | + | <li class="cd-label">Follow us</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> |
Revision as of 15:50, 8 October 2019