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

View File

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