Difference between revisions of "Template:Tartu TUIT/style"

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; }
  
−
$color-hover: hsla(0, 0%, 0%, 0.2)
+
header, footer, nav {
−
$color-bg-main: #181e33
+
  display: block; }
−
$color-fg-main: #dde5ee
+
−
$color-bg-dark: black
+
−
$color-fg-light: white
+
  
−
$color-highlight: #50b1be
+
div, a, ul, li, header, footer, nav, section {
−
$color-highlight-red: #ea2d30
+
  box-sizing: border-box; }
  
−
$header-height: 80px
+
a {
 +
  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; }
  
−
=box-glow($color)
+
.cols, header.header .menu, header.header .menu .submenu {
−
    box-shadow: 0 0 5px #fff, 0 0 10px $color, 0 0 15px $color, 0 0 17px $color, 0 0 30px $color
+
  list-style-type: none;
 +
  padding: 0;
 +
  margin: 0; }
  
−
=box-glow-bottom($color)
+
.cols > li {
−
    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
+
  float: left; }
  
−
=text-glow($color)
+
.content {
−
    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
+
  margin: 0 auto; }
−
   
+
−
html, body
+
−
    font-family: 'Roboto'
+
−
    font-size: 16px
+
−
    background-color: $color-bg-main
+
−
    min-height: 100%
+
  
−
body
+
.narrow .content {
−
    h2,h2,h3,h4
+
  width: 768px; }
−
        color: $color-fg-main
+
−
        font-family: 'Roboto' !important;
+
  
−
    li
+
.cols {
−
        margin-bottom: 0
+
  margin: 0 -2%; }
 +
  .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%; }
  
−
h2, .article h2
+
html, body {
−
    text-align: center
+
  font-family: 'Roboto';
−
    font-weight: 100
+
  font-size: 16px;
−
    font-size: 36px
+
  background-color: #181e33;
 +
  min-height: 100%; }
  
 +
body h2, body h2, body h3, body h4 {
 +
  color: #dde5ee;
 +
  font-family: 'Roboto' !important; }
  
−
.banner
+
body li {
−
    padding: 20px 0 0
+
  margin-bottom: 0; }
−
    .title
+
−
        padding: 30px
+
−
        font-size: 100px
+
−
        font-weight: 100
+
−
        color: $color-fg-main
+
−
        text-align: center 
+
  
−
    @media (max-width: 1024px)
+
h2, .article h2 {
−
        padding-top: 50px
+
  text-align: center;
−
        .title
+
  font-weight: 100;
−
            font-size: 60px
+
  font-size: 36px; }
  
 +
.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: $color-fg-main
+
  color: #dde5ee;
−
     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; }
  
−
    p, li
+
.hr {
−
        text-align: justify
+
  width: 100%;
−
   
+
  height: 1px;
−
    h2, p
+
  background-color: #dde5ee;
−
        margin: 0
+
  margin: 30px 0; }
  
−
    h2,p, ol, ul
+
.figure {
−
        margin-top: 0
+
  width: 100%;
−
        margin-bottom: 0
+
  padding-bottom: 30px; }
−
        padding: 0 0 30px
+
  .figure img {
 +
    width: 100%; }
 +
  .figure .caption {
 +
    padding: 3px 0;
 +
    font-size: 14px;
 +
    text-align: center; }
  
−
    h2
+
.col .figure {
−
        padding-top: 20px
+
  padding-bottom: 0; }
−
    h3
+
−
        text-align: center
+
−
    a
+
−
        color: $color-highlight
+
−
        text-decoration: none
+
−
       
+
−
    a.reference
+
−
        font-size: 12px
+
−
        vertical-align: super
+
−
        padding: 0px 0px
+
  
−
    img
+
.text-glow-red {
−
        max-width: 100%
+
  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; }
  
−
    ol.fancy.cols
