matteo-the-prestige/static/css/games_page.css

80 lines
1.5 KiB
CSS
Raw Normal View History

2021-01-02 11:21:53 +00:00
.container {
display: grid;
grid-template-columns: repeat(3, minmax(500px, 1fr));
grid-gap: 50px 30px; /*space between rows, then columns*/
align-items: center;
justify-items: center;
grid-auto-flow: row;
}
2021-01-04 22:57:13 +00:00
.emptyslot, .game {
2021-01-03 20:09:31 +00:00
min-height: 298px;
2021-01-02 11:21:53 +00:00
}
#filters {
display: flex;
justify-content: center;
width: 100%;
align-items: center;
margin-top: 10px;
margin-bottom: 20px;
}
#filters > * {
2021-01-03 20:09:31 +00:00
padding: 0.25rem 0.5rem;
margin: 0rem 0.5rem;
2021-01-02 11:21:53 +00:00
font-size: 16pt;
background: rgba(0,0,0,0);
}
#filters > .filter {
2021-01-03 20:09:31 +00:00
border-radius: 0.5rem;
min-width: 6.25rem;
2021-01-02 11:21:53 +00:00
text-align: center;
border: none;
color: white;
text-decoration: none;
}
#selected_filter {
background: rgb(113, 54, 138);
}
#footer {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
2021-01-03 20:09:31 +00:00
height: 4.5rem;
2021-01-02 11:21:53 +00:00
}
#footer > div {
text-align: center;
2021-01-03 20:09:31 +00:00
font-size: 16pt;
2021-01-02 11:21:53 +00:00
position: relative;
2021-01-03 20:09:31 +00:00
top: 0.25rem;
2021-01-02 11:21:53 +00:00
}
.emptyslot {
border: 2px dashed white;
border-radius: 15px;
align-self: stretch;
justify-self: stretch;
text-align: center;
color: white;
}
@media only screen and (max-device-width: 800px) {
.container {
display: grid;
grid-template-columns: repeat(1, minmax(700px, 90%));
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
.emptyslot {
border: none;
2021-01-04 22:57:13 +00:00
min-height: 0px;
2021-01-02 11:21:53 +00:00
}
}