fix up some parts i hated

website/assets/style.css

@@ -1,5 +1,23 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
 
+a {
+    color: white;
+}
+
+.binkies {
+    grid-area: binkies;
+    display: flex;
+    gap: 5px;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+}
+
+.blog {
+    grid-area: blog;
+    min-height: 75vh;
+}
+
 body {
     font-family: "Inter", sans-serif;
     font-optical-sizing: auto;
@@ -9,10 +27,127 @@ body {
     scrollbar-width: thin;
 }
 
-a {
+.commit {
+    grid-area: commit;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0px;
+    padding: 5px;
+    margin: 5px;
+}
+
+.commit > *,
+.commit > * > * {
+    padding: 0;
+    margin: 0;
+}
+
+.contact-icons a {
+    display: inline-block;
+    transition: transform 0.15s;
+}
+
+.contact-icons a i {
+    font-size: 50px;
+    transition:
+        transform 0.15s,
+        color 0.15s;
     color: white;
 }
 
+.contact-icons a[title="Bluesky"]:hover i {
+    transform: scale(1.15);
+    color: #0085ff;
+}
+
+.contact-icons a[title="Discord"]:hover i {
+    transform: scale(1.15);
+    color: #5865f2;
+}
+
+.contact-icons a[title="Forgejo @ sadgit"]:hover i {
+    transform: scale(1.15);
+    color: #f05033;
+}
+
+.contact-icons a[title="GitHub"]:hover i {
+    transform: scale(1.15);
+    color: #333;
+}
+
+.contact-icons a[title="LastFM"]:hover i {
+    transform: scale(1.15);
+    color: #d51007;
+}
+
+.contact-icons a[title="Matrix"]:hover i {
+    transform: scale(1.15);
+    color: #00b7ff;
+}
+
+.contact-icons a[title="Mastodon"]:hover i {
+    transform: scale(1.15);
+    color: #6364ff;
+}
+
+.contact-icons a[title="Telegram"]:hover i {
+    transform: scale(1.15);
+    color: #229ed9;
+}
+
+.details {
+    grid-area: details;
+}
+
+.donations {
+    grid-area: donations;
+}
+
+.e-mail {
+    font-size: small;
+}
+
+.emoji {
+    font-family: "Noto Emoji", sans-serif;
+    font-optical-sizing: auto;
+    font-style: normal;
+    font-variation-settings: "slnt" 0;
+}
+
+.giscus-outer {
+    max-height: 20vh;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    text-shadow: 0px 0px 4px white;
+}
+
+.lastfm {
+    grid-area: lastfm;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    gap: 20px;
+}
+
+.lastfm > div {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.logo {
+    max-width: 40%;
+    max-height: 40%;
+}
+
 .order {
     display: grid;
     grid-template-areas:
@@ -28,13 +163,6 @@ a {
     grid-template-rows: repeat(25vh, 6);
 }
 
-.emoji {
-    font-family: "Noto Emoji", sans-serif;
-    font-optical-sizing: auto;
-    font-style: normal;
-    font-variation-settings: "slnt" 0;
-}
-
 .paper {
     color: white;
     background-color: #000000de;
@@ -44,12 +172,10 @@ a {
     word-wrap: break-word;
     overflow: auto;
 }
-.giscus-outer {
-    max-height: 20vh;
-}
 
-.e-mail {
+.paper > :nth-child(1) {
-    font-size: small;
+    margin: 0;
+    padding: 0;
 }
 
 /* https://danmarshall.github.io/google-font-to-svg-path/ */
@@ -59,81 +185,9 @@ a {
     background-position: 20px 20px;
 }
 
-.paper > :nth-child(1) {
-    margin: 0;
-    padding: 0;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    text-shadow: 0px 0px 4px white;
-}
-.details {
-    grid-area: details;
-}
-.donations {
-    grid-area: donations;
-}
-.lastfm {
-    grid-area: lastfm;
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    gap: 20px;
-}
-.lastfm > div {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-}
-.status {
-    grid-area: status;
-}
-.skills {
-    grid-area: skills;
-}
-.commit {
-    grid-area: commit;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 0px;
-    padding: 5px;
-    margin: 5px;
-}
-
-.commit > *,
-.commit > * > * {
-    padding: 0;
-    margin: 0;
-}
-.binkies {
-    grid-area: binkies;
-    display: flex;
-    gap: 5px;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-}
-.webrings {
-    grid-area: webrings;
-}
 .projects {
     grid-area: projects;
 }
-.blog {
-    grid-area: blog;
-    min-height: 75vh;
-}
-.logo {
-    max-width: 40%;
-    max-height: 40%;
-}
 
 .projects-list {
     display: flex;
@@ -144,6 +198,13 @@ h6 {
     list-style: none;
     height: 200px;
 }
+
+.project-desc {
+    font-size: 1em;
+    margin: 0;
+    color: #eee;
+}
+
 .project-item {
     background: #111a;
     border-radius: 6px;
@@ -154,33 +215,11 @@ h6 {
     gap: 6px;
     transition: background 0.2s;
 }
+
 .project-item:hover {
     background: #222c;
 }
-.project-title {
+
-    font-size: 1.2em;
-    font-weight: 600;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-.project-title a {
-    color: white;
-    text-decoration: underline;
-    transition: color 0.2s;
-}
-.project-desc {
-    font-size: 1em;
-    margin: 0;
-    color: #eee;
-}
-.project-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    margin-top: 4px;
-}
 .project-tag {
     background: #222;
     color: #fff;
@@ -192,10 +231,45 @@ h6 {
     opacity: 0.85;
 }
 
+.project-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-top: 4px;
+}
+
+.project-title {
+    font-size: 1.2em;
+    font-weight: 600;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.project-title a {
+    color: white;
+    text-decoration: underline;
+    transition: color 0.2s;
+}
+
+.skills {
+    grid-area: skills;
+}
+
+.status {
+    grid-area: status;
+}
+
+.webrings {
+    grid-area: webrings;
+}
+
 webring-container {
     width: unset !important;
     height: unset !important;
 }
+
 @media only screen and (max-width: 600px) {
     .order {
         grid-template-areas:

website/index.html

@@ -26,27 +26,39 @@ __TEMPLATE_HEAD__
             <p><a href="https://files.sad.ovh/public/midis">Did you know that I have a 6 gigabyte big MiDi collection?</a></p>
 
             <h2>contact</h2>
-            <a href="https://matrix.to/#/@yourfriend:bark.lgbt">
+            <div class="contact-icons">
-                <img src="assets/logos/matrix.png" height="50px" title="Matrix">
+                <a href="https://matrix.to/#/@yourfriend:bark.lgbt" title="Matrix">
+                    <i class="fa-solid fa-m"></i>
                 </a>
-            <a href="https://discord.com/users/845374523263811614">
+
-                <img src="assets/logos/discord.png" height="50px" title="My discord">
+                <a href="https://discord.com/users/845374523263811614" title="Discord">
+                    <i class="fa-brands fa-discord"></i>
                 </a>
-            <a href="https://git.sad.ovh/sophie">
+
-                <img src="assets/logos/forgejo.png" height="50px" title="Forgejo @ sadgit">
+                <a href="https://git.sad.ovh/sophie" title="Forgejo @ sadgit">
+                    <i class="fa-brands fa-git-alt"></i>
                 </a>
-            <a href="https://github.com/fucksophie">
+
-                <img src="assets/logos/github.png" height="50px" title="Github">
+                <a href="https://github.com/fucksophie" title="GitHub">
+                    <i class="fa-brands fa-github"></i>
                 </a>
-            <a href="https://bark.lgbt/@yourfriend">
+
-                <img src="assets/logos/lastfm.png" height="50px" title="LastFM">
+                <a href="https://bark.lgbt/@yourfriend" title="LastFM">
+                    <i class="fa-brands fa-lastfm"></i>
                 </a>
-            <a href="https://bark.lgbt/@yourfriend">
+
-                <img src="assets/logos/mastodon.png" height="50px" title="Mastodon">
+                <a href="https://bark.lgbt/@yourfriend" title="Mastodon">
+                    <i class="fa-brands fa-mastodon"></i>
                 </a>
-            <a href="https://t.me/stacksmashed">
+
-                <img src="assets/logos/telegram.png" height="60px" title="Telegram">
+                <a href="https://t.me/stacksmashed" title="Telegram">
+                    <i class="fa-brands fa-telegram"></i>
                 </a>
+
+                <a href="https://bsky.app/profile/sad.ovh" title="Bluesky">
+                    <i class="fa-brands fa-bluesky"></i>
+                </a>
+            </div>
             <div class="include88x31">
                 <h2>Include my 88x31 into your website! (hotlinking allowed!)</h2>
                 <pre>

website/templates/head.html

@@ -24,13 +24,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="scripts/oneko.js"></script>
     <link rel="icon" type="image/x-icon" href="/assets/favicon.png">
-    <script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-        if(location.hostname !== "127.0.0.1" && location.hostname !== "localhost") {
-        !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys setPersonProperties getNextSurveyStep onSessionId".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
-        posthog.init('phc_NdFhf5ih8CZhTqVhnmVKpUVqZhIGJQYp6d0uGy5UIOH',{api_host:'https://anal.sad.ovh', person_profiles: 'always'
-            })
-        }
-    </script>
     <!--
         Put the whole 5 grams in some toilet paper
         Im on a budget, soundcloud not paying me, they some fucking haters