diff --git a/assets/images/block-clock/layout-compact-big.png b/assets/images/block-clock/layout-compact-big.png
new file mode 100644
index 0000000..a8c86ec
Binary files /dev/null and b/assets/images/block-clock/layout-compact-big.png differ
diff --git a/assets/images/block-clock/layout-compact.png b/assets/images/block-clock/layout-compact.png
new file mode 100644
index 0000000..af62b6e
Binary files /dev/null and b/assets/images/block-clock/layout-compact.png differ
diff --git a/assets/images/block-clock/layout-compact@2x.png b/assets/images/block-clock/layout-compact@2x.png
new file mode 100644
index 0000000..2dd6c64
Binary files /dev/null and b/assets/images/block-clock/layout-compact@2x.png differ
diff --git a/assets/images/block-clock/layout-showcase-big.png b/assets/images/block-clock/layout-showcase-big.png
new file mode 100644
index 0000000..b53568b
Binary files /dev/null and b/assets/images/block-clock/layout-showcase-big.png differ
diff --git a/assets/images/block-clock/layout-showcase.png b/assets/images/block-clock/layout-showcase.png
new file mode 100644
index 0000000..8525432
Binary files /dev/null and b/assets/images/block-clock/layout-showcase.png differ
diff --git a/assets/images/block-clock/layout-showcase@2x.png b/assets/images/block-clock/layout-showcase@2x.png
new file mode 100644
index 0000000..f0b782f
Binary files /dev/null and b/assets/images/block-clock/layout-showcase@2x.png differ
diff --git a/assets/images/block-clock/layout-small-big.png b/assets/images/block-clock/layout-small-big.png
new file mode 100644
index 0000000..d6e18df
Binary files /dev/null and b/assets/images/block-clock/layout-small-big.png differ
diff --git a/assets/images/block-clock/layout-small.png b/assets/images/block-clock/layout-small.png
new file mode 100644
index 0000000..0f68478
Binary files /dev/null and b/assets/images/block-clock/layout-small.png differ
diff --git a/assets/images/block-clock/layout-small@2x.png b/assets/images/block-clock/layout-small@2x.png
new file mode 100644
index 0000000..56158b5
Binary files /dev/null and b/assets/images/block-clock/layout-small@2x.png differ
diff --git a/assets/images/block-clock/layout-tiny-big.png b/assets/images/block-clock/layout-tiny-big.png
new file mode 100644
index 0000000..f986c89
Binary files /dev/null and b/assets/images/block-clock/layout-tiny-big.png differ
diff --git a/assets/images/block-clock/layout-tiny.png b/assets/images/block-clock/layout-tiny.png
new file mode 100644
index 0000000..25ed186
Binary files /dev/null and b/assets/images/block-clock/layout-tiny.png differ
diff --git a/assets/images/block-clock/layout-tiny@2x.png b/assets/images/block-clock/layout-tiny@2x.png
new file mode 100644
index 0000000..44070b8
Binary files /dev/null and b/assets/images/block-clock/layout-tiny@2x.png differ
diff --git a/pages/block-clock.md b/pages/block-clock.md
index 5136996..65308c2 100644
--- a/pages/block-clock.md
+++ b/pages/block-clock.md
@@ -85,6 +85,54 @@ And the block clock in light mode, which simply switches the [color variables]({
 	height = 622
 %}
 
+## Layout logic
+
+By default, the circular block clock is 200x200px in size, centered on the screen. The top bar is 46px tall and absolutely positioned.
+
+When a network indicator is shown, the bounding box of the block clock and network indicator is used for centering within the window.
+
+{% include picture.html
+	image = "/assets/images/block-clock/layout-compact.png"
+	retina = "/assets/images/block-clock/layout-compact@2x.png"
+	big = "/assets/images/block-clock/layout-compact-big.png"
+	alt-text = "Default layout logic diagram"
+	width = 800
+	height = 366
+%}
+
+In [showcase]({{ '/showcase/' | relative_url }}) mode, the block clock tries to maintain 1/3 of the screen width or height, whichever value is smaller. It maintains a minimum size of 200x200px.
+
+{% include picture.html
+	image = "/assets/images/block-clock/layout-showcase.png"
+	retina = "/assets/images/block-clock/layout-showcase@2x.png"
+	big = "/assets/images/block-clock/layout-showcase-big.png"
+	alt-text = "Layout logic diagram for showcase mode"
+	width = 800
+	height = 366
+%}
+
+At smaller sizes (height < 400), the network indicator moves to the top-left corner of the window, making more room for the block clock, which tries to keep a size of 200x200px.
+
+{% include picture.html
+	image = "/assets/images/block-clock/layout-small.png"
+	retina = "/assets/images/block-clock/layout-small@2x.png"
+	big = "/assets/images/block-clock/layout-small-big.png"
+	alt-text = "Layout logic diagram for small window sizes"
+	width = 800
+	height = 427
+%}
+
+At even smaller sizes, the primary factor becomes a minimum side padding of 25px. The block clock shrinks smaller than it's 200x200px default size. The top bar height shrinks to 36px.
+
+{% include picture.html
+	image = "/assets/images/block-clock/layout-tiny.png"
+	retina = "/assets/images/block-clock/layout-tiny@2x.png"
+	big = "/assets/images/block-clock/layout-tiny-big.png"
+	alt-text = "Layout logic diagram for very small window sizes"
+	width = 800
+	height = 693
+%}
+
 ## Prototype
 
 This web prototype was done to validate if the block clock dial renders well with realistic data (or if segments get too small), to explore animations & interactions, and test widgets.