66 lines
3.8 KiB
Plaintext
66 lines
3.8 KiB
Plaintext
(box :layout 'column
|
|
:margin-left 1 :margin-top 1 :padding '(1 2 1 2) :bgcolor "linen"
|
|
(box :content "Ebox Responsive Layout\nDrag the preview window: sections stretch to the current viewport, cards reflow, and text wraps without changing the window layout."
|
|
:padding '(1 (18)) :border "#334155" :text-align 'center
|
|
:color "#000" :bgcolor "ghost white")
|
|
(box :height 1)
|
|
|
|
(box :content "No explicit viewport width here\nThis page mostly omits :width. The Playground binds the current preview width while rendering, so auto width behaves like a responsive container."
|
|
:padding '(0 (16)) :border "#0F766E"
|
|
:bgcolor "#F0FDFA" :color "#134E4A" :wrap-mode 'word)
|
|
(box :height 1)
|
|
|
|
(box :content "Adaptive toolbar\nButtons below keep stable sizes. The row packs as many as fit and then wraps."
|
|
:padding '(0 (16)) :border "#EA580C" :border-bottom-p nil
|
|
:bgcolor "#FFF7ED" :color "#431407" :wrap-mode 'word)
|
|
(box :layout 'flex :flex-flow '(row wrap) :column-gap '(8) :row-gap 1
|
|
:padding '(1 (8)) :border "#FDBA74" :bgcolor "#FFFBF5"
|
|
(box :content "Render" :width '(96) :padding '(0 (8))
|
|
:border "#EA580C" :bgcolor "#FED7AA" :color "#111827"
|
|
:text-align 'center)
|
|
(box :content "Save" :width '(88) :padding '(0 (8))
|
|
:border "#D97706" :bgcolor "#FEF3C7" :color "#111827"
|
|
:text-align 'center)
|
|
(box :content "Format" :width '(96) :padding '(0 (8))
|
|
:border "#16A34A" :bgcolor "#DCFCE7" :color "#14532D"
|
|
:text-align 'center)
|
|
(box :content "Sample" :width '(104) :padding '(0 (8))
|
|
:border "#0284C7" :bgcolor "#E0F2FE" :color "#0C4A6E"
|
|
:text-align 'center)
|
|
(box :content "Write" :width '(88) :padding '(0 (8))
|
|
:border "#9333EA" :bgcolor "#F3E8FF" :color "#3B0764"
|
|
:text-align 'center))
|
|
(box :height 1)
|
|
|
|
(box :content "Responsive cards\nEach card starts from a flex-basis, grows when space is available, and wraps to new rows when the preview becomes narrow."
|
|
:padding '(0 (16)) :border "#2563EB" :border-bottom-p nil
|
|
:bgcolor "#EFF6FF" :color "#1E3A8A" :wrap-mode 'word)
|
|
(box :layout 'flex :flex-flow '(row wrap) :column-gap '(12) :row-gap 1
|
|
:padding '(1 (8)) :border "#93C5FD" :bgcolor "#F8FBFF"
|
|
:justify-content 'center
|
|
(item :flex '(1 1 (210))
|
|
(box :content "Overview\nThe row uses the current preview width automatically."
|
|
:min-width '(180) :max-width '(280)
|
|
:padding '(0 (10)) ;; :border "#2563EB"
|
|
:bgcolor "#DBEAFE" :color "#111827" :wrap-mode 'word))
|
|
(item :flex '(1 1 (210))
|
|
(box :content "Editor\nDrag slowly or quickly; resize rendering is debounced."
|
|
:min-width '(180) :max-width '(300)
|
|
:padding '(0 (10)) ;; :border "#4F46E5"
|
|
:bgcolor "#E0E7FF" :color "#111827" :wrap-mode 'word))
|
|
(item :flex '(1 1 (210))
|
|
(box :content "Preview\nThe preview buffer rerenders after the viewport settles."
|
|
:min-width '(180) :max-width '(320)
|
|
:padding '(0 (10)) ;; :border "#7C3AED"
|
|
:bgcolor "#EDE9FE" :color "#111827" :wrap-mode 'word))
|
|
(item :flex '(1 1 (210))
|
|
(box :content "Flow\nCards keep readable widths instead of overflowing."
|
|
:min-width '(180) :max-width '(280)
|
|
:padding '(0 (10)) ;; :border "#0891B2"
|
|
:bgcolor "#CFFAFE" :color "#164E63" :wrap-mode 'word)))
|
|
(box :height 1)
|
|
|
|
(box :content "What to watch\nNarrow preview: cards stack and text wraps. Wide preview: cards share a row and expand up to max-width. The source/preview split is preserved."
|
|
:padding '(0 (16)) :border "#475569"
|
|
:bgcolor "#F8FAFC" :color "#0F172A" :wrap-mode 'word))
|