use medallions

1 files changed, 43 insertions, 12 deletions

diff --git a/land-and-freedom.scss b/land-and-freedom.scss
index 6385944..ec183e5 100644
--- a/land-and-freedom.scss
+++ b/land-and-freedom.scss
@@ -67,6 +67,20 @@ main {
   grid-row: 2;
 }
 
+.role_medallions {
+  grid-row: 3;
+  grid-column: 1 / 3;
+  padding: 3px 4px;
+  display: flex;
+  flex-direction: row-reverse;
+  gap: 4px;
+}
+
+.role_info {
+  grid-row: 4;
+  grid-column: 1 / 3;
+}
+
 // #role_Anarchist::before {
 //   background-color: $anarchist-color;
 //   content: ' ';
@@ -93,10 +107,10 @@ main {
 }
 
 .role {
-  color:floralwhite;
+  color: floralwhite;
 
   a {
-    color:floralwhite;
+    color: floralwhite;
   }
 }
 
@@ -288,17 +302,25 @@ main {
   // opacity: 0.6;
 }
 
+.blank_marker.action,
 .bonus.action,
 .card.action,
 .front.action,
+.medallion.action,
 .standee.action {
   box-shadow: 0 0 0 3px $selectable-color;
 }
 
+.blank_marker.action {
+  z-index: 2;
+}
+
+.blank_marker.action:hover,
 .bonus.action:hover,
 .card.action:hover,
 .card.selected,
 .front.action:hover,
+.medallion.action:hover,
 .standee.action:hover {
   box-shadow: 0 0 0 3px $selected-color;
 }
@@ -332,9 +354,7 @@ main {
   }
 }
 
-.medaillon {
-  box-sizing: border-box;
-  position: absolute;
+.medallion {
   width: 47px;
   height: 47px;
   background-size: cover;
@@ -343,9 +363,14 @@ main {
   border-radius: 10px;
 }
 
+#medallions .medallion {
+  box-sizing: border-box;
+  position: absolute;
+}
+
 @for $i from 0 through 8 {
-  .medaillon[data-medaillon-id='#{$i}'] {
-    background-image: url('images/medaillons/medaillon_#{$i}.png');
+  .medallion[data-medallion-id='#{$i}'] {
+    background-image: url('images/medallions/medallion_#{$i}.png');
   }
 }
 
@@ -369,18 +394,24 @@ main {
 }
 #log .h2.anarchist {
   background-color: $anarchist-color;
-  color:floralwhite;
+  color: floralwhite;
 }
 #log .h2.communist {
   background-color: $communist-color;
-  color:floralwhite;
+  color: floralwhite;
 }
 #log .h2.moderate {
   background-color: $moderate-color;
-  color:floralwhite;
+  color: floralwhite;
 }
 #log .h2.fascist {
   background-color: $fascist-color;
 }
-#log div.i { padding-left: 32px; text-indent: -12px; }
-#log div.ii { padding-left: 44px; text-indent: -12px; }
\ No newline at end of file
+#log div.i {
+  padding-left: 32px;
+  text-indent: -12px;
+}
+#log div.ii {
+  padding-left: 44px;
+  text-indent: -12px;
+}