Rebrickable script for priting in Grid view to see colors

script.js

(() => {
  // Add a header for easier identification
  const $h1 = document.querySelector('h1') ?? document.createElement('h1');
  if (!$h1.parentElement) {
    $h1.innerText = document.title;
    document.body.prepend($h1);
  }
  $h1.style.display = "flex";
  $h1.style.margin = "0";
  $h1.style.justifyContent = "center";
  
  // Replace price with color and style it in a way where no information is cut and the grid is maintained
  const $$parts = document.querySelectorAll('.js-part');
  for (const $part of $$parts) {
    const $data = $part.querySelector('.js-part-data');
    const color = $data.getAttribute('data-color_name');
    const $price = $part.querySelector('.js-part-price');
    $price.innerHTML = `<small style="justify-content: center; align-items: flex-end; line-height: 85%; display: flex; height: 30px; overflow: hidden; font-size: 70%; color: black; padding-bottom: 5px;">${color}</small>`;
    
    const $text = $part.querySelector('.part-text .trunc');
    $text.style.fontSize = "70%";
    $text.style.display = "block";
    $text.style.wordBreak = "break-all";
    $text.style.textOverflow = "inherit";
    $text.style.color = "black";
    
    $text.querySelector('b').style.display = "block";
  }
  
  // Replace <a> that make each block with <div> to avoid underlines from appearing when printing
  // and also try to avoid breaking a grid cell between pages
  for (const $a of document.querySelectorAll('a')) {
    const $clone = document.createElement('div');
    $clone.innerHTML = $a.innerHTML;
    $clone.style.breakInside = "avoid";
    
    $a.parentNode.replaceChild($clone, $a);
  }
})();