58 lines
3.2 KiB
Plaintext
58 lines
3.2 KiB
Plaintext
(column :margin-left 1 :margin-top 1 :padding '(1 2 1 2) :bgcolor
|
|
"linen"
|
|
(box :padding '(1 (18)) :border "#334155" :text-align 'center
|
|
:color "#000" :bgcolor "ghost white"
|
|
"Ebox Responsive Layout\nDrag the preview window: sections stretch to the current viewport, cards reflow, and text wraps without changing the window layout.")
|
|
(box :height 1)
|
|
(box :padding '(0 (16)) :border "#0F766E" :bgcolor "#F0FDFA"
|
|
:color "#134E4A" :wrap-mode 'word
|
|
"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.")
|
|
(box :height 1)
|
|
(box :padding '(0 (16)) :border "#EA580C" :border-bottom 'none
|
|
:bgcolor "#FFF7ED" :color "#431407" :wrap-mode 'word
|
|
"Adaptive toolbar\nButtons below keep stable sizes. The row packs as many as fit and then wraps.")
|
|
(flex :flex-flow '(row wrap) :column-gap '(8) :row-gap 1
|
|
:padding '(1 (8)) :border "#FDBA74" :bgcolor "#FFFBF5"
|
|
(box :width '(96) :padding '(0 (8)) :border "#EA580C"
|
|
:bgcolor "#FED7AA" :color "#111827" :text-align
|
|
'center "Render")
|
|
(box :width '(88) :padding '(0 (8)) :border "#D97706"
|
|
:bgcolor "#FEF3C7" :color "#111827" :text-align
|
|
'center "Save")
|
|
(box :width '(96) :padding '(0 (8)) :border "#16A34A"
|
|
:bgcolor "#DCFCE7" :color "#14532D" :text-align
|
|
'center "Format")
|
|
(box :width '(104) :padding '(0 (8)) :border "#0284C7"
|
|
:bgcolor "#E0F2FE" :color "#0C4A6E" :text-align
|
|
'center "Sample")
|
|
(box :width '(88) :padding '(0 (8)) :border "#9333EA"
|
|
:bgcolor "#F3E8FF" :color "#3B0764" :text-align
|
|
'center "Write"))
|
|
(box :height 1)
|
|
(box :padding '(0 (16)) :border "#2563EB" :border-bottom 'none
|
|
:bgcolor "#EFF6FF" :color "#1E3A8A" :wrap-mode 'word
|
|
"Responsive cards\nEach card starts from a flex-basis, grows when space is available, and wraps to new rows when the preview becomes narrow.")
|
|
(flex :flex-flow '(row wrap) :column-gap '(12) :row-gap 1
|
|
:padding '(1 (8)) :border "#93C5FD" :bgcolor "#F8FBFF"
|
|
:justify-content 'center
|
|
(box :flex '(1 1 (210)) :min-width '(180) :max-width
|
|
'(280) :padding '(0 (10)) :bgcolor "#DBEAFE" :color
|
|
"#111827" :wrap-mode 'word
|
|
"Overview\nThe row uses the current preview width automatically.")
|
|
(box :flex '(1 1 (210)) :min-width '(180) :max-width
|
|
'(300) :padding '(0 (10)) :bgcolor "#E0E7FF" :color
|
|
"#111827" :wrap-mode 'word
|
|
"Editor\nDrag slowly or quickly; resize rendering follows the viewport.")
|
|
(box :flex '(1 1 (210)) :min-width '(180) :max-width
|
|
'(320) :padding '(0 (10)) :bgcolor "#EDE9FE" :color
|
|
"#111827" :wrap-mode 'word
|
|
"Preview\nThe preview updates from the current viewport width.")
|
|
(box :flex '(1 1 (210)) :min-width '(180) :max-width
|
|
'(280) :padding '(0 (10)) :bgcolor "#CFFAFE" :color
|
|
"#164E63" :wrap-mode 'word
|
|
"Flow\nCards keep readable widths instead of overflowing."))
|
|
(box :height 1)
|
|
(box :padding '(0 (16)) :border "#475569" :bgcolor "#F8FAFC"
|
|
:color "#0F172A" :wrap-mode 'word
|
|
"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."))
|