+
.text-glow-blue {
−
        margin-left: -2%
+
  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-right: -2%
+
  
−
    ol.fancy
+
.card {
−
        list-style-type: none
+
  background-color: #181e33;
−
        counter-reset: ol-counter
+
  color: #dde5ee; }
−
        margin: 0
+
−
       
+
−
        li
+
−
            counter-increment: ol-counter
+
−
            padding: 0px 0px 10px
+
  
−
            &::before
+
.attrib ul {
−
                box-shadow: 0 0 5px $color-highlight
+
  list-style-type: none;
−
                content: counter(ol-counter)
+
  margin: 0; }
−
                background-color: lighten($color-highlight, 10%)
+
  .attrib ul li {
−
                border-radius: 100%
+
    padding: 3px 0;
−
                color: $color-bg-main
+
    line-height: 30px; }
−
                font-weight: 900
+
    .attrib ul li::before {
−
                font-size: 16px
+
      box-shadow: 0 0 5px #50b1be;
−
                padding: 1px 6px 0px
+
      content: '';
−
                line-height: 20px
+
      background-color: #75c2cc;
−
                margin: 1px 10px 4px 0
+
      border-radius: 100%;
−
                float: left;  
+
      color: #181e33;
−
           
+
      font-weight: 900;
−
            &::after
+
      padding: 3px;
−
                content: ''
+
      line-height: 20px;
−
                clear: both
+
      margin: 12px 10px 0px 0;
−
                display: table
+
      float: left; }
−
    .references
+
    .attrib ul li::after {
−
        padding-left: 18px
+
      content: '';
−
        margin: 0
+
      clear: both;
−
        li
+
      display: table; }
−
            padding-left: 10px    
+
   .attrib ul .name {
−
.hr
+
     font-weight: 900; }
−
    width: 100%
+
−
    height: 1px
+
−
    background-color: $color-fg-main
+
−
    margin: 30px 0
+
−
       
+
−
.figure
+
−
     width: 100%
+
−
    padding-bottom: 30px
+
−
    img
+
−
        width: 100%
+
  
−
    .caption
+
.sponsors h2 {
−
        padding: 3px 0
+
  margin-top: 60px; }
−
        font-size: 14px
+
−
        text-align: center
+
  
−
.col
+
.sponsors img {
−
    .figure
+
  display: block;
−
        padding-bottom: 0
+
  width: 500px;
 +
  margin: 10px auto;
 +
  background-color: #dde5ee; }
  
−
%box-glow
+
.interviews .nav {
−
     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
+
  padding: 0px 0 50px;
 +
  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; }
  
−
%box-glow-red
+
.interviews .interview {
−
    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)
+
  display: none; }
  
−
%text-glow-red, .text-glow-red
+
.interview ul {
−
     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
+
  list-style-type: none;
−
       
+
  margin: 0; }
−
.text-glow-blue
+
  .interview ul li {
−
     +text-glow($color-highlight)
+
    padding: 3px 0;
 +
    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; }
  
−
.card
+
.interview .person .name {
−
    background-color: $color-bg-main
+
  font-weight: 100;
−
    color: $color-fg-main
+
  font-size: 36px;
 +
  padding-bottom: 10px; }
  
 +
.interview .person .position {
 +
  font-size: 16px; }
  
 +
.interview .questions {
 +
  clear: both; }
  
−
.attrib
+
.interview .question {
−
    ul
+
  font-style: italic;
−
        list-style-type: none
+
  margin-bottom: 10px;
−
        margin: 0
+
  color: #9ad2da; }
−
       
+
−
        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
+
  
−
        .name
+
.interview .answer {
−
            font-weight: 900
+
  margin-bottom: 30px; }
 +
  .interview .answer img {
 +
    max-width: 100%; }
  
−
.sponsors
+
.experiment .time {
−
    h2
+
  text-align: center;
−
        margin-top: 60px
+
  padding-bottom: 30px; }
−
    img
+
  .experiment .time i {
−
        display: block
+
    padding-right: 7px; }
−
        width: 500px
+
−
        // height: 200px
+
−
        margin: 10px auto
+
−
        background-color: $color-fg-main
+
  
 +
.experiment .ingredients, .experiment .tools {
 +
  width: 50%;
 +
  float: left;
 +
  padding-left: 5%; }
 +
  .experiment .ingredients li, .experiment .tools li {
 +
    text-align: left; }
  
 +
.experiment .steps::before {
 +
  content: '';
 +
  clear: both;
 +
  display: table; }
  
 +
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; }
  
−
.interviews
+
.header-bottom {
−
   
+
  height: 49px; }
−
    .nav
+
−
        // @extend %nl-inline
+
−
        padding: 0px 0 50px
+
−
        text-align: center
+
−
        list-style-type: none
+
−
       
+
−
        .button
+
−
            // +box-glow($color-highlight)
+
−
            background-color: $color-fg-main
+
−
            color: $color-bg-main
+
−
            font-weight: 400
+
−
            text-decoration: none
+
−
            padding: 10px 15px
+
−
            margin: 10px
+
−
            display: inline-block;
+
  
−
         .button:hover
+
@media (min-width: 769px) {
−
            box-shadow: 0 0 15px $color-highlight
+
  header.header .navigation {
−
             cursor: pointer
+
    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; } }
  
−
        .button.active
+
@media (max-width: 768px) {
−
            +box-glow($color-highlight)
+
  header.header .nav-button {
 +
    display: block; }
 +
  header.header .navigation {
 +
    background-color: #181e33;
 +
    border-top: 2px solid #50b1be;
 +
    max-height: 100%;
 +
    min-width: 280px;
 +
    color: white;
 +
    opacity: 0;
 +
    overflow: auto;
 +
    bottom: 0px;
 +
    top: 98px;
 +
    left: 0;
 +
    transform: translateX(-100%);
 +
    transition: transform 0.3s 0s, opacity 0.3s 0s;
 +
    position: fixed;
 +
    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 {
 +
  border-top: 1px solid #50b1be;
 +
  padding: 20px 0; }
 +
  #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; }
  
−
.interviews
+
.scene {
−
    .interview
+
  position: relative;
−
        display: none;
+
  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%); }
  
−
.interview
+
#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%; } }
  
−
    ul
+
@keyframes pulse {
−
        list-style-type: none
+
  from {
−
        margin: 0
+
    box-shadow: none; }
−
       
+
  to {
−
        li
+
    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; } }
−
            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
+
  
−
            &::after
+
@keyframes slideInUp {
−
                content: ''
+
  from {
−
                clear: both
+
    transform: translate3d(0, 100%, 0);
−
                display: table
+
    opacity: 0.5; }
 +
  to {
 +
    transform: translate3d(0, 0%, 0); } }
  
−
   
+
.slide-in-up {
−
    .person
+
  animation: 1s ease-out 0s slideInUp;
−
        img
+
  animation-fill-mode: backwards; }
−
            float: left;
+
−
            height: 150px
+
−
            margin-right: 40px
+
−
            margin-bottom: 40px
+
−
            border-top-left-radius: 50px
+
  
−
        .name
+
#reef {
−
            font-weight: 100
+
  height: 800px; }
−
            font-size: 36px
+
  #reef .spinner {
−
            padding-bottom: 10px
+
    animation: pulse 2s ease-out 0s infinite alternate;
 +
    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); }
  
