From f6ac1ec49a0fd2e9cca897f02cbe0336fea8c1e3 Mon Sep 17 00:00:00 2001
From: Naman Sood <mail@nsood.in>
Date: Wed, 31 May 2023 00:41:50 -0400
Subject: [PATCH] css: improve layout on small screens

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

diff --git a/css/style.css b/css/style.css
index d36fdf1..cd86768 100644
--- a/css/style.css
+++ b/css/style.css
@@ -184,6 +184,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 {
+  left: auto;
+  right: 1.5rem;
+}
+.main .contact-methods a.contact-method:nth-child(3) p {
+  left: -100rem;
+  right: -100rem;
+  margin: 0 auto;
+}
 .main .contact-methods i {
   width: 4rem;
   height: 4rem;
@@ -344,14 +353,17 @@ body.blue-mode {
   dialog.change-color-dialog br {
     display: none;
   }
-}
-@media (max-width: 25rem) {
+
   .main > .text-container h1 {
     font-size: 3rem;
   }
   .main > .text-container h3 {
     font-size: 1.5rem;
   }
+  .main .contact-methods {
+    justify-content: center;
+    margin-top: 2rem;
+  }
 }
 .clapper {
   position: fixed;
diff --git a/css/style.scss b/css/style.scss
index dd9d2ce..be8b585 100644
--- a/css/style.scss
+++ b/css/style.scss
@@ -203,6 +203,21 @@ body {
 			&:hover p {
 				opacity: 1;
 			}
+
+			&:nth-last-child(1), &:nth-last-child(2) {
+				p {
+					left: auto;
+					right: 1.5rem;
+				}
+			}
+
+			&:nth-child(3) {
+				p {
+					left: -100rem;
+					right: -100rem;
+					margin: 0 auto;
+				}
+			}
 		}
 
 		i {
@@ -388,9 +403,7 @@ body {
 	dialog.change-color-dialog br {
 		display: none;
 	}
-}
 
-@media(max-width: 25rem) {
 	.main {
 		> .text-container {
 			h1 {
@@ -401,6 +414,10 @@ body {
 				font-size: 1.5rem;
 			}
 		}
+		.contact-methods {
+			justify-content: center;
+			margin-top: 2rem;
+		}
 	}
 }