noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed rem to px aside from font-size

Browse Source 
Good code practice
This commit is contained in:
Colin Kallemein 2024-06-04 22:34:51 +02:00
parent 4f96fb5824
commit d0450ca673
9 changed files with 49 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/assets/scss/login.scss
View File

@ -19,18 +19,18 @@
flex-direction: column; flex-direction: column;
.content-elements { .content-elements {
margin: 5rem 0; margin: 80px 0;
width: inherit; width: inherit;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.5rem; gap: 24px;
.login-form { .login-form {
width: inherit; width: inherit;
form { form {
display: grid; display: grid;
gap: 1rem; gap: 15px;
width: inherit; width: inherit;
.form-field { .form-field {
@ -38,19 +38,19 @@
flex-direction: column; flex-direction: column;
background-color: rgba($white, 0.5); background-color: rgba($white, 0.5);
border-radius: 3px; border-radius: 3px;
min-width: 25rem; min-width: 400px;
margin: 0 auto; margin: 0 auto;
label { label {
color: $black; color: $black;
background-color: rgba($white, 0.5); background-color: rgba($white, 0.5);
padding: 0.25rem; padding: 4px;
font-size: 0.875rem; font-size: 0.875rem;
border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0;
} }
input { input {
padding: 0.3rem 0.25rem; padding: 4px;
font-size: 0.875rem; font-size: 0.875rem;
&:focus-visible { &:focus-visible {
@ -64,11 +64,11 @@
.row-buttons { .row-buttons {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 0.5rem; gap: 8px;
.button { .button {
padding: 0.6rem 0; padding: 10px 0;
min-width: 6.25rem; min-width: 100px;
font-size: 0.65rem; font-size: 0.65rem;
border-radius: 5px; border-radius: 5px;
@ -81,7 +81,7 @@
} }
.main-title { .main-title {
margin-top: 7rem; margin-top: 115px;
text-align: center; text-align: center;
font-size: 3rem; font-size: 3rem;
text-shadow: text-shadow:

2
src/assets/scss/main.scss
View File

@ -24,7 +24,7 @@ h1, h2, h3, h4, h5, h6 {
} }
p, span, li, a, button, label { p, span, li, a, button, label {
font-family: Arial, sans-serif; font-family: Helvetica, Arial, sans-serif;
color: $white; color: $white;
} }

8
src/components/Game.vue
View File

@ -93,17 +93,17 @@ const bootScene = (scene: Phaser.Scene) => {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
margin: 0 3rem; margin: 0 48px;
} }
.top-ui { .top-ui {
top: 3rem; top: 48px;
} }
.bottom-ui { .bottom-ui {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
bottom: 6.25rem; bottom: 100px;
height: 6.25rem; height: 100px;
} }
</style> </style>

14
src/components/game/Chat.vue
View File

@ -18,12 +18,12 @@
align-items: center; align-items: center;
input { input {
width: 32rem; width: 500px;
height: 3rem; height: 48px;
border-radius: 3rem; border-radius: 48px;
opacity: 0.8; opacity: 0.8;
font-size: 1.2rem; font-size: 1.2rem;
padding: 0 1.5rem; padding: 0 24px;
background-color: rgba($white, 0.85); background-color: rgba($white, 0.85);
border: 2px solid $white; border: 2px solid $white;
color: black; color: black;
@ -31,9 +31,9 @@
img { img {
position: absolute; position: absolute;
left: 32rem; left: 500px;
width: 1.875rem; width: 30px;
height: 1.875rem; height: 30px;
} }
} }
</style> </style>

14
src/components/game/Hud.vue
View File

@ -16,21 +16,21 @@
.hud-wrapper { .hud-wrapper {
position: relative; position: relative;
left: -2rem; left: -32px;
.profile, .hud, &::before { .profile, .hud, &::before {
position: absolute; position: absolute;
top: 2rem; top: 32px;
left: 2rem; left: 32px;
width: 245px; width: 245px;
height: 75px; height: 75px;
border-radius: 1rem; border-radius: 16px;
z-index: 1; z-index: 1;
} }
.profile { .profile {
width: 4rem; width: 64px;
height: 4rem; height: 64px;
background-color: rgba($white, 0.8); background-color: rgba($white, 0.8);
border-radius: 100%; border-radius: 100%;
border: 3px solid $white; border: 3px solid $white;
@ -38,7 +38,7 @@
left: 0; left: 0;
z-index: 2; // Ensure profile is above hud and before z-index: 2; // Ensure profile is above hud and before
img { img {
width: 2rem; width: 32px;
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;

22
src/components/game/Menu.vue
View File

@ -38,22 +38,22 @@
.menu { .menu {
list-style: none; list-style: none;
display: flex; display: flex;
gap: 1.25rem; gap: 20px;
.menu-item { .menu-item {
position: relative; position: relative;
p { p {
position: absolute; position: absolute;
bottom: 3.125rem; bottom: 50px;
width: 4rem; width: 64px;
text-align: center; text-align: center;
background-color: #b1b2b5; background-color: #b1b2b5;
border: 2px solid $white; border: 2px solid $white;
border-radius: 1.5rem; border-radius: 24px;
height: 1.5rem; height: 24px;
font-size: 0.875rem; font-size: 0.875rem;
line-height: 1.5rem; line-height: 24px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
display: none; display: none;
@ -63,8 +63,8 @@
position: absolute; position: absolute;
top: 100%; top: 100%;
background-color: $white; background-color: $white;
height: 0.5rem; height: 8px;
width: 0.875rem; width: 14px;
clip-path: polygon(100% 0, 0 0, 50% 100%); clip-path: polygon(100% 0, 0 0, 50% 100%);
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
@ -72,13 +72,13 @@
} }
a { a {
padding: 0.5rem; padding: 8px;
background-color: rgba(127, 127, 127, 0.7); background-color: rgba(127, 127, 127, 0.7);
border: 2px solid $white; border: 2px solid $white;
border-radius: 50%; border-radius: 50%;
display: block; display: block;
width: 1.875rem; width: 30px;
height: 1.875rem; height: 30px;
img { img {
width: inherit; width: inherit;

12
src/components/screens/Characters.vue
View File

@ -106,8 +106,8 @@ function create() {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
gap: 6.25rem; gap: 100px;
padding: 0 5rem; padding: 0 80px;
&::before { &::before {
content: ''; content: '';
} }
@ -115,7 +115,7 @@ function create() {
.characters-wrapper { .characters-wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 5rem; gap: 80px;
width: 100%; width: 100%;
.character { .character {
@ -154,7 +154,7 @@ function create() {
span { span {
align-self: center; align-self: center;
font-size: 16px; font-size: 1rem;
} }
} }
@ -243,10 +243,10 @@ function create() {
button { button {
padding: 8px 10px 8px 20px; padding: 8px 10px 8px 20px;
min-width: 6.25rem; min-width: 100px;
position: relative; position: relative;
border-radius: 5px; border-radius: 5px;
font-size: 18px; font-size: 1.125rem;
display: flex; display: flex;
gap: 10px; gap: 10px;
align-items: center; align-items: center;

2
src/components/sprites/Character.vue
View File

@ -8,7 +8,7 @@
:style="{ :style="{
fontFamily: 'Helvetica, Arial', fontFamily: 'Helvetica, Arial',
color: '#42B883', color: '#42B883',
fontSize: '20px', fontSize: '1.25rem',
fontStyle: 'bold', fontStyle: 'bold',
strokeThickness: 8, strokeThickness: 8,
stroke: '#213547' stroke: '#213547'

4
src/components/utilities/Modal.vue
View File

@ -102,7 +102,7 @@ onUnmounted(() => {
background-color: rgba($purple, 0.6); background-color: rgba($purple, 0.6);
padding: 0 20px; padding: 0 20px;
border-radius: 20px 20px 0 0; border-radius: 20px 20px 0 0;
height: 3.75rem; height: 60px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@ -149,7 +149,7 @@ onUnmounted(() => {
button { button {
padding: 10px 16px; padding: 10px 16px;
min-width: 6.25rem; min-width: 100px;
border-radius: 5px; border-radius: 5px;
} }