-
Notifications
You must be signed in to change notification settings - Fork 39
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
feat: Socials Bar #53
base: master
Are you sure you want to change the base?
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.toml
Live example
![image](https://user-images.githubusercontent.com/51814158/154720435-8800781f-5ce9-4c1a-ad13-28cb8b2f7ef4.png)
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.