−
        .position
+
#process {
−
            font-size: 16px;
+
  padding-top: 40px;
 +
  padding-bottom: 40px; }
 +
  #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; } }
  
−
     .questions
+
#molecule {
−
         clear: both;
+
  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;
 +
            font-size: 12px;
 +
            font-weight: 400;
 +
            padding: 2px; }
 +
          #molecule .map .card .details .periodic .number {
 +
            float: right;
 +
            margin-left: 10px; }
 +
          #molecule .map .card .details .periodic .short {
 +
            display: block;
 +
            clear: both;
 +
            text-align: center;
 +
            font-size: 25px;
 +
            font-weight: 900; }
 +
          #molecule .map .card .details .periodic .full {
 +
            text-align: center;
 +
            font-size: 16px; }
 +
        #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; }
  
−
    .question
+
.notebook table, .article table {
−
        font-style: italic
+
  background-color: transparent;
−
        margin-bottom: 10px
+
  color: #dde5ee;
−
        color: lighten($color-highlight, 20%)  
+
  border-collapse: collapse; }
 +
  .notebook table td, .article table td {
 +
    background-color: transparent;
 +
    border: 1px solid rgba(221, 229, 238, 0.5);
 +
    padding: 3px 5px; }
  
−
    .answer
+
.article table {
−
        margin-bottom: 30px
+
  width: 100%;
 +
  margin-bottom: 30px; }
 +
  .article table td {
 +
    padding: 10px 13px; }
  
−
        img
+
.notebook {
−
            max-width: 100%
+
  color: #dde5ee;
 +
  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; }
  
−
.experiment
+
.notebook-red .bullet {
−
    @extend %clearfix
+
  box-shadow: 0 0 5px #fff, 0 0 10px #ea2d30, 0 0 15px #ea2d30, 0 0 17px #ea2d30, 0 0 30px #ea2d30; }
  
−
    .time
+
.notebook-blue a {
−
        text-align: center
+
  color: #50b1be; }
−
        padding-bottom: 30px
+
  
−
        i
+
.notebook-blue .details {
−
            padding-right: 7px
+
  border-left: 3px solid #50b1be; }
  
 +
.notebook-blue .last .details {
 +
  border-left: 0px none; }
  
−
    .ingredients, .tools
+
.notebook-blue .bullet {
−
        width: 50%
+
  box-shadow: 0 0 5px #fff, 0 0 10px #50b1be, 0 0 15px #50b1be, 0 0 17px #50b1be, 0 0 30px #50b1be; }
−
        float: left
+
−
        padding-left: 5%
+
−
        li
+
−
            text-align: left
+
−
   
+
  
 +
.actions {
 +
  text-align: center;
 +
  padding: 50px; }
 +
  .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>

Revision as of 03:53, 18 October 2018