🐛 Fix touch targets

younesaassila · Sep 22, 2023 · da41ab7 · da41ab7
1 parent 818d8d8
commit da41ab7
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -44,20 +44,24 @@ <h1>JavaScript is disabled.</h1>
               <h1 id="full-name">Younes Aassila</h1>
               <h2 id="bio">Student and Computer Science Enthusiast</h2>
               <ul class="socials">
-                <li class="button">
-                  <a href="https://twitter.com/younesaassila">
+                <li>
+                  <a class="button" href="https://twitter.com/younesaassila">
                     <i class="fa-brands fa-twitter"></i>
                     <span id="ya-social-twitter">Twitter</span>
                   </a>
                 </li>
-                <li class="button">
-                  <a href="https://github.com/younesaassila">
+                <li>
+                  <a class="button" href="https://github.com/younesaassila">
                     <i class="fa-brands fa-github"></i>
                     <span id="ya-social-github">GitHub</span>
                   </a>
                 </li>
-                <li class="button">
-                  <a href="#javascript-required" id="ya-social-email-link">
+                <li>
+                  <a
+                    class="button"
+                    id="ya-social-email-link"
+                    href="#javascript-required"
+                  >
                     <i class="fa-solid fa-envelope"></i>
                     <span id="ya-social-email">Email</span>
                   </a>

diff --git a/src/style.css b/src/style.css
@@ -49,6 +49,7 @@ a,
 a:visited {
   color: var(--brand-color);
   text-decoration: none;
+  cursor: pointer;
   transition: color var(--hover-transition-duration);
 }
 
@@ -58,29 +59,20 @@ a:visited:hover {
 }
 
 .button {
+  display: inline-block;
   padding: 0.5rem 1rem;
   border-radius: 9999px;
   background-color: var(--brand-background-color);
+  color: var(--brand-color);
   cursor: pointer;
   transition: background-color var(--hover-transition-duration);
 }
 
-.button > p,
-.button > a {
-  color: var(--brand-color);
-  transition: color var(--hover-transition-duration);
-}
-
 .button:hover {
   background-color: var(--brand-background-color-hover);
   color: var(--brand-color-hover);
 }
 
-.button:hover > p,
-.button:hover > a {
-  color: var(--brand-color-hover);
-}
-
 .profile {
   display: grid;
   grid-template-rows: 1fr;