stylus support was dropped

components/background.tsx

@@ -1,9 +1,19 @@
 import React, { useEffect } from 'react'
-import { PerspectiveCamera, Scene, BufferGeometry, BufferAttribute, ShaderMaterial, Color, Points, WebGLRenderer } from 'three'
+import {
+  PerspectiveCamera,
+  Scene,
+  BufferGeometry,
+  BufferAttribute,
+  ShaderMaterial,
+  Color,
+  Points,
+  WebGLRenderer,
+} from 'three'
 
-import '../styles/backgorund.styl'
+const SEPARATION = 150,
-
+  AMOUNTX = 50,
-const SEPARATION = 150, AMOUNTX = 50, AMOUNTY = 50, HEIGHT = 75
+  AMOUNTY = 50,
+  HEIGHT = 75
 
 let container: HTMLElement | null
 let camera: PerspectiveCamera
@@ -19,143 +29,139 @@ let windowHalfX = window.innerWidth / 2
 let windowHalfY = window.innerHeight / 2
 
 function init() {
-    container = window.document.getElementById('bg') || document.createElement('div')
+  container = window.document.getElementById('bg') || document.createElement('div')
 
-    document.body.appendChild(container)
+  document.body.appendChild(container)
-    camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000000)
+  camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000000)
-    scene = new Scene()
+  scene = new Scene()
 
-    const numParticles = AMOUNTX * AMOUNTY
+  const numParticles = AMOUNTX * AMOUNTY
-    const positions = new Float32Array(numParticles * 3)
+  const positions = new Float32Array(numParticles * 3)
-    const scales = new Float32Array(numParticles)
+  const scales = new Float32Array(numParticles)
 
-    let i = 0, j = 0
+  let i = 0,
-    for (let ix = 0; ix < AMOUNTX; ix++) {
+    j = 0
-        for (let iy = 0; iy < AMOUNTY; iy++) {
+  for (let ix = 0; ix < AMOUNTX; ix++) {
-            positions[i] = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2) // x
+    for (let iy = 0; iy < AMOUNTY; iy++) {
-            positions[i + 1] = 0 // y
+      positions[i] = ix * SEPARATION - (AMOUNTX * SEPARATION) / 2 // x
-            positions[i + 2] = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2) // z
+      positions[i + 1] = 0 // y
-            scales[j] = 1
+      positions[i + 2] = iy * SEPARATION - (AMOUNTY * SEPARATION) / 2 // z
-            i += 3
+      scales[j] = 1
-            j++
+      i += 3
-        }
+      j++
     }
+  }
 
-    const geometry = new BufferGeometry()
+  const geometry = new BufferGeometry()
-    geometry.setAttribute('position', new BufferAttribute(positions, 3))
+  geometry.setAttribute('position', new BufferAttribute(positions, 3))
-    geometry.setAttribute('scale', new BufferAttribute(scales, 1))
+  geometry.setAttribute('scale', new BufferAttribute(scales, 1))
 
-    const material = new ShaderMaterial({
+  const material = new ShaderMaterial({
-        uniforms: {
+    uniforms: {
-            color: { value: new Color(0xffffff) },
+      color: { value: new Color(0xffffff) },
-        },
+    },
-        vertexShader: document.getElementById('vertexshader')?.textContent || '',
+    vertexShader: document.getElementById('vertexshader')?.textContent || '',
-        fragmentShader: document.getElementById('fragmentshader')?.textContent || ''
+    fragmentShader: document.getElementById('fragmentshader')?.textContent || '',
-    })
+  })
 
-    particles = new Points(geometry, material)
+  particles = new Points(geometry, material)
-    scene.add(particles)
+  scene.add(particles)
 
-    renderer = new WebGLRenderer({ antialias: true })
+  renderer = new WebGLRenderer({ antialias: true })
-    renderer.setPixelRatio(window.devicePixelRatio)
+  renderer.setPixelRatio(window.devicePixelRatio)
-    renderer.setSize(window.innerWidth, window.innerHeight)
+  renderer.setSize(window.innerWidth, window.innerHeight)
 
-    container.appendChild(renderer.domElement)
+  container.appendChild(renderer.domElement)
-    document.addEventListener('mousemove', onDocumentMouseMove, false)
+  document.addEventListener('mousemove', onDocumentMouseMove, false)
-    document.addEventListener('touchstart', onDocumentTouchStart, false)
+  document.addEventListener('touchstart', onDocumentTouchStart, false)
-    document.addEventListener('touchmove', onDocumentTouchMove, false)
+  document.addEventListener('touchmove', onDocumentTouchMove, false)
 
