1 files changed, 138 insertions, 0 deletions
diff --git a/static/css/publishing.css b/static/css/publishing.css
new file mode 100644
index 0000000..50f159b
--- /dev/null
+++ b/static/css/publishing.css
@@ -0,0 +1,138 @@
+.book-container{
+  --book-width: 176px;
+  --book-height: 250px;
+  --book-thickness: 13px;
+  padding-top: calc(0.3 * var(--book-width));
+  padding-bottom: calc(0.3 * var(--book-width));
+  padding-left: calc(0.3 * var(--book-width));
+  padding-right: calc(0.3 * var(--book-width));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform-style: preserve-3d;
+  perspective: 1000px;
+}
+
+.book {
+  --book-initial-x-rotation: 10deg;
+  --book-initial-y-rotation: 30deg;
+  --book-initial-z-rotation: 0deg;
+  --book-pages-color: white;
+  --book-cover: "";
+}
+
+.type1{
+  --book-initial-x-rotation: 10deg;
+  --book-initial-y-rotation: 10deg;
+  --book-initial-z-rotation: 0deg;
+}
+.type2{
+  --book-initial-x-rotation: -10deg;
+  --book-initial-y-rotation: -10deg;
+  --book-initial-z-rotation: 2deg;
+}
+
+.book{
+    position: relative;
+    width: var(--book-width);
+    height: var(--book-height);
+    transform: rotateX(var(--book-initial-x-rotation))
+               rotateY(var(--book-initial-y-rotation))
+               rotateZ(var(--book-initial-z-rotation));
+    transform-style: preserve-3d;
+}
+
+.book > ._side{
+    border: 1px solid darkgrey;
+}
+
+.book > ._side:nth-of-type(1){
+    width: var(--book-width);
+    height: var(--book-height);
+    position: absolute;
+    transform: translateZ(calc(var(--book-thickness) * 0.5));
+
+    background: var(--book-cover) no-repeat center right scroll;
+    background-size: cover;
+}
+
+.book > ._side:nth-of-type(2){
+    width: var(--book-width);
+    height: var(--book-height);
+    position: absolute;
+
+    background-color: white;
+    background: var(--book-cover) no-repeat center left scroll;
+    background-size: cover;
+    transform: rotateY(180deg) translateZ(calc(var(--book-thickness) * 0.5));
+}
+
+.book > ._side:nth-of-type(3){
+    background-color: var(--book-pages-color);
+    width: var(--book-thickness);
+    height: var(--book-height);
+    position: absolute;
+    transform:
+        translateX(var(--book-width))
+        rotateY(90deg)
+        translateZ(calc(var(--book-thickness) * -0.5));
+}
+
+.book > ._side:nth-of-type(4){
+    background-color: var(--book-pages-color);
+    height: var(--book-thickness);
+    width: var(--book-width);
+    position: absolute;
+    transform:
+        rotateX(90deg)
+        translateZ(calc(var(--book-thickness) * 0.5));
+}
+
+.book > ._side:nth-of-type(5){
+    background-color: var(--book-pages-color);
+    height: var(--book-thickness);
+    width: var(--book-width);
+    position: absolute;
+    transform:
+        rotateX(270deg)
+        translateZ(calc(var(--book-height) + var(--book-thickness) * -0.5));
+}
+
+.book > ._side:nth-of-type(6){
+    background: var(--book-cover) no-repeat center center scroll;
+    width: var(--book-thickness);
+    height: var(--book-height);
+    background-size: cover;
+    position: absolute;
+    transform:
+        rotateY(270deg)
+        translateZ(calc(var(--book-thickness) * 0.5));
+}
+
+
+/*ANIMATION*/
+@keyframes rotate {
+  from {
+    transform: rotateX(var(--book-initial-x-rotation))
+               rotateY(var(--book-initial-y-rotation))
+               rotateZ(var(--book-initial-z-rotation));
+  }
+
+  to {
+    transform: rotateX(var(--book-initial-x-rotation))
+               rotateY(calc(var(--book-initial-y-rotation) + 360deg))
+               rotateZ(var(--book-initial-z-rotation));
+  }
+}
+
+.book-container:hover >.book{
+  animation: rotate 15s infinite linear;
+  transition: none;
+}
+
+
+.flex-around-wrap{
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}