Georg/ai.interactive.fiction
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adapt book skin to detailed artwork

Browse Source
This commit is contained in:
Georg Tomitsch
2026-05-16 22:06:56 +02:00
parent f8911f6fc8
commit e1a5d5809d
5 changed files with 37 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/style.css
+33 -15
View File
@@ -101,8 +101,7 @@ html, body {
body {
overflow: hidden;
background-image: url('../images/brown-wooden-flooring.jpg');
/* background-image: url('../images/table.png'); */
background-image: url('../images/mat.png');
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
@@ -113,14 +112,24 @@ body.switched {
}
:root {
--book-width: 2727px;
--book-height: 1691px;
--book-width: 1421px;
--book-height: 799px;
--book-scale: 1;
--page-line-count: 25;
--story-line-height: calc((var(--book-height) * 0.85) / var(--page-line-count));
--book-page-top: 8.15%;
--book-page-bottom: 12.1%;
--book-page-height: calc(100% - var(--book-page-top) - var(--book-page-bottom));
--book-left-page-left: 8.35%;
--book-left-page-width: 37.25%;
--book-right-page-right: 10.5%;
--book-right-page-width: 35.95%;
--book-page-perspective: 3200px;
--book-left-page-transform: perspective(var(--book-page-perspective)) rotateX(0.65deg) rotateY(0.45deg) rotateZ(-0.1deg) skewY(-0.18deg);
--book-right-page-transform: perspective(var(--book-page-perspective)) rotateX(0.65deg) rotateY(-0.55deg) rotateZ(0.1deg) skewY(0.18deg);
--story-line-height: calc((var(--book-height) * 0.7975) / var(--page-line-count));
--story-font-size: calc(var(--story-line-height) / 1.45);
font-size: calc(var(--book-height)/(34 * 1.5));
--img-aspect-ratio: 1.613;
--img-aspect-ratio: 1.779;
--aspect-ratio: min(var(--viewport-aspect-ratio), var(--img-aspect-ratio));
}
@@ -386,12 +395,11 @@ ol.choice {
top: 50%;
width: var(--book-width);
height: var(--book-height);
background-image: url('../images/book-3057904.png');
/* background-image: url('../images/book.png'); */
background-image: url('../images/book_detailed.png');
background-size: contain; /* Changed from cover to contain */
background-position: center;
background-repeat: no-repeat; /* Prevents repeating the image when aspect ratio doesn't match */
perspective: 500px;
perspective: var(--book-page-perspective);
perspective-origin: 50% 50%;
transform: translate(-50%, -50%) scale(var(--book-scale));
transform-origin: center center;
@@ -399,15 +407,18 @@ ol.choice {
#page_left, #page_right {
position: absolute;
top: 5%; /* Adjust these values as necessary */
bottom: 10%;
width: 39%;
top: var(--book-page-top);
bottom: var(--book-page-bottom);
width: var(--book-right-page-width);
box-sizing: border-box;
padding: 0 3rem 1rem 1rem;
/* border: 1px dotted rgba(200,200,200,1); */
overflow: visible;
opacity: 0.95;
mix-blend-mode: darken;
transform-style: preserve-3d;
backface-visibility: hidden;
will-change: transform;
}
#story {
@@ -486,13 +497,18 @@ ol.choice {
} */
#page_left {
left: 11.5%;
left: var(--book-left-page-left);
width: var(--book-left-page-width);
overflow-y: auto;
transform: var(--book-left-page-transform);
transform-origin: 100% 50%;
clip-path: polygon(0.5% 0.4%, 99.7% 0, 100% 99.2%, 0 100%);
}
#page_right {
/* background-color: rgba(200,200,200,0.5); */
right: 7%;
right: var(--book-right-page-right);
width: var(--book-right-page-width);
padding-bottom: 0;
overflow: hidden !important;
overflow-x: hidden !important;
@@ -501,7 +517,9 @@ ol.choice {
overscroll-behavior: none;
overflow-anchor: none;
scrollbar-width: none;
/* transform: translateX(-1%) translateY(2%) rotateX(0deg) rotateY(-1deg) rotateZ(0deg); */
transform: var(--book-right-page-transform);
transform-origin: 0 50%;
clip-path: polygon(0.2% 0, 99.3% 0.5%, 100% 99.5%, 0 99.1%);
}
#page_right::-webkit-scrollbar {