-    window.addEventListener('resize', onWindowResize, false)
+  window.addEventListener('resize', onWindowResize, false)
 }
 
 function onWindowResize() {
-    windowHalfX = window.innerWidth / 2
+  windowHalfX = window.innerWidth / 2
-    windowHalfY = window.innerHeight / 2
+  windowHalfY = window.innerHeight / 2
-    camera.aspect = window.innerWidth / window.innerHeight
+  camera.aspect = window.innerWidth / window.innerHeight
-    camera.updateProjectionMatrix()
+  camera.updateProjectionMatrix()
-    renderer.setSize(window.innerWidth, window.innerHeight)
+  renderer.setSize(window.innerWidth, window.innerHeight)
 }
 
 function setMouse(x: number, y: number) {
-    mouseX = (x - windowHalfX) / windowHalfX
+  mouseX = (x - windowHalfX) / windowHalfX
-    mouseY = -(y - windowHalfY) / windowHalfY
+  mouseY = -(y - windowHalfY) / windowHalfY
 }
 
-
 function onDocumentMouseMove(event: MouseEvent) {
-    setMouse(event.clientX, event.clientY)
+  setMouse(event.clientX, event.clientY)
 }
 
 function onDocumentTouchStart(event: TouchEvent) {
-    if (event.touches.length === 1) {
+  if (event.touches.length === 1) {
-        event.preventDefault()
+    event.preventDefault()
-        setMouse(event.touches[0].pageX, event.touches[0].pageY)
+    setMouse(event.touches[0].pageX, event.touches[0].pageY)
-    }
+  }
 }
 
 function onDocumentTouchMove(event: TouchEvent) {
-    if (event.touches.length === 1) {
+  if (event.touches.length === 1) {
-        event.preventDefault()
+    event.preventDefault()
-        setMouse(event.touches[0].pageX, event.touches[0].pageY)
+    setMouse(event.touches[0].pageX, event.touches[0].pageY)
-    }
+  }
 }
 
 function animate() {
-    requestAnimationFrame(animate)
+  requestAnimationFrame(animate)
-    render()
+  render()
 }
 
 function render() {
-    // Noence from 0.0 to 1.0
+  // Noence from 0.0 to 1.0
-    const noence = (Math.sin(count / 4) + 1) / 2
+  const noence = (Math.sin(count / 4) + 1) / 2
-    const noence_inv = 1 - noence
+  const noence_inv = 1 - noence
-
-    camera.position.x = -mouseX * 500
-    camera.position.y = 1000 - mouseY * 500
-    camera.position.z = 1000 - mouseY * 250
-    camera.lookAt(scene.position)
-
-    if (particles.geometry instanceof BufferGeometry) {
-        const positions = particles.geometry.attributes.position.array
-        const scales = particles.geometry.attributes.scale.array
-        let i = 0, j = 0
-        for (let ix = 0; ix < AMOUNTX; ix++) {
-            for (let iy = 0; iy < AMOUNTY; iy++) {
-                const dx = Math.sin((ix + count) * 0.3)
-                const dy = Math.sin((iy + count) * 0.5)
-                // @ts-ignore
-                positions[i + 1] = (dx * HEIGHT) + (dy * HEIGHT)
-                // @ts-ignore
-                scales[j] = (dx + 1) * 8 + (dy + 1) * 8
-                i += 3
-                j++
-            }
-        }
 
+  camera.position.x = -mouseX * 500
+  camera.position.y = 1000 - mouseY * 500
+  camera.position.z = 1000 - mouseY * 250
+  camera.lookAt(scene.position)
 
+  if (particles.geometry instanceof BufferGeometry) {
+    const positions = particles.geometry.attributes.position.array
+    const scales = particles.geometry.attributes.scale.array
+    let i = 0,
+      j = 0
+    for (let ix = 0; ix < AMOUNTX; ix++) {
+      for (let iy = 0; iy < AMOUNTY; iy++) {
+        const dx = Math.sin((ix + count) * 0.3)
+        const dy = Math.sin((iy + count) * 0.5)
         // @ts-ignore
-        particles.material.uniforms.color.value.setRGB(1 - 0.5 * noence_inv, 0.2 + 0.8 * noence, 1)
+        positions[i + 1] = dx * HEIGHT + dy * HEIGHT
-        if (particles.geometry.attributes.position instanceof BufferAttribute)
+        // @ts-ignore
-            particles.geometry.attributes.position.needsUpdate = true
+        scales[j] = (dx + 1) * 8 + (dy + 1) * 8
-        if (particles.geometry.attributes.scale instanceof BufferAttribute)
+        i += 3
-            particles.geometry.attributes.scale.needsUpdate = true
+        j++
-
+      }
     }
-    renderer.render(scene, camera)
 
-    count += 0.05 + (0.01 * noence)
+    // @ts-ignore
+    particles.material.uniforms.color.value.setRGB(1 - 0.5 * noence_inv, 0.2 + 0.8 * noence, 1)
+    if (particles.geometry.attributes.position instanceof BufferAttribute)
+      particles.geometry.attributes.position.needsUpdate = true
+    if (particles.geometry.attributes.scale instanceof BufferAttribute)
+      particles.geometry.attributes.scale.needsUpdate = true
+  }
+  renderer.render(scene, camera)
+
+  count += 0.05 + 0.01 * noence
 }
 
 const Background: React.FC = ({ children }) => {
+  useEffect(() => {
+    init()
+    animate()
+  }, [])
 
-    useEffect(() => {
+  return <div id="bg">{children}</div>
-        init()
-        animate()
-    }, [])
-
-    return <div id='bg'>
-        {children}
-    </div>
 }
 
-export default Background
+export default Background

components/content.tsx

@@ -1,11 +1,7 @@
 import React from 'react'
 
-import '../styles/content.styl'
-
 const Content: React.FC = ({ children }) => {
-    return <div className='container'>
+  return <div className="container">{children}</div>
-        {children}
-    </div>
 }
 
-export default Content
+export default Content

next.config.js

@@ -1,4 +0,0 @@
-const withStylus = require('@zeit/next-stylus')
-const withCss = require('@zeit/next-css')
-
-module.exports = withCss(withStylus({}))

package.json

@@ -5,23 +5,20 @@
     "start": "next start -p 80"
   },
   "dependencies": {
-    "axios": "^0.19.1",
+    "axios": "^0.21",
     "formhero": "^0.0.7",
-    "formidable": "^1.2.1",
+    "formidable": "^1",
-    "next": "^10.0.4",
+    "next": "^10",
-    "react": "^16.12.0",
+    "react": "^17",
-    "react-dom": "^16.12.0",
+    "react-dom": "^17",
-    "tachyons": "^4.11.1",
+    "tachyons": "^4",
-    "three": "^0.112.1"
+    "three": "^0.116"
   },
   "devDependencies": {
-    "@types/formidable": "^1.0.31",
+    "@types/formidable": "^1",
-    "@types/node": "^13.1.6",
+    "@types/node": "^14",
-    "@types/react": "^16.9.17",
+    "@types/react": "^17",
-    "@types/react-dom": "^16.9.4",
+    "@types/react-dom": "^17",
-    "@zeit/next-css": "^1.0.1",
-    "@zeit/next-stylus": "^1.0.1",
-    "stylus": "^0.54.7",
     "typescript": "^4"
   }
 }

