css: improve layout on small screens

Signed-off-by: Naman Sood <mail@nsood.in>
This commit is contained in:
Naman Sood 2023-05-31 00:41:50 -04:00
parent e3c365a6e4
commit f6ac1ec49a
2 changed files with 33 additions and 4 deletions

View file

@ -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;