tor-browser

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

_PersonalizedCard.scss (3093B)

      1 .personalized-card-wrapper {
      2  background-color: var(--background-color-canvas);
      3  border: 2px solid var(--border-color-card);
      4  color: var(--text-color);
      5  padding: var(--space-xxlarge);
      6  border-radius: var(--border-radius-large);
      7  margin: var(--space-xlarge) 0;
      8  position: relative;
      9 
     10  .personalized-card-dismiss {
     11    position: absolute;
     12    inset-inline-end: var(--space-medium);
     13    inset-block-start: var(--space-medium);
     14  }
     15 
     16  .personalized-card-inner {
     17    display: grid;
     18    grid-template-columns: 0.5fr 1fr 1fr 1fr;
     19    align-items: start;
     20 
     21    .personalized-card-cta-wrapper {
     22      display: flex;
     23      flex-direction: column;
     24      gap: var(--space-medium);
     25    }
     26 
     27    img {
     28      max-width: 200px;
     29      max-height: 200px;
     30      object-fit: contain;
     31      justify-self: center;
     32      align-self: start;
     33    }
     34 
     35    h2, p {
     36      margin-block-start: 0;
     37    }
     38 
     39    h2 {
     40      font-size: var(--font-size-xxlarge);
     41      font-weight: var(--heading-font-weight);
     42    }
     43 
     44    .personalized-card-link {
     45      color: var(--link-color);
     46      font-size: var(--font-size-small);
     47    }
     48 
     49    // 1-column layout
     50    @media (max-width: $break-point-layout-variant) {
     51      grid-template-columns: 1fr;
     52      gap: var(--space-large);
     53 
     54      img {
     55        width: 100px;
     56        justify-self: initial;
     57      }
     58 
     59      h2 {
     60        margin-block-end: var(--space-xsmall);
     61      }
     62    }
     63 
     64    // 2-column layout
     65    @media (min-width: $break-point-layout-variant){
     66      grid-template-columns: 0.2fr 1fr 1.2fr;
     67      gap: var(--space-large);
     68 
     69      img {
     70        width: 130px;
     71        align-self: end;
     72        grid-row: 1 / span 2;
     73      }
     74 
     75      .personalized-card-cta-wrapper {
     76        align-items: center;
     77        display: grid;
     78        grid-template-columns: subgrid;
     79        grid-row: 2;
     80        grid-column: 2 / span 2;
     81        padding-block-end: var(--space-xxlarge);
     82      }
     83 
     84      p {
     85        width: 210px;
     86        margin: 0;
     87      }
     88 
     89      h2 {
     90        margin: 0;
     91      }
     92    }
     93 
     94    // 3 and 4-column layout
     95    @media (min-width: $break-point-widest) {
     96      grid-template-columns: 0.2fr 1.2fr 0.8fr 1fr;
     97      gap: var(--space-large);
     98 
     99      img {
    100        width: 100px;
    101        align-self: end;
    102      }
    103 
    104      h2 {
    105        grid-column:  2;
    106        grid-row: 1;
    107        width: initial;
    108      }
    109 
    110      p {
    111        grid-column:  3;
    112        grid-row: 1;
    113        width: 400px;
    114      }
    115 
    116      .personalized-card-cta-wrapper {
    117        grid-column: 4;
    118        grid-row: 1;
    119        display: flex;
    120        flex-direction: column;
    121        justify-self: end;
    122        gap: var(--space-medium);
    123        width: max-content;
    124        margin-inline-end: var(--space-medium);
    125      }
    126 
    127      .personalized-card-cta {
    128        align-self: baseline;
    129      }
    130    }
    131 
    132    // rules for 3-col
    133    @media (min-width: $break-point-widest) and (max-width: $break-point-sections-variant) {
    134      grid-template-columns: 0.2fr 1fr 1fr 1fr;
    135 
    136      h2 {
    137        max-width: 200px;
    138      }
    139 
    140      p {
    141        width: 300px;
    142      }
    143    }
    144  }
    145 
    146  @media (min-width: $break-point-layout-variant) {
    147    padding-block-end: 0;
    148  }
    149 }