.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; } }