packages/styles/scss/components/_sticky-title.scss

   1 .container-section-sticky {
   2         padding-block: 0;
   3         padding-inline: 2em;
   4         inline-size: 100%;
   5         max-inline-size: 120ch; // avoid too long lines
   6         margin-inline: auto auto;
   7
   8         @include media('>xlarge') {
   9                 max-inline-size: 75vw;
  10         }
  11
  12         &--full-width {
  13                 max-inline-size: none;
  14         }
  15
  16         &-section {
  17                 margin-block-end: rem(80);
  18
  19                 &--single-calendar-section {
  20                         // temporary margin by hand until better global solution found
  21                         margin-block-start: em(54);
  22
  23                         @include media('<=small') {
  24                                 // full alignment not possible
  25                                 margin-block-start: 0;
  26                         }
  27                 }
  28         }
  29 }
  30
  31 /* trick for fixing anchor links */
  32 .header-height-anchor {
  33         position: absolute;
  34         inset-block-start: -#{rem(100)};
  35 }
  36
  37 // not sticky on mobile
  38 @include media('<=small') {
  39         .container-section-sticky-section {
  40                 margin-block-end: rem(80);
  41         }
  42
  43         .header-height-anchor {
  44                 position: static;
  45                 inset-block-start: 0;
  46         }
  47 }