Day 20: Code block 💻

A code block UI component represents a block of code that is formatted neatly.

The example component is visible below.

  
    .new-years-eve:before {
      content: "2️⃣0️⃣2️⃣1️⃣";
    }

    .new-years-eve:after {
      content: "2️⃣0️⃣2️⃣2️⃣";
    }
  

A few notes about this code block component:

• CSS Variables are used for colors,
• the filter: invert(1) declaration is used to achieve the dark mode.

The code:

<pre class="advent-code">
  <code>
    .new-years-eve:before {
      content: "2️⃣0️⃣2️⃣1️⃣";
    }

    .new-years-eve:after {
      content: "2️⃣0️⃣2️⃣2️⃣";
    }
  </code>
</pre>

.advent-code {
  --color-xmas-alpha: #f7efef;
  --color-xmas-beta: #d72621;
  --color-xmas-gamma: #639565;

  background-color: var(--color-xmas-alpha);
  color: var(--color-xmas-beta);
  border-left: .5em solid var(--color-xmas-gamma);

  filter: invert(1);
}