icons yay

This commit is contained in:
Pachira 2020-08-19 01:20:25 +00:00
parent 727145b1b3
commit 87ce455ab2
7 changed files with 69 additions and 18 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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 **/

23
public/assets/sprite.css Normal file
View file

@ -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; }

BIN
public/assets/sprite.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/assets/sprite@2x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

View file

@ -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