Archive of Our Own

Chapter Text

On desktop, multiple cards can be displayed horizontally next to each other. If the reader is on a smaller screen, such as on their phone, the cards will be displayed vertically.

Also, the workskin should zoom to fit all images, making cropping optional. Obviously if you are particular though about the dimensions, pre-cropping your images will lead to best results.

Since this is digital and not a real-life photocard, you can use gifs! Isn't that fun?

It would probably be easier to just edit the image to add any cute washi tape and the like, but I wonder how you might be able to overlay some of those details in CSS. 🤔

#workskin .photocard {
  margin: 10px;
  width: 250px;
  height: 350px;
  background: #ffffff;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}

#workskin .image-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#workskin .image-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.0);
  width: auto;
  height: 100%;
  max-width: none;
  min-width: 100%;
}

#workskin .photocard-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}