Replace signature logo with photo and name

themes/theme/templates/base.html

@@ -30,10 +30,16 @@
 			</div>
 			<div class="content">
 				<div class="topbar">
-					<p>
+					<img src="/theme/me.jpg" class="me" alt="A picture of me smiling" />
-						<img src="/theme/logo.png" alt="My name in handwriting" />
+					<div class="info">
+						Tanner Collin
+						<p class="contact-icons">
+							<a href="mailto:site@tannercollin.com"><img src="/theme/mail.svg" /></a>
+							<a href="https://t.me/tannercollin" target="_blank"><img src="/theme/telegram.svg" /></a>
+							<a href="https://github.com/tannercollin" target="_blank"><img src="/theme/github.svg" /></a>
 						</p>
 					</div>
+				</div>
 				{% block content %}
 				{% endblock %}
 			</div>

themes/theme/templates/style.css

@@ -54,14 +54,39 @@ pre {
 }
 
 .topbar {
-	text-align: center;
+	display: table;
-	margin-bottom: 1.5rem;
+	overflow: auto;
+	margin: auto;
+	margin-top: -0.5rem;
+	font-size: 1.5rem;
 }
 
-.content .topbar img {
+.topbar .me {
-	filter: invert(100%);
+	float: left;
-	width: 14rem;
+	height: 6rem;
-	height: auto;
+	width: auto;
+}
+
+.topbar .info {
+	float: left;
+	margin-top: -0.25rem;
+	margin-left: 1.5rem;
+}
+
+.topbar .contact-icons {
+	margin-top: 1.5rem;
+	margin-left: 0.25rem;
+	margin-bottom: 0;
+}
+
+.topbar .contact-icons a {
+	border-bottom: none;
+}
+
+.topbar .contact-icons img {
+	width: 1.5rem;
+	height: 1.5rem;
+	margin-right: 1rem;
 }
 
 .toc {