fix slight color outline rendering artifact

CU-DBMI · Jan 5, 2024 · 4bbf180 · 4bbf180
1 parent cae4da3
commit 4bbf180
Showing 1 changed file with 14 additions and 17 deletions.
diff --git a/src/grid.css b/src/grid.css
@@ -31,7 +31,6 @@
   aspect-ratio: 1 / var(--ratio);
   width: 100%;
   gap: 5px;
-  background: var(--mid);
   color: var(--white);
   text-align: center;
   overflow-wrap: anywhere;
@@ -41,10 +40,10 @@
   transition: opacity var(--fast);
 }
 
-@keyframes link {
-  from {
-    opacity: 0;
-  }
+.link:hover,
+.link:focus,
+.link:not(:has(.image)) {
+  background: var(--mid);
 }
 
 .grid:has(.link:hover, .link:focus) .link {
@@ -56,6 +55,12 @@
   opacity: 1 !important;
 }
 
+@keyframes link {
+  from {
+    opacity: 0;
+  }
+}
+
 .link > * {
   position: absolute;
   pointer-events: none;
@@ -77,9 +82,7 @@
 
 .initials,
 .image {
-  transition:
-    opacity var(--fast),
-    transform var(--fast);
+  transition: opacity var(--fast), transform var(--fast);
 }
 
 .link:hover .initials,
@@ -97,9 +100,7 @@
   font-weight: 600;
   font-size: 1.1rem;
   opacity: 0;
-  transition:
-    opacity var(--fast),
-    transform var(--fast);
+  transition: opacity var(--fast), transform var(--fast);
 }
 
 .link:hover .name,
@@ -120,9 +121,7 @@
   text-align: center;
   opacity: 0;
   pointer-events: none;
-  transition:
-    opacity var(--fast),
-    transform var(--fast);
+  transition: opacity var(--fast), transform var(--fast);
   transition-delay: 0;
 }
 
@@ -144,9 +143,7 @@
   color: var(--white);
   clip-path: polygon(0% 0%, 105% 0%, 0% 105%);
   pointer-events: none;
-  transition:
-    opacity var(--fast),
-    transform var(--fast);
+  transition: opacity var(--fast), transform var(--fast);
 }
 
 .outline {