spec-up-t 1.2.4 → 1.2.6

package/assets/css/create-pdf.css

@@ -0,0 +1,339 @@
+/* PDF Styling for optimized print layout */
+/* Target the pdf-document class that's added during PDF generation */
+
+/* ===== GENERAL LAYOUT STYLING ===== */
+.pdf-document * {
+  box-sizing: border-box !important;
+}
+
+/* Basic layout settings */
+body.pdf-document {
+  max-width: 100% !important;
+  width: 100% !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow-x: hidden !important;
+}
+
+/* Content container sizing */
+.pdf-document .container,
+.pdf-document main,
+.pdf-document section,
+.pdf-document article,
+.pdf-document .content,
+.pdf-document div[class*="container"],
+.pdf-document div[class*="col-"],
+.pdf-document .row,
+.pdf-document .container-sm,
+.pdf-document .container-md,
+.pdf-document .container-lg,
+.pdf-document .container-xl {
+  max-width: 95% !important;
+  width: 95% !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+/* Force columns to full width */
+.pdf-document .col,
+.pdf-document [class*="col-"] {
+  flex: 0 0 100% !important;
+  max-width: 100% !important;
+  padding: 0 !important;
+}
+
+/* ===== COMMON ELEMENT STYLING ===== */
+
+/* Basic styling for tables */
+.pdf-document table {
+  width: 100% !important;
+  max-width: 100% !important;
+  margin-bottom: 1rem;
+  table-layout: fixed !important;
+  page-break-inside: avoid !important;
+}
+
+/* Title styling */
+.pdf-document .pdf-title {
+  font-size: 24pt !important;
+  margin-bottom: 0.5rem !important;
+}
+
+/* Consistent image handling */
+.pdf-document img {
+  max-width: 100% !important;
+  height: auto !important;
+}
+
+/* Links in PDF */
+.pdf-document a {
+  color: #000 !important;
+  text-decoration: none !important;
+  border-bottom: none !important;
+}
+
+/* Code blocks */
+.pdf-document pre,
+.pdf-document code {
+  white-space: pre-wrap !important;
+  word-break: break-word !important;
+  max-width: 100% !important;
+  overflow: visible !important;
+}
+
+/* Page break control */
+.pdf-document h1,
+.pdf-document h2,
+.pdf-document h3,
+.pdf-document h4 {
+  page-break-after: avoid !important;
+  page-break-inside: avoid !important;
+}
+
+.pdf-document figure {
+  page-break-inside: avoid !important;
+}
+
+/* Make fixed elements static for PDF */
+.pdf-document .fixed-top,
+.pdf-document .fixed-bottom,
+.pdf-document .sticky-top,
+.pdf-document .position-fixed,
+.pdf-document .position-sticky {
+  position: static !important;
+}
+
+/* Hide elements not needed in PDF */
+.pdf-document .offcanvas.show,
+.pdf-document .meta-info-toggle-button {
+  display: none !important;
+}
+
+/* ===== TABLE OF CONTENTS STYLING ===== */
+.pdf-document #toc,
+.pdf-document #pdf-toc {
+  break-before: page !important;
+  page-break-before: always !important;
+  padding: 2rem 0 1rem !important;
+  margin-bottom: 2rem !important;
+}
+
+/* Content after TOC starts on new page */
+.pdf-document #toc + *,
+.pdf-document #pdf-toc + * {
+  break-before: page !important;
+  page-break-before: always !important;
+}
+
+/* TOC header */
+.pdf-document #toc h2,
+.pdf-document #pdf-toc h2 {
+  font-size: 24pt !important;
+  text-align: center !important;
+  margin-bottom: 1.5rem !important;
+  font-weight: bold !important;
+  border-bottom: 1px solid #000 !important;
+  padding-bottom: 0.5rem !important;
+}
+
+/* TOC list basics */
+.pdf-document #toc ul,
+.pdf-document #pdf-toc ul {
+  margin: 0 !important;
+  padding: 0 !important;
+  list-style-type: none !important;
+  width: 100% !important;
+}
+
+/* TOC nested lists */
+.pdf-document #toc ul ul,
+.pdf-document #pdf-toc ul ul {
+  padding-left: 1rem !important;
+  margin: 0.2rem 0 0.2rem 1rem !important;
+}
+
+/* TOC list items */
+.pdf-document #toc li,
+.pdf-document #pdf-toc li {
+  position: relative !important;
+  width: 100% !important;
+  margin: 0 0 0.5rem 0 !important;
+  padding: 0 20px 0 0 !important;
+  line-height: 1.5 !important;
+  display: flex !important;
+  align-items: baseline !important;
+}
+
+/* TOC list styles for different levels */
+.pdf-document #toc > ul > li,
+.pdf-document #pdf-toc > ul > li {
+  font-weight: bold !important;
+  margin-bottom: 0.7rem !important;
+}
+
+.pdf-document #toc > ul > li > ul > li,
+.pdf-document #pdf-toc > ul > li > ul > li {
+  font-weight: normal !important;
+  margin-bottom: 0.5rem !important;
+  margin-left: 0.5rem !important;
+}
+
+.pdf-document #toc > ul > li > ul > li > ul > li,
+.pdf-document #pdf-toc > ul > li > ul > li > ul > li {
+  font-style: italic !important;
+  margin-bottom: 0.3rem !important;
+}
+
+/* TOC items with nested lists */
+.pdf-document #toc li:has(> ul),
+.pdf-document #pdf-toc li:has(> ul) {
+  flex-direction: column !important;
+  align-items: flex-start !important;
+}
+
+.pdf-document #toc li:has(> ul) > ul,
+.pdf-document #pdf-toc li:has(> ul) > ul {
+  margin-top: 0.3rem !important;
+  width: 100% !important;
+}
+
+/* TOC link styling */
+.pdf-document #toc ul li a,
+.pdf-document #pdf-toc ul li a,
+.pdf-document #pdf-toc .toc-title {
+  color: #000 !important;
+  text-decoration: none !important;
+  font-weight: normal !important;
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  max-width: 80% !important;
+  border-bottom: none !important;
+  background-color: transparent !important;
+}
+
+/* Dotted leader line */
+.pdf-document #toc ul li .dotted-leader,
+.pdf-document #pdf-toc ul li .dotted-leader,
+.pdf-document #pdf-toc .toc-leader {
+  flex-grow: 1 !important;
+  border-bottom: 1px dotted #aaa !important;
+  margin: 0 0.3rem !important;
+  position: relative !important;
+  bottom: 0.3rem !important;
+}
+
+/* TOC row layout */
+.pdf-document #pdf-toc .toc-row {
+  display: flex !important;
+  width: 100% !important;
+  align-items: baseline !important;
+  position: relative !important;
+}
+
+/* ===== PAGE NUMBER STYLING ===== */
+/* Page margin for right side numbers */
+@page {
+  margin-right: 25mm !important;
+}
+
+/* Page number styling - simplified and consolidated */
+.pdf-document .page-number,
+.pdf-document #pdf-toc .toc-page-number,
+.pdf-document #toc ul li span.page-number,
+.pdf-document #pdf-toc ul li span.page-number {
+  display: inline-block !important;
+  text-align: right !important;
+  font-size: 11pt !important;
+  background-color: white !important;
+  padding: 0 4px !important;
+  margin: 0 !important;
+  min-width: 2rem !important;
+  white-space: nowrap !important;
+  font-weight: normal !important;
+  z-index: 9999 !important;
+}
+
+/* Page number positioning */
+.pdf-document #pdf-toc ul li > div:last-child,
+.pdf-document #toc ul li > div:last-child {
+  position: absolute !important;
+  right: 0 !important;
+  background-color: white !important;
+  padding: 0 5px !important;
+  z-index: 100 !important;
+  width: 3rem !important;
+  min-width: 3rem !important;
+  max-width: 3rem !important;
+  flex-shrink: 0 !important;
+  margin-left: auto !important;
+  text-align: right !important;
+}
+
+/* ===== DEFINITION LIST STYLING ===== */
+/* Clean definition list styling */
+.pdf-document dl.terms-and-definitions-list > dt,
+.pdf-document dl.terms-and-definitions-list > dd {
+  background-color: transparent !important;
+  border: none !important;
+  border-radius: 0 !important;
+  padding: 0.5rem 0 !important;
+  color: #000 !important;
+  page-break-inside: avoid !important;
+}
+
+.pdf-document dl.terms-and-definitions-list > dt {
+  margin-top: 1em !important;
+  font-weight: bold !important;
+  page-break-after: avoid !important;
+}
+
+/* Always show definitions content in PDF */
+.pdf-document dl > dd.meta-info-content-wrapper,
+.pdf-document dl > dd.collapsed.meta-info-content-wrapper {
+  display: block !important;
+  max-height: none !important;
+  height: auto !important;
+  overflow: visible !important;
+  padding: 0.5rem 0 !important;
+  margin: 0 !important;
+  line-height: normal !important;
+}
+
+/* Clean styling for transclusion */
+.pdf-document dt.transcluded-xref-term,
+.pdf-document dd.transcluded-xref-term {
+  background: transparent !important;
+}
+
+/* Remove unwanted elements */
+.pdf-document dl.terms-and-definitions-list > dt::before,
+.pdf-document dl.terms-and-definitions-list > dd::before {
+  display: none !important;
+}
+
+/* Definition paragraphs */
+.pdf-document dl.terms-and-definitions-list dd p {
+  padding-left: 0 !important;
+}
+
+/* Definition tables */
+.pdf-document dl.terms-and-definitions-list dd table {
+  margin: 0.5em 0 !important;
+  border-collapse: collapse !important;
+}
+
+.pdf-document dl.terms-and-definitions-list dd table th,
+.pdf-document dl.terms-and-definitions-list dd table td {
+  border: 0.5pt solid #888 !important;
+}
+
+
+
+
+
+
+
+

