DerexXD/ut-grade-distribution-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: social media icons and a lil bit of trolling

Browse Source
This commit is contained in:
Derek Chen
2024-04-20 20:06:37 -05:00
parent 6f5a715baf
commit 048bd99a4d
2 changed files with 43 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
docs/changelog.html
View File

@@ -79,9 +79,14 @@
<h2>About Me</h2> <h2>About Me</h2>
<p>Just a simple student trying to make his way in the universe.</p> <p>Just a simple student trying to make his way in the universe.</p>
</div> </div>
<a href="#" class="fa fa-linkedin"></a> <div class="social-icons-container">
<a href="#" class="fa fa-pinterest"></a> <a href="https://www.linkedin.com/in/derekyujirchen/" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-reddit"></a> <a href="https://en.wikipedia.org/wiki/Mark_Zuckerberg" class="fa fa-facebook"></a>
<a href="https://www.youtube.com/@DereC519/featured" class="fa fa-youtube"></a>
<a href="https://photricity.com/flw/ajax/" class="fa fa-reddit"></a>
<a href="https://github.com/DereC4" class="fa fa-github"></a>
<a href="https://www.instagram.com/ramen__is__good/" class="fa fa-instagram"></a>
</div>
</div> </div>
</div> </div>
</div> </div>

38
docs/main.css
View File

@@ -248,8 +248,15 @@ h1 {
margin: 0 auto; /* Center the container horizontally */ margin: 0 auto; /* Center the container horizontally */
} }
.social-icons-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
grid-gap: 10px;
justify-content: center;
}
.fa:hover { .fa:hover {
opacity: 0.9; opacity: 0.8;
} }
.fa-linkedin { .fa-linkedin {
@@ -257,16 +264,33 @@ h1 {
color: white; color: white;
} }
.fa-pinterest {
background: #cb2027; .fa-facebook {
background: #1575e4;
color: white; color: white;
} }
.fa-github {
background: #333; /* GitHub black */
color: #fff; /* White text */
}
.fa-reddit { .fa-reddit {
background: #ff5700; background: #ff5700;
color: white; color: white;
} }
.fa-youtube {
background: #b81111;
color: white;
}
.fa-instagram {
background: #e4405f; /* Instagram pink */
color: #fff; /* White text */
}
.fa { .fa {
padding: 20px; padding: 20px;
font-size: 40px; font-size: 40px;
@@ -307,6 +331,14 @@ h1 {
--h1-size: 18px; --h1-size: 18px;
--footer-size: 15px; --footer-size: 15px;
} }
.social-icons-container {
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
}
.fa {
font-size: 24px;
}
} }
/* Desktop */ /* Desktop */