website

website/src/styles/home/hero.css (2769B)

---

/* The landing section: the name (which decodes itself on load), a lede and the
   colour key, in front of a wall of code */

/* The section fills the screen, and the wall fills it edge to edge between the top
   line and the modeline (src/scripts/home/wall.js). */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
}

.hero-wall {
  position: absolute;
  top: var(--top-h);
  left: 0;
  display: block;
  width: 100%;
  height: calc(100% - var(--top-h) - var(--frame-h));
  /* the fade behind the name, which wall.js sets as the mask image */
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* The name hangs from the upper part of the screen in the left column, and the
   right one is left to the wall. */
.hero-in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 32px clamp(32px, 4vw, 64px);
  align-items: start;
  padding: calc(var(--top-h) + clamp(32px, 12vh, 136px)) var(--gutter) calc(var(--frame-h) + 32px);
  max-width: 1440px;
  margin: 0 auto;
}

.hero-name {
  margin: 0 0 20px -0.04em;
  font: 400 clamp(46px, 6.4vw, 96px)/0.94 var(--serif);
  letter-spacing: -0.015em;
}

/* On load the name decodes itself (src/scripts/home/decode.js): each letter starts as a byte
   with a few bits flipped and changes one bit at a time until it is right. */

.boot .hero-name {
  visibility: hidden;
  animation: boot-failsafe 0s 2.5s forwards;
}

@keyframes boot-failsafe {
  to { visibility: visible; }
}

/* each letter sits in a box as wide as the final letter, and whatever
   character it shows is centred in it */
.hero-name.is-cells .bc {
  display: inline-block;
  text-align: center;
}

.hero-name.is-cells .bc-ch {
  display: inline-block;
  margin-inline: -1em;
  white-space: pre;
}

.bc-word {
  white-space: nowrap;
}

/* a wrong byte shows as a raw character in the mono face */
.bc.is-wrong {
  color: var(--dim);
}

.bc.is-wrong .bc-ch {
  font-family: var(--mono);
  font-size: 0.78em;
  letter-spacing: 0;
}

.hero-lede {
  max-width: 30em;
  margin: 0 0 24px;
  font: 400 19px/1.55 var(--serif);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 2.5ch;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--dim);
}

.legend li::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 1ch;
  background: var(--c, var(--fg));
  vertical-align: 0.06em;
}

@media (max-width: 1100px) {
  .hero-in {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-id {
    max-width: 640px;
  }
}

@media (max-width: 640px) {
  .hero-in {
    padding-top: calc(var(--top-h) + 28px);
  }

  .hero-lede {
    font-size: 17px;
  }
}