josh/NHL-Scoreboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: make elements more consistent across screen sizes

Browse Source
This commit is contained in:
Goddard
2024-02-19 21:57:02 -05:00
parent 59fe338658
commit d4f5e4c991
1 changed files with 167 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

251
app/static/styles.css
View File

@@ -34,8 +34,8 @@ h1 {
.team-info { .team-info {
display: flex; display: flex;
align-items: center; align-items: center;
margin-bottom: 7px; margin-bottom: 2%;
margin-top: 25px; /* Added margin-top */ margin-top: 10%; /* Added margin-top */
} }
.team-info-column { .team-info-column {
@@ -44,18 +44,18 @@ h1 {
} }
.team-logo { .team-logo {
width: 50px; width: 20%;
height: auto; height: auto;
margin-right: 10px; margin-right: 2.25%;
} }
.team-name { .team-name {
font-size: 18px; font-size: 80%;
font-weight: bold; font-weight: bold;
} }
.team-score { .team-score {
font-size: 25px; font-size: 120%;
font-weight: bold; font-weight: bold;
margin-left: auto; margin-left: auto;
} }
@@ -67,7 +67,7 @@ h1 {
} }
.team-sog { .team-sog {
font-size: 12px; /* Adjust font size as needed */ font-size: 55%; /* Adjust font size as needed */
color: #ddd; /* Lighter text color */ color: #ddd; /* Lighter text color */
} }
@@ -81,7 +81,7 @@ h1 {
margin-top: 12px; margin-top: 12px;
color: #aaa; /* Lighten the text color */ color: #aaa; /* Lighten the text color */
text-align: center; text-align: center;
font-size: 14px; font-size: 80%;
} }
.game-info strong { .game-info strong {
@@ -100,85 +100,101 @@ h1 {
.pre-state { .pre-state {
position: absolute; position: absolute;
top: 10px; top: 4%;
left: 10px; /* Adjusted left position */ left: 4%; /* Adjusted left position */
background-color: #444; /* Darker background color for pre state */ background-color: #444; /* Darker background color for pre state */
padding: 5px; padding: 1.5%;
border-radius: 5px; border-radius: 5px;
font-size: 12px; font-size: 65%;
color: #fff; /* White text color for live state */ color: #fff; /* White text color for live state */
font-weight: bolder; /* Bold text for live state */ font-weight: bolder; /* Bold text for live state */
z-index: 1; /* Ensure the live state box is above other content */ z-index: 1; /* Ensure the live state box is above other content */
} width: auto;
height: 10%;
.final-state {
position: absolute;
top: 10px;
left: 10px; /* Adjusted left position */
background-color: #444; /* Darker background color for final state */
padding: 5px;
border-radius: 5px;
font-size: 12px;
color: #ddd; /* Lighter text color for final state */
z-index: 1; /* Ensure the final state box is above other content */
font-weight: bold;
}
.live-state {
position: absolute;
top: 10px;
left: 10px; /* Adjusted left position */
background-color: #0b6e31; /* Darker green background color for live state */
padding: 5px;
border-radius: 5px;
font-size: 12px;
color: #fff; /* White text color for live state */
font-weight: bolder; /* Bold text for live state */
z-index: 1; /* Ensure the live state box is above other content */
width: 18px;
}
.live-state-intermission {
position: absolute;
top: 10px;
left: 10px; /* Adjusted left position */
background-color: #444; /* Darker green background color for live state */
padding: 5px;
border-radius: 5px;
font-size: 12px;
color: #fff; /* White text color for live state */
font-weight: bolder; /* Bold text for live state */
z-index: 1; /* Ensure the live state box is above other content */
width: 40px;
}
.live-time {
position: absolute;
top: 10px;
left: 45px; /* Adjusted left position */
background-color: #444; /* Darker background color for time box */
padding: 5px;
border-radius: 5px;
font-size: 12px;
color: #ddd; /* Lighter text color for time box */
z-index: 1; /* Ensure the time box is above other content */
width: 30px;
display: flex; /* Use flexbox */ display: flex; /* Use flexbox */
justify-content: space-evenly; /* Center content horizontally */ justify-content: space-evenly; /* Center content horizontally */
align-items: center; /* Center content vertically */ align-items: center; /* Center content vertically */
} }
.live-time-intermission { .final-state {
position: absolute; position: absolute;
top: 10px; top: 4%;
left: 65px; /* Adjusted left position */ left: 4%; /* Adjusted left position */
background-color: #444; /* Darker background color for time box */ background-color: #444; /* Darker background color for final state */
padding: 5px; padding: 1.5%;
border-radius: 5px; border-radius: 5px;
font-size: 12px; font-size: 65%;
color: #ddd; /* Lighter text color for final state */
z-index: 1; /* Ensure the final state box is above other content */
font-weight: bold;
width: auto;
height: 7.5%;
}
.live-state {
position: absolute;
top: 4%;
left: 4%; /* Adjusted left position */
background-color: #0b6e31; /* Darker green background color for live state */
padding: 1.5%;
border-radius: 5px;
font-size: 80%;
color: #fff; /* White text color for live state */
font-weight: bolder; /* Bold text for live state */
z-index: 1; /* Ensure the live state box is above other content */
width: 7.2%;
height: 7.5%;
}
.live-time {
position: absolute;
top: 4%;
left: 16%; /* Adjusted left position */
background-color: #444; /* Darker background color for time box */
padding: 1.5%;
border-radius: 5px;
font-size: 80%;
color: #ddd; /* Lighter text color for time box */ color: #ddd; /* Lighter text color for time box */
z-index: 1; /* Ensure the time box is above other content */ z-index: 1; /* Ensure the time box is above other content */
width: 30px; display: flex; /* Use flexbox */
justify-content: space-evenly; /* Center content horizontally */
align-items: center; /* Center content vertically */
width: 12.5%;
height: 7.5%;
}
.live-state-intermission {
position: absolute;
top: 5%;
left: 4%; /* Adjusted left position */
background-color: #444; /* Darker green background color for live state */
padding: 1.5%;
border-radius: 5px;
font-size: 80%;
color: #fff; /* White text color for live state */
font-weight: bolder; /* Bold text for live state */
z-index: 1; /* Ensure the live state box is above other content */
width: 15.5%;
height: 7.5%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.live-time-intermission {
position: absolute;
top: 5%;
left: 24%; /* Adjusted left position */
background-color: #444; /* Darker background color for time box */
padding: 1.5%;
border-radius: 5px;
font-size: 80%;
color: #ddd; /* Lighter text color for time box */
z-index: 1; /* Ensure the time box is above other content */
width: 12.5%;
height: 7.5%;
display: flex; /* Use flexbox */ display: flex; /* Use flexbox */
justify-content: space-evenly; /* Center content horizontally */ justify-content: space-evenly; /* Center content horizontally */
align-items: center; /* Center content vertically */ align-items: center; /* Center content vertically */
@@ -225,33 +241,98 @@ h1 {
.team-info { .team-info {
align-items: center; /* Center align items */ align-items: center; /* Center align items */
margin-top: 26px; /* Adjust top margin */ margin-top: 10%; /* Adjust top margin */
margin-bottom: 5px; /* Adjust bottom margin */ margin-bottom: 2%; /* Adjust bottom margin */
} }
.team-logo { .team-logo {
width: 36px; /* Adjust logo size */ width: 12%; /* Adjust logo size */
height: 36px; height: auto;
} }
.team-name { .team-name {
font-size: 16px; /* Decrease font size for better readability */ font-size: 100%; /* Decrease font size for better readability */
font-weight: bold; font-weight: bold;
} }
.team-score { .team-score {
font-size: 24px; /* Decrease font size for better readability */ font-size: 140%; /* Decrease font size for better readability */
font-weight: bold; font-weight: bold;
} }
.game-info { .team-sog {
font-size: 12px; /* Decrease font size for better readability */ font-size: 70%;
}
.game-info {
font-size: 90%; /* Decrease font size for better readability */
}
.live-state {
top: 4%;
left: 3%; /* Adjusted left position */
padding: 1.5%;
border-radius: 5px;
font-size: 80%;
width: 5.5%;
height: 7.2%;
}
.live-time {
top: 4%;
left: 13%; /* Adjusted left position */
padding: 1.5%;
border-radius: 5px;
font-size: 80%;
display: flex; /* Use flexbox */
justify-content: space-evenly; /* Center content horizontally */
align-items: center; /* Center content vertically */
width: 7%;
height: 7.2%;
}
.live-state-intermission {
top: 5%;
left: 4%; /* Adjusted left position */
padding: 1.5%;
border-radius: 5px;
font-size: 80%;
width: 15.5%;
height: 7.5%;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.live-time-intermission {
top: 5%;
left: 24%; /* Adjusted left position */
padding: 1.5%;
border-radius: 5px;
font-size: 80%;
width: 12.5%;
height: 7.5%;
display: flex; /* Use flexbox */
justify-content: space-evenly; /* Center content horizontally */
align-items: center; /* Center content vertically */
} }
.live-state,
.live-time,
.pre-state,
.final-state { .final-state {
font-size: 12px; /* Decrease font size for better readability */ top: 5%;
left: 4%; /* Adjusted left position */
padding: 1.5%;
border-radius: 5px;
font-size: 72%;
width: auto;
height: 7.5%;
} }
.pre-state {
top: 4%;
left: 4%; /* Adjusted left position */
padding: 1.5%;
border-radius: 5px;
font-size: 80%;
}
} }