From d0450ca673270555491fbfe5a9c0737e34ba1284 Mon Sep 17 00:00:00 2001
From: Colin Kallemein <cakallemein@gmail.com>
Date: Tue, 4 Jun 2024 22:34:51 +0200
Subject: [PATCH] Changed rem to px aside from font-size
Good code practice
---
src/assets/scss/login.scss | 20 ++++++++++----------
src/assets/scss/main.scss | 2 +-
src/components/Game.vue | 8 ++++----
src/components/game/Chat.vue | 14 +++++++-------
src/components/game/Hud.vue | 14 +++++++-------
src/components/game/Menu.vue | 22 +++++++++++-----------
src/components/screens/Characters.vue | 12 ++++++------
src/components/sprites/Character.vue | 2 +-
src/components/utilities/Modal.vue | 4 ++--
9 files changed, 49 insertions(+), 49 deletions(-)
diff --git a/src/assets/scss/login.scss b/src/assets/scss/login.scss
index a0f2b58..46666e3 100644
--- a/src/assets/scss/login.scss
+++ b/src/assets/scss/login.scss
@@ -19,18 +19,18 @@
flex-direction: column;
.content-elements {
- margin: 5rem 0;
+ margin: 80px 0;
width: inherit;
display: flex;
flex-direction: column;
- gap: 1.5rem;
+ gap: 24px;
.login-form {
width: inherit;
form {
display: grid;
- gap: 1rem;
+ gap: 15px;
width: inherit;
.form-field {
@@ -38,19 +38,19 @@
flex-direction: column;
background-color: rgba($white, 0.5);
border-radius: 3px;
- min-width: 25rem;
+ min-width: 400px;
margin: 0 auto;
label {
color: $black;
background-color: rgba($white, 0.5);
- padding: 0.25rem;
+ padding: 4px;
font-size: 0.875rem;
border-radius: 3px 3px 0 0;
}
input {
- padding: 0.3rem 0.25rem;
+ padding: 4px;
font-size: 0.875rem;
&:focus-visible {
@@ -64,11 +64,11 @@
.row-buttons {
display: flex;
justify-content: center;
- gap: 0.5rem;
+ gap: 8px;
.button {
- padding: 0.6rem 0;
- min-width: 6.25rem;
+ padding: 10px 0;
+ min-width: 100px;
font-size: 0.65rem;
border-radius: 5px;
@@ -81,7 +81,7 @@
}
.main-title {
- margin-top: 7rem;
+ margin-top: 115px;
text-align: center;
font-size: 3rem;
text-shadow:
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index c1a8def..fd1c9c4 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -24,7 +24,7 @@ h1, h2, h3, h4, h5, h6 {
}
p, span, li, a, button, label {
- font-family: Arial, sans-serif;
+ font-family: Helvetica, Arial, sans-serif;
color: $white;
}
diff --git a/src/components/Game.vue b/src/components/Game.vue
index 42f8829..02362f3 100644
--- a/src/components/Game.vue
+++ b/src/components/Game.vue
@@ -93,17 +93,17 @@ const bootScene = (scene: Phaser.Scene) => {
position: absolute;
left: 0;
right: 0;
- margin: 0 3rem;
+ margin: 0 48px;
}
.top-ui {
- top: 3rem;
+ top: 48px;
}
.bottom-ui {
justify-content: space-between;
align-items: center;
- bottom: 6.25rem;
- height: 6.25rem;
+ bottom: 100px;
+ height: 100px;
}
</style>
\ No newline at end of file
diff --git a/src/components/game/Chat.vue b/src/components/game/Chat.vue
index 8506996..6cdf3a3 100644
--- a/src/components/game/Chat.vue
+++ b/src/components/game/Chat.vue
@@ -18,12 +18,12 @@
align-items: center;
input {
- width: 32rem;
- height: 3rem;
- border-radius: 3rem;
+ width: 500px;
+ height: 48px;
+ border-radius: 48px;
opacity: 0.8;
font-size: 1.2rem;
- padding: 0 1.5rem;
+ padding: 0 24px;
background-color: rgba($white, 0.85);
border: 2px solid $white;
color: black;
@@ -31,9 +31,9 @@
img {
position: absolute;
- left: 32rem;
- width: 1.875rem;
- height: 1.875rem;
+ left: 500px;
+ width: 30px;
+ height: 30px;
}
}
</style>
diff --git a/src/components/game/Hud.vue b/src/components/game/Hud.vue
index 9ce36d1..2b50ac7 100644
--- a/src/components/game/Hud.vue
+++ b/src/components/game/Hud.vue
@@ -16,21 +16,21 @@
.hud-wrapper {
position: relative;
- left: -2rem;
+ left: -32px;
.profile, .hud, &::before {
position: absolute;
- top: 2rem;
- left: 2rem;
+ top: 32px;
+ left: 32px;
width: 245px;
height: 75px;
- border-radius: 1rem;
+ border-radius: 16px;
z-index: 1;
}
.profile {
- width: 4rem;
- height: 4rem;
+ width: 64px;
+ height: 64px;
background-color: rgba($white, 0.8);
border-radius: 100%;
border: 3px solid $white;
@@ -38,7 +38,7 @@
left: 0;
z-index: 2; // Ensure profile is above hud and before
img {
- width: 2rem;
+ width: 32px;
position: absolute;
left: 50%;
top: 50%;
diff --git a/src/components/game/Menu.vue b/src/components/game/Menu.vue
index 582b6cc..f0f92dc 100644
--- a/src/components/game/Menu.vue
+++ b/src/components/game/Menu.vue
@@ -38,22 +38,22 @@
.menu {
list-style: none;
display: flex;
- gap: 1.25rem;
+ gap: 20px;
.menu-item {
position: relative;
p {
position: absolute;
- bottom: 3.125rem;
- width: 4rem;
+ bottom: 50px;
+ width: 64px;
text-align: center;
background-color: #b1b2b5;
border: 2px solid $white;
- border-radius: 1.5rem;
- height: 1.5rem;
+ border-radius: 24px;
+ height: 24px;
font-size: 0.875rem;
- line-height: 1.5rem;
+ line-height: 24px;
left: 50%;
transform: translateX(-50%);
display: none;
@@ -63,8 +63,8 @@
position: absolute;
top: 100%;
background-color: $white;
- height: 0.5rem;
- width: 0.875rem;
+ height: 8px;
+ width: 14px;
clip-path: polygon(100% 0, 0 0, 50% 100%);
left: 50%;
transform: translateX(-50%);
@@ -72,13 +72,13 @@
}
a {
- padding: 0.5rem;
+ padding: 8px;
background-color: rgba(127, 127, 127, 0.7);
border: 2px solid $white;
border-radius: 50%;
display: block;
- width: 1.875rem;
- height: 1.875rem;
+ width: 30px;
+ height: 30px;
img {
width: inherit;
diff --git a/src/components/screens/Characters.vue b/src/components/screens/Characters.vue
index b91e8d7..b263b40 100644
--- a/src/components/screens/Characters.vue
+++ b/src/components/screens/Characters.vue
@@ -106,8 +106,8 @@ function create() {
flex-direction: column;
justify-content: center;
align-items: center;
- gap: 6.25rem;
- padding: 0 5rem;
+ gap: 100px;
+ padding: 0 80px;
&::before {
content: '';
}
@@ -115,7 +115,7 @@ function create() {
.characters-wrapper {
display: flex;
justify-content: center;
- gap: 5rem;
+ gap: 80px;
width: 100%;
.character {
@@ -154,7 +154,7 @@ function create() {
span {
align-self: center;
- font-size: 16px;
+ font-size: 1rem;
}
}
@@ -243,10 +243,10 @@ function create() {
button {
padding: 8px 10px 8px 20px;
- min-width: 6.25rem;
+ min-width: 100px;
position: relative;
border-radius: 5px;
- font-size: 18px;
+ font-size: 1.125rem;
display: flex;
gap: 10px;
align-items: center;
diff --git a/src/components/sprites/Character.vue b/src/components/sprites/Character.vue
index 045d5a0..1597756 100644
--- a/src/components/sprites/Character.vue
+++ b/src/components/sprites/Character.vue
@@ -8,7 +8,7 @@
:style="{
fontFamily: 'Helvetica, Arial',
color: '#42B883',
- fontSize: '20px',
+ fontSize: '1.25rem',
fontStyle: 'bold',
strokeThickness: 8,
stroke: '#213547'
diff --git a/src/components/utilities/Modal.vue b/src/components/utilities/Modal.vue
index 6a1f31a..48e4ec1 100644
--- a/src/components/utilities/Modal.vue
+++ b/src/components/utilities/Modal.vue
@@ -102,7 +102,7 @@ onUnmounted(() => {
background-color: rgba($purple, 0.6);
padding: 0 20px;
border-radius: 20px 20px 0 0;
- height: 3.75rem;
+ height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
@@ -149,7 +149,7 @@ onUnmounted(() => {
button {
padding: 10px 16px;
- min-width: 6.25rem;
+ min-width: 100px;
border-radius: 5px;
}