Style and formatting changes added to score cards

This commit is contained in:
Lucas Patenaude
2024-04-04 17:31:33 -06:00
parent 437b53a096
commit 2bcace5990
2 changed files with 19 additions and 12 deletions

2
.gitignore vendored
View File

@@ -1,2 +1,2 @@
node_modules ProjectSourceCode/node_modules
.DS_Store .DS_Store

View File

@@ -3,10 +3,8 @@
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 4px; border-radius: 4px;
padding: 6px; padding: 6px;
margin: 2.5px 2.5px; /* Remove horizontal margin */ margin: 5px 2.5px; /* Distance between cards and container */
min-height: 100px;
min-width: 150px; min-width: 150px;
box-sizing: border-box;
transition: transform 0.4s ease; /* Add transition for smooth effect */ transition: transform 0.4s ease; /* Add transition for smooth effect */
} }
@@ -15,6 +13,7 @@
transform: scale(1.05); /* Scale up by 10% on hover */ transform: scale(1.05); /* Scale up by 10% on hover */
} }
/* Entire Card Information Body */
.score-card-body { .score-card-body {
display: flex; display: flex;
width: 100%; width: 100%;
@@ -22,30 +21,38 @@
align-items: center; align-items: center;
} }
/* Left Side of Container (Scores) */
.card-team-container { .card-team-container {
flex: 70%; flex: 70%;
display: flex; flex-grow: 1; /* Both team containers will grow to occupy equal width */
flex-direction: column; flex-direction: column; /* Stacks each team over one another */
} }
/* Right Side of Container (Time) */
.card-game-information-container { .card-game-information-container {
flex: 30%; flex: 30%;
display: flex; display: flex;
align-items: center; margin-left: 10px;
justify-content: center;
} }
.team { .team {
display: flex; display: flex;
align-items: center; align-items: center; /* Center items vertically */
justify-content: center;
padding: 5px; padding: 5px;
} }
.team p { .team p {
margin-right: 10px; /* Adjust this value to control the space between team name and score */ margin: 0; /* Remove default margin */
}
#team-name {
margin-right: 10px;
} }
.team img { .team img {
height: 30px; width: 20px; /* Set the width of the image to 100% of its container */
height: auto; /* Maintain the aspect ratio */
margin-right: 10px; margin-right: 10px;
} }