Footer changes

[magdamaciaszczyk]

Changes discussed with Joe:

• Split footer into two parts: links at the top (#403F41), mission statement and company info below (#000000).

• Links at the top grouped into three categories: 'Who Can I Vote For?', 'Made by Democracy Club', 'Connect with us' (you can rename these). Each category has links related to either WCIVF, Democracy Club or social media.

• Links on phone screens will use the one column layout and be displayed under each other.

• Links on larger screens (from the size of a tablet screen in portrait view) will use a three column layout and be displayed in parallel columns.

• Mission statement, copyright, company information at the bottom of the page on a darker background.

• Headings in white, in bolder font.

• Headings, links, mission statement, copyright can use the same font sizes as it is currently or copyright could be about 2px smaller (relative to the screen size).

Designs attached, let me know if you have any questions.

Desktop:

Mobile:

Tablet:

[symroe]

The work here is to implement the 'two colour' footer. We can use a Switcher to implement the columns in the top part, and simply centre align the lower part.

I suggest the HTML be something like this:

<footer>
  <div class="footer-links">
    <nav>
      <h2>Section heading</h2>
      <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </nav>
    <nav>
      <h2>Section heading</h2>
      <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </nav>
    <nav>
      <h2>Section heading</h2>
      <ul>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </nav>    
  </div>

  <div class="footer-info">
    <p>Text</p>
  </div>
</footer>

And the SCSS can have footer > .footer-links extend from switcher, and .footer-info extend from ds-text-centered.

I think there's room for a logo at the top of footer-info, but this can be just the tick on its own line, to get around the centre issue.

[symroe]

Then of course all the projects need to be updated…

[pmk01]

Hurrah, we did it.