Skip to content

Commit

Permalink
Merge pull request #814 from sadiejay/footer-refresh
Browse files Browse the repository at this point in the history 
Footer refresh
  • Loading branch information
@sadiejay
sadiejay authored May 23, 2024
2 parents 22fc4f2 + 680de89 commit 0333530
Show file tree
Hide file tree
Showing 3 changed files with 175 additions and 86 deletions.
58 changes: 36 additions & 22 deletions _data/nav.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,28 +62,42 @@ mobile:
href: get-involved/

footer:
- text: About
href: about/
# - text: Get Involved
# href: get-involved/
- text: Process
href: our-process/
- text: Products
href: showcase/
- text: Datasets
href: data/
- text: TOPx Toolkit
href: topx-toolkit/
- text: Product Toolkit
href: product-development/toolkit/
# - text: data.census.gov
# href: "https://data.census.gov"
# isExternal: true
- text: Our Team
href: https://coil.census.gov/
isExternal: true
- text: Press
href: press/
- subsection:
title: About
links:
- text: About TOP
href: about/
- text: Sprint Process
href: our-process/
- text: FAQs
href: faqs/
- text: Press
href: press/
- subsection:
title: Sprints
href: sprints/
- subsection:
title: Products
href: products/
- subsection:
title: Resources
links:
- text: Datasets
href: data/
- text: TOPx Toolkit
href: topx-toolkit/
- text: Product Toolkit
href: product/
- subsection:
title: More
links:
- text: Prize Challenge
href: prize-challenge/
- text: Annual Summit
href: summit/




footer-bottom:
# - text: Census Open Innovation Labs
Expand Down
121 changes: 63 additions & 58 deletions _includes/footer.html
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,79 @@
<footer class="usa-footer site-footer bg-base-darkest" role="contentinfo">
<div class="usa-footer__secondary-section bg-base-darkest">
<div class="grid-container footer-content">

<div class="grid-row footer-contact-links margin-top-0">
<div class="grid-col-6 tablet:grid-col-3">
<div class="usa-media-block__body usa-media-block__footer">
<p class="font-sans-2xs">
<a href="{{ site.baseurl }}" id="return-to-top">
Back to top&nbsp;&uarr;
</a>
</p>
<p class="font-sans-sm">The Opportunity Project</p>
</div>
<div class="grid-container footer-content padding-left-4 padding-right-3">

<div class="grid-row footer-contact-links margin-top-0 margin-bottom-2">
<div class="text-white tablet:display-flex flex-align-center">

<a href="{{ site.baseurl }}" class="text-white display-inline-block">
<img src="/assets/img/TOP-logo-mobile.png" alt="TOP Logo" class="top-logo">
</a>

<p>is a program of Census Open Innovation Labs at the U.S. Census Bureau.</p>
</div>
</div>

