Make responsive, remove extraneous font refs, add video icons, CSS refactor

[jessicaschilling]

• Removes extraneous references to Glyphicons (closes Font source target is invalid #23)
• Makes page responsive overall (closes Make table responsive #24)
• Adds file icons for .wmv, .mov, .mkv (closes video files don't have a proper icon #19)
• Strips out most of the CSS, which looks like it was originally cloned from an early version of Bootstrap but no longer needed
• Makes colors consistent with those in ipfs-css
• Tidies up in general

[jessicaschilling]

Question for @Stebalien -- What's the best way to test this in situ? At the moment I'm just looking at changes reflected in the unpopulated template, and I don't really trust that. Thanks!

[jessicaschilling]

@Stebalien, if you don't mind having a look, would much appreciate! Thanks.

[Stebalien]

Look:

• The filename links kind of blend-in with the new color scheme.
• In general, I'm not a fan of the "faded teal", especially in the links and in the list backgrounds.

Responsive:

• It definitely looks better on smaller screens.
• It would be nice if we could collapse the header items into a menu for really small screens. Right now, the "Install" and "About" buttons wrap.

[jessicaschilling]

@Stebalien The header works down to 315px, which AFAIK is narrower than any mainstream smartphone. Are you seeing something otherwise?

The global teal was changed in ipfs-css for reasons of failing WCAG accessibility contrast; see ipfs/ipfs-webui#1379 (comment) for details.

[Stebalien]

We could still pick a less ugly color.

[jessicaschilling]

That’s probably something to take as a discussion within ipfs-css rather than this particular instantiation. Can change links to the bright teal, but please be aware of accessibility caution.

[jessicaschilling]

@Stebalien Updated link color to a blue virtually identical to (but AA-compliant) one used in a few other IPFS contexts but not so far included in ipfs-css. If acceptable, will add as a link-specific color to ipfs-css for future use. Please review as time permits -- thank you.

[Stebalien]

LGTM!

[Stebalien]

Much better! Sorry for being so opinionated on this, I just really don't like that color.

[jessicaschilling]

@Stebalien Fair enough ... teal-type (green-leaning) blues are REALLY tough to work with from an overall a11y perspective, and I want to make sure that we give overall use of color some very careful consideration as part of the larger-scale a11y analysis to be done in ipfs/ipfs-gui#28. That's also part of a bigger-picture suite of improvements to Desktop/WebUI that we'd ideally focus on in Q3, but in the meantime the GUI team is launching some research/survey work in the next few weeks that'll help inform the best approach. (I also want to do some overall use case/journey mapping around IPFS helper tools this quarter, but that's going to be balanced against spending my time on more tactical improvements like this one.)

[RubenKelevra]

Thanks, looks great!

I was wondering if we could move the PNGs out of the webpage to /ipfs/-links as well. This avoids that the browser have read over the PNG on each page view, but can place it in the cache.

[jessicaschilling]

@RubenKelevra Do you mind filing a separate issue (or PR!) for that one? Ideally we'd like to refactor all those file icons as SVGs that more closely fit the IPFS visual style overall — that would be a good combined effort.