Newer
Older
#games-page {
.game-articles {
article {
display: grid;
grid-template-columns: 0.7fr 1fr;
gap: 0 20px;
margin: 20px;
&.game-article {
grid-template-rows: repeat(6, auto);
background-color: $dark_2;
color: $light_0;
}
.game-title {
grid-column: 1 / span 2;
background-color: $light_0;
margin: 0;
padding: 30px 20px;
color: $medium_grey;
font-size: 35px;
font-style: italic;
}
display: grid;
grid-template-columns: auto auto;
.game-tags {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 10px 20px;
span {
font-size: 12px;
padding: 6px;
background-color: $medium_grey;
color: $light_0;
border-radius: 5px;
font-weight: 600;
}
}
.game-status {
@include flex-center;
.game-subtitle {
grid-column: 1;
margin: 10px 20px 30px;
}
.game-description {
grid-column: 1;
text-align: justify;
margin: 10px 20px 30px;
}
.image-carousel {
grid-column: 2;
grid-row: 2 / span 4;
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
padding: 10px 20px;
font-style: italic;
font-size: 20px;
margin: 0;
}
.team-members {
display: flex;
flex-direction: column;
gap: 30px;
.team-member {
display: grid;
grid-template-columns: 150px 1fr;
grid-template-rows: auto auto 1fr;
.team-member-img {
grid-row: 1 / span 3;
overflow: hidden;
img {
image-rendering: crisp-edges;
image-rendering: -moz-crisp-edges;
image-rendering: pixelated;
width: 100%;
}
}
.team-member-title {
margin: 10px 10px 5px;
}
.team-member-subtitle {
margin: 0 10px;
font-size: 14px;
color: $light_1;
font-style: italic;
}
.team-member-body {
margin: 20px 10px 20px 30px;
text-align: justify;
}
}
}
}
}
&.placeholder {
* {
background-color: $light_0;
}
height: 400px;
}
@media screen and (max-width: $screen_l) {
grid-template-columns: 1fr;
&.game-article {
grid-template-rows: repeat(5, auto);
.game-title {
grid-column: 1;
padding: 20px;
font-size: 25px;
}
.image-carousel {
grid-column: 1;
grid-row: 2;
}
.game-team {
grid-column: 1;
.team-members {
.team-member {
grid-template-columns: 70px 1fr;
.team-member-img {
grid-row: 1 / span 2;
margin: 10px;
}
.team-member-body {
grid-column: 1 / span 2;
}
}
}
}
}
}
}
}
}