# Bookstack Book Style Image

# Book Style Images css for BookStack

Code needs cleanup

```
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.466/pdf.min.js"></script>

  <style>

  
/* Adjusted .grid-card styles */
 .newbookcover{
   font-weight: bold;
   font-size: 12px;
   background-color: rgba(0, 0, 0, 0.7); /* Black background with 50% opacity */
    color: #ffffff; /* White text */
   

   padding:10px;
   top:60px;}


    
.grid-card {
    position: relative;
    width: 140px;
    height: 200px;
    background-size: cover; /* Ensure the background image covers the container */
    background-position: 50% 50%; /* Center the background image */

     
}

 

.grid-card:hover {
    color: #444;
    text-decoration: none;
    box-shadow: 0 6px 6px -1px rgba(0, 0, 0, .1);
}
.grid-card:hover {
    box-shadow: 0 6px 6px -1px rgba(0, 0, 0, .1);
}


.featured-image-container {
    
  
    width: 140px;
    height: 200px;

  /* Center the background image */

     
}
.featured-image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 140px;
    height: 200px;
   /* Center the background image */
    background: linear-gradient(90deg, 
        rgba(2, 0, 36, 0.3) 0%, 
        rgba(0, 0, 0, 0.3) 2%, 
        rgba(255, 255, 255, 0.3) 3%, 
        rgba(247, 254, 255, 0.3) 5%, 
        rgba(0, 0, 0, 0.3) 7%, 
        rgba(255, 255, 255, 0.3) 13%, 
        rgba(255, 255, 255, 0.1) 100%);
}



.featured-image-container img {
    

  width: 140px !important;
            height: 200px !important;
            border-bottom: 1px solid #000;
            margin-bottom: 3px;
            border-radius: 5px;
   /* Ensure the background image covers the container */
    /* Center the background image */

  background: linear-gradient(90deg, rgba(2,0,36,.5) 0%, rgba(0,0,0,.5) 2%, rgba(255,255,255,.5) 3%, rgba(247,254,255,.5) 5%, rgba(0,0,0,.5) 7%, rgba(255,255,255,.5) 13%, rgba(255,255,255,.2) 100%);
}

.featured-image-container a {
    display: block;


}

.featured-image-container-wrap {
   position: relative;
    /* Ensure container height matches card height */
 /* Ensure the background image covers the container */
    /* Center the background image */
  
  background: linear-gradient(90deg, rgba(2,0,36,.5) 0%, rgba(0,0,0,.5) 2%, rgba(255,255,255,.5) 3%, rgba(247,254,255,.5) 5%, rgba(0,0,0,.5) 7%, rgba(255,255,255,.5) 13%, rgba(255,255,255,.2) 100%);
 
}

    .featured-image-container-wrap a {
    position: relative;
    /* Ensure container height matches card height */

 
}

.featured-image-container-wrap .svg-icon {
    color: #fff;
    font-size: 2rem;
    margin-inline-end: 0;
    position: absolute;
    bottom: 10px;
    left: 6px;
}

.grid-card-content,
.grid-card-footer {
    padding: 12px;
}

.grid-card h2 {
    font-size: 1.2em;
    margin: 0 0 10px;
}

.grid-card p {
    font-size: 0.6rem;
    margin: 0;
    line-height: 1.4em;
}

.grid-card .grid-card-footer p.small {
    font-size: 0.7em;
    margin: 0;
}

html.dark-mode .grid-card {
    border-color: #000;
}



html.dark-mode .grid-card:hover {
    box-shadow: 0 1px 6px -1px rgba(0, 0, 0, .5);
}

.grid-card h2 {
    width: 100%;
    font-size: 1.2em; /* Adjusted for smaller card */
    margin: 0 0 10px;
}

.grid-card p {
    font-size: 0.6rem; /* Adjusted for smaller card */
    margin: 0;
    line-height: 1.4em; /* Adjusted for smaller card */
}

.grid-card .grid-card-content {
    flex: 1;
    border-top: 0;
    border-bottom-width: 2px;
}

.grid-card .grid-card-content,
.grid-card .grid-card-footer {
    padding: 12px; /* Adjusted for smaller card */
}

.grid-card .grid-card-content+.grid-card-footer {
    padding-top: 0;
}

.book-grid-item .grid-card-footer p.small {
    font-size: .7em; /* Adjusted for smaller card */
    margin: 0;
}




/* Adjusted .grid-card styles */


.content-wrap.card {
    padding: 16px 48px;
    margin-inline-start: auto;
    margin-inline-end: auto;
    margin-bottom: 24px;
    overflow: initial;
    min-height: 60vh;
    border-radius: 8px;
}

.content-wrap.card.auto-height {
    min-height: 0;
}

.content-wrap.card.fill-width {
    width: 100%; /* Ensure consistent width */
}

@media screen and (max-width: 1400px) {
    .content-wrap.card {
        padding: 16px 32px;
    }
}

@media screen and (max-width: 880px) {
    .content-wrap.card {
        padding: 16px 24px;
    }
}

@media screen and (max-width: 600px) {
    .content-wrap.card {
        padding: 16px 16px;
    }
}

@media screen and (max-width: 320px) {
    .content-wrap.card {
        padding: 16px 13px;
    }
}

.sub-card {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1);
    border: 1.5px solid;
    border-color: #e2e2e2;
    border-radius: 4px;
}




html.dark-mode .featured-image-container-wrap .svg-icon {
    color: rgba(255, 255, 255, .6);
}

.grid-card:hover .featured-image-container {
    opacity: .5;
  
}
.action-link {
    background: rgba(0, 0, 0, 0);
    border: none;
    color: currentColor;
    padding: 16px 0;
}

.active-link-list a {
    display: inline-block;
    padding: 12px;
}

.active-link-list a:not(.active) {
    color: #444;
}

html.dark-mode .active-link-list a:not(.active) {
    color: #888;
}

.active-link-list a:hover {
    background-color: rgba(0, 0, 0, .05);
    border-radius: 4px;
    text-decoration: none;
}

html.dark-mode .active-link-list a:hover {
    background-color: rgba(255, 255, 255, .05);
}

.active-link-list.in-sidebar a {
    display: block;
    margin-bottom: 6px;
}

.active-link-list.in-sidebar a.active {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .05);
}

html.dark-mode .active-link-list.in-sidebar a.active {
    background-color: rgba(255, 255, 255, .05);
}

.entity-meta-item {
    display: flex;
    line-height: 1.2;
    margin: .6em 0;
    align-content: start;
    gap: 12px;
}

.entity-meta-item a {
    line-height: 1.2;
}

.entity-meta-item svg {
    flex-shrink: 0;
    width: 1em;
    margin: 0;
}

.page-editor {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow: hidden;
}

.page-editor .edit-area {
    flex: 1;
    flex-direction: column;
    z-index: 10;
    overflow: hidden;
    border-radius: 0 0 8px 8px;
}

.page-editor .mce-tinymce {
    box-shadow: none;
}

.page-editor .mce-top-part::before {
    box-shadow: none;
}

.page-editor-page-area {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 1px 6px -1px rgba(0, 0, 0, .1);
    background-color: #fff;
}
.grid{display:grid;grid-column-gap:20px;grid-row-gap:20px;}
    .grid>*{min-width:0}
    .grid.half
{grid-template-columns:2fr 1fr;}
    
/* Grid container and responsive adjustments */
.grid.third {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 5 columns */
    gap: 8px; /* Adjust the gap between items */
  width: 100%; /* Consistent width */
   
}



@media screen and (max-width: 1400px) {
    .grid.third {
        grid-template-columns: repeat(4, 1fr); /* 4 columns for smaller screens */
    }
}

@media screen and (max-width: 880px) {
    .grid.third {
        grid-template-columns: repeat(3, 1fr); /* 3 columns for smaller screens */
    }
}

@media screen and (max-width: 600px) {
    .grid.third {
        grid-template-columns: repeat(3, 1fr); /* 3 columns for smaller screens */
    }
}

@media screen and (max-width: 600px) {
    .grid.third:not(.no-break) {
       grid-template-columns: repeat(3, 1fr); /* 3 columns for smaller screens */
      
    }
}

@media screen and (max-width: 400px) {
    .grid.half.collapse-xs {
         grid-template-columns: repeat(1, 1fr); /* 3 columns for smaller screens */
    }
}
.grid.left-focus{grid-template-columns:1fr 
                 .grid.right-focus{grid-template-columns:1fr 3fr}
.grid.gap-y-xs{grid-row-gap:6px}
.grid.gap-xl{grid-column-gap:32px;grid-row-gap:32px}
.grid.gap-xxl{grid-column-gap:48px;grid-row-gap:48px}
.grid.v-center{align-items:center}
.grid.v-end{align-items:end}
.grid.no-gap{grid-row-gap:0;grid-column-gap:0}
.grid.no-row-gap{grid-row-gap:0}@media screen and (max-width: 880px){.grid.third:not(.no-break){grid-template-columns:1fr 1fr}
                                                                     .grid.half:not(.no-break),.grid.left-focus:not(.no-break),.grid.right-focus:not(.no-break){grid-template-columns:1fr}
.grid.half.collapse-xs{grid-template-columns:1fr 1fr}
.grid.gap-xl{grid-column-gap:16px;grid-row-gap:16px}
.grid.right-focus.reverse-collapse>*:nth-child(2){order:0}
.grid.right-focus.reverse-collapse>*:nth-child(1){order:1}}@media screen and (max-width: 600px){
    .grid.third:not(.no-break){grid-template-columns:2fr}}@media screen and (max-width: 400px){
        .grid.half.collapse-xs{grid-template-columns:2fr}}#content{flex:1 0 auto}body.flexbox{display:flex;flex-direction:column;align-items:stretch;height:100%;min-height:100%;max-height:100%;overflow:hidden}

   @media screen and (max-width: 880px) {
    .grid.third:not(.no-break) {
         grid-template-columns: repeat(3, 1fr); /* 3 columns for smaller screens */
    }
}
      @media screen and (max-width: 600px) {
    .grid.third:not(.no-break) {
        grid-template-columns: repeat(3, 1fr); /* 3 columns for smaller screens */
    }
}
   
   @media screen and (max-width: 320px) {
    .grid.third:not(.no-break) {
        grid-template-columns: repeat(3, 1fr); /* 3 columns for smaller screens */
    }
}
  

.social-icons a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    margin-left: 10px;
}

.social-icons a:hover {
    opacity: 0.8;
}
canvas[data-pdfurl] {
  background-color: lightgrey;
   width: 100%;
}
.page-content a {
 color: #39f;
text-decoration: underline;
}
.pdf-wrapper {
position: relative;
height: 80vh;
width: 100%;
}
.pdf-wrapper .download-link {
position: absolute;
top: -2em; 
right: 0;
z-index: 50;
}
.pdf-wrapper .pdf-scroller {
height: 100%;
overflow: auto;
}
   


    /* Adjusted .featured-image-container styles */



    
</style>
<script type="text/javascript">
var createButton = function(text,details,id,callback) {
  var btnWrapper = document.createElement('div');
  btnWrapper.id = id;
  btnWrapper.className='mce-widget mce-btn';
  btnWrapper.tabindex=-1;
  btnWrapper.role='button';
  btnWrapper.ariaLabel=details;
  var btn = document.createElement('button');
  btn.id=id+'-button';
  btn.innerText = text;
  btn.role='presentation';
  btn.type='button';
  btn.tabindex='-1';
  btn.style.border = 'solid 1px';
  btn.style.padding = ' 3px 7px';
  btnWrapper.append(btn);
  btnWrapper.onclick = callback;
  var ar =document.querySelectorAll('.mce-btn.mce-last');
  var lastBtn = ar[ar.length-2];
  lastBtn.parentNode.append(btnWrapper);
};
window.addEventListener('load', function () {
// ------------------- THIS SECTION ADDS A PDF BUTTON TO THE EDITOR TOOLBAR THAT ALLOWS YOU TO EMBED PDFS 

var btn = document.querySelectorAll('#mceu_20')[0];


if (btn) {
  createButton('pdf', 'Insert a PDF', 'mceu_pdf', function(e) {
		// show dialog
		var editor = tinyMCE.editors[0];
		editor.windowManager.open({
		    title: 'Insert PDF',
		        body: [
		            {type: 'textbox', name: 'pdfurl', label: 'PDF URL'}
		        ],
		        onsubmit: function(e) {
		            // Insert content when the window form is submitted
		            editor.insertContent('<p>&nbsp;<canvas data-pdfurl="' + e.data.pdfurl + '"></canvas>&nbsp;</p>');
		        }
		});
	});
}

//-------------------- THE CODE BELOW SHALL BE ACTIVE IN VIEWING MODE TO EMBED PDFS
var renderPdf=function(canvas) {
  var url = canvas.dataset.pdfurl;
  var pdf = null;
  // wrap canvas in div
  var wrapper = document.createElement('div');
  wrapper.className='pdf-wrapper';
  var scroller = document.createElement('div');
  scroller.className='pdf-scroller';
  wrapper.appendChild(scroller);
  canvas.parentNode.insertBefore(wrapper, canvas.nextSibling);
  scroller.insertBefore(canvas, null);

  var downloadLink  = document.createElement('a');
  downloadLink.href = url;
  downloadLink.className="download-link";
  downloadLink.innerText = 'Download PDF now ↓';
  wrapper.appendChild(downloadLink);

  var renderPage = function(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);
    // Fetch canvas' 2d context
    var context = canvas.getContext('2d');
    // Set dimensions to Canvas
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    canvas.style.maxWidth='100%';
    // Prepare object needed by render method
    var renderContext = {
      canvasContext: context,
      viewport: viewport
    };
    // Render PDF page
    page.render(renderContext);
    if (currentPage < pdf.numPages) {
      currentPage++;
      var newCanvas = document.createElement('canvas');
      scroller.insertBefore(newCanvas, canvas.nextSibling);
      scroller.insertBefore(document.createElement('hr'), canvas.nextSibling);
      canvas=newCanvas;
      pdf.getPage(currentPage).then(renderPage);
    }
  };
  var currentPage = 1;
  pdfjsLib.getDocument(url)
  .then(function(pdfLocal) {
    pdf = pdfLocal;
    return pdf.getPage(1);
  })
  .then(renderPage);
}
Array.prototype.forEach.call(
  document.querySelectorAll('canvas[data-pdfurl]'),
  renderPdf);
});

  
</script>
```