Skip to content

style(community): improve icon visibility, alignment, and spacing #508

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.

Sign up for GitHub

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

Merged
SoryRawyer merged 2 commits into from
Jan 20, 2026
Merged

style(community): improve icon visibility, alignment, and spacing #508

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1eca39d
style(community): improve icon visibility, alignment, and spacing
Harshit-Mourya Jan 15, 2026
4830bcb
style(community): adjust placement of OpenRefine is Magic illustration
Harshit-Mourya Jan 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,11 @@ html[data-theme="dark"] {
--ifm-code-color: var(--ifm-color-primary-light);
}

/* Improve X icon visibility in dark mode */
html[data-theme="dark"] img[alt="x"] {
filter: invert(1);
}

.footer .footer__link-item,
.footer__copyright {
color: #c5c5c5;
Expand Down Expand Up @@ -199,3 +204,33 @@ html[data-theme="dark"] .button.button--primary,
html[data-theme="dark"] .button.button--secondary {
color: var(--ifm-font-color-base);
}

.communityPage li {
margin-left: 1.5em;
}

/* Center first column in community page tables */
.communityPage table td:first-child {
text-align: center; /* horizontal center (text + image) */
vertical-align: middle; /* vertical center */
}

.communityPage table td .socials {
padding: 0.5em 0;
display: flex;
justify-content: space-between;
}

.communityPage .communityMagic {
max-width: 250px;
margin: 2rem auto;
text-align: center;
}

.communityPage .communityMagic img {
max-width: 100%;
height: auto;
}
.communityPage .communityMagic p {
font-size: 0.7em;
}
26 changes: 13 additions & 13 deletions src/pages/community.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@ hide_table_of_contents: true

OpenRefine is made by people like you, looking to create a more informed world where working with data is easy and engaging. You can help us in many ways, including the roles below.


import OpenRefineIsMagicImageUrl from '@site/static/img/openrefine_is_magic.png';


import Card from '../card.tsx';

<div className="communityPage">

<div className="cardList">
<Card href="/docs/technical-reference/code-contributions" title="Developer" description="to maintain OpenRefine or develop a new extensions"/>
<Card href="/docs/technical-reference/introduction" title="Designer" description="to improve OpenRefine usability" />
Expand All @@ -28,22 +28,22 @@ import Card from '../card.tsx';
</div>
<br />


<!-- TODO rebuild the structure of the URL for each contributor guide. Add placeholder for the new one -->

<div style={{float: 'right', textAlign: 'right'}}>
<div className="communityMagic">
<img src={OpenRefineIsMagicImageUrl} alt="OpenRefine is magic" id="magic"/>
<p style={{fontSize: '0.7em'}}><a href="https://commons.wikimedia.org/wiki/File:Open_Refine_is_Magic.png">CC-BY-SA Scott Carlson</a></p>
<p><a href="https://commons.wikimedia.org/wiki/File:Open_Refine_is_Magic.png">CC-BY-SA Scott Carlson</a></p>
</div>
# Connect with us

Join our vibrant community of users and contributors. We listed below the platforms used by the core team, however a lot of great conversation happen directly within our user community preferred channel.
Join our vibrant community of users and contributors. We listed below the platforms used by the core team, however a lot of great conversation happen directly within our user community preferred channel.

| Platform | Come here for |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **GitHub** <br></br> <img src="/img/logo/github.png" alt="github" height="95"/> | GitHub is where OpenRefine code live. We maintain two main repositories: <br></br> <li> **[OpenRefine](https://github.com/OpenRefine/OpenRefine)** where you can contribute to OpenRefine development and translation. This is also the place to [file a bug or feature request](https://github.com/OpenRefine/OpenRefine/issues/new/choose)</li> <li> **[openrefine.org](https://github.com/OpenRefine/openrefine.org)** is where we maintain our documentation and this website.</li> |
| **Forum** <br></br> <img src="/img/logo/discourse.png" alt="discourse" height="95"/> | After GitHub this is our main communication platform. Join our forum to ask for [support](https://forum.openrefine.org/c/support/12) when using OpenRefine, discuss [OpenRefine development](https://forum.openrefine.org/c/dev/8) and check the latest [community update](https://forum.openrefine.org/c/news/13).<p></p> You can find here our archived [user](https://groups.google.com/u/2/g/openrefine) and [development](https://groups.google.com/u/2/g/openrefine-dev) mailing list. |
| **Community Calls** <br></br> <img src="/img/logo/gh-og.png" alt="greenhost" height="95"/> | We are organizing [bi-weekly video call](https://forum.openrefine.org/t/openrefine-community-meetup/1276) where everybody is welcome to chat about OpenRefine, ask questions, share things they do with OpenRefine. It happens every two weeks on alternating times: 07:00 UTC on Friday and 15:00 UTC on Tuesday. |
| **Chat** <br></br> <img src="/img/logo/gitter.png" alt="gitter" height="95"/> | You can join us on [gitter chat](https://app.gitter.im/#/room/#OpenRefine_OpenRefine:gitter.im) for real time chat. The room is not always monitored and we invite you to post on our forum if you do not receive an answer. |
| **Social Media** <br></br> <div className="socials"><img src="/img/logo/x.svg" alt="x" height="30"/> <img src="/img/logo/LinkedIn.png" alt="LinkedIn" height="30"/> <img src="/img/logo/Mastodon.png" alt="Mastodon" height="30"/></div> | We share project announcements, opportunities, upcoming events, on diverse social media platforms. Follow and tag #OpenRefine on [LinkedIn](https://www.linkedin.com/company/openrefine/), [Twitter/X](https://twitter.com/openrefine) or [Mastodon](https://fosstodon.org/@OpenRefine). |

| Platform | Come here for |
| --------------- | --------------- |
| **GitHub** <br></br> <img src="/img/logo/github.png" alt="github" height="95"/>|GitHub is where OpenRefine code live. We maintain two main repositories: <br></br> <li> **[OpenRefine](https://github.com/OpenRefine/OpenRefine)** where you can contribute to OpenRefine development and translation. This is also the place to [file a bug or feature request](https://github.com/OpenRefine/OpenRefine/issues/new/choose)</li> <li> **[openrefine.org](https://github.com/OpenRefine/openrefine.org)** is where we maintain our documentation and this website.</li> |
| **Forum** <br></br> <img src="/img/logo/discourse.png" alt="discourse" height="95"/>|After GitHub this is our main communication platform. Join our forum to ask for [support](https://forum.openrefine.org/c/support/12) when using OpenRefine, discuss [OpenRefine development](https://forum.openrefine.org/c/dev/8) and check the latest [community update](https://forum.openrefine.org/c/news/13).<p></p> You can find here our archived [user](https://groups.google.com/u/2/g/openrefine) and [development](https://groups.google.com/u/2/g/openrefine-dev) mailing list.|
| **Community Calls** <br></br> <img src="/img/logo/gh-og.png" alt="greenhost" height="95"/>| We are organizing [bi-weekly video call](https://forum.openrefine.org/t/openrefine-community-meetup/1276) where everybody is welcome to chat about OpenRefine, ask questions, share things they do with OpenRefine. It happens every two weeks on alternating times: 07:00 UTC on Friday and 15:00 UTC on Tuesday. |
| **Chat** <br></br> <img src="/img/logo/gitter.png" alt="gitter" height="95"/>|You can join us on [gitter chat](https://app.gitter.im/#/room/#OpenRefine_OpenRefine:gitter.im) for real time chat. The room is not always monitored and we invite you to post on our forum if you do not receive an answer.|
| **Social Media** <br></br> <img src="/img/logo/x.svg" alt="x" height="35"/> <img src="/img/logo/LinkedIn.png" alt="LinkedIn" height="35"/> <img src="/img/logo/Mastodon.png" alt="Mastodon" height="35"/> | We share project announcements, opportunities, upcoming events, on diverse social media platforms. Follow and tag #OpenRefine on [LinkedIn](https://www.linkedin.com/company/openrefine/), [Twitter/X](https://twitter.com/openrefine) or [Mastodon]( https://fosstodon.org/@OpenRefine).|
</div>