search

ABTech / abtech.org

abtech.org website
https://abtech.org/
8 stars 32 forks source link

Social Media links to footer #146

Open stella5423890 opened 1 year ago

stella5423890 commented 1 year ago

Add tiktok, insta, and tartanconnect links + logos

DaAwesomeP commented 1 year ago

Oh and please do this against the dev branch.

stella5423890 commented 1 year ago

Oh and please do this against the dev branch.

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

DaAwesomeP commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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).