JonathanMcCaffrey/IGP-Fan-Reference
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

style(Footer) Made link icons bigger, and more tweaks

Browse Source
This commit is contained in:
Jonathan McCaffrey
2022-05-02 12:51:22 -04:00
parent 3c7586960c
commit d93fa03125
1 changed files with 23 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Components/Shared/FooterComponent.razor
+23 -7
View File
@@ -3,21 +3,21 @@
<div class="footerContainer" xmlns="http://www.w3.org/1999/html"> <div class="footerContainer" xmlns="http://www.w3.org/1999/html">
<div class="footerSocials"> <div class="footerSocials">
<a href="https://github.com/JonathanMcCaffrey/IGP-Fan-Reference/discussions" target="_blank"> <a class="footerIcon" href="https://github.com/JonathanMcCaffrey/IGP-Fan-Reference/discussions" target="_blank">
<i class="fa-brands fa-github"></i> <i class="fa-brands fa-github"></i>
</a> </a>
<a href="mailto:igpfanreference@jonathanmccaffrey.com" target="_blank"> <a class="footerIcon" href="mailto:igpfanreference@jonathanmccaffrey.com" target="_blank">
<i class="fa-solid fa-envelope"></i> <i class="fa-solid fa-envelope"></i>
</a> </a>
<a href="https://discord.gg/uMq8bMGeeN" target="_blank"> <a class="footerIcon" href="https://discord.gg/uMq8bMGeeN" target="_blank">
<i class="fa-brands fa-discord"></i> <i class="fa-brands fa-discord"></i>
</a> </a>
<a href="https://www.youtube.com/channel/UCQx88d5C12yp4l7uszNYrdQ" target="_blank"> <a class="footerIcon" href="https://www.youtube.com/channel/UCQx88d5C12yp4l7uszNYrdQ" target="_blank">
<i class="fa-brands fa-youtube"></i> <i class="fa-brands fa-youtube"></i>
</a> </a>
<a href="https://www.twitch.tv/jonathanmccaffrey" target="_blank"> <a class="footerIcon" href="https://www.twitch.tv/jonathanmccaffrey" target="_blank">
<i class="fa-brands fa-twitch"></i> <i class="fa-brands fa-twitch"></i>
</a> </a>
</div> </div>
@@ -29,14 +29,30 @@
<style> <style>
.footerIcon {
font-size: 24px;
padding: 8px;
background-color: rgba(255,255,255,0.05);
border: 2px solid rgba(255,255,255,0.1);
border-radius: 6px;
line-height: 0;
}
.footerIcon:hover {
color: #8fc5ff;
background-color: rgba(200,200,255,0.1);
border: 2px solid rgba(140,140,255,0.4);
}
.footerContainer { .footerContainer {
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding-top: 8px; padding-top: 8px;
padding-bottom: 96px; padding-bottom: 102px;
gap: 12px; gap: 24px;
} }
.footerSocials { .footerSocials {