vikunja-frontend/src/styles/components/namespaces.scss

$lists-per-row: 5;

.namespaces-list {
  .button.new-namespace {
    float: right;

    @media screen and (max-width: $mobile) {
      float: none;
      width: 100%;
      margin-bottom: 1rem;
    }
  }

  .show-archived-check {
    margin-bottom: 1rem;
  }

  .namespace {
    margin-bottom: 1rem;

    h1 {
      display: flex;
      align-items: center;
    }

    .is-archived {
      font-size: 0.75rem;
      border: 1px solid $grey;
      color: $grey !important;
      padding: 2px 4px;
      margin-left: .5rem;
      border-radius: 3px;
      font-family: $vikunja-font;
      background: rgba($white, 0.75);
    }

    .lists {
      display: flex;
      flex-flow: row wrap;

      .list {
        width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
        height: 150px;
        background: $white;
        margin: 0 1rem 1rem 0;
        padding: 1rem;
        border-radius: $radius;
        box-shadow: 0.3em 0.3em 1em lighten($dark, 75);
        transition: box-shadow $transition;

        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        &:hover {
          box-shadow: 0 0 1em lighten($dark, 65);
        }

        @media screen and (min-width: $widescreen) {
          &:nth-child(#{$lists-per-row}n) {
            margin-right: 0;
          }
        }

        @media screen and (max-width: $widescreen) and (min-width: $tablet) {
          $lists-per-row: 3;
          & {
            width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
          }

          &:nth-child(#{$lists-per-row}n) {
            margin-right: 0;
          }
        }

        @media screen and (max-width: $tablet) {
          $lists-per-row: 2;
          & {
            width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
          }

          &:nth-child(#{$lists-per-row}n) {
            margin-right: 0;
          }
        }

        @media screen and (max-width: $mobile) {
          $lists-per-row: 1;
          & {
            width: 100%;
            margin-right: 0;
          }
        }

        .is-archived-container {
          width: 100%;
          text-align: right;

          .is-archived {
            font-size: .75em;
          }
        }

        .title {
          align-self: flex-end;
          font-family: $vikunja-font;
          font-weight: 400;
          font-size: 1.5rem;
          color: $text;
          width: 100%;
          margin-bottom: 0;
        }

        &.has-light-text .title {
          color: $light;
        }

        &.has-background {
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;

          .title {
            text-shadow: 0 0 10px $black, 1px 1px 5px $grey-darker, -1px -1px 5px $grey-darker;
            color: $white;
          }
        }
      }
    }
  }
}