From cc0752f40ae4724d0eab703718abb445c78b62b0 Mon Sep 17 00:00:00 2001
From: atlastrinity <nyeevans@outlook.com>
Date: Tue, 12 Jan 2021 14:54:22 +0000
Subject: [PATCH] mobile optimisations

changed font size on text,
disabled double tap to zoom, stops users zooming in on gallery,
changed gallery grid layout,
---
 pages/mainpage.css | 39 +++++++++++++++++++++++++--------------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/pages/mainpage.css b/pages/mainpage.css
index 6773914..13bffa8 100644
--- a/pages/mainpage.css
+++ b/pages/mainpage.css
@@ -177,6 +177,15 @@ h1{
 
 @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{
         font-size: 10vw;
 
@@ -194,8 +203,8 @@ h1{
     }
 
     .textBox{
-        margin-top: 10vh;
-        margin-bottom: 10vh;
+        margin-top: 3vh;
+        margin-bottom: 3vh;
         margin-left: auto;
         margin-right: auto;
 
@@ -204,7 +213,8 @@ h1{
 
         border-radius: 0;
 
-        font-size: 2.3vw;
+        text-align: left;
+        font-size: clamp(5px, 1.4vw, 50px);
     }
 
     .profileImage{
@@ -237,7 +247,7 @@ h1{
 
     .galleryImage{ /*all images should be 700x700*/
         grid-column: 1/13;
-        grid-row: 3/8;
+        grid-row: 2/7;
 
         border-bottom-left-radius: 0;
         border: 0;
@@ -255,7 +265,7 @@ h1{
 
     .galleryLink{
         grid-column: 1/13;
-        grid-row: 3/8;
+        grid-row: 2/7;
     
         object-fit: cover;
     
@@ -265,11 +275,11 @@ h1{
 
     .galleryTitle{
         grid-column: 1/13;
-        grid-row: 2;
+        grid-row: 1;
     
         padding: 5px;
     
-        font-size: 3.5vh;
+        font-size: clamp(5px, 1.4vw, 50px);
     
         border-radius: 0;
         border: 5px solid #ffd256;
@@ -279,9 +289,9 @@ h1{
 
     .galleryCaption{
         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-left: 0;
@@ -291,26 +301,27 @@ h1{
     
     .galleryLeftArrow{
         grid-column: 1;
-        grid-row: 13;
+        grid-row: 12;
         font-size: 7vw;
     }
     
     .galleryRightArrow{
         grid-column: 12;
-        grid-row: 13;
+        grid-row: 12;
         font-size: 7vw;
     }
 
     #outroText{
         margin-top: 20vh;
         margin-bottom: 30vh;
-        margin-left: 5vw;
-        margin-right: 5vw;
+        margin-left: 1vw;
+        margin-right: 1vw;
     }
 
     #socialBar{
         position: static;
-        font-size: 3vw;
+        justify-content: left;
+        font-size: 4vw;
     
     }
 }