From 5cdd81017da7451214f548effc71ec717b3d3c4d Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Wed, 26 Oct 2011 18:15:01 -0400 Subject: [PATCH] colored card areas (deck, hand, etc) --- index.html | 2 +- style.less | 64 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 63 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 8ada84e..fc6742c 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,6 @@

Card Table

diff --git a/style.less b/style.less index 5df22bd..615961a 100644 --- a/style.less +++ b/style.less @@ -1,6 +1,18 @@ +@table-width: 1000px; +@table-height: 800px; + @card-width: 100px; @card-height: 140px; +@pile-width: @card-width * 1.3; +@hand-height: @card-height * 1.3; + +@area-lightness: 44%; +@area-border-color: #ccc; +@your-side-color: #ffe2e2; +@my-side-color: #e2ffe2; + + .shadow (@x: 0, @y: 0, @blur: 1px, @alpha) { @val: @x @y @blur rgba(0, 0, 0, @alpha); box-shadow: @val; @@ -23,8 +35,8 @@ h1 { } #table { - height: 700px; - width: 960px; + width: @table-width; + height: @table-height; background: #eee; position: relative; .shadow(2px, 2px, 10px, 0.4); @@ -66,3 +78,51 @@ h1 { } background-color: #ddd; } + +#my_side, #your_side { + position: absolute; + width: @table-width; + height: @hand-height; + left: 0; +} + +#your_side { + background: @your-side-color; + border-bottom: 2px solid @area-border-color; + top: 0; +} + +#my_side { + background: @my-side-color; + border-top: 2px solid @area-border-color; + top: @table-height - @hand-height - 2px; +} + +.discard_area, .deck_area, .hand_area { + position: absolute; + height: @hand-height; +} +.discard_area, .deck_area { + border-right: 2px solid @area-border-color; + width: @pile-width; +} +.hand_area { + width: @table-width - (@pile-width + 2px) * 2; +} +.discard_area { + left: 0px; +} +.deck_area { + left: @pile-width + 2px; +} +.hand_area { + left: (@pile-width + 2px) * 2; +} + +#your_side div { + top: 0px; +} + +#my_side div { + top: 0; // @table-height - @hand-height; +} -- 1.7.10.4