Add tablet & mobile support to a bunch of things

src/ui/component/core/LabelledTextInputBlock.ts

@@ -45,10 +45,13 @@ const LabelledTextInputBlock = Component.Builder((block): LabelledTextInputBlock
 						.appendTo(labels)
 
 					labelInitialiser!(label)
-					inputs.addInput(input => input
+					let input!: TextInput
+					inputs.addInput(i => input = i
 						.style('labelled-text-input-block-input')
 						.style.setProperty('grid-row', `${rowNumber}`)
-						.tweak(input => inputInitialiser(input.setLabel(label), label)))
+						.tweak(input => inputInitialiser(input.setLabel(label), label))
+					)
+					input.parent?.style('labelled-text-input-block-input-wrapper')
 					labelInitialiser = undefined
 					return block
 				},

style/app.chiri

@@ -15,7 +15,10 @@
 		#{w} 1fr #{w}
 
 	#tablet:
-		%contents
+		grid-template-columns: 1fr
+		grid-template-areas:
+			"masthead"
+			"content"
 
 	&-content:
 		%grid
@@ -26,7 +29,7 @@
 
 		#tablet:
 			%block
-			%overflow-visible
+			%padding-left-0
 
 		&-related:
 			width: #{w}
@@ -36,7 +39,10 @@
 
 		@after:
 			%block
-			height: 12rem
+			height: calc($space-5 * 4)
+
+			#flush:
+				%height-3
 
 .masthead:
 	grid-area: masthead

style/component/core/block.chiri

@@ -6,11 +6,16 @@
 	%scheme-light-dark
 	%border-box
 	%width-content
+	max-width: 100vw
 	%z-index-fg
 	$block-padding: $space-4
 	padding: $block-padding
 	#block
 
+	#flush:
+		%border-radius-0
+		$block-padding: $space-3
+
 	@before:
 		%block
 		%absolute
@@ -21,11 +26,8 @@
 		%block-border-shadow
 		$border-colour: $block-border-colour
 
