Line 6: | Line 6: | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<style> | <style> | ||
+ | body { | ||
+ | line-height: 1; | ||
+ | } | ||
+ | ol, ul { | ||
+ | list-style: none; | ||
+ | } | ||
+ | blockquote, q { | ||
+ | quotes: none; | ||
+ | } | ||
+ | blockquote:before, blockquote:after, | ||
+ | q:before, q:after { | ||
+ | content: ''; | ||
+ | content: none; | ||
+ | } | ||
+ | table { | ||
+ | border-collapse: collapse; | ||
+ | border-spacing: 0; | ||
+ | } | ||
/* -------------------------------- | /* -------------------------------- | ||
Line 13: | Line 31: | ||
@font-face{ | @font-face{ | ||
− | + | font-family: Ubuntu; | |
− | + | src: url("https://static.igem.org/mediawiki/2019/6/6d/T--Tongji_Software--fonts-Ubuntu.ttf"); | |
} | } | ||
− | + | ||
html * { | html * { | ||
− | + | -webkit-font-smoothing: antialiased; | |
− | + | -moz-osx-font-smoothing: grayscale; | |
} | } | ||
− | + | ||
*, *:after, *:before { | *, *:after, *:before { | ||
− | + | -webkit-box-sizing: border-box; | |
− | + | -moz-box-sizing: border-box; | |
− | + | box-sizing: border-box; | |
} | } | ||
− | + | ||
body { | body { | ||
− | + | font-size: 100%; | |
− | + | font-family: "Ubuntu", sans-serif; | |
− | + | color: #3e3947; | |
− | + | background-color: white; | |
} | } | ||
− | + | ||
body, html { | body, html { | ||
− | + | height: 100%; | |
} | } | ||
− | + | ||
a { | a { | ||
− | + | color: #3e3947; | |
− | + | text-decoration: none; | |
} | } | ||
− | + | ||
img { | img { | ||
− | + | max-width: 100%; | |
} | } | ||
− | + | ||
/* -------------------------------- | /* -------------------------------- | ||
− | + | ||
Modules - reusable parts of our design | Modules - reusable parts of our design | ||
− | + | ||
-------------------------------- */ | -------------------------------- */ | ||
.cd-img-replace { | .cd-img-replace { | ||
− | + | /* replace text with a background-image */ | |
− | + | display: inline-block; | |
− | + | overflow: hidden; | |
− | + | text-indent: 100%; | |
− | + | white-space: nowrap; | |
} | } | ||
− | + | ||
/* -------------------------------- | /* -------------------------------- | ||
− | + | ||
Main components | Main components | ||
− | + | ||
-------------------------------- */ | -------------------------------- */ | ||
.cd-section { | .cd-section { | ||
− | + | min-height: 100%; | |
− | + | position: relative; | |
− | + | padding: 2em 0; | |
} | } | ||
.cd-section:nth-of-type(odd) { | .cd-section:nth-of-type(odd) { | ||
− | + | background-color: #3e3947; | |
} | } | ||
.cd-section:nth-of-type(odd) p { | .cd-section:nth-of-type(odd) p { | ||
− | + | color: #898099; | |
} | } | ||
.cd-section:nth-of-type(even) { | .cd-section:nth-of-type(even) { | ||
− | + | background-color: #745360; | |
} | } | ||
.cd-section:nth-of-type(even) p { | .cd-section:nth-of-type(even) p { | ||
− | + | color: #bda3ad; | |
} | } | ||
.cd-section h1, .cd-section p { | .cd-section h1, .cd-section p { | ||
− | + | position: relative; | |
− | + | /*position: absolute;*/ | |
− | + | /*left: 50%;*/ | |
− | + | /*top: 50%;*/ | |
− | + | bottom: auto; | |
− | + | /*right: auto;*/ | |
− | + | /*-webkit-transform: translateX(-50%) translateY(-50%);*/ | |
− | + | /*-moz-transform: translateX(-50%) translateY(-50%);*/ | |
− | + | /*-ms-transform: translateX(-50%) translateY(-50%);*/ | |
− | + | /*-o-transform: translateX(-50%) translateY(-50%);*/ | |
− | + | /*transform: translateX(-50%) translateY(-50%);*/ | |
− | + | /*width: 90%;*/ | |
− | + | /*max-width: 768px;*/ | |
− | + | /*text-align: center;*/ | |
} | } | ||
.cd-section h1#description { | .cd-section h1#description { | ||
− | + | color: red; | |
− | + | font-weight: 300; | |
− | + | text-transform: uppercase; | |
− | + | /*font-size: 200px;*/ | |
− | + | font-size: 10.25rem; | |
} | } | ||
.cd-section p { | .cd-section p { | ||
− | + | line-height: 1.6; | |
} | } | ||
− | + | ||
/*/*/ | /*/*/ | ||
@media only screen and (min-width: 768px) { | @media only screen and (min-width: 768px) { | ||
− | + | .cd-section h1 { | |
font-size: 30px; | font-size: 30px; | ||
font-size: 1.875rem; | font-size: 1.875rem; | ||
− | + | } | |
− | + | .cd-section p { | |
font-size: 20px; | font-size: 20px; | ||
font-size: 1.25rem; | font-size: 1.25rem; | ||
line-height: 2; | line-height: 2; | ||
− | + | } | |
} | } | ||
− | + | ||
.cd-scroll-down { | .cd-scroll-down { | ||
− | + | position: absolute; | |
− | + | left: 50%; | |
− | + | right: auto; | |
− | + | -webkit-transform: translateX(-50%); | |
− | + | -moz-transform: translateX(-50%); | |
− | + | -ms-transform: translateX(-50%); | |
− | + | -o-transform: translateX(-50%); | |
− | + | transform: translateX(-50%); | |
− | + | bottom: 20px; | |
− | + | width: 38px; | |
− | + | height: 44px; | |
− | + | background: url("../img/cd-arrow-bottom.svg") no-repeat center center; | |
} | } | ||
− | + | ||
/* No Touch devices */ | /* No Touch devices */ | ||
.cd-nav-trigger { | .cd-nav-trigger { | ||
− | + | display: none; | |
} | } | ||
− | + | ||
.no-touch #cd-vertical-nav { | .no-touch #cd-vertical-nav { | ||
− | + | position: fixed; | |
− | + | right: 40px; | |
− | + | top: 25%; | |
− | + | bottom: auto; | |
− | + | -webkit-transform: translateY(-50%); | |
− | + | -moz-transform: translateY(-50%); | |
− | + | -ms-transform: translateY(-50%); | |
− | + | -o-transform: translateY(-50%); | |
− | + | transform: translateY(-50%); | |
− | + | z-index: 1; | |
} | } | ||
.no-touch #cd-vertical-nav li { | .no-touch #cd-vertical-nav li { | ||
− | + | text-align: right; | |
} | } | ||
.no-touch #cd-vertical-nav a { | .no-touch #cd-vertical-nav a { | ||
− | + | display: inline-block; | |
− | + | /* prevent weird movements on hover when you use a CSS3 transformation - webkit browsers */ | |
− | + | -webkit-backface-visibility: hidden; | |
− | + | backface-visibility: hidden; | |
} | } | ||
.no-touch #cd-vertical-nav a:after { | .no-touch #cd-vertical-nav a:after { | ||
− | + | content: ""; | |
− | + | display: table; | |
− | + | clear: both; | |
} | } | ||
.no-touch #cd-vertical-nav a span { | .no-touch #cd-vertical-nav a span { | ||
− | + | float: right; | |
− | + | display: inline-block; | |
− | + | -webkit-transform: scale(0.6); | |
− | + | -moz-transform: scale(0.6); | |
− | + | -ms-transform: scale(0.6); | |
− | + | -o-transform: scale(0.6); | |
− | + | transform: scale(0.6); | |
} | } | ||
.no-touch #cd-vertical-nav a.is-selected span { | .no-touch #cd-vertical-nav a.is-selected span { | ||
− | + | -webkit-transform: scale(1); | |
− | + | -moz-transform: scale(1); | |
− | + | -ms-transform: scale(1); | |
− | + | -o-transform: scale(1); | |
− | + | transform: scale(1); | |
} | } | ||
− | + | ||
.no-touch #cd-vertical-nav a:hover span { | .no-touch #cd-vertical-nav a:hover span { | ||
− | + | -webkit-transform: scale(1); | |
− | + | -moz-transform: scale(1); | |
− | + | -ms-transform: scale(1); | |
− | + | -o-transform: scale(1); | |
− | + | transform: scale(1); | |
} | } | ||
/*.no-touch #cd-vertical-nav a:hover .cd-label {*/ | /*.no-touch #cd-vertical-nav a:hover .cd-label {*/ | ||
/* opacity: 1;*/ | /* opacity: 1;*/ | ||
/*}*/ | /*}*/ | ||
− | + | ||
− | + | ||
.no-touch #cd-vertical-nav a.is-selected .cd-label { | .no-touch #cd-vertical-nav a.is-selected .cd-label { | ||
− | + | opacity: 1; | |
} | } | ||
− | + | ||
− | + | ||
.no-touch #cd-vertical-nav a.is-selected .cd-dot { | .no-touch #cd-vertical-nav a.is-selected .cd-dot { | ||
− | + | /*点到达时的颜色*/ | |
− | + | background-color: white; | |
} | } | ||
.no-touch #cd-vertical-nav .cd-dot { | .no-touch #cd-vertical-nav .cd-dot { | ||
− | + | position: relative; | |
− | + | /* we set a top value in order to align the dot with the label. If you change label's font, you may need to change this top value*/ | |
− | + | top: 13px; | |
− | + | height: 12px; | |
− | + | width: 12px; | |
− | + | border-radius: 50%; | |
− | + | /*点未到达时的颜色*/ | |
− | + | background-color: dodgerblue; | |
− | + | -webkit-transition: -webkit-transform 0.2s, background-color 0.5s; | |
− | + | -moz-transition: -moz-transform 0.2s, background-color 0.5s; | |
− | + | transition: transform 0.2s, background-color 0.5s; | |
− | + | -webkit-transform-origin: 50% 50%; | |
− | + | -moz-transform-origin: 50% 50%; | |
− | + | -ms-transform-origin: 50% 50%; | |
− | + | -o-transform-origin: 50% 50%; | |
− | + | transform-origin: 50% 50%; | |
} | } | ||
.no-touch #cd-vertical-nav .cd-label { | .no-touch #cd-vertical-nav .cd-label { | ||
− | + | position: relative; | |
− | + | margin-right: 10px; | |
− | + | /*padding: .4em .5em;*/ | |
− | + | padding: 0; | |
− | + | color: white; | |
− | + | font-size: 34px; | |
− | + | /*font-size: 0.875rem;*/ | |
− | + | -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; | |
− | + | -moz-transition: -moz-transform 0.2s, opacity 0.2s; | |
− | + | transition: transform 0.2s, opacity 0.2s; | |
− | + | /*文字未hover时的透明度*/ | |
− | + | opacity: 0.5; | |
− | + | -webkit-transform-origin: 100% 50%; | |
− | + | -moz-transform-origin: 100% 50%; | |
− | + | -ms-transform-origin: 100% 50%; | |
− | + | -o-transform-origin: 100% 50%; | |
− | + | transform-origin: 100% 50%; | |
} | } | ||
− | + | ||
/* Touch devices */ | /* Touch devices */ | ||
.touch .cd-nav-trigger { | .touch .cd-nav-trigger { | ||
− | + | display: block; | |
− | + | z-index: 2; | |
− | + | position: fixed; | |
− | + | bottom: 30px; | |
− | + | right: 5%; | |
− | + | height: 44px; | |
− | + | width: 44px; | |
− | + | border-radius: 0.25em; | |
− | + | background: rgba(255, 255, 255, 0.9); | |
} | } | ||
.touch .cd-nav-trigger span { | .touch .cd-nav-trigger span { | ||
− | + | position: absolute; | |
− | + | height: 4px; | |
− | + | width: 4px; | |
− | + | background-color: #3e3947; | |
− | + | border-radius: 50%; | |
− | + | left: 50%; | |
− | + | top: 50%; | |
− | + | bottom: auto; | |
− | + | right: auto; | |
− | + | -webkit-transform: translateX(-50%) translateY(-50%); | |
− | + | -moz-transform: translateX(-50%) translateY(-50%); | |
− | + | -ms-transform: translateX(-50%) translateY(-50%); | |
− | + | -o-transform: translateX(-50%) translateY(-50%); | |
− | + | transform: translateX(-50%) translateY(-50%); | |
} | } | ||
.touch .cd-nav-trigger span::before, .touch .cd-nav-trigger span::after { | .touch .cd-nav-trigger span::before, .touch .cd-nav-trigger span::after { | ||
− | + | content: ''; | |
− | + | height: 100%; | |
− | + | width: 100%; | |
− | + | position: absolute; | |
− | + | left: 0; | |
− | + | background-color: inherit; | |
− | + | border-radius: inherit; | |
} | } | ||
.touch .cd-nav-trigger span::before { | .touch .cd-nav-trigger span::before { | ||
− | + | top: -9px; | |
} | } | ||
.touch .cd-nav-trigger span::after { | .touch .cd-nav-trigger span::after { | ||
− | + | bottom: -9px; | |
} | } | ||
− | + | ||
.touch #cd-vertical-nav { | .touch #cd-vertical-nav { | ||
− | + | position: fixed; | |
− | + | z-index: 1; | |
− | + | right: 5%; | |
− | + | bottom: 30px; | |
− | + | width: 90%; | |
− | + | max-width: 400px; | |
− | + | max-height: 90%; | |
− | + | overflow-y: scroll; | |
− | + | -webkit-overflow-scrolling: touch; | |
− | + | -webkit-transform-origin: right bottom; | |
− | + | -moz-transform-origin: right bottom; | |
− | + | -ms-transform-origin: right bottom; | |
− | + | -o-transform-origin: right bottom; | |
− | + | transform-origin: right bottom; | |
− | + | -webkit-transform: scale(0); | |
− | + | -moz-transform: scale(0); | |
− | + | -ms-transform: scale(0); | |
− | + | -o-transform: scale(0); | |
− | + | transform: scale(0); | |
− | + | -webkit-transition-property: -webkit-transform; | |
− | + | -moz-transition-property: -moz-transform; | |
− | + | transition-property: transform; | |
− | + | -webkit-transition-duration: 0.2s; | |
− | + | -moz-transition-duration: 0.2s; | |
− | + | transition-duration: 0.2s; | |
− | + | border-radius: 0.25em; | |
− | + | background-color: rgba(255, 255, 255, 0.9); | |
} | } | ||
.touch #cd-vertical-nav a { | .touch #cd-vertical-nav a { | ||
− | + | display: block; | |
− | + | padding: 1em; | |
− | + | border-bottom: 1px solid rgba(62, 57, 71, 0.1); | |
} | } | ||
.touch #cd-vertical-nav a span:first-child { | .touch #cd-vertical-nav a span:first-child { | ||
− | + | display: none; | |
} | } | ||
.touch #cd-vertical-nav a.is-selected span:last-child { | .touch #cd-vertical-nav a.is-selected span:last-child { | ||
− | + | color: #d88683; | |
} | } | ||
.touch #cd-vertical-nav.open { | .touch #cd-vertical-nav.open { | ||
− | + | -webkit-transform: scale(1); | |
− | + | -moz-transform: scale(1); | |
− | + | -ms-transform: scale(1); | |
− | + | -o-transform: scale(1); | |
− | + | transform: scale(1); | |
} | } | ||
.touch #cd-vertical-nav.open + .cd-nav-trigger { | .touch #cd-vertical-nav.open + .cd-nav-trigger { | ||
− | + | background-color: transparent; | |
} | } | ||
.touch #cd-vertical-nav.open + .cd-nav-trigger span { | .touch #cd-vertical-nav.open + .cd-nav-trigger span { | ||
− | + | background-color: rgba(62, 57, 71, 0); | |
} | } | ||
.touch #cd-vertical-nav.open + .cd-nav-trigger span::before, .touch #cd-vertical-nav.open + .cd-nav-trigger span::after { | .touch #cd-vertical-nav.open + .cd-nav-trigger span::before, .touch #cd-vertical-nav.open + .cd-nav-trigger span::after { | ||
− | + | background-color: #3e3947; | |
− | + | height: 3px; | |
− | + | width: 20px; | |
− | + | border-radius: 0; | |
− | + | left: -8px; | |
} | } | ||
.touch #cd-vertical-nav.open + .cd-nav-trigger span::before { | .touch #cd-vertical-nav.open + .cd-nav-trigger span::before { | ||
− | + | -webkit-transform: rotate(45deg); | |
− | + | -moz-transform: rotate(45deg); | |
− | + | -ms-transform: rotate(45deg); | |
− | + | -o-transform: rotate(45deg); | |
− | + | transform: rotate(45deg); | |
− | + | top: 1px; | |
} | } | ||
.touch #cd-vertical-nav.open + .cd-nav-trigger span::after { | .touch #cd-vertical-nav.open + .cd-nav-trigger span::after { | ||
− | + | -webkit-transform: rotate(135deg); | |
− | + | -moz-transform: rotate(135deg); | |
− | + | -ms-transform: rotate(135deg); | |
− | + | -o-transform: rotate(135deg); | |
− | + | transform: rotate(135deg); | |
− | + | bottom: 0; | |
} | } | ||
.touch #cd-vertical-nav li:last-child a { | .touch #cd-vertical-nav li:last-child a { | ||
− | + | border-bottom: none; | |
} | } | ||
− | + | ||
@media only screen and (min-width: 768px) { | @media only screen and (min-width: 768px) { | ||
− | + | .touch .cd-nav-trigger, .touch #cd-vertical-nav { | |
bottom: 40px; | bottom: 40px; | ||
− | + | } | |
} | } | ||
+ | |||
</style> | </style> |
Revision as of 15:56, 6 October 2019