Template:Main Page Games/Styles.css
Jump to navigation
Jump to search
/* [[Category:Template Styles]] */
.gamenav {
margin: 0 auto;
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.gamenav__game {
display: inline-block;
position: relative;
width: 100%;
height: 125px;
font-size: 0;
margin-bottom: 0.875rem;
overflow: hidden;
text-shadow: 2px 2px 4px #000000;
}
.gamenav__game a {
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
box-sizing: border-box;
color: rgba(255, 255, 255, 0.9);
font-size: 1.5rem;
line-height: 1.75rem;
padding: 1.75rem;
text-align: left;
text-decoration: none;
transition: background-color 0.3s;
z-index: 1;
}
.gamenav__game-img {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
vertical-align: middle;
transition: transform 0.3s;
}
.gamenav__game a:hover, .gamenav__game-year:hover ~ a {
background-color: rgba(0,0,0, 0.3);
}
.gamenav__game a:hover ~ img, .gamenav__game-year:hover ~ img {
transform: scale(1.05);
}
.gamenav__game-year {
position: absolute;
bottom: 12px;
right: 16px;
z-index: 10;
color: rgba(255, 255, 255, 0.9);
cursor: pointer;
font-size: 0.75rem;
}
.gamenav__spin-off-family {
flex-basis: 100%;
margin-top: 1rem;
}
@media (min-width: 850px) {
.gamenav__game {
margin: 0.125rem;
text-align: center;
width: auto;
}
.gamenav__game a {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 0.25rem;
text-align: center;
}
.gamenav__game-year {
bottom: 0.5em;
left: 1em;
text-align: left;
}
.gamenav__spin-off-family {
margin-top: 2.5rem;
}
}