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

4
templates/game.html
View File

@ -38,11 +38,11 @@
</div>
<div class="players">
<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>
<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>
</div>