Get books

css/styles/books.css

@@ -0,0 +1,343 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
+
+body{
+    margin:0;
+    padding:0;
+}
+
+.book div {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+  .page-layout-3 p{
+  background: linear-gradient(to bottom, rgba(73,179,255,1) 0%,rgba(107,193,255,0.5) 60%,rgba(107,193,255,1) 100%);
+  background: linear-gradient(to bottom, rgba(222,255,0,1) 0%,rgba(222,255,0,0.5) 60%,rgba(222,255,0,1) 100%);
+  background: linear-gradient(to bottom, rgba(255,69,190,1) 0%,rgba(255,107,203,0.5) 60%,rgba(255,107,203,1) 100%);
+  background: linear-gradient(to bottom, rgba(67,226,15,1) 0%,rgba(39,229,54,0.5) 60%,rgba(39,229,54,1) 100%);
+  background: linear-gradient(to bottom, rgba(255,134,9,1) 0%,rgba(255,177,34,0.5) 60%,rgba(255,177,34,1) 100%);
+  box-shadow: rgba(0,0,0,0.5) 0 1em 3em;
+  }	
+
+  @font-face {
+      font-family: 'Belinda';
+      src: url('../../assets/fonts/Belinda.woff2') format('woff2'),
+          url('../../assets/fonts/Belinda.woff') format('woff'),
+          url('../../assets/fonts/Belinda.ttf') format('truetype');
+      font-weight: normal;
+      font-style: normal;
+      font-display: swap;
+  }
+
+  @font-face{
+      font-family: "Tanseek Modern Pro Arabic Book";
+      src: url("../../assets/fonts/d602bf6498a65d9595ca30c04eadda32.eot");
+      src: url("../../assets/fonts/d602bf6498a65d9595ca30c04eadda32.eot?#iefix")format("embedded-opentype"),
+          url("../../assets/fonts/d602bf6498a65d9595ca30c04eadda32.woff")format("woff"),
+          url("../../assets/fonts/d602bf6498a65d9595ca30c04eadda32.woff2")format("woff2"),
+          url("../../assets/fonts/d602bf6498a65d9595ca30c04eadda32.ttf")format("truetype"),
+          url("../../assets/fonts/d602bf6498a65d9595ca30c04eadda32.svg#Tanseek Modern Pro Arabic Book")format("svg");
+      font-weight:normal;
+      font-style:normal;
+      font-display:swap;
+  }
+
+  @font-face{
+    font-family: "Recta-Bold";
+    src: url("../../assets/fonts/b86a36b86f07f668b7ba6b2825d1b093.eot");
+    src: url("../../assets/fonts/b86a36b86f07f668b7ba6b2825d1b093.eot?#iefix")format("embedded-opentype"),
+        url("../../assets/fonts/b86a36b86f07f668b7ba6b2825d1b093.woff")format("woff"),
+        url("../../assets/fonts/b86a36b86f07f668b7ba6b2825d1b093.woff2")format("woff2"),
+        url("../../assets/fonts/b86a36b86f07f668b7ba6b2825d1b093.ttf")format("truetype"),
+        url("../../assets/fonts/b86a36b86f07f668b7ba6b2825d1b093.svg#Recta-Bold")format("svg");
+    font-weight:normal;
+    font-style:normal;
+    font-display:swap;
+   }
+
+   @font-face {
+    font-family: 'FS Ostro';
+    src: url('../../assets/fonts/subset-FSOstroRegular.eot');
+    src: url('../../assets/fonts/subset-FSOstroRegular.eot?#iefix') format('embedded-opentype'),
+        url('../../assets/fonts/subset-FSOstroRegular.woff2') format('woff2'),
+        url('../../assets/fonts/subset-FSOstroRegular.woff') format('woff'),
+        url('../../assets/fonts/subset-FSOstroRegular.ttf') format('truetype'),
+        url('../../assets/fonts/subset-FSOstroRegular.svg#FSOstroRegular') format('svg');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+}
+
+  .page-layout-3 h3 {
+      font-family: 'Belinda';
+      font-size: 2rem;
+      font-weight: bold;
+      color: #1e1e1e;
+      text-transform: capitalize;
+  }
+
+  .bb-custom-wrapper {
+      margin-left: auto;
+      margin-right: auto;
+      min-width: 100%;
+  }
+
+  .bb-custom-wrapper .bb-bookblock {
+      float: left;
+      padding: 0;
+      width: 100%;
+  }
+
+
+  #bookshelf .book[data-book] .book-background{
+      background-size: 100% 100%!important;
+      background-position:center center!important;
+      background-repeat:no-repeat!important;
+  }
+
+  #loading-container{ 
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    min-height: 100vh;
+    margin: 0;
+    padding: 15px;
+    box-sizing: border-box;
+    overflow: hidden; 
+    background: rgba(255, 255, 255, 0.5); 
+    backdrop-filter: blur(5px); 
+    z-index: 999; 
+  }
+
+  @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@800&display=swap');
+
+  #loading-container h3, #loading-container p, #loading-container p{
+    display: flex;
+    align-items: center;
+    font-family: 'Open Sans', -apple-system, 'Segoe UI', sans-serif;
+    margin:0;
+    padding: 15px;
+    box-sizing: border-box;
+    font-weight: bold;
+    color: hsl(0, 0%, 13%);
+  }
+
+  #loading-container h3{
+    font-size: 3.5em;
+  }
+
+  #loading-container p{
+    font-size: 2em;
+  }
+
+#loading-container p span{
+    background-color: #1e6cc7;
+    color: white;
+    margin-left: 5px;
+    padding: 15px;
+    box-sizing: border-box;
+}
+
+.bb-custom-side {
+    display: flex;
+    flex-direction: column;
+}
+
+#book-content-top-left{
+    height: 30%;
+    display: flex;
+    flex: 1;
+    justify-content: left;
+    align-items: start;
+    gap: 1rem;
+}  
+#book-content-middle-left{
+    height: 70%;
+    display: flex;
+    flex-direction: column; 
+}
+
+#book-content-middle-left h3{
+    font-family: 'FS Ostro';
+    font-size: 3.5em;
+    font-weight: 100;
+    word-spacing: 5px;
+}
+
+#book-content-middle-left span{
+    background: none;
+    box-shadow: none;
+    margin: 2rem 0;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 1rem;
+    font-style: normal;
+    text-align: justify;
+    line-height: 1.5;
+    padding-right: 30%;
+}
+
+#book-content-middle-left h4, .bookshelf figure h4{
+    display: flex;
+    justify-content: left;
+    align-items: start;
+    font-family: "Tanseek Modern Pro Arabic Book", sans-serif;   
+    font-size: 2em;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    gap: 15px;
+}
+
+.bookshelf figure h4{
+    justify-content: center;
+    font-size: 1em;
+    z-index: -1;
+    position: relative;
+}
+
+
+#book-content-middle-left h4 span:first-child,.bookshelf figure h4 span:first-child{ 
+    color: black;
+    background-color: transparent;
+    padding: 5px;
+    position: relative;
+}
+
+#book-content-middle-left h4 span:first-child:before, .bookshelf figure h4 span:first-child:before{
+    content: "";
+    position: absolute;
+    top: 90%;
+    bottom: 0;
+    left: 5%;
+    right: 0;
+    width: 80%;
+    height: 1px;
+    background-color: #434343;
+}
+
+#book-content-middle-left h4 span:last-child, .bookshelf figure h4 span:last-child{
+    background-color: aliceblue;
+    padding: 5px;
+}
+
+.book .front.nocover{
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.book .front.nocover:before{
+    content: attr(no-image-cover);
+    font-size: 1em; 
+    color: #333;
+    font-weight: bold;
+    background: #eae5e4;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 100px;
+    width: 100%;
+    padding: 12px;
+    margin: 0 auto;
+    justify-content: center;
+}
+
+#readmore{
+    background-color: #fc6129;
+    color:white;
+    border: none;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    padding: 12px 25px;
+    vertical-align: middle;
+    text-decoration: none;
+    text-align: center;
+    cursor: pointer;
+    white-space: nowrap;
+    width: 110px;
+    font-size: 1rem;
+    font-weight: 600;
+    letter-spacing: 1px;
+    height: 50px;
+}
+
+#readmore img{
+    color:white;
+}
+
+
+/* side cover */
+
+.book .cover::before,
+.book .cover::after {
+    position: absolute;
+    text-align: left;
+    white-space: break-spaces;
+    background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.01) 1%, rgba(0, 0, 0, 0.1) 50%, transparent 100%), #d5b883!important;
+    color: rgb(28, 29, 31);
+    writing-mode: vertical-lr;
+    padding: 2px;
+    font-size: 10px;
+}
+
+.book .cover::before {
+    content: attr(cover-data-text);
+    top: 0;
+}
+
+.book .cover::after {
+    bottom: 10px;
+    text-align: left;
+    transform-origin: bottom left;
+    transform: rotateY(-90deg);
+    white-space: nowrap;
+    color: rgb(28, 29, 31);
+    writing-mode: vertical-rl;
+    z-index: 10;
+    display: block;
+    padding: 0;
+}
+
+
+
+
+
+@media only screen and (max-width: 50em){
+    .bb-custom-wrapper .bb-bookblock {
+        margin: 0 auto;
+        position: relative;
+    }
+
+    .bb-item{
+        display: flex;
+        flex-direction: column;
+        position: relative;
+    }
+
+    .page-layout-3:last-child {
+        position: relative;
+        background-size: contain;
+    }	
+
+    .bb-custom-side {
+        margin: 0 auto;
+        min-width: 100%;
+        width: 100%;
+        height: auto;
+    }
+
+    #loading-container > * {
+        font-size: 1.5em!important;
+    }
+
+    #book-content-middle-left h3 {
+        font-size: 4.5em;
+    }
+
+}