diff --git a/src/app/index.tsx b/src/app/index.tsx index 3121efd..08bf033 100644 --- a/src/app/index.tsx +++ b/src/app/index.tsx @@ -7,8 +7,8 @@ import { JSXInternal } from 'preact/src/jsx'; import pkg from '../../package.json'; import { Capture } from './Capture'; import { Cutout } from './Cutout'; -import Gl, { Shader, Texture } from './gl'; import { Range } from './Range'; +import Gl, { Shader, Texture } from './gl'; import { hexToRgb, rgbToLuma, sortNumeric, useCheckbox } from './utils'; const inputCanvas = document.createElement('canvas'); const inputCtx = inputCanvas.getContext('2d') as CanvasRenderingContext2D; @@ -211,52 +211,54 @@ function App() { <>

sketch-to-lineart

- - +
+ + -
+
- - - {!auto && ( - <> - - - - - - )} + + + {!auto && ( + <> + + + + + + )} -
+
- - - {useThreshold && ( - <> - - - - )} + + + {useThreshold && ( + <> + + + + )} -
+
- - + + -
+
+
diff --git a/src/style.css b/src/style.css index f431339..5bc9ea1 100644 --- a/src/style.css +++ b/src/style.css @@ -39,6 +39,18 @@ main { min-height: 100%; } +.controls { + position: sticky; + top: 0; + background-color: var(--white); + grid-column: -1 / 1; + display: grid; + grid-template-columns: 0fr 1fr; + grid-gap: 0.5rem 1rem; + width: 100%; + min-height: 100%; +} + hr { grid-column: span 2; width: 100%;