feat: Socials Bar #53
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/ejmg/zerm/66ecMrQ7JATJ7AcuQwJWD6yWXPy7 [Deployment for bf4280e failed] |
|
Hmm, this isn't failing on my machine. This might be because I'm using Zola 0.15.3 and |
Having the copyright be left-centered for the default text and user-defined text being centered is _super weird_.
improved compatibility by using relative paths to content however, using `gh_image.url` won't work on zola v0.13 Instead, simply `gh_image` should be used. Writing it in the latter way would make the theme work with v0.13 but NOT work with v0.14+ (also removed double twitter text which probably somehow got merged when I was cherry-picking commits)
| &--user { | ||
| margin: auto; | ||
| text-align: center; | ||
| } |
There was a problem hiding this comment.
Is there any particular rationale for centering the copyright notice only if it's user defined?
| <img src="{{ rss_image.url }}" style="display:inline" alt="RSS Badge" /> | ||
| </a> | ||
| {%- endif -%} | ||
|
|
||
| {%- if config.extra.github_profile -%} | ||
| <a href="{{ config.extra.github_profile}}" style="text-decoration:none"> | ||
| {%- set gh_image = resize_image(path="/assets/social/github.png", width=22, height=22, op="scale", format="png") -%} | ||
| {%- set gh_image = resize_image(path="../static/assets/social/github.png", width=22, height=22, op="scale", format="png") -%} | ||
| <img src="{{ gh_image.url }}" style="display:inline" alt="Github Profile Badge" /> |
There was a problem hiding this comment.
We would have to change gh_image.url to gh_image to have it work with Zola v0.13 (used by CI), but that wouldn't work with Zola v0.14 and onwards.
It seems moving CI to a new version is the best option? Since the entire theme does build with Zola v0.15.2 already.
|
i didn't realize we were trailing zola versions yet again, if you open a PR that bumps the version in the |
Change color of all icon images to black with Paint 3D. Then use [1] to make CSS filters that would produce theme appropriate colored images. [2] provides a few alternate processes for creating these filters. [1]: https://web.archive.org/web/20220211150400/https://codepen.io/sosuke/pen/Pjoqqp [2]: https://web.archive.org/web/20220112091311/https://stackoverflow.com/questions/42966641/how-to-transform-black-into-any-given-color-using-only-css-filters/43960991
|
hopefully we can get #54 figured out so that this can be included |
|
Hmm, just found out about Icon Fonts - maybe this would be better for the socials icons instead of having custom ones which have to be colored with CSS trickery. |
|
@DesmondWillowbrook Perhaps open PR #14 might be useful here, since it would integrate Font Awesome into the site and allow its social icons to be used in the socials bar at the bottom? |
config.tomlLive example
Still a draft as currently the social media icons are colored blue. I'll need to make them grayscale then write CSS filters for each theme color before readying for review.