Shelf

Loading board games from BoardGameGeek...

.board-game[data-id="${ boardGame._id }"] .box-wrapper, .board-game[data-id="${ boardGame._id }"] .shadow-wrapper { perspective: ${ boardGame.dimensionTiers.tiny.perspective }vw; perspective-origin: 50% ${ boardGame.dimensionTiers.tiny.xCenterBaseDimension }vw; } .board-game[data-id="${ boardGame._id }"] .box-faces { width: ${ boardGame.dimensionTiers.tiny.baseDimension }vw; height: ${ boardGame.dimensionTiers.tiny.baseDimension }vw; } .board-game[data-id="${ boardGame._id }"] .box-shadow div { width: ${ boardGame.dimensionTiers.tiny.shadowWidth }vw; height: ${ boardGame.dimensionTiers.tiny.halfSmallestSide }vw; background-color: #a8a8a8; } .board-game[data-id="${ boardGame._id }"] .box-face--is-front, .board-game[data-id="${ boardGame._id }"] .box-face--is-back { width: ${ boardGame.dimensionTiers.tiny.width }vw; height: ${ boardGame.dimensionTiers.tiny.height }vw; } .board-game[data-id="${ boardGame._id }"] .box-face--is-left, .board-game[data-id="${ boardGame._id }"] .box-face--is-right { width: ${ boardGame.dimensionTiers.tiny.halfSmallestSide }vw; height: ${ boardGame.dimensionTiers.tiny.height }vw; } .board-game[data-id="${ boardGame._id }"] .box-face--is-top, .board-game[data-id="${ boardGame._id }"] .box-face--is-bottom { width: ${ boardGame.dimensionTiers.tiny.width }vw; height: ${ boardGame.dimensionTiers.tiny.halfSmallestSide }vw; } .board-game[data-id="${ boardGame._id }"] .box-shadow { width: ${ boardGame.dimensionTiers.tiny.width }vw; } .board-game[data-id="${ boardGame._id }"] .box-face { box-shadow: inset 0px 0px ${ boardGame.dimensionTiers.tiny.xCenterWidth }vw rgba(0, 0, 0, 0.1); } .board-game[data-id="${ boardGame._id }"] .box-face--is-back { transform: translateZ(${ boardGame.dimensionTiers.tiny.xWidthStart }vw) rotateY(180deg) translateX(-${ boardGame.dimensionTiers.tiny.xPadding }vw) translateY(${ boardGame.dimensionTiers.tiny.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-top { transform: rotateX(-90deg) translateY(-${ boardGame.dimensionTiers.tiny.xCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.tiny.xPadding }vw) translateZ(${ boardGame.dimensionTiers.tiny.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-bottom { transform: rotateX(90deg) translateY(${ boardGame.dimensionTiers.tiny.xCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.tiny.xPadding }vw) translateZ(-${ boardGame.dimensionTiers.tiny.xCenterOfSmallestSide }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-right { transform: rotateY(-270deg) translateX(-${ boardGame.dimensionTiers.tiny.xWidthStart }vw) translateZ(${ boardGame.dimensionTiers.tiny.xWidthEnd }vw) translateY(${ boardGame.dimensionTiers.tiny.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-left { transform: rotateY(270deg) translateX(${ boardGame.dimensionTiers.tiny.xWidthStart }vw) translateZ(-${ boardGame.dimensionTiers.tiny.xPadding }vw) translateY(${ boardGame.dimensionTiers.tiny.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-front { transform: translateZ(${ boardGame.dimensionTiers.tiny.xCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.tiny.xPadding }vw) translateY(${ boardGame.dimensionTiers.tiny.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-shadow div { box-shadow: 0px 0px ${ boardGame.dimensionTiers.tiny.xCenterWidth }vw rgba(0, 0, 0, 0.375); transform: rotateX(90deg) translateY(${ boardGame.dimensionTiers.tiny.xShadowCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.tiny.xPadding }vw) translateZ(-${ boardGame.dimensionTiers.tiny.xShadowCenterOfSmallestSide }vw); } @media (prefers-color-scheme: dark) { .board-game[data-id="${ boardGame._id }"] .box-shadow div { box-shadow: 0px 0px ${ boardGame.dimensionTiers.tiny.xCenterWidth }vw rgba(0, 0, 0, 1); } } @media (min-width: 525px) { .board-game[data-id="${ boardGame._id }"] .box-wrapper, .board-game[data-id="${ boardGame._id }"] .shadow-wrapper { perspective: ${ boardGame.dimensionTiers.small.perspective }vw; perspective-origin: 50% ${ boardGame.dimensionTiers.small.xCenterBaseDimension }vw; } .board-game[data-id="${ boardGame._id }"] .box-faces { width: ${ boardGame.dimensionTiers.small.baseDimension }vw; height: ${ boardGame.dimensionTiers.small.baseDimension }vw; } .board-game[data-id="${ boardGame._id }"] .box-shadow div { width: ${ boardGame.dimensionTiers.small.shadowWidth }vw; height: ${ boardGame.dimensionTiers.small.halfSmallestSide }vw; background-color: #a8a8a8; } .board-game[data-id="${ boardGame._id }"] .box-face--is-front, .board-game[data-id="${ boardGame._id }"] .box-face--is-back { width: ${ boardGame.dimensionTiers.small.width }vw; height: ${ boardGame.dimensionTiers.small.height }vw; } .board-game[data-id="${ boardGame._id }"] .box-face--is-left, .board-game[data-id="${ boardGame._id }"] .box-face--is-right { width: ${ boardGame.dimensionTiers.small.halfSmallestSide }vw; height: ${ boardGame.dimensionTiers.small.height }vw; } .board-game[data-id="${ boardGame._id }"] .box-face--is-top, .board-game[data-id="${ boardGame._id }"] .box-face--is-bottom { width: ${ boardGame.dimensionTiers.small.width }vw; height: ${ boardGame.dimensionTiers.small.halfSmallestSide }vw; } .board-game[data-id="${ boardGame._id }"] .box-shadow { width: ${ boardGame.dimensionTiers.small.width }vw; } .board-game[data-id="${ boardGame._id }"] .box-face { box-shadow: inset 0px 0px ${ boardGame.dimensionTiers.small.xCenterWidth }vw rgba(0, 0, 0, 0.1); } .board-game[data-id="${ boardGame._id }"] .box-face--is-back { transform: translateZ(${ boardGame.dimensionTiers.small.xWidthStart }vw) rotateY(180deg) translateX(-${ boardGame.dimensionTiers.small.xPadding }vw) translateY(${ boardGame.dimensionTiers.small.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-top { transform: rotateX(-90deg) translateY(-${ boardGame.dimensionTiers.small.xCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.small.xPadding }vw) translateZ(${ boardGame.dimensionTiers.small.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-bottom { transform: rotateX(90deg) translateY(${ boardGame.dimensionTiers.small.xCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.small.xPadding }vw) translateZ(-${ boardGame.dimensionTiers.small.xCenterOfSmallestSide }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-right { transform: rotateY(-270deg) translateX(-${ boardGame.dimensionTiers.small.xWidthStart }vw) translateZ(${ boardGame.dimensionTiers.small.xWidthEnd }vw) translateY(${ boardGame.dimensionTiers.small.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-left { transform: rotateY(270deg) translateX(${ boardGame.dimensionTiers.small.xWidthStart }vw) translateZ(-${ boardGame.dimensionTiers.small.xPadding }vw) translateY(${ boardGame.dimensionTiers.small.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-front { transform: translateZ(${ boardGame.dimensionTiers.small.xCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.small.xPadding }vw) translateY(${ boardGame.dimensionTiers.small.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-shadow div { box-shadow: 0px 0px ${ boardGame.dimensionTiers.small.xCenterWidth }vw rgba(0, 0, 0, 0.375); transform: rotateX(90deg) translateY(${ boardGame.dimensionTiers.small.xShadowCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.small.xPadding }vw) translateZ(-${ boardGame.dimensionTiers.small.xShadowCenterOfSmallestSide }vw); } } @media (min-width: 525px) and (prefers-color-scheme: dark) { .board-game[data-id="${ boardGame._id }"] .box-shadow div { box-shadow: 0px 0px ${ boardGame.dimensionTiers.small.xCenterWidth }vw rgba(0, 0, 0, 1); } } @media (min-width: 700px) { .board-game[data-id="${ boardGame._id }"] .box-wrapper, .board-game[data-id="${ boardGame._id }"] .shadow-wrapper { perspective: ${ boardGame.dimensionTiers.medium.perspective }vw; perspective-origin: 50% ${ boardGame.dimensionTiers.medium.xCenterBaseDimension }vw; } .board-game[data-id="${ boardGame._id }"] .box-faces { width: ${ boardGame.dimensionTiers.medium.baseDimension }vw; height: ${ boardGame.dimensionTiers.medium.baseDimension }vw; } .board-game[data-id="${ boardGame._id }"] .box-shadow div { width: ${ boardGame.dimensionTiers.medium.shadowWidth }vw; height: ${ boardGame.dimensionTiers.medium.halfSmallestSide }vw; background-color: #a8a8a8; } .board-game[data-id="${ boardGame._id }"] .box-face--is-front, .board-game[data-id="${ boardGame._id }"] .box-face--is-back { width: ${ boardGame.dimensionTiers.medium.width }vw; height: ${ boardGame.dimensionTiers.medium.height }vw; } .board-game[data-id="${ boardGame._id }"] .box-face--is-left, .board-game[data-id="${ boardGame._id }"] .box-face--is-right { width: ${ boardGame.dimensionTiers.medium.halfSmallestSide }vw; height: ${ boardGame.dimensionTiers.medium.height }vw; } .board-game[data-id="${ boardGame._id }"] .box-face--is-top, .board-game[data-id="${ boardGame._id }"] .box-face--is-bottom { width: ${ boardGame.dimensionTiers.medium.width }vw; height: ${ boardGame.dimensionTiers.medium.halfSmallestSide }vw; } .board-game[data-id="${ boardGame._id }"] .box-shadow { width: ${ boardGame.dimensionTiers.medium.width }vw; } .board-game[data-id="${ boardGame._id }"] .box-face { box-shadow: inset 0px 0px ${ boardGame.dimensionTiers.medium.xCenterWidth }vw rgba(0, 0, 0, 0.1); } .board-game[data-id="${ boardGame._id }"] .box-face--is-back { transform: translateZ(${ boardGame.dimensionTiers.medium.xWidthStart }vw) rotateY(180deg) translateX(-${ boardGame.dimensionTiers.medium.xPadding }vw) translateY(${ boardGame.dimensionTiers.medium.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-top { transform: rotateX(-90deg) translateY(-${ boardGame.dimensionTiers.medium.xCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.medium.xPadding }vw) translateZ(${ boardGame.dimensionTiers.medium.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-bottom { transform: rotateX(90deg) translateY(${ boardGame.dimensionTiers.medium.xCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.medium.xPadding }vw) translateZ(-${ boardGame.dimensionTiers.medium.xCenterOfSmallestSide }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-right { transform: rotateY(-270deg) translateX(-${ boardGame.dimensionTiers.medium.xWidthStart }vw) translateZ(${ boardGame.dimensionTiers.medium.xWidthEnd }vw) translateY(${ boardGame.dimensionTiers.medium.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-left { transform: rotateY(270deg) translateX(${ boardGame.dimensionTiers.medium.xWidthStart }vw) translateZ(-${ boardGame.dimensionTiers.medium.xPadding }vw) translateY(${ boardGame.dimensionTiers.medium.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-front { transform: translateZ(${ boardGame.dimensionTiers.medium.xCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.medium.xPadding }vw) translateY(${ boardGame.dimensionTiers.medium.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-shadow div { box-shadow: 0px 0px ${ boardGame.dimensionTiers.medium.xCenterWidth }vw rgba(0, 0, 0, 0.375); /*translate y 5.445 + (2.7225/2)*/ /*translate z 11 - 2.7225 */ transform: rotateX(90deg) translateY(${ boardGame.dimensionTiers.medium.xShadowCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.medium.xPadding }vw) translateZ(-${ boardGame.dimensionTiers.medium.xShadowCenterOfSmallestSide }vw); } } @media (min-width: 700px) and (prefers-color-scheme: dark) { .board-game[data-id="${ boardGame._id }"] .box-shadow div { box-shadow: 0px 0px ${ boardGame.dimensionTiers.medium.xCenterWidth }vw rgba(0, 0, 0, 1); } } @media (min-width: 1000px) { .board-game[data-id="${ boardGame._id }"] .box-wrapper, .board-game[data-id="${ boardGame._id }"] .shadow-wrapper { perspective: ${ boardGame.dimensionTiers.large.perspective }em; perspective-origin: 50% ${ boardGame.dimensionTiers.large.xCenterBaseDimension }em; } .board-game[data-id="${ boardGame._id }"] .box-faces { width: ${ boardGame.dimensionTiers.large.baseDimension }em; height: ${ boardGame.dimensionTiers.large.baseDimension }em; } .board-game[data-id="${ boardGame._id }"] .box-shadow div { width: ${ boardGame.dimensionTiers.large.shadowWidth }em; height: ${ boardGame.dimensionTiers.large.halfSmallestSide }em; background-color: #a8a8a8; } .board-game[data-id="${ boardGame._id }"] .box-face--is-front, .board-game[data-id="${ boardGame._id }"] .box-face--is-back { width: ${ boardGame.dimensionTiers.large.width }em; height: ${ boardGame.dimensionTiers.large.height }em; } .board-game[data-id="${ boardGame._id }"] .box-face--is-left, .board-game[data-id="${ boardGame._id }"] .box-face--is-right { width: ${ boardGame.dimensionTiers.large.halfSmallestSide }em; height: ${ boardGame.dimensionTiers.large.height }em; } .board-game[data-id="${ boardGame._id }"] .box-face--is-top, .board-game[data-id="${ boardGame._id }"] .box-face--is-bottom { width: ${ boardGame.dimensionTiers.large.width }em; height: ${ boardGame.dimensionTiers.large.halfSmallestSide }em; } .board-game[data-id="${ boardGame._id }"] .box-shadow { width: ${ boardGame.dimensionTiers.large.width }em; } .board-game[data-id="${ boardGame._id }"] .box-face { box-shadow: inset 0px 0px ${ boardGame.dimensionTiers.large.xCenterWidth }em rgba(0, 0, 0, 0.1); } .board-game[data-id="${ boardGame._id }"] .box-face--is-back { transform: translateZ(${ boardGame.dimensionTiers.large.xWidthStart }em) rotateY(180deg) translateX(-${ boardGame.dimensionTiers.large.xPadding }em) translateY(${ boardGame.dimensionTiers.large.yPadding }em); } .board-game[data-id="${ boardGame._id }"] .box-face--is-top { transform: rotateX(-90deg) translateY(-${ boardGame.dimensionTiers.large.xCenterBaseDimension }em) translateX(${ boardGame.dimensionTiers.large.xPadding }em) translateZ(${ boardGame.dimensionTiers.large.yPadding }em); } .board-game[data-id="${ boardGame._id }"] .box-face--is-bottom { transform: rotateX(90deg) translateY(${ boardGame.dimensionTiers.large.xCenterBaseDimension }em) translateX(${ boardGame.dimensionTiers.large.xPadding }em) translateZ(-${ boardGame.dimensionTiers.large.xCenterOfSmallestSide }em); } .board-game[data-id="${ boardGame._id }"] .box-face--is-right { transform: rotateY(-270deg) translateX(-${ boardGame.dimensionTiers.large.xWidthStart }em) translateZ(${ boardGame.dimensionTiers.large.xWidthEnd }em) translateY(${ boardGame.dimensionTiers.large.yPadding }em); } .board-game[data-id="${ boardGame._id }"] .box-face--is-left { transform: rotateY(270deg) translateX(${ boardGame.dimensionTiers.large.xWidthStart }em) translateZ(-${ boardGame.dimensionTiers.large.xPadding }em) translateY(${ boardGame.dimensionTiers.large.yPadding }em); } .board-game[data-id="${ boardGame._id }"] .box-face--is-front { transform: translateZ(${ boardGame.dimensionTiers.large.xCenterBaseDimension }em) translateX(${ boardGame.dimensionTiers.large.xPadding }em) translateY(${ boardGame.dimensionTiers.large.yPadding }em); } .board-game[data-id="${ boardGame._id }"] .box-shadow div { box-shadow: 0px 0px ${ boardGame.dimensionTiers.large.xCenterWidth }em rgba(0, 0, 0, 0.375); transform: rotateX(90deg) translateY(${ boardGame.dimensionTiers.large.xShadowCenterBaseDimension }em) translateX(${ boardGame.dimensionTiers.large.xPadding }em) translateZ(-${ boardGame.dimensionTiers.large.xShadowCenterOfSmallestSide }em); } } @media (min-width: 1000px) and (prefers-color-scheme: dark) { .board-game[data-id="${ boardGame._id }"] .box-shadow div { box-shadow: 0px 0px ${ boardGame.dimensionTiers.large.xCenterWidth }vw rgba(0, 0, 0, 1); } }

${ boardGame.title }

.board-game[data-id="${ boardGame._id }"] .box-wrapper, .board-game[data-id="${ boardGame._id }"] .shadow-wrapper { perspective: ${ boardGame.dimensionTiers.tiny.perspective }vw; perspective-origin: 50% ${ boardGame.dimensionTiers.tiny.xCenterBaseDimension }vw; } .board-game[data-id="${ boardGame._id }"] .box-faces { width: ${ boardGame.dimensionTiers.tiny.baseDimension }vw; height: ${ boardGame.dimensionTiers.tiny.baseDimension }vw; } .board-game[data-id="${ boardGame._id }"] .box-shadow div { width: ${ boardGame.dimensionTiers.tiny.shadowWidth }vw; height: ${ boardGame.dimensionTiers.tiny.halfSmallestSide }vw; background-color: #a8a8a8; } .board-game[data-id="${ boardGame._id }"] .box-face--is-front, .board-game[data-id="${ boardGame._id }"] .box-face--is-back { width: ${ boardGame.dimensionTiers.tiny.width }vw; height: ${ boardGame.dimensionTiers.tiny.height }vw; } .board-game[data-id="${ boardGame._id }"] .box-face--is-left, .board-game[data-id="${ boardGame._id }"] .box-face--is-right { width: ${ boardGame.dimensionTiers.tiny.halfSmallestSide }vw; height: ${ boardGame.dimensionTiers.tiny.height }vw; } .board-game[data-id="${ boardGame._id }"] .box-face--is-top, .board-game[data-id="${ boardGame._id }"] .box-face--is-bottom { width: ${ boardGame.dimensionTiers.tiny.width }vw; height: ${ boardGame.dimensionTiers.tiny.halfSmallestSide }vw; } .board-game[data-id="${ boardGame._id }"] .box-shadow { width: ${ boardGame.dimensionTiers.tiny.width }vw; } .board-game[data-id="${ boardGame._id }"] .box-face { box-shadow: inset 0px 0px ${ boardGame.dimensionTiers.tiny.xCenterWidth }vw rgba(0, 0, 0, 0.1); } .board-game[data-id="${ boardGame._id }"] .box-face--is-back { transform: translateZ(${ boardGame.dimensionTiers.tiny.xWidthStart }vw) rotateY(180deg) translateX(-${ boardGame.dimensionTiers.tiny.xPadding }vw) translateY(${ boardGame.dimensionTiers.tiny.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-top { transform: rotateX(-90deg) translateY(-${ boardGame.dimensionTiers.tiny.xCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.tiny.xPadding }vw) translateZ(${ boardGame.dimensionTiers.tiny.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-bottom { transform: rotateX(90deg) translateY(${ boardGame.dimensionTiers.tiny.xCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.tiny.xPadding }vw) translateZ(-${ boardGame.dimensionTiers.tiny.xCenterOfSmallestSide }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-right { transform: rotateY(-270deg) translateX(-${ boardGame.dimensionTiers.tiny.xWidthStart }vw) translateZ(${ boardGame.dimensionTiers.tiny.xWidthEnd }vw) translateY(${ boardGame.dimensionTiers.tiny.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-left { transform: rotateY(270deg) translateX(${ boardGame.dimensionTiers.tiny.xWidthStart }vw) translateZ(-${ boardGame.dimensionTiers.tiny.xPadding }vw) translateY(${ boardGame.dimensionTiers.tiny.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-front { transform: translateZ(${ boardGame.dimensionTiers.tiny.xCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.tiny.xPadding }vw) translateY(${ boardGame.dimensionTiers.tiny.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-shadow div { box-shadow: 0px 0px ${ boardGame.dimensionTiers.tiny.xCenterWidth }vw rgba(0, 0, 0, 0.375); transform: rotateX(90deg) translateY(${ boardGame.dimensionTiers.tiny.xShadowCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.tiny.xPadding }vw) translateZ(-${ boardGame.dimensionTiers.tiny.xShadowCenterOfSmallestSide }vw); } @media (prefers-color-scheme: dark) { .board-game[data-id="${ boardGame._id }"] .box-shadow div { box-shadow: 0px 0px ${ boardGame.dimensionTiers.tiny.xCenterWidth }vw rgba(0, 0, 0, 1); } } @media (min-width: 525px) { .board-game[data-id="${ boardGame._id }"] .box-wrapper, .board-game[data-id="${ boardGame._id }"] .shadow-wrapper { perspective: ${ boardGame.dimensionTiers.small.perspective }vw; perspective-origin: 50% ${ boardGame.dimensionTiers.small.xCenterBaseDimension }vw; } .board-game[data-id="${ boardGame._id }"] .box-faces { width: ${ boardGame.dimensionTiers.small.baseDimension }vw; height: ${ boardGame.dimensionTiers.small.baseDimension }vw; } .board-game[data-id="${ boardGame._id }"] .box-shadow div { width: ${ boardGame.dimensionTiers.small.shadowWidth }vw; height: ${ boardGame.dimensionTiers.small.halfSmallestSide }vw; background-color: #a8a8a8; } .board-game[data-id="${ boardGame._id }"] .box-face--is-front, .board-game[data-id="${ boardGame._id }"] .box-face--is-back { width: ${ boardGame.dimensionTiers.small.width }vw; height: ${ boardGame.dimensionTiers.small.height }vw; } .board-game[data-id="${ boardGame._id }"] .box-face--is-left, .board-game[data-id="${ boardGame._id }"] .box-face--is-right { width: ${ boardGame.dimensionTiers.small.halfSmallestSide }vw; height: ${ boardGame.dimensionTiers.small.height }vw; } .board-game[data-id="${ boardGame._id }"] .box-face--is-top, .board-game[data-id="${ boardGame._id }"] .box-face--is-bottom { width: ${ boardGame.dimensionTiers.small.width }vw; height: ${ boardGame.dimensionTiers.small.halfSmallestSide }vw; } .board-game[data-id="${ boardGame._id }"] .box-shadow { width: ${ boardGame.dimensionTiers.small.width }vw; } .board-game[data-id="${ boardGame._id }"] .box-face { box-shadow: inset 0px 0px ${ boardGame.dimensionTiers.small.xCenterWidth }vw rgba(0, 0, 0, 0.1); } .board-game[data-id="${ boardGame._id }"] .box-face--is-back { transform: translateZ(${ boardGame.dimensionTiers.small.xWidthStart }vw) rotateY(180deg) translateX(-${ boardGame.dimensionTiers.small.xPadding }vw) translateY(${ boardGame.dimensionTiers.small.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-top { transform: rotateX(-90deg) translateY(-${ boardGame.dimensionTiers.small.xCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.small.xPadding }vw) translateZ(${ boardGame.dimensionTiers.small.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-bottom { transform: rotateX(90deg) translateY(${ boardGame.dimensionTiers.small.xCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.small.xPadding }vw) translateZ(-${ boardGame.dimensionTiers.small.xCenterOfSmallestSide }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-right { transform: rotateY(-270deg) translateX(-${ boardGame.dimensionTiers.small.xWidthStart }vw) translateZ(${ boardGame.dimensionTiers.small.xWidthEnd }vw) translateY(${ boardGame.dimensionTiers.small.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-left { transform: rotateY(270deg) translateX(${ boardGame.dimensionTiers.small.xWidthStart }vw) translateZ(-${ boardGame.dimensionTiers.small.xPadding }vw) translateY(${ boardGame.dimensionTiers.small.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-front { transform: translateZ(${ boardGame.dimensionTiers.small.xCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.small.xPadding }vw) translateY(${ boardGame.dimensionTiers.small.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-shadow div { box-shadow: 0px 0px ${ boardGame.dimensionTiers.small.xCenterWidth }vw rgba(0, 0, 0, 0.375); transform: rotateX(90deg) translateY(${ boardGame.dimensionTiers.small.xShadowCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.small.xPadding }vw) translateZ(-${ boardGame.dimensionTiers.small.xShadowCenterOfSmallestSide }vw); } } @media (min-width: 525px) and (prefers-color-scheme: dark) { .board-game[data-id="${ boardGame._id }"] .box-shadow div { box-shadow: 0px 0px ${ boardGame.dimensionTiers.small.xCenterWidth }vw rgba(0, 0, 0, 1); } } @media (min-width: 700px) { .board-game[data-id="${ boardGame._id }"] .box-wrapper, .board-game[data-id="${ boardGame._id }"] .shadow-wrapper { perspective: ${ boardGame.dimensionTiers.medium.perspective }vw; perspective-origin: 50% ${ boardGame.dimensionTiers.medium.xCenterBaseDimension }vw; } .board-game[data-id="${ boardGame._id }"] .box-faces { width: ${ boardGame.dimensionTiers.medium.baseDimension }vw; height: ${ boardGame.dimensionTiers.medium.baseDimension }vw; } .board-game[data-id="${ boardGame._id }"] .box-shadow div { width: ${ boardGame.dimensionTiers.medium.shadowWidth }vw; height: ${ boardGame.dimensionTiers.medium.halfSmallestSide }vw; background-color: #a8a8a8; } .board-game[data-id="${ boardGame._id }"] .box-face--is-front, .board-game[data-id="${ boardGame._id }"] .box-face--is-back { width: ${ boardGame.dimensionTiers.medium.width }vw; height: ${ boardGame.dimensionTiers.medium.height }vw; } .board-game[data-id="${ boardGame._id }"] .box-face--is-left, .board-game[data-id="${ boardGame._id }"] .box-face--is-right { width: ${ boardGame.dimensionTiers.medium.halfSmallestSide }vw; height: ${ boardGame.dimensionTiers.medium.height }vw; } .board-game[data-id="${ boardGame._id }"] .box-face--is-top, .board-game[data-id="${ boardGame._id }"] .box-face--is-bottom { width: ${ boardGame.dimensionTiers.medium.width }vw; height: ${ boardGame.dimensionTiers.medium.halfSmallestSide }vw; } .board-game[data-id="${ boardGame._id }"] .box-shadow { width: ${ boardGame.dimensionTiers.medium.width }vw; } .board-game[data-id="${ boardGame._id }"] .box-face { box-shadow: inset 0px 0px ${ boardGame.dimensionTiers.medium.xCenterWidth }vw rgba(0, 0, 0, 0.1); } .board-game[data-id="${ boardGame._id }"] .box-face--is-back { transform: translateZ(${ boardGame.dimensionTiers.medium.xWidthStart }vw) rotateY(180deg) translateX(-${ boardGame.dimensionTiers.medium.xPadding }vw) translateY(${ boardGame.dimensionTiers.medium.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-top { transform: rotateX(-90deg) translateY(-${ boardGame.dimensionTiers.medium.xCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.medium.xPadding }vw) translateZ(${ boardGame.dimensionTiers.medium.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-bottom { transform: rotateX(90deg) translateY(${ boardGame.dimensionTiers.medium.xCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.medium.xPadding }vw) translateZ(-${ boardGame.dimensionTiers.medium.xCenterOfSmallestSide }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-right { transform: rotateY(-270deg) translateX(-${ boardGame.dimensionTiers.medium.xWidthStart }vw) translateZ(${ boardGame.dimensionTiers.medium.xWidthEnd }vw) translateY(${ boardGame.dimensionTiers.medium.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-left { transform: rotateY(270deg) translateX(${ boardGame.dimensionTiers.medium.xWidthStart }vw) translateZ(-${ boardGame.dimensionTiers.medium.xPadding }vw) translateY(${ boardGame.dimensionTiers.medium.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-face--is-front { transform: translateZ(${ boardGame.dimensionTiers.medium.xCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.medium.xPadding }vw) translateY(${ boardGame.dimensionTiers.medium.yPadding }vw); } .board-game[data-id="${ boardGame._id }"] .box-shadow div { box-shadow: 0px 0px ${ boardGame.dimensionTiers.medium.xCenterWidth }vw rgba(0, 0, 0, 0.375); /*translate y 5.445 + (2.7225/2)*/ /*translate z 11 - 2.7225 */ transform: rotateX(90deg) translateY(${ boardGame.dimensionTiers.medium.xShadowCenterBaseDimension }vw) translateX(${ boardGame.dimensionTiers.medium.xPadding }vw) translateZ(-${ boardGame.dimensionTiers.medium.xShadowCenterOfSmallestSide }vw); } } @media (min-width: 700px) and (prefers-color-scheme: dark) { .board-game[data-id="${ boardGame._id }"] .box-shadow div { box-shadow: 0px 0px ${ boardGame.dimensionTiers.medium.xCenterWidth }vw rgba(0, 0, 0, 1); } } @media (min-width: 1000px) { .board-game[data-id="${ boardGame._id }"] .box-wrapper, .board-game[data-id="${ boardGame._id }"] .shadow-wrapper { perspective: ${ boardGame.dimensionTiers.large.perspective }em; perspective-origin: 50% ${ boardGame.dimensionTiers.large.xCenterBaseDimension }em; } .board-game[data-id="${ boardGame._id }"] .box-faces { width: ${ boardGame.dimensionTiers.large.baseDimension }em; height: ${ boardGame.dimensionTiers.large.baseDimension }em; } .board-game[data-id="${ boardGame._id }"] .box-shadow div { width: ${ boardGame.dimensionTiers.large.shadowWidth }em; height: ${ boardGame.dimensionTiers.large.halfSmallestSide }em; background-color: #a8a8a8; } .board-game[data-id="${ boardGame._id }"] .box-face--is-front, .board-game[data-id="${ boardGame._id }"] .box-face--is-back { width: ${ boardGame.dimensionTiers.large.width }em; height: ${ boardGame.dimensionTiers.large.height }em; } .board-game[data-id="${ boardGame._id }"] .box-face--is-left, .board-game[data-id="${ boardGame._id }"] .box-face--is-right { width: ${ boardGame.dimensionTiers.large.halfSmallestSide }em; height: ${ boardGame.dimensionTiers.large.height }em; } .board-game[data-id="${ boardGame._id }"] .box-face--is-top, .board-game[data-id="${ boardGame._id }"] .box-face--is-bottom { width: ${ boardGame.dimensionTiers.large.width }em; height: ${ boardGame.dimensionTiers.large.halfSmallestSide }em; } .board-game[data-id="${ boardGame._id }"] .box-shadow { width: ${ boardGame.dimensionTiers.large.width }em; } .board-game[data-id="${ boardGame._id }"] .box-face { box-shadow: inset 0px 0px ${ boardGame.dimensionTiers.large.xCenterWidth }em rgba(0, 0, 0, 0.1); } .board-game[data-id="${ boardGame._id }"] .box-face--is-back { transform: translateZ(${ boardGame.dimensionTiers.large.xWidthStart }em) rotateY(180deg) translateX(-${ boardGame.dimensionTiers.large.xPadding }em) translateY(${ boardGame.dimensionTiers.large.yPadding }em); } .board-game[data-id="${ boardGame._id }"] .box-face--is-top { transform: rotateX(-90deg) translateY(-${ boardGame.dimensionTiers.large.xCenterBaseDimension }em) translateX(${ boardGame.dimensionTiers.large.xPadding }em) translateZ(${ boardGame.dimensionTiers.large.yPadding }em); } .board-game[data-id="${ boardGame._id }"] .box-face--is-bottom { transform: rotateX(90deg) translateY(${ boardGame.dimensionTiers.large.xCenterBaseDimension }em) translateX(${ boardGame.dimensionTiers.large.xPadding }em) translateZ(-${ boardGame.dimensionTiers.large.xCenterOfSmallestSide }em); } .board-game[data-id="${ boardGame._id }"] .box-face--is-right { transform: rotateY(-270deg) translateX(-${ boardGame.dimensionTiers.large.xWidthStart }em) translateZ(${ boardGame.dimensionTiers.large.xWidthEnd }em) translateY(${ boardGame.dimensionTiers.large.yPadding }em); } .board-game[data-id="${ boardGame._id }"] .box-face--is-left { transform: rotateY(270deg) translateX(${ boardGame.dimensionTiers.large.xWidthStart }em) translateZ(-${ boardGame.dimensionTiers.large.xPadding }em) translateY(${ boardGame.dimensionTiers.large.yPadding }em); } .board-game[data-id="${ boardGame._id }"] .box-face--is-front { transform: translateZ(${ boardGame.dimensionTiers.large.xCenterBaseDimension }em) translateX(${ boardGame.dimensionTiers.large.xPadding }em) translateY(${ boardGame.dimensionTiers.large.yPadding }em); } .board-game[data-id="${ boardGame._id }"] .box-shadow div { box-shadow: 0px 0px ${ boardGame.dimensionTiers.large.xCenterWidth }em rgba(0, 0, 0, 0.375); transform: rotateX(90deg) translateY(${ boardGame.dimensionTiers.large.xShadowCenterBaseDimension }em) translateX(${ boardGame.dimensionTiers.large.xPadding }em) translateZ(-${ boardGame.dimensionTiers.large.xShadowCenterOfSmallestSide }em); } } @media (min-width: 1000px) and (prefers-color-scheme: dark) { .board-game[data-id="${ boardGame._id }"] .box-shadow div { box-shadow: 0px 0px ${ boardGame.dimensionTiers.large.xCenterWidth }vw rgba(0, 0, 0, 1); } }

${ boardGame.title }

${ boardGames.length } Board Games in wishlist

Shelf

Records

Games

Collection

Wishlist