simple.less

@sticky-yellow: #ffd93a;
@sticky-orange: #fbad4b;
@sticky-green: #e3e546;
@sticky-blue: #73cac4;
@sticky-red: #f2788f;
@sticky-purple: #a2509a;

@wall-color-base: #ebebeb;
@wall-height: calc(100vh - @ceiling-height);

@left-wall-width: 10vw;
@left-wall-color: lighten(@wall-color-base, 5%);

@ceiling-height: 7vh;
@ceiling-color: darken(@wall-color-base, 2%);

@main-wall-color: lighten(@wall-color-base, 25%);

@border-radius: 3px;

body {
  font: normal x-small verdana,arial,helvetica,sans-serif;
  margin: 0;
  font-size: 16px;
  background: @left-wall-color;
}

* {
  box-sizing: border-box;
}

video,
img {
  max-width: 100%;
}

input,
textarea {
  border: 0;
  padding: 5px;
  width: 100%;
  margin: 5px 0;
  background: fade(white, 50%);
  border-radius: @border-radius;
  font-family: 'Caveat', cursive;
  font-size: inherit;

  &::placeholder {
    font: normal x-small verdana,arial,helvetica,sans-serif;
  }
}

textarea {
  resize: none;
}

button {
  margin: 0;
  padding: 5px;
  margin: 5px;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
}

#erika-shreddy {
  position: fixed;
  right: 0;
  bottom: -@ceiling-height;
  z-index: 100;
  display: flex;
  align-items: flex-end;
}

#erika {
  width: 200px;
  z-index: 102;

  @media (min-width: 768px) {
    width: 350px;
  }
}

#shreddy {
  @width: 379px / 2;
  @height: 464px / 2;
  @top: @height / 2;
  @right: calc(@width / 3);

  position: relative;
  top: @top;
  right: 40px;
  width: @width/2;
  height: @height/2;
  z-index: 101;

  @media (min-width: 768px) {
    top: @top;
    right: @right;
    width: @width;
    height: @height;
  }

  &.jump {
    animation: jump 2s cubic-bezier(.22,.61,.36,1);
    transform-origin: center bottom;

    @keyframes jump {
      20% {
        top: 0;
        transform: rotate(5deg);
      }

      30% {
        top: 0;
        transform: rotate(-5deg);
      }

      40% {
        top: 0;
        transform: rotate(5deg);
      }

      70% {
        top: @top;
        transform: rotate(0);
      }
    }
  }
}

#new-sticky-form button[type="submit"] {
  background-color: grey;
  color: white;
  width: 100%;
  margin: 5px 0 0;

  &:hover {
    background-color: black;
  }
}

#wall-container {
  position: absolute;
  left: @left-wall-width;
  top: @ceiling-height;
  width: calc(100vw - @left-wall-width);
  height: @wall-height;
  overflow-y: scroll;
  z-index: 100;
  background: @main-wall-color;
}

#wall {
  @margin-side-x: 20px; 
  @margin-side-y: 20px;

  display: flex;
  flex-flow: row wrap;
  padding: 20px 10px 300px 10px;
  margin: @margin-side-y 0 0 @margin-side-x;
  width: calc(100% - @margin-side-x);
  min-height: @wall-height;
  background: url(assets/rice-paper-2.png) 200px 200px repeat #9e8c7f;
}


#new-sticky-form {
  input[type="radio"] {
    width: auto;
  }

  .color-block {
    display: inline-block;

    label {
      display: inline-block;
      width: 15px;
      height: 15px;
      margin: 0 5px;
      vertical-align: middle;
    }
  }
}

.color-block label[for="bg-color-yellow"] {
  background: @sticky-yellow;
}

.sticky-note.orange,
.color-block label[for="bg-color-orange"] {
  background: @sticky-orange;
}

.sticky-note.green,
.color-block label[for="bg-color-green"] {
  background: @sticky-green;
}

.sticky-note.blue,
.color-block label[for="bg-color-blue"] {
  background: @sticky-blue;
}

.sticky-note.red,
.color-block label[for="bg-color-red"] {
  background: @sticky-red;
}

.sticky-note.purple,
.color-block label[for="bg-color-purple"] {
  background: @sticky-purple;
}

.sticky-note {
  @side-padding: 15px;
  @side-margin: 15px;
  @base-width: 300px;
  @max-height: 270px;

  flex: auto;
  max-width: 100%;
  min-height: 150px;
  margin: @side-margin;
  font-family: 'Caveat', cursive;
  background: @sticky-yellow;
  display: inline-block;
  padding: @side-padding;
  box-shadow: 7px 7px 0px rgba(50, 50, 50, 0.3);
  font-size: 20px;
  animation: stickon 100ms cubic-bezier(.6,.04,.98,.34);

  @keyframes stickon {
    from {
      transform: scale(3);
    }

    to {
      transform: scale(1);
    }
  }

  @media (min-width: 768px) {
    max-width: 300px;
    max-height: @max-height;
  }

  &.has-media {
    @media (min-width: 768px) {
      max-width: @base-width * 2 - 200px;

      img {
        border-radius: @border-radius;
        margin-right: 10px;
        max-width: 50%;
        max-height: calc(@max-height - @side-padding*2);
        float: left;
        transition: all .3s ease-in-out;

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

  &:nth-child(even) {
    transform: rotate(-2deg);
    position: relative;
    top: -2px;
  }

  &:nth-child(3n) {
    transform: rotate(1deg);
    position: relative;
    top: 0;
  }

  &:nth-child(5n) {
    transform: rotate(2deg);
    position: relative;
    top: -1px;
  }

  &:nth-child(7n) {
    transform: rotate(-1deg);
    position: relative;
    top: -2px;
  }

  &:nth-child(10n) {
    transform: rotate(0deg);
    position: relative;
    top: 0px;
  }

  .submitter {
    float: right;
  }
}

#ceiling {
  width: calc(100% - @left-wall-width);
  height: @ceiling-height;
  background: @ceiling-color;
  position: absolute;
  z-index: 1;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

#ceiling:before {
  content: '';
  position: absolute;
  top: 0px;
  left: calc((@left-wall-width / 4 * -1) + 1px);
  z-index: 2;
  border-bottom: @ceiling-height solid transparent; // height
  border-right: calc(@left-wall-width / 4) solid @ceiling-color; // width
  width: 0px;
}

#left-wall {
  height: calc(100vh - @left-wall-width);
  width: @left-wall-width;
  position: absolute;
  left: 0px;
  z-index: 1;
}