Skip to content

Commit

Permalink
feat: Add more patterns for the books
Browse files Browse the repository at this point in the history
  • Loading branch information
@iwishiwasaneagle
iwishiwasaneagle committed Apr 23, 2024
1 parent 9660dd5 commit 5dd9c02
Show file tree
Hide file tree
Showing 2 changed files with 184 additions and 171 deletions.
353 changes: 183 additions & 170 deletions static/css/bookshelf.css
View file
Original file line number Diff line number Diff line change
@@ -1,173 +1,186 @@
/* Book Shelf
-------------------------------------------------- */
:root {
--argyle: repeating-linear-gradient(
120deg,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.1) 1px,
transparent 1px,
transparent 60px
),
repeating-linear-gradient(
60deg,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.1) 1px,
transparent 1px,
transparent 60px
),
linear-gradient(
60deg,
rgba(0, 0, 0, 0.1) 25%,
transparent 25%,
transparent 75%,
rgba(0, 0, 0, 0.1) 75%,
rgba(0, 0, 0, 0.1)
),
linear-gradient(
120deg,
rgba(0, 0, 0, 0.1) 25%,
transparent 25%,
transparent 75%,
rgba(0, 0, 0, 0.1) 75%,
rgba(0, 0, 0, 0.1)
);
background-size: 70px 120px;
--tartan: repeating-linear-gradient(
transparent,
transparent 50px,
rgba(0, 0, 0, 0.4) 50px,
rgba(0, 0, 0, 0.4) 53px,
transparent 53px,
transparent 63px,
rgba(0, 0, 0, 0.4) 63px,
rgba(0, 0, 0, 0.4) 66px,
transparent 66px,
transparent 116px,
rgba(0, 0, 0, 0.5) 116px,
rgba(0, 0, 0, 0.5) 166px,
rgba(255, 255, 255, 0.2) 166px,
rgba(255, 255, 255, 0.2) 169px,
rgba(0, 0, 0, 0.5) 169px,
rgba(0, 0, 0, 0.5) 179px,
rgba(255, 255, 255, 0.2) 179px,
rgba(255, 255, 255, 0.2) 182px,
rgba(0, 0, 0, 0.5) 182px,
rgba(0, 0, 0, 0.5) 232px,
transparent 232px
),
repeating-linear-gradient(
270deg,
transparent,
transparent 50px,
rgba(0, 0, 0, 0.4) 50px,
rgba(0, 0, 0, 0.4) 53px,
transparent 53px,
transparent 63px,
rgba(0, 0, 0, 0.4) 63px,
rgba(0, 0, 0, 0.4) 66px,
transparent 66px,
transparent 116px,
rgba(0, 0, 0, 0.5) 116px,
rgba(0, 0, 0, 0.5) 166px,
rgba(255, 255, 255, 0.2) 166px,
rgba(255, 255, 255, 0.2) 169px,
rgba(0, 0, 0, 0.5) 169px,
rgba(0, 0, 0, 0.5) 179px,
rgba(255, 255, 255, 0.2) 179px,
rgba(255, 255, 255, 0.2) 182px,
rgba(0, 0, 0, 0.5) 182px,
rgba(0, 0, 0, 0.5) 232px,
transparent 232px
),
repeating-linear-gradient(
125deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.2) 2px,
rgba(0, 0, 0, 0.2) 3px,
transparent 3px,
transparent 5px,
rgba(0, 0, 0, 0.2) 5px
);
}

.bookshelf {
width: 100%;
margin-top: 32px;
display: flex;
flex-wrap: wrap;
}

.book {
width: 50px;
height: 280px;
position: relative;
margin-left: 1px;
transform-style: preserve-3d;
transform: translateZ(0) rotateY(0);
transition: transform 1s;
}

.side {
position: absolute;
border: 2px solid black;
border-radius: 3px;
font-weight: bold;
color: black;
text-align: center;
transform-origin: center left;
}

.spine {
position: relative;
width: 50px;
height: 280px;
/* Patterns from: https://projects.verou.me/css3patterns/ */
background-image: var(--tartan);
transform: rotateY(0deg) translateZ(0px);
}

.spine-title {
margin: 2px;
position: absolute;
top: 0px;
left: 0px;
font-size: 12px;
color: gold;
writing-mode: vertical-rl;
text-orientation: mixed;
}

.spine-author {
position: absolute;
color: goldenrod;
bottom: 0px;
left: 20%; /* no idea why 20% centers it */
}

.top {
width: 50px;
height: 190px;
top: -2px; /* hmm, why -2 and not 0? */
background-image: linear-gradient(90deg, white 90%, gray 10%);
background-size: 5px 5px;
transform: rotateX(90deg) translateZ(95px) translateY(-95px);
}

.cover {
width: 190px;
height: 280px;
top: 0px;
background-image: radial-gradient(circle, white 0%, gray 100%);
background-size: contain;
background-repeat: round;
left: 50px;
transform: rotateY(90deg) translateZ(0);
transition: transform 1s;
}

