[Summary view] [Print] [Text view]

   1  // Global
   2  :root {
   3    scroll-behavior: smooth;
   4    font-size: $font-size-root;
   5  
   6    // Disable smooth scroll when the user has set "prefers-reduced-motion"
   7    @media screen and (prefers-reduced-motion: reduce) {
   8      scroll-behavior: auto;
   9    }
  10  }
  11  
  12  html {
  13    background-color: $white;
  14  }
  15  
  16  body {
  17    position: relative;
  18    min-height: 100vh;
  19  }
  20  
  21  img {
  22    max-width: 100%;
  23    height: auto;
  24  }
  25  
  26  h1,
  27  h2,
  28  h3,
  29  h4,
  30  h5,
  31  h6 {
  32    font-family: var(--cassiopeia-font-family-headings, $font-family-sans-serif);
  33    font-weight: var(--cassiopeia-font-weight-headings, $font-weight-bold);
  34  }
  35  
  36  .display-1 {
  37    font-size: clamp(2.7rem, 8vw, 5.5rem);
  38  }
  39  
  40  .display-2 {
  41    font-size: clamp(2.3rem, 7vw, 4.5rem);
  42  }
  43  
  44  .display-3 {
  45    font-size: clamp(1.9rem, 6vw, 3.5rem);
  46  }
  47  
  48  .display-4 {
  49    font-size: clamp(1.5rem, 5vw, 2.5rem);
  50  }
  51  
  52  .lead {
  53    font-size: clamp(1.1rem, 3vw, 1.25rem);
  54  }
  55  
  56  a {
  57    color: var(--cassiopeia-color-link);
  58  
  59    &:not([class]) {
  60      text-decoration: underline;
  61    }
  62  
  63    &:hover,
  64    &:focus {
  65      color: var(--cassiopeia-color-hover);
  66    }
  67  
  68    &.navbar-brand {
  69      color: var(--cassiopeia-color-brand);
  70    }
  71  }
  72  
  73  .btn-primary {
  74    background-color: var(--cassiopeia-color-primary);
  75    border-color: var(--cassiopeia-color-primary);
  76  
  77    &:hover,
  78    &:focus {
  79      background-color: var(--cassiopeia-color-hover);
  80      border-color: var(--cassiopeia-color-hover);
  81    }
  82  }
  83  
  84  .btn-group {
  85    margin-bottom: $cassiopeia-grid-gutter;
  86    > input {
  87      padding: $cassiopeia-grid-gutter * .5;
  88      border: 1px solid $gray-400;
  89      @include border-start-radius($border-radius);
  90      @include border-end-radius(0);
  91    }
  92    > .btn-group {
  93      margin-bottom: 0;
  94    }
  95  }
  96  
  97  [dir="rtl"] .btn-group {
  98    > input {
  99      @include border-end-radius($border-radius);
 100      @include border-start-radius(0);
 101    }
 102  }
 103  
 104  .com-content-article {
 105    ol,
 106    ul {
 107      overflow: hidden;
 108    }
 109  }
 110  
 111  .com-content-category__pagination {
 112    margin-bottom: $cassiopeia-grid-gutter;
 113  }
 114  
 115  small,
 116  .small {
 117    font-size: $font-size-sm;
 118  }
 119  
 120  dd {
 121    padding: 0;
 122    word-wrap: break-word;
 123  }
 124  
 125  [dir="rtl"] dd {
 126    margin-right: 0;
 127    margin-left: auto;
 128  }
 129  
 130  th dd {
 131    font-weight: var(--cassiopeia-font-weight-normal, $font-weight-normal);
 132  }
 133  
 134  .com-contact__thumbnail {
 135    text-align: left;
 136  }
 137  
 138  @include media-breakpoint-up(xl) {
 139    dl.dl-horizontal {
 140      display: grid;
 141      grid-template-columns: auto 1fr;
 142  
 143      dt {
 144        grid-column-start: 1;
 145        grid-column-end: 2;
 146      }
 147  
 148      dd {
 149        grid-column-start: 2;
 150        grid-column-end: 3;
 151        padding: 0 0 0 $cassiopeia-grid-gutter;
 152        margin-bottom: 0;
 153      }
 154    }
 155  
 156    .com-contact__container {
 157      display: grid;
 158      grid-template-columns: repeat(4, 1fr);
 159      grid-template-rows: repeat(4, auto);
 160      grid-gap: 1rem;
 161      margin-bottom: $cassiopeia-grid-gutter;
 162  
 163      h3 {
 164        grid-column: 1 / 5;
 165      }
 166  
 167      .com-contact__thumbnail {
 168        grid-column: 3 / 5;
 169        grid-row: 2 / 5;
 170        margin-bottom: $cassiopeia-grid-gutter;
 171        text-align: right;
 172      }
 173  
 174      .com-contact__position {
 175        grid-column: 1 / 3;
 176        grid-row: 2 / 3;
 177      }
 178  
 179      .com-contact__info {
 180        grid-column: 1 / 3;
 181        grid-row: 3 / 4;
 182      }
 183    }
 184  
 185    [dir="rtl"] dl.dl-horizontal {
 186      dd {
 187        padding: 0 $cassiopeia-grid-gutter 0 0;
 188      }
 189    }
 190  
 191    .com-users-profile {
 192      dt {
 193        min-width: 180px;
 194      }
 195    }
 196  }
 197  
 198  figure {
 199    margin: 0 0 ($cassiopeia-grid-gutter*2);
 200    &.float-start {
 201      margin-right: $cassiopeia-grid-gutter;
 202    }
 203    &.float-end {
 204      margin-left: $cassiopeia-grid-gutter;
 205    }
 206    [dir="rtl"] &.float-start {
 207      margin-right: 0;
 208      margin-left: $cassiopeia-grid-gutter;
 209    }
 210    [dir="rtl"] &.float-end {
 211      margin-right: $cassiopeia-grid-gutter;
 212      margin-left: 0;
 213    }
 214  }
 215  
 216  figcaption {
 217    font-size: .9em;
 218    color: $gray-600;
 219  }
 220  
 221  .mod-menu {
 222    flex-direction: column;
 223  }
 224  
 225  // meter element
 226  meter {
 227    width: 100%;
 228  }
 229  
 230  .pagenavigation,
 231  .pager {
 232    clear: both;
 233    .pagination {
 234      justify-content: space-between;
 235      padding: 0;
 236      margin: $cassiopeia-grid-gutter 0;
 237  
 238      li.next:only-child {
 239        margin-left: auto;
 240      }
 241  
 242      [dir="rtl"] &>li.next:only-child {
 243        margin-right: auto;
 244        margin-left: $cassiopeia-grid-gutter;
 245      }
 246    }
 247  }
 248  
 249  .page-link {
 250    color: var(--cassiopeia-color-link);
 251    &:hover {
 252      color: var(--cassiopeia-color-link);
 253    }
 254  }
 255  
 256  .pager {
 257    .pagination {
 258      justify-content: center;
 259    }
 260  }
 261  
 262  [dir="rtl"] li.next .page-link {
 263    border-top-left-radius: .25rem;
 264    border-top-right-radius: 0;
 265    border-bottom-right-radius: 0;
 266    border-bottom-left-radius: .25rem;
 267  }
 268  
 269  [dir="rtl"] li.previous .page-link {
 270    border-top-left-radius: 0;
 271    border-top-right-radius: .25rem;
 272    border-bottom-right-radius: .25rem;
 273    border-bottom-left-radius: 0;
 274  }
 275  
 276  .article-index {
 277    .toclink.active {
 278      color: currentColor;
 279    }
 280  }
 281  
 282  // Bootstrap 4 b/c
 283  .sr-only {
 284    @extend .visually-hidden;
 285  }