css: align contact methods

Signed-off-by: Naman Sood <mail@nsood.in>
This commit is contained in:
Naman Sood 2024-02-23 23:04:19 -05:00
parent 303de84d03
commit 0230d18b87
2 changed files with 18 additions and 15 deletions

View file

@ -171,10 +171,11 @@ body.blue-mode {
color: var(--iconColor); color: var(--iconColor);
} }
.main .contact-methods a.contact-method p { .main .contact-methods a.contact-method p {
margin: 0;
position: absolute; position: absolute;
top: 90%; top: 90%;
left: 1.5rem; left: -100rem;
right: -100rem;
margin: 0 auto;
width: max-content; width: max-content;
opacity: 0; opacity: 0;
transition: all 0.2s ease; transition: all 0.2s ease;
@ -184,14 +185,15 @@ body.blue-mode {
.main .contact-methods a.contact-method:hover p { .main .contact-methods a.contact-method:hover p {
opacity: 1; 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; left: auto;
right: 1.5rem; right: 1.5rem;
margin: 0;
} }
.main .contact-methods a.contact-method:nth-child(3) p { .main .contact-methods a.contact-method:first-child p {
left: -100rem; left: 1.5rem;
right: -100rem; right: auto;
margin: 0 auto; margin: 0;
} }
.main .contact-methods i { .main .contact-methods i {
width: 4rem; width: 4rem;
@ -353,7 +355,6 @@ body.blue-mode {
dialog.change-color-dialog br { dialog.change-color-dialog br {
display: none; display: none;
} }
.main > .text-container h1 { .main > .text-container h1 {
font-size: 3rem; font-size: 3rem;
} }

View file

@ -189,10 +189,11 @@ body {
} }
p { p {
margin: 0;
position: absolute; position: absolute;
top: 90%; top: 90%;
left: 1.5rem; left: -100rem;
right: -100rem;
margin: 0 auto;
width: max-content; width: max-content;
opacity: 0; opacity: 0;
transition: all 0.2s ease; transition: all 0.2s ease;
@ -204,18 +205,19 @@ body {
opacity: 1; opacity: 1;
} }
&:nth-last-child(1), &:nth-last-child(2) { &:last-child {
p { p {
left: auto; left: auto;
right: 1.5rem; right: 1.5rem;
margin: 0;
} }
} }
&:nth-child(3) { &:first-child {
p { p {
left: -100rem; left: 1.5rem;
right: -100rem; right: auto;
margin: 0 auto; margin: 0;
} }
} }
} }