stylus support was dropped
This commit is contained in:
parent
f4c8f996ae
commit
6350d12039
|
|
@ -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, AMOUNTY = 50, HEIGHT = 75
|
||||
const SEPARATION = 150,
|
||||
AMOUNTX = 50,
|
||||
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)
|
||||
camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000000)
|
||||
scene = new Scene()
|
||||
document.body.appendChild(container)
|
||||
camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000000)
|
||||
scene = new Scene()
|
||||
|
||||
const numParticles = AMOUNTX * AMOUNTY
|
||||
const positions = new Float32Array(numParticles * 3)
|
||||
const scales = new Float32Array(numParticles)
|
||||
const numParticles = AMOUNTX * AMOUNTY
|
||||
const positions = new Float32Array(numParticles * 3)
|
||||
const scales = new Float32Array(numParticles)
|
||||
|
||||
let i = 0, j = 0
|
||||
for (let ix = 0; ix < AMOUNTX; ix++) {
|
||||
for (let iy = 0; iy < AMOUNTY; iy++) {
|
||||
positions[i] = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2) // x
|
||||
positions[i + 1] = 0 // y
|
||||
positions[i + 2] = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2) // z
|
||||
scales[j] = 1
|
||||
i += 3
|
||||
j++
|
||||
}
|
||||
let i = 0,
|
||||
j = 0
|
||||
for (let ix = 0; ix < AMOUNTX; ix++) {
|
||||
for (let iy = 0; iy < AMOUNTY; iy++) {
|
||||
positions[i] = ix * SEPARATION - (AMOUNTX * SEPARATION) / 2 // x
|
||||
positions[i + 1] = 0 // y
|
||||
positions[i + 2] = iy * SEPARATION - (AMOUNTY * SEPARATION) / 2 // z
|
||||
scales[j] = 1
|
||||
i += 3
|
||||
j++
|
||||
}
|
||||
}
|
||||
|
||||
const geometry = new BufferGeometry()
|
||||
geometry.setAttribute('position', new BufferAttribute(positions, 3))
|
||||
geometry.setAttribute('scale', new BufferAttribute(scales, 1))
|
||||
const geometry = new BufferGeometry()
|
||||
geometry.setAttribute('position', new BufferAttribute(positions, 3))
|
||||
geometry.setAttribute('scale', new BufferAttribute(scales, 1))
|
||||
|
||||
const material = new ShaderMaterial({
|
||||
uniforms: {
|
||||
color: { value: new Color(0xffffff) },
|
||||
},
|
||||
vertexShader: document.getElementById('vertexshader')?.textContent || '',
|
||||
fragmentShader: document.getElementById('fragmentshader')?.textContent || ''
|
||||
})
|
||||
const material = new ShaderMaterial({
|
||||
uniforms: {
|
||||
color: { value: new Color(0xffffff) },
|
||||
},
|
||||
vertexShader: document.getElementById('vertexshader')?.textContent || '',
|
||||
fragmentShader: document.getElementById('fragmentshader')?.textContent || '',
|
||||
})
|
||||
|
||||
particles = new Points(geometry, material)
|
||||
scene.add(particles)
|
||||
particles = new Points(geometry, material)
|
||||
scene.add(particles)
|
||||
|
||||
renderer = new WebGLRenderer({ antialias: true })
|
||||
renderer.setPixelRatio(window.devicePixelRatio)
|
||||
renderer.setSize(window.innerWidth, window.innerHeight)
|
||||
renderer = new WebGLRenderer({ antialias: true })
|
||||
renderer.setPixelRatio(window.devicePixelRatio)
|
||||
renderer.setSize(window.innerWidth, window.innerHeight)
|
||||
|
||||
container.appendChild(renderer.domElement)
|
||||
document.addEventListener('mousemove', onDocumentMouseMove, false)
|
||||
document.addEventListener('touchstart', onDocumentTouchStart, false)
|
||||
document.addEventListener('touchmove', onDocumentTouchMove, false)
|
||||
container.appendChild(renderer.domElement)
|
||||
document.addEventListener('mousemove', onDocumentMouseMove, false)
|
||||
document.addEventListener('touchstart', onDocumentTouchStart, false)
|
||||
document.addEventListener('touchmove', onDocumentTouchMove, false)
|
||||
|
||||
window.addEventListener('resize', onWindowResize, false)
|
||||
window.addEventListener('resize', onWindowResize, false)
|
||||
}
|
||||
|
||||
function onWindowResize() {
|
||||
windowHalfX = window.innerWidth / 2
|
||||
windowHalfY = window.innerHeight / 2
|
||||
camera.aspect = window.innerWidth / window.innerHeight
|
||||
camera.updateProjectionMatrix()
|
||||
renderer.setSize(window.innerWidth, window.innerHeight)
|
||||
windowHalfX = window.innerWidth / 2
|
||||
windowHalfY = window.innerHeight / 2
|
||||
camera.aspect = window.innerWidth / window.innerHeight
|
||||
camera.updateProjectionMatrix()
|
||||
renderer.setSize(window.innerWidth, window.innerHeight)
|
||||
}
|
||||
|
||||
function setMouse(x: number, y: number) {
|
||||
mouseX = (x - windowHalfX) / windowHalfX
|
||||
mouseY = -(y - windowHalfY) / windowHalfY
|
||||
mouseX = (x - windowHalfX) / windowHalfX
|
||||
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) {
|
||||
event.preventDefault()
|
||||
setMouse(event.touches[0].pageX, event.touches[0].pageY)
|
||||
}
|
||||
if (event.touches.length === 1) {
|
||||
event.preventDefault()
|
||||
setMouse(event.touches[0].pageX, event.touches[0].pageY)
|
||||
}
|
||||
}
|
||||
|
||||
function onDocumentTouchMove(event: TouchEvent) {
|
||||
if (event.touches.length === 1) {
|
||||
event.preventDefault()
|
||||
setMouse(event.touches[0].pageX, event.touches[0].pageY)
|
||||
}
|
||||
if (event.touches.length === 1) {
|
||||
event.preventDefault()
|
||||
setMouse(event.touches[0].pageX, event.touches[0].pageY)
|
||||
}
|
||||
}
|
||||
|
||||
function animate() {
|
||||
requestAnimationFrame(animate)
|
||||
render()
|
||||
requestAnimationFrame(animate)
|
||||
render()
|
||||
}
|
||||
|
||||
function render() {
|
||||
// Noence from 0.0 to 1.0
|
||||
const noence = (Math.sin(count / 4) + 1) / 2
|
||||
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++
|
||||
}
|
||||
}
|
||||
// Noence from 0.0 to 1.0
|
||||
const noence = (Math.sin(count / 4) + 1) / 2
|
||||
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
|
||||
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
|
||||
|
||||
positions[i + 1] = dx * HEIGHT + dy * HEIGHT
|
||||
// @ts-ignore
|
||||
scales[j] = (dx + 1) * 8 + (dy + 1) * 8
|
||||
i += 3
|
||||
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(() => {
|
||||
init()
|
||||
animate()
|
||||
}, [])
|
||||
|
||||
return <div id='bg'>
|
||||
{children}
|
||||
</div>
|
||||
return <div id="bg">{children}</div>
|
||||
}
|
||||
|
||||
export default Background
|
||||
export default Background
|
||||
|
|
|
|||
|
|
@ -1,11 +1,7 @@
|
|||
import React from 'react'
|
||||
|
||||
import '../styles/content.styl'
|
||||
|
||||
const Content: React.FC = ({ children }) => {
|
||||
return <div className='container'>
|
||||
{children}
|
||||
</div>
|
||||
return <div className="container">{children}</div>
|
||||
}
|
||||
|
||||
export default Content
|
||||
export default Content
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
const withStylus = require('@zeit/next-stylus')
|
||||
const withCss = require('@zeit/next-css')
|
||||
|
||||
module.exports = withCss(withStylus({}))
|
||||
25
package.json
25
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",
|
||||
"next": "^10.0.4",
|
||||
"react": "^16.12.0",
|
||||
"react-dom": "^16.12.0",
|
||||
"tachyons": "^4.11.1",
|
||||
"three": "^0.112.1"
|
||||
"formidable": "^1",
|
||||
"next": "^10",
|
||||
"react": "^17",
|
||||
"react-dom": "^17",
|
||||
"tachyons": "^4",
|
||||
"three": "^0.116"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/formidable": "^1.0.31",
|
||||
"@types/node": "^13.1.6",
|
||||
"@types/react": "^16.9.17",
|
||||
"@types/react-dom": "^16.9.4",
|
||||
"@zeit/next-css": "^1.0.1",
|
||||
"@zeit/next-stylus": "^1.0.1",
|
||||
"stylus": "^0.54.7",
|
||||
"@types/formidable": "^1",
|
||||
"@types/node": "^14",
|
||||
"@types/react": "^17",
|
||||
"@types/react-dom": "^17",
|
||||
"typescript": "^4"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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'
|
||||
|
||||
|
|
|
|||
|
|
@ -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="/">
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
#bg
|
||||
position: fixed
|
||||
top: 0
|
||||
left: 0
|
||||
z-index: -1
|
||||
|
|
@ -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
|
||||
|
||||
|
||||
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
form>div.body
|
||||
border: 2px solid
|
||||
padding: .5em
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
.sets
|
||||
|
||||
iframe
|
||||
border: 0
|
||||
|
||||
ul
|
||||
list-style: none
|
||||
padding: 0
|
||||
margin: 0
|
||||
|
||||
li
|
||||
margin-top: 2em
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
$mobile-width = 40rem
|
||||
|
||||
underline()
|
||||
transition: all linear 100ms
|
||||
|
||||
&:hover, &:focus
|
||||
box-shadow: 0 4px 0px 0px
|
||||
Loading…
Reference in New Issue