diff --git a/config/install/block.block.illinois_framework_theme_main_menu.yml b/config/install/block.block.illinois_framework_theme_main_menu.yml index d936741..1a741ce 100644 --- a/config/install/block.block.illinois_framework_theme_main_menu.yml +++ b/config/install/block.block.illinois_framework_theme_main_menu.yml @@ -16,9 +16,9 @@ plugin: 'system_menu_block:main' settings: id: 'system_menu_block:main' label: 'Main navigation' - provider: system label_display: '0' + provider: system level: 1 - depth: 0 + depth: 2 expand_all_items: true visibility: { } diff --git a/illinois_framework_theme.info.yml b/illinois_framework_theme.info.yml index 2261f67..171614d 100644 --- a/illinois_framework_theme.info.yml +++ b/illinois_framework_theme.info.yml @@ -19,6 +19,9 @@ libraries-override: libraries: - illinois_framework_theme/global-styling - illinois_framework_theme/web-components + - illinois_framework_theme/brand-styles + - illinois_framework_theme/il-header + - illinois_framework_theme/il-footer # Regions regions: diff --git a/illinois_framework_theme.libraries.yml b/illinois_framework_theme.libraries.yml index 541d50b..c18f6ff 100644 --- a/illinois_framework_theme.libraries.yml +++ b/illinois_framework_theme.libraries.yml @@ -22,13 +22,20 @@ web-components: header: true css: theme: - https://cdn.toolkit.illinois.edu/2.16/toolkit.css: + https://contrib.webtheme.illinois.edu/toolkit-lite-v2/toolkit.css: type: external minified: true js: - https://cdn.toolkit.illinois.edu/2.16/toolkit.js: + https://contrib.webtheme.illinois.edu/toolkit-lite-v2/toolkit.js: type: external minified: true +brand-styles: + header: true + css: + theme: + https://cdn.brand.illinois.edu/illinois.css: + type: external + minified: true ils-contentslider: header: true css: @@ -40,6 +47,34 @@ ils-contentslider: https://contrib.webtheme.illinois.edu/ils-contentslider/contentslider.min.js: type: external minified: true +il-header: + header: true + css: + theme: + https://cdn.brand.illinois.edu/components/il-header.css: + type: external + minified: true + js: + https://cdn.brand.illinois.edu/components/il-header.mjs: + type: external + minified: true + attributes: + type: module + blocking: render +il-footer: + header: true + css: + theme: + https://cdn.brand.illinois.edu/components/il-footer.css: + type: external + minified: true + js: + https://cdn.brand.illinois.edu/components/il-footer.mjs: + type: external + minified: true + attributes: + type: module + blocking: render content-adjust: js: js/content.js: {} diff --git a/scss/illinois-framework/_region.footer.scss b/scss/illinois-framework/_region.footer.scss index 262d56a..495cb23 100644 --- a/scss/illinois-framework/_region.footer.scss +++ b/scss/illinois-framework/_region.footer.scss @@ -1,10 +1,43 @@ il-footer { - &[slot="parent"] { + .footer-menus { + display: grid; + grid-template-columns: 1fr; + grid-gap: 0; + @include media-breakpoint-up(lg) { + grid-template-columns: repeat(2,1fr); + grid-gap: 60px; + } + nav { + @include media-breakpoint-up(lg) { + margin-bottom: 1rem; + } + } - p { - font-size: initial; - line-height: initial; + h2 { + font: 600 1.25rem/1.5 var(--il-font-sans); + margin-bottom: .75rem; + font-weight: 700; + border-bottom: 1px solid var(--il-blue); + padding-bottom: .75rem; + } + .col-md { + @include media-breakpoint-up(lg) { + padding-left: 0; + } } + .navbar-nav { + .nav-item { + .nav-link { + font: 400 18px/30px var(--il-font-sans);; + padding: .2rem 0; + } + } + } + } +} +il-footer *[slot=actions] a { + @include media-breakpoint-down(lg) { + margin: 0 .5rem .5rem 0 !important; } } diff --git a/scss/illinois-framework/_region.header.scss b/scss/illinois-framework/_region.header.scss index e643dbe..c3bde2a 100644 --- a/scss/illinois-framework/_region.header.scss +++ b/scss/illinois-framework/_region.header.scss @@ -1,4 +1,16 @@ -.region-header { +il-header { position: relative; - z-index: 101; + z-index: 101 !important; +} +il-header a[slot="site-name"], il-header a[slot="primary-unit"] { + text-decoration: none; + color: var(--il-blue); + &:hover, + &:focus { + text-decoration: underline; + color: var(--il-altgeld); + } +} +il-header-nav-section-with-link > a[slot="link"] { + white-space: wrap !important; } diff --git a/scss/web-components/_web-components.footer.scss b/scss/web-components/_web-components.footer.scss index c5c4f62..948b0ec 100644 --- a/scss/web-components/_web-components.footer.scss +++ b/scss/web-components/_web-components.footer.scss @@ -4,8 +4,16 @@ } } .il-footer-navigation { + padding-top: 0 !important; h2, h3, h4 { - color: white; + color: var(--il-blue); + border-bottom: none !important; + } + a { + color: var(--il-blue); + &:visited { + color: var(--il-blue); + } } } .il-footer-contact { @@ -13,3 +21,6 @@ color: white; } } +.site.section { + gap: 0 !important; +} diff --git a/templates/layout/page--404.html.twig b/templates/layout/page--404.html.twig index 9ea4e44..23e1852 100644 --- a/templates/layout/page--404.html.twig +++ b/templates/layout/page--404.html.twig @@ -45,7 +45,9 @@ */ #}
- {{ page.header }} + + {{ page.header }} + {{ page.breadcrumb }} {{ page.highlighted }} {{ page.help }} @@ -82,6 +84,8 @@ {{ page.content }}
{% endif %} - {{ page.footer }} + + {{ page.footer }} + {# /.layout-container #} diff --git a/templates/layout/page--content-page.html.twig b/templates/layout/page--content-page.html.twig index 712e964..32b6953 100644 --- a/templates/layout/page--content-page.html.twig +++ b/templates/layout/page--content-page.html.twig @@ -63,7 +63,9 @@ {% endif %}
- {{ page.header }} + + {{ page.header }} + {{ page.breadcrumb }} {{ page.highlighted }} {{ page.help }} @@ -111,5 +113,7 @@ {{ page.content }} {% endif %} - {{ page.footer }} + + {{ page.footer }} +
{# /.layout-container #} diff --git a/templates/layout/page--news.html.twig b/templates/layout/page--news.html.twig index d6a3ead..f2dcad8 100644 --- a/templates/layout/page--news.html.twig +++ b/templates/layout/page--news.html.twig @@ -45,7 +45,9 @@ */ #}
- {{ page.header }} + + {{ page.header }} + {{ page.breadcrumb }} {{ page.highlighted }} {{ page.help }} @@ -62,6 +64,8 @@
{{ attach_library('illinois_framework_theme/content-adjust') }} - {{ page.footer }} -{# /.layout-container #} + + {{ page.footer }} + + {# /.layout-container #} diff --git a/templates/layout/page--search.html.twig b/templates/layout/page--search.html.twig index f509ba7..98a2402 100644 --- a/templates/layout/page--search.html.twig +++ b/templates/layout/page--search.html.twig @@ -46,7 +46,9 @@ */ #}
- {{ page.header }} + + {{ page.header }} + {{ page.breadcrumb }} {{ page.highlighted }} {{ page.help }} @@ -58,5 +60,7 @@
- {{ page.footer }} + + {{ page.footer }} + {# /.layout-container #} diff --git a/templates/layout/page--spotlight.html.twig b/templates/layout/page--spotlight.html.twig index 978d71c..4c035e1 100644 --- a/templates/layout/page--spotlight.html.twig +++ b/templates/layout/page--spotlight.html.twig @@ -64,7 +64,9 @@
- {{ page.header }} + + {{ page.header }} + {{ page.breadcrumb }} {{ page.highlighted }} {{ page.help }} @@ -84,6 +86,8 @@
- {{ page.footer }} + + {{ page.footer }} + {# /.layout-container #} diff --git a/templates/layout/page.html.twig b/templates/layout/page.html.twig index 6bf8afe..364fb01 100644 --- a/templates/layout/page.html.twig +++ b/templates/layout/page.html.twig @@ -45,7 +45,9 @@ */ #}
- {{ page.header }} + + {{ page.header }} + {{ page.breadcrumb }} {{ page.highlighted }} {{ page.help }} @@ -64,6 +66,7 @@
- - {{ page.footer }} + + {{ page.footer }} + {# /.layout-container #} diff --git a/templates/navigation/menu--main--nav-main.html.twig b/templates/navigation/menu--main--nav-main.html.twig index 36cb554..f0f9d1d 100644 --- a/templates/navigation/menu--main--nav-main.html.twig +++ b/templates/navigation/menu--main--nav-main.html.twig @@ -24,34 +24,42 @@ We call a macro which calls itself to render the full tree. @see http://twig.sensiolabs.org/doc/tags/macro.html #} -{{ menus.menu_links(items, attributes, 0) }} -{% macro menu_links(items, attributes, menu_level) %} +{% import _self as menus %} +{# +We call a macro which calls itself to render the full tree. +@see http://twig.sensiolabs.org/doc/tags/macro.html +#} +{{ menus.build_menu(items, attributes, 0) }} + +{% macro build_menu(items, attributes, menu_level) %} {% import _self as menus %} {% if items %} - {% for item in items %} - {% set item_length = items|length %} - {% if menu_level == 0 and item.below %} - = 5 and loop.index > (item_length - 2) %}right="true"{% endif %}> - {# Check if there's in the top-level menu link and remove the href if there is no link #} - {% if item.url.toString is not empty -%} - {{ item.title }} - {% else %} - {{ item.title }} - {% endif -%} - - - {% else %} - - {{ item.title }} - - {% endif %} - {% endfor %} + {% endif %} {% endmacro %} +{% macro add_link(item, attributes, menu_level) %} + {% import _self as menus %} +
  • + {% if item.below and item.url.toString is not empty %} + + {{ item.title }} + {{ menus.build_menu(item.below, attributes, menu_level + 1) }} + + {% elseif item.below %} + + {{ item.title }} + {{ menus.build_menu(item.below, attributes, menu_level + 1) }} + + {% elseif item.url.toString is not empty -%} + {{ item.title }} + {% else %} + {{ item.title }} + {% endif -%} +
    • +{% endmacro %} + diff --git a/templates/region/region--footer.html.twig b/templates/region/region--footer.html.twig index 1db3e48..a0e4a39 100644 --- a/templates/region/region--footer.html.twig +++ b/templates/region/region--footer.html.twig @@ -21,16 +21,34 @@ 'l-region--' ~ region|clean_class, ] %} - - -
    - {% if if_footer['if_footer_address']['if_footer_address_unit'] %} -

    {{ if_footer['if_footer_address']['if_footer_address_unit'] }}

    - {% elseif drupal_config('system.site', 'name') %} -

    {{ drupal_config('system.site', 'name')| raw }}

    - {% else %} -

    University of Illinois

    - {% endif %} +{% if if_secondary_site_title %} + {% if if_secondary_site_link %} + {{ if_secondary_site_title }} + {% else %} + {{ if_secondary_site_title }} + {% endif %} +{% endif %} +{{ drupal_config('system.site', 'name') | raw }} + +

    {% if if_footer['if_footer_address']['if_footer_address_street_one'] %} {{ if_footer['if_footer_address']['if_footer_address_street_one'] }} @@ -52,42 +70,32 @@ {% if if_footer['if_footer_address']['if_footer_address_email'] %}

    Email: {{ if_footer['if_footer_address']['if_footer_address_email'] }}

    {% endif %} -
    -
    -
      - {% if if_footer['if_footer_social']['if_footer_social_instagram'] %} -
    • Instagram
      • - {% endif %} - {% if if_footer['if_footer_social']['if_footer_social_facebook'] %} -
    • Facebook
      • - {% endif %} - {% if if_footer['if_footer_social']['if_footer_social_twitter'] %} -
    • Twitter
      • - {% endif %} - {% if if_footer['if_footer_social']['if_footer_social_youtube'] %} -
    • YouTube
      • - {% endif %} - {% if if_footer['if_footer_social']['if_footer_social_linkedin'] %} -
    • LinkedIn
      • - {% endif %} -
    -
    - {% if if_footer_colleges %} -
    - {% if if_secondary_site_title %} -

    {{ if_secondary_site_title| raw }}

    - {% endif %} + {% if if_footer_colleges %} +
    {% for item in if_footer_colleges %} {% if if_footer_colleges[loop.index0][0] != "" %} {% set title = if_footer_colleges[loop.index0][0] %} {% set url = if_footer_colleges[loop.index0][1] %} -

    {{ title }}

    +
    {{ title }}
    {% endif %} {% endfor %} -
    +
    + {% endif %} + +
    + {% for subfooter_link in if_subfooter %} + {% set link = if_subfooter[loop.index0][1] %} + {% set text = if_subfooter[loop.index0][0] %} + {% if link != NULL or text != NULL %} + {{ text }} {% endif %} -
    -
    + {% endfor %} + Login +
    + + +
    +
    {% if drupal_entity('block', 'footermenufirst') %} {% endif %}
    -
    - {% if drupal_entity('block', 'footermenuthird') %} +
    + {% if drupal_entity('block', 'footermenuthird') %} @@ -110,34 +118,16 @@ {{ drupal_entity('block', 'footermenufourth') }} {% endif %} -
    - -
    - - - +
    + + diff --git a/templates/region/region--header.html.twig b/templates/region/region--header.html.twig index 727f17d..c5750b7 100644 --- a/templates/region/region--header.html.twig +++ b/templates/region/region--header.html.twig @@ -26,24 +26,20 @@ {% else %} {% set menu_type = 'simple' %} {% endif %} - - -
    - {% if if_secondary_site_title %} -

    {% if if_secondary_site_link %} - {{ if_secondary_site_title }} + {{ if_secondary_site_title }} {% else %} - {{ if_secondary_site_title }} + {{ if_secondary_site_title }} {% endif %} -

    {% endif %} -

    {{ drupal_config('system.site', 'name') | raw }}

    -     -
    - -