pages/_app.css

@@ -0,0 +1,218 @@
+#bg {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+.container {
+  z-index: 0;
+  position: relative;
+  height: 100vh;
+  overflow: auto;
+  padding: 5em 0 3em 0;
+  display: flex;
+}
+.container > * {
+  color: #fff;
+  max-width: 40em;
+  margin: 0 auto;
+  padding: 1em 1.5em;
+  width: 100%;
+  height: max-content;
+  background: rgba(0, 0, 0, 0.75);
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.867) 1em,
+    rgba(0, 0, 0, 0.867) calc(100% - 1em),
+    rgba(0, 0, 0, 0) 100%
+  );
+}
+.container > *.color {
+  background: #a21576;
+}
+.container > *.center {
+  margin: auto;
+  padding-bottom: 2em;
+}
+form > div.body {
+  border: 2px solid;
+  padding: 0.5em;
+}
+textarea {
+  resize: vertical;
+  max-height: 8em;
+  min-height: 2em;
+}
+input,
+textarea,
+label.file {
+  display: inline-block;
+  width: 100%;
+  padding: 0.25em 0;
+  margin: 0;
+  margin-bottom: 1em;
+  background: none;
+  outline: none;
+  border: none;
+  color: inherit;
+  border-bottom: 2px solid;
+  cursor: pointer;
+  transition: all linear 100ms;
+}
+input:hover,
+textarea:hover,
+label.file:hover,
+input:focus,
+textarea:focus,
+label.file:focus {
+  box-shadow: 0 4px 0px 0px;
+}
+input::placeholder,
+textarea::placeholder,
+label.file::placeholder {
+  color: #bbb;
+}
+input[type='submit'],
+textarea[type='submit'],
+label.file[type='submit'],
+input[type='button'],
+textarea[type='button'],
+label.file[type='button'],
+input.file,
+textarea.file,
+label.file.file {
+  padding: 0.5em 1em;
+  width: initial;
+  border: 2px solid;
+  margin-bottom: 0;
+  margin-top: 0.5em;
+}
+input[type='file'],
+textarea[type='file'],
+label.file[type='file'] {
+  display: none;
+}
+label > small {
+  font-weight: bold;
+}
+nav.main {
+  font-family: 'Space Mono', monospace;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 5;
+  width: 100vw;
+  padding: 1.5em;
+  background: #000;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000 50%);
+}
+nav.main #icon {
+  height: 2.5em;
+  width: 2.5em;
+  object-fit: contain;
+  z-index: 10;
+  cursor: pointer;
+  display: none;
+}
+nav.main .home {
+  color: #fff;
+  font-weight: bold;
+  font-size: 2em;
+  cursor: pointer;
+}
+nav.main .links > div {
+  color: #fff;
+  padding: 0.5em 0.75em;
+  font-weight: bold;
+  box-sizing: content-box;
+  cursor: pointer;
+  transition: all ease 100ms;
+}
+nav.main .links > div:hover {
+  box-shadow: 0 1em 0 -0.75em #fff;
+  box-sizing: content-box;
+  transform: translateY(0.25em);
+}
+nav.main .links:not(:hover) > .active {
+  box-shadow: 0 1em 0 -0.75em #fff;
+  box-sizing: content-box;
+  transform: translateY(0.25em);
+}
+nav.main .links > .home {
+  display: none;
+}
+@media (max-width: 40rem) {
+  nav.main #icon {
+    display: initial;
+  }
+  nav.main .links {
+    position: fixed;
+    display: none;
+    top: 0;
+    left: 0;
+    background: #000;
+    height: 100vh;
+    width: 100vw;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.25em;
+  }
+  nav.main .links.open {
+    display: flex;
+  }
+  nav.main .links .home {
+    display: initial;
+  }
+  nav.main .links > div {
+    margin: 0.5em 0;
+  }
+}
+.sets iframe {
+  border: 0;
+}
+.sets ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.sets ul li {
+  margin-top: 2em;
+}
+* {
+  font-smooth: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: auto;
+}
+html {
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  font-family: 'Space Mono', monospace;
+  background-color: #000;
+}
+.grecaptcha-badge {
+  visibility: hidden;
+}
+.grc {
+  font-size: 0.75em;
+  color: rgba(255, 255, 255, 0.867);
+  max-width: 35em;
+  padding: 0.5em;
+  border: 2px solid;
+  margin-top: 0.5em;
+}
+a {
+  color: inherit;
+  text-decoration: inherit;
+  margin-top: 0.5em;
+  display: inline-block;
+  border-bottom: 1px solid #fff;
+  font-weight: bold;
+  transition: all linear 100ms;
+}
+a:hover,
+a:focus {
+  box-shadow: 0 4px 0px 0px;
+}

