@import "breakpoint";


#server-list {
  /**
   * 1 card per row
   */
  .ui.cards > .card {
    width: 100%;
  }

  /**
   * 2 cards per row
   */
  @include respond-to('bigger than small') {
    .ui.cards {
      margin-left: -1em;
      margin-right: -1em;
    }

    .ui.cards > .card {
      width: calc( 50%  -  2em );
      margin-left: 1em;
      margin-right: 1em;
    }
  }

  /**
   * 4 cards per row
   */
  @include respond-to('bigger than small-medium') {
    .ui.cards {
      margin-left: -0.75em;
      margin-right: -0.75em;
    }

    .ui.cards > .card {
      width: calc( 25%  -  1.5em );
      margin-left: 0.75em;
      margin-right: 0.75em;
    }
  }


  .card .content {
    .header, .meta {
      word-break: break-all;
    }
  }
}

@import "breakpoint";


#server-list {
  /**
   * 1 card per row
   */
  .ui.cards > .card {
    width: 100%;
  }

  /**
   * 2 cards per row
   */
  @include respond-to('bigger than small') {
    .ui.cards {
      margin-left: -1em;
      margin-right: -1em;
    }

    .ui.cards > .card {
      width: calc( 50%  -  2em );
      margin-left: 1em;
      margin-right: 1em;
    }
  }

  /**
   * 4 cards per row
   */
  @include respond-to('bigger than small-medium') {
    .ui.cards {
      margin-left: -0.75em;
      margin-right: -0.75em;
    }

    .ui.cards > .card {
      width: calc( 25%  -  1.5em );
      margin-left: 0.75em;
      margin-right: 0.75em;
    }
  }


  .card .content {
    .header, .meta {
      word-break: break-all;
    }
  }
}

body.dark-theme #server-list {
  .header {
    color: #fff;
  }

  .meta {
    color: #fff;
  }
}

Fix coloring of server list items in dark mode
Fix coloring of server list items in dark mode

Signed-off-by: Matthew Peveler <ceb7192332cc0210660ce4c985cae5ba0e431884@gmail.com>
