Difference between revisions of "Template:Tongji Software/dist/ProjectIndex html"

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

Revision as of 15:56, 6 October 2019

Tongji Software | Pathlab

PROJECT