Differences

This shows you the differences between two versions of the page.

--- components:social:x-follow [2026/09/18 21:30] – ayush
+++ components:social:x-follow [2026/09/18 21:44] (current) – ayush
@@ Line 9: / Line 9: @@
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 0.75rem;
-  width: 44px;
+  width: 2.75rem;
-  padding: 12px;
+  padding: 0.75rem;
   overflow: hidden;
@@ Line 19: / Line 19: @@
   color: #fff;
   background: #111;
-  border-radius: 8px 0 0 8px;
+  border-radius: 0.5rem 0 0 0.5rem;
-  box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
+  box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 12%);
-  font: 500 14px/1.2 system-ui, sans-serif;
+  font-size: var(--caption-size);
-  text-decoration: none;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--caption-line-height);
   white-space: nowrap;
+  text-decoration: none;
   transition:
     width 300ms ease,
-    background 300ms ease,
+    background-color 300ms ease,
     box-shadow 300ms ease;
+}
+.spp-x:any-link {
+  color: #fff;
+  text-decoration: none;
 }
 .spp-x img {
-  flex: 0 0 20px;
+  display: block;
-  width: 20px;
+  flex: 0 0 1.25rem;
-  height: 20px;
+  width: 1.25rem;
+  height: 1.25rem;
 }
@@ Line 44: / Line 53: @@
 .spp-x:is(:hover, :focus-visible) {
-  width: 168px;
+  width: 10.5rem;
   background: #222;
-  box-shadow: 0 8px 24px rgb(0 0 0 / 16%);
+  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 16%);
 }
 .spp-x:is(:hover, :focus-visible) span {
   opacity: 1;
-}
-.spp-x:any-link {
-  color: #fff;
-  text-decoration: none;
-}
-.spp-x:focus-visible {
-  outline: 2px solid #fff;
-  outline-offset: 2px;
 }
@@ Line 81: / Line 81: @@
     src="https://www2.meteo.uni-bonn.de/spp2115/lib/exe/fetch.php?media=x-logo.svg"
     alt=""
+    aria-hidden="true"
   >
   <span>Follow us on X</span>
 </a>
 </html>