<commit_before>@import "won-config";
@import "sizing-utils";
@import "fonts";
@import "flex-layout";

main.owneroverview {
  grid-column: 1 / -1;
  padding: 0;
  box-sizing: border-box;
  align-items: stretch;
  max-width: $maxContentWidth;
  width: 100%;
  margin: 0 auto;

  & .owneroverview__header {
    display: grid;
    grid-template-columns: 1fr min-content;
    grid-gap: 0.5rem;
    border-bottom: $thinGrayBorder;
    padding: 0.5rem;

    &__title {
      font-size: $mediumFontSize;
    }

    &__loading {
      font-size: $smallFontSize;
      color: $won-line-gray;
    }

    &__updated {
      display: grid;
      grid-template-columns: min-content min-content;
      grid-gap: 0.5rem;
      align-items: center;

      font-size: $smallFontSize;

      &__time {
        white-space: nowrap;
        color: $won-line-gray;
      }

      &__reload.won-button--filled.red {
        padding: 0.25rem;
      }
    }
  }

  .owneroverview__content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 0.5rem;
    padding: 0.5rem;

    @media (max-width: $responsivenessBreakPoint) {
      grid-template-columns: 1fr;
    }

    won-post-header.owneroverview__content__need {
      cursor: pointer;
      border: $thinGrayBorder;
      background: $won-light-gray;
      padding: 0.5rem;
    }
  }
  /*
  //TODO: Once we figured out how we want to display need-cards we can use this instead<commit_msg>Minor restyling on overview elements<commit_after>@import "won-config";
@import "sizing-utils";
@import "fonts";
@import "flex-layout";

main.owneroverview {
  grid-column: 1 / -1;
  padding: 0;
  box-sizing: border-box;
  align-items: stretch;
  max-width: $maxContentWidth;
  width: 100%;
  margin: 0 auto;

  & .owneroverview__header {
    display: grid;
    grid-template-columns: 1fr min-content;
    grid-gap: 0.5rem;
    border-bottom: $thinGrayBorder;
    padding: 0.5rem;
    align-items: center;

    &__title {
      font-size: $mediumFontSize;
    }

    &__loading {
      font-size: $smallFontSize;
      color: $won-line-gray;
    }

    &__updated {
      display: grid;
      grid-template-columns: min-content min-content;
      grid-gap: 0.5rem;
      align-items: center;

      font-size: $smallFontSize;

      &__time {
        white-space: nowrap;
        color: $won-line-gray;
      }

      &__reload.won-button--filled.red {
        font-size: 0.75rem;
        padding: 0.25rem;
      }
    }
  }

  .owneroverview__content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 0.5rem;
    padding: 0.5rem;

    @media (max-width: $responsivenessBreakPoint) {
      grid-template-columns: 1fr;
    }

    won-post-header.owneroverview__content__need {
      cursor: pointer;
      border: $thinGrayBorder;
      background: $won-light-gray;
      padding: 0.5rem;
    }
  }
  /*
  //TODO: Once we figured out how we want to display need-cards we can use this instead
{'fraction_non_alphanumeric': 0.12694651320243738, 'fraction_numerical': 0.01929587000677048, 'mean_word_length': 2.3810068649885583, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2652842', 'n_tokens_mistral': 1099, 'n_tokens_neox': 1016, 'n_words': 219}