gent_styleguide 5.0.2 → 5.0.6

package/build/styleguide/sass/41-organisms/theme-footer/_theme-footer.scss

@@ -0,0 +1,216 @@
+.theme-footer {
+  @include theme('background-color', 'color-primary--lighten-5', 'theme-footer-background-color');
+  @include theme('border-color', 'color-primary--lighten-4', 'theme-footer-border-bottom-color');
+
+  width: calc(100% + (2 * #{$gutter-width}));
+  margin-right: -1rem;
+  margin-left: -1rem;
+  padding: 0;
+  border-bottom: 2px solid;
+
+  + .footer {
+    margin-top: 0;
+  }
+
+  .contact,
+  .newsletter,
+  .social,
+  .logo {
+    padding-top: 1.4rem;
+    padding-bottom: 1.4rem;
+
+    @include tablet {
+      padding-top: 2.4rem;
+      padding-bottom: 2.4rem;
+    }
+  }
+
+  .logo {
+    flex-shrink: 0;
+    text-align: center;
+
+    @include tablet {
+      margin-right: 2rem;
+      text-align: left;
+    }
+
+    img {
+      @include desktop-and-below {
+        margin-right: auto;
+        margin-left: auto;
+      }
+
+      width: auto;
+      height: 8rem;
+    }
+
+    + .newsletter,
+    + .social,
+    + .contact {
+      padding-top: 0;
+
+      @include tablet {
+        padding-top: 2.4rem;
+      }
+    }
+  }
+
+  .contact {
+    margin-right: auto;
+
+    @include desktop {
+      padding-right: 2rem;
+    }
+
+    .icon-list {
+      margin: 0;
+
+      li:last-of-type {
+        margin-bottom: 0;
+      }
+
+      @include desktop {
+        column-gap: gutter();
+        column-count: 2;
+      }
+    }
+
+    &:only-child .icon-list {
+      @include tablet {
+        column-gap: gutter();
+        column-count: 2;
+      }
+    }
+  }
+
+  .social {
+    @include tablet {
+      flex-shrink: 0;
+      width: $bp-mobile;
+    }
+
+    @include tablet {
+      &:only-child {
+        width: auto;
+        text-align: center;
+      }
+    }
+
+    h3 {
+      max-width: 100%;
+    }
+
+    .social-list {
+      ul {
+        width: calc(100% + 1rem);
+        margin: 0 -.5rem;
+
+        a {
+          &,
+          &[download]:not(.button),
+          &[href^="http://"]:not(.button),
+          &[href^="https://"]:not(.button) {
+            @include theme('background-color', 'color-secondary', 'theme-footer-social-media-icon-background');
+          }
+        }
+      }
+    }
+  }
+
+  .newsletter {
+    flex-grow: 1;
+    border-radius: 0;
+    font-size: .8rem;
+
+    @include desktop {
+      padding-right: 2rem;
+    }
+
+    .highlight__inner {
+      padding: 9.4rem 0 0;
+      background-color: transparent;
+
+      &::before {
+        @include spot-image('letter-light', 8rem);
+        top: 1.4rem;
+      }
+
+      @include tablet {
+        min-height: 8rem;
+        padding-top: 0;
+        padding-left: 10rem;
+
+        &::before {
+          top: calc(50% - 4rem);
+          right: auto;
+          left: 0;
+        }
+      }
+    }
+
+    .subscribe {
+      // 5/12 of max content-container width
+      max-width: calc(#{$bp-max-content} / 12 * 5);
+    }
+  }
+
+  .logo + .newsletter {
+    .highlight__inner {
+      padding-top: 0;
+
+      &::before {
+        display: none;
+      }
+
+      @include tablet {
+        padding-left: 0;
+      }
+    }
+  }
+
+  .content-container {
+    padding: 0 $gutter-width;
+
+    @media (min-width: $bp-max-content + 54px) {
+      padding-right: 0;
+      padding-left: 0;
+    }
+  }
+
+  .top {
+    @include theme('border-color', 'color-primary--lighten-4', 'theme-footer-border-bottom-color');
+    border-bottom: 2px solid;
+  }
+
+  .top,
+  .bottom {
+    @include tablet {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+
+    @include desktop {
+      flex-wrap: nowrap;
+    }
+
+    .newsletter,
+    .contact {
+      &:not(:last-of-type) {
+        @include theme('border-color', 'color-primary--lighten-4', 'theme-footer-border-bottom-color');
+        border-bottom: 2px solid;
+
+        @include desktop {
+          border-bottom: 0;
+        }
+      }
+    }
+  }
+
+  ///
+  /// External links other than group Ghent get an indicator.
+  ///
+  a {
+    @extend %a-remove-indicator;
+  }
+}

package/build/styleguide/sass/41-organisms/timeline/_timeline.scss

@@ -0,0 +1,299 @@
+$timeline-border: 3px;
+$timeline-dot-width: 16px;
+$timeline-m-left-padding: 1.5rem;
+$timeline-m-right-padding: 2.5rem;
+$timeline-dt-left-padding: 11.5rem;
+$timeline-dt-right-padding: 5rem;
+
+dl.timeline {
+  width: 100%;
+  padding: 0;
+
+  .timeline-slot {
+
+    @include desktop {
+      padding: 0 span(1 of 12) 0 span(2 of 12);
+    }
+
+    display: flex;
+    position: relative;
+    flex-wrap: wrap;
+
+    // Alternating timeline-slots get another background color.
+    &:nth-child(2n+1) {
+      @include theme('background-color', 'color-primary--lighten-5', 'timeline-slot-alternating-background');
+
+      // Fix for video on alternating timeline-slots.
+      > dd .video-wrapper::after {
+        @include theme('background-color', 'color-primary--lighten-5', 'timeline-slot-alternating-background');
+      }
+    }
+
+    // First timeline-slot specific styling.
+    &:first-of-type {
+      padding-top: 2rem;
+
+      // First definition description inside the first timeline-slot.
+      > dd:first-of-type {
+        margin-top: -.4rem;
+        padding-top: 0;
+
+        // Fix whitespace.
+        .timeline-slot-header {
+          margin-top: -.4rem;
+          padding-top: 0;
+        }
+      }
+
+      > dt:first-of-type {
+        margin-top: -.6rem;
+        padding-bottom: 1.2rem;
+
+        @include desktop {
+          top: 1.9rem;
+        }
+
+        &::before {
+          content: none;
+        }
+      }
+    }
+
+    // Last timeline-slot last definition description specific styling.
+    &:last-of-type {
+      padding-bottom: 2rem;
+
+      > dd:last-of-type {
+
+        // Horizontal timeline end.
+        &::before {
+          @include theme('border-color', 'color-primary', 'timeline-line-color');
+
+          position: absolute;
+          bottom: 0;
+          left: calc(#{$timeline-m-left-padding} - .5rem - 1px);
+          width: 1rem;
+          border-bottom: $timeline-border solid;
+          content: '';
+
+          @include desktop {
+            left: calc(#{$timeline-dt-left-padding} - .5rem - 1px);
+          }
+        }
+      }
+    }
+
+    // Timeline-slot title styling.
+    &-title {
+
+      &::before,
+      button::after {
+
+        @include theme('background-color', 'color-secondary', 'timeline-slot-indicator-background');
+        @include theme('border-color', 'color-primary', 'timeline-slot-indicator-border-color');
+
+        display: block;
+        position: absolute;
+        top: .2rem;
+        left: calc(-#{$timeline-m-right-padding} - #{$timeline-dot-width} / 2);
+        width: $timeline-dot-width;
+        height: $timeline-dot-width;
+        transition: background-color .2s ease-in-out;
+        border: $timeline-border solid;
+        border-radius: 100%;
+        content: '';
+        z-index: z('timeline', 'dots');
+
+        @include desktop {
+          left: calc(-#{$timeline-dt-right-padding} - #{$timeline-dot-width} / 2);
+        }
+      }
+
+      button {
+        width: 100%;
+        margin-left: -2em;
+        padding-left: 2em;
+        color: inherit;
+        font-size: inherit;
+
+        &::before {
+          position: absolute;
+          left: 0;
+          padding-left: .2em;
+          font-size: 1.2rem;
+          line-height: .9;
+        }
+
+        &::after {
+          left: calc(-#{$timeline-m-right-padding} - #{$timeline-dot-width} / 2 + 2em);
+
+          @include desktop {
+            left: calc(-#{$timeline-dt-right-padding} - #{$timeline-dot-width} / 2 + 2em);
+          }
+        }
+      }
+
+      position: relative;
+      width: 100%;
+      margin: .2rem 0;
+      border: 0;
+      background: transparent;
+      line-height: 1.2;
+
+      button:hover::after,
+      button:focus::after {
+        @include theme('background-color', 'color-primary--lighten-2', 'timeline-slot-active-indicator-background');
+      }
+
+      button[aria-expanded=true]::after {
+        @include theme('background-color', 'color-primary', 'timeline-slot-active-indicator-background');
+      }
+
+    }
+
+    &-date {
+      display: block;
+      width: 100%;
+    }
+
+    &-content,
+    &-header {
+      width: 100%;
+    }
+
+    &-header {
+      margin-bottom: $gutter-width;
+      padding-top: .5rem;
+
+      @include desktop {
+        padding-top: 2rem;
+      }
+    }
+
+    &-content {
+      *:last-of-type {
+        margin-bottom: 0;
+      }
+
+      &::after {
+        display: block;
+        position: relative;
+        height: 1.6rem;
+        content: '';
+      }
+    }
+
+    > dt {
+      @extend %h3;
+
+      position: relative;
+      width: 100%;
+      margin: 0;
+      padding: 1.5rem calc(#{$timeline-m-left-padding} - #{$timeline-dot-width} / 2) .5rem;
+
+      @include desktop {
+        position: absolute;
+        top: 2rem;
+        left: span(2 of 12);
+        width: $timeline-dt-left-padding;
+        padding: 0 1.2rem 0 0;
+        text-align: right;
+      }
+
+      &::before {
+        @include theme('border-color', 'color-primary', 'timeline-line-color');
+
+        position: absolute;
+        top: 0;
+        left: calc(#{$timeline-m-left-padding} - 2px);
+        height: 1rem;
+        border-left: $timeline-border solid;
+        content: '';
+        @include desktop {
+          display: none;
+        }
+      }
+    }
+
+    > dd {
+      @include theme('border-color', 'color-primary', 'timeline-line-color');
+
+      display: flex;
+      position: relative;
+      flex-wrap: wrap;
+      width: 100%;
+      max-width: none;
+      margin: 0;
+      padding: 0 calc(#{$gutter-width/2}) 0 calc(#{$timeline-m-left-padding} + #{$timeline-m-right-padding});
+
+      .accordion--content {
+        margin-left: 0;
+      }
+
+      @include desktop {
+        margin: 0;
+        padding: 0 calc(#{$gutter-width/2}) 0 calc(#{$timeline-dt-left-padding} + #{$timeline-dt-right-padding});
+      }
+
+      &::after {
+        @include theme('border-color', 'color-primary', 'timeline-line-color');
+
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: calc(#{$timeline-m-left-padding} - 2px);
+        border-left: $timeline-border solid;
+        content: '';
+
+        @include desktop {
+          left: calc(#{$timeline-dt-left-padding} - 2px);
+        }
+      }
+
+      &.active::before {
+        @include theme('background-color', 'color-primary', 'timeline-slot-active-indicator-background');
+      }
+
+      // Video component styling inside a timeline-slot.
+      .video-wrapper {
+        position: relative;
+        width: 100%;
+        margin-left: 0;
+        padding-bottom: 2rem;
+
+        // Fix to add whitespace to the video top and bottom areas.
+        &::before,
+        &::after {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          content: '';
+          z-index: z('timeline', 'video', 'background');
+        }
+
+        &::after {
+          @include theme('background-color', 'color-secondary', 'timeline-slot-default-background');
+        }
+
+        .video {
+          position: relative;
+          padding-top: 2rem;
+          border: 0;
+          z-index: z('timeline', 'video', 'player');
+
+          .audio-description {
+            min-height: 2rem;
+            padding-left: 3rem;
+
+            // Dots after a video intersection.
+            &::after {
+              bottom: .2rem;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/build/styleguide/sass/61-layouts/_layouts.scss

@@ -0,0 +1,9 @@
+.sidebar-layout,
+.detail-layout,
+.overview-layout {
+  .readspeaker-button {
+    display: block;
+    margin-top: -1.5rem;
+    margin-bottom: 2rem;
+  }
+}

package/build/styleguide/sass/61-layouts/detail-layout/_detail-layout.scss

@@ -0,0 +1,185 @@
+.detail-layout {
+  @extend %content-container;
+
+  font-size: .9rem;
+  line-height: 1.8;
+
+  // Give each direct child a specific width.
+  // This is a fallback width given to all children of the detail layout.
+  .w7-o2,
+  > * {
+    @include desktop {
+      @include set-layout('width-7', 'offset-2');
+    }
+  }
+
+  h1 {
+    width: 100%;
+
+    + .tag {
+      display: inline-block;
+      width: auto;
+      margin-top: -.4rem;
+      margin-bottom: 2rem;
+    }
+  }
+
+  > div,
+  > section,
+  > aside,
+  > article {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  > ul,
+  > ol {
+    padding-left: 2rem;
+  }
+
+  .w9-o1 {
+    @include desktop {
+      @include set-layout('width-9', 'offset-1');
+    }
+  }
+
+  .w10-o1,
+  > .highlight,
+  > .image-gallery--wrapper.multiple {
+    @include desktop {
+      @include set-layout('width-10', 'offset-1');
+    }
+  }
+
+  > ul.accordion {
+    @include desktop {
+      @include set-layout('width-7', 'offset-2');
+    }
+
+    .accordion--content p {
+      line-height: 1.75;
+    }
+  }
+
+  > .quote-wrapper {
+    @include desktop {
+      @include set-layout();
+
+      > .quote {
+        @include set-layout('width-9', 'offset-1');
+      }
+    }
+  }
+
+  .w12,
+  > .timeline-wrapper,
+  > .programme-wrapper {
+    @include set-layout();
+    @include extra-wide;
+  }
+
+  .readspeaker-button {
+    display: block;
+    width: auto;
+    margin-top: -.4rem;
+    margin-bottom: 2rem;
+  }
+
+  .summary-text {
+    @include bold-text;
+  }
+
+  .openinghours-widget[data-type="month"] {
+    @include desktop {
+      @include month-widget-mobile;
+    }
+
+    @include breakpoint(1200px) {
+      @include month-widget-desktop;
+    }
+  }
+
+  > .full-width {
+    @include full-width;
+  }
+
+  > .highlight--top {
+    .highlight__inner {
+      @include desktop {
+        padding-right: 0;
+        padding-left: 0;
+
+        > *:not(.accolade) {
+          width: span(7 of 10);
+          margin-left: span(1 wide of 10);
+        }
+      }
+    }
+  }
+
+}
+
+$bulb-image-width: 6rem;
+
+aside.top,
+aside.bottom {
+  @extend %content-container;
+
+  > * {
+    @include theme('border-color', 'color-primary--lighten-4', 'more-info-block-border-color');
+
+    padding-top: 3rem;
+    border-top: 2px solid;
+
+    @include tablet {
+      padding-top: 2rem;
+    }
+
+    @include desktop {
+      @include set-layout();
+      width: 100%;
+      margin-bottom: 2rem;
+      margin-left: 0;
+      padding-right: span(2 wide of 12);
+      padding-left: span(2 wide of 12);
+    }
+  }
+
+  > p {
+    padding-top: 0;
+    border-top: 0;
+  }
+}
+
+aside.top {
+  position: relative;
+  margin: 5rem auto 0;
+
+  > div:first-child {
+    &::before {
+      @include spot-image('lightbulb', $bulb-image-width);
+
+      display: block;
+      position: relative;
+      margin: (-$bulb-image-width) auto 1rem;
+      z-index: z('default');
+
+      @include tablet {
+        position: absolute;
+        top: -($bulb-image-width/2);
+        right: span(1 of 12);
+        margin: 0;
+      }
+    }
+  }
+}
+
+aside.bottom {
+  .changed-date {
+    @include desktop {
+      @include set-layout('width-9', 'offset-2');
+    }
+
+    padding: 0;
+  }
+}