Social Media links to footer

[stella5423890]

Add tiktok, insta, and tartanconnect links + logos

[DaAwesomeP]

I also need to check the images, but I can't do that from my phone so I will do it on the 1st.

[DaAwesomeP]

Oh and please do this against the dev branch.

[DaAwesomeP]

Given that the current icon for Facebook is white/gray, should we do additional white/gray icons to match? These will probably look best on the homepage since it is white text on a dark background in that area.

The images should be square so that they don't have weird sizing or spacing issues.

You can usually find the official logos and official color variations buy searching for a "press pack" or "media kit" or "logo kit" or something like that. See these:

• https://about.meta.com/brand/resources/instagram/instagram-brand
• https://developers.tiktok.com/doc/getting-started-design-guidelines?enter_method=left_navigation

[DaAwesomeP]

Please add a vertical bar after this entry like the others to match the formatting.

[DaAwesomeP]

Additionally, how does this look on mobile? Be mindful of how wide the line will be and if it may spill into the next line. You may choose to break the line somewhere depending on how it looks or move things around.

[stella5423890]

Oh and please do this against the dev branch.

I can't seem to push when I tried against the dev branch

[DaAwesomeP]

I can't seem to push when I tried against the dev branch

See here I think: https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/changing-the-base-branch-of-a-pull-request

[robsiemb]

You can usually find the official logos and official color variations buy searching for a "press pack" or "media kit" or "logo kit" or something like that.

An alternative approach would be to take a dependency on somnething like FontAwesome, and then get vector graphics as part of that pack for all the brands. These should more or less magicly scale for any size screen too, and won't pixelate. The dependency (assuming you point at a common CDN for it our use a minimal "kit") also probably don't hurt load time in any noticable way.

Example from cmubuggy.org's left nav (around line 15): https://github.com/CMUBuggy/cmubuggy.org/blob/main/content/leftmenu.inc

Dependency is taken here (around like 20): https://github.com/CMUBuggy/cmubuggy.org/blob/main/content/cssjs.inc

For these icons you'd want fa-instagram, fa-facebook, and fa-tiktok. Brand colors are trickier, and I don't recall if instagram had a clear answer if you didn't use the gradient logo (and didn't just make them all white).

[DaAwesomeP]

An alternative approach would be to take a dependency on somnething like FontAwesome

I have used FA before though I'm hesitant to add a whole dependency for just a few icons, especially since we aren't using them anywhere else on the site.

I have also specifically avoided CDNs to increase the longevity of the site (sometimes old versions disappear). The separate CDNs also add a bit of rendering delay due to increased latency from an additional host. http2 does a decent job with same-host locally hosted assets loading quickly. We would add it to the package.json where Bootstrap is.

These should more or less magicly scale for any size screen too, and won't pixelate.%

To deal with scaling we should be able to SVG versions of the icons. All of the AB Tech logos on the site are SVG.

I don't recall if instagram had a clear answer if you didn't use the gradient logo (and didn't just make them all white).

Usually they are fine with flat black and flat white, though they may provide an alternate icon for using in those colors. It's more of an issue if you use something other than black or white.

[robsiemb]

Yeah, just wanted to offer the alternative.

Certainly, if not using any of the icon kits, SVGs are the way to go instead of PNGs (the facebook icon would also need to be updated).