icons yay

pages/contact.php

@@ -53,6 +53,7 @@ if($reqPath === '/contact') {
                 [
                     'id' => 'email',
                     'name' => 'E-mail',
+                    'icon' => 'fmi fmi-email',
                     'display' => 'me@flash.moe',
                     'link' => 'mailto:me+contact@flash.moe',
                 ],
@@ -66,36 +67,42 @@ if($reqPath === '/contact') {
                 [
                     'id' => 'flashii',
                     'name' => 'Flashii',
+                    'icon' => 'fmi fmi-flashii',
                     'display' => 'flash',
                     'link' => '//flashii.net/profile.php?u=1',
                 ],
                 [
                     'id' => 'twitter',
                     'name' => 'Twitter',
+                    'icon' => 'fmi fmi-twitter',
                     'display' => '@smugwave',
                     'link' => '//twitter.com/smugwave',
                 ],
                 [
                     'id' => 'youtube',
                     'name' => 'YouTube',
+                    'icon' => 'fmi fmi-youtube',
                     'display' => 'flashwave',
                     'link' => '//youtube.com/c/flashwave',
                 ],
                 [
                     'id' => 'github',
                     'name' => 'Github',
+                    'icon' => 'fmi fmi-github',
                     'display' => 'flashwave',
                     'link' => '//github.com/flashwave',
                 ],
                 [
                     'id' => 'twitch',
                     'name' => 'Twitch.tv',
+                    'icon' => 'fmi fmi-twitch',
                     'display' => 'flashwave0',
                     'link' => '//twitch.tv/flashwave0',
                 ],
                 [
                     'id' => 'lastfm',
                     'name' => 'Last.fm',
+                    'icon' => 'fmi fmi-lastfm',
                     'display' => 'flashwave_',
                     'link' => '//last.fm/user/flashwave_',
                 ],
@@ -109,27 +116,32 @@ if($reqPath === '/contact') {
                 [
                     'id' => 'steam',
                     'name' => 'Steam',
+                    'icon' => 'fmi fmi-steam',
                     'display' => 'flashwave_',
                     'link' => '//steamcommunity.com/id/flashwave_',
                 ],
                 [
                     'id' => 'nin-sw',
                     'name' => 'Nintendo Switch',
+                    'icon' => 'fmi fmi-switch',
                     'display' => 'SW-7446-8163-4902',
                 ],
                 [
                     'id' => 'nin-3ds',
                     'name' => 'Nintendo 3DS',
+                    'icon' => 'fmi fmi-n3ds',
                     'display' => '4013-0352-0648',
                 ],
                 [
                     'id' => 'nin-wiiu',
                     'name' => 'Wii U / NNID',
+                    'icon' => 'fmi fmi-wiiu',
                     'display' => 'flashwave0',
                 ],
                 [
                     'id' => 'osu',
                     'name' => 'osu!',
+                    'icon' => 'fmi fmi-osu',
                     'display' => 'flash',
                     'link' => '//osu.ppy.sh/u/flash',
                 ],
@@ -143,12 +155,14 @@ if($reqPath === '/contact') {
                 [
                     'id' => 'paypal',
                     'name' => 'Paypal Donation',
+                    'icon' => 'fmi fmi-paypal',
                     'display' => 'flashwave',
                     'link' => '//paypal.me/flashwave',
                 ],
                 [
                     'id' => 'patreon',
                     'name' => 'Patreon',
+                    'icon' => 'fmi fmi-patreon',
                     'display' => 'flashwave',
                     'link' => '//patreon.com/flashwave',
                 ],
@@ -176,7 +190,7 @@ if($reqPath === '/contact') {
 <?php else: ?>
                     <div class="social-background" onclick="fm.selectTextInElement(this.parentNode.querySelector('.social-handle')); fm.copySelectedText();"></div>
 <?php endif; ?>
-                    <div class="social-icon"></div>
+                    <div class="social-icon <?=$social['icon'];?>"></div>
                     <div class="social-content">
                         <div class="social-name"><?=$social['name'];?></div>
                         <div class="social-handle"><?=$social['display'];?></div>

pages/index.php

@@ -72,24 +72,28 @@ if($reqPath === '/') {
         [
             'id' => 'email',
             'name' => 'E-mail',
+            'icon' => 'fmi fmi-email',
             'display' => 'me@flash.moe',
             'link' => 'mailto:me+contact@flash.moe',
         ],
         [
             'id' => 'flashii',
             'name' => 'Flashii',
+            'icon' => 'fmi fmi-flashii',
             'display' => 'flash',
             'link' => '//flashii.net/profile.php?u=1',
         ],
         [
             'id' => 'twitter',
             'name' => 'Twitter',
+            'icon' => 'fmi fmi-twitter',
             'display' => '@smugwave',
             'link' => '//twitter.com/smugwave',
         ],
         [
             'id' => 'github',
             'name' => 'Github',
+            'icon' => 'fmi fmi-github',
             'display' => 'flashwave',
             'link' => '//github.com/flashwave',
         ],
@@ -179,7 +183,7 @@ foreach($projInfo as $proj):
 <?php else: ?>
                             <div class="social-background" onclick="fm.selectTextInElement(this.parentNode.querySelector('.social-handle')); fm.copySelectedText();"></div>
 <?php endif; ?>
-                            <div class="social-icon"></div>
+                            <div class="social-icon <?=$social['icon'];?>"></div>
                             <div class="social-content">
                                 <div class="social-name"><?=$social['name'];?></div>
                                 <div class="social-handle"><?=$social['display'];?></div>

public/assets/2020v2.css

@@ -262,7 +262,6 @@ body {
 .social-icon {
     width: 25px;
     height: 25px;
-    background-size: 25px 25px;
     margin: 3px 4px 2px 8px;
     pointer-events: none;
 }
@@ -280,33 +279,19 @@ body {
     font-family: 'Electrolize', Verdana, 'Dejavu Sans', Arial, Helvetica, sans-serif;
     user-select: text;
 }
-.social-twitter  .social-icon       { background-image: url('//flash.moe/assets/icons/twitter.png'); }
 .social-twitter  .social-background { background-color: #1da1f2; }
-.social-youtube  .social-icon       { background-image: url('//flash.moe/assets/icons/youtube.png'); }
 .social-youtube  .social-background { background-color: #ff0000; }
-.social-flashii  .social-icon       { background-image: url('//flash.moe/assets/icons/flashii.png'); }
 .social-flashii  .social-background { background-color: #8559a5; }
-.social-github   .social-icon       { background-image: url('//flash.moe/assets/icons/github.png'); }
 .social-github   .social-background { background-color: #222222; }
-.social-twitch   .social-icon       { background-image: url('//flash.moe/assets/icons/twitch.png'); }
 .social-twitch   .social-background { background-color: #6441a4; }
-.social-steam    .social-icon       { background-image: url('//flash.moe/assets/icons/steam.png'); }
 .social-steam    .social-background { background-color: #2c2e35; }
-.social-osu      .social-icon       { background-image: url('//flash.moe/assets/icons/steam.png'); }
 .social-osu      .social-background { background-color: #ff66aa; }
-.social-email    .social-icon       { background-image: url('//flash.moe/assets/icons/email.png'); }
 .social-email    .social-background { background-color: #4a3650; }
-.social-lastfm   .social-icon       { background-image: url('//flash.moe/assets/icons/lastfm.png'); }
 .social-lastfm   .social-background { background-color: #ba0000; }
-.social-nin-sw   .social-icon       { background-image: url('//flash.moe/assets/icons/ninswitch.png'); }
 .social-nin-sw   .social-background { background-color: #e60012; }
-.social-nin-3ds  .social-icon       { background-image: url('//flash.moe/assets/icons/ninswitch.png'); }
 .social-nin-3ds  .social-background { background-color: #ce171f; }
-.social-nin-wiiu .social-icon       { background-image: url('//flash.moe/assets/icons/ninswitch.png'); }
 .social-nin-wiiu .social-background { background-color: #00acca; }
-.social-paypal   .social-icon       { background-image: url('//flash.moe/assets/icons/paypal.png'); }
 .social-paypal   .social-background { background-color: #009cde; }
-.social-patreon  .social-icon       { background-image: url('//flash.moe/assets/icons/paypal.png'); }
 .social-patreon  .social-background { background-color: #f86754; }
 
 .index-featured {
@@ -674,3 +659,29 @@ body {
     line-height: 1.4em;
     pointer-events: none;
 }
+
+/** SPRITE SHIT START **/
+.fmi {
+    background-image: url('sprite.png');
+    width: 25px;
+    height: 25px;
+    background-size: 350px 25px;
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
+    .fmi { background-image: url('sprite@2x.png'); background-size: 350px 25px; }
+}
+.fmi.fmi-email { background-position: 350px 0px; }
+.fmi.fmi-flashii { background-position: 325px 0px; }
+.fmi.fmi-github { background-position: 300px 0px; }
+.fmi.fmi-lastfm { background-position: 275px 0px; }
+.fmi.fmi-n3ds { background-position: 250px 0px; }
+.fmi.fmi-osu { background-position: 225px 0px; }
+.fmi.fmi-patreon { background-position: 200px 0px; }
+.fmi.fmi-paypal { background-position: 175px 0px; }
+.fmi.fmi-steam { background-position: 150px 0px; }
+.fmi.fmi-switch { background-position: 125px 0px; }
+.fmi.fmi-twitch { background-position: 100px 0px; }
+.fmi.fmi-twitter { background-position: 75px 0px; }
+.fmi.fmi-wiiu { background-position: 50px 0px; }
+.fmi.fmi-youtube { background-position: 25px 0px; }
+/** SPRITE SHIT END **/

public/assets/sprite.css

@@ -0,0 +1,23 @@
+.fmi {
+    background-image: url('sprite.png');
+    width: 25px;
+    height: 25px;
+    background-size: 350px 25px;
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
+    .fmi { background-image: url('sprite@2x.png'); background-size: 350px 25px; }
+}
+.fmi.fmi-email { background-position: 350px 0px; }
+.fmi.fmi-flashii { background-position: 325px 0px; }
+.fmi.fmi-github { background-position: 300px 0px; }
+.fmi.fmi-lastfm { background-position: 275px 0px; }
+.fmi.fmi-n3ds { background-position: 250px 0px; }
+.fmi.fmi-osu { background-position: 225px 0px; }
+.fmi.fmi-patreon { background-position: 200px 0px; }
+.fmi.fmi-paypal { background-position: 175px 0px; }
+.fmi.fmi-steam { background-position: 150px 0px; }
+.fmi.fmi-switch { background-position: 125px 0px; }
+.fmi.fmi-twitch { background-position: 100px 0px; }
+.fmi.fmi-twitter { background-position: 75px 0px; }
+.fmi.fmi-wiiu { background-position: 50px 0px; }
+.fmi.fmi-youtube { background-position: 25px 0px; }

public/index.php

@@ -1,7 +1,6 @@
 <?php
 // TODO FOR LAUNCH
 //  - Make a new list of headers, make sure they're small in file size
-//  - Make icons
 
 // TODO deferred
 //  - Make related page