Icon CSS Fix Attempt (#13)

Improve alignment + icon size for gem icon + socials icon in `components/articles/Contact.js`
karkir0003 · Dec 26, 2023 · 4fcf57d · 4fcf57d
1 parent 7cb3667
commit 4fcf57d
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git a/components/articles/Contact.js b/components/articles/Contact.js
@@ -26,16 +26,16 @@ const Contact = () => {
             </form>
             <ul className="icons">
             <li><a href="#">
-                <FontAwesomeIcon icon={faTwitter} />
+                <FontAwesomeIcon className="fa-icon" icon={faTwitter} />
             </a></li>
             <li><a href="#">
-                <FontAwesomeIcon icon={faFacebook} />
+                <FontAwesomeIcon className="fa-icon" icon={faFacebook} />
             </a></li>
             <li><a href="#">
-                <FontAwesomeIcon icon={faInstagram} />
+                <FontAwesomeIcon className="fa-icon" icon={faInstagram} />
             </a></li>
             <li><a href="#">
-                <FontAwesomeIcon icon={faGithub} />
+                <FontAwesomeIcon className="fa-icon" icon={faGithub} />
             </a></li>
             </ul>
         </>

diff --git a/styles/base/_typography.scss b/styles/base/_typography.scss
@@ -138,7 +138,7 @@
 		border-left: solid (_size(border-width) * 4) _palette(border);
 		font-style: italic;
 		margin: 0 0 _size(element-margin) 0;
-		padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
+		padding: calc(_size(element-margin) / 4) 0 calc(_size(element-margin) / 4) _size(element-margin);
 	}
 
 	code {

diff --git a/styles/components/_list.scss b/styles/components/_list.scss
@@ -56,11 +56,13 @@
 				a {
 					border-radius: 100%;
 					box-shadow: inset 0 0 0 _size(border-width) _palette(border);
-					display: inline-block;
+					display: inline-flex;
 					height: 2.25rem;
 					line-height: 2.25rem;
 					text-align: center;
 					width: 2.25rem;
+					align-items: center;
+					justify-content: center;
 
 					&:hover {
 						background-color: _palette(border-bg);
@@ -69,6 +71,10 @@
 					&:active {
 						background-color: _palette(border-bg-alt);
 					}
+
+					.fa-icon {
+						font-size: 1.5rem; // Adjust the size of the icon as needed
+					}
 				}
 			}
 		}

diff --git a/styles/libs/_skel.scss b/styles/libs/_skel.scss
@@ -4,7 +4,7 @@
 
 	/// Breakpoints.
 	/// @var {list}
-	$breakpoints: () !global;
+	$breakpoints: ();
 
 	/// Vendor prefixes.
 	/// @var {list}
@@ -573,7 +573,7 @@
 			}
 
 		// Expand just the value?
-			@elseif $expandValue {
+			@else if $expandValue {
 			    @each $vendor in $vendor-prefixes {
 			        #{$property}: #{str-replace-all($value, '-prefix-', $vendor)};
 			    }