pages/_app.tsx

@@ -4,7 +4,7 @@ import Head from 'next/head'
 import dynamic from 'next/dynamic'
 
 import 'tachyons/css/tachyons.min.css'
-import '../styles/app.styl'
+import './_app.css'
 import Menu from '../screens/menu'
 import Content from '../components/content'
 

screens/menu.tsx

@@ -2,8 +2,6 @@ import React, { useState, useCallback } from 'react'
 
 import Link from '../components/link'
 
-import '../styles/menu.styl'
-
 const HomeLink = () => (
   <div className="home">
     <Link href="/">

styles/app.styl

@@ -1,42 +0,0 @@
-@require './backgorund.styl'
-@require './content.styl'
-@require './form.styl'
-@require './inputs.styl'
-@require './menu.styl'
-@require './sets.styl'
-@require './utils.styl'
-
-*
-    font-smooth: auto
-    -webkit-font-smoothing: antialiased
-    -moz-osx-font-smoothing: auto
-
-html
-    margin: 0
-    padding: 0
-    overflow: hidden
-    // font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
-    // font-family: 'Nunito', sans-serif
-    font-family: 'Space Mono', monospace
-    background-color: #000000
-
-.grecaptcha-badge
-	visibility: hidden
-
-.grc
-    font-size: .75em
-    color: #fffd
-    max-width: 35em
-    padding: .5em
-    border: 2px solid
-    margin-top: .5em
-
-a
-    color: inherit;
-    text-decoration: inherit;
-    margin-top: .5em;
-    display: inline-block;
-    border-bottom: 1px solid white;
-    font-weight: bold;
-
-    underline()

styles/backgorund.styl

@@ -1,5 +0,0 @@
-#bg
-    position: fixed
-    top: 0
-    left: 0
-    z-index: -1

styles/content.styl

@@ -1,31 +0,0 @@
-$mt=5em
-$mb=3em
-
-.container
-    z-index: 0
-    position: relative
-    height: 100vh
-    overflow: auto
-    padding: $mt 0 $mb 0
-    display: flex
-
-    &>*
-        color: white
-        max-width: 40em
-        margin: 0 auto
-        padding: 1em 1.5em
-        width: 100%
-        height: max-content
-        background: hsla(0, 0%, 0%, 0.75)
-        background: linear-gradient(90deg, #0000 0%, #000d 1em, #000d calc(100% - 1em), #0000 100%)
-
-        &.color
-            // background: hsl(202, 68%, 25%)
-            background: hsl(319, 77%, 36%)
-
-        &.center
-            margin auto
-            padding-bottom: $mt - $mb
-            
-            
-        

styles/form.styl

@@ -1,3 +0,0 @@
-form>div.body
-    border: 2px solid
-    padding: .5em

styles/inputs.styl

@@ -1,39 +0,0 @@
-@require './utils.styl'
-
-textarea
-    resize: vertical
-    max-height: 8em
-    min-height: 2em
-
-input, textarea, label.file
-    display: inline-block
-    width: 100%
-    padding: .25em 0 
-    margin: 0
-    margin-bottom: 1em
-    background: none
-    outline: none
-    border: none
-    color: inherit
-    border-bottom: 2px solid
-    cursor: pointer
-    
-    underline()
-
-    &::placeholder
-        color: #bbb
-
-    &[type="submit"], &[type="button"], &.file
-        padding: .5em 1em
-        width: initial
-        border: 2px solid
-        margin-bottom: 0
-        margin-top: .5em
-    
-    &[type="file"]
-        display: none
-
-label
-    &>small 
-        // font-size: 1em
-        font-weight: bold

styles/menu.styl

@@ -1,79 +0,0 @@
-@require './utils.styl'
-
-$foregound=#ffffff
-
-menu-item-hover()
-    box-shadow: 0 1em 0 -.75em $foregound
-    box-sizing: content-box
-    transform: translateY(.25em)
-
-nav.main
-    font-family: 'Space Mono', monospace
-    position: fixed
-    top: 0
-    left: 0
-    z-index: 5
-    width: 100vw
-    padding: 1.5em
-    background: rgb(0,0,0)
-    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%)
-
-    #icon
-        height: 2.5em
-        width: 2.5em
-        object-fit: contain
-        z-index 10
-        cursor pointer
-        display: none
-
-    .home
-        color: $foregound
-        font-weight: bold
-        font-size: 2em
-        cursor pointer
-
-    .links
-        &>div
-            color: $foregound
-            padding: .5em 0.75em
-            font-weight: bold
-            box-sizing: content-box
-            cursor pointer
-            transition: all ease 100ms
-
-            &:hover
-                menu-item-hover()
-        
-        &:not(:hover)
-            &>.active
-                menu-item-hover()
-        
-        >.home
-            display: none
-
-@media (max-width: $mobile-width)
-    nav.main
-        #icon
-            display: initial
-            
-        .links
-            position: fixed
-            display: none
-            top: 0
-            left: 0
-            background: rgba(0, 0, 0, 1)
-            height: 100vh
-            width: 100vw
-            flex-direction: column
-            align-items: center
-            justify-content: center
-            font-size: 1.25em
-
-            &.open
-                display: flex
-
-            & .home
-                display: initial
-
-            &>div
-                margin: .5em 0

styles/sets.styl

@@ -1,12 +0,0 @@
-.sets
-    
-    iframe
-        border: 0
-    
-    ul
-        list-style: none
-        padding: 0
-        margin: 0
-
-        li
-            margin-top: 2em

styles/utils.styl

@@ -1,7 +0,0 @@
-$mobile-width = 40rem
-
-underline()
-    transition: all linear 100ms
-    
-    &:hover, &:focus
-        box-shadow: 0 4px 0px 0px