Fix styles in small screens

Levminer · Jun 7, 2022 · 31cc623 · 31cc623
1 parent 6ce7bc2
commit 31cc623
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 10 deletions.
diff --git a/.tailwindrc.js b/.tailwindrc.js
@@ -35,6 +35,8 @@ module.exports = {
 				lg: "1400px",
 				md: "200px",
 				"3xl": "2000px",
+
+				small: { max: "1650px" },
 			},
 
 			stroke: (theme) => ({

diff --git a/app/export/index.html b/app/export/index.html
@@ -34,7 +34,7 @@ <h4 data-loc>You can export the 2FA codes you saved.</h4>
 		</div>
 
 		<!-- content -->
-		<div class="relative m-auto mt-20 mb-60 rounded-2xl bg-gray-700 p-1 text-center md:w-11/12 xl:w-3/5">
+		<div class="relative m-auto mt-20 mb-60 w-3/5 rounded-2xl bg-gray-700 p-1 text-center">
 			<!-- before export -->
 			<div class="before_export mx-auto mt-20 mb-20 w-2/3 rounded-2xl bg-gray-800 pb-1">
 				<h3 data-loc class="pt-5">Export codes</h3>
@@ -52,7 +52,7 @@ <h4 data-loc>Your saved codes can be exported here. Ideal if you want to use you
 					<h3 data-loc class="pt-5">Save exported codes</h3>
 					<h4 data-loc>You can save your exported 2FA codes, so you can use them elsewhere, and keeping a backup of your codes is always a good idea.</h4>
 
-					<div class="flex flex-row justify-center pb-3">
+					<div class="small:flex-wrap flex flex-row justify-center pb-3">
 						<div class="my-3 ml-3 mr-1.5 flex w-1/2 flex-wrap items-center justify-center rounded-2xl bg-gray-700 p-4">
 							<h4 data-loc class="m-0 mb-3">Export .authme file</h4>
 							<h5 data-loc class="m-0 mb-3">Ideal to import for Authme or other Authme apps.</h5>

diff --git a/app/import/index.html b/app/import/index.html
@@ -46,7 +46,7 @@ <h4 data-loc>List of the currently supported QR codes. You can import from more
 					<span data-loc>Examples</span>
 				</button>
 
-				<div class="flex flex-row justify-center pb-5">
+				<div class="small:flex-wrap flex flex-row justify-center pb-5">
 					<div class="my-3 ml-3 mr-1.5 flex w-1/2 flex-wrap items-center justify-center rounded-2xl bg-gray-700 p-4">
 						<h4 data-loc class="m-0 mb-3">TOTP 2FA QR code</h4>
 						<h5 data-loc class="m-0">A TOTP QR code is that you find mostly everywhere, if you want to setup 2FA.</h5>

diff --git a/app/landing/index.html b/app/landing/index.html
@@ -21,19 +21,19 @@ <h5 class="build-content m-0 mx-3 flex flex-row text-center font-bold">You are r
 		</div>
 
 		<!-- content -->
-		<div class="relative m-auto mt-40 mb-60 rounded-2xl bg-gray-700 p-1 text-center md:w-11/12 xl:w-3/5">
-			<h1>Authme</h1>
+		<div class="relative m-auto mt-40 mb-60 w-3/5 rounded-2xl bg-gray-700 p-1 text-center">
+			<h1 class="mb-10">Authme</h1>
 
-			<div class="chooseLogin mx-auto mb-20 rounded-2xl bg-gray-800 md:w-11/12 xl:w-2/3">
+			<div class="chooseLogin mx-auto mb-20 w-2/3 rounded-2xl bg-gray-800">
 				<h3 data-loc class="pt-5">Welcome to Authme!</h3>
 				<h4 data-loc>Choose how you want to use Authme. Your 2FA codes are encrypted either way.</h4>
 
-				<div class="flex flex-row justify-center pb-3">
+				<div class="small:flex-wrap flex flex-row justify-center pb-3">
 					<div class="my-3 ml-3 mr-1.5 flex w-1/2 flex-wrap items-center justify-center rounded-2xl bg-gray-700 p-4">
 						<h4 data-loc class="m-0 mb-3">Require password</h4>
 						<h5 data-loc class="m-0 mb-3">You have to type in your password every time you launch Authme.</h5>
 
-						<button class="buttoni my-2 requirePassword" onclick="requirePassword()">
+						<button class="buttoni requirePassword my-2" onclick="requirePassword()">
 							<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 								<path stroke-linecap="round" stroke-linejoin="round" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z" />
 							</svg>
@@ -89,7 +89,7 @@ <h4 data-loc id="text">Create a strong password to encrypt your 2FA codes!</h4>
 						</svg>
 					</div>
 				</div>
-				<button class="buttoni mb-8 comparePasswords" onclick="comparePasswords()">
+				<button class="buttoni comparePasswords mb-8" onclick="comparePasswords()">
 					<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
 						<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
 					</svg>