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>