cdransf/augurymetal.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

explicitly size social icons

Browse source
This commit is contained in:
Cory Dransfeldt 2022-06-06 12:53:10 -07:00
parent 465e6f866c
commit d6b7c78a8d
3 changed files with 20 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
components/Footer.tsx
View file

@ -7,15 +7,15 @@ export default function Footer() {
<footer> <footer>
<div className="mt-16 flex flex-col items-center"> <div className="mt-16 flex flex-col items-center">
<div className="mb-3 flex space-x-4"> <div className="mb-3 flex space-x-4">
<SocialIcon kind="mail" href={`mailto:${siteMetadata.email}`} size={6} /> <SocialIcon kind="mail" href={`mailto:${siteMetadata.email}`} />
<SocialIcon kind="facebook" href={siteMetadata.facebook} size={6} /> <SocialIcon kind="facebook" href={siteMetadata.facebook} />
<SocialIcon kind="instagram" href={siteMetadata.instagram} size={6} /> <SocialIcon kind="instagram" href={siteMetadata.instagram} />
<SocialIcon kind="youtube" href={siteMetadata.youtube} size={6} /> <SocialIcon kind="youtube" href={siteMetadata.youtube} />
<SocialIcon kind="twitter" href={siteMetadata.twitter} size={6} /> <SocialIcon kind="twitter" href={siteMetadata.twitter} />
<SocialIcon kind="spotify" href={siteMetadata.spotify} size={6} /> <SocialIcon kind="spotify" href={siteMetadata.spotify} />
<SocialIcon kind="applemusic" href={siteMetadata.applemusic} size={6} /> <SocialIcon kind="applemusic" href={siteMetadata.applemusic} />
<SocialIcon kind="bandcamp" href={siteMetadata.bandcamp} size={6} /> <SocialIcon kind="bandcamp" href={siteMetadata.bandcamp} />
<SocialIcon kind="lastfm" href={siteMetadata.lastfm} size={6} /> <SocialIcon kind="lastfm" href={siteMetadata.lastfm} />
</div> </div>
<div className="mb-8 flex space-x-2 text-sm text-gray-500 dark:text-gray-400"> <div className="mb-8 flex space-x-2 text-sm text-gray-500 dark:text-gray-400">
<div>{`© ${new Date().getFullYear()}`}</div> <div>{`© ${new Date().getFullYear()}`}</div>

6
components/social-icons/index.tsx
View file

@ -22,7 +22,7 @@ const components = {
lastfm: Lastfm, lastfm: Lastfm,
} }
const SocialIcon = ({ kind, href, size = 6 }) => { const SocialIcon = ({ kind, href }) => {
if (!href || (kind === 'mail' && !/^mailto:\w+([.-]?\w+)@\w+([.-]?\w+)(.\w{2,3})+$/.test(href))) if (!href || (kind === 'mail' && !/^mailto:\w+([.-]?\w+)@\w+([.-]?\w+)(.\w{2,3})+$/.test(href)))
return null return null
@ -36,9 +36,7 @@ const SocialIcon = ({ kind, href, size = 6 }) => {
href={href} href={href}
> >
<span className="sr-only">{kind}</span> <span className="sr-only">{kind}</span>
<SocialSvg <SocialSvg className="h-6 w-6 fill-current text-gray-700 hover:text-primary-500 dark:text-gray-200 dark:hover:text-primary-400" />
className={`fill-current text-gray-700 hover:text-primary-500 dark:text-gray-200 dark:hover:text-primary-400 h-${size} w-${size}`}
/>
</a> </a>
) )
} }

18
layouts/AuthorLayout.tsx
View file

@ -43,15 +43,15 @@ export default function AuthorLayout({ children, frontMatter }: Props) {
className="rounded-sm" className="rounded-sm"
/> />
<div className="flex space-x-3 pt-8"> <div className="flex space-x-3 pt-8">
<SocialIcon kind="mail" href={`mailto:${email}`} size={6} /> <SocialIcon kind="mail" href={`mailto:${email}`} />
<SocialIcon kind="facebook" href={facebook} size={6} /> <SocialIcon kind="facebook" href={facebook} />
<SocialIcon kind="instagram" href={instagram} size={6} /> <SocialIcon kind="instagram" href={instagram} />
<SocialIcon kind="youtube" href={youtube} size={6} /> <SocialIcon kind="youtube" href={youtube} />
<SocialIcon kind="twitter" href={twitter} size={6} /> <SocialIcon kind="twitter" href={twitter} />
<SocialIcon kind="spotify" href={spotify} size={6} /> <SocialIcon kind="spotify" href={spotify} />
<SocialIcon kind="applemusic" href={applemusic} size={6} /> <SocialIcon kind="applemusic" href={applemusic} />
<SocialIcon kind="bandcamp" href={bandcamp} size={6} /> <SocialIcon kind="bandcamp" href={bandcamp} />
<SocialIcon kind="lastfm" href={lastfm} size={6} /> <SocialIcon kind="lastfm" href={lastfm} />
</div> </div>
</div> </div>
<div className="prose max-w-none pt-8 pb-8 dark:prose-dark xl:col-span-2">{children}</div> <div className="prose max-w-none pt-8 pb-8 dark:prose-dark xl:col-span-2">{children}</div>