tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

_Sections.scss (2416B)

      1 .sections-list {
      2  .section-list {
      3    display: grid;
      4    grid-gap: var(--space-xxlarge);
      5    grid-template-columns: repeat(auto-fit, $card-width);
      6    margin: 0;
      7 
      8    @media (max-width: $break-point-medium) {
      9      @include context-menu-open-left;
     10    }
     11 
     12    @media (min-width: $break-point-medium) and (max-width: $break-point-large) {
     13      :nth-child(2n) {
     14        @include context-menu-open-left;
     15      }
     16    }
     17 
     18    @media (min-width: $break-point-large) and (max-width: $break-point-large + 2 * $card-width) {
     19      :nth-child(3n) {
     20        @include context-menu-open-left;
     21      }
     22    }
     23 
     24    @media (min-width: $break-point-widest) and (max-width: $break-point-widest + 2 * $card-width) {
     25      // 3n for normal cards, 4n for compact cards
     26      :nth-child(3n),
     27      :nth-child(4n) {
     28        @include context-menu-open-left;
     29      }
     30    }
     31  }
     32 
     33  .section-empty-state {
     34    border: 1px solid var(--border-color);
     35    border-radius: var(--border-radius-small);
     36    display: flex;
     37    height: $card-height;
     38    width: 100%;
     39 
     40    .empty-state {
     41      margin: auto;
     42      max-width: 350px;
     43 
     44      .empty-state-message {
     45        color: var(--newtab-text-primary-color);
     46        font-size: var(--font-size-small);
     47        margin-block-end: 0;
     48        text-align: center;
     49      }
     50    }
     51 
     52    @media (min-width: $break-point-widest) {
     53      height: $card-height-large;
     54    }
     55  }
     56 }
     57 
     58 .top-stories-bottom-container {
     59  color: var(--newtab-text-primary-color);
     60  font-size: var(--font-size-small);
     61  margin-block-start: var(--space-medium);
     62  display: flex;
     63  justify-content: space-between;
     64 
     65  a {
     66    color: var(--newtab-primary-action-background);
     67    font-weight: var(--font-weight-semibold);
     68 
     69    &.more-recommendations {
     70      font-weight: var(--font-weight);
     71      font-size: var(--font-size-small);
     72    }
     73  }
     74 
     75  .wrapper-topics {
     76    @media (max-width: $break-point-large - 1) {
     77      display: none;
     78    }
     79  }
     80 
     81  @media (max-width: $break-point-medium - 1) {
     82    .wrapper-more-recommendations {
     83      width: 100%;
     84 
     85      .more-recommendations {
     86        justify-content: center;
     87 
     88        &::after {
     89          display: none;
     90        }
     91      }
     92    }
     93  }
     94 }
     95 
     96 @media (min-width: $break-point-widest) {
     97  .sections-list {
     98    // Compact cards stay the same size but normal cards get bigger.
     99    .normal-cards {
    100      .section-list {
    101        grid-template-columns: repeat(auto-fit, $card-width-large);
    102      }
    103    }
    104  }
    105 }