obsidian-book-tracker/src/ui/components/bookshelf/bookshelf.scss

$white: white;
$black: black;
$background: #dedede;

$bookWidth: 40px;
$bookHeight: 200px;
$bookEdge: 2px;

.bookshelf__wrapper {
	width: 80%;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
	background-size: 10px 230px;

	.bookshelf__bookStack-wrapper {
		width: 200px;
		height: 100%;
		display: inline-flex;
		flex-flow: column nowrap;
		list-style: none;
		float: left;
		margin: 0;
		padding: 0;

		.bookshelf__bookStack-outOfStock {
			background: #232323;
			color: #fff;
			height: 150px;
			padding: 0;
			margin: 50px 1px auto 1px;
			display: flex;
			flex-flow: column nowrap;
			justify-content: space-around;
			align-items: center;
			font-size: 1.1em;
			font-weight: 600;
			line-height: 1.2;
			letter-spacing: 1.25px;
			border-radius: 6px;
		}

		.bookshelf__bookstack-elem {
			margin-inline-start: 0;
			margin: 0;
			padding: 0;

			.bookshelf__book-wrapper {
				width: 100%;
				height: 40px;
				margin: 0;
				padding: 0;

				.bookshelf__book-content {
					height: $bookWidth;
					width: $bookHeight;

					transform-origin: 0% 0%;
					transform: rotate(0deg);
					overflow: hidden;

					// * Centering content
					display: flex;
					flex-flow: column nowrap;
					justify-content: center;
					align-items: center;

					.bookshelf__book-title,
					.bookshelf__book-subtitle {
						font-size: 0.8em;
						font-weight: 600;

						height: calc($bookWidth / 2);
						width: $bookHeight;

						padding: 0;
						margin: 0;

						// * Centering content
						display: flex;
						justify-content: center;
						align-items: center;
						text-align: center;
					}

					.bookshelf__book-subtitle {
						font-size: 0.6em;
						letter-spacing: 1px;
						font-weight: 400;
						font-style: italic;
					}
				}

				.center-content {
					display: flex;
					justify-content: center;
					align-items: center;
				}

				// .bookshelf__book-title{
				//     width: 140px;
				//     height: 40px;
				//     transform: rotate(0deg);
				//     margin-left: 29px;
				//     margin-top: 0;
				//     text-align: center;
				// }
			}
		}
	}

	.bookshelf__book-wrapper {
		height: $bookHeight;
		width: $bookWidth;
		float: left;
		margin: 20px 1px 10px 1px;
		border-radius: 6px;
		transition: transform 0.4s ease;
		position: relative;

		.bookshelf__book-content {
			width: $bookHeight;

			transform-origin: 0% 0%;
			transform: rotate(90deg);
			overflow: hidden;

			// * Centering content
			display: flex;
			flex-flow: column nowrap;
			justify-content: center;
			align-items: center;

			.bookshelf__book-title,
			.bookshelf__book-subtitle {
				font-size: 0.8em;
				font-weight: 600;

				height: calc($bookWidth / 2);
				width: $bookHeight;

				padding: 0;
				margin: 0;

				// * Centering content
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
			}

			.bookshelf__book-subtitle {
				font-size: 0.6em;
				letter-spacing: 1px;
				font-weight: 400;
				font-style: italic;
			}
		}

		&:hover {
			transform: scale(1.05);
		}

		.center-content {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.bookshelf__book-tilted {
		float: left;
		width: 72px;

		.bookshelf__book-wrapper {
			--book-width: 40px !important;
			width: 40px !important;
		}

		&:hover .bookshelf__book-wrapper {
			transform: translateY(-20px);
		}

		& > .bookshelf__book-wrapper {
			transform: translateY(-22px) translateX(13px) rotate(9deg);
		}
	}

	.bookshelf__book-onDisplay {
		width: 150px;
		height: 200px;
		display: flex;
		flex-flow: column wrap;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		margin: 20px 2px 10px 2px;
		position: relative;

		.bookshelf__book-content {
			width: calc(100% - 11px);
			margin-left: 11px;
			transform: rotate(0deg);
			overflow: visible;

			.bookshelf__book-title,
			.bookshelf__book-subtitle {
				line-height: 2;
				margin-top: 16px;
				width: 100%;
				word-wrap: break-word;
			}
		}

		.bookshelf__book-author {
			font-size: 0.8em;
			margin-left: 13px;
		}
	}
}