diff --git a/packages/play-node-go/src/components/Button/Room/Room.scss b/packages/play-node-go/src/components/Button/Room/Room.scss index 708156d..a8cef1f 100644 --- a/packages/play-node-go/src/components/Button/Room/Room.scss +++ b/packages/play-node-go/src/components/Button/Room/Room.scss @@ -3,18 +3,16 @@ div.RoomButton { display: grid; + grid-template-columns: [left] 1fr [right]; + grid-template-rows: [top] 1fr [middle] 4fr [bottom]; height: 20vh; padding: 1vw; width: 20vh; - grid-template-columns: [left] 1fr [right]; - grid-template-rows: [top] 1fr [middle] 4fr [bottom]; .RoomButton__room-link { + @include gameViewLabel; align-self: self-end; grid-area: top/left/middle/right; - // margin: 0 auto; - @include gameViewLabel; - // text-transform: capitalize; max-width: fit-content; z-index: 1; @@ -24,76 +22,76 @@ div.RoomButton { } div.small-room { + display: grid; grid-area: top/left/bottom/right; + grid-template-rows: [sky-start] 4vh [roof-start] 5vh [body-start] 1fr [body-end]; height: 100%; width: 100%; - // background-color: #f00; - display: grid; - grid-template-rows: [sky-start] 4vh [roof-start] 5vh [body-start] 1fr [body-end]; .small-room__roof { display: grid; grid-row: roof-start / body-start; - height: 100%; - max-width: 20vh; grid-template-columns: [left] 10vh [middle] 10vh [right]; grid-template-rows: 1fr; + height: 100%; + max-width: 20vh; .small-room__roof-top { + background: map-get($small-room, "roof"); + box-shadow: 0 0.35vh 0.75vh map-get($colors, "home"); + grid-row: 1 / 2; height: 0.7vh; - width: 12vh; position: relative; top: 3vh; - background: map-get($small-room, "roof"); - grid-row: 1 / 2; - box-shadow: 0 0.35vh 0.75vh map-get($colors, "home"); + width: 12vh; &--left { grid-column: left / middle; - transform: rotate(-26deg); left: -1.2vh; + transform: rotate(-26deg); } &--right { grid-column: middle / right; - transform: rotate(26deg); left: -0.8vh; + transform: rotate(26deg); } } &--left { border-right: map-get($small-room, "body") solid 10vh; border-top: map-get($colors, "home") solid 5vh; - height: 0; grid-column: left / middle; + height: 0; } + &--right { border-left: map-get($small-room, "body") solid 10vh; border-top: map-get($colors, "home") solid 5vh; - height: 0; grid-column: middle / right; + height: 0; } } .small-room__body { - grid-row: body-start / body-end; background-color: map-get($small-room, "body"); - width: 80%; - justify-self: center; display: grid; - grid-template-rows: 1fr 1vh 5fr 0.75vh; - grid-template-columns: 0.5vh 1vh 2fr 1vh 3fr 1vh 2fr 1vh 0.5vh; + grid-row: body-start / body-end; grid-template-areas: "trim-left gap-left top-left gap-mid-left top-mid gap-mid-right top-right gap-right trim-right" "trim-left gap-left top-left gap-mid-left top-mid gap-mid-right top-right gap-right trim-right" "trim-left gap-left window--left gap-mid-left door gap-mid-right window--right gap-right trim-right" "trim-left trim--bottom-left trim--bottom-left trim--bottom-left door trim--bottom-right trim--bottom-right trim--bottom-right trim-right"; + grid-template-columns: 0.5vh 1vh 2fr 1vh 3fr 1vh 2fr 1vh 0.5vh; + grid-template-rows: 1fr 1vh 5fr 0.75vh; + justify-self: center; + width: 80%; } .small-room__trim { - width: 100%; - height: 100%; background-color: map-get($small-room, "frame"); + height: 100%; + width: 100%; &--left { grid-area: trim-left; @@ -115,16 +113,16 @@ div.RoomButton { } .small-room__sign { - grid-area: top-mid; background-color: map-get($small-room, "sign"); - width: 2vh; - height: 2vh; display: grid; - padding: 0.1vh; - grid-template-rows: 1fr 1fr; - grid-template-columns: 1fr 1fr; gap: 0.1vh; + grid-area: top-mid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr 1fr; + height: 2vh; justify-self: center; + padding: 0.1vh; + width: 2vh; .small-room__sign__stone { border-radius: 100%; @@ -141,12 +139,12 @@ div.RoomButton { .small-room__window { align-self: center; - height: 60%; - width: 100%; background: map-get($small-room, "window-x"), map-get($small-room, "window-y"); display: grid; - grid-template-rows: 1fr 5fr 1fr 5fr 1fr; grid-template-columns: 1fr 5fr 1fr 5fr 1fr; + grid-template-rows: 1fr 5fr 1fr 5fr 1fr; + height: 60%; + width: 100%; &--left { grid-area: window--left; @@ -157,8 +155,8 @@ div.RoomButton { .small-room__window-frame { background-color: map-get($small-room, "frame"); - width: 100%; height: 100%; + width: 100%; &--top { grid-area: 1/1/2/6; @@ -189,22 +187,22 @@ div.RoomButton { .small-room__door { grid-area: door; background: map-get($small-room, "door"); - width: 100%; - height: 100%; display: grid; grid-template-columns: 0.5vh 1fr 0.5vh; grid-template-rows: 0.5vh 1fr; + height: 100%; + width: 100%; .small-room__door-handle { - height: 0.75vh; - width: 0.75vh; - border-radius: 50%; - background: map-get($small-room, "door-handle"); - grid-area: 2/2/3/3; align-self: center; + background: map-get($small-room, "door-handle"); + border-radius: 50%; + box-shadow: 0.1vh 0.25vh 0.4vh rgba(30, 30, 30, 0.7); + grid-area: 2/2/3/3; + height: 0.75vh; justify-self: end; margin: 0.5vh 0.5vh 0 0; - box-shadow: 0.1vh 0.25vh 0.4vh rgba(30, 30, 30, 0.7); + width: 0.75vh; } .small-room__door-frame {