_timeline.scss 1.37 KB
Newer Older
Michael Heinemann's avatar
Michael Heinemann committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
#timeline{
  display: flex;
  justify-content: space-between;
  margin: 1.8rem 0;

  a{
    @include relative-font-size(0.900);
    text-decoration: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 140px;
    box-sizing: border-box;
    height: 140px;
    color: $brand-color;
    border:8px solid $brand-color;
    font-weight: 700;
    border-radius: 50%;

    .startdate{
      font-style: italic;
      @include relative-font-size(0.750);
    }

    i{
      display: none;
    }

    &:hover{
      i{
        display: inline;
        color: $hoou_blue;
      }
      span{
        display: none;
      }
      border-color: $hoou_blue;
    }

    .lawSymbol{
      font-size: 4.5rem;
      font-style: normal;
      font-weight: 700;
    }

    .startdate{
      display: none;
    }

    &[href="#"]{
      pointer-events: none;
      cursor: default;
      color: $brand-color;
      background-color: lighten($hoou_blue, 53%);
      border-color: lighten($hoou_blue, 53%);

      .startdate{
        display: inline;
      }
    }
  }

  @include media-query($on-laptop) {
    flex-wrap: wrap;
    a{
      margin-bottom: 1rem;
    }
  }

  @include media-query($on-palm) {
    flex-wrap: wrap;
    justify-content: space-between;
    justify-content: center;

    a{
      margin: 1rem;
    }
  }
}