<div class="grid-col-6 tablet:grid-col-3 tablet:order-last tablet:padding-left-3">
<div class="grid-row">
{% for section in site.data.nav.footer %}
<div class="usa-media-block__footer text-white tablet:grid-col-2">
<h3 class="padding-top-4 text-uppercase">
{% if section.subsection.href %}
<a href="{{ section.subsection.href }}" class="text-underline">{{ section.subsection.title }}</a>
{% else %}
{{ section.subsection.title }}
{% endif %}
</h3>
{% if section.subsection.links %}
<ul class="add-list-reset">
{% for link in section.subsection.links %}
<li>
<a href="{{ link.href }}" class="text-underline">{{ link.text }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</div>
{% endfor %}

<div class="usa-media-block__footer display-none tablet:display-block tablet:grid-col-2 subsection-subscribe">
<h3 class=" text-bold text-white padding-top-4 text-uppercase">Subscribe</h3>
<p class=" text-white margin-0">
Sign up to our email list to be notified of news and opportunities.
</p>
<a href="{{ site.contacts.mailing-list }}" class="usa-button usa-button--secondary site-button site-cta width-full">
SIGN UP
</a>
<!-- check mobile button -->
</div>
</div>


<div class="grid-row margin-top-5 tablet:display-none">
<div class="tablet:order-last tablet:padding-left-3">
<div class="usa-media-block__footer">
<p class="font-sans-2xs text-bold text-white">Stay in the Loop</p>
<p class="font-sans-2xs text-white">
Subscribe to an email list to be notified of news and
opportunities.
<p class="text-white">
Sign up to our email list to be notified of news and opportunities.
</p>
<a href="{{ site.contacts.mailing-list }}"
class="usa-button usa-button--outline usa-button--inverse site-button site-cta">
Get Updates
class="usa-button usa-button--secondary site-button site-cta">
SIGN UP
</a>
</button>
</div>
<!-- check tablet/desktop button -->
</div>
</div>

{% assign perCol = 4 %}
{% for link in site.data.nav.footer %}
{% assign remainder = forloop.index0 | modulo: perCol %}
{% if remainder == 0 %}
{% if forloop.first == false %}
</div>
</div>
{% endif %}

<div class="grid-col-4 tablet:grid-col-2">
<div class="usa-media-block__footer">
{% endif %}
</div>
</div>

<p class="border-bottom border-base-dark padding-bottom-05">

<a href="{% unless link.isExternal %}{{ site.baseurl }}/{% endunless %}{{ link.href }}">
{{ link.text }}
</a>
</p>
{% if forloop.index0 | modulo: perCol != 0 and forloop.last %}
</div>
</div>
{% endif %}
{% endfor %}


</div>

<div
class="footer-section-bottom usa-media-block__footer grid-row display-flex flex-align-center padding-top-4"
>
{% for bottomLink in site.data.nav.footer-bottom %}
<a href="{% unless bottomLink.isExternal %}{{ site.baseurl }}/{% endunless %}{{ bottomLink.href }}"
class="border-base-dark
<div class="footer-section-bottom usa-media-block__footer grid-row display-flex flex-align-center padding-top-4 text-white">
{% for bottomLink in site.data.nav.footer-bottom %}
<a href="{% unless bottomLink.isExternal %}{{ site.baseurl }}/{% endunless %}{{ bottomLink.href }}" class="border-base-dark
{% unless forloop.first %} border-left padding-left-2 {% endunless %}
{% unless forloop.last %} padding-right-2 {% endunless %}
"
>{{ bottomLink.text }}</a>
{% endfor %}
</div>
</div>
">{{ bottomLink.text }}</a>
{% endfor %}
</div>
</div>
</div>
</footer>
82 changes: 76 additions & 6 deletions css/_uswds-theme-custom-styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2010,13 +2010,78 @@ div.toolkit-todo__resources {

.footer-content {
margin-bottom: units(5);

.top-logo {
width: 140px;
}
h3 {
@include typeset("lang", "lg", 2);
font-size: 14px;
margin: 0;
@include at-media('tablet') {
font-size: 12px;
line-height: 14.4px;
}
@include at-media('desktop') {
font-size: 16px;
line-height: 19.2px;
padding-block-end: 24px;
}
}
p {
max-width: measure($site-measure);
font-size: 14px;
@include at-media('tablet') {
margin-inline-start: 8px;
font-size: 12px;
line-height: 14.4px;
}
@include at-media('desktop') {
font-size: 16px;
line-height: 19.2px;
}
}

ul li {
margin-block-end: 16px;
@include at-media ('tablet') {
margin-block-end: 0;
}

@include at-media('desktop') {
margin-block-end: 16px;
}
}

ul li a {
font-size: 14px;
@include at-media ('tablet') {
font-size: 12px;
line-height: 14.4px;
}
@include at-media('desktop') {
font-size: 16px;
line-height: 19.2px;
}
}

.subsection-subscribe {
p {
padding-block-start:7px;
padding-block-end: 24px;
@include at-media('desktop') {
padding-block-start: 3px;
padding-block-end: 22px;
}
}
}

.site-button {
font-size: 14px;
@include at-media('tablet') {
font-size: 12px;
}
@include at-media('desktop') {
font-size: 16px;
line-height: 19.2px;
}
}
}

Expand Down Expand Up @@ -2054,12 +2119,17 @@ div.toolkit-todo__resources {
}

.footer-section-bottom {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.8);

font-size: 10px;
width: 90%;
margin: 0 auto;
justify-content: center;
@include at-media('tablet') {
font-size: 12px;
}

@include at-media('desktop') {
font-size: 16px;
}
}

// Pattern Preview Boxes -------- //
Expand Down

0 comments on commit 0333530

Please sign in to comment.