diff --git a/components/02-molecules/link-group/_yds-link-group.scss b/components/02-molecules/link-group/_yds-link-group.scss index 94a4a99f5..f0cc9ffe3 100644 --- a/components/02-molecules/link-group/_yds-link-group.scss +++ b/components/02-molecules/link-group/_yds-link-group.scss @@ -72,11 +72,11 @@ $break-link-group-max: $break-link-group - 0.05; width: 100%; border-left: var(--thickness-divider) solid var(--color-link-group-border); - margin-bottom: var(--size-spacing-7); &--one { @media (max-width: $break-link-group-max) { grid-area: links-one; + margin-bottom: var(--size-spacing-8); } } @@ -88,6 +88,7 @@ $break-link-group-max: $break-link-group - 0.05; @media (min-width: $break-link-group) { flex: 0 0 50%; + margin-bottom: var(--size-spacing-3); } } @@ -98,4 +99,22 @@ $break-link-group-max: $break-link-group - 0.05; text-align: left; line-height: 1.2; font-weight: var(--font-weights-mallory-book); + + // used in footer context, we need theme colors for hover + .site-footer__columns-inner & { + [data-footer-theme='one'] &, + [data-footer-theme='two'] &, + [data-footer-theme='three'] & { + --color-link-group-hover: var(--color-slot-two); + } + + [data-footer-theme='four'] &, + [data-footer-theme='five'] & { + --color-link-group-hover: var(--color-slot-four); + } + + &:hover { + color: var(--color-link-group-hover); + } + } } diff --git a/components/02-molecules/social-links/_yds-social-links.scss b/components/02-molecules/social-links/_yds-social-links.scss index 9677bda36..d51ce3087 100644 --- a/components/02-molecules/social-links/_yds-social-links.scss +++ b/components/02-molecules/social-links/_yds-social-links.scss @@ -26,6 +26,10 @@ display: flex; flex-wrap: wrap; gap: var(--size-spacing-6); + + [data-footer-variation='mega'] & { + justify-content: end; + } } .social-links__link { diff --git a/components/03-organisms/site-footer/_site-footer-mega.twig b/components/03-organisms/site-footer/_site-footer-mega.twig index 97814a346..97567bf84 100644 --- a/components/03-organisms/site-footer/_site-footer-mega.twig +++ b/components/03-organisms/site-footer/_site-footer-mega.twig @@ -14,14 +14,6 @@ placeholder: 'logo', placeholder__type: 'element', } %} - {% include "@page-layouts/placeholder/yds-placeholder.twig" with { - placeholder: 'logo', - placeholder__type: 'element', - } %} - {% include "@page-layouts/placeholder/yds-placeholder.twig" with { - placeholder: 'logo', - placeholder__type: 'element', - } %} {% endblock %} @@ -54,16 +46,16 @@ } %} {% endblock %} - {# Social #} -
- {% block site_footer__social_links %} - {% include "@molecules/social-links/yds-social-links.twig" %} - {% endblock %} -
{# Secondary #}
+ {# Social #} +
+ {% block site_footer__social_links %} + {% include "@molecules/social-links/yds-social-links.twig" %} + {% endblock %} +
{# YALE Logo #}
diff --git a/components/03-organisms/site-footer/_yds-site-footer.scss b/components/03-organisms/site-footer/_yds-site-footer.scss index b1539db8e..a557b31cb 100644 --- a/components/03-organisms/site-footer/_yds-site-footer.scss +++ b/components/03-organisms/site-footer/_yds-site-footer.scss @@ -141,7 +141,7 @@ $global-footer-themes: map.deep-get(tokens.$tokens, 'global-themes'); @media (min-width: tokens.$break-l) { display: grid; grid-template-areas: 'logos content columns'; - grid-template-columns: 23.5rem 1fr 1fr; + grid-template-columns: 18rem 1fr 1fr; } } } @@ -159,7 +159,7 @@ $global-footer-themes: map.deep-get(tokens.$tokens, 'global-themes'); [data-footer-variation='mega'] & { border-top: var(--thickness-divider) solid var(--color-site-footer-border-color); - padding-top: var(--size-spacing-6); + padding-top: var(--size-spacing-8); @media (min-width: $break-site-footer) { flex-direction: row; @@ -175,7 +175,17 @@ $global-footer-themes: map.deep-get(tokens.$tokens, 'global-themes'); gap: var(--size-spacing-3); [data-footer-variation='mega'] & { - flex: 1 1 30%; + @media (min-width: $break-site-footer) { + flex-direction: row; + justify-content: space-between; + gap: var(--size-spacing-5); + } + + @media (min-width: tokens.$break-l) { + flex-direction: column; + justify-content: flex-start; + flex: 1 1 30%; + } } } @@ -208,6 +218,8 @@ $global-footer-themes: map.deep-get(tokens.$tokens, 'global-themes'); } [data-footer-variation='mega'] & { + margin-bottom: var(--size-spacing-3); + @media (min-width: tokens.$break-m) { margin-left: auto; } @@ -229,21 +241,14 @@ $global-footer-themes: map.deep-get(tokens.$tokens, 'global-themes'); */ .site-footer__logo-group { display: grid; - gap: var(--size-spacing-3); grid-template-columns: 1fr 1fr; - - @media (min-width: $break-site-footer) { - grid-template-columns: 1fr 1fr 1fr 1fr; - } - - @media (min-width: tokens.$break-l) { - grid-template-columns: 1fr 1fr; - } + gap: var(--size-spacing-5); } // Yale school logo .site-footer__yale-logo { [data-footer-variation='mega'] & { + flex-basis: 50%; gap: var(--size-spacing-6); } } @@ -255,14 +260,14 @@ $global-footer-themes: map.deep-get(tokens.$tokens, 'global-themes'); flex: 1 1 30%; - > p { - margin-top: 0; - } - @media (min-width: tokens.$break-l) { grid-area: content; padding-inline-start: var(--size-spacing-8); padding-inline-end: var(--size-spacing-8); + + > p { + margin-top: 0; + } } } } @@ -289,23 +294,17 @@ $global-footer-themes: map.deep-get(tokens.$tokens, 'global-themes'); flex: 1 auto; flex-direction: column; gap: var(--size-spacing-3); - - @media (min-width: tokens.$break-l) { - display: grid; - grid-template: - 'top' - 'bottom' - / 1fr; - } } } // Social .site-footer__social { [data-footer-variation='mega'] & { - @media (min-width: tokens.$break-l) { - flex: 0 auto; - align-self: flex-end; + flex: 0 0 100%; + align-self: flex-end; + + @media (max-width: $break-site-footer-max) { + order: 3; } } }