package/assets/css/horizontal-scroll-hint.css

@@ -0,0 +1,6 @@
+#content .figure:has(.scrollHintImage) {
+    padding: 0;
+    margin: 0;
+    width: auto;
+    height: auto;
+}

package/assets/css/image-full-size.css

@@ -0,0 +1,40 @@
+/**
+ * @file CSS for full-size image display
+ * @author Kor Dwarshuis
+ * @version 1.0.0
+ */
+
+/* Container that holds the full-size image */
+.image-container-full-page {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.9);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 10000;
+  padding: 20px;
+  box-sizing: border-box;
+  cursor: zoom-out;
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+/* Style for the image inside the container */
+.image-container-full-page img {
+  max-width: 90%;
+  max-height: 90%;
+  object-fit: contain;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/assets/css/index.css

@@ -11,6 +11,11 @@ body:not([hashscroll]) dt:has(:target) {
   animation: highlight-target-parent-dt 3.5s 0.25s ease;
 }
 
+dl.terms-and-definitions-list>.highlight {
+  background-color: yellow !important;
+  transition: background-color 0.3s ease-in-out;
+}
+
 svg[icon] {
   width: 1.25em;
   height: 1.25em;

package/assets/css/search.css

@@ -8,7 +8,7 @@
  */
 
 /* Basic styles */
-.highlight-matches-search-h7vc6omi2hr2880 {
+.highlight-matches-search {
   font-size: 1em;
   outline: 3px solid #1d6dae39;
   outline-offset: 5px;
@@ -17,33 +17,33 @@
   transition: outline 0.3s ease-in-out;
 }
 
-.highlight-matches-search-h7vc6omi2hr2880.active {
+.highlight-matches-search.active {
   outline: 3px solid #1d6dae;
   /* Works in tandem with the setTimeout in JS: */
   transition: outline 0.3s ease-in-out;
 }
 
 /* Specific styles */
-.highlight-matches-DIF-search-h7vc6omi2hr2880 {
+.highlight-matches-DIF-search {
   background-color: #1d6dae11;
 }
 
-.highlight-matches-ToIP-search-h7vc6omi2hr2880 {
+.highlight-matches-ToIP-search {
   background-color: #a9dde0b0;
 }
 
-.highlight-matches-BTC-search-h7vc6omi2hr2880 {
+.highlight-matches-BTC-search {
   background-color: #f19019a1;
 }
 
-.highlight-matches-KERI-search-h7vc6omi2hr2880 {
+.highlight-matches-KERI-search {
   background-color: #b5d070d5;
 }
 
-.highlight-matches-SSI-search-h7vc6omi2hr2880 {
+.highlight-matches-SSI-search {
   background-color: yellow;
 }
 
-.highlight-matches-GLEIF-search-h7vc6omi2hr2880 {
+.highlight-matches-GLEIF-search {
   background-color: #52dac6a6;
 }

package/assets/css/terms-and-definitions.css

@@ -231,9 +231,9 @@ html.dense-info dl.terms-and-definitions-list>dt>span {
   position: relative;
 }
 
-dt.transcluded-xref-term,
-dd.transcluded-xref-term {
-  background: #a9dde03b !important;
+dl.terms-and-definitions-list>dt.transcluded-xref-term,
+dl.terms-and-definitions-list>dd.transcluded-xref-term {
+  background: #a9dde03b;
 }
 
 /* Fix for all buttons */

package/assets/js/add-bootstrap-classes-to-images.js

@@ -0,0 +1,95 @@
+/**
+ * @file This file adds Bootstrap classes to images for better responsiveness and styling.
+ * @author Kor Dwarshuis
+ * @version 1.0.0
+ */
+
+/**
+ * Function to add Bootstrap classes to images for better responsiveness
+ */
+function addBootstrapClassesToImages() {
+  const images = document.querySelectorAll('#content img');
+  images.forEach(image => {
+    // Add Bootstrap responsive image class
+    image.classList.add('img-fluid');
+    
+    // Optional: Add rounded corners
+    image.classList.add('rounded');
+    
+    // Optional: Add subtle shadow for better appearance
+    image.classList.add('shadow-sm');
+    
+    // Add appropriate margins
+    image.classList.add('my-3');
+    
+    // Create a figure element for images that are not already in one
+    if (!image.closest('figure') && !image.parentElement.classList.contains('image-container')) {
+      // Check if not already wrapped
+      const figure = document.createElement('figure');
+      figure.classList.add('figure', 'text-center');
+      
+      // Get the original parent and replace the image with the figure
+      const parent = image.parentElement;
+      parent.replaceChild(figure, image);
+      
+      // Add the image to the figure
+      figure.appendChild(image);
+      
+      // If the image has an alt text, create a caption
+      if (image.alt && image.alt.trim() !== '') {
+        const figcaption = document.createElement('figcaption');
+        figcaption.classList.add('figure-caption', 'text-center');
+        figcaption.textContent = image.alt;
+        figure.appendChild(figcaption);
+      }
+    }
+  });
+}
+
+/**
+ * Initialize the image enhancement with Bootstrap classes
+ */
+function initImageBootstrapClasses() {
+  const markdownElement = document.querySelector('#content');
+  
+  if (markdownElement) {
+    // Initialize bootstrap classes for all existing images
+    addBootstrapClassesToImages();
+    
+    // Add a mutation observer to detect dynamically added images
+    if (typeof MutationObserver !== 'undefined') {
+      const observer = new MutationObserver((mutations) => {
+        let shouldUpdate = false;
+        
+        mutations.forEach(mutation => {
+          // Check if new nodes were added
+          if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+            // Look for added images
+            mutation.addedNodes.forEach(node => {
+              if (node.nodeType === 1) { // Element node
+                // Check if node is an image or contains images
+                shouldUpdate = node.tagName === 'IMG' || node.querySelector?.('img');
+              }
+            });
+          }
+        });
+        
+        if (shouldUpdate) {
+          // Apply Bootstrap classes to newly added images
+          addBootstrapClassesToImages();
+        }
+      });
+      
+      // Start observing content changes
+      observer.observe(markdownElement, { 
+        childList: true, 
+        subtree: true 
+      });
+    }
+  }
+}
+
+// Run when the DOM is fully loaded
+document.addEventListener('DOMContentLoaded', () => {
+  initImageBootstrapClasses();
+});