diff --git a/src/Main.elm b/src/Main.elm index 6e6a6e1..f257fe7 100644 --- a/src/Main.elm +++ b/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 diff --git a/style.sass b/style.sass index 0421b78..b6879ff 100644 --- a/style.sass +++ b/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