From 0230d18b87ba12dbb7a7da474407c988edd86bdb Mon Sep 17 00:00:00 2001
From: Naman Sood <mail@nsood.in>
Date: Fri, 23 Feb 2024 23:04:19 -0500
Subject: [PATCH] css: align contact methods

Signed-off-by: Naman Sood <mail@nsood.in>
---
 css/style.css  | 17 +++++++++--------
 css/style.scss | 16 +++++++++-------
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/css/style.css b/css/style.css
index cd86768..f331eb2 100644
--- a/css/style.css
+++ b/css/style.css
@@ -171,10 +171,11 @@ body.blue-mode {
   color: var(--iconColor);
 }
 .main .contact-methods a.contact-method p {
-  margin: 0;
   position: absolute;
   top: 90%;
-  left: 1.5rem;
+  left: -100rem;
+  right: -100rem;
+  margin: 0 auto;
   width: max-content;
   opacity: 0;
   transition: all 0.2s ease;
@@ -184,14 +185,15 @@ body.blue-mode {
 .main .contact-methods a.contact-method:hover p {
   opacity: 1;
 }
-.main .contact-methods a.contact-method:nth-last-child(1) p, .main .contact-methods a.contact-method:nth-last-child(2) p {
+.main .contact-methods a.contact-method:last-child p {
   left: auto;
   right: 1.5rem;
+  margin: 0;
 }
-.main .contact-methods a.contact-method:nth-child(3) p {
-  left: -100rem;
-  right: -100rem;
-  margin: 0 auto;
+.main .contact-methods a.contact-method:first-child p {
+  left: 1.5rem;
+  right: auto;
+  margin: 0;
 }
 .main .contact-methods i {
   width: 4rem;
@@ -353,7 +355,6 @@ body.blue-mode {
   dialog.change-color-dialog br {
     display: none;
   }
-
   .main > .text-container h1 {
     font-size: 3rem;
   }
diff --git a/css/style.scss b/css/style.scss
index be8b585..f31a1aa 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -189,10 +189,11 @@ body {
 			}
 
 			p {
-				margin: 0;
 				position: absolute;
 				top: 90%;
-				left: 1.5rem;
+				left: -100rem;
+				right: -100rem;
+				margin: 0 auto;
 				width: max-content;
 				opacity: 0;
 				transition: all 0.2s ease;
@@ -204,18 +205,19 @@ body {
 				opacity: 1;
 			}
 
-			&:nth-last-child(1), &:nth-last-child(2) {
+			&:last-child {
 				p {
 					left: auto;
 					right: 1.5rem;
+					margin: 0;
 				}
 			}
 
-			&:nth-child(3) {
+			&:first-child {
 				p {
-					left: -100rem;
-					right: -100rem;
-					margin: 0 auto;
+					left: 1.5rem;
+					right: auto;
+					margin: 0;
 				}
 			}
 		}