Altera margens e paddings de containers, para que o site se ajuste a diferente tamanhos de telas de desktop

nicolaskayamori · nicolaskayamori · commit bb96dd244877 · 2024-11-22T00:36:42.000-03:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,20 +2,21 @@
   "name": "tcc-front",
   "version": "0.0.0",
   "scripts": {
-    "dev": "VUE_ENV=dev vite",
-    "postinstall": "npm run build",
-    "start": "VUE_ENV=prod node server.js",
-    "build": "vite build",
-    "preview": "vite preview --port 5050",
-    "test:unit": "vitest --environment jsdom",
-    "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
-    "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
-  },
+   "dev": "SET VUE_ENV=dev && vite",
+   "postinstall": "npm run build",
+   "start": "SET VUE_ENV=prod && node server.js",
+   "build": "vite build",
+   "preview": "vite preview --port 5050",
+   "test:unit": "vitest --environment jsdom",
+   "test:e2e": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress open'",
+   "test:e2e:ci": "start-server-and-test preview http://127.0.0.1:5050/ 'cypress run'",
+   "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
+},
   "dependencies": {
     "@element-plus/icons-vue": "^1.1.4",
     "axios": "^0.27.2",
     "connect-history-api-fallback": "^1.6.0",
+    "cross-env": "^7.0.3",
     "element-plus": "^2.1.11",
     "express": "^4.18.1",
     "lodash": "^4.17.21",
diff --git a/src/pages/Home/Home.scss b/src/pages/Home/Home.scss
@@ -27,32 +27,33 @@ body {
 
 .body {
   display: flex;
-  margin-top: 148px;
+  margin-top: 3%;
+  justify-content: space-evenly;
   align-items: center;
 }
 
 .body-box {
-  width: 1164px;
-  height: 424px;
+  width: 60%;
   display: flex;
   justify-content: space-between;
-  margin: auto;
+  margin-left: 10%;
+  margin-right: 10%;
 }
 
 
 .body-text {
-  width: 424px;
-  height: 220px;
+  width: 100%;
+  padding: 4%;
 }
 
 h1 {
-  font-size: 49px;
-  width: 424px;
+  font-size: 300%;
+  width: 130%;
   height: 95px;
 }
 
 p {
-  font-size: 22px;
+  font-size: 130%;
   width: 580px;
   height: 70px;
   margin-top: 55px;
@@ -61,14 +62,15 @@ p {
 
 .login-body {
   display: flex;
-  width: 424px;
-  height: 424px;
+  width: 50%;
+  height: 10%;
   background-color: rgb(40, 42, 56, 0.30);
   border-radius: 20px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  padding: 4%;
 }
 
 .login-box {
@@ -78,8 +80,8 @@ p {
 .login-box h2 {
   font-size: 36px;
   text-align: center;
-  margin-top: 44px;
-  margin-bottom: 44;
+  margin-top: 5%;
+  margin-bottom: 5%;
 
 }
 
@@ -109,7 +111,8 @@ p {
 .register {
   text-align: center;
   margin-top: 40px;
-  font-size: 14px;
+  margin-bottom: 40px;
+  font-size: 100%;
 }
 
 .button-register {
