feat: social links

Author: JesperDramsch

_includes/footer.html

@@ -1,14 +1,22 @@
-<hr>
+<hr />
 <div class="row">
-  <div class="col-12 col-sm-12">
-    {% tf footer/maintainer.md %}
-  </div>
+	<div class="col-12 col-sm-12">{% tf footer/maintainer.md %}</div>
 </div>
 <div class="row">
-  <div class="col-12 col-sm-12">
-    <div class="footer-links">
-      {% tf footer/terms.md %}
-    </div>
-  </div>
+	<div class="col-12 col-sm-12">
+		<div class="footer-links">{% tf footer/terms.md %}</div>
+	</div>
+</div>
+<div class="row">
+	<div class="col-12 col-sm-12 text-center">
+		<div class="social-links">
+			<a href="https://web.brid.gy/r/https://pythondeadlin.es" class="social-icon" rel="me">
+				<i class="fa-brands fa-mastodon fa-lg"></i>
+			</a>
+			<a href="https://bsky.app/profile/pythondeadlin.es" class="social-icon" rel="me">
+				<i class="fa-brands fa-bluesky fa-md"></i>
+			</a>
+		</div>
+	</div>
 </div>
 {% include google_analytics.js %}

_includes/head.html

@@ -32,6 +32,9 @@
 <link rel="stylesheet" type="text/css" href="{{ "/static/css/deadlines.css" | prepend:site.baseurl_root }}?t={{site.time | date: '%s'}}" media="screen,projection">
 <link rel="stylesheet" type="text/css" href="{{ "/static/css/calendar.css" | prepend:site.baseurl_root }}?t={{site.time | date: '%s'}}" media="screen,projection">
 <link rel="stylesheet" type="text/css" href="{{ "/static/css/search.css" | prepend:site.baseurl_root }}?t={{site.time | date: '%s'}}" media="screen,projection">
+<link rel="stylesheet" type="text/css" href="{{ "/static/css/search.css" | prepend:site.baseurl_root }}?t={{site.time | date: '%s'}}" media="screen,projection">
+<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/fontawesome.min.css" media="screen,projection">
+<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/brands.min.css" media="screen,projection">
 
 <link rel="shortcut icon" href="{{ "/static/img/favicon.png" | prepend:site.baseurl_root }}">
 

_includes/masthead.html

@@ -15,14 +15,15 @@ <h1 class="display-4">{{ include.title}}</h1>
 					<a
 						href="https://calendar.google.com/calendar/r?cid={{ site.url }}/{{ site.github_repo }}.ics"
 						class="btn btn-outline-danger mx-1"
+						rel="me"
 					>
-						<i class="fa fa-google" aria-hidden="true"></i> {% t buttons.google %}
+						<i class="fa-brands fa-google fa-sm" aria-hidden="true"></i> {% t buttons.google %}
 					</a>
 					<a
 						href="https://github.com/{{ site.github_username }}/{{ site.github_repo }}/"
 						class="btn btn-outline-dark mx-1"
 					>
-						<i class="fa fa-github" aria-hidden="true"></i> {% t buttons.github %}
+						<i class="fa-brands fa-github fa-xs" aria-hidden="true"></i> {% t buttons.github %}
 					</a>
 				</div>
 				<hr class="my-3" />

static/css/deadlines.css

@@ -328,3 +328,32 @@ footer {
 	text-decoration: dashed;
 	color: #fff;
 }
+
+.social-icon {
+	display: inline-block;
+	margin: 0 10px;
+	font-size: 24px;
+	color: #666;
+	transition: color 0.3s ease;
+	text-decoration: none;
+}
+
+.social-icon:hover {
+	color: #333;
+	text-decoration: none;
+}
+
+/* Mastodon specific color */
+.fa-mastodon:hover {
+	color: #6364ff;
+}
+
+/* Bluesky specific styling */
+.fa-bluesky {
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	font-style: normal;
+}
+
+.fa-bluesky:hover {
+	color: #0085ff;
+}