fortytwo/me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

css: improve layout on small screens

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

16
css/style.css
View file

@ -184,6 +184,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 {
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 { .main .contact-methods i {
width: 4rem; width: 4rem;
height: 4rem; height: 4rem;
@ -344,14 +353,17 @@ body.blue-mode {
dialog.change-color-dialog br { dialog.change-color-dialog br {
display: none; display: none;
} }
}
@media (max-width: 25rem) {
.main > .text-container h1 { .main > .text-container h1 {
font-size: 3rem; font-size: 3rem;
} }
.main > .text-container h3 { .main > .text-container h3 {
font-size: 1.5rem; font-size: 1.5rem;
} }
.main .contact-methods {
justify-content: center;
margin-top: 2rem;
}
} }
.clapper { .clapper {
position: fixed; position: fixed;

21
css/style.scss
View file

@ -203,6 +203,21 @@ body {
&:hover p { &:hover p {
opacity: 1; 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 { i {
@ -388,9 +403,7 @@ body {
dialog.change-color-dialog br { dialog.change-color-dialog br {
display: none; display: none;
} }
}
@media(max-width: 25rem) {
.main { .main {
> .text-container { > .text-container {
h1 { h1 {
@ -401,6 +414,10 @@ body {
font-size: 1.5rem; font-size: 1.5rem;
} }
} }
.contact-methods {
justify-content: center;
margin-top: 2rem;
}
} }
} }