|
|
Line 111: |
Line 111: |
| | | |
| } | | } |
− | /* --------------------------------
| |
− |
| |
− | Primary style
| |
− |
| |
− | -------------------------------- */
| |
− | *, *::after, *::before {
| |
− | box-sizing: border-box;
| |
− | }
| |
− |
| |
− | html {
| |
− | font-size: 62.5%;
| |
− | }
| |
− |
| |
− | body {
| |
− | font-size: 1.6rem;
| |
− | font-family: "Fira Sans", sans-serif;
| |
− | color: #383838;
| |
− | background-color: #f8f8f8;
| |
− | }
| |
− |
| |
− | a {
| |
− | color: #491A06;
| |
− | text-decoration: none;
| |
− | }
| |
− |
| |
− | /* --------------------------------
| |
− |
| |
− | Main Components
| |
− |
| |
− | -------------------------------- */
| |
− | .cd-horizontal-timeline {
| |
− | opacity: 0;
| |
− | margin: 2em auto;
| |
− | -webkit-transition: opacity 0.2s;
| |
− | -moz-transition: opacity 0.2s;
| |
− | transition: opacity 0.2s;
| |
− | }
| |
− | .cd-horizontal-timeline::before {
| |
− | /* never visible - this is used in jQuery to check the current MQ */
| |
− | content: 'mobile';
| |
− | display: none;
| |
− | }
| |
− | .cd-horizontal-timeline.loaded {
| |
− | /* show the timeline after events position has been set (using JavaScript) */
| |
− | opacity: 1;
| |
− | }
| |
− | .cd-horizontal-timeline .timeline {
| |
− | position: relative;
| |
− | height: 100px;
| |
− | width: 90%;
| |
− | max-width: 800px;
| |
− | margin: 0 auto;
| |
− | }
| |
− | .cd-horizontal-timeline .events-wrapper {
| |
− | position: relative;
| |
− | height: 100%;
| |
− | margin: 0 40px;
| |
− | overflow: hidden;
| |
− | }
| |
− | .cd-horizontal-timeline .events-wrapper::after, .cd-horizontal-timeline .events-wrapper::before {
| |
− | /* these are used to create a shadow effect at the sides of the timeline */
| |
− | content: '';
| |
− | position: absolute;
| |
− | z-index: 2;
| |
− | top: 0;
| |
− | height: 100%;
| |
− | width: 20px;
| |
− | }
| |
− | .cd-horizontal-timeline .events-wrapper::before {
| |
− | left: 0;
| |
− | background-image: -webkit-linear-gradient( left , #f8f8f8, rgba(248, 248, 248, 0));
| |
− | background-image: linear-gradient(to right, #f8f8f8, rgba(248, 248, 248, 0));
| |
− | }
| |
− | .cd-horizontal-timeline .events-wrapper::after {
| |
− | right: 0;
| |
− | background-image: -webkit-linear-gradient( right , #f8f8f8, rgba(248, 248, 248, 0));
| |
− | background-image: linear-gradient(to left, #f8f8f8, rgba(248, 248, 248, 0));
| |
− | }
| |
− | .cd-horizontal-timeline .events {
| |
− | /* this is the grey line/timeline */
| |
− | position: absolute;
| |
− | z-index: 1;
| |
− | left: 0;
| |
− | top: 49px;
| |
− | height: 2px;
| |
− | /* width will be set using JavaScript */
| |
− | background: #dfdfdf;
| |
− | -webkit-transition: -webkit-transform 0.4s;
| |
− | -moz-transition: -moz-transform 0.4s;
| |
− | transition: transform 0.4s;
| |
− | }
| |
− | .cd-horizontal-timeline .filling-line {
| |
− | /* this is used to create the green line filling the timeline */
| |
− | position: absolute;
| |
− | z-index: 1;
| |
− | left: 0;
| |
− | top: 0;
| |
− | height: 100%;
| |
− | width: 100%;
| |
− | background-color: #491A06;
| |
− | -webkit-transform: scaleX(0);
| |
− | -moz-transform: scaleX(0);
| |
− | -ms-transform: scaleX(0);
| |
− | -o-transform: scaleX(0);
| |
− | transform: scaleX(0);
| |
− | -webkit-transform-origin: left center;
| |
− | -moz-transform-origin: left center;
| |
− | -ms-transform-origin: left center;
| |
− | -o-transform-origin: left center;
| |
− | transform-origin: left center;
| |
− | -webkit-transition: -webkit-transform 0.3s;
| |
− | -moz-transition: -moz-transform 0.3s;
| |
− | transition: transform 0.3s;
| |
− | }
| |
− | .cd-horizontal-timeline .events a {
| |
− | position: absolute;
| |
− | bottom: 0;
| |
− | z-index: 2;
| |
− | text-align: center;
| |
− | font-size: 1.3rem;
| |
− | padding-bottom: 15px;
| |
− | color: #383838;
| |
− | /* fix bug on Safari - text flickering while timeline translates */
| |
− | -webkit-transform: translateZ(0);
| |
− | -moz-transform: translateZ(0);
| |
− | -ms-transform: translateZ(0);
| |
− | -o-transform: translateZ(0);
| |
− | transform: translateZ(0);
| |
− | }
| |
− | .cd-horizontal-timeline .events a::after {
| |
− | /* this is used to create the event spot */
| |
− | content: '';
| |
− | 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: -5px;
| |
− | height: 12px;
| |
− | width: 12px;
| |
− | border-radius: 50%;
| |
− | border: 2px solid #dfdfdf;
| |
− | background-color: #f8f8f8;
| |
− | -webkit-transition: background-color 0.3s, border-color 0.3s;
| |
− | -moz-transition: background-color 0.3s, border-color 0.3s;
| |
− | transition: background-color 0.3s, border-color 0.3s;
| |
− | }
| |
− | .no-touch .cd-horizontal-timeline .events a:hover::after {
| |
− | background-color: #491A06;
| |
− | border-color: #491A06;
| |
− | }
| |
− | .cd-horizontal-timeline .events a.selected {
| |
− | pointer-events: none;
| |
− | }
| |
− | .cd-horizontal-timeline .events a.selected::after {
| |
− | background-color: #491A06;
| |
− | border-color: #491A06;
| |
− | }
| |
− | .cd-horizontal-timeline .events a.older-event::after {
| |
− | border-color: #491A06;
| |
− | }
| |
− | @media only screen and (min-width: 1100px) {
| |
− | .cd-horizontal-timeline {
| |
− | margin: 6em auto;
| |
− | }
| |
− | .cd-horizontal-timeline::before {
| |
− | /* never visible - this is used in jQuery to check the current MQ */
| |
− | content: 'desktop';
| |
− | }
| |
− | }
| |
− |
| |
− | .cd-timeline-navigation a {
| |
− | /* these are the left/right arrows to navigate the timeline */
| |
− | position: absolute;
| |
− | z-index: 1;
| |
− | top: 50%;
| |
− | bottom: auto;
| |
− | -webkit-transform: translateY(-50%);
| |
− | -moz-transform: translateY(-50%);
| |
− | -ms-transform: translateY(-50%);
| |
− | -o-transform: translateY(-50%);
| |
− | transform: translateY(-50%);
| |
− | height: 34px;
| |
− | width: 34px;
| |
− | border-radius: 50%;
| |
− | border: 2px solid #dfdfdf;
| |
− | /* replace text with an icon */
| |
− | overflow: hidden;
| |
− | color: transparent;
| |
− | text-indent: 100%;
| |
− | white-space: nowrap;
| |
− | -webkit-transition: border-color 0.3s;
| |
− | -moz-transition: border-color 0.3s;
| |
− | transition: border-color 0.3s;
| |
− | }
| |
− | .cd-timeline-navigation a::after {
| |
− | /* arrow icon */
| |
− | content: '';
| |
− | position: absolute;
| |
− | height: 16px;
| |
− | width: 16px;
| |
− | 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%);
| |
− | background: url(https://static.igem.org/mediawiki/2017/a/a1/NJU_China_iGEM_2017_calendar_cd-arrow.svg) no-repeat 0 0;
| |
− | }
| |
− | .cd-timeline-navigation a.prev {
| |
− | left: 0;
| |
− | -webkit-transform: translateY(-50%) rotate(180deg);
| |
− | -moz-transform: translateY(-50%) rotate(180deg);
| |
− | -ms-transform: translateY(-50%) rotate(180deg);
| |
− | -o-transform: translateY(-50%) rotate(180deg);
| |
− | transform: translateY(-50%) rotate(180deg);
| |
− | }
| |
− | .cd-timeline-navigation a.next {
| |
− | right: 0;
| |
− | }
| |
− | .no-touch .cd-timeline-navigation a:hover {
| |
− | border-color: #491A06;
| |
− | }
| |
− | .cd-timeline-navigation a.inactive {
| |
− | cursor: not-allowed;
| |
− | }
| |
− | .cd-timeline-navigation a.inactive::after {
| |
− | background-position: 0 -16px;
| |
− | }
| |
− | .no-touch .cd-timeline-navigation a.inactive:hover {
| |
− | border-color: #dfdfdf;
| |
− | }
| |
− |
| |
− | .cd-horizontal-timeline .events-content {
| |
− | position: relative;
| |
− | width: 100%;
| |
− | margin: 2em 0;
| |
− | overflow: hidden;
| |
− | -webkit-transition: height 0.4s;
| |
− | -moz-transition: height 0.4s;
| |
− | transition: height 0.4s;
| |
− | }
| |
− | .cd-horizontal-timeline .events-content li {
| |
− | position: absolute;
| |
− | z-index: 1;
| |
− | width: 100%;
| |
− | left: 0;
| |
− | top: 0;
| |
− | -webkit-transform: translateX(-100%);
| |
− | -moz-transform: translateX(-100%);
| |
− | -ms-transform: translateX(-100%);
| |
− | -o-transform: translateX(-100%);
| |
− | transform: translateX(-100%);
| |
− | padding: 0 5%;
| |
− | opacity: 0;
| |
− | -webkit-animation-duration: 0.4s;
| |
− | -moz-animation-duration: 0.4s;
| |
− | animation-duration: 0.4s;
| |
− | -webkit-animation-timing-function: ease-in-out;
| |
− | -moz-animation-timing-function: ease-in-out;
| |
− | animation-timing-function: ease-in-out;
| |
− | }
| |
− | .cd-horizontal-timeline .events-content li.selected {
| |
− | /* visible event content */
| |
− | position: relative;
| |
− | z-index: 2;
| |
− | opacity: 1;
| |
− | -webkit-transform: translateX(0);
| |
− | -moz-transform: translateX(0);
| |
− | -ms-transform: translateX(0);
| |
− | -o-transform: translateX(0);
| |
− | transform: translateX(0);
| |
− | }
| |
− | .cd-horizontal-timeline .events-content li.enter-right, .cd-horizontal-timeline .events-content li.leave-right {
| |
− | -webkit-animation-name: cd-enter-right;
| |
− | -moz-animation-name: cd-enter-right;
| |
− | animation-name: cd-enter-right;
| |
− | }
| |
− | .cd-horizontal-timeline .events-content li.enter-left, .cd-horizontal-timeline .events-content li.leave-left {
| |
− | -webkit-animation-name: cd-enter-left;
| |
− | -moz-animation-name: cd-enter-left;
| |
− | animation-name: cd-enter-left;
| |
− | }
| |
− | .cd-horizontal-timeline .events-content li.leave-right, .cd-horizontal-timeline .events-content li.leave-left {
| |
− | -webkit-animation-direction: reverse;
| |
− | -moz-animation-direction: reverse;
| |
− | animation-direction: reverse;
| |
− | }
| |
− | .cd-horizontal-timeline .events-content li > * {
| |
− | max-width: 800px;
| |
− | margin: 0 auto;
| |
− | }
| |
− | .cd-horizontal-timeline .events-content h2 {
| |
− | font-weight: bold;
| |
− | font-size: 15px;
| |
− | font-family: proxima-nova,"Arial",Helvetica,sans-serif,"Playfair Display", serif;
| |
− | font-weight: 300;
| |
− | line-height: 1.2;
| |
− | color: #2B1D08;
| |
− | }
| |
− | .cd-horizontal-timeline .events-content em {
| |
− | display: block;
| |
− | font-style: italic;
| |
− | margin: 24px auto;
| |
− | }
| |
− | .cd-horizontal-timeline .events-content em::before {
| |
− | content: '- ';
| |
− | }
| |
− | .cd-horizontal-timeline .events-content p {
| |
− | font-size: 1.4rem;
| |
− | color: #270D00;
| |
− | }
| |
− | .cd-horizontal-timeline .events-content em, .cd-horizontal-timeline .events-content p {
| |
− | line-height: 1.6;
| |
− | }
| |
− | @media only screen and (min-width: 768px) {
| |
− | .cd-horizontal-timeline .events-content h2 {
| |
− | font-size: 4.5rem;
| |
− | }
| |
− | .cd-horizontal-timeline .events-content em {
| |
− | font-size: 3.0rem;
| |
− | }
| |
− | .cd-horizontal-timeline .events-content p {
| |
− | font-size: 2.0rem;
| |
− | }
| |
− | }
| |
− |
| |
− | @-webkit-keyframes cd-enter-right {
| |
− | 0% {
| |
− | opacity: 0;
| |
− | -webkit-transform: translateX(100%);
| |
− | }
| |
− | 100% {
| |
− | opacity: 1;
| |
− | -webkit-transform: translateX(0%);
| |
− | }
| |
− | }
| |
− | @-moz-keyframes cd-enter-right {
| |
− | 0% {
| |
− | opacity: 0;
| |
− | -moz-transform: translateX(100%);
| |
− | }
| |
− | 100% {
| |
− | opacity: 1;
| |
− | -moz-transform: translateX(0%);
| |
− | }
| |
− | }
| |
− | @keyframes cd-enter-right {
| |
− | 0% {
| |
− | opacity: 0;
| |
− | -webkit-transform: translateX(100%);
| |
− | -moz-transform: translateX(100%);
| |
− | -ms-transform: translateX(100%);
| |
− | -o-transform: translateX(100%);
| |
− | transform: translateX(100%);
| |
− | }
| |
− | 100% {
| |
− | opacity: 1;
| |
− | -webkit-transform: translateX(0%);
| |
− | -moz-transform: translateX(0%);
| |
− | -ms-transform: translateX(0%);
| |
− | -o-transform: translateX(0%);
| |
− | transform: translateX(0%);
| |
− | }
| |
− | }
| |
− | @-webkit-keyframes cd-enter-left {
| |
− | 0% {
| |
− | opacity: 0;
| |
− | -webkit-transform: translateX(-100%);
| |
− | }
| |
− | 100% {
| |
− | opacity: 1;
| |
− | -webkit-transform: translateX(0%);
| |
− | }
| |
− | }
| |
− | @-moz-keyframes cd-enter-left {
| |
− | 0% {
| |
− | opacity: 0;
| |
− | -moz-transform: translateX(-100%);
| |
− | }
| |
− | 100% {
| |
− | opacity: 1;
| |
− | -moz-transform: translateX(0%);
| |
− | }
| |
− | }
| |
− | @keyframes cd-enter-left {
| |
− | 0% {
| |
− | opacity: 0;
| |
− | -webkit-transform: translateX(-100%);
| |
− | -moz-transform: translateX(-100%);
| |
− | -ms-transform: translateX(-100%);
| |
− | -o-transform: translateX(-100%);
| |
− | transform: translateX(-100%);
| |
− | }
| |
− | 100% {
| |
− | opacity: 1;
| |
− | -webkit-transform: translateX(0%);
| |
− | -moz-transform: translateX(0%);
| |
− | -ms-transform: translateX(0%);
| |
− | -o-transform: translateX(0%);
| |
− | transform: translateX(0%);
| |
− | }
| |
− | }
| |
− |
| |
| </style> | | </style> |
| </head> | | </head> |