162 lines
2.8 KiB
CSS
162 lines
2.8 KiB
CSS
.content {
|
|
margin: -60px auto 0 auto;
|
|
padding: 0 var(--space-small);
|
|
max-width: 1100px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.content {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
/* Sections */
|
|
|
|
.section {
|
|
margin-bottom: var(--space-xlarge);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.section--title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.section--title::before {
|
|
width: 150px;
|
|
height: 150px;
|
|
background: center / contain no-repeat var(--image);
|
|
content: "";
|
|
}
|
|
|
|
.section--title:hover::before {
|
|
background-image: var(--hover-image);
|
|
}
|
|
|
|
.section--content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.section {
|
|
margin-bottom: var(--space-large);
|
|
}
|
|
|
|
.section--title {
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
}
|
|
|
|
.section--title::before {
|
|
width: 50px;
|
|
height: 50px;
|
|
margin-right: var(--space-small);
|
|
}
|
|
|
|
.section--content {
|
|
grid-area: 2 / 1 / 3 / 4;
|
|
}
|
|
}
|
|
|
|
/* Members area */
|
|
|
|
.members {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: var(--space-medium);
|
|
}
|
|
|
|
.member {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.members {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
/* Games */
|
|
|
|
.game {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.game::after {
|
|
content: "";
|
|
background: center / cover no-repeat url("/img/game-footer.png");
|
|
height: 13px;
|
|
}
|
|
|
|
.game--picture-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.game--description {
|
|
padding: var(--space-large);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background: var(--primary-color);
|
|
color: var(--dark);
|
|
}
|
|
|
|
.game--more-button {
|
|
background: var(--dark);
|
|
color: var(--primary-color);
|
|
padding: var(--space-small) var(--space-medium);
|
|
text-decoration: none;
|
|
font-family: Knewave;
|
|
font-size: var(--fz-4);
|
|
}
|
|
|
|
.game--more-button:hover {
|
|
color: white;
|
|
}
|
|
|
|
/* News */
|
|
.news {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-bottom: var(--space-medium);
|
|
}
|
|
|
|
.news::after {
|
|
content: "";
|
|
background: center / cover no-repeat url("/img/game-footer.png");
|
|
height: 13px;
|
|
}
|
|
|
|
.news--title {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
background: var(--dark);
|
|
color: white;
|
|
padding: var(--space-small) var(--space-medium);
|
|
}
|
|
|
|
.news--content {
|
|
padding: var(--space-large);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background: var(--primary-color);
|
|
color: var(--dark);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.news--title {
|
|
grid-template-columns: auto;
|
|
grid-template-rows: auto auto;
|
|
}
|
|
}
|