|
|
| Line 1: |
Line 1: |
| | <html> | | <html> |
| − | <style>@import url("https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i"); | + | <style>@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i') |
| − | @import url("https://use.fontawesome.com/releases/v5.4.1/css/all.css"); | + | @import url('https://use.fontawesome.com/releases/v5.4.1/css/all.css') |
| − | html, body {
| + | |
| − | font-family: 'Roboto';
| + | |
| − | margin: 0;
| + | |
| − | padding: 0; }
| + | |
| | | | |
| − | header, footer, nav {
| + | $color-hover: hsla(0, 0%, 0%, 0.2) |
| − | display: block; }
| + | $color-bg-main: #181e33 |
| | + | $color-fg-main: #dde5ee |
| | + | $color-bg-dark: black |
| | + | $color-fg-light: white |
| | | | |
| − | div, a, ul, li, header, footer, nav, section {
| + | $color-highlight: #50b1be |
| − | box-sizing: border-box; }
| + | $color-highlight-red: #ea2d30 |
| | | | |
| − | a {
| + | $header-height: 80px |
| − | cursor: pointer; }
| + | |
| | | | |
| − | .cols::after, .experiment::after, header.header::after, #process .content::after, #molecule .map .card::after, .notebook .images-two::after, .notebook .images-height::after, .notebook .event .details::after, .clearfix::after {
| |
| − | content: '';
| |
| − | display: table;
| |
| − | clear: both; }
| |
| | | | |
| − | .cols, header.header .menu, header.header .menu .submenu {
| + | =box-glow($color) |
| − | list-style-type: none;
| + | box-shadow: 0 0 5px #fff, 0 0 10px $color, 0 0 15px $color, 0 0 17px $color, 0 0 30px $color |
| − | padding: 0;
| + | |
| − | margin: 0; }
| + | |
| | | | |
| − | .cols > li {
| + | =box-glow-bottom($color) |
| − | float: left; }
| + | box-shadow: 0 5px 5px -5px #fff, 0 10px 10px -10px $color, 0 15px 15px -15px $color, 0 17px 17px -17px $color, 0 30px 30px -30px $color |
| | | | |
| − | .content {
| + | =text-glow($color) |
| − | margin: 0 auto; }
| + | text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px $color, 0 0 35px $color, 0 0 40px $color, 0 0 50px $color, 0 0 75px $color |
| | + | |
| | + | html, body |
| | + | font-family: 'Roboto' |
| | + | font-size: 16px |
| | + | background-color: $color-bg-main |
| | + | min-height: 100% |
| | | | |
| − | .narrow .content {
| + | body |
| − | width: 768px; }
| + | h2,h2,h3,h4 |
| | + | color: $color-fg-main |
| | + | font-family: 'Roboto' !important; |
| | | | |
| − | .cols {
| + | li |
| − | margin: 0 -2%; }
| + | margin-bottom: 0 |
| − | .cols.inset {
| + | |
| − | margin: 0 2%; }
| + | |
| − | .cols .col {
| + | |
| − | float: left;
| + | |
| − | margin: 0 2%; }
| + | |
| − | .cols .col img {
| + | |
| − | max-width: 100%; }
| + | |
| − | .cols .col.half {
| + | |
| − | width: 46%; }
| + | |
| − | .cols .col.third {
| + | |
| − | width: 29.3%; }
| + | |
| − | .cols .col.two-thirds {
| + | |
| − | width: 62.6%; }
| + | |
| − | .cols .col.quarter {
| + | |
| − | width: 21%; }
| + | |
| − | .cols .col.five-twelfth {
| + | |
| − | width: 37.6%; }
| + | |
| | | | |
| − | html, body {
| + | h2, .article h2 |
| − | font-family: 'Roboto';
| + | text-align: center |
| − | font-size: 16px;
| + | font-weight: 100 |
| − | background-color: #181e33;
| + | font-size: 36px |
| − | min-height: 100%; }
| + | |
| | | | |
| − | body h2, body h2, body h3, body h4 {
| |
| − | color: #dde5ee;
| |
| − | font-family: 'Roboto' !important; }
| |
| | | | |
| − | body li {
| + | .banner |
| − | margin-bottom: 0; }
| + | padding: 20px 0 0 |
| | + | .title |
| | + | padding: 30px |
| | + | font-size: 100px |
| | + | font-weight: 100 |
| | + | color: $color-fg-main |
| | + | text-align: center |
| | | | |
| − | h2, .article h2 {
| + | @media (max-width: 1024px) |
| − | text-align: center;
| + | padding-top: 50px |
| − | font-weight: 100;
| + | .title |
| − | font-size: 36px; }
| + | font-size: 60px |
| | | | |
| − | .banner {
| |
| − | padding: 20px 0 0; }
| |
| − | .banner .title {
| |
| − | padding: 30px;
| |
| − | font-size: 100px;
| |
| − | font-weight: 100;
| |
| − | color: #dde5ee;
| |
| − | text-align: center; }
| |
| − | @media (max-width: 1024px) {
| |
| − | .banner {
| |
| − | padding-top: 50px; }
| |
| − | .banner .title {
| |
| − | font-size: 60px; } }
| |
| | | | |
| − | .article { | + | .article |
| − | color: #dde5ee;
| + | color: $color-fg-main |
| − | padding-bottom: 60px;
| + | padding-bottom: 60px |
| − | font-size: 18px; }
| + | font-size: 18px |
| − | .article p, .article li {
| + | |
| − | text-align: justify; }
| + | |
| − | .article h2, .article p {
| + | |
| − | margin: 0; }
| + | |
| − | .article h2, .article p, .article ol, .article ul {
| + | |
| − | margin-top: 0;
| + | |
| − | margin-bottom: 0;
| + | |
| − | padding: 0 0 30px; }
| + | |
| − | .article h2 {
| + | |
| − | padding-top: 20px; }
| + | |
| − | .article h3 {
| + | |
| − | text-align: center; }
| + | |
| − | .article a {
| + | |
| − | color: #50b1be;
| + | |
| − | text-decoration: none; }
| + | |
| − | .article a.reference {
| + | |
| − | font-size: 12px;
| + | |
| − | vertical-align: super;
| + | |
| − | padding: 0px 0px; } | + | |
| − | .article img {
| + | |
| − | max-width: 100%; }
| + | |
| − | .article ol.fancy.cols {
| + | |
| − | margin-left: -2%; | + | |
| − | margin-right: -2%; }
| + | |
| − | .article ol.fancy {
| + | |
| − | list-style-type: none;
| + | |
| − | counter-reset: ol-counter;
| + | |
| − | margin: 0; }
| + | |
| − | .article ol.fancy li {
| + | |
| − | counter-increment: ol-counter;
| + | |
| − | padding: 0px 0px 10px; }
| + | |
| − | .article ol.fancy li::before {
| + | |
| − | box-shadow: 0 0 5px #50b1be;
| + | |
| − | content: counter(ol-counter);
| + | |
| − | background-color: #75c2cc;
| + | |
| − | border-radius: 100%;
| + | |
| − | color: #181e33;
| + | |
| − | font-weight: 900;
| + | |
| − | font-size: 16px;
| + | |
| − | padding: 1px 6px 0px;
| + | |
| − | line-height: 20px;
| + | |
| − | margin: 1px 10px 4px 0;
| + | |
| − | float: left; }
| + | |
| − | .article ol.fancy li::after {
| + | |
| − | content: '';
| + | |
| − | clear: both;
| + | |
| − | display: table; }
| + | |
| − | .article .references {
| + | |
| − | padding-left: 18px;
| + | |
| − | margin: 0; }
| + | |
| − | .article .references li {
| + | |
| − | padding-left: 10px; }
| + | |
| | | | |
| − | .hr {
| + | p, li |
| − | width: 100%;
| + | text-align: justify |
| − | height: 1px;
| + | |
| − | background-color: #dde5ee;
| + | h2, p |
| − | margin: 30px 0; }
| + | margin: 0 |
| | | | |
| − | .figure {
| + | h2,p, ol, ul |
| − | width: 100%;
| + | margin-top: 0 |
| − | padding-bottom: 30px; }
| + | margin-bottom: 0 |
| − | .figure img {
| + | padding: 0 0 30px |
| − | width: 100%; }
| + | |
| − | .figure .caption {
| + | |
| − | padding: 3px 0;
| + | |
| − | font-size: 14px;
| + | |
| − | text-align: center; }
| + | |
| | | | |
| − | .col .figure {
| + | h2 |
| − | padding-bottom: 0; }
| + | padding-top: 20px |
| | + | h3 |
| | + | text-align: center |
| | + | a |
| | + | color: $color-highlight |
| | + | text-decoration: none |
| | + | |
| | + | a.reference |
| | + | font-size: 12px |
| | + | vertical-align: super |
| | + | padding: 0px 0px |
| | | | |
| − | .text-glow-red {
| + | img |
| − | text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ea2d30, 0 0 35px #ea2d30, 0 0 40px #ea2d30, 0 0 50px #ea2d30, 0 0 75px #ea2d30; }
| + | max-width: 100% |
| | | | |
| − | .text-glow-blue { | + | ol.fancy.cols |
| − | text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #50b1be, 0 0 35px #50b1be, 0 0 40px #50b1be, 0 0 50px #50b1be, 0 0 75px #50b1be; }
| + | margin-left: -2% |
| | + | margin-right: -2% |
| | | | |
| − | .card { | + | ol.fancy |
| − | background-color: #181e33;
| + | list-style-type: none |
| − | color: #dde5ee; }
| + | counter-reset: ol-counter |
| | + | margin: 0 |
| | + | |
| | + | li |
| | + | counter-increment: ol-counter |
| | + | padding: 0px 0px 10px |
| | | | |
| − | .attrib ul {
| + | &::before |
| − | list-style-type: none;
| + | box-shadow: 0 0 5px $color-highlight |
| − | margin: 0; }
| + | content: counter(ol-counter) |
| − | .attrib ul li {
| + | background-color: lighten($color-highlight, 10%) |
| − | padding: 3px 0;
| + | border-radius: 100% |
| − | line-height: 30px; }
| + | color: $color-bg-main |
| − | .attrib ul li::before {
| + | font-weight: 900 |
| − | box-shadow: 0 0 5px #50b1be;
| + | font-size: 16px |
| − | content: '';
| + | padding: 1px 6px 0px |
| − | background-color: #75c2cc;
| + | line-height: 20px |
| − | border-radius: 100%;
| + | margin: 1px 10px 4px 0 |
| − | color: #181e33;
| + | float: left; |
| − | font-weight: 900;
| + | |
| − | padding: 3px;
| + | &::after |
| − | line-height: 20px;
| + | content: '' |
| − | margin: 12px 10px 0px 0;
| + | clear: both |
| − | float: left; }
| + | display: table |
| − | .attrib ul li::after {
| + | .references |
| − | content: '';
| + | padding-left: 18px |
| − | clear: both;
| + | margin: 0 |
| − | display: table; }
| + | li |
| − | .attrib ul .name { | + | padding-left: 10px |
| − | font-weight: 900; } | + | .hr |
| | + | width: 100% |
| | + | height: 1px |
| | + | background-color: $color-fg-main |
| | + | margin: 30px 0 |
| | + | |
| | + | .figure |
| | + | width: 100% |
| | + | padding-bottom: 30px |
| | + | img |
| | + | width: 100% |
| | | | |
| − | .sponsors h2 { | + | .caption |
| − | margin-top: 60px; }
| + | padding: 3px 0 |
| | + | font-size: 14px |
| | + | text-align: center |
| | | | |
| − | .sponsors img { | + | .col |
| − | display: block;
| + | .figure |
| − | width: 500px;
| + | padding-bottom: 0 |
| − | margin: 10px auto;
| + | |
| − | background-color: #dde5ee; }
| + | |
| | | | |
| − | .interviews .nav {
| + | %box-glow |
| − | padding: 0px 0 50px;
| + | box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px $color-highlight, 0 0 20px $color-highlight, 0 0 35px $color-highlight, 0 0 40px $color-highlight, 0 0 50px $color-highlight, 0 0 75px $color-highlight |
| − | text-align: center;
| + | |
| − | list-style-type: none; }
| + | |
| − | .interviews .nav .button {
| + | |
| − | background-color: #dde5ee;
| + | |
| − | color: #181e33;
| + | |
| − | font-weight: 400;
| + | |
| − | text-decoration: none;
| + | |
| − | padding: 10px 15px;
| + | |
| − | margin: 10px;
| + | |
| − | display: inline-block; }
| + | |
| − | .interviews .nav .button:hover {
| + | |
| − | box-shadow: 0 0 15px #50b1be;
| + | |
| − | cursor: pointer; }
| + | |
| − | .interviews .nav .button.active {
| + | |
| − | box-shadow: 0 0 5px #fff, 0 0 10px #50b1be, 0 0 15px #50b1be, 0 0 17px #50b1be, 0 0 30px #50b1be; } | + | |
| | | | |
| − | .interviews .interview {
| + | %box-glow-red |
| − | display: none; }
| + | box-shadow: 0 0 10px rgba(255,255,255,0.7), 0 0 10px $color-highlight-red, 0 0 15px $color-highlight-red, 0 0 20px $color-highlight-red, 0 0 50px opacify($color-highlight-red, 0.4) |
| | | | |
| − | .interview ul {
| + | %text-glow-red, .text-glow-red |
| − | list-style-type: none;
| + | text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px $color-highlight-red, 0 0 35px $color-highlight-red, 0 0 40px $color-highlight-red, 0 0 50px $color-highlight-red, 0 0 75px $color-highlight-red |
| − | margin: 0; }
| + | |
| − | .interview ul li {
| + | .text-glow-blue |
| − | padding: 3px 0;
| + | +text-glow($color-highlight) |
| − | line-height: 25px;
| + | |
| − | position: relative; } | + | |
| − | .interview ul li::before {
| + | |
| − | text-shadow: 0 0 5px #50b1be, 0 0 10px #50b1be;
| + | |
| − | content: '?';
| + | |
| − | border-radius: 100%;
| + | |
| − | color: #dde5ee;
| + | |
| − | font-weight: 900;
| + | |
| − | font-size: 24px;
| + | |
| − | padding: 3px;
| + | |
| − | line-height: 20px;
| + | |
| − | left: -30px;
| + | |
| − | top: 5px;
| + | |
| − | position: absolute; }
| + | |
| − | .interview ul li::after { | + | |
| − | content: '';
| + | |
| − | clear: both;
| + | |
| − | display: table; }
| + | |
| | | | |
| − | .interview .person img {
| |
| − | float: left;
| |
| − | height: 150px;
| |
| − | margin-right: 40px;
| |
| − | margin-bottom: 40px;
| |
| − | border-top-left-radius: 50px; }
| |
| | | | |
| − | .interview .person .name { | + | .card |
| − | font-weight: 100;
| + | background-color: $color-bg-main |
| − | font-size: 36px;
| + | color: $color-fg-main |
| − | padding-bottom: 10px; }
| + | |
| | | | |
| − | .interview .person .position {
| |
| − | font-size: 16px; }
| |
| | | | |
| − | .interview .questions {
| |
| − | clear: both; }
| |
| | | | |
| − | .interview .question { | + | .attrib |
| − | font-style: italic;
| + | ul |
| − | margin-bottom: 10px;
| + | list-style-type: none |
| − | color: #9ad2da; }
| + | margin: 0 |
| | + | |
| | + | li |
| | + | padding: 3px 0 |
| | + | line-height: 30px |
| | + | &::before |
| | + | box-shadow: 0 0 5px $color-highlight |
| | + | content: '' |
| | + | background-color: lighten($color-highlight, 10%) |
| | + | border-radius: 100% |
| | + | color: $color-bg-main |
| | + | font-weight: 900 |
| | + | padding: 3px |
| | + | line-height: 20px |
| | + | margin: 12px 10px 0px 0 |
| | + | float: left; |
| | + | |
| | + | &::after |
| | + | content: '' |
| | + | clear: both |
| | + | display: table |
| | | | |
| − | .interview .answer { | + | .name |
| − | margin-bottom: 30px; }
| + | font-weight: 900 |
| − | .interview .answer img {
| + | |
| − | max-width: 100%; }
| + | |
| | | | |
| − | .experiment .time { | + | .sponsors |
| − | text-align: center; }
| + | h2 |
| − | .experiment .time i {
| + | margin-top: 60px |
| − | padding-right: 7px; } | + | img |
| | + | display: block |
| | + | width: 500px |
| | + | // height: 200px |
| | + | margin: 10px auto |
| | + | background-color: $color-fg-main |
| | | | |
| − | header.header {
| |
| − | padding-top: 18px;
| |
| − | background-color: #181e33;
| |
| − | display: block;
| |
| − | height: 98px;
| |
| − | color: #dde5ee;
| |
| − | width: 100%;
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | z-index: 200; }
| |
| − | header.header .logo {
| |
| − | background-color: #181e33;
| |
| − | display: block;
| |
| − | position: absolute;
| |
| − | transform: translate(-50%, 0);
| |
| − | left: 50%;
| |
| − | text-decoration: none;
| |
| − | padding: 7px;
| |
| − | height: 80px; }
| |
| − | header.header .logo img {
| |
| − | height: 100%;
| |
| − | width: auto; }
| |
| − | header.header .menu li {
| |
| − | cursor: default;
| |
| − | white-space: nowrap; }
| |
| − | header.header .menu > li {
| |
| − | position: relative; }
| |
| − | header.header .menu .submenu {
| |
| − | display: none; }
| |
| − | header.header .menu .submenu a {
| |
| − | display: block; }
| |
| − | header.header .nav-button {
| |
| − | display: none;
| |
| − | height: 80px;
| |
| − | left: 0;
| |
| − | padding: 10px;
| |
| − | position: absolute;
| |
| − | top: 18px;
| |
| − | width: 80px; }
| |
| − | header.header .nav-button i {
| |
| − | background-color: #dde5ee;
| |
| − | height: 2px;
| |
| − | left: 50%;
| |
| − | margin-left: -15px;
| |
| − | margin-top: -1px;
| |
| − | position: absolute;
| |
| − | top: 50%;
| |
| − | transition: background-color 0.3s 0s;
| |
| − | width: 30px; }
| |
| − | header.header .nav-button i::before, header.header .nav-button i::after {
| |
| − | background-color: #dde5ee;
| |
| − | backface-visibility: hidden;
| |
| − | content: '';
| |
| − | height: 100%;
| |
| − | position: absolute;
| |
| − | transform: translateZ(0);
| |
| − | transition: transform 0.3s 0s;
| |
| − | width: 100%; }
| |
| − | header.header .nav-button i::before {
| |
| − | transform: translateY(-8px); }
| |
| − | header.header .nav-button i::after {
| |
| − | transform: translateY(8px); }
| |
| − | header.header.sticky {
| |
| − | position: fixed;
| |
| − | top: 0;
| |
| − | z-index: 500;
| |
| − | width: 100%;
| |
| − | background-color: #181e33;
| |
| − | box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #50b1be, 0 0 20px #50b1be, 0 0 35px #50b1be, 0 0 40px #50b1be; }
| |
| | | | |
| − | .header-bottom {
| |
| − | height: 49px; }
| |
| | | | |
| − | @media (min-width: 769px) {
| |
| − | header.header .navigation {
| |
| − | position: relative;
| |
| − | z-index: 200;
| |
| − | width: 768px;
| |
| − | margin: 0 auto;
| |
| − | font-size: 18px;
| |
| − | font-weight: 400; }
| |
| − | header.header .menu {
| |
| − | width: 40%; }
| |
| − | header.header .menu > li {
| |
| − | float: left;
| |
| − | height: 80px; }
| |
| − | header.header .menu > li > span {
| |
| − | color: #dde5ee;
| |
| − | line-height: 80px;
| |
| − | padding: 0px 20px; }
| |
| − | header.header .menu > li .submenu {
| |
| − | position: absolute;
| |
| − | top: 80px;
| |
| − | background-color: #181e33;
| |
| − | box-shadow: 0 5px 5px -5px #fff, 0 10px 10px -10px #50b1be, 0 15px 15px -15px #50b1be, 0 17px 17px -17px #50b1be, 0 30px 30px -30px #50b1be;
| |
| − | border-top: 2px solid #50b1be;
| |
| − | z-index: -1;
| |
| − | min-width: 200px; }
| |
| − | header.header .menu > li .submenu a {
| |
| − | color: #dde5ee;
| |
| − | padding: 15px 20px;
| |
| − | text-decoration: none; }
| |
| − | header.header .menu > li .submenu a:hover {
| |
| − | background-color: rgba(80, 177, 190, 0.1); }
| |
| − | header.header .menu > li:hover {
| |
| − | background-color: rgba(80, 177, 190, 0.1); }
| |
| − | header.header .menu > li:hover .submenu {
| |
| − | display: block; }
| |
| − | header.header .menu-left {
| |
| − | float: left; }
| |
| − | header.header .menu-left .submenu {
| |
| − | left: 0; }
| |
| − | header.header .menu-right {
| |
| − | float: right; }
| |
| − | header.header .menu-right > li {
| |
| − | float: right; }
| |
| − | header.header .menu-right .submenu {
| |
| − | right: 0; } }
| |
| | | | |
| − | @media (max-width: 768px) {
| + | .interviews |
| − | header.header .nav-button {
| + | |
| − | display: block; } | + | .nav |
| − | header.header .navigation {
| + | // @extend %nl-inline |
| − | background-color: #181e33;
| + | padding: 0px 0 50px |
| − | border-top: 2px solid #50b1be;
| + | text-align: center |
| − | max-height: 100%;
| + | list-style-type: none |
| − | min-width: 280px;
| + | |
| − | color: white;
| + | .button |
| − | opacity: 0;
| + | // +box-glow($color-highlight) |
| − | overflow: auto;
| + | background-color: $color-fg-main |
| − | bottom: 0px;
| + | color: $color-bg-main |
| − | top: 98px;
| + | font-weight: 400 |
| − | left: 0;
| + | text-decoration: none |
| − | transform: translateX(-100%);
| + | padding: 10px 15px |
| − | transition: transform 0.3s 0s, opacity 0.3s 0s;
| + | margin: 10px |
| − | position: fixed;
| + | display: inline-block; |
| − | width: auto;
| + | |
| − | z-index: 100;
| + | |
| − | padding-top: 10px; }
| + | |
| − | header.header .menu > li > span {
| + | |
| − | padding: 0 20px;
| + | |
| − | line-height: 60px;
| + | |
| − | display: block; }
| + | |
| − | header.header .menu .submenu {
| + | |
| − | background-color: rgba(80, 177, 190, 0.1); }
| + | |
| − | header.header .menu .submenu a {
| + | |
| − | padding: 0 30px;
| + | |
| − | line-height: 60px;
| + | |
| − | color: #dde5ee; }
| + | |
| − | header.header .menu .menu-item-branch .label::before {
| + | |
| − | content: '+';
| + | |
| − | padding-right: 10px; }
| + | |
| − | header.header .menu .menu-item-branch.open .label::before {
| + | |
| − | content: '-'; }
| + | |
| − | header.header .menu .menu-item-branch.open .submenu {
| + | |
| − | display: block; }
| + | |
| − | .nav-shown {
| + | |
| − | overflow: hidden; }
| + | |
| − | .nav-shown::before {
| + | |
| − | background-color: rgba(0, 0, 0, 0.5);
| + | |
| − | bottom: 0px;
| + | |
| − | content: '';
| + | |
| − | display: block;
| + | |
| − | left: 0px;
| + | |
| − | position: fixed;
| + | |
| − | right: 0px;
| + | |
| − | top: 0px;
| + | |
| − | z-index: 1; }
| + | |
| − | .nav-shown .navigation {
| + | |
| − | opacity: 1;
| + | |
| − | transform: translateX(0); }
| + | |
| − | .nav-shown .nav-button i {
| + | |
| − | background-color: transparent; }
| + | |
| − | .nav-shown .nav-button i::before {
| + | |
| − | transform: translateY(0) rotate(-45deg); }
| + | |
| − | .nav-shown .nav-button i::after {
| + | |
| − | transform: translateY(0) rotate(45deg); } }
| + | |
| | | | |
| − | #footer {
| + | .button:hover |
| − | border-top: 1px solid #50b1be;
| + | box-shadow: 0 0 15px $color-highlight |
| − | padding: 20px 0; }
| + | cursor: pointer |
| − | #footer h3 {
| + | |
| − | color: #dde5ee;
| + | |
| − | text-align: center;
| + | |
| − | font-size: 20px; }
| + | |
| − | #footer .logos {
| + | |
| − | padding: 0;
| + | |
| − | margin: 0 auto;
| + | |
| − | display: table;
| + | |
| − | text-align: center; }
| + | |
| − | #footer .logos li {
| + | |
| − | display: inline-block;
| + | |
| − | padding: 5px; }
| + | |
| − | #footer .logos li img {
| + | |
| − | height: 80px;
| + | |
| − | background-color: white;
| + | |
| − | opacity: 0.9; }
| + | |
| | | | |
| − | .scene { | + | .button.active |
| − | position: relative;
| + | +box-glow($color-highlight) |
| − | width: 100%;
| + | |
| − | overflow: hidden; }
| + | |
| − | .scene .layer {
| + | |
| − | display: none;
| + | |
| − | height: 100%;
| + | |
| − | position: absolute;
| + | |
| − | width: 100%; }
| + | |
| − | .scene .layer-paralax {
| + | |
| − | transform: translate3d(0px, 0px, 0px); }
| + | |
| − | .scene .layer-split-paralax .split-left, .scene .layer-split-paralax .split-right {
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | background-origin: border-box;
| + | |
| − | height: 100%;
| + | |
| − | position: absolute;
| + | |
| − | background-position-x: 0%;
| + | |
| − | overflow: hidden; }
| + | |
| − | .scene .layer-split-paralax .split-left {
| + | |
| − | left: 0;
| + | |
| − | right: 50%; }
| + | |
| − | .scene .layer-split-paralax .split-right {
| + | |
| − | left: 50%;
| + | |
| − | right: 0;
| + | |
| − | filter: grayscale(100%); }
| + | |
| | | | |
| − | #reef-section {
| |
| − | position: relative; }
| |
| − | #reef-section .content {
| |
| − | max-width: 1920px; }
| |
| − | #reef-section #reef-card {
| |
| − | box-shadow: 0 0 5px #fff, 0 0 10px #ea2d30, 0 0 15px #ea2d30, 0 0 17px #ea2d30, 0 0 30px #ea2d30;
| |
| − | background-color: #171d31;
| |
| − | color: #dde5ee;
| |
| − | border-top-right-radius: 100px;
| |
| − | font-size: 18px;
| |
| − | font-weight: 300;
| |
| − | position: relative;
| |
| − | width: 55%;
| |
| − | top: -150px;
| |
| − | left: 5%;
| |
| − | padding: 40px; }
| |
| − | @media (min-width: 1366px) and (max-width: 1599px) {
| |
| − | #reef-section #reef-card {
| |
| − | top: -100px; } }
| |
| − | @media (min-width: 1024px) and (max-width: 1366px) {
| |
| − | #reef-section #reef-card {
| |
| − | top: -80px;
| |
| − | width: 70%; } }
| |
| − | @media (max-width: 1024px) {
| |
| − | #reef-section #reef-card {
| |
| − | position: static;
| |
| − | border-top-right-radius: 0px;
| |
| − | border-bottom-right-radius: 100px;
| |
| − | width: 100%; } }
| |
| | | | |
| − | @keyframes pulse {
| + | .interviews |
| − | from {
| + | .interview |
| − | box-shadow: none; }
| + | display: none; |
| − | to {
| + | |
| − | box-shadow: 0 0 5px #fff, 0 0 10px #50b1be, 0 0 15px #50b1be, 0 0 17px #50b1be, 0 0 30px #50b1be, 0 0 50px #50b1be, 0 0 75px #50b1be, 0 0 5px #fff inset, 0 0 10px #50b1be inset, 0 0 15px #50b1be inset, 0 0 17px #50b1be inset, 0 0 30px #50b1be inset; } }
| + | |
| | | | |
| − | @keyframes slideInUp {
| + | .interview |
| − | from {
| + | |
| − | transform: translate3d(0, 100%, 0);
| + | |
| − | opacity: 0.5; }
| + | |
| − | to {
| + | |
| − | transform: translate3d(0, 0%, 0); } }
| + | |
| | | | |
| − | .slide-in-up {
| + | ul |
| − | animation: 1s ease-out 0s slideInUp;
| + | list-style-type: none |
| − | animation-fill-mode: backwards; }
| + | margin: 0 |
| | + | |
| | + | li |
| | + | padding: 3px 0 |
| | + | line-height: 25px |
| | + | position: relative |
| | + | &::before |
| | + | text-shadow: 0 0 5px $color-highlight, 0 0 10px $color-highlight |
| | + | content: '?' |
| | + | border-radius: 100% |
| | + | color: $color-fg-main |
| | + | font-weight: 900 |
| | + | font-size: 24px |
| | + | padding: 3px |
| | + | line-height: 20px |
| | + | left: -30px |
| | + | top: 5px |
| | + | position: absolute |
| | | | |
| − | #reef {
| + | &::after |
| − | height: 800px; }
| + | content: '' |
| − | #reef .spinner {
| + | clear: both |
| − | animation: pulse 2s ease-out 0s infinite alternate;
| + | display: table |
| − | position: absolute;
| + | |
| − | top: 50%;
| + | |
| − | left: 50%;
| + | |
| − | transform: translate(-50%, -50%);
| + | |
| − | width: 70px;
| + | |
| − | height: 70px;
| + | |
| − | border-radius: 100%;
| + | |
| − | border: 1px solid #dde5ee;
| + | |
| − | background-color: transparent; }
| + | |
| − | #reef #reef-bg {
| + | |
| − | top: 0px; }
| + | |
| − | #reef #reef-bg .split-right, #reef #reef-bg .split-left {
| + | |
| − | background-image: url(https://static.igem.org/mediawiki/2018/f/fe/T--Tartu_TUIT--layer-bg-1.png); }
| + | |
| − | #reef #reef-corals-first {
| + | |
| − | top: 0px; }
| + | |
| − | #reef #reef-corals-first .split-right, #reef #reef-corals-first .split-left {
| + | |
| − | background-image: url(https://static.igem.org/mediawiki/2018/8/82/T--Tartu_TUIT--layer-first.png); }
| + | |
| − | #reef #reef-corals-second {
| + | |
| − | top: 0px; }
| + | |
| − | #reef #reef-corals-second .split-left, #reef #reef-corals-second .split-right {
| + | |
| − | background-image: url(https://static.igem.org/mediawiki/2018/b/b2/T--Tartu_TUIT--layer-second.png); }
| + | |
| − | #reef #reef-corals-third {
| + | |
| − | bottom: 0px; }
| + | |
| − | #reef #reef-corals-third .split-left, #reef #reef-corals-third .split-right {
| + | |
| − | background-image: url(https://static.igem.org/mediawiki/2018/4/4d/T--Tartu_TUIT--layer-third.png); }
| + | |
| − | #reef #reef-corals-zero {
| + | |
| − | bottom: 0px; }
| + | |
| − | #reef #reef-corals-zero .split-left, #reef #reef-corals-zero .split-right {
| + | |
| − | background-image: url(https://static.igem.org/mediawiki/2018/c/c9/T--Tartu_TUIT--layer-zero.png); }
| + | |
| − | #reef #reef-corals-zero .split-right {
| + | |
| − | filter: none;
| + | |
| − | background-image: url(https://static.igem.org/mediawiki/2018/0/0a/T--Tartu_TUIT--layer-zero-after.png); }
| + | |
| | | | |
| − | #process {
| + | |
| − | padding-top: 40px;
| + | .person |
| − | padding-bottom: 40px; }
| + | img |
| − | #process .content {
| + | |
| − | margin: 0 auto; | + | |
| − | max-width: 1400px; }
| + | |
| − | #process img {
| + | |
| − | float: left;
| + | |
| − | width: 47%; }
| + | |
| − | #process .card {
| + | |
| − | border-top-right-radius: 100px;
| + | |
| − | background-color: #171d31;
| + | |
| − | float: right;
| + | |
| − | box-shadow: 0 0 5px #fff, 0 0 10px #50b1be, 0 0 15px #50b1be, 0 0 17px #50b1be, 0 0 30px #50b1be;
| + | |
| − | font-size: 18px;
| + | |
| − | font-weight: 300;
| + | |
| − | width: 43%;
| + | |
| − | margin-right: 5%;
| + | |
| − | margin-top: 5%;
| + | |
| − | padding: 40px; }
| + | |
| − | @media (max-width: 1366px) {
| + | |
| − | #process {
| + | |
| − | padding-top: 80px; }
| + | |
| − | #process .card {
| + | |
| − | margin-top: 0; } } | + | |
| − | @media (max-width: 1024px) {
| + | |
| − | #process img {
| + | |
| − | background-color: #181e33;
| + | |
| − | box-sizing: border-box;
| + | |
| − | float: none;
| + | |
| − | width: 100%;
| + | |
| − | padding: 0 20px; }
| + | |
| − | #process .card {
| + | |
| − | float: none;
| + | |
| − | width: 100%;
| + | |
| − | border-top-right-radius: 0px;
| + | |
| − | border-bottom-right-radius: 100px; } }
| + | |
| − | | + | |
| − | #molecule {
| + | |
| − | padding: 0px 20px; }
| + | |
| − | #molecule .content {
| + | |
| − | max-width: 1366px; }
| + | |
| − | #molecule .map {
| + | |
| − | position: relative;
| + | |
| − | margin: 0 auto 100px; }
| + | |
| − | #molecule .map .background {
| + | |
| − | background-image: url(https://static.igem.org/mediawiki/2018/3/33/T--Tartu_TUIT--molecule.png);
| + | |
| − | background-size: 100%;
| + | |
| − | position: relative;
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | z-index: 20; }
| + | |
| − | #molecule .map .fog {
| + | |
| − | background-color: rgba(24, 30, 51, 0.5);
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | left: 0;
| + | |
| − | right: 0;
| + | |
| − | bottom: 0;
| + | |
| − | z-index: 30; }
| + | |
| − | #molecule .map .pin {
| + | |
| − | position: absolute;
| + | |
| − | z-index: 30;
| + | |
| − | border-radius: 100%;
| + | |
| − | border: 3px solid #ea2d30; }
| + | |
| − | #molecule .map .pin .icon {
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | background-size: 100%;
| + | |
| − | filter: saturate(0%);
| + | |
| − | position: relative;
| + | |
| − | z-index: 25; }
| + | |
| − | #molecule .map .pin:hover {
| + | |
| − | box-shadow: 0 0 5px #fff, 0 0 10px #ea2d30, 0 0 15px #ea2d30, 0 0 17px #ea2d30, 0 0 30px #ea2d30; }
| + | |
| − | #molecule .map .card {
| + | |
| − | display: none;
| + | |
| − | position: absolute;
| + | |
| − | box-shadow: 0 0 5px #fff, 0 0 10px #ea2d30, 0 0 15px #ea2d30, 0 0 17px #ea2d30, 0 0 30px #ea2d30;
| + | |
| − | background-color: #181e33;
| + | |
| − | top: 50%;
| + | |
| − | left: 50%;
| + | |
| − | z-index: 50;
| + | |
| − | border-radius: 170px 0px 0px 0px;
| + | |
| − | min-width: 800px;
| + | |
| − | transform: translate(-50%, -50%);
| + | |
| − | font-size: 20px;
| + | |
| − | font-weight: 300; }
| + | |
| − | #molecule .map .card .btn-close {
| + | |
| − | position: absolute;
| + | |
| − | right: 10px;
| + | |
| − | top: 10px;
| + | |
| − | width: 40px;
| + | |
| − | height: 40px; }
| + | |
| − | #molecule .map .card .btn-close::before, #molecule .map .card .btn-close::after {
| + | |
| − | background-color: #dde5ee;
| + | |
| − | backface-visibility: hidden;
| + | |
| − | content: '';
| + | |
| − | height: 2px;
| + | |
| − | position: absolute;
| + | |
| − | top: 50%;
| + | |
| − | width: 100%; }
| + | |
| − | #molecule .map .card .btn-close::before {
| + | |
| − | transform: rotate(45deg); }
| + | |
| − | #molecule .map .card .btn-close::after {
| + | |
| − | transform: rotate(-45deg); }
| + | |
| − | #molecule .map .card .picture {
| + | |
| − | float: left;
| + | |
| − | padding: 20px; }
| + | |
| − | #molecule .map .card .picture img {
| + | |
| − | width: 300px;
| + | |
| − | border-radius: 100%; }
| + | |
| − | #molecule .map .card .details {
| + | |
| − | overflow: hidden;
| + | |
| − | padding: 20px 20px; }
| + | |
| − | #molecule .map .card .details .name {
| + | |
| − | font-size: 30px;
| + | |
| − | font-weight: 300; }
| + | |
| − | #molecule .map .card .details .country, #molecule .map .card .details .superpower, #molecule .map .card .details .role, #molecule .map .card .details .element {
| + | |
| − | padding: 5px 0; }
| + | |
| − | #molecule .map .card .details .country::before, #molecule .map .card .details .superpower::before, #molecule .map .card .details .role::before, #molecule .map .card .details .element::before {
| + | |
| − | color: #96999c; }
| + | |
| − | #molecule .map .card .details .country::before {
| + | |
| − | content: "From: "; }
| + | |
| − | #molecule .map .card .details .role::before {
| + | |
| − | content: "Occupation: "; }
| + | |
| − | #molecule .map .card .details .superpower::before {
| + | |
| − | content: "Superpower: "; }
| + | |
| − | #molecule .map .card .details .element::before {
| + | |
| − | content: "Element: "; }
| + | |
| − | #molecule .map .card .details .periodic {
| + | |
| − | border: 1px solid #ea2d30;
| + | |
| − | padding: 5px;
| + | |
| − | float: right;
| + | |
| − | margin-top: 10px; }
| + | |
| − | #molecule .map .card .details .periodic .mass {
| + | |
| | float: left; | | float: left; |
| − | font-size: 12px; | + | height: 150px |
| − | font-weight: 400; | + | margin-right: 40px |
| − | padding: 2px; } | + | margin-bottom: 40px |
| − | #molecule .map .card .details .periodic .number {
| + | border-top-left-radius: 50px |
| − | float: right; | + | |
| − | margin-left: 10px; }
| + | .name |
| − | #molecule .map .card .details .periodic .short {
| + | font-weight: 100 |
| − | display: block; | + | font-size: 36px |
| − | clear: both;
| + | padding-bottom: 10px |
| − | text-align: center;
| + | |
| − | font-size: 25px; | + | .position |
| − | font-weight: 900; } | + | font-size: 16px; |
| − | #molecule .map .card .details .periodic .full {
| + | |
| − | text-align: center;
| + | .questions |
| − | font-size: 16px; } | + | clear: both; |
| − | #molecule .map .card .details .compound {
| + | |
| − | margin-top: 10px;
| + | |
| − | border: 1px solid #ea2d30;
| + | |
| − | padding: 10px;
| + | |
| − | float: right;
| + | |
| − | text-align: center;
| + | |
| − | font-size: 25px;
| + | |
| − | font-weight: 900; }
| + | |
| | | | |
| − | .notebook table, .article table { | + | .question |
| − | background-color: transparent;
| + | font-style: italic |
| − | color: #dde5ee;
| + | margin-bottom: 10px |
| − | border-collapse: collapse; }
| + | color: lighten($color-highlight, 20%) |
| − | .notebook table td, .article table td {
| + | |
| − | background-color: transparent;
| + | |
| − | border: 1px solid rgba(221, 229, 238, 0.5);
| + | |
| − | padding: 3px 5px; }
| + | |
| | | | |
| − | .article table { | + | .answer |
| − | width: 100%;
| + | margin-bottom: 30px |
| − | margin-bottom: 30px; }
| + | |
| − | .article table td {
| + | |
| − | padding: 10px 13px; }
| + | |
| | | | |
| − | .notebook {
| + | img |
| − | color: #dde5ee;
| + | max-width: 100% |
| − | margin-top: 100px;
| + | |
| − | font-size: 18px; }
| + | |
| − | .notebook p, .notebook h3 {
| + | |
| − | margin: 0; }
| + | |
| − | .notebook h3 {
| + | |
| − | padding-bottom: 15px;
| + | |
| − | font-size: 22px;
| + | |
| − | margin-top: -5px;
| + | |
| − | font-weight: 400; }
| + | |
| − | .notebook .h3 {
| + | |
| − | text-align: left;
| + | |
| − | font-size: 22px;
| + | |
| − | font-weight: 400; }
| + | |
| − | .notebook p {
| + | |
| − | padding-bottom: 10px;
| + | |
| − | text-align: justify; }
| + | |
| − | .notebook img {
| + | |
| − | box-sizing: border-box;
| + | |
| − | float: left;
| + | |
| − | max-width: 50%;
| + | |
| − | max-height: 500px;
| + | |
| − | border: 1px solid #181e33;
| + | |
| − | padding: 5px;
| + | |
| − | background-color: #dde5ee;
| + | |
| − | margin-right: 20px; }
| + | |
| − | .notebook .images-two img {
| + | |
| − | max-width: 50%; }
| + | |
| − | .notebook .images-height {
| + | |
| − | padding-bottom: 0; }
| + | |
| − | .notebook .images-height img {
| + | |
| − | max-width: initial;
| + | |
| − | height: 100%;
| + | |
| − | margin-right: 0px; }
| + | |
| − | .notebook .pt {
| + | |
| − | padding-top: 20px; }
| + | |
| − | .notebook table {
| + | |
| − | color: #dde5ee;
| + | |
| − | border-collapse: collapse; }
| + | |
| − | .notebook table td {
| + | |
| − | border: 1px solid rgba(221, 229, 238, 0.5);
| + | |
| − | padding: 3px 5px; }
| + | |
| − | .notebook ul, .notebook ol {
| + | |
| − | margin: 0;
| + | |
| − | padding-left: 18px; }
| + | |
| − | .notebook .event {
| + | |
| − | width: 1000px;
| + | |
| − | margin: 0 auto;
| + | |
| − | position: relative; }
| + | |
| − | .notebook .event .details {
| + | |
| − | margin-left: 25%;
| + | |
| − | padding-left: 20px;
| + | |
| − | padding: 0px 20px 60px 40px; }
| + | |
| − | .notebook .event .bullet {
| + | |
| − | width: 20px;
| + | |
| − | height: 20px;
| + | |
| − | position: absolute;
| + | |
| − | background-color: white;
| + | |
| − | border-radius: 10px;
| + | |
| − | top: 0px;
| + | |
| − | left: 25%;
| + | |
| − | transform: translate(-9px, 1px); }
| + | |
| − | .notebook .event .side {
| + | |
| − | position: absolute;
| + | |
| − | width: 25%;
| + | |
| − | left: 0;
| + | |
| − | top: 0;
| + | |
| − | text-align: right;
| + | |
| − | padding: 3px 30px; }
| + | |
| − | .notebook .event .side .icon {
| + | |
| − | font-size: 30px;
| + | |
| − | padding: 20px 0px; }
| + | |
| − | .notebook .event .side .fa-plane {
| + | |
| − | transform: rotate(-45deg); }
| + | |
| | | | |
| − | .notebook-red a {
| |
| − | color: #ea2d30; }
| |
| | | | |
| − | .notebook-red .details {
| |
| − | border-left: 3px solid #ea2d30; }
| |
| | | | |
| − | .notebook-red .bullet { | + | .experiment |
| − | box-shadow: 0 0 5px #fff, 0 0 10px #ea2d30, 0 0 15px #ea2d30, 0 0 17px #ea2d30, 0 0 30px #ea2d30; }
| + | @extend %clearfix |
| | | | |
| − | .notebook-blue a { | + | .time |
| − | color: #50b1be; }
| + | text-align: center |
| | + | padding-bottom: 30px |
| | | | |
| − | .notebook-blue .details {
| + | i |
| − | border-left: 3px solid #50b1be; }
| + | padding-right: 7px |
| | | | |
| − | .notebook-blue .last .details {
| |
| − | border-left: 0px none; }
| |
| | | | |
| − | .notebook-blue .bullet { | + | .ingredients, .tools |
| − | box-shadow: 0 0 5px #fff, 0 0 10px #50b1be, 0 0 15px #50b1be, 0 0 17px #50b1be, 0 0 30px #50b1be; }
| + | width: 50% |
| | + | float: left |
| | + | padding-left: 5% |
| | + | li |
| | + | text-align: left |
| | + | |
| | | | |
| − | .notebook-blue .actions {
| |
| − | text-align: center;
| |
| − | padding: 50px; }
| |
| − | .notebook-blue .actions .button {
| |
| − | box-shadow: 0 0 5px #fff, 0 0 10px #50b1be, 0 0 15px #50b1be, 0 0 17px #50b1be, 0 0 30px #50b1be;
| |
| − | background-color: #dde5ee;
| |
| − | color: #181e33;
| |
| − | text-decoration: none;
| |
| − | padding: 20px; }
| |
| | | | |
| | + | .steps::before |
| | + | content: '' |
| | + | clear: both |
| | + | display: table |
| | </style> | | </style> |
