-
Notifications
You must be signed in to change notification settings - Fork 32
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Social Media links to footer #146
base: main
Are you sure you want to change the base?
Conversation
Add tiktok insta and tartanconnect
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I also need to check the images, but I can't do that from my phone so I will do it on the 1st.
Oh and please do this against the dev branch. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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:
@@ -2,9 +2,16 @@ | |||
<div class="container"> | |||
<a href="mailto:[email protected]" class="user-select-all">[email protected]</a> | | |||
<a href="tel:+14122682104" class="user-select-all">412.268.2104</a> | | |||
<a href="https://tartanconnect.cmu.edu/feeds?type=club&type_id=68380&tab=about" target="_blank">TartanConnect</a> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please add a vertical bar after this entry like the others to match the formatting.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
I can't seem to push when I tried against the dev branch |
|
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). |
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
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.
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. |
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). |
Add tiktok, insta, and tartanconnect links + logos