Quack About

Bananagram Procrastination and CSS Fun

Ever since I saw James Zhan use some simple CSS to make keyboard style boxes for displaying shortcuts, I wanted to do the same but for Bananagram tiles.

So, to avoid actual real life responsibilities, I made some minor tweaks to his code.

P R O C R A S T I N A T I O N

And here is the code to achieve such wondrous amazement. Just add this code somewhere in your theme CSS, and use < ban > (or whatever you name it) to call it up in your Markdown/html. The dark theme is actually the same colours as used by James, I might change this at some point, but it fits in well with my theme for now.

ban {
      font-family: monospace;
      font-weight:700;
      font-size:0.9em;
      padding:0.3em 0.7em 0.35em;
      border-radius:3px;
      white-space:nowrap;
      background:linear-gradient(#fffcdb, #fffac8);
      border:1px solid #fff69d;
      box-shadow:
      inset 0 2px 0 #fffeef,
      0 4px 0 #fff69d,
      0 6px 5px rgba(0,0,0,0.25); 
    }
    @media (prefers-color-scheme:dark) {
      ban {
        background:linear-gradient(#474747, #2f2f2f);
        border-color:#1c1c1c;
        box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.14),
        0 4px 0 #1d1d1d,
        0 6px 5px rgba(0,0,0,0.55);
      }
    }

And this is what I had to add to the post Markdown to get the PROCRASTINATION tiles (there might be a more efficient way!):

<ban>P</ban> <ban>R</ban> <ban>O</ban> <ban>C</ban> <ban>R</ban> <ban>A</ban> <ban>S</ban> <ban>T</ban> <ban>I</ban> <ban>N</ban> <ban>A</ban> <ban>T</ban> <ban>I</ban> <ban>O</ban> <ban>N</ban>

Quack

#meta