climate trace

by Grzegorz Matyszewski

HTML

<h1>Total Emissions</h1>
<div class="grid-container">
  <div class="block" id="block-1">forestry</div>
  <div class="block" id="block-2">agriculture</div>
  <div class="block" id="block-3">electricity</div>
  <div class="block" id="block-4">buildings</div>
  <div class="block" id="block-5">transportation</div>
  <div class="block" id="block-6">manufacturing</div>
  <div class="block" id="block-7">industries</div>
  <div class="block" id="block-8">other</div>
</div>

SCSS

$cols: 60;
$rows: 20;
$gap: 4px;

body {
  background: #363636;
  color: white;
  padding: 10px;
  font-family: sans-serif;
}

h1 { font-weight: 300; }

.grid-container {
  display: grid;
  grid-template-columns: repeat($cols, 1fr);
  grid-template-rows: repeat($rows, 1fr);
  gap: $gap $gap;
  width: calc(100vw - 50px);
  height: 44vw;
  min-height: 480px
}

.block {
  padding: 10px 15px;
  font-size: 11px;
  text-transform: uppercase;
  border-radius: 4px;
  border-bottom: 7px solid;
  transition: background-color 0.2s;
  cursor: pointer;
}

@function get-column($c) {
  @return ceil($c * $cols) + 1;
}

@function get-row($r) {
  @return ceil($r * $rows) + 1;
}

$blocks: (
  (#4dcdb9, #40a596, 0, 0.5, 0, 1),
  (#2d7e94, #27afd4, 0.5, 0.75, 0, 0.5),
  (#a7674a, #eb8456, 0.75, 1, 0, 0.5),
  (#b59b78, #c3a681, 0.5, 0.625, 0.5, 1),
  (#4a5e93, #5571bf, 0.625, 1, 0.5, 0.625),
  (#bc493e, #d33828, 0.625, 0.8, 0.625, 1),
  (#592a42, #ab115f, 0.8, 1, 0.625, 0.85),
  (#4c4c4c, #818081, 0.8, 1, 0.85, 1),
);


@for $i from 1 to length($blocks) + 1 {
  $block: nth($blocks, $i);
  #block-#{$i} {
    background: nth($block, 1);
    border-color: nth($block, 2);
    grid-column-start: get-column(nth($block, 3));
    grid-column-end: get-column(nth($block, 4));
    grid-row-start: get-row(nth($block, 5));
    grid-row-end: get-row(nth($block, 6));
    
    &:hover { background: lighten(nth($block, 1), 4%); }
  }
}