.book:hover {
z-index: 1;
transform: rotateX(-25deg) rotateY(-40deg) rotateZ(-15deg) translateY(50px)
translateX(-30px);
}
--pyramid: linear-gradient(315deg,
transparent 75%,
rgba(255, 255, 255, 0.1) 0),
linear-gradient(45deg,
transparent 75%,
rgba(255, 255, 255, 0.1) 0),
linear-gradient(135deg,
rgba(255, 255, 255, 0.2) 166px,
transparent 0),
linear-gradient(45deg,
rgba(0, 0, 0, 0.1) 75%,
transparent 0);
background-size: 20px 20px;
--stairs: repeating-linear-gradient(63deg,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.1) 1px,
transparent 3px,
transparent 0),
linear-gradient(127deg,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.1) 90px,
transparent 55%,
transparent 0),
linear-gradient(transparent 51%,
rgba(0, 0, 0, 0.1) 170px);
background-size: 70px 120px;
--argyle: repeating-linear-gradient(120deg,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.1) 1px,
transparent 1px,
transparent 60px),
repeating-linear-gradient(60deg,
rgba(255, 255, 255, 0.1),
rgba(255, 255, 255, 0.1) 1px,
transparent 1px,
transparent 60px),
linear-gradient(60deg,
rgba(0, 0, 0, 0.1) 25%,
transparent 25%,
transparent 75%,
rgba(0, 0, 0, 0.1) 75%,
rgba(0, 0, 0, 0.1)),
linear-gradient(120deg,
rgba(0, 0, 0, 0.1) 25%,
transparent 25%,
transparent 75%,
rgba(0, 0, 0, 0.1) 75%,
rgba(0, 0, 0, 0.1));
background-size: 70px 120px;
--tartan: repeating-linear-gradient(transparent,
transparent 50px,
rgba(0, 0, 0, 0.4) 50px,
rgba(0, 0, 0, 0.4) 53px,
transparent 53px,
transparent 63px,
rgba(0, 0, 0, 0.4) 63px,
rgba(0, 0, 0, 0.4) 66px,
transparent 66px,
transparent 116px,
rgba(0, 0, 0, 0.5) 116px,
rgba(0, 0, 0, 0.5) 166px,
rgba(255, 255, 255, 0.2) 166px,
rgba(255, 255, 255, 0.2) 169px,
rgba(0, 0, 0, 0.5) 169px,
rgba(0, 0, 0, 0.5) 179px,
rgba(255, 255, 255, 0.2) 179px,
rgba(255, 255, 255, 0.2) 182px,
rgba(0, 0, 0, 0.5) 182px,
rgba(0, 0, 0, 0.5) 232px,
transparent 232px),
repeating-linear-gradient(270deg,
transparent,
transparent 50px,
rgba(0, 0, 0, 0.4) 50px,
rgba(0, 0, 0, 0.4) 53px,
transparent 53px,
transparent 63px,
rgba(0, 0, 0, 0.4) 63px,
rgba(0, 0, 0, 0.4) 66px,
transparent 66px,
transparent 116px,
rgba(0, 0, 0, 0.5) 116px,
rgba(0, 0, 0, 0.5) 166px,
rgba(255, 255, 255, 0.2) 166px,
rgba(255, 255, 255, 0.2) 169px,
rgba(0, 0, 0, 0.5) 169px,
rgba(0, 0, 0, 0.5) 179px,
rgba(255, 255, 255, 0.2) 179px,
rgba(255, 255, 255, 0.2) 182px,
rgba(0, 0, 0, 0.5) 182px,
rgba(0, 0, 0, 0.5) 232px,
transparent 232px),
repeating-linear-gradient(125deg,
transparent,
transparent 2px,
rgba(0, 0, 0, 0.2) 2px,
rgba(0, 0, 0, 0.2) 3px,
transparent 3px,
transparent 5px,
rgba(0, 0, 0, 0.2) 5px);
}

.bookshelf {
width: 100%;
margin-top: 32px;
display: flex;
flex-wrap: wrap;
}

.book {
width: 50px;
height: 280px;
position: relative;
margin-left: 1px;
transform-style: preserve-3d;
transform: translateZ(0) rotateY(0);
transition: transform 1s;
}

.side {
position: absolute;
border: 2px solid black;
border-radius: 3px;
font-weight: bold;
color: black;
text-align: center;
transform-origin: center left;
}

.spine {
position: relative;
width: 50px;
height: 280px;
/* Patterns from: https://projects.verou.me/css3patterns/ */
background-image: var(--tartan);
transform: rotateY(0deg) translateZ(0px);
}

.spine-title {
margin: 2px;
position: absolute;
top: 0px;
left: 0px;
font-size: 12px;
color: gold;
writing-mode: vertical-rl;
text-orientation: mixed;
}

.spine-author {
position: absolute;
color: goldenrod;
bottom: 0px;
left: 20%;
/* no idea why 20% centers it */
}

.top {
width: 50px;
height: 190px;
top: -2px;
/* hmm, why -2 and not 0? */
background-image: linear-gradient(90deg, white 90%, gray 10%);
background-size: 5px 5px;
transform: rotateX(90deg) translateZ(95px) translateY(-95px);
}

.cover {
width: 190px;
height: 280px;
top: 0px;
background-image: radial-gradient(circle, white 0%, gray 100%);
background-size: contain;
background-repeat: round;
left: 50px;
transform: rotateY(90deg) translateZ(0);
transition: transform 1s;
}

.book:hover {
z-index: 1;
transform: rotateX(-25deg) rotateY(-40deg) rotateZ(-15deg) translateY(50px) translateX(-30px);
}
2 changes: 1 addition & 1 deletion static/js/bookshelf.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ let spinesauthors = Object.values(document.getElementsByClassName("spine-author"
let covers = Object.values(document.getElementsByClassName("cover"));
let tops = Object.values(document.getElementsByClassName("top"));

let availablePatterns = ["argyle", "tartan"]; // we could probably get these programatically
let availablePatterns = ["argyle", "tartan", "stairs", "pyramid"]; // we could probably get these programatically
let availableColours = [
"maroon",
"darkgreen",
Expand Down

0 comments on commit 5dd9c02

Please sign in to comment.