Make everything a little bit smaller

src/Main.elm

@@ -179,7 +179,7 @@ viewTile isTileHeld columnIndex tileIndex tile =
     --   )
     , attributeIf isTileHeld (onMouseEnter <| HeldOverNewTile columnIndex tileIndex)
     ]
-    [ viewGrip 30 columnIndex tileIndex tile
+    [ viewGrip 24 columnIndex tileIndex tile
     , input
       [ value tile.text
       , onInput (SetTileText columnIndex tileIndex)
@@ -190,8 +190,8 @@ viewTile isTileHeld columnIndex tileIndex tile =
       []
     , svg
       [ Svg.Attributes.class "tile-stickers"
-      , height "80"
-      , width "400"
+      , height "64"
+      , width "320"
       , style "user-select" "none"
       ]
       (map viewSticker tile.stickers)
@@ -243,7 +243,7 @@ viewMiniTile word =
     [ class "tile"
     , class "mini-tile"
     ]
-    [ viewGrip 20 -1 -1 { text = word, stickers = [] }
+    [ viewGrip 16 -1 -1 { text = word, stickers = [] }
     , input
       [ value word
       , disabled True

style.sass

@@ -3,12 +3,12 @@ button
 
 h3
 	font-family: 'Rent Strike'
-	font-size: 5em
-	margin: 30px
+	font-size: 4em
+	margin: 24px
 
 input
 	font-family: 'Rent Strike'
-	font-size: 1.5em
+	font-size: 1.2em
 
 .columns
 	display: flex
@@ -33,8 +33,8 @@ input
 		--color-weak: #f9e5db
 
 	.column
-		width: 400px
-		padding: 20px
+		width: 320px
+		padding: 64px
 
 		& > h3
 			color: var(--color-strong)
@@ -45,51 +45,50 @@ input
 			text-align: center
 
 		#hover-tile
-			height: 110px
-			margin-top: -15px
+			height: 88px
+			margin-top: -12px
 
 .tile
 	position: relative
-	height: 80px
-	width: 400px
+	height: 64px
+	width: 320px
 
 	display: grid
 	align-items: center
-	margin-bottom: 15px
+	margin-bottom: 12px
 	border: none
 	background-color: var(--color-weak)
 
 	&.mini-tile
-		height: 50px
-		width: 250px
+		height: 40px
+		width: 200px
 
 		--color-strong: #999
 		--color-weak: #ccc
 
 		svg.drag-gripper
-			padding: 6px
-			top: 9px
-			left: 7px
+			padding: 5px
+			top: 7px
+			left: 5px
 
 		input
-			font-size: 1.7em
+			font-size: 1.36em
 			color: black
 
 	svg.drag-gripper
 		color: var(--color-strong)
 		position: absolute
-		padding: 8px
-		top: 17px // Centered in 80px with 30px body and 8px padding
-		left: 15px
-		border-radius: 8px
+		padding: 6px
+		top: 14px // Centered in 64px with 24px body and 6px padding
+		left: 12px
 		cursor: grab
 
 	&::after
-		width: 400px
-		height: 20px
+		width: 320px
+		height: 64px
 		content: ''
 		position: absolute
-		top: -20px
+		top: -12px
 		z-index: -1 // Prevent fluttering when moving mouse up
 
 	input
@@ -100,7 +99,7 @@ input
 		background: none
 		border: none
 		text-align: center
-		font-size: 2.6em
+		font-size: 2.1em
 
 		&:focus-visible
 			border: none
@@ -115,7 +114,7 @@ input
 		padding: 0
 		text-align: center
 		font-weight: bold
-		font-size: 80px
+		font-size: 64px
 		color: white
 		line-height: 0
 
@@ -141,8 +140,8 @@ input
 
 	& > .tile
 		position: relative
-		top: -40px
-		left: -40px
+		top: -32px
+		left: -30px
 
 		--color-strong: #999
 		--color-weak: #ccc