nearly done with the html/css; grids are the worst

This commit is contained in:
Elijah Steres 2020-12-29 22:21:47 -05:00
parent f28fbcd227
commit 1cc38665e5
7 changed files with 217 additions and 3 deletions

BIN
static/.DS_Store vendored Normal file

Binary file not shown.

View File

@ -8,7 +8,7 @@ body {
font-family: 'Alegreya', serif;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 300px;
grid-template-rows: 100px 330px;
grid-gap: 50px 30px; /*space between rows, then columns*/
align-items: center;
justify-items: center;
@ -16,6 +16,11 @@ body {
grid-auto-flow: row;
}
#title {
grid-column: 2;
grid-row: 1;
}
.h1 {
margin: auto;
width: 45%;
@ -34,10 +39,165 @@ body {
.game {
font-family: 'Alegreya', serif;
color: white;
align-self: stretch;
justify-self: stretch;
text-align: center;
display: flex;
flex-direction: column;
background: #2f3136; /*discord dark theme background-secondary - the same color as the embeds*/
border: 4px solid;
border-radius: 4px;
border-color: rgb(113, 54, 138); /*matteo purple™*/
border-top: none;
border-right: none;
border-bottom: none;
}
h2 {
font-family: 'Alegreya', serif;
color: white;
text-align: center;
}
}
.header {
width: 100%;
background-color: #4f545c; /*discord's background-tertiary*/
border-top-right-radius: 4px;
height: max-content;
}
.inning {
float: left;
margin: 5px;
}
.weather {
float: right;
margin: 5px;
}
.body {
margin: 10px;
display: grid;
grid-template-columns: 3fr 2fr;
grid-template-areas:
"scores info"
"players players"
"update update";
grid-template-rows: 130px;
grid-row-gap: 10px;
grid-column-gap: 10px;
flex: 1;
}
.scores {
display: flex;
flex-direction: column;
justify-content: space-around;
}
.team {
display: flex;
justify-content: space-between;
width: 100%;
}
.team_name {
overflow: hidden;
}
.info {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
background: #4f545c;
padding-top: 8px;
padding-bottom: 4px;
margin-left: 15%;
border-radius: 4px;
}
.batting {
grid-area: batting;
font-size: 10pt;
text-align: left;
height: max-content;
padding: 5px;
}
.outs {
display: flex;
justify-content: space-between;
align-items: center;
width: 60%;
}
.outs_title {
font-weight: bolder;
}
.outs_count {
display: flex;
}
.out {
height: 20px;
}
.team_name, .score {
font-size: 25px
}
.score {
background: #4f545c; /*discord's background-accent*/
width: 40px;
height: 40px;
border-radius: 20px;
}
.players {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
grid-area: players;
height: max-content;
width: 100%;
}
.player {
display: flex;
justify-content: space-between;
width: 100%;
max-width: 330px;
}
.player_name {
overflow: hidden;
margin-left: 15px;
}
.update {
grid-area: update;
}
.update_emoji, .update_text {
display: inline
}
.field {
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
}
.base1, .base2, .base3 {
height: 60px;
}
.base2 {
margin-bottom: -25%
}

BIN
static/img/base_empty.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
static/img/base_filled.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
static/img/out_in.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
static/img/out_out.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

@ -16,7 +16,61 @@
</div>
<div></div>
<div class="emptyslot"></div>
<div class="emptyslot"></div>
<div class="game">
<div class="header">
<div class="inning">
Inning: 🔼 1/9
</div>
<div class="weather">
🌟 Supernova
</div>
</div>
<div class="body">
<div class="scores">
<div class="team">
<div class="team_name">Halifax Fire Sharks</div>
<div class="score">0</div>
</div>
<div class="team">
<div class="team_name">Dead Batteries</div>
<div class="score">1</div>
</div>
</div>
<div class="info">
<div class="field">
<img class="base2" src="/static/img/base_filled.png"/>
<div style="display: flex;">
<img class="base3" src="/static/img/base_empty.png"/>
<img class="base1" src="/static/img/base_empty.png"/>
</div>
</div>
<div class="outs">
<div class="outs_title">OUTS</div>
<div class="outs_count">
<img class="out" src="/static/img/out_out.png"/>
<img class="out" src="/static/img/out_in.png"/>
</div>
</div>
</div>
<div class="players">
<div class="player">
<div class="player_type">Pitcher:</div>
<div class="player_name">Hot Fish Summer</div>
</div>
<div class="player">
<div class="player_type">Batter:</div>
<div class="player_name">Shape Batteries</div>
</div>
</div>
<div class="update">
<div class="update_emoji">🏏</div>
<div class="update_text">Shape Batteries grounds out to Honk For Santa.</div>
</div>
</div>
<div class="footer">
<div class="batting">Dead Batteries batting</div>
</div>
</div>
<div class="emptyslot"></div>
<div class="emptyslot"></div>
<div class="emptyslot"></div>