From d95fc348575483dd2ee593511bb11b97c92ef21c Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 16 Mar 2026 04:49:55 +0000
Subject: [PATCH] Add Matrix button, hover tooltips on icons, and mobile
optimizations
Co-authored-by: DidiDidi129 <136057713+DidiDidi129@users.noreply.github.com>
---
assets/css/main.css | 65 ++++++++++++++++++++++++++++++++++++++++++++-
index.html | 13 ++++-----
2 files changed, 71 insertions(+), 7 deletions(-)
diff --git a/assets/css/main.css b/assets/css/main.css
index f04e498..58471ea 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1840,4 +1840,67 @@ input, select, textarea {
50% {
transform: translateY(-10px);
}
-}
\ No newline at end of file
+}
+
+/* Matrix icon */
+
+ ul.icons li a.icon-matrix {
+ position: relative;
+ }
+
+ ul.icons li a.icon-matrix svg {
+ vertical-align: middle;
+ width: 1em;
+ height: 1em;
+ }
+
+/* Tooltips */
+
+ ul.icons li {
+ position: relative;
+ }
+
+ ul.icons li a[data-tooltip]:hover::after {
+ content: attr(data-tooltip);
+ position: absolute;
+ bottom: calc(100% + 0.5rem);
+ left: 50%;
+ transform: translateX(-50%);
+ background: rgba(0, 0, 0, 0.85);
+ color: #ffffff;
+ padding: 0.35rem 0.6rem;
+ border-radius: 4px;
+ font-size: 0.7rem;
+ letter-spacing: 0.05rem;
+ white-space: nowrap;
+ pointer-events: none;
+ z-index: 10;
+ }
+
+/* Mobile optimizations */
+
+ @media screen and (max-width: 480px) {
+
+ ul.icons {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 0.5em;
+ }
+
+ ul.icons li {
+ padding: 0;
+ }
+
+ ul.icons li a {
+ height: 2.5rem;
+ width: 2.5rem;
+ line-height: 2.5rem;
+ }
+
+ #main article .center img {
+ max-width: 100%;
+ height: auto;
+ }
+
+ }
\ No newline at end of file
diff --git a/index.html b/index.html
index 0d593a5..f292bb3 100644
--- a/index.html
+++ b/index.html
@@ -35,11 +35,12 @@
Be sure to take a look at the pages below! Glad to have you here!
@@ -67,7 +68,7 @@
+