uwu

assets/css/main.css

@@ -95,68 +95,284 @@ body.light #box {
   transition: border-color 0.5s ease-in-out;
 }
 
+.twitter:hover #box,
+.twitter:focus #box {
+  border-color: #1da1f2;
+}
+
 a.twitter {
   fill: #1da1f2 !important;
+  color: #1da1f2 !important;
 }
 
 a.twitter.light {
   fill: #1da1f2 !important;
+  color: #1da1f2 !important;
+}
+
+.twitter::-moz-selection {
+  color: white;
+  background-color: #1da1f2;
+}
+
+.twitter::selection {
+  color: white;
+  background-color: #1da1f2;
+}
+
+body.light .twitter::-moz-selection {
+  color: black;
+  background-color: #37bbff;
+}
+
+body.light .twitter::selection {
+  color: black;
+  background-color: #37bbff;
+}
+
+.keybase:hover #box,
+.keybase:focus #box {
+  border-color: #33a0ff;
 }
 
 a.keybase {
   fill: #33a0ff !important;
+  color: #33a0ff !important;
 }
 
 a.keybase.light {
   fill: #33a0ff !important;
+  color: #33a0ff !important;
+}
+
+.keybase::-moz-selection {
+  color: white;
+  background-color: #33a0ff;
+}
+
+.keybase::selection {
+  color: white;
+  background-color: #33a0ff;
+}
+
+body.light .keybase::-moz-selection {
+  color: black;
+  background-color: #4dbaff;
+}
+
+body.light .keybase::selection {
+  color: black;
+  background-color: #4dbaff;
+}
+
+.discord:hover #box,
+.discord:focus #box {
+  border-color: #7289da;
 }
 
 a.discord {
   fill: #7289da !important;
+  color: #7289da !important;
 }
 
 a.discord.light {
   fill: #7289da !important;
+  color: #7289da !important;
+}
+
+.discord::-moz-selection {
+  color: white;
+  background-color: #7289da;
+}
+
+.discord::selection {
+  color: white;
+  background-color: #7289da;
+}
+
+body.light .discord::-moz-selection {
+  color: black;
+  background-color: #8ca3f4;
+}
+
+body.light .discord::selection {
+  color: black;
+  background-color: #8ca3f4;
+}
+
+.mastodon:hover #box,
+.mastodon:focus #box {
+  border-color: #3088d4;
 }
 
 a.mastodon {
   fill: #3088d4 !important;
+  color: #3088d4 !important;
 }
 
 a.mastodon.light {
   fill: #3088d4 !important;
+  color: #3088d4 !important;
+}
+
+.mastodon::-moz-selection {
+  color: white;
+  background-color: #3088d4;
+}
+
+.mastodon::selection {
+  color: white;
+  background-color: #3088d4;
+}
+
+body.light .mastodon::-moz-selection {
+  color: black;
+  background-color: #4aa2ee;
+}
+
+body.light .mastodon::selection {
+  color: black;
+  background-color: #4aa2ee;
+}
+
+.twitch:hover #box,
+.twitch:focus #box {
+  border-color: #6441a4;
 }
 
 a.twitch {
   fill: #6441a4 !important;
+  color: #6441a4 !important;
 }
 
 a.twitch.light {
   fill: #6441a4 !important;
+  color: #6441a4 !important;
+}
+
+.twitch::-moz-selection {
+  color: white;
+  background-color: #6441a4;
+}
+
+.twitch::selection {
+  color: white;
+  background-color: #6441a4;
+}
+
+body.light .twitch::-moz-selection {
+  color: black;
+  background-color: #7e5bbe;
+}
+
+body.light .twitch::selection {
+  color: black;
+  background-color: #7e5bbe;
+}
+
+.gitdab:hover #box,
+.gitdab:focus #box {
+  border-color: #faacb7;
 }
 
 a.gitdab {
   fill: #faacb7 !important;
+  color: #faacb7 !important;
 }
 
 a.gitdab.light {
   fill: #faacb7 !important;
+  color: #faacb7 !important;
+}
+
+.gitdab::-moz-selection {
+  color: white;
+  background-color: #faacb7;
+}
+
+.gitdab::selection {
+  color: white;
+  background-color: #faacb7;
+}
+
+body.light .gitdab::-moz-selection {
+  color: black;
+  background-color: #ffc6d1;
+}
+
+body.light .gitdab::selection {
+  color: black;
+  background-color: #ffc6d1;
+}
+
+.github:hover #box,
+.github:focus #box {
+  border-color: #333;
 }
 
 a.github {
   fill: #333 !important;
+  color: #333 !important;
 }
 
 a.github.light {
   fill: #333 !important;
+  color: #333 !important;
+}
+
+.github::-moz-selection {
+  color: white;
+  background-color: #333;
+}
+
+.github::selection {
+  color: white;
+  background-color: #333;
+}
+
+body.light .github::-moz-selection {
+  color: black;
+  background-color: #4d4d4d;
+}
+
+body.light .github::selection {
+  color: black;
+  background-color: #4d4d4d;
+}
+
+.gitlab:hover #box,
+.gitlab:focus #box {
+  border-color: #e24329;
 }
 
 a.gitlab {
   fill: #e24329 !important;
+  color: #e24329 !important;
 }
 
 a.gitlab.light {
   fill: #e24329 !important;
+  color: #e24329 !important;
+}
+
+.gitlab::-moz-selection {
+  color: white;
+  background-color: #e24329;
+}
+
+.gitlab::selection {
+  color: white;
+  background-color: #e24329;
+}
+
+body.light .gitlab::-moz-selection {
+  color: black;
+  background-color: #fc5d43;
+}
+
+body.light .gitlab::selection {
+  color: black;
+  background-color: #fc5d43;
 }
 
 a svg {

assets/css/main.scss

@@ -94,14 +94,31 @@ $socials: (
 	"gitlab": #e24329
 );
 
-@each $site, $accent in $socials {
+@each $site, $color in $socials {
+	.#{$site}:hover,
+	.#{$site}:focus {
+		#box {
+			border-color: $color;
+		}
+	}
+
 	a.#{$site} {
-		fill: $accent !important;
+		fill: $color !important;
-		// color: $accent !important;
+		color: $color !important;
 	}
 	a.#{$site}.light {
-		fill: $accent !important;
+		fill: $color !important;
-		// color: $accent !important;
+		color: $color !important;
+	}
+
+	.#{$site}::selection {
+		color: white;
+		background-color: $color;
+	}
+	body.light .#{$site}::selection {
+		//color: $color + 9a;
+		color: black;
+		background-color: $color + 26;
 	}
 }
 

views/index.hbs

@@ -1,6 +1,6 @@
 <body>
   <div class="center">
-    <h1 class="title"><i>{{name}}</i></h1>
+    <h1 class="title"><i>{{name}}</i> </h1>
     <h1 class="subtitle toggle">dark/light</h1>
     <divide></divide>
     {{#each item}}
@@ -8,16 +8,16 @@
     {{/each}}
     <divide></divide>
     <div class="socials">
-
       {{#each social}}
-      <a href="https://{{link}}" class="{{name}}"> 
+      <a rel="me" href="https://{{link}}" class="{{name}}">x
-        <svg width="40" height="40" role="img" viewBox="0 0 24 24" >
+        <svg width="40" height="40" role="img" viewBox="0 0 24 24">
           <title>{{name}} Icon</title>
           <path d="{{icon.path}}"></path>
         </svg></a>
 
       {{/each}}
     </div>
+    
 
     <div id="box"></div>
   </div>