Update home page icon style

mattsherman · Nov 16, 2024 · d4758f5 · d4758f5
1 parent 161a4d8
commit d4758f5
Showing 1 changed file with 21 additions and 11 deletions.
diff --git a/src/styles.css b/src/styles.css
@@ -70,43 +70,53 @@ body > footer {
 
 .home-page-icons {
   display: flex;
+  flex-direction: column;
 
-  @media (max-width: 800px) {
-    flex-direction: column;
-  }
+  align-items: stretch;
 
   padding-inline-start: 0;
 
   list-style-type: none;
 
   gap: 1rem;
 
-  justify-content: center;
-
   li {
     a {
       display: flex;
-      flex-direction: column;
+      flex-direction: row;
       align-items: center;
 
-      min-width: 150px;
+      padding: 0.5em;
+      gap: 0.5em;
 
       font-size: 1.5rem;
 
       text-transform: uppercase;
 
+      background: var(--link-color);
+      color: var(--base-background-color);
+
+      border-radius: 5px;
+
       .icon {
-        width: 5rem;
-        height: 5rem;
+        width: 2em;
+        height: 2em;
+
+        fill: var(--base-background-color);
+      }
+
+      &:hover,
+      &:focus {
+        background: var(--visited-link-color);
       }
 
       &:visited {
-        color: var(--link-color);
+        color: var(--base-background-color);
       }
     }
 
     a:visited svg.icon {
-      fill: var(--link-color);
+      fill: var(--base-background-color);
     }
   }
 }