Updates footer links to self hosted services

package.json

@@ -1,6 +1,6 @@
 {
   "name": "andrewgioia.com",
-  "version": "7.0.1",
+  "version": "7.0.2",
   "description": "Internet homepage for Andrew Gioia, co-founder of TeachBoost.",
   "main": "public/index.html",
   "private": true,

src/index.html

@@ -26,12 +26,15 @@
 			</h1>
 		</main>
 		<footer>
-			<a href="https://github.com/andrewgioia" target="blank" class="github">
-                <i class="icon icon-github"></i>
-            </a>
             <a href="https://gioia.social/@andrew" target="blank" class="mastodon">
                 <i class="icon icon-mastodon"></i>
             </a>
+            <a href="https://gioia.photos/andrew" target="blank" class="pixelfed">
+                <i class="icon icon-pixelfed"></i>
+            </a>
+            <a href="https://git.gioia.cloud/andrew" target="blank" class="gitea">
+                <i class="icon icon-gitea"></i>
+            </a>
             <a href="mailto:hi@andrewgioia.com" target="blank" class="email">
                 <i class="icon icon-email"></i>
             </a>

src/scss/_dark.scss

@@ -19,11 +19,17 @@
         }
     }
     footer {
-        a.github {
-            color: var(--link-gh-dark);
-        }
         a.blog {
             color: var(--link-blog-dark);
         }
+        a.gitea {
+            color: var(--link-gitea-dark);
+        }
+        a.github {
+            color: var(--link-gh-dark);
+        }
+        a.pixelfed {
+            color: var(--link-pf-dark);
+        }
     }
 }

src/scss/_icons.scss

@@ -1,7 +1,9 @@
 $icon-arrow:        '\e902';
 $icon-email:        '\e903';
+$icon-gitea:        '\e908';
 $icon-github:       '\e900';
 $icon-mastodon:     '\e901';
+$icon-pixelfed:     '\e909';
 $icon-rss:          '\e907';
 
 @font-face {
@@ -17,7 +19,8 @@ $icon-rss:          '\e907';
     font-display: block;
 }
 
-[class^="icon-"], [class*=" icon-"] {
+[class^="icon-"],
+[class*=" icon-"] {
     font-family: 'andrew' !important; // !i to prevent issues with browser extensions that change fonts
     speak: never;
     font-style: normal;
@@ -31,19 +34,25 @@ $icon-rss:          '\e907';
     -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-arrow:before {
+.icon-arrow::before {
     content: $icon-arrow;
 }
-.icon-email:before {
+.icon-email::before {
     content: $icon-email;
 }
-.icon-github:before {
+.icon-gitea::before {
+    content: $icon-gitea;
+}
+.icon-github::before {
     content: $icon-github;
 }
-.icon-mastodon:before {
+.icon-mastodon::before {
     content: $icon-mastodon;
 }
-.icon-rss:before {
+.icon-pixelfed::before {
+    content: $icon-pixelfed;
+}
+.icon-rss::before {
     content: $icon-rss;
     font-weight: 900;
 }

src/scss/_variables.scss

@@ -17,6 +17,10 @@ $link-gh-normal:        #24292e;
 $link-gh-dark:          #f1f1f1;
 $link-blog-normal:      #736be3;
 $link-blog-dark:        #9690ea;
+$link-gitea-normal:     #1bc47d;
+$link-gitea-dark:       #87b081;
+$link-pf-normal:        #66cccc;
+$link-pf-dark:          #78c2c3;
 $screen-mobile:         640px;
 $screen-tablet:         768px;
 $screen-laptop:         1024px;

src/scss/theme.scss

@@ -23,6 +23,10 @@
     --link-gh-dark:      #{$link-gh-dark};
     --link-blog-normal:  #{$link-blog-normal};
     --link-blog-dark:    #{$link-blog-dark};
+    --link-gitea-normal: #{$link-gitea-normal};
+    --link-gitea-dark:   #{$link-gitea-dark};
+    --link-pf-normal:    #{$link-pf-normal};
+    --link-pf-dark:      #{$link-pf-dark};
 }
 
 // icons
@@ -85,6 +89,18 @@ footer {
         font-size: max(8vmin, 36px);
         margin-right: 4vmin;
 
+        &.blog {
+            color: var(--link-blog-normal);
+        }
+
+        &.email {
+            color: #ef5777;
+        }
+
+        &.gitea {
+            color: var(--link-gitea-normal);
+        }
+
         &.github {
             color: var(--link-gh-normal);
         }
@@ -93,12 +109,8 @@ footer {
             color: #3088d4;
         }
 
-        &.email {
+        &.pixelfed {
-            color: #ef5777;
+            color: var(--link-pf-normal);
-        }
-
-        &.blog {
-            color: var(--link-blog-normal);
         }
     }
 }