@import "colours";

@double-width: (450px * 2 + 30px);

html, body {
  background-color: @main-bg;
}

::-webkit-scrollbar {
  display: none;
}

ul.pagination {
  display: none;
}

div.posts {
  min-height: 30px;
  margin: auto;
  margin-top: 70px;
  padding: 15px;
  padding-top: 0px;
  max-width: 100%;

  .grid-item {
    width: 450px;
    background-color: white;
    margin: 15px 0;
    padding: 15px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 1px;

    &.post {
      padding-left: 0px;
      padding-right: 0px;
    }

    &.expanded {
      width: (450px * 2 + 30px); // +30 to compensate for gutter which it goes over
      box-shadow: 0px 0px 115px -19px rgba(0,0,0,0.16);

      .expand-button {
        display: none;
      }
    }

    .expand-button {
      position: absolute;
      width: 15px;
      font-size: 14px;
      text-align: center;
      top: 9px;
      right: 9px;
      cursor: pointer;

      i {
        display: inline-block;
        position: relative;
        transition-duration: 0.2s;
        bottom: 0;
        color: @greyed;
      }

      &:hover >i {
        transform: scale(1.3) rotate(225deg);
        color: #757575;
      }

      &:active >i {
        transform: scale(0.9) rotate(225deg);
        transition-duration: 0.15s;
      }
    }

    .tags-wrapper {
      position: absolute;
      height: 22px;
      max-height: 22px;
      width: 82%;
      max-width: 82%;
      top: 3.5px;
      left: 10px;
      cursor: default;
      overflow: hidden;
      font-size: 11px;
      line-height: 22px;

      span.tag {
        display: inline-block;
        height: 100%;
        line-height: 22px;
        padding: 0 3px;
        color: @greyed;
        font-size: 11px;
        cursor: pointer;
        transition-duration: 0.15s;

        &:hover {
          color: @accent;
          font-weight: bold;
        }
      }
    }

    .content {
      &.expanded {
        max-height: 6000px;
      }

      font-size: 14px;
      max-height: 500px;
      margin-bottom: 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 2px 0;
      word-wrap: break-word;
      background-color: white;

      img {
        max-width: 100%;
        max-height: 600px;
        display: block;

        &:first-child {
          margin-top: 15px;
        }
      }

      h1, h2, h3, h4, h5, h6 {
        margin: auto 15px;
        margin-top: 10px;
      }

      p {
        text-align: left;
        padding: 15px;

        code {
          color: #383838;
          font-size: 13px;
          background-color: #e6e6e6;
          padding: 1px 5px;
        }
      }

      pre {
        overflow: hidden;
        background-color: #282C34;
        padding-right: 0;
        font-family: 'Inconsolata', monospace;
        padding: 30px 15px;
      }

      code {
        padding: 15px;
        color: #ABB2BF;
        font-size: 15px;
        font-family: 'Inconsolata', monospace;
        * {
          font-family: 'Inconsolata', monospace;
        }
        &.hljs {
          margin: -15px;
        }
      }

      table {
        margin: 15px 10px;
        border-spacing: 0px;
        border: 1px solid @borderlight;
      }

      th {
        background-color: #ececec;
      }

      th, td {
        padding: 10px 15px;
      }

      tbody tr:nth-child(even) {
        background-color: #f4f4f4;
      }

      hr {
        border: none;
        border-top: 2px solid @borderlight;
        margin: 15px 50px;
      }
    }

    .by {
      cursor: pointer;
      display: inline-block;
      float: right;
      font-size: 15px;
      font-weight: bold;
      max-width: 90px;
      height: 18px;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      text-align: right;
      margin-right: 15px;
    }

    .date {
      display: inline-block;
      float: right;
      font-size: 15px;
      margin: 0 5px;
      color: @greyed;
    }

    .status {
      color: @greyed;
      margin-left: 15px;

      * {
        margin: 0 5px;
      }
      user-select: none;

      .likes {
        @keyframes heartbeat {
          20% {transform: scale(1);}
          26% {transform: scale(1.15);}
          40% {transform: scale(0.85)}
          53% {transform: scale(1.25);}
          67% {transform: scale(1);}
          100% {transform: scale(1);}
        }

        @keyframes like {
          60% {
            transform: scale(0.8);
          }
          80% {
            transform: scale(2)
          }
          100% {
            transform: scale(1);
          }
        }

        color: @greyed;
        * {
          color: @greyed;
        }
        cursor: pointer;

        span.scorecount {
          margin: 0;
          padding: 0;
        }

        &:hover>i {
          animation-name: heartbeat;
          animation-duration: 1s;
          animation-timing-function: linear;
          animation-iteration-count: infinite;
        }

        &.liked, &:hover {
          * {color: @like-colour;}
          color: @like-colour;
          font-weight: bold;
        }

        i {
          transition-duration: 0.2s;
        }
      }

      .edit i {
        transform: rotate(-45deg);

        @keyframes write {
          0% {transform: rotate(-45deg)}
          10% {transform: rotate(-45deg) translateY(-3.5px) translateX(3.5px)}
          30% {transform: rotate(0deg) translateY(-3.5px) translateX(4px)}
          50% {transform: rotate(0) translateY(0) translateX(0) scale(1.2)}
          100% {transform: rotate(0) translateY(0) translateX(0) scale(1.3);}
        }
      }

      .edit {
        cursor: pointer;
      }

      .edit:hover i {
        cursor: pointer;
        color: @edit-colour;
        animation-name: write;
        animation-duration: 0.5s;
        animation-timing-function: linear;
        animation-fill-mode: both;
      }

      .delete {
        cursor: pointer;
        position: absolute;
        top: 7.5px;
        right: 30px;

        i {
          transition-duration: 0.2s;
          font-size: 18px;
        }

        &:hover>i {
          transform: scale(1.3) rotate(10deg);
          color: @danger-colour;
        }

        &:active>i {
          transform: scale(0.8) rotate(-5deg);
          color: @danger-colour;
        }
      }

      .comments {
        @keyframes comments {
          0% {
            transform: scale(0) translateX(-15px) translateY(15px);
            opacity: 0;
            color: @comment-sec-colour;
          }
          12.5% {transform: scale(0.7) translateX(-1);}
          25% {
            transform: scale(1.5) translateX(0) translateY(0);
            opacity: 1;
          }
          37.5% {transform: scale(0.7) translateX(-1);}
          49% {
            transform: scale(0) translateX(15px) translateY(-15px);
            opacity: 0;
            color: @comment-sec-colour;
          }
          50% {
            transform: scale(0) scaleX(-1) translateX(-15px) translateY(15px);
            opacity: 0;
            color: @comment-colour;
          }
          62.5% {transform: scale(0.7) scaleX(-1) translateX(-1);}
          75% {
            transform: scale(1.5) scaleX(-1) translateX(0) translateY(0);
            opacity: 1;
          }
          88% {transform: scale(0.7) scaleX(-1) translateX(11);}
          100% {
            transform: scale(0) scaleX(-1) translateX(15px) translateY(-15px);
            opacity: 0;
            color: @comment-colour;
          }
        }
        * {color: @greyed;}
        color: @greyed;
        cursor: pointer;
        &:hover, &.liked {
          color: @comment-colour;
          font-weight: bold;
        }
        &:hover>i, &.liked>i {
          color: @comment-colour;
          animation-name: comments;
          animation-duration: 1.3s;
          animation-iteration-count: infinite;
        }
      }

      .bookmark>i {
        cursor: pointer;
        transition-duration: 0.15s;

        &:hover {
          color: @bookmark-colour;
          transform: translateY(-2.5px);
        }

        &:active {
          transform: translateY(2.6px);
        }

        &.bookmarked {
          color: @bookmark-colour;
        }
      }
    }

    .gridlink(@colour) {
      height: 210px;
      font-size: 30px;
      background-color: @colour;
      color: lighten(@colour, 40%);
      * {
        color: lighten(@colour, 50%);
      }
      padding: 30px;
      user-select: none;
      cursor: pointer;
      transition: background-color 0.3s;
      box-shadow: 0 0 0 0 @colour;
      border: 1px solid darken(@colour, 10%);

      &:hover {
        background-color: darken(@colour, 3%);
      }
    }

    &.newpost {
      .gridlink(@newpost-colour);
    }

    &.discover {
      .gridlink(@discover-colour);
    }

    &.writebio {
      .gridlink(@setbio-colour);
    }

    &.greeting {
      font-size: 60px;
      background-color: @greet-colour;
      color: @main-bg;
      height: 450px;
      width: @double-width;
      padding: 30px;
      user-select: none;
      cursor: default;

      * { color: @main-bg; }

      span.username {
        font-weight: bold;
      }

      span.details {
        text-align: center;
        font-size: 20px;
        position: absolute;
        bottom: 55px;
        display: inline-block;

        span.sect {
          display: inline-block;
          width: 120px;
          cursor: pointer;
          transition-duration: 0.3s;
          >*{transition-duration: 0.3s;}

          &:hover {
            transform: scale(1.2);
          }
        }
      }
    }
  }
}

button.loadposts {
  background-color: transparent;
  border: none;
  color: #4e4e4e;
  display: block;
  margin: 30px auto;
  font-size: 18px;
  cursor: pointer;
  transition-duration: 0.2s;
  outline: 0;
  user-select: none;

  &:hover {
    color: #7c7c7c;
    transform: scale(1.15);
  }

  &:active {
    transform: scale(0.8);
  }
}