-	:container root (width <= #{content-width}):
-		%border-radius-0
-		box-shadow:
-			#{box-shadow-inset-border-block-1},
-			#{box-shadow-1}
+		#flush:
+			%border-radius-0
 
 	&-header:
 		margin: calc(-1 * $block-padding)
@@ -40,6 +42,9 @@
 		$border-colour: $block-border-colour
 		background: light-dark(#{alpha(0.2, $light-0)}, #{alpha(0.02, $colour-0)})
 
+		#flush:
+			%border-radius-0
+
 	&-title:
 		%z-index-fg
 		%column-1
@@ -83,6 +88,9 @@
 		%background-unclip
 		%z-index-fg
 
+		#flush:
+			%border-radius-0
+
 	&-type-flush:
 		#after: .block
 		%background-none
@@ -126,6 +134,9 @@
 		:last:
 			%border-bottom-radius-2
 
+			#flush:
+				%border-radius-0
+
 		@after:
 			%block
 			%absolute

style/component/core/labelled-row.chiri

@@ -11,11 +11,20 @@
 		%align-items-start
 		%span-2
 
+		#flush:
+			%flex
+			%flex-column
+			%gap-0
+
 	&-label:
 		%sticky
 		%top-0
 		%padding-2-0
 
+		#flush:
+			%padding-0
+
 	&-content:
 		%block
 		%relative
+		%width-100

style/component/core/labelled-table.chiri

@@ -2,3 +2,7 @@
 	%gap-3
 	%grid
 	grid-template-columns: auto 1fr
+
+	#flush:
+		%flex
+		%flex-column

style/component/core/labelled-text-input-block.chiri

@@ -1,9 +1,15 @@
 .labelled-text-input-block:
+	%relative
 	%row-gap-0
 
 	&-labels:
 		%contents
 
+		#flush:
+			%flex
+			%flex-wrap
+			%gap-4
+
 	&-inputs:
 		%contents
 
@@ -13,3 +19,7 @@
 
 	&-input:
 		%column-2
+		%width-100
+
+		&-wrapper:
+			%width-100

style/component/primary-nav.chiri

@@ -3,6 +3,9 @@
 	%flex-column
 	%gap-4
 
+	#flush:
+		%gap-3
+
 	&-popover:
 		max-height: calc(100vh - $space-2 * 2 + $space-1 - $masthead-height)
 		max-width: min(100vw - $space-2 * 2 + $space-1 / 3, $space-5 * 6)
@@ -14,6 +17,9 @@
 		%flex-column
 		%gap-4
 
+		#flush:
+			%gap-3
+
 	&-top:
 		%justify-content-start
 		%grow

style/index.chiri

@@ -9,6 +9,7 @@
 #import:
 	macro/block
 	macro/background-gradient
+	macro/thresholds
 
 #import:
 	mixins

style/macro/thresholds.chiri

@@ -0,0 +1,9 @@
+#macro tablet:
+	#body!component content
+	:container root (width < calc(#{space["5"]} * 20)):
+		#include content
+
+#macro flush:
+	#body!component content
+	:container root (width < #{content-width}):
+		#include content

style/mixins.chiri

@@ -14,7 +14,17 @@
 		1.8
 		2.4
 
-	#list!dec font-size-mins = [
+	#list!dec font-sizes-mobile = [
+		0.6
+		0.8
+		0.9
+		1.0
+		1.2
+		1.4
+		1.6
+		1.8
+
+	#list!dec font-sizes-min = [
 		0.6
 		0.8
 		0.9
@@ -25,10 +35,19 @@
 		1.2
 
 	#each in font-sizes as var i, var font-size:
+		$font-#{i}: #{font-size}rem
+		$font-min-#{i}: #{font-sizes-min[i]}rem
+		$font-scaling-#{i}: #{font-size}
 		%font-#{i}:
-			$font-size-base: #{font-size}rem
+			$font-size-base: $font-#{i}
 			$font-size: round(calc($font-size-base / $font-scale-factor), 1px)
-			$font-scaling: #{font-size}
+			$font-scaling: $font-scaling-#{i}
 			font-size: $font-size
 
-			$font-size-min: #{font-size-mins[i]}rem
+			$font-size-min: $font-min-#{i}
+
+	.body:
+		#flush:
+			#each in font-sizes-mobile as var i, var font-size:
+				$font-#{i}: #{font-size}rem
+				$font-scaling-#{i}: #{font-size}

style/root.chiri

@@ -1,8 +1,3 @@
-#macro tablet:
-	#body!component content
-	:container root (width < calc(#{space["5"]} * 20)):
-		#include content
-
 %overflow-hidden
 %absolute
 %inset-0
@@ -30,6 +25,7 @@ $masthead-height: calc(round(up, $font-4 * 1.2, 1px) + $space-1 * 2 + $space-2 *
 .body:
 	%margin-0
 	%overflow-hidden
+	%font-3
 
 	#tablet:
 		%overflow-auto-y

style/var/number.chiri

@@ -1 +1 @@
-#string content-width = "calc($space-5 * 13)
+#string content-width = "calc(#{space["5"]} * 13)

style/view/view.chiri

@@ -6,6 +6,14 @@
 	grid-template-columns: 1fr auto 1fr $app-column-width
 	grid-template-areas: "meta content related"
 
+	#tablet:
+		%flex
+		%flex-column
+		%align-items-centre
+
+	#flush:
+		%padding-0
+
 	&-container:
 		%contents
 
@@ -58,6 +66,13 @@
 			%align-self-start
 			%align-items-end
 
+			#tablet:
+				%relative
+				%top-0
+				%unmargin-bottom-3
+				%margin-top-2
+				%padding-left-3
+
 		&-info:
 			%width-fit
 
@@ -92,6 +107,9 @@
 		%column-2
 		%align-self-start
 
+		#tablet:
+			%align-self-centre
+
 #macro view:
 	#string type
 	#body!component body