librecounter

contact.html

@@ -52,6 +52,22 @@
           </a>
         </li>
       </ul>
+
+      <div class="librecounter fade-in" style="animation-delay: 0.4s">
+        <span class="librecounter-text">
+          Indexed by
+          <a href="https://librecounter.org/referer/show" target="_blank"
+            >LibreCounter</a
+          >
+        </span>
+        <a href="https://librecounter.org/referer/show" target="_blank">
+          <img
+            src="https://librecounter.org/counter.svg"
+            referrerpolicy="unsafe-url"
+            alt="LibreCounter"
+          />
+        </a>
+      </div>
     </div>
 
     <!-- Back to top button -->

index.html

@@ -113,6 +113,22 @@
         If you want an account on any of these, want to suggest something new or
         get a subdomain, just message me
       </p>
+
+      <div class="librecounter fade-in" style="animation-delay: 0.5s">
+        <span class="librecounter-text">
+          Indexed by
+          <a href="https://librecounter.org/referer/show" target="_blank"
+            >LibreCounter</a
+          >
+        </span>
+        <a href="https://librecounter.org/referer/show" target="_blank">
+          <img
+            src="https://librecounter.org/counter.svg"
+            referrerpolicy="unsafe-url"
+            alt="LibreCounter"
+          />
+        </a>
+      </div>
     </div>
 
     <!-- Back to top button -->

styles.css

@@ -182,6 +182,54 @@ br {
   content: "";
 }
 
+/* LibreCounter */
+.librecounter {
+  margin-top: 24px;
+  padding-top: 16px;
+  border-top: 1px solid rgba(244, 162, 97, 0.3);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  min-height: 73px;
+}
+
+.librecounter-text {
+  color: var(--text-color);
+  font-size: 0.9rem;
+  opacity: 0.9;
+}
+
+.librecounter-text a {
+  color: var(--link-color);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.librecounter-text a:hover {
+  color: var(--subtitle-color);
+  text-decoration: underline;
+}
+
+.librecounter a {
+  display: inline-block;
+  transition: transform 0.2s ease, opacity 0.2s ease;
+  flex-shrink: 0;
+  line-height: 0;
+}
+
+.librecounter a:hover {
+  transform: scale(1.05);
+  opacity: 0.9;
+}
+
+.librecounter img {
+  display: block;
+  height: 64px;
+  width: auto;
+  max-width: 100%;
+}
+
 /* Back to top button */
 .back-to-top {
   position: fixed;