add friends to arch.dog

gmem.ca/index.html

@@ -20,8 +20,18 @@
 	  <p id="fursona"><a href="https://fursona.gmem.ca/gmem.ca">check out my fursona</a></p>
 	  <p id="projects"><a href="https://gabrielsimmer.com">check out my projects</a></p>
 
+	  <h2>friends!</h2>
+	  <div id="friends">
+		<a href="https://rawr.ing"><p>kakious</p></a>
+		<a href="https://zatzhing.me/"><img src="./badges/zatzhing.gif" alt="zatzhing.me gif button"></a>
+		<a href="https://www.hack13.me/"><img src="./badges/hack13.png" alt="hack13.me button"></a>
+		<a href="https://keeri.place/"><img src="./badges/keeri.png" alt="keeri.place button"></a>
+		<a href="https://steffo.dev/"><p>steffo</p></a>
+	  </div>
+	  <p><a href="https://arch.dog"><img src="./arch.dog.png" alt="pixel art website button for this very website! black text on a background matching my fursona that says arch.dog"></a></p>
+
 	  <p><a href='https://ko-fi.com/N4N4I73HI' target='_blank'>
-		<img height='36' style='border:0px;height:36px;' src='./kofi.png' border='0' alt='Buy Me a Coffee at ko-fi.com' />
+		  <img height='36' style='border:0px;height:36px;' src='./kofi.png' border='0' alt='Buy Me a Coffee at ko-fi.com' />
 	  </a></p>
 	</main>
 	<style>
@@ -38,6 +48,7 @@
 	<script>
 	  const checkbox = document.querySelector("input[name=language]");
 	  const header = document.querySelector("h1");
+	  const friends = document.querySelector("h2");
 	  const social = document.querySelector("#social");
 	  const fursona = document.querySelector("#fursona");
 	  const projects = document.querySelector("#projects");
@@ -54,11 +65,13 @@
 	  const reloaddog = () => {
 		if (localStorage.getItem("dog") == "true") {
 		  header.innerHTML = "arf arf!";
+		  friends.innerHTML = "aruff!";
 		  social.innerHTML = "<i>*wags tail*</i> awoo woof woof <a href=\"https://floofy.tech/@arch\" rel=\"me\">bark</a>"
 		  fursona.innerHTML = "<a href=\"https://fursona.gmem.ca/gmem.ca\">yip arf</a>"
 		  projects.innerHTML = "<a href=\"https://gabrielsimmer.com\">grrr ruff</a>"
 		} else {
 		  header.innerHTML = "Arch is a dog";
+		  friends.innerHTML = "friends!";
 		  social.innerHTML = "<i>hi!</i> follow me on the <a href=\"https://floofy.tech/@arch\" rel=\"me\">fedi</a>"
 		  fursona.innerHTML = "<a href=\"https://fursona.gmem.ca/gmem.ca\">check out my fursona</a>"
 		  projects.innerHTML = "<a href=\"https://gabrielsimmer.com\">check out my projects</a>"

gmem.ca/styles.css

@@ -101,3 +101,20 @@ footer {
 .rss-group {
   margin: 10px 0;
 }
+
+#friends {
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+
+#friends a {
+  margin: 0px 5px 0px 0px;
+}
+
+#friends a, #friends img {
+  width: 88px;
+  height: 31px;
+  align-content: center;
+  text-align: center;
+}