Merge pull request #2 from lachlan-robinson/refactor-css

Refactor CSS
lachlan-robinson · Dec 18, 2024 · 76fad84 · 76fad84
2 parents f0115cf + d5bc53a
commit 76fad84
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 40 deletions.
diff --git a/index.html b/index.html
@@ -22,8 +22,8 @@ <h1 class="title">ROBINSON</h1>
             <h3 class="subtitle">Full-Stack Web Developer</h3>
             <div class="tag-container">
                 <a href="https://github.com/lachlan-robinson" target="_blank">
-                    <span class="social-tag" id="github">
-                        <span id="github-inner">
+                    <span class="social-tag social-icon github">
+                        <span class="icon-inner" id="github-inner">
                             <i class="fa fa-github"></i>
                         </span>
                         <p>Github</p>
@@ -34,8 +34,8 @@ <h3 class="subtitle">Full-Stack Web Developer</h3>
                     href="https://www.linkedin.com/in/lachlanrobinson/"
                     target="_blank"
                 >
-                    <div class="social-tag" id="linkedin">
-                        <span id="linkedin-inner">
+                    <div class="social-tag social-icon linkedin">
+                        <span class="icon-inner" id="linkedin-inner">
                             <i class="fa fa-linkedin"></i>
                         </span>
                         <p>LinkedIn</p>
@@ -46,8 +46,8 @@ <h3 class="subtitle">Full-Stack Web Developer</h3>
                     href="https://www.instagram.com/lachlanrobinson_/"
                     target="_blank"
                 >
-                    <div class="social-tag" id="instagram">
-                        <span id="instagram-inner">
+                    <div class="social-tag social-icon instagram">
+                        <span class="icon-inner" id="instagram-inner">
                             <i class="fa fa-instagram"></i>
                         </span>
                         <p>Instagram</p>

diff --git a/style.css b/style.css
@@ -89,76 +89,64 @@ a {
 .social-tag p {
     font-size: 1rem;
     color: black;
-    margin-left: 0.5rem;
-    margin-right: 0.5rem;
+    margin: 0 0.5rem;
 }
 
 .fa {
     font-size: 1.5rem;
     color: white;
 }
 
-#github {
+.social-icon {
     transition: 0.3s;
+}
+
+.social-icon.github {
     box-shadow: 0px 0px 0px 0.2rem #212121 inset;
 }
 
-#github:hover {
-    transition: 0.3s;
+.social-icon.github:hover {
     box-shadow: 0px 0px 0px 0.2rem #212121 inset,
         0.2rem 0.2rem 0.2rem rgb(163, 163, 163);
 }
 
-#github-inner {
-    height: 2.5rem;
-    width: 2.5rem;
-    border-radius: 1.25rem;
-    background-color: #212121;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-#linkedin {
-    transition: 0.3s;
+.social-icon.linkedin {
     box-shadow: 0px 0px 0px 0.2rem #0077b5 inset;
 }
 
-#linkedin:hover {
-    transition: 0.3s;
+.social-icon.linkedin:hover {
     box-shadow: 0px 0px 0px 0.2rem #0077b5 inset,
         0.2rem 0.2rem 0.2rem rgb(163, 163, 163);
 }
 
-#linkedin-inner {
+.social-icon.instagram {
+    box-shadow: 0px 0px 0px 0.2rem #d62976 inset;
+}
+
+.social-icon.instagram:hover {
+    box-shadow: 0px 0px 0px 0.2rem #d62976 inset,
+        0.2rem 0.2rem 0.2rem rgb(163, 163, 163);
+}
+
+.icon-inner {
     height: 2.5rem;
     width: 2.5rem;
     border-radius: 1.25rem;
-    background-color: #0077b5;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
-#instagram {
-    transition: 0.3s;
-    box-shadow: 0px 0px 0px 0.2rem #d62976 inset;
+#github-inner {
+    background-color: #212121;
 }
 
-#instagram:hover {
-    transition: 0.3s;
-    box-shadow: 0px 0px 0px 0.2rem #d62976 inset,
-        0.2rem 0.2rem 0.2rem rgb(163, 163, 163);
+#linkedin-inner {
+    background-color: #0077b5;
 }
 
 #instagram-inner {
-    height: 2.5rem;
-    width: 2.5rem;
-    border-radius: 1.25rem;
     background-image: linear-gradient(to right, #fa7e1e, #d62976);
-    display: flex;
-    align-items: center;
-    justify-content: center;
 }
 
 #projects {