Skip to content
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

Jump to bottom

style: social media icon alignment #125

Open
wants to merge 5 commits into
base: dev
Choose a base branch
from
Open

style: social media icon alignment #125

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
deee937
alignment of contributor's social media icons is done
AnuragRoshan Mar 5, 2024
4b1d69f
Merge branch 'dev' into dev
anuragxxd Mar 6, 2024
86c9f18
alignment of contributor's social media icons is done
AnuragRoshan Mar 7, 2024
bc6372d
Merge branch 'dev' of https://github.com/AnuragRoshan/landing-page in…
AnuragRoshan Mar 7, 2024
1d3d96b
alignment of contributor's social media icons is done
AnuragRoshan Mar 7, 2024
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
50 changes: 36 additions & 14 deletions components/Contributors/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from 'react';
import { Zoom } from 'react-awesome-reveal';
import themeContext from '../../context/defaultTheme';
import ContributorFilter from './ContributorFilter';
import { FaMastodon, FaXTwitter } from 'react-icons/fa6';
import { FaMastodon } from 'react-icons/fa6';

function Contributors({ contributors }) {
const [showMorePositions, setShowMorePositions] = useState([]);
Expand Down Expand Up @@ -86,16 +86,22 @@ function Contributors({ contributors }) {

const renderLinks = (contributor) => {
return (
<div className="flex items-baseline pt-0.5 space-x-2">
<div className="flex items-baseline h-[30px] px-2 gap-2 ">
{contributor.email ? (
<a href={`mailto:${contributor.email}`}>
<a
className="h-iconHeight flex items-center"
href={`mailto:${contributor.email}`}
>
<ion-icon name="mail-outline"></ion-icon>
</a>
) : (
<></>
)}
{contributor.website ? (
<a href={contributor.website}>
<a
className="h-iconHeight flex items-center"
href={contributor.website}
>
<ion-icon name="link-outline"></ion-icon>
</a>
) : (
Expand All @@ -104,8 +110,8 @@ function Contributors({ contributors }) {
{contributor.orcid ? (
<a href={contributor.orcid}>
<svg
className="h-iconHeight"
fill={theme.theme === 'light' ? '#000000' : '#ffffff'}
height="24px"
viewBox="0 0 32 32"
width="24px"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -119,10 +125,10 @@ function Contributors({ contributors }) {
{contributor.researchgate ? (
<a href={contributor.researchgate}>
<svg
className="h-iconHeight"
fill={theme.theme === 'light' ? '#000000' : '#ffffff'}
height="26px"
viewBox="0 0 32 32"
width="26px"
width="24px"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M 5 5 L 5 27 L 27 27 L 27 5 L 5 5 z M 7 7 L 25 7 L 25 25 L 7 25 L 7 7 z M 19.164062 10.001953 C 17.881062 10.001953 17.441406 10.919156 17.441406 11.535156 L 17.441406 13.169922 C 17.441406 13.999922 17.8935 14.792969 19.0625 14.792969 C 21.0245 14.790969 20.787109 13.306391 20.787109 12.275391 L 19.253906 12.275391 L 19.253906 12.816406 L 20.158203 12.816406 C 20.158203 13.621406 19.781453 14.162109 19.064453 14.162109 C 18.498453 14.162109 18.171875 13.671188 18.171875 12.992188 L 18.171875 11.634766 C 18.171875 11.005766 18.762062 10.642578 19.164062 10.642578 C 19.881062 10.642578 20.15625 11.271484 20.15625 11.271484 L 20.697266 10.90625 C 20.697266 10.90625 20.434062 10.001953 19.164062 10.001953 z M 13.583984 13.091797 C 12.678984 13.091797 11.296953 13.178906 10.001953 13.128906 L 10.001953 13.53125 C 10.781953 13.68225 11.107422 13.606281 11.107422 14.738281 L 11.107422 20.269531 C 11.107422 21.413531 10.780953 21.325563 10.001953 21.476562 L 10.001953 21.892578 C 10.378953 21.879578 11.031266 21.841797 11.697266 21.841797 C 12.326266 21.841797 13.144094 21.867578 13.496094 21.892578 L 13.496094 21.476562 C 12.490094 21.338562 12.1875 21.451531 12.1875 20.269531 L 12.1875 17.931641 C 12.5275 17.956641 12.817531 17.955078 13.269531 17.955078 C 14.124531 19.489078 14.94125 20.634781 15.40625 21.175781 C 16.24825 22.193781 17.594875 22.043578 17.921875 21.892578 L 17.921875 21.515625 C 17.418875 21.514625 16.914781 21.175437 16.550781 20.773438 C 15.934781 20.107437 15.104781 19.025641 14.425781 17.806641 C 15.557781 17.529641 16.400391 16.461297 16.400391 15.404297 C 16.400391 13.820297 15.179984 13.091797 13.583984 13.091797 z M 13.320312 13.730469 C 14.502313 13.730469 15.205078 14.346516 15.205078 15.478516 C 15.204078 16.586516 14.450359 17.326172 13.193359 17.326172 C 12.728359 17.326172 12.5145 17.314063 12.1875 17.289062 L 12.1875 13.767578 C 12.5145 13.729578 12.942312 13.730469 13.320312 13.730469 z" />
Expand All @@ -134,9 +140,8 @@ function Contributors({ contributors }) {
{contributor.scholar ? (
<a href={contributor.scholar}>
<svg
className=""
className="h-iconHeight"
fill={theme.theme === 'light' ? '#000000' : '#ffffff'}
height="24px"
viewBox="0 0 24 24"
width="24px"
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -148,15 +153,27 @@ function Contributors({ contributors }) {
<></>
)}
{contributor.github ? (
<a href={contributor.github}>
<a
className="h-iconHeight flex items-center"
href={contributor.github}
>
<ion-icon name="logo-github"></ion-icon>
</a>
) : (
<></>
)}
{contributor.x ? (
<a href={contributor.x}>
<FaXTwitter />
<a className="h-[26px] flex item-center " href={contributor.x}>
<svg
className=""
fill={theme.theme === 'light' ? '#000000' : '#ffffff'}
height="24px"
viewBox="0 0 512 512"
width="24px"
xmlns="http://www.w3.org/2000/svg"
>
<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
</svg>
</a>
) : (
<></>
Expand All @@ -169,7 +186,10 @@ function Contributors({ contributors }) {
<></>
)}
{contributor.linkedin ? (
<a href={contributor.linkedin}>
<a
className="h-iconHeight flex items-center "
href={contributor.linkedin}
>
<ion-icon name="logo-linkedin"></ion-icon>
</a>
) : (
Expand Down Expand Up @@ -282,7 +302,9 @@ function Contributors({ contributors }) {
{renderPositions(contributor)}
</div>
</div>
<div className="mt-2 sm:mt-0">{renderLinks(contributor)}</div>
<div className="mt-2 sm:mt-0 h-[max-content]">
{renderLinks(contributor)}
</div>
</div>
</div>
</div>
Expand Down
3 changes: 3 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ module.exports = {
pop: ['Poppins', 'sans-serif'],
cursive: ['Satisfy', 'cursive'],
},
spacing: {
iconHeight: '26px',
},
colors: {
elixirblue: '#3DA9F6',
elixirgreen: '#5ABA62',
Expand Down