diff --git a/dist/think-editor.css b/dist/think-editor.css index 2b536cd..26e9476 100644 --- a/dist/think-editor.css +++ b/dist/think-editor.css @@ -1,5 +1,6 @@ :root { --spacing: 1em; + --quarter-spacing: calc(0.25 * var(--spacing)); --half-spacing: calc(0.5 * var(--spacing)); --double-spacing: calc(2 * var(--spacing)); @@ -7,11 +8,19 @@ --editor-size: 50%; - --background: white; + --background: hsl(70,100%,95%); --color: black; --button-bg: #ddd; } +@media (prefers-color-scheme: dark) { + body { + --background: hsl(70,100%,8%); + --color: white; + --button-bg: #333; + } +} + * { box-sizing: border-box; } @@ -38,13 +47,6 @@ body { } -@media (prefers-color-scheme: dark) { - body { - --background: black; - --color: white; - --button-bg: #333; - } -} header { & #think-controls { @@ -97,7 +99,7 @@ button[value="cancel"] { --button-background: color-mix(in oklab, var(--button-bg), var(--background) 50%); } -input ~ button { +input:not([type="hidden"]) ~ button { border-radius: 0 var(--radius) var(--radius) 0; border-left: none; border-left: none; @@ -107,6 +109,12 @@ input { border: thin solid currentColor; } + +.field { + display: flex; + gap: var(--quarter-spacing); +} + .think-editor { display: grid; gap: var(--spacing); @@ -118,6 +126,12 @@ input { "log editor preview" 1fr / var(--col-1-width) var(--editor-size) var(--preview-size) ; + + + & > * { + border: thin solid currentColor; + padding: var(--quarter-spacing); + } &:has(#main-nav[open], #log[open]) { --col-1-width: 20em; @@ -137,7 +151,7 @@ input { } & summary { - background: #eee; + background: color-mix(in oklab, var(--background), var(--color) 10%); } & > #main-nav > nav { @@ -206,6 +220,7 @@ input { display: flex; gap: var(--spacing); justify-content: space-between; + border-bottom: thin solid currentColor; & > details { text-align: right; @@ -218,7 +233,7 @@ input { margin: var(--half-spacing) 0; } } - background: white; + background: var(--background); z-index: 1; } @@ -234,6 +249,8 @@ input { flex-direction: column; grid-area: preview; + background: white; + &[open] { flex-grow: 1; flex-shrink: 1; @@ -290,6 +307,11 @@ dialog p:last-child { body { grid-template-columns: calc(100svw - var(--spacing)); } + + #editor-size { + display: none; + } + .think-editor { overflow: visible; grid-template: @@ -299,6 +321,8 @@ dialog p:last-child { "preview" ; + padding-left: var(--double-spacing); + & > * ~ * { border-top: medium solid #888; margin-top: var(--spacing); @@ -313,12 +337,13 @@ dialog p:last-child { } & #file-tree { - max-height: 7em; + max-height: 30svh; } } & #editor { overflow: auto; + max-height: revert; & #code-editor { max-width: none; } diff --git a/src/App.elm b/src/App.elm index f2a9d2e..ddeb2cd 100644 --- a/src/App.elm +++ b/src/App.elm @@ -378,7 +378,7 @@ view model = header model = H.header [] - [ link "/" "thinks" + [ link "/" "← thinks" , H.h1 [] [ H.text model.slug ] @@ -392,24 +392,29 @@ header model = , link "rename" "Rename" , link "delete" "Delete" , link ("/new/"++model.slug) "Remix" - , H.label - [ HA.for "editor-size-input" - ] - [ H.text "File editor size" ] - , H.input - [ HA.type_ "range" - , HA.id "editor-size-input" - , HA.min "0" - , HA.max "1" - , HA.step "0.05" - , HA.value <| String.fromFloat model.editor_size - , HE.on "input" (JD.at ["target", "valueAsNumber"] JD.float |> JD.map SetEditorSize) - , HA.list "size-values" - ] - [] - , H.output - [ HA.for "editor-size-input" ] - [ H.text <| as_percentage model.editor_size ] + , H.span + [ HA.class "field" + , HA.id "editor-size" + ] + [ H.label + [ HA.for "editor-size-input" + ] + [ H.text "File editor size" ] + , H.input + [ HA.type_ "range" + , HA.id "editor-size-input" + , HA.min "0" + , HA.max "1" + , HA.step "0.05" + , HA.value <| String.fromFloat model.editor_size + , HE.on "input" (JD.at ["target", "valueAsNumber"] JD.float |> JD.map SetEditorSize) + , HA.list "size-values" + ] + [] + , H.output + [ HA.for "editor-size-input" ] + [ H.text <| as_percentage model.editor_size ] + ] , H.datalist [ HA.id "size-values" ] [ H.option [ HA.value "0.5" ] [] ]