varjas.github.io/index.html at main · varjas/varjas.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html><html><head><title>Varjas</title><meta charset="UTF-8"><meta content="width=device-width, initial-scale=1.0" name="viewport"><meta content="default-src 'self' localhost; img-src 'self' localhost; style-src 'self' 'unsafe-inline' https://fonts.cdnfonts.com; font-src https://fonts.cdnfonts.com; script-src 'self' 'unsafe-inline' localhost gc.zgo.at/count.js; connect-src https://circuits.goatcounter.com/" http-equiv="Content-Security-Policy"><link rel="stylesheet" media=all href="/css/theme-W0HUrgY79JF-Kxk5jBtuoQ==.css" />
    <link href="https://fonts.cdnfonts.com/css/montserrat" rel="stylesheet"><link href="https://fonts.cdnfonts.com/css/lt-binary-neue" rel="stylesheet"><script src="https://unpkg.com/powerglitch@latest/dist/powerglitch.min.js"></script><script data-goatcounter="https://circuits.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script></head><body><main><div id="landing-container"><div id="tile-symbol"><div id="tiles"><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div><div class="tile"></div></div><script>const tileContainer = document.getElementById("tiles")
const tileWidth = 5
tileContainer.style.gridTemplateColumns = `repeat(${tileWidth}, 1fr)`

const tiles = document.getElementsByClassName("tile")
const accentIndex = false ? Math.round(Math.random() * tiles.length) : null

const stepwiseBins = [0.333, 0.666, 1]
const stepwise = false

for (let i = 0; i < tiles.length; i++) {
  const element = tiles[i]

  if (i === accentIndex) {
    element.classList.add('bright')
    continue
  }

  const shade = Math.round(Math.random())

  if (shade === 1) {
    element.classList.add('shaded')
    if (stepwise === true) {
      const stepwiseIndex = Math.floor(Math.random() * stepwiseBins.length)
      element.style.opacity = stepwiseBins[stepwiseIndex]
    }
  }
}</script></div><section><a href="/circuits/" class="text">Circuits</a></section></div></main></body></html>