add tableaus and icon data

1 files changed, 59 insertions, 6 deletions

diff --git a/land-and-freedom.scss b/land-and-freedom.scss
index 5dd9325..3602c26 100644
--- a/land-and-freedom.scss
+++ b/land-and-freedom.scss
@@ -6,7 +6,8 @@ $selected-color: yellow; //blue;
 
 main {
   // background-color: rgb(213, 196, 131);
-  background-color: darkolivegreen;
+  // background-color: darkolivegreen;
+  background-color: #7B904B;;
 }
 
 /* MAP */
@@ -43,15 +44,52 @@ main {
   }
 }
 
-#hand {
+.panel {
+  min-width: 1271px;
+  max-width: 1271px;
+  // background-color: hsl(34, 10%, 35%);
+  background-color: #58641D;
+  margin: 12px auto;
+  box-shadow: 1px 2px 4px #0004;
+  border: 2px solid #333;
+}
+
+.panel_body {
   display: flex;
-  flex-direction: row;
-  gap: 8px;
-  margin-top: 16px;
-  padding: 16px;
   justify-content: center;
+  flex-wrap: wrap;
+  padding: 12px;
+  gap: 12px;
+  min-height: 260px;
+}
+
+.panel_header {
+  color: white;
+  user-select: none;
+  font-weight: bold;
+  text-align: center;
+  border-bottom: 2px solid #333;
+  background-color: red;
 }
 
+#hand_header {
+  background-color: #273B09;
+}
+
+.panel_header[data-faction-id="a"] {
+  background: linear-gradient(45deg, black 50%, red 0);
+}
+
+// #hand,
+// .tableau {
+//   display: flex;
+//   flex-direction: row;
+//   gap: 8px;
+//   margin-top: 16px;
+//   padding: 16px;
+//   justify-content: center;
+// }
+
 .front {
   position: absolute;
   box-sizing: border-box;
@@ -102,6 +140,17 @@ main {
   height: 180px;
 }
 
+.blank_marker {
+  box-sizing: border-box;
+  position: absolute;
+  background-color: red;
+  width: 29px;
+  height: 29px;
+  border-radius: 50%;
+  box-shadow: 0 0 0 1px #333;
+  margin-top: 1px;
+}
+
 .standee {
   box-sizing: border-box;
   position: absolute;
@@ -114,15 +163,18 @@ main {
   transition-property: top, left;
   transition-duration: 700ms;
   transition-timing-function: ease;
+  z-index: 1;
   // opacity: 0.6;
 }
 
+.bonus.action,
 .card.action,
 .front.action,
 .standee.action {
   box-shadow: 0 0 0 3px $selectable-color;
 }
 
+.bonus.action:hover,
 .card.action:hover,
 .card.selected,
 .front.action:hover,
@@ -147,6 +199,7 @@ main {
   height: 54px;
   background-size: cover;
   background-repeat: no-repeat;
+  border-radius: 50%;
 }
 
 @for $i from 0 through 1 {