Difference between revisions of "Template:Tongji Software/CSS"
| Line 1: | Line 1: | ||
| − | |||
<html> | <html> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | <head> | |
| + | <title>Tongji Software | Pathlab</title> | ||
| + | <link href="https://2019.igem.org/Template:Tongji_Software/css/ClearDefaultCss_css?action=raw&ctype=text/css" rel="stylesheet"> | ||
| + | <script> | ||
| + | document.documentElement.className = "js"; | ||
| + | var supportsCssVars = function() { | ||
| + | var e, t = document.createElement("style"); | ||
| + | return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e | ||
| + | }; | ||
| + | supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables."); | ||
| + | </script> | ||
| − | + | <script src="https://2019.igem.org/Template:Tongji_Software/js/modernizer_js?action=raw&ctype=text/javascript"></script> | |
| − | + | <!-- Modernizr --> | |
| − | + | ||
| − | + | ||
| − | + | <style type="text/css"> | |
| − | + | #sideMenu, | |
| + | #top_title { | ||
| + | display: none; | ||
| + | } | ||
| − | + | #content { | |
| − | + | padding: 0px; | |
| + | width: 120vw; | ||
| + | margin-top: -13px; | ||
| + | margin-left: -0.4vw; | ||
| + | } | ||
| − | + | <!--主体背景--> | |
| + | </style> | ||
| + | |||
| + | <style> | ||
| + | *::-webkit-scrollbar { | ||
| + | display: none; | ||
| + | } | ||
| − | + | html, | |
| − | + | body, | |
| − | + | div, | |
| − | + | span, | |
| − | + | applet, | |
| − | } | + | object, |
| + | iframe, | ||
| + | h1, | ||
| + | h2, | ||
| + | h3, | ||
| + | h4, | ||
| + | h5, | ||
| + | h6, | ||
| + | p, | ||
| + | blockquote, | ||
| + | pre, | ||
| + | a, | ||
| + | abbr, | ||
| + | acronym, | ||
| + | address, | ||
| + | big, | ||
| + | cite, | ||
| + | code, | ||
| + | del, | ||
| + | dfn, | ||
| + | em, | ||
| + | img, | ||
| + | ins, | ||
| + | kbd, | ||
| + | q, | ||
| + | s, | ||
| + | samp, | ||
| + | small, | ||
| + | strike, | ||
| + | strong, | ||
| + | sub, | ||
| + | sup, | ||
| + | tt, | ||
| + | var, | ||
| + | b, | ||
| + | u, | ||
| + | i, | ||
| + | center, | ||
| + | dl, | ||
| + | dt, | ||
| + | dd, | ||
| + | ol, | ||
| + | ul, | ||
| + | li, | ||
| + | fieldset, | ||
| + | form, | ||
| + | label, | ||
| + | legend, | ||
| + | table, | ||
| + | caption, | ||
| + | tbody, | ||
| + | tfoot, | ||
| + | thead, | ||
| + | tr, | ||
| + | th, | ||
| + | td, | ||
| + | article, | ||
| + | aside, | ||
| + | canvas, | ||
| + | details, | ||
| + | embed, | ||
| + | figure, | ||
| + | figcaption, | ||
| + | footer, | ||
| + | header, | ||
| + | hgroup, | ||
| + | menu, | ||
| + | nav, | ||
| + | output, | ||
| + | ruby, | ||
| + | section, | ||
| + | summary, | ||
| + | time, | ||
| + | mark, | ||
| + | audio, | ||
| + | video { | ||
| + | margin: 0; | ||
| + | padding: 0; | ||
| + | border: 0; | ||
| + | font-size: 100%; | ||
| + | /*font: inherit;*/ | ||
| + | vertical-align: baseline; | ||
| + | } | ||
| + | /* HTML5 display-role reset for older browsers */ | ||
| − | + | article, | |
| − | + | aside, | |
| − | + | details, | |
| − | + | figcaption, | |
| − | + | figure, | |
| − | + | footer, | |
| − | + | header, | |
| − | + | hgroup, | |
| − | + | menu, | |
| − | + | nav, | |
| − | + | section, | |
| − | + | main { | |
| − | + | display: block; | |
| − | + | } | |
| − | + | ||
| − | + | 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; | ||
| + | } | ||
| + | /* -------------------------------- | ||
| + | |||
| + | Primary style | ||
| + | |||
| + | -------------------------------- */ | ||
| − | -------- | + | *, |
| − | + | *:after, | |
| − | + | *:before { | |
| − | + | -webkit-box-sizing: border-box; | |
| − | + | -moz-box-sizing: border-box; | |
| + | box-sizing: border-box; | ||
| + | } | ||
| − | + | body { | |
| − | + | font-size: 100%; | |
| − | + | font-family: "Source Sans Pro", sans-serif; | |
| − | + | color: rgba(2, 23, 37, 0.7); | |
| − | + | overflow: hidden; | |
| − | + | /*background: url("../img/cover.jpg") center no-repeat;*/ | |
| − | + | -webkit-background-size: cover; | |
| − | + | background-size: cover; | |
| − | + | background-color: gray; | |
| − | + | padding: 0; | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | body.overflow-hidden { | |
| − | + | /* when primary navigation is visible, the content in the background won't scroll */ | |
| − | + | overflow: hidden; | |
| − | + | } | |
| − | + | ||
| − | + | a { | |
| − | + | color: white; | |
| − | + | text-decoration: none; | |
| − | + | } | |
| − | + | ||
| − | + | a:hover, | |
| − | } | + | a:focus { |
| − | + | transform: translateY(0); | |
| − | + | } | |
| − | } | + | |
| − | + | a:visited { | |
| − | + | color: white; | |
| − | + | } | |
| − | + | /* -------------------------------- | |
| − | } | + | |
| + | Modules - reusable parts of our design | ||
| + | |||
| + | -------------------------------- */ | ||
| + | |||
| + | .cd-container { | ||
| + | /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */ | ||
| + | width: 90%; | ||
| + | max-width: 768px; | ||
| + | margin: 0 auto; | ||
| + | } | ||
| + | |||
| + | .cd-container:after { | ||
| + | content: ""; | ||
| + | display: table; | ||
| + | clear: both; | ||
| + | } | ||
| + | /* -------------------------------- | ||
| + | |||
| + | Main components | ||
| + | |||
| + | -------------------------------- */ | ||
| + | |||
| + | html, | ||
| + | body { | ||
| + | height: 100%; | ||
| + | overflow-y: visible; | ||
| + | } | ||
| − | + | .cd-header { | |
| − | + | position: fixed; | |
| − | + | top: 0; | |
| − | + | left: 0; | |
| − | + | /*响应式后最上条横杠的颜色*/ | |
| − | + | background: rgba(2, 23, 37, 0); | |
| − | + | height: 50px; | |
| − | + | width: 100%; | |
| − | + | z-index: 3; | |
| − | + | /*最上条横杠阴影*/ | |
| − | + | box-shadow: 0 1px 2px rgba(0, 0, 0, 0); | |
| − | + | -webkit-font-smoothing: antialiased; | |
| − | + | -moz-osx-font-smoothing: grayscale; | |
| − | + | } | |
| − | + | ||
| − | + | @media only screen and (min-width: 768px) { | |
| − | + | .cd-header { | |
| − | + | height: 80px; | |
| − | + | background: transparent; | |
| − | + | box-shadow: none; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| + | } | ||
| − | + | @media only screen and (min-width: 1170px) { | |
| − | + | .cd-header { | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | .cd- | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
-webkit-transition: background-color 0.3s; | -webkit-transition: background-color 0.3s; | ||
-moz-transition: background-color 0.3s; | -moz-transition: background-color 0.3s; | ||
transition: background-color 0.3s; | transition: background-color 0.3s; | ||
| − | /* | + | /* Force Hardware Acceleration in WebKit */ |
| − | + | -webkit-transform: translate3d(0, 0, 0); | |
| − | + | -moz-transform: translate3d(0, 0, 0); | |
| − | + | -ms-transform: translate3d(0, 0, 0); | |
| − | + | -o-transform: translate3d(0, 0, 0); | |
| − | + | transform: translate3d(0, 0, 0); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | -moz-transform: | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | -ms-transform: | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
-webkit-backface-visibility: hidden; | -webkit-backface-visibility: hidden; | ||
backface-visibility: hidden; | backface-visibility: hidden; | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| + | /* .cd-header.is-fixed { | ||
| + | /* when the user scrolls down, we hide the header right above the viewport */ | ||
| + | position: fixed; | ||
| + | /* top: -80px; */ | ||
| + | background-color: rgba(2, 23, 37, 0.96); | ||
| + | -webkit-transition: -webkit-transform 0.3s; | ||
| + | -moz-transition: -moz-transform 0.3s; | ||
| + | transition: transform 0.3s; | ||
| + | } | ||
| − | + | */ .cd-header.is-visible { | |
| − | + | /* if the user changes the scrolling direction, we show the header */ | |
| − | + | -webkit-transform: translate3d(0, 100%, 0); | |
| − | + | -moz-transform: translate3d(0, 100%, 0); | |
| − | + | -ms-transform: translate3d(0, 100%, 0); | |
| − | + | -o-transform: translate3d(0, 100%, 0); | |
| − | + | transform: translate3d(0, 100%, 0); | |
| − | + | } | |
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | .cd-header.menu-is-open { | |
| − | + | /* add a background color to the header when the navigation is open */ | |
| − | + | /*菜单打开后最上边那条横杠的颜色*/ | |
| − | + | background-color: rgba(2, 23, 37, 0); | |
| − | } | + | } |
| − | .cd- | + | } |
| − | + | .cd-logo { | |
| − | + | display: block; | |
| − | + | position: absolute; | |
| − | + | top: 50%; | |
| − | + | bottom: auto; | |
| − | + | /*-webkit-transform: translateY(-50%); | |
| − | + | -moz-transform: translateY(-50%); | |
| − | + | -ms-transform: translateY(-50%); | |
| − | + | -o-transform: translateY(-50%); | |
| + | transform: translateY(-50%);*/ | ||
| + | |||
| + | left: .875em; | ||
| + | } | ||
| + | .cd-logo img { | ||
| + | display: block; | ||
| + | } | ||
| + | @media only screen and (min-width: 768px) { | ||
| + | .cd-logo { | ||
| + | left: 2.6em; | ||
| + | } | ||
| + | } | ||
| + | .cd-secondary-nav { | ||
| + | position: absolute; | ||
| + | top: 50%; | ||
| + | bottom: auto; | ||
| + | /*-webkit-transform: translateY(-50%); | ||
| + | -moz-transform: translateY(-50%); | ||
| + | -ms-transform: translateY(-50%); | ||
| + | -o-transform: translateY(-50%); | ||
| + | transform: translateY(-50%);*/ | ||
| + | |||
| + | right: 10em; | ||
| + | /* hidden on small devices */ | ||
| + | |||
| + | display: none; | ||
| + | } | ||
| + | .cd-secondary-nav li { | ||
| + | display: inline-block; | ||
| + | margin-left: 2.2em; | ||
| + | } | ||
| + | .cd-secondary-nav a { | ||
| + | display: inline-block; | ||
| + | color: white; | ||
| + | text-transform: uppercase; | ||
| + | font-weight: 700; | ||
| + | } | ||
| + | @media only screen and (min-width: 768px) { | ||
| + | .cd-secondary-nav { | ||
| + | display: block; | ||
| + | } | ||
| + | } | ||
| + | .cd-primary-nav-trigger { | ||
| + | position: absolute; | ||
| + | right: 0; | ||
| + | top: 0; | ||
| + | height: 100%; | ||
| + | width: 50px; | ||
| + | /*响应缩进后三条杠的颜色*/ | ||
| − | + | background-color: rgba(2, 23, 37, 0); | |
| − | + | } | |
| + | .cd-primary-nav-trigger:hover { | ||
| + | position: fixed; | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | .cd-primary-nav-trigger .cd-menu-text { | ||
| + | position: absolute; | ||
| + | float: right; | ||
| + | rigth: 60px; | ||
| + | color: white; | ||
| + | text-transform: uppercase; | ||
| + | font-family: "Cambria"; | ||
| + | font-size: 18px; | ||
| + | /*font-weight: 50;*/ | ||
| + | /* hide the text on small devices */ | ||
| − | + | display: none; | |
| − | + | } | |
| − | + | .cd-primary-nav-trigger .cd-menu-icon { | |
| − | + | /* this span is the central line of the menu icon */ | |
| − | + | ||
| − | + | display: inline-block; | |
| − | + | 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: 28px; | ||
| + | height: 2px; | ||
| + | background-color: white; | ||
| + | -webkit-transition: background-color 0.3s; | ||
| + | -moz-transition: background-color 0.3s; | ||
| + | transition: background-color 0.3s; | ||
| + | /* these are the upper and lower lines in the menu icon */ | ||
| + | } | ||
| + | .cd-primary-nav-trigger .cd-menu-icon::before, | ||
| + | .cd-primary-nav-trigger .cd-menu-icon:after { | ||
| + | content: ''; | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | position: absolute; | ||
| + | background-color: white; | ||
| + | right: 0; | ||
| + | -webkit-transition: -webkit-transform .3s, top .3s, background-color 0s; | ||
| + | -moz-transition: -moz-transform .3s, top .3s, background-color 0s; | ||
| + | transition: transform .3s, top .3s, background-color 0s; | ||
| + | } | ||
| + | .cd-primary-nav-trigger .cd-menu-icon::before { | ||
| + | top: -5px; | ||
| + | } | ||
| + | .cd-primary-nav-trigger .cd-menu-icon::after { | ||
| + | top: 5px; | ||
| + | } | ||
| + | .cd-primary-nav-trigger .cd-menu-icon.is-clicked { | ||
| + | background-color: rgba(255, 255, 255, 0); | ||
| + | } | ||
| + | .cd-primary-nav-trigger .cd-menu-icon.is-clicked::before, | ||
| + | .cd-primary-nav-trigger .cd-menu-icon.is-clicked::after { | ||
| + | background-color: white; | ||
| + | } | ||
| + | .cd-primary-nav-trigger .cd-menu-icon.is-clicked::before { | ||
| + | top: 0; | ||
| + | -webkit-transform: rotate(135deg); | ||
| + | -moz-transform: rotate(135deg); | ||
| + | -ms-transform: rotate(135deg); | ||
| + | -o-transform: rotate(135deg); | ||
| + | transform: rotate(135deg); | ||
| + | } | ||
| + | .cd-primary-nav-trigger .cd-menu-icon.is-clicked::after { | ||
| + | top: 0; | ||
| + | -webkit-transform: rotate(225deg); | ||
| + | -moz-transform: rotate(225deg); | ||
| + | -ms-transform: rotate(225deg); | ||
| + | -o-transform: rotate(225deg); | ||
| + | transform: rotate(225deg); | ||
| + | } | ||
| + | @media only screen and (min-width: 768px) { | ||
| + | .cd-primary-nav-trigger { | ||
| + | width: 100px; | ||
| + | padding-left: 0em; | ||
| + | background-color: transparent; | ||
| + | height: 30px; | ||
| + | line-height: 30px; | ||
| + | /*菜单栏整体位置*/ | ||
| + | left: 6vw; | ||
| + | top: 12vh; | ||
| + | bottom: auto; | ||
| + | /*-webkit-transform: translateY(-50%); | ||
| + | -moz-transform: translateY(-50%); | ||
| + | -ms-transform: translateY(-50%); | ||
| + | -o-transform: translateY(-50%); | ||
| + | transform: translateY(-50%); */ | ||
| + | } | ||
| + | |||
| + | .cd-primary-nav-trigger .cd-menu-text { | ||
| + | display: inline-block; | ||
| + | } | ||
| + | |||
| + | .cd-primary-nav-trigger .cd-menu-icon { | ||
| + | left: auto; | ||
| + | right: 1em; | ||
| + | /*-webkit-transform: translateX(0) translateY(-50%); | ||
| + | -moz-transform: translateX(0) translateY(-50%); | ||
| + | -ms-transform: translateX(0) translateY(-50%); | ||
| + | -o-transform: translateX(0) translateY(-50%); | ||
| + | transform: translateX(0) translateY(-50%);*/ | ||
| + | } | ||
| + | } | ||
| + | .cd-primary-nav { | ||
| + | /* by default it's hidden - on top of the viewport */ | ||
| + | |||
| + | color: white; | ||
| + | position: fixed; | ||
| + | margin: 0vh 0vw 0vh 0vw; | ||
| + | height: 100%; | ||
| + | width: 100%; | ||
| + | font-family: "Cambria"; | ||
| + | /*菜单下来后的背景色*/ | ||
| + | /*background: rgba(2, 23, 37, 0.8);*/ | ||
| + | |||
| + | background: rgba(0, 0, 0, 0.7); | ||
| + | z-index: 2; | ||
| + | text-align: center; | ||
| + | padding: 50px 0; | ||
| + | -webkit-backface-visibility: hidden; | ||
| + | backface-visibility: hidden; | ||
| + | overflow: auto; | ||
| + | /* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */ | ||
| + | |||
| + | -webkit-overflow-scrolling: touch; | ||
| + | -webkit-transform: translateY(-100%); | ||
| + | -moz-transform: translateY(-100%); | ||
| + | -ms-transform: translateY(-100%); | ||
| + | -o-transform: translateY(-100%); | ||
| + | transform: translateY(-100%); | ||
| + | -webkit-transition-property: -webkit-transform; | ||
| + | -moz-transition-property: -moz-transform; | ||
| + | transition-property: transform; | ||
| + | -webkit-transition-duration: 0.4s; | ||
| + | -moz-transition-duration: 0.4s; | ||
| + | transition-duration: 0.4s; | ||
| + | } | ||
| + | .cd-primary-nav li { | ||
| + | font-size: 22px; | ||
| + | font-size: 1.375rem; | ||
| + | font-weight: 300; | ||
| + | -webkit-font-smoothing: antialiased; | ||
| + | -moz-osx-font-smoothing: grayscale; | ||
| + | margin: .2em 0; | ||
| + | text-transform: capitalize; | ||
| + | /*text-transform: uppercase;*/ | ||
| + | } | ||
| + | .cd-primary-nav a { | ||
| + | display: inline-block; | ||
| + | padding: .4em 1em; | ||
| + | border-radius: 0.25em; | ||
| + | -webkit-transition: background 0.2s; | ||
| + | -moz-transition: background 0.2s; | ||
| + | transition: background 0.2s, color 0.2s; | ||
| + | } | ||
| + | .no-touch .cd-primary-nav a:hover { | ||
| + | background-color: white; | ||
| + | color: black; | ||
| + | } | ||
| + | #cd-primary-naver a:hover { | ||
| + | background-color: white; | ||
| + | color: black; | ||
| + | } | ||
| + | .cd-primary-nav .cd-label { | ||
| + | color: rgba(200, 40, 255, 1); | ||
| + | /*color: rgba(142,255,255,1);*/ | ||
| + | |||
| + | text-transform: uppercase; | ||
| + | font-weight: 700; | ||
| + | font-size: 14px; | ||
| + | font-size: 0.875rem; | ||
| + | margin: 2.4em 0 .8em; | ||
| + | } | ||
| + | .cd-primary-nav .cd-social { | ||
| + | display: inline-block; | ||
| + | margin: 0 .4em; | ||
| + | } | ||
| + | .cd-primary-nav .cd-social a { | ||
| + | width: 44px; | ||
| + | height: 44px; | ||
| + | padding: 0; | ||
| + | background-image: url("../img/cd-socials.svg"); | ||
| + | background-repeat: no-repeat; | ||
| + | /* image replacement */ | ||
| + | |||
| + | overflow: hidden; | ||
| + | text-indent: 100%; | ||
| + | white-space: nowrap; | ||
| + | } | ||
| + | .cd-primary-nav .cd-facebook a { | ||
| + | background-position: 0 0; | ||
| + | } | ||
| + | .cd-primary-nav .cd-instagram a { | ||
| + | background-position: -44px 0; | ||
| + | } | ||
| + | .cd-primary-nav .cd-dribbble a { | ||
| + | background-position: -88px 0; | ||
| + | } | ||
| + | .cd-primary-nav .cd-twitter a { | ||
| + | background-position: -132px 0; | ||
| + | } | ||
| + | .cd-primary-nav.is-visible { | ||
| + | -webkit-transform: translateY(0); | ||
| + | -moz-transform: translateY(0); | ||
| + | -ms-transform: translateY(0); | ||
| + | -o-transform: translateY(0); | ||
| + | transform: translateY(0); | ||
| + | } | ||
| + | @media only screen and (min-width: 768px) { | ||
| + | .cd-primary-nav { | ||
| + | padding: 80px 0; | ||
| + | } | ||
| + | } | ||
| + | @media only screen and (min-width: 1170px) { | ||
| + | .cd-primary-nav li { | ||
| + | font-size: 30px; | ||
| + | font-size: 1.875rem; | ||
| + | } | ||
| + | |||
| + | .cd-primary-nav .cd-label { | ||
| + | font-size: 16px; | ||
| + | font-size: 1rem; | ||
| + | } | ||
| + | } | ||
| + | @media only screen and (min-width: 768px) { | ||
| + | .cd-intro h1 { | ||
| + | font-size: 30px; | ||
| + | font-size: 1.875rem; | ||
| + | } | ||
| + | } | ||
| + | @media only screen and (min-width: 1170px) { | ||
| + | .cd-intro { | ||
| + | height: 700px; | ||
| + | } | ||
| + | } | ||
| + | .cd-main-content { | ||
| + | position: relative; | ||
| + | z-index: 1; | ||
| + | margin-top: 4vw; | ||
| + | } | ||
| + | .cd-main-content p { | ||
| + | line-height: 1.6; | ||
| + | margin: 2em 0; | ||
| + | } | ||
| + | @media only screen and (min-width: 1170px) { | ||
| + | .cd-main-content p { | ||
| + | font-size: 20px; | ||
| + | font-size: 1.25rem; | ||
| + | } | ||
| + | } | ||
| + | </style> | ||
| + | </head> | ||
| − | + | <body> | |
| − | + | <div id="indexMenu" style="width=100vw"> | |
| − | + | <header class="cd-header"> | |
| − | + | <div id="menuButtom"> | |
| − | + | <a class="cd-primary-nav-trigger" href="#0"> | |
| + | <span class="cd-menu-text">Menu</span><span class="cd-menu-icon"></span> | ||
| + | </a> | ||
| + | </div> | ||
| + | <!-- cd-primary-nav-trigger --> | ||
| + | </header> | ||
| − | + | <nav id="cd-primary-naver"> | |
| − | + | <ul class="cd-primary-nav"> | |
| + | <li><br><br></li> | ||
| + | <li><a href="https://2019.igem.org/Team:Tongji_Software">HOME</a></li> | ||
| + | <li class="cd-label">About Us</li> | ||
| − | + | <li><a href="#0">Team Information</a></li> | |
| − | + | <li><a href="#0">Our Projects</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="https://2019.igem.org/Team:Tongji_Software/Public_Engagement">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> | ||
| + | </nav> | ||
| − | + | ||
| − | + | <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> | |
| − | + | <!-- Resource jQuery --> | |
| + | |||
| + | <div id="foot"></div> | ||
</div> | </div> | ||
| − | + | <!-- <div style="position:absolute; margin-top:30vh; height:10vh; width:100vw; background-color:white"></div>--> | |
</body> | </body> | ||
| + | |||
</html> | </html> | ||
Revision as of 13:20, 8 October 2019