This page contains a couple of funsies experiments

and is absolutely overkill for housing a few links 🤪

1. Dynamically Generated Link Colors

Link background and text colors are randomly generated hex strings:

$count = count($links); // $links is an multidimensional array
while ($count > $i) {
  $bg[$i] = substr(md5(mt_rand()), 0, 6);
  $fg[$i] = strrev($bg[$i]);
  $bg[$i] = '#'.$bg[$i];
  $fg[$i] = '#'.$fg[$i];
  $i++;
}
      

• This info block &l; the link hover colors are both hard-coded
• The results are usually legible 😅 but since any hex is possible, it's wildly variable
• The more middle-of-the-spectrum the bg value, the less variance from it's inverse fg value
• A fix might be to limit the values of one R, G, or B to keep that out of (or in) a specific range

2. Dynamically Calculated Grid Size

$maxcols = 4;
if ($count > $maxcols) { $colcount = $maxcols; } else { $colcount = $count; }
$width = 100 / ($colcount);
$widthrepeat = 100 / $width;
$x=0;
while($x < $widthrepeat) {
  $widthpropertyvalue = $width.'% '.$widthpropertyvalue;
  $x++;
}
// width: 33.333333333333
// widthrepeat: 3
// widthpropertyvalue: 33.333333333333% 33.333333333333% 33.333333333333% 

and later, in the CSS:

.gridbox {
  display: grid;
  grid-template-columns: <? echo $widthpropertyvalue; ?>;
}
.gridblock:last-child {
  grid-column: 1 / <? echo $widthrepeat+1; ?>;
}
      

• This will need tweaking as the link count increases or it looks kind of borked.