12,417
edits
Template:Artist Previews/styles.css: Difference between revisions
From Archon Arcana - The KeyForge Wiki
Template:Artist Previews/styles.css (view source)
Revision as of 20:03, 3 December 2020
, 3 December 2020no edit summary
Coffeesaga (talk | contribs) No edit summary |
Coffeesaga (talk | contribs) No edit summary |
||
| (29 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
.pageOverlay { | |||
font-size:0px; | |||
line-height:0px; | |||
height:0px; | |||
float:left; | |||
} | |||
.pageOverlay img { | |||
display:none; | |||
} | |||
.pageOverlay p { | |||
height:0px; | |||
} | |||
.artGallery a:link, | .artGallery a:link, | ||
.artGallery a:hover, | .artGallery a:hover, | ||
| Line 10: | Line 25: | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
justify-content: | justify-content: center; | ||
margin-top: 20px; | margin-top: 20px; | ||
margin-bottom: 20px; | margin-bottom: 20px; | ||
| Line 41: | Line 56: | ||
transform: scale(1.5); | transform: scale(1.5); | ||
object-fit: cover; | object-fit: cover; | ||
object-position: -9px | object-position: -9px 10px; | ||
margin: 0px; | margin: 0px; | ||
opacity: .6; | opacity: .6; | ||
| Line 53: | Line 68: | ||
transform: scale(1.5); | transform: scale(1.5); | ||
object-fit: cover; | object-fit: cover; | ||
object-position: -5px - | object-position: -5px -15px; | ||
margin: 0px; | margin: 0px; | ||
opacity: .6; | opacity: .6; | ||
| Line 65: | Line 80: | ||
transform: scale(1.5); | transform: scale(1.5); | ||
object-fit: cover; | object-fit: cover; | ||
object-position: 0px - | object-position: 0px -90px; | ||
margin: 0px; | margin: 0px; | ||
opacity: .6; | opacity: .6; | ||
| Line 92: | Line 107: | ||
.artistCards:hover img { | .artistCards:hover img { | ||
opacity: | opacity: 1; | ||
} | } | ||
| Line 99: | Line 114: | ||
/* average sized phones */ | /* average sized phones */ | ||
@media screen and (min-width: | @media screen and (min-width:360px) and (max-width:450px) { | ||
.artGallery { | .artGallery { | ||
display: flex; | display: flex; | ||
| Line 128: | Line 143: | ||
.artistCards .cardFull { | .artistCards .cardFull { | ||
width: 300px; | |||
height: 420px; | |||
height: | |||
object-fit: cover; | object-fit: cover; | ||
object-position: -60px | object-position: -100px -60px; | ||
margin: 0px; | margin: 0px; | ||
opacity:1; | opacity:1; | ||
| Line 139: | Line 152: | ||
.artistCards .cardArtifact { | .artistCards .cardArtifact { | ||
width: 300px; | |||
height: 420px; | |||
height: | |||
object-fit: cover; | object-fit: cover; | ||
object-position: -60px -70px; | object-position: -60px -70px; | ||
| Line 150: | Line 161: | ||
.artistCards .cardUpgrade { | .artistCards .cardUpgrade { | ||
width: 300px; | |||
height: 420px; | |||
height: | |||
object-fit: cover; | object-fit: cover; | ||
object-position: | object-position: -40px -190px; | ||
margin: 0px; | margin: 0px; | ||
opacity: 1; | opacity: 1; | ||
} | } | ||
| Line 180: | Line 190: | ||
/* very small phones */ | /* very small phones */ | ||
@media screen and (max-width: | @media screen and (max-width:359px) { | ||
.artGallery { | .artGallery { | ||
display: flex; | display: flex; | ||
| Line 195: | Line 205: | ||
display: block; | display: block; | ||
overflow: hidden; | overflow: hidden; | ||
} | } | ||
| Line 205: | Line 212: | ||
div.artistCards:nth-child(odd) { | div.artistCards:nth-child(odd) { | ||
background-color: # | background-color: #ffffff; | ||
} | } | ||
| Line 227: | Line 234: | ||
.artistCards .artistName { | .artistCards .artistName { | ||
width: 100%; | width: 100%; | ||
text-align: | text-align: left; | ||
opacity: 1; | opacity: 1; | ||
color: black; | color: black; | ||
padding-left:20px; | |||
font-size: 1.1em; | font-size: 1.1em; | ||
padding-top: 8px; | padding-top: 8px; | ||
| Line 241: | Line 249: | ||
color: black; | color: black; | ||
text-decoration: none; | text-decoration: none; | ||
border-bottom:1px dotted black; | |||
} | } | ||
} | } | ||