DressOrc/Portfolio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mobile optimisations

Browse source 
changed font size on text,
disabled double tap to zoom, stops users zooming in on gallery,
changed gallery grid layout,
This commit is contained in:
atlastrinity 2021-01-12 14:54:22 +00:00
parent 72c1d41417
commit cc0752f40a
1 changed files with 25 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
pages/mainpage.css
View file

@ -177,6 +177,15 @@ h1{
@media (orientation:portrait){ @media (orientation:portrait){
body{
/*
touch-action: none;
touch-action: pan-y;
as well as disabling double tap, disables zoom which some people with bad eyes need, use something else
*/
touch-action: manipulation;
}
h1{ h1{
font-size: 10vw; font-size: 10vw;
@ -194,8 +203,8 @@ h1{
} }
.textBox{ .textBox{
margin-top: 10vh; margin-top: 3vh;
margin-bottom: 10vh; margin-bottom: 3vh;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -204,7 +213,8 @@ h1{
border-radius: 0; border-radius: 0;
font-size: 2.3vw; text-align: left;
font-size: clamp(5px, 1.4vw, 50px);
} }
.profileImage{ .profileImage{
@ -237,7 +247,7 @@ h1{
.galleryImage{ /*all images should be 700x700*/ .galleryImage{ /*all images should be 700x700*/
grid-column: 1/13; grid-column: 1/13;
grid-row: 3/8; grid-row: 2/7;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border: 0; border: 0;
@ -255,7 +265,7 @@ h1{
.galleryLink{ .galleryLink{
grid-column: 1/13; grid-column: 1/13;
grid-row: 3/8; grid-row: 2/7;
object-fit: cover; object-fit: cover;
@ -265,11 +275,11 @@ h1{
.galleryTitle{ .galleryTitle{
grid-column: 1/13; grid-column: 1/13;
grid-row: 2; grid-row: 1;
padding: 5px; padding: 5px;
font-size: 3.5vh; font-size: clamp(5px, 1.4vw, 50px);
border-radius: 0; border-radius: 0;
border: 5px solid #ffd256; border: 5px solid #ffd256;
@ -279,9 +289,9 @@ h1{
.galleryCaption{ .galleryCaption{
grid-column: 1/13; grid-column: 1/13;
grid-row: 8/13; grid-row: 7/12;
font-size: clamp(1rem, 2vw, 3rem); font-size: clamp(5px, 1.4vw, 50px);
border: 5px solid #ffd256; border: 5px solid #ffd256;
border-left: 0; border-left: 0;
@ -291,26 +301,27 @@ h1{
.galleryLeftArrow{ .galleryLeftArrow{
grid-column: 1; grid-column: 1;
grid-row: 13; grid-row: 12;
font-size: 7vw; font-size: 7vw;
} }
.galleryRightArrow{ .galleryRightArrow{
grid-column: 12; grid-column: 12;
grid-row: 13; grid-row: 12;
font-size: 7vw; font-size: 7vw;
} }
#outroText{ #outroText{
margin-top: 20vh; margin-top: 20vh;
margin-bottom: 30vh; margin-bottom: 30vh;
margin-left: 5vw; margin-left: 1vw;
margin-right: 5vw; margin-right: 1vw;
} }
#socialBar{ #socialBar{
position: static; position: static;
font-size: 3vw; justify-content: left;
font-size: 4vw;
} }
} }