footer {
  & > div {
    min-height: 301px;
    padding: 1rem;
  }

  & > .off {
    border-top: 10px solid $animal;
  }

  & > .app {
    border-top: 10px solid $cereal;

    a {
      padding: 5px;
      display: block;
      float: left;
      height: 70px;
      width: 160px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  & > .project {
    border-top: 10px solid $plant;
  }

  & > .community {
    border-top: 10px solid $dark-fish;
  }

  .title {
    font-size: 1.25rem;
    margin-bottom: 5px;
  }
}

.sharebuttons {
  li {
    text-align: center;
    width: 100px;
  }
}

footer {
  & > div {
    min-height: 301px;
    padding: 1rem;
  }

  & > .off {
    border-top: 10px solid $animal;
  }

  & > .app {
    border-top: 10px solid $cereal;

    a {
      padding: 5px;
      display: block;
      float: left;
      height: 70px;
      width: 160px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  & > .project {
    border-top: 10px solid $plant;
  }

  & > .community {
    border-top: 10px solid $dark-fish;
  }

  .title {
    font-size: 1.25rem;
    margin-bottom: 5px;
  }
}

.sharebuttons {
  li {
    text-align: center;
    width: 100px;
  }
}

html[dir="rtl"] footer {
  & > .off {
    border-top: 10px solid $dark-fish;
  }

  & > .app {
    border-top: 10px solid $plant;
  }

  & > .project {
    border-top: 10px solid $cereal;
  }

  & > .community {
    border-top: 10px solid $animal;
  }
}

Make footer colours to be the same direction in RTL as in LTR. They're baesd on the logo's colour scheme, which is not updated for separate languages.
chg: Make footer colours to be the same direction in RTL as in LTR. They're baesd on the logo's colour scheme, which is not updated for separate languages.
