more icons, less lengthy icon row

assets/css/main.css

@@ -95,19 +95,18 @@ body.light #box {
   transition: border-color 0.5s ease-in-out;
 }
 
-.twitter:hover #box,
+.twitter:hover,
-.twitter:focus #box {
+.twitter:focus {
-  border-color: #1da1f2;
+  fill: #1da1f2 !important;
+  color: #1da1f2 !important;
+}
+
+body.light a.twitter {
+  fill: black;
 }
 
 a.twitter {
-  fill: #1da1f2 !important;
+  fill: white;
-  color: #1da1f2 !important;
-}
-
-a.twitter.light {
-  fill: #1da1f2 !important;
-  color: #1da1f2 !important;
 }
 
 .twitter::-moz-selection {
@@ -130,19 +129,18 @@ body.light .twitter::selection {
   background-color: #37bbff;
 }
 
-.keybase:hover #box,
+.keybase:hover,
-.keybase:focus #box {
+.keybase:focus {
-  border-color: #33a0ff;
+  fill: #33a0ff !important;
+  color: #33a0ff !important;
+}
+
+body.light a.keybase {
+  fill: black;
 }
 
 a.keybase {
-  fill: #33a0ff !important;
+  fill: white;
-  color: #33a0ff !important;
-}
-
-a.keybase.light {
-  fill: #33a0ff !important;
-  color: #33a0ff !important;
 }
 
 .keybase::-moz-selection {
@@ -165,19 +163,18 @@ body.light .keybase::selection {
   background-color: #4dbaff;
 }
 
-.discord:hover #box,
+.discord:hover,
-.discord:focus #box {
+.discord:focus {
-  border-color: #7289da;
+  fill: #7289da !important;
+  color: #7289da !important;
+}
+
+body.light a.discord {
+  fill: black;
 }
 
 a.discord {
-  fill: #7289da !important;
+  fill: white;
-  color: #7289da !important;
-}
-
-a.discord.light {
-  fill: #7289da !important;
-  color: #7289da !important;
 }
 
 .discord::-moz-selection {
@@ -200,19 +197,18 @@ body.light .discord::selection {
   background-color: #8ca3f4;
 }
 
-.mastodon:hover #box,
+.mastodon:hover,
-.mastodon:focus #box {
+.mastodon:focus {
-  border-color: #3088d4;
+  fill: #3088d4 !important;
+  color: #3088d4 !important;
+}
+
+body.light a.mastodon {
+  fill: black;
 }
 
 a.mastodon {
-  fill: #3088d4 !important;
+  fill: white;
-  color: #3088d4 !important;
-}
-
-a.mastodon.light {
-  fill: #3088d4 !important;
-  color: #3088d4 !important;
 }
 
 .mastodon::-moz-selection {
@@ -235,19 +231,18 @@ body.light .mastodon::selection {
   background-color: #4aa2ee;
 }
 
-.twitch:hover #box,
+.twitch:hover,
-.twitch:focus #box {
+.twitch:focus {
-  border-color: #6441a4;
+  fill: #6441a4 !important;
+  color: #6441a4 !important;
+}
+
+body.light a.twitch {
+  fill: black;
 }
 
 a.twitch {
-  fill: #6441a4 !important;
+  fill: white;
-  color: #6441a4 !important;
-}
-
-a.twitch.light {
-  fill: #6441a4 !important;
-  color: #6441a4 !important;
 }
 
 .twitch::-moz-selection {
@@ -270,19 +265,18 @@ body.light .twitch::selection {
   background-color: #7e5bbe;
 }
 
-.gitdab:hover #box,
+.gitdab:hover,
-.gitdab:focus #box {
+.gitdab:focus {
-  border-color: #faacb7;
+  fill: #faacb7 !important;
+  color: #faacb7 !important;
+}
+
+body.light a.gitdab {
+  fill: black;
 }
 
 a.gitdab {
-  fill: #faacb7 !important;
+  fill: white;
-  color: #faacb7 !important;
-}
-
-a.gitdab.light {
-  fill: #faacb7 !important;
-  color: #faacb7 !important;
 }
 
 .gitdab::-moz-selection {
@@ -305,19 +299,18 @@ body.light .gitdab::selection {
   background-color: #ffc6d1;
 }
 
-.github:hover #box,
+.github:hover,
-.github:focus #box {
+.github:focus {
-  border-color: #333;
+  fill: #333 !important;
+  color: #333 !important;
+}
+
+body.light a.github {
+  fill: black;
 }
 
 a.github {
-  fill: #333 !important;
+  fill: white;
-  color: #333 !important;
-}
-
-a.github.light {
-  fill: #333 !important;
-  color: #333 !important;
 }
 
 .github::-moz-selection {
@@ -340,19 +333,18 @@ body.light .github::selection {
   background-color: #4d4d4d;
 }
 
-.gitlab:hover #box,
+.gitlab:hover,
-.gitlab:focus #box {
+.gitlab:focus {
-  border-color: #e24329;
+  fill: #e24329 !important;
+  color: #e24329 !important;
+}
+
+body.light a.gitlab {
+  fill: black;
 }
 
 a.gitlab {
-  fill: #e24329 !important;
+  fill: white;
-  color: #e24329 !important;
-}
-
-a.gitlab.light {
-  fill: #e24329 !important;
-  color: #e24329 !important;
 }
 
 .gitlab::-moz-selection {
@@ -375,8 +367,76 @@ body.light .gitlab::selection {
   background-color: #fc5d43;
 }
 
+.ko-fi:hover,
+.ko-fi:focus {
+  fill: #f16061 !important;
+  color: #f16061 !important;
+}
+
+body.light a.ko-fi {
+  fill: black;
+}
+
+a.ko-fi {
+  fill: white;
+}
+
+.ko-fi::-moz-selection {
+  color: white;
+  background-color: #f16061;
+}
+
+.ko-fi::selection {
+  color: white;
+  background-color: #f16061;
+}
+
+body.light .ko-fi::-moz-selection {
+  color: black;
+  background-color: #ff7a7b;
+}
+
+body.light .ko-fi::selection {
+  color: black;
+  background-color: #ff7a7b;
+}
+
+.patreon:hover,
+.patreon:focus {
+  fill: #f96854 !important;
+  color: #f96854 !important;
+}
+
+body.light a.patreon {
+  fill: black;
+}
+
+a.patreon {
+  fill: white;
+}
+
+.patreon::-moz-selection {
+  color: white;
+  background-color: #f96854;
+}
+
+.patreon::selection {
+  color: white;
+  background-color: #f96854;
+}
+
+body.light .patreon::-moz-selection {
+  color: black;
+  background-color: #ff826e;
+}
+
+body.light .patreon::selection {
+  color: black;
+  background-color: #ff826e;
+}
+
 a svg {
-  max-width: 4ch;
+  max-width: 6ch;
 }
 
 .socials {
@@ -385,6 +445,15 @@ a svg {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 300px;
+  -webkit-transition: fill 1s ease-in-out;
+  transition: fill 1s ease-in-out;
+}
+
+a {
+  margin: 2vh;
 }
 
 divide {

assets/css/main.scss

@@ -91,24 +91,23 @@ $socials: (
 	"twitch": #6441a4,
 	"gitdab":#faacb7,
 	"github": #333,
-	"gitlab": #e24329
+	"gitlab": #e24329,
+	"ko-fi": #f16061,
+	"patreon": #f96854
 );
 
 @each $site, $color in $socials {
 	.#{$site}:hover,
 	.#{$site}:focus {
-		#box {
+		fill: $color !important;
-			border-color: $color;
+		color: $color !important;
-		}
 	}
 
-	a.#{$site} {
+	body.light a.#{$site} {
-		fill: $color !important;
+		fill: black;
-		color: $color !important;
 	}
-	a.#{$site}.light {
+	a.#{$site} {
-		fill: $color !important;
+		fill: white;
-		color: $color !important;
 	}
 
 	.#{$site}::selection {
@@ -123,13 +122,20 @@ $socials: (
 }
 
 a svg {
-	max-width: 4ch;
+	max-width: 6ch;
 }
 
 .socials {
 	font-size: 2vh;
 	text-align: center;
 	justify-content: center;
+	box-sizing: border-box;
+	width: 300px;
+	transition: fill 1s ease-in-out;
+}
+
+a {
+	margin: 2vh;
 }
 
 divide {

server.js

@@ -75,6 +75,8 @@ module.exports = (client) => {
 				{ name: 'Github', color: '333', link: 'github.com/codepupper', icon: simpleIcons.GitHub },
 				{ name: 'Gitlab', color: 'E24329', link: 'gitlab.com/codepupper', icon: simpleIcons.GitLab },
 				{ name: 'Twitch', color: '6441a4', link: 'twitch.tv/codepupper', icon: simpleIcons.Twitch },
+				{ name: 'Ko-Fi', color: 'f16061', link: 'ko-fi.com/codepupper', icon: simpleIcons['Ko-fi'] },
+				{ name: 'Patreon', color: '6441a4', link: 'patreon.com/ryden', icon: simpleIcons.Patreon },
 				{ name: 'Twitter', color: '1DA1F2', link: 'twitter.com/floofydev', icon: simpleIcons.Twitter }
 			]
 		});

views/artwork.hbs

@@ -1,5 +1,5 @@
 <body>
-  <h1 class="title"> <a href="/">{{name}}</a></h1>
+  <h1 class="title"><a href="/">{{name}}</a></h1>
   <h1 class="subtitle toggle">dark/light</h1>
   <div class="center">
     {{#each art}}

views/index.hbs

@@ -2,11 +2,11 @@
   <div class="center">
     <h1 class="title">{{name}}</h1>
     <h1 class="subtitle toggle">dark/light</h1>
-    <divide></divide>
+
     {{#each item}}
     <a class="{{this.name}}" href="{{this.source}}">{{this.name}}</a>
     {{/each}}
-    <divide></divide>
+
     <div class="socials">
       {{#each social}}
       <a rel="me" href="https://{{link}}" class="{{name}}">
@@ -14,7 +14,6 @@
           <title>{{name}} Icon</title>
           <path d="{{icon.path}}"></path>
         </svg></a>
-
       {{/each}}
     </div>