setup fronts and tracks

1 files changed, 39 insertions, 4 deletions

diff --git a/land-and-freedom.scss b/land-and-freedom.scss
index 9c68e03..42f75e2 100644
--- a/land-and-freedom.scss
+++ b/land-and-freedom.scss
@@ -3,7 +3,7 @@
 
 main {
   // background-color: rgb(213, 196, 131);
-	background-color: darkolivegreen;
+  background-color: darkolivegreen;
 }
 
 /* MAP */
@@ -54,11 +54,21 @@ main {
   box-sizing: border-box;
   width: 93px;
   height: 102px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 4px;
   // background-color: yellow;
   // opacity: 0.5;
 }
 
-.front[data-front-id='3'] {
+.front .value {
+  font-weight: bold;
+  font-size: 30px;
+  margin-top: auto;
+}
+
+.front[data-front-id='m'] {
   width: 104px;
   height: 114px;
 }
@@ -67,11 +77,11 @@ main {
   background-size: 100% 100%;
   // width: 275px;
   // height: 375px;
-	width: 198px;
+  width: 198px;
   height: 270px;
   // border: 1px solid black;
   border-radius: 5px;
-	box-shadow: 0 0 0 1px #333;
+  box-shadow: 0 0 0 1px #333;
 }
 
 @for $i from 1 through 62 {
@@ -79,3 +89,28 @@ main {
     background-image: url('images/cards100/card_#{$i}.png');
   }
 }
+
+.card.event {
+  position: absolute;
+  // opacity: 0.5;
+  width: 132px;
+  height: 180px;
+}
+
+.standee {
+  box-sizing: border-box;
+  position: absolute;
+  width: 29px;
+  height: 35px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px #333;
+  // opacity: 0.6;
+}
+
+@for $i from 0 through 4 {
+  .standee[data-standee-id='#{$i}'] {
+    background-image: url('images/standees/standee_#{$i}.png');
+  }
+}