fixes and refinements

components/Footer.tsx

@@ -14,11 +14,10 @@ export default function Footer() {
           <SocialIcon kind="twitter" href={siteMetadata.twitter} size={6} />
           <SocialIcon kind="spotify" href={siteMetadata.spotify} size={6} />
           <SocialIcon kind="applemusic" href={siteMetadata.applemusic} size={6} />
+          <SocialIcon kind="bandcamp" href={siteMetadata.bandcamp} size={6} />
           <SocialIcon kind="lastfm" href={siteMetadata.lastfm} size={6} />
         </div>
         <div className="mb-8 flex space-x-2 text-sm text-gray-500 dark:text-gray-400">
-          <div>{siteMetadata.author}</div>
-          <div>{` • `}</div>
           <div>{`© ${new Date().getFullYear()}`}</div>
           <div>{` • `}</div>
           <Link href="/">{siteMetadata.title}</Link>

components/social-icons/bandcamp.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Bandcamp</title><path d="M0 18.75l7.437-13.5H24l-7.438 13.5H0z"/></svg>

components/social-icons/index.tsx

@@ -5,6 +5,7 @@ import Youtube from './youtube.svg'
 import Twitter from './twitter.svg'
 import Spotify from './spotify.svg'
 import AppleMusic from './applemusic.svg'
+import BandCamp from './bandcamp.svg'
 import Lastfm from './lastfm.svg'
 
 // Icons taken from: https://simpleicons.org/
@@ -17,10 +18,11 @@ const components = {
   twitter: Twitter,
   spotify: Spotify,
   applemusic: AppleMusic,
+  bandcamp: BandCamp,
   lastfm: Lastfm,
 }
 
-const SocialIcon = ({ kind, href, size = 8 }) => {
+const SocialIcon = ({ kind, href, size = 6 }) => {
   if (!href || (kind === 'mail' && !/^mailto:\w+([.-]?\w+)@\w+([.-]?\w+)(.\w{2,3})+$/.test(href)))
     return null
 
@@ -35,7 +37,7 @@ const SocialIcon = ({ kind, href, size = 8 }) => {
     >
       <span className="sr-only">{kind}</span>
       <SocialSvg
-        className={`fill-current text-gray-700 hover:text-blue-500 dark:text-gray-200 dark:hover:text-blue-400 h-${size} w-${size}`}
+        className={`fill-current text-gray-700 hover:text-primary-500 dark:text-gray-200 dark:hover:text-primary-400 h-${size} w-${size}`}
       />
     </a>
   )