Add Matrix button, hover tooltips on icons, and mobile optimizations

Co-authored-by: DidiDidi129 <136057713+DidiDidi129@users.noreply.github.com>

assets/css/main.css

@@ -1840,4 +1840,67 @@ input, select, textarea {
     50% {
         transform: translateY(-10px);
     }
-}
+}
+
+/* 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;
+		}
+
+	}