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