greenish background; borders around panels

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;
             }

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
+      , H.span
-        [ HA.for "editor-size-input"
+          [ HA.class "field"
-        ]
+          , HA.id "editor-size"
-        [ H.text "File editor size" ]
+          ]
-      , H.input
+          [ H.label
-        [ HA.type_ "range" 
+            [ HA.for "editor-size-input"
-        , HA.id "editor-size-input"
+            ]
-        , HA.min "0"
+            [ H.text "File editor size" ]
-        , HA.max "1"
+          , H.input
-        , HA.step "0.05"
+            [ HA.type_ "range" 
-        , HA.value <| String.fromFloat model.editor_size
+            , HA.id "editor-size-input"
-        , HE.on "input" (JD.at ["target", "valueAsNumber"] JD.float |> JD.map SetEditorSize)
+            , HA.min "0"
-        , HA.list "size-values"
+            , HA.max "1"
-        ]
+            , HA.step "0.05"
-        []
+            , HA.value <| String.fromFloat model.editor_size
-      , H.output
+            , HE.on "input" (JD.at ["target", "valueAsNumber"] JD.float |> JD.map SetEditorSize)
-        [ HA.for "editor-size-input" ]
+            , HA.list "size-values"
-        [ H.text <| as_percentage model.editor_size ]
+            ]
+            []
+          , 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" ] [] ]