kass/matteo-the-prestige
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

css changes for accessibility

Browse Source
This commit is contained in:
Elijah Steres 2021-01-01 17:03:04 -05:00
parent 297cd0a6f4
commit 500d807c83
2 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
static/games_page.css
View File

@ -5,6 +5,13 @@ body {
} }
/* Background pattern from Toptal Subtle Patterns */ /* Background pattern from Toptal Subtle Patterns */
:root {
--background-main: #2f3136; /*discord dark theme background-secondary - the same color as the embeds*/
--background-secondary: #4f545c; /*discord's background-tertiary*/
--background-accent: #4f545c; /*discord's background-accent*/
--highlight: rgb(113, 54, 138); /*matteo purple™*/
}
div, button { div, button {
font-family: 'Alegreya', serif; font-family: 'Alegreya', serif;
color: white; color: white;
@ -36,7 +43,7 @@ div, button {
grid-gap: 50px 30px; /*space between rows, then columns*/ grid-gap: 50px 30px; /*space between rows, then columns*/
align-items: center; align-items: center;
justify-items: center; justify-items: center;
grid-auto-rows: 335px; grid-auto-rows: 360px;
grid-auto-flow: row; grid-auto-flow: row;
} }
@ -129,10 +136,10 @@ div, button {
text-align: center; text-align: center;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #2f3136; /*discord dark theme background-secondary - the same color as the embeds*/ background:var(--background-main);
border: 4px solid; border: 4px solid;
border-radius: 4px; border-radius: 4px;
border-color: rgb(113, 54, 138); /*matteo purple™*/ border-color: var(--highlight);
border-top: none; border-top: none;
border-right: none; border-right: none;
border-bottom: none; border-bottom: none;
@ -147,7 +154,7 @@ h2 {
.header { .header {
width: 100%; width: 100%;
background-color: #4f545c; /*discord's background-tertiary*/ background-color: var(--background-secondary);
border-top-right-radius: 4px; border-top-right-radius: 4px;
height: max-content; height: max-content;
@ -188,6 +195,7 @@ h2 {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
margin: 5px 0px;
} }
.team_name { .team_name {
@ -252,7 +260,7 @@ h2 {
} }
.score { .score {
background: #4f545c; /*discord's background-accent*/ background: var(--background-accent);
width: 40px; width: 40px;
min-width: 40px; min-width: 40px;
height: 40px; height: 40px;
@ -274,6 +282,7 @@ h2 {
align-items: end; align-items: end;
width: 100%; width: 100%;
flex-direction: column; flex-direction: column;
margin: 5px 0px;
} }
.player_name { .player_name {
@ -286,13 +295,20 @@ h2 {
.update { .update {
grid-area: update; grid-area: update;
margin-right: 10px; margin-right: 10px;
margin-top: 10px; margin-top: 5px;
min-height: 50px; min-height: 50px;
height: 100%;
background: var(--background-secondary);
border-radius: 4px;
align-items: center;
display: flex;
justify-content: center;
} }
.player_type { .player_type {
width: 100%; width: 100%;
text-align: start; text-align: start;
font-weight: bolder;
} }
.update_emoji, .update_text { .update_emoji, .update_text {

4
templates/game.html
View File

@ -38,11 +38,11 @@
</div> </div>
<div class="players"> <div class="players">
<div class="player pitcher"> <div class="player pitcher">
<div class="player_type">Pitcher:</div> <div class="player_type">PITCHER</div>
<div class="player_name pitcher_name">{{ state.pitcher }}</div> <div class="player_name pitcher_name">{{ state.pitcher }}</div>
</div> </div>
<div class="player batter"> <div class="player batter">
<div class="player_type">Batter:</div> <div class="player_type">BATTER</div>
<div class="player_name batter_name">{{ state.batter }}</div> <div class="player_name batter_name">{{ state.batter }}</div>
</div> </div>
</div> </div>