implementing new footer

[mansona]

Desktop:

Mobile:

The mobile will most likely need to be updated once the mobile designs are finished but it is functional enough for now 👍 (I think anyway 😂)

[MelSumner]

Thank you for working on this- would you please include screenshots of different viewports with this PR? Thank you!

[MelSumner]

why aren't we using fontawesome icons here?

[mansona]

I'm pretty sure we've already discussed this a few times but the new branch for the redesign doesn't have font-awesome as a dependency and therefore doesn't use those icons.

Even regardless of this fact, this is no different to what is already being used in the current master branch: https://github.com/ember-learn/ember-styleguide/blob/master/addon/templates/components/es-footer/es-contributions.hbs#L9

[MelSumner]

oh interesting. thanks for reminding me.

[MelSumner]

Don't we already have an existing Ember logo? Why are we replacing it?

[mansona]

so this isn't replacing the existing logo, it's adding a new one. The existing logo is the white variation and this one (in ember orange) is being used for the footer.

[MelSumner]

Perhaps we should review for all of the .svg logos- I thought we already had these, and would want to know why we're adding different ones.

[mansona]

This is just replacing the existing one that was being used in the footer with the official svg logo with colour (because that is what is in the new design)

[MelSumner]

ahh, I see. I'm not really a fan of multi-color logos in the footer, what do you think about it?

[mansona]

I was just going with what the design shows but to be honest I quite like it. It makes the footer pop a little bit more 😄 I edited the PR with the screenshots you requested and I think they look great 🎉 (not biased at all 😂)

[MelSumner]

yes, I also think it looks great, but I wonder if it's a good design decision. It's not the main focus and we don't really want to be drawing anyone's eye specifically here, not more than anything else, anyway.

[mansona]

Is it a blocker to this PR being merged? I thought the point was to make things like the design and then iterate from there 🤔

[MelSumner]

Where can we add a TODO for the mobile styles? It should have a "stack the boxes" approach at the very least.

[mansona]

@MelSumner all todos should be recorded in https://github.com/orgs/ember-learn/projects/16 because that is the active working board for the project. Anything that is recorded in there will be addressed.

I will say though that @pichfl is currently working on the sketch file and producing designs for the mobile view currently. If you want I can ask him to throw together a quick GitHub issue and drop it in the project if you would like it tracked?

[MelSumner]

@mansona that sounds like a good idea, because ideally we'd have a mobile-first approach to the website for the CSS.

For example, if I wanted one font size if I was on a mobile device, then larger if I had a bigger screen, I'd write it like this:

.class-of-element {
  font-size: 1em;

  @media screen and (min-width: 992px) {
    font-size: 1.5em;
  }
}

In my experience, it's a better workflow to know up front what is going to happen, or else you get stuck with really terrible hacks, like media queries that go from desktop to mobile, or worse, like an entirely separate site.

[mansona]

@MelSumner ok, that sounds reasonable 🤔 I think... (I'm not an expert on these things)

I'm confused though, do you see this as a blocker to this PR? I can raise it with @ghislaineguerin and @pichfl because it sounds like it's more of a fundamental concern than I was trying to tackle here 🙈

[MelSumner]

I don't want to prevent shipping this if we have a todo item in the project- want to add one and link it here?

I do think we should prevent shipping additional things if they don't include a basic approach to mobile-first CSS. As a MVP, we should at least:

• "stack the boxes"- make elements full-width (as is sensible)
• make paddings and margins smaller (again, as is sensible)
• double check the font sizes (sometimes a smaller heading font-size is better)

The added bonus of making sure we do this is setting up the media queries now that we'll definitely need later, which makes our later work less of a chore.

[mansona]

@MelSumner how about this: #198 ?

I know it's currently a placeholder but I will coordinate with @pichfl and @ghislaineguerin and get it filled out this week 👍

[MelSumner]

Thank you!