geekinney/ebox-playground
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: freeze verified ebox-playground baseline before C1b

Browse Source
This commit is contained in:
Kinneyzhang 2026-09-05 05:07:38 +08:00
parent dd7541e535
commit 65a24e2b69
1 changed files with 725 additions and 764 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

227
examples/flex-reference.ebox
View File

@ -1,5 +1,5 @@
(column :height '(viewport-height) :width '(viewport) :overflow (column :height '(viewport-height) :width '(viewport)
'scroll :bgcolor "#FAF7F0" :bgcolor "#FAF7F0"
(box :padding '(1 (24)) :border "#2F3437" :bgcolor "#FAF7F0" (box :padding '(1 (24)) :border "#2F3437" :bgcolor "#FAF7F0"
:color "#1F2328" :text-align 'center :color "#1F2328" :text-align 'center
"Ebox CSS Flex Reference\nA modern, self-explaining DSL gallery for CSS flex container and item properties.") "Ebox CSS Flex Reference\nA modern, self-explaining DSL gallery for CSS flex container and item properties.")
@ -8,14 +8,13 @@
:color "#3D2B1F" :color "#3D2B1F"
"Container property: :flex-direction\nMain axis selection. Reverse values swap main-start and main-end while keeping source order intact.") "Container property: :flex-direction\nMain axis selection. Reverse values swap main-start and main-end while keeping source order intact.")
(flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) (flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12)
:padding '(0 (12)) :border "#D97757" :border-top 'none :padding '(0 (12)) :border-right "#D97757" :border-bottom "#D97757" :border-left "#D97757"
:bgcolor "#FFF8F2" :bgcolor "#FFF8F2"
(column (column
(box :width '(220) :padding '(0 (10)) :border "#D97757" (box :width '(220) :padding '(0 (10)) :border "#D97757"
:bgcolor "#FFFDF8" :color "#3D3A35" :text-align :bgcolor "#FFFDF8" :color "#3D3A35" :text-align
'center "row") 'center "row")
(flex :width '(220) :height 4 :padding '(0 (8)) :border (flex :width '(220) :height 4 :padding '(0 (8)) :border-right "#D97757" :border-bottom "#D97757" :border-left "#D97757" :bgcolor "#FFF8F2"
"#D97757" :border-top 'none :bgcolor "#FFF8F2"
:flex-direction 'row :column-gap '(10) :flex-direction 'row :column-gap '(10)
:align-items 'center :align-items 'center
(box :width '(42) :height 1 :bgcolor "#F7C8B3" (box :width '(42) :height 1 :bgcolor "#F7C8B3"
@ -28,8 +27,7 @@
(box :width '(220) :padding '(0 (10)) :border "#D97757" (box :width '(220) :padding '(0 (10)) :border "#D97757"
:bgcolor "#FFFDF8" :color "#3D3A35" :text-align :bgcolor "#FFFDF8" :color "#3D3A35" :text-align
'center "row-reverse") 'center "row-reverse")
(flex :width '(220) :height 4 :padding '(0 (8)) :border (flex :width '(220) :height 4 :padding '(0 (8)) :border-right "#D97757" :border-bottom "#D97757" :border-left "#D97757" :bgcolor "#FFF8F2"
"#D97757" :border-top 'none :bgcolor "#FFF8F2"
:flex-direction 'row-reverse :column-gap '(10) :flex-direction 'row-reverse :column-gap '(10)
:align-items 'center :align-items 'center
(box :width '(42) :height 1 :bgcolor "#F7C8B3" (box :width '(42) :height 1 :bgcolor "#F7C8B3"
@ -42,8 +40,7 @@
(box :width '(220) :padding '(0 (10)) :border "#D97757" (box :width '(220) :padding '(0 (10)) :border "#D97757"
:bgcolor "#FFFDF8" :color "#3D3A35" :text-align :bgcolor "#FFFDF8" :color "#3D3A35" :text-align
'center "column") 'center "column")
(flex :width '(220) :height 6 :padding '(0 (8)) :border (flex :width '(220) :height 6 :padding '(0 (8)) :border-right "#D97757" :border-bottom "#D97757" :border-left "#D97757" :bgcolor "#FFF8F2"
"#D97757" :border-top 'none :bgcolor "#FFF8F2"
:flex-direction 'column :row-gap 1 :align-items :flex-direction 'column :row-gap 1 :align-items
'stretch 'stretch
(box :height 1 :bgcolor "#F7C8B3" :color (box :height 1 :bgcolor "#F7C8B3" :color
@ -56,8 +53,7 @@
(box :width '(220) :padding '(0 (10)) :border "#D97757" (box :width '(220) :padding '(0 (10)) :border "#D97757"
:bgcolor "#FFFDF8" :color "#3D3A35" :text-align :bgcolor "#FFFDF8" :color "#3D3A35" :text-align
'center "column-reverse") 'center "column-reverse")
(flex :width '(220) :height 6 :padding '(0 (8)) :border (flex :width '(220) :height 6 :padding '(0 (8)) :border-right "#D97757" :border-bottom "#D97757" :border-left "#D97757" :bgcolor "#FFF8F2"
"#D97757" :border-top 'none :bgcolor "#FFF8F2"
:flex-direction 'column-reverse :row-gap 1 :flex-direction 'column-reverse :row-gap 1
:align-items 'stretch :align-items 'stretch
(box :height 1 :bgcolor "#F7C8B3" :color (box :height 1 :bgcolor "#F7C8B3" :color
@ -71,14 +67,13 @@
:color "#24352A" :color "#24352A"
"Container property: :flex-wrap\nLine creation. nowrap keeps one flex line; wrap creates new lines; wrap-reverse stacks lines from the opposite cross side.") "Container property: :flex-wrap\nLine creation. nowrap keeps one flex line; wrap creates new lines; wrap-reverse stacks lines from the opposite cross side.")
(flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) (flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12)
:padding '(0 (12)) :border "#5E7F6A" :border-top 'none :padding '(0 (12)) :border-right "#5E7F6A" :border-bottom "#5E7F6A" :border-left "#5E7F6A"
:bgcolor "#F8FCF8" :bgcolor "#F8FCF8"
(column (column
(box :max-width '(293) :padding '(0 (10)) :border (box :max-width '(293) :padding '(0 (10)) :border
"#5E7F6A" :bgcolor "#FFFDF8" :color "#3D3A35" "#5E7F6A" :bgcolor "#FFFDF8" :color "#3D3A35"
:text-align 'center "nowrap") :text-align 'center "nowrap")
(flex :max-width '(293) :padding '(0 (8)) :border (flex :max-width '(293) :padding '(0 (8)) :border-right "#5E7F6A" :border-bottom "#5E7F6A" :border-left "#5E7F6A" :bgcolor "#F8FCF8"
"#5E7F6A" :border-top 'none :bgcolor "#F8FCF8"
:flex-wrap 'nowrap :column-gap '(8) :align-items :flex-wrap 'nowrap :column-gap '(8) :align-items
'center 'center
(box :flex-shrink 1 :width '(92) :height 1 (box :flex-shrink 1 :width '(92) :height 1
@ -94,8 +89,7 @@
(box :max-width '(293) :padding '(0 (10)) :border (box :max-width '(293) :padding '(0 (10)) :border
"#5E7F6A" :bgcolor "#FFFDF8" :color "#3D3A35" "#5E7F6A" :bgcolor "#FFFDF8" :color "#3D3A35"
:text-align 'center "wrap") :text-align 'center "wrap")
(flex :max-width '(293) :padding '(0 (8)) :border (flex :max-width '(293) :padding '(0 (8)) :border-right "#5E7F6A" :border-bottom "#5E7F6A" :border-left "#5E7F6A" :bgcolor "#F8FCF8"
"#5E7F6A" :border-top 'none :bgcolor "#F8FCF8"
:flex-wrap 'wrap :column-gap '(8) :row-gap 1 :flex-wrap 'wrap :column-gap '(8) :row-gap 1
(box :flex-shrink 0 :width '(118) :height 1 (box :flex-shrink 0 :width '(118) :height 1
:bgcolor "#DCEBDD" :color "#1F2328" :bgcolor "#DCEBDD" :color "#1F2328"
@ -110,8 +104,7 @@
(box :max-width '(293) :padding '(0 (10)) :border (box :max-width '(293) :padding '(0 (10)) :border
"#5E7F6A" :bgcolor "#FFFDF8" :color "#3D3A35" "#5E7F6A" :bgcolor "#FFFDF8" :color "#3D3A35"
:text-align 'center "wrap-reverse") :text-align 'center "wrap-reverse")
(flex :max-width '(293) :padding '(0 (8)) :border (flex :max-width '(293) :padding '(0 (8)) :border-right "#5E7F6A" :border-bottom "#5E7F6A" :border-left "#5E7F6A" :bgcolor "#F8FCF8"
"#5E7F6A" :border-top 'none :bgcolor "#F8FCF8"
:flex-wrap 'wrap-reverse :column-gap '(8) :flex-wrap 'wrap-reverse :column-gap '(8)
:row-gap 1 :row-gap 1
(box :flex-shrink 0 :width '(118) :height 1 (box :flex-shrink 0 :width '(118) :height 1
@ -128,14 +121,13 @@
:color "#2F2B45" :color "#2F2B45"
"Container property: :flex-flow\nShorthand for direction and wrapping. These examples use one property to set both behaviors.") "Container property: :flex-flow\nShorthand for direction and wrapping. These examples use one property to set both behaviors.")
(flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) (flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12)
:padding '(0 (12)) :border "#6F6A95" :border-top 'none :padding '(0 (12)) :border-right "#6F6A95" :border-bottom "#6F6A95" :border-left "#6F6A95"
:bgcolor "#FBF9FF" :bgcolor "#FBF9FF"
(column (column
(box :max-width '(440) :padding '(0 (10)) :border (box :max-width '(440) :padding '(0 (10)) :border
"#6F6A95" :bgcolor "#FFFDF8" :color "#3D3A35" "#6F6A95" :bgcolor "#FFFDF8" :color "#3D3A35"
:text-align 'center ":flex-flow (row wrap)") :text-align 'center ":flex-flow (row wrap)")
(flex :max-width '(440) :padding '(0 (8)) :border (flex :max-width '(440) :padding '(0 (8)) :border-right "#6F6A95" :border-bottom "#6F6A95" :border-left "#6F6A95" :bgcolor "#FBF9FF"
"#6F6A95" :border-top 'none :bgcolor "#FBF9FF"
:flex-flow '(row wrap) :gap '(1 (12)) :flex-flow '(row wrap) :gap '(1 (12))
(box :width '(170) :height 1 :bgcolor "#E4DEF4" (box :width '(170) :height 1 :bgcolor "#E4DEF4"
:color "#1F2328" :text-align 'center "A") :color "#1F2328" :text-align 'center "A")
@ -148,8 +140,7 @@
(box :max-width '(440) :padding '(0 (10)) :border (box :max-width '(440) :padding '(0 (10)) :border
"#6F6A95" :bgcolor "#FFFDF8" :color "#3D3A35" "#6F6A95" :bgcolor "#FFFDF8" :color "#3D3A35"
:text-align 'center ":flex-flow (column wrap)") :text-align 'center ":flex-flow (column wrap)")
(flex :max-width '(440) :padding '(0 (8)) :border (flex :max-width '(440) :padding '(0 (8)) :border-right "#6F6A95" :border-bottom "#6F6A95" :border-left "#6F6A95" :bgcolor "#FBF9FF"
"#6F6A95" :border-top 'none :bgcolor "#FBF9FF"
:flex-flow '(column wrap) :gap '(1 (12)) :flex-flow '(column wrap) :gap '(1 (12))
(box :width '(140) :height 1 :bgcolor "#E4DEF4" (box :width '(140) :height 1 :bgcolor "#E4DEF4"
:color "#1F2328" :text-align 'center "A") :color "#1F2328" :text-align 'center "A")
@ -163,13 +154,13 @@
:color "#20313A" :color "#20313A"
"Container property: :justify-content\nMain-axis packing after sizing. Distributed values change the space before, between, and after items.") "Container property: :justify-content\nMain-axis packing after sizing. Distributed values change the space before, between, and after items.")
(flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) (flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12)
:padding '(0 (12)) :border "#3F6D88" :border-top 'none :padding '(0 (12)) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88"
:bgcolor "#F6FBFD" :bgcolor "#F6FBFD"
(column (column
(box :width '(146) :padding '(0 (4)) :border "#3F6D88" (box :width '(146) :padding '(0 (4)) :border "#3F6D88"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "flex-start") 'center "flex-start")
(flex :width '(146) :border "#3F6D88" :border-top 'none (flex :width '(146) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88"
:bgcolor "#F6FBFD" :justify-content 'flex-start :bgcolor "#F6FBFD" :justify-content 'flex-start
(box :width '(28) :height 1 :bgcolor "#CAE6F0" (box :width '(28) :height 1 :bgcolor "#CAE6F0"
:color "#1F2328" :text-align 'center "A") :color "#1F2328" :text-align 'center "A")
@ -179,7 +170,7 @@
(box :width '(146) :padding '(0 (4)) :border "#3F6D88" (box :width '(146) :padding '(0 (4)) :border "#3F6D88"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "center") 'center "center")
(flex :width '(146) :border "#3F6D88" :border-top 'none (flex :width '(146) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88"
:bgcolor "#F6FBFD" :justify-content 'center :bgcolor "#F6FBFD" :justify-content 'center
(box :width '(28) :height 1 :bgcolor "#CAE6F0" (box :width '(28) :height 1 :bgcolor "#CAE6F0"
:color "#1F2328" :text-align 'center "A") :color "#1F2328" :text-align 'center "A")
@ -189,7 +180,7 @@
(box :width '(146) :padding '(0 (4)) :border "#3F6D88" (box :width '(146) :padding '(0 (4)) :border "#3F6D88"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "flex-end") 'center "flex-end")
(flex :width '(146) :border "#3F6D88" :border-top 'none (flex :width '(146) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88"
:bgcolor "#F6FBFD" :justify-content 'flex-end :bgcolor "#F6FBFD" :justify-content 'flex-end
(box :width '(28) :height 1 :bgcolor "#CAE6F0" (box :width '(28) :height 1 :bgcolor "#CAE6F0"
:color "#1F2328" :text-align 'center "A") :color "#1F2328" :text-align 'center "A")
@ -199,7 +190,7 @@
(box :width '(146) :padding '(0 (4)) :border "#3F6D88" (box :width '(146) :padding '(0 (4)) :border "#3F6D88"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "space-between") 'center "space-between")
(flex :width '(146) :border "#3F6D88" :border-top 'none (flex :width '(146) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88"
:bgcolor "#F6FBFD" :justify-content :bgcolor "#F6FBFD" :justify-content
'space-between 'space-between
(box :width '(28) :height 1 :bgcolor "#CAE6F0" (box :width '(28) :height 1 :bgcolor "#CAE6F0"
@ -210,7 +201,7 @@
(box :width '(146) :padding '(0 (4)) :border "#3F6D88" (box :width '(146) :padding '(0 (4)) :border "#3F6D88"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "space-around") 'center "space-around")
(flex :width '(146) :border "#3F6D88" :border-top 'none (flex :width '(146) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88"
:bgcolor "#F6FBFD" :justify-content 'space-around :bgcolor "#F6FBFD" :justify-content 'space-around
(box :width '(28) :height 1 :bgcolor "#CAE6F0" (box :width '(28) :height 1 :bgcolor "#CAE6F0"
:color "#1F2328" :text-align 'center "A") :color "#1F2328" :text-align 'center "A")
@ -220,7 +211,7 @@
(box :width '(146) :padding '(0 (4)) :border "#3F6D88" (box :width '(146) :padding '(0 (4)) :border "#3F6D88"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "space-evenly") 'center "space-evenly")
(flex :width '(146) :border "#3F6D88" :border-top 'none (flex :width '(146) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88"
:bgcolor "#F6FBFD" :justify-content 'space-evenly :bgcolor "#F6FBFD" :justify-content 'space-evenly
(box :width '(28) :height 1 :bgcolor "#CAE6F0" (box :width '(28) :height 1 :bgcolor "#CAE6F0"
:color "#1F2328" :text-align 'center "A") :color "#1F2328" :text-align 'center "A")
@ -230,7 +221,7 @@
(box :width '(176) :padding '(0 (4)) :border "#3F6D88" (box :width '(176) :padding '(0 (4)) :border "#3F6D88"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "start") 'center "start")
(flex :width '(176) :border "#3F6D88" :border-top 'none (flex :width '(176) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88"
:bgcolor "#F6FBFD" :justify-content 'start :bgcolor "#F6FBFD" :justify-content 'start
(box :width '(70) :height 1 :bgcolor "#CAE6F0" (box :width '(70) :height 1 :bgcolor "#CAE6F0"
:color "#1F2328" :text-align 'center "start"))) :color "#1F2328" :text-align 'center "start")))
@ -238,31 +229,31 @@
(box :width '(176) :padding '(0 (4)) :border "#3F6D88" (box :width '(176) :padding '(0 (4)) :border "#3F6D88"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "end") 'center "end")
(flex :width '(176) :border "#3F6D88" :border-top 'none (flex :width '(176) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88"
:bgcolor "#F6FBFD" :justify-content 'end :bgcolor "#F6FBFD" :justify-content 'end
(box :width '(70) :height 1 :bgcolor "#A8D2E2" (box :width '(70) :height 1 :bgcolor "#A8D2E2"
:color "#1F2328" :text-align 'center "end"))) :color "#1F2328" :text-align 'center "end")))
(column (column
(box :width '(176) :padding '(0 (4)) :border "#3F6D88" (box :width '(176) :padding '(0 (4)) :border "#3F6D88"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "left") 'center "stretch")
(flex :width '(176) :border "#3F6D88" :border-top 'none (flex :width '(176) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88"
:bgcolor "#F6FBFD" :justify-content 'left :bgcolor "#F6FBFD" :justify-content 'stretch
(box :width '(70) :height 1 :bgcolor "#7DB8CE" (box :width '(70) :height 1 :bgcolor "#7DB8CE"
:color "#1F2328" :text-align 'center "left"))) :color "#1F2328" :text-align 'center "stretch")))
(column
(box :width '(176) :padding '(0 (4)) :border "#3F6D88"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "right")
(flex :width '(176) :border "#3F6D88" :border-top 'none
:bgcolor "#F6FBFD" :justify-content 'right
(box :width '(70) :height 1 :bgcolor "#5F9CB5"
:color "#1F2328" :text-align 'center "right")))
(column (column
(box :width '(176) :padding '(0 (4)) :border "#3F6D88" (box :width '(176) :padding '(0 (4)) :border "#3F6D88"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "normal") 'center "normal")
(flex :width '(176) :border "#3F6D88" :border-top 'none (flex :width '(176) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88"
:bgcolor "#F6FBFD" :justify-content 'normal
(box :width '(70) :height 1 :bgcolor "#5F9CB5"
:color "#1F2328" :text-align 'center "normal")))
(column
(box :width '(176) :padding '(0 (4)) :border "#3F6D88"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "normal")
(flex :width '(176) :border-right "#3F6D88" :border-bottom "#3F6D88" :border-left "#3F6D88"
:bgcolor "#F6FBFD" :justify-content 'normal :bgcolor "#F6FBFD" :justify-content 'normal
(box :width '(70) :height 1 :bgcolor "#3F6D88" (box :width '(70) :height 1 :bgcolor "#3F6D88"
:color "#FFFFFF" :text-align 'center :color "#FFFFFF" :text-align 'center
@ -272,14 +263,13 @@
:color "#3A2A1D" :color "#3A2A1D"
"Container property: :align-items\nCross-axis alignment inside each flex line. Stretch/normal enlarge auto-sized items; start/end/center move shorter ones.") "Container property: :align-items\nCross-axis alignment inside each flex line. Stretch/normal enlarge auto-sized items; start/end/center move shorter ones.")
(flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) (flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12)
:padding '(0 (12)) :border "#9A6B43" :border-top 'none :padding '(0 (12)) :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43"
:bgcolor "#FFFAF5" :bgcolor "#FFFAF5"
(column (column
(box :width '(176) :padding '(0 (4)) :border "#9A6B43" (box :width '(176) :padding '(0 (4)) :border "#9A6B43"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "flex-start") 'center "flex-start")
(flex :width '(176) :height 5 :border "#9A6B43" (flex :width '(176) :height 5 :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :bgcolor "#FFFAF5" :align-items
:border-top 'none :bgcolor "#FFFAF5" :align-items
'flex-start 'flex-start
(box :width '(68) :height 1 :bgcolor "#F1D0AF" (box :width '(68) :height 1 :bgcolor "#F1D0AF"
:color "#1F2328" :text-align 'center "short") :color "#1F2328" :text-align 'center "short")
@ -290,8 +280,7 @@
(box :width '(176) :padding '(0 (4)) :border "#9A6B43" (box :width '(176) :padding '(0 (4)) :border "#9A6B43"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "center") 'center "center")
(flex :width '(176) :height 5 :border "#9A6B43" (flex :width '(176) :height 5 :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :bgcolor "#FFFAF5" :align-items
:border-top 'none :bgcolor "#FFFAF5" :align-items
'center 'center
(box :width '(68) :height 1 :bgcolor "#F1D0AF" (box :width '(68) :height 1 :bgcolor "#F1D0AF"
:color "#1F2328" :text-align 'center "short") :color "#1F2328" :text-align 'center "short")
@ -302,8 +291,7 @@
(box :width '(176) :padding '(0 (4)) :border "#9A6B43" (box :width '(176) :padding '(0 (4)) :border "#9A6B43"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "flex-end") 'center "flex-end")
(flex :width '(176) :height 5 :border "#9A6B43" (flex :width '(176) :height 5 :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :bgcolor "#FFFAF5" :align-items
:border-top 'none :bgcolor "#FFFAF5" :align-items
'flex-end 'flex-end
(box :width '(68) :height 1 :bgcolor "#F1D0AF" (box :width '(68) :height 1 :bgcolor "#F1D0AF"
:color "#1F2328" :text-align 'center "short") :color "#1F2328" :text-align 'center "short")
@ -314,8 +302,7 @@
(box :width '(176) :padding '(0 (4)) :border "#9A6B43" (box :width '(176) :padding '(0 (4)) :border "#9A6B43"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "stretch") 'center "stretch")
(flex :width '(176) :height 5 :border "#9A6B43" (flex :width '(176) :height 5 :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :bgcolor "#FFFAF5" :align-items
:border-top 'none :bgcolor "#FFFAF5" :align-items
'stretch 'stretch
(box :width '(72) :bgcolor "#F1D0AF" :color (box :width '(72) :bgcolor "#F1D0AF" :color
"#1F2328" :text-align 'center "#1F2328" :text-align 'center
@ -327,8 +314,7 @@
(box :width '(176) :padding '(0 (4)) :border "#9A6B43" (box :width '(176) :padding '(0 (4)) :border "#9A6B43"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "baseline") 'center "baseline")
(flex :width '(176) :height 5 :border "#9A6B43" (flex :width '(176) :height 5 :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :bgcolor "#FFFAF5" :align-items
:border-top 'none :bgcolor "#FFFAF5" :align-items
'baseline 'baseline
(box :width '(90) :height 1 :bgcolor "#BA8456" (box :width '(90) :height 1 :bgcolor "#BA8456"
:color "#1F2328" :text-align 'center :color "#1F2328" :text-align 'center
@ -337,8 +323,7 @@
(box :width '(146) :padding '(0 (4)) :border "#9A6B43" (box :width '(146) :padding '(0 (4)) :border "#9A6B43"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "start") 'center "start")
(flex :width '(146) :height 4 :border "#9A6B43" (flex :width '(146) :height 4 :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :bgcolor "#FFFAF5" :align-items
:border-top 'none :bgcolor "#FFFAF5" :align-items
'start 'start
(box :width '(62) :height 1 :bgcolor "#F1D0AF" (box :width '(62) :height 1 :bgcolor "#F1D0AF"
:color "#1F2328" :text-align 'center "start"))) :color "#1F2328" :text-align 'center "start")))
@ -346,37 +331,33 @@
(box :width '(146) :padding '(0 (4)) :border "#9A6B43" (box :width '(146) :padding '(0 (4)) :border "#9A6B43"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "end") 'center "end")
(flex :width '(146) :height 4 :border "#9A6B43" (flex :width '(146) :height 4 :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :bgcolor "#FFFAF5" :align-items
:border-top 'none :bgcolor "#FFFAF5" :align-items
'end 'end
(box :width '(62) :height 1 :bgcolor "#D9AD83" (box :width '(62) :height 1 :bgcolor "#D9AD83"
:color "#1F2328" :text-align 'center "end"))) :color "#1F2328" :text-align 'center "end")))
(column (column
(box :width '(146) :padding '(0 (4)) :border "#9A6B43" (box :width '(146) :padding '(0 (4)) :border "#9A6B43"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "self-start") 'center "start")
(flex :width '(146) :height 4 :border "#9A6B43" (flex :width '(146) :height 4 :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :bgcolor "#FFFAF5" :align-items
:border-top 'none :bgcolor "#FFFAF5" :align-items 'start
'self-start
(box :width '(78) :height 1 :bgcolor "#BA8456" (box :width '(78) :height 1 :bgcolor "#BA8456"
:color "#1F2328" :text-align 'center :color "#1F2328" :text-align 'center
"self-start"))) "start")))
(column (column
(box :width '(146) :padding '(0 (4)) :border "#9A6B43" (box :width '(146) :padding '(0 (4)) :border "#9A6B43"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "self-end") 'center "end")
(flex :width '(146) :height 4 :border "#9A6B43" (flex :width '(146) :height 4 :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :bgcolor "#FFFAF5" :align-items
:border-top 'none :bgcolor "#FFFAF5" :align-items 'end
'self-end
(box :width '(70) :height 1 :bgcolor "#9A6B43" (box :width '(70) :height 1 :bgcolor "#9A6B43"
:color "#FFFFFF" :text-align 'center :color "#FFFFFF" :text-align 'center
"self-end"))) "end")))
(column (column
(box :width '(146) :padding '(0 (4)) :border "#9A6B43" (box :width '(146) :padding '(0 (4)) :border "#9A6B43"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "normal") 'center "normal")
(flex :width '(146) :height 4 :border "#9A6B43" (flex :width '(146) :height 4 :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :bgcolor "#FFFAF5" :align-items
:border-top 'none :bgcolor "#FFFAF5" :align-items
'normal 'normal
(box :width '(62) :bgcolor "#7A5132" :color (box :width '(62) :bgcolor "#7A5132" :color
"#FFFFFF" :text-align 'center "normal"))) "#FFFFFF" :text-align 'center "normal")))
@ -384,8 +365,7 @@
(box :width '(146) :padding '(0 (4)) :border "#9A6B43" (box :width '(146) :padding '(0 (4)) :border "#9A6B43"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "stretch note") 'center "stretch note")
(box :width '(146) :height 4 :padding '(0 (8)) :border (box :width '(146) :height 4 :padding '(0 (8)) :border-right "#9A6B43" :border-bottom "#9A6B43" :border-left "#9A6B43" :bgcolor "#FFFAF5"
"#9A6B43" :border-top 'none :bgcolor "#FFFAF5"
:color "#3A2A1D" :color "#3A2A1D"
"normal behaves stretch-like for auto cross size in this DSL."))) "normal behaves stretch-like for auto cross size in this DSL.")))
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
@ -393,14 +373,13 @@
:color "#362F16" :color "#362F16"
"Container property: :align-content\nCross-axis packing between multiple flex lines. It has no visible effect on a nowrap single-line container.") "Container property: :align-content\nCross-axis packing between multiple flex lines. It has no visible effect on a nowrap single-line container.")
(flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) (flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12)
:padding '(0 (12)) :border "#7C6A2F" :border-top 'none :padding '(0 (12)) :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F"
:bgcolor "#FFFDF0" :bgcolor "#FFFDF0"
(column (column
(box :width '(176) :padding '(0 (4)) :border "#7C6A2F" (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "flex-start") 'center "flex-start")
(flex :width '(176) :height 7 :border "#7C6A2F" (flex :width '(176) :height 7 :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :bgcolor "#FFFDF0" :flex-wrap
:border-top 'none :bgcolor "#FFFDF0" :flex-wrap
'wrap :align-content 'flex-start :row-gap 1 'wrap :align-content 'flex-start :row-gap 1
:column-gap '(8) :column-gap '(8)
(box :width '(78) :height 1 :bgcolor "#EEE1A8" (box :width '(78) :height 1 :bgcolor "#EEE1A8"
@ -413,8 +392,7 @@
(box :width '(176) :padding '(0 (4)) :border "#7C6A2F" (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "center") 'center "center")
(flex :width '(176) :height 7 :border "#7C6A2F" (flex :width '(176) :height 7 :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :bgcolor "#FFFDF0" :flex-wrap
:border-top 'none :bgcolor "#FFFDF0" :flex-wrap
'wrap :align-content 'center :row-gap 1 'wrap :align-content 'center :row-gap 1
:column-gap '(8) :column-gap '(8)
(box :width '(78) :height 1 :bgcolor "#EEE1A8" (box :width '(78) :height 1 :bgcolor "#EEE1A8"
@ -427,8 +405,7 @@
(box :width '(176) :padding '(0 (4)) :border "#7C6A2F" (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "flex-end") 'center "flex-end")
(flex :width '(176) :height 7 :border "#7C6A2F" (flex :width '(176) :height 7 :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :bgcolor "#FFFDF0" :flex-wrap
:border-top 'none :bgcolor "#FFFDF0" :flex-wrap
'wrap :align-content 'flex-end :row-gap 1 'wrap :align-content 'flex-end :row-gap 1
:column-gap '(8) :column-gap '(8)
(box :width '(78) :height 1 :bgcolor "#EEE1A8" (box :width '(78) :height 1 :bgcolor "#EEE1A8"
@ -441,8 +418,7 @@
(box :width '(176) :padding '(0 (4)) :border "#7C6A2F" (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "space-between") 'center "space-between")
(flex :width '(176) :height 7 :border "#7C6A2F" (flex :width '(176) :height 7 :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :bgcolor "#FFFDF0" :flex-wrap
:border-top 'none :bgcolor "#FFFDF0" :flex-wrap
'wrap :align-content 'space-between :row-gap 1 'wrap :align-content 'space-between :row-gap 1
:column-gap '(8) :column-gap '(8)
(box :width '(78) :height 1 :bgcolor "#EEE1A8" (box :width '(78) :height 1 :bgcolor "#EEE1A8"
@ -455,8 +431,7 @@
(box :width '(176) :padding '(0 (4)) :border "#7C6A2F" (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "space-around") 'center "space-around")
(flex :width '(176) :height 7 :border "#7C6A2F" (flex :width '(176) :height 7 :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :bgcolor "#FFFDF0" :flex-wrap
:border-top 'none :bgcolor "#FFFDF0" :flex-wrap
'wrap :align-content 'space-around :row-gap 1 'wrap :align-content 'space-around :row-gap 1
:column-gap '(8) :column-gap '(8)
(box :width '(78) :height 1 :bgcolor "#EEE1A8" (box :width '(78) :height 1 :bgcolor "#EEE1A8"
@ -469,8 +444,7 @@
(box :width '(176) :padding '(0 (4)) :border "#7C6A2F" (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "space-evenly") 'center "space-evenly")
(flex :width '(176) :height 7 :border "#7C6A2F" (flex :width '(176) :height 7 :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :bgcolor "#FFFDF0" :flex-wrap
:border-top 'none :bgcolor "#FFFDF0" :flex-wrap
'wrap :align-content 'space-evenly :row-gap 1 'wrap :align-content 'space-evenly :row-gap 1
:column-gap '(8) :column-gap '(8)
(box :width '(78) :height 1 :bgcolor "#EEE1A8" (box :width '(78) :height 1 :bgcolor "#EEE1A8"
@ -483,8 +457,7 @@
(box :width '(176) :padding '(0 (4)) :border "#7C6A2F" (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "stretch") 'center "stretch")
(flex :width '(176) :height 7 :border "#7C6A2F" (flex :width '(176) :height 7 :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :bgcolor "#FFFDF0" :flex-wrap
:border-top 'none :bgcolor "#FFFDF0" :flex-wrap
'wrap :align-content 'stretch :row-gap 1 'wrap :align-content 'stretch :row-gap 1
:column-gap '(8) :column-gap '(8)
(box :width '(78) :height 1 :bgcolor "#EEE1A8" (box :width '(78) :height 1 :bgcolor "#EEE1A8"
@ -497,8 +470,7 @@
(box :width '(176) :padding '(0 (4)) :border "#7C6A2F" (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "start") 'center "start")
(flex :width '(176) :height 7 :border "#7C6A2F" (flex :width '(176) :height 7 :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :bgcolor "#FFFDF0" :flex-wrap
:border-top 'none :bgcolor "#FFFDF0" :flex-wrap
'wrap :align-content 'start :row-gap 1 'wrap :align-content 'start :row-gap 1
:column-gap '(8) :column-gap '(8)
(box :width '(78) :height 1 :bgcolor "#EEE1A8" (box :width '(78) :height 1 :bgcolor "#EEE1A8"
@ -511,8 +483,7 @@
(box :width '(176) :padding '(0 (4)) :border "#7C6A2F" (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "end") 'center "end")
(flex :width '(176) :height 7 :border "#7C6A2F" (flex :width '(176) :height 7 :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :bgcolor "#FFFDF0" :flex-wrap
:border-top 'none :bgcolor "#FFFDF0" :flex-wrap
'wrap :align-content 'end :row-gap 1 :column-gap 'wrap :align-content 'end :row-gap 1 :column-gap
'(8) '(8)
(box :width '(78) :height 1 :bgcolor "#EEE1A8" (box :width '(78) :height 1 :bgcolor "#EEE1A8"
@ -524,10 +495,9 @@
(column (column
(box :width '(176) :padding '(0 (4)) :border "#7C6A2F" (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "baseline") 'center "normal")
(flex :width '(176) :height 7 :border "#7C6A2F" (flex :width '(176) :height 7 :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :bgcolor "#FFFDF0" :flex-wrap
:border-top 'none :bgcolor "#FFFDF0" :flex-wrap 'wrap :align-content 'normal :row-gap 1
'wrap :align-content 'baseline :row-gap 1
:column-gap '(8) :column-gap '(8)
(box :width '(78) :height 1 :bgcolor "#EEE1A8" (box :width '(78) :height 1 :bgcolor "#EEE1A8"
:color "#1F2328" :text-align 'center "A") :color "#1F2328" :text-align 'center "A")
@ -539,8 +509,7 @@
(box :width '(176) :padding '(0 (4)) :border "#7C6A2F" (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "normal") 'center "normal")
(flex :width '(176) :height 7 :border "#7C6A2F" (flex :width '(176) :height 7 :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :bgcolor "#FFFDF0" :flex-wrap
:border-top 'none :bgcolor "#FFFDF0" :flex-wrap
'wrap :align-content 'normal :row-gap 1 'wrap :align-content 'normal :row-gap 1
:column-gap '(8) :column-gap '(8)
(box :width '(78) :height 1 :bgcolor "#EEE1A8" (box :width '(78) :height 1 :bgcolor "#EEE1A8"
@ -553,8 +522,7 @@
(box :width '(176) :padding '(0 (4)) :border "#7C6A2F" (box :width '(176) :padding '(0 (4)) :border "#7C6A2F"
:bgcolor "#FFFDF8" :color "#1F2328" :text-align :bgcolor "#FFFDF8" :color "#1F2328" :text-align
'center "nowrap note") 'center "nowrap note")
(flex :width '(176) :height 7 :border "#7C6A2F" (flex :width '(176) :height 7 :border-right "#7C6A2F" :border-bottom "#7C6A2F" :border-left "#7C6A2F" :bgcolor "#FFFDF0" :flex-wrap
:border-top 'none :bgcolor "#FFFDF0" :flex-wrap
'nowrap :align-content 'normal :row-gap 1 'nowrap :align-content 'normal :row-gap 1
:column-gap '(8) :column-gap '(8)
(box :width '(96) :height 1 :bgcolor "#EEE1A8" (box :width '(96) :height 1 :bgcolor "#EEE1A8"
@ -565,14 +533,13 @@
:color "#1D3935" :color "#1D3935"
"Container properties: :gap, :row-gap, :column-gap\n:gaps define spacing between flex items and flex lines. Explicit row/column values override matching sides.") "Container properties: :gap, :row-gap, :column-gap\n:gaps define spacing between flex items and flex lines. Explicit row/column values override matching sides.")
(flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12) (flex :flex-flow '(row wrap) :row-gap 1 :column-gap '(12)
:padding '(0 (12)) :border "#3D7068" :border-top 'none :padding '(0 (12)) :border-right "#3D7068" :border-bottom "#3D7068" :border-left "#3D7068"
:bgcolor "#F7FCFB" :bgcolor "#F7FCFB"
(column (column
(box :max-width '(293) :padding '(0 (10)) :border (box :max-width '(293) :padding '(0 (10)) :border
"#3D7068" :bgcolor "#FFFDF8" :color "#3D3A35" "#3D7068" :bgcolor "#FFFDF8" :color "#3D3A35"
:text-align 'center ":gap (1 (14))") :text-align 'center ":gap (1 (14))")
(flex :max-width '(293) :border "#3D7068" :border-top (flex :max-width '(293) :border-right "#3D7068" :border-bottom "#3D7068" :border-left "#3D7068" :bgcolor "#F7FCFB" :flex-wrap 'wrap :gap
'none :bgcolor "#F7FCFB" :flex-wrap 'wrap :gap
'(1 (14)) '(1 (14))
(box :width '(104) :height 1 :bgcolor "#CDEBE5" (box :width '(104) :height 1 :bgcolor "#CDEBE5"
:color "#1F2328" :text-align 'center "A") :color "#1F2328" :text-align 'center "A")
@ -584,8 +551,7 @@
(box :max-width '(293) :padding '(0 (10)) :border (box :max-width '(293) :padding '(0 (10)) :border
"#3D7068" :bgcolor "#FFFDF8" :color "#3D3A35" "#3D7068" :bgcolor "#FFFDF8" :color "#3D3A35"
:text-align 'center ":row-gap 2") :text-align 'center ":row-gap 2")
(flex :max-width '(293) :border "#3D7068" :border-top (flex :max-width '(293) :border-right "#3D7068" :border-bottom "#3D7068" :border-left "#3D7068" :bgcolor "#F7FCFB" :flex-wrap 'wrap
'none :bgcolor "#F7FCFB" :flex-wrap 'wrap
:row-gap 2 :column-gap '(8) :row-gap 2 :column-gap '(8)
(box :width '(104) :height 1 :bgcolor "#CDEBE5" (box :width '(104) :height 1 :bgcolor "#CDEBE5"
:color "#1F2328" :text-align 'center "A") :color "#1F2328" :text-align 'center "A")
@ -597,8 +563,7 @@
(box :max-width '(293) :padding '(0 (10)) :border (box :max-width '(293) :padding '(0 (10)) :border
"#3D7068" :bgcolor "#FFFDF8" :color "#3D3A35" "#3D7068" :bgcolor "#FFFDF8" :color "#3D3A35"
:text-align 'center ":column-gap (32)") :text-align 'center ":column-gap (32)")
(flex :max-width '(293) :border "#3D7068" :border-top (flex :max-width '(293) :border-right "#3D7068" :border-bottom "#3D7068" :border-left "#3D7068" :bgcolor "#F7FCFB" :flex-wrap 'wrap
'none :bgcolor "#F7FCFB" :flex-wrap 'wrap
:row-gap 1 :column-gap '(32) :row-gap 1 :column-gap '(32)
(box :width '(104) :height 1 :bgcolor "#CDEBE5" (box :width '(104) :height 1 :bgcolor "#CDEBE5"
:color "#1F2328" :text-align 'center "A") :color "#1F2328" :text-align 'center "A")
@ -610,8 +575,7 @@
(box :padding '(0 (18)) :border "#8E4A63" :bgcolor "#FFF4F7" (box :padding '(0 (18)) :border "#8E4A63" :bgcolor "#FFF4F7"
:color "#3A1F2A" :color "#3A1F2A"
"Item property: :order\nVisual ordering sorts by :order, then source order. The labels expose both values.") "Item property: :order\nVisual ordering sorts by :order, then source order. The labels expose both values.")
(flex :height 5 :padding '(0 (12)) :border "#8E4A63" (flex :height 5 :padding '(0 (12)) :border-right "#8E4A63" :border-bottom "#8E4A63" :border-left "#8E4A63" :bgcolor "#FFF8FA" :column-gap '(12)
:border-top 'none :bgcolor "#FFF8FA" :column-gap '(12)
:align-items 'center :align-items 'center
(box :order 3 :width '(150) :height 2 :bgcolor "#F2C4D2" (box :order 3 :width '(150) :height 2 :bgcolor "#F2C4D2"
:color "#1F2328" :text-align 'center :color "#1F2328" :text-align 'center
@ -630,10 +594,10 @@
:color "#1C303D" :color "#1C303D"
"Item sizing: :flex-grow, :flex-shrink, :flex-basis, and child :width\nFlex starts from basis or width/content, then distributes positive or negative space.") "Item sizing: :flex-grow, :flex-shrink, :flex-basis, and child :width\nFlex starts from basis or width/content, then distributes positive or negative space.")
(column (column
(box :padding '(0 (12)) :border "#2F5F7C" :border-top 'none (box :padding '(0 (12)) :border-right "#2F5F7C" :border-bottom "#2F5F7C" :border-left "#2F5F7C"
:bgcolor "#FFFDF8" :color "#3D3A35" :bgcolor "#FFFDF8" :color "#3D3A35"
"Grow factors: same basis, different growth weights.") "Grow factors: same basis, different growth weights.")
(flex :padding '(0 (12)) :border "#2F5F7C" :border-top 'none (flex :padding '(0 (12)) :border-right "#2F5F7C" :border-bottom "#2F5F7C" :border-left "#2F5F7C"
:bgcolor "#F8FCFE" :column-gap '(10) :bgcolor "#F8FCFE" :column-gap '(10)
(box :flex-grow 1 :flex-basis '(120) :height 2 :bgcolor (box :flex-grow 1 :flex-basis '(120) :height 2 :bgcolor
"#C7E3F0" :color "#1F2328" :text-align 'center "#C7E3F0" :color "#1F2328" :text-align 'center
@ -645,10 +609,10 @@
"#5FA4C2" :color "#1F2328" :text-align 'center "#5FA4C2" :color "#1F2328" :text-align 'center
"grow 3\nbasis 120"))) "grow 3\nbasis 120")))
(column (column
(box :padding '(0 (12)) :border "#2F5F7C" :border-top 'none (box :padding '(0 (12)) :border-right "#2F5F7C" :border-bottom "#2F5F7C" :border-left "#2F5F7C"
:bgcolor "#FFFDF8" :color "#3D3A35" :bgcolor "#FFFDF8" :color "#3D3A35"
"Shrink factors: overflowing bases lose space by weighted shrink.") "Shrink factors: overflowing bases lose space by weighted shrink.")
(flex :padding '(0 (12)) :border "#2F5F7C" :border-top 'none (flex :padding '(0 (12)) :border-right "#2F5F7C" :border-bottom "#2F5F7C" :border-left "#2F5F7C"
:bgcolor "#F8FCFE" :column-gap '(10) :bgcolor "#F8FCFE" :column-gap '(10)
(box :flex-shrink 1 :flex-basis '(320) :height 2 (box :flex-shrink 1 :flex-basis '(320) :height 2
:bgcolor "#C7E3F0" :color "#1F2328" :text-align :bgcolor "#C7E3F0" :color "#1F2328" :text-align
@ -660,10 +624,10 @@
:bgcolor "#5FA4C2" :color "#1F2328" :text-align :bgcolor "#5FA4C2" :color "#1F2328" :text-align
'center "shrink 5\nbasis 320"))) 'center "shrink 5\nbasis 320")))
(column (column
(box :padding '(0 (12)) :border "#2F5F7C" :border-top 'none (box :padding '(0 (12)) :border-right "#2F5F7C" :border-bottom "#2F5F7C" :border-left "#2F5F7C"
:bgcolor "#FFFDF8" :color "#3D3A35" :bgcolor "#FFFDF8" :color "#3D3A35"
"Basis versus width: explicit basis overrides width; auto basis uses width/content.") "Basis versus width: explicit basis overrides width; auto basis uses width/content.")
(flex :padding '(0 (12)) :border "#2F5F7C" :border-top 'none (flex :padding '(0 (12)) :border-right "#2F5F7C" :border-bottom "#2F5F7C" :border-left "#2F5F7C"
:bgcolor "#F8FCFE" :column-gap '(10) :bgcolor "#F8FCFE" :column-gap '(10)
(box :flex-basis '(120) :width '(240) :height 2 (box :flex-basis '(120) :width '(240) :height 2
:bgcolor "#C7E3F0" :color "#1F2328" :text-align :bgcolor "#C7E3F0" :color "#1F2328" :text-align
@ -675,15 +639,15 @@
:bgcolor "#5FA4C2" :color "#1F2328" :text-align :bgcolor "#5FA4C2" :color "#1F2328" :text-align
'center "flex tuple\nbasis 160"))) 'center "flex tuple\nbasis 160")))
(column (column
(box :padding '(0 (12)) :border "#2F5F7C" :border-top 'none (box :padding '(0 (12)) :border-right "#2F5F7C" :border-bottom "#2F5F7C" :border-left "#2F5F7C"
:bgcolor "#FFFDF8" :color "#3D3A35" :bgcolor "#FFFDF8" :color "#3D3A35"
"Intrinsic basis keywords: content, min-content, and max-content derive size from text.") "Basis keywords: auto, min-content, and max-content select the starting size.")
(flex :padding '(0 (12)) :border "#2F5F7C" :border-top 'none (flex :padding '(0 (12)) :border-right "#2F5F7C" :border-bottom "#2F5F7C" :border-left "#2F5F7C"
:bgcolor "#F8FCFE" :flex-wrap 'wrap :row-gap 1 :bgcolor "#F8FCFE" :flex-wrap 'wrap :row-gap 1
:column-gap '(10) :column-gap '(10)
(box :flex-shrink 0 :flex-basis 'content :width '(180) (box :flex-shrink 0 :flex-basis 'auto :width '(180)
:height 2 :bgcolor "#C7E3F0" :color "#1F2328" :height 2 :bgcolor "#C7E3F0" :color "#1F2328"
:text-align 'center "content\nnatural text") :text-align 'center "auto\nuses width")
(box :flex-shrink 0 :flex-basis 'min-content :width (box :flex-shrink 0 :flex-basis 'min-content :width
'(180) :height 2 :bgcolor "#96C7DD" :color '(180) :height 2 :bgcolor "#96C7DD" :color
"#1F2328" :text-align 'center "#1F2328" :text-align 'center
@ -696,8 +660,7 @@
(box :padding '(0 (18)) :border "#52612F" :bgcolor "#F8FAEF" (box :padding '(0 (18)) :border "#52612F" :bgcolor "#F8FAEF"
:color "#293116" :color "#293116"
"Item property: :flex shorthand\nSupported forms: number, none, auto, initial, and (grow shrink basis). Longhands can override shorthand parts.") "Item property: :flex shorthand\nSupported forms: number, none, auto, initial, and (grow shrink basis). Longhands can override shorthand parts.")
(flex :height 7 :padding '(0 (12)) :border "#52612F" (flex :height 7 :padding '(0 (12)) :border-right "#52612F" :border-bottom "#52612F" :border-left "#52612F" :bgcolor "#FCFDF6" :flex-wrap 'wrap
:border-top 'none :bgcolor "#FCFDF6" :flex-wrap 'wrap
:row-gap 1 :column-gap '(8) :align-items 'center :row-gap 1 :column-gap '(8) :align-items 'center
(box :flex 1 :bgcolor "#DDE8B2" :color "#1F2328" (box :flex 1 :bgcolor "#DDE8B2" :color "#1F2328"
:text-align 'center ":flex 1\n= 1 1 0") :text-align 'center ":flex 1\n= 1 1 0")
@ -710,15 +673,14 @@
(box :flex 'initial :width '(140) :bgcolor "#8D9E3C" (box :flex 'initial :width '(140) :bgcolor "#8D9E3C"
:color "#1F2328" :text-align 'center :color "#1F2328" :text-align 'center
":flex initial\n= 0 1 auto") ":flex initial\n= 0 1 auto")
(box :flex '(2 1 (120)) :flex-basis '(160) :bgcolor (box :flex '(2 1 (160)) :bgcolor
"#66762D" :color "#FFFFFF" :text-align 'center "#66762D" :color "#FFFFFF" :text-align 'center
":flex (2 1 120)\nthen basis 160")) ":flex (2 1 160)\none atomic shorthand"))
(box :width '(viewport) :height 1 :bgcolor "#FAF7F0") (box :width '(viewport) :height 1 :bgcolor "#FAF7F0")
(box :padding '(0 (18)) :border "#7B4D38" :bgcolor "#FFF6F0" (box :padding '(0 (18)) :border "#7B4D38" :bgcolor "#FFF6F0"
:color "#392319" :color "#392319"
"Item property: :align-self\nPer-item cross-axis override. auto inherits :align-items; other values replace the container setting.") "Item property: :align-self\nPer-item cross-axis override. auto inherits :align-items; other values replace the container setting.")
(flex :height 7 :padding '(0 (12)) :border "#7B4D38" (flex :height 7 :padding '(0 (12)) :border-right "#7B4D38" :border-bottom "#7B4D38" :border-left "#7B4D38" :bgcolor "#FFFAF7" :align-items
:border-top 'none :bgcolor "#FFFAF7" :align-items
'flex-start :flex-wrap 'wrap :row-gap 1 :column-gap 'flex-start :flex-wrap 'wrap :row-gap 1 :column-gap
'(10) '(10)
(box :align-self 'auto :width '(118) :height 2 :bgcolor (box :align-self 'auto :width '(118) :height 2 :bgcolor
@ -739,8 +701,7 @@
(box :align-self 'normal :width '(118) :bgcolor (box :align-self 'normal :width '(118) :bgcolor
"#5D3929" :color "#FFFFFF" :text-align 'center "#5D3929" :color "#FFFFFF" :text-align 'center
"normal\nstretch-like")) "normal\nstretch-like"))
(flex :height 6 :padding '(0 (12)) :border "#7B4D38" (flex :height 6 :padding '(0 (12)) :border-right "#7B4D38" :border-bottom "#7B4D38" :border-left "#7B4D38" :bgcolor "#FFFAF7" :align-items
:border-top 'none :bgcolor "#FFFAF7" :align-items
'flex-start :flex-wrap 'wrap :row-gap 1 :column-gap 'flex-start :flex-wrap 'wrap :row-gap 1 :column-gap
'(10) '(10)
(box :align-self 'start :width '(118) :height 2 :bgcolor (box :align-self 'start :width '(118) :height 2 :bgcolor
@ -749,12 +710,12 @@
(box :align-self 'end :width '(118) :height 2 :bgcolor (box :align-self 'end :width '(118) :height 2 :bgcolor
"#DBA58D" :color "#1F2328" :text-align 'center "#DBA58D" :color "#1F2328" :text-align 'center
"end") "end")
(box :align-self 'self-start :width '(118) :height 2 (box :align-self 'flex-start :width '(118) :height 2
:bgcolor "#BF7F63" :color "#1F2328" :text-align :bgcolor "#BF7F63" :color "#1F2328" :text-align
'center "self-start") 'center "flex-start")
(box :align-self 'self-end :width '(118) :height 2 (box :align-self 'flex-end :width '(118) :height 2
:bgcolor "#9D6048" :color "#FFFFFF" :text-align :bgcolor "#9D6048" :color "#FFFFFF" :text-align
'center "self-end") 'center "flex-end")
(box :align-self 'baseline :width '(118) :height 2 (box :align-self 'baseline :width '(118) :height 2
:bgcolor "#7B4D38" :color "#FFFFFF" :text-align :bgcolor "#7B4D38" :color "#FFFFFF" :text-align
'center "baseline")) 'center "baseline"))