styling and reminder tokens

css/main.css

@@ -14,10 +14,10 @@
 html, body {
     font-size: 1.2em;
     line-height: 1.4;
-    background: black;
+    background: #333;
     color: white;
     height: 100%;
-    font-family: 'PapyrusW01', serif;
+    font-family: 'Roboto Condensed', sans-serif;
 }
 
 /*
@@ -110,15 +110,12 @@ textarea {
     box-sizing: border-box;
 }
 
-.square .player {
-
-}
+.square .player {margin-bottom: 10px;}
 
 .square .token {
-    background: gray;
     border-radius: 50%;
-    height: 150px;
-    width: 150px;
+    height: 156px;
+    width: 156px;
     background: url('../img/token.png') center center;
     background-size: 100%;
     display: inline-block;
@@ -131,24 +128,64 @@ textarea {
         1px -1px 0 #fff,
         -1px 1px 0 #fff,
          1px 1px 0 #fff,
-         0 0 5px rgba(0,0,0,0.5)
+         0 0 5px rgba(0,0,0,0.75);
+    padding-top: 110px;
+    box-sizing: border-box;
+    font-family: 'PapyrusW01', serif;
+    border: 3px solid black;
+    box-shadow: 0 0 10px rgba(0,0,0,0.5);
 }
 
-.square .token:after {
-    content: attr(data-role);
-    text-transform: capitalize;
+.square .token:before {
+    content: " ";
+    background-size: 100%;
     position: absolute;
-    bottom: 10px;
-    text-align: center;
     width: 100%;
+    height: 100%;
     left: 0;
+    top: 0;
 }
 
 .square .name {
+    font-size: 120%;
+    line-height: 120%;
+    text-shadow:
+            -2px -2px 0 #000,
+            2px -2px 0 #000,
+            -2px 2px 0 #000,
+            2px 2px 0 #000,
+            0 0 10px rgba(0,0,0,0.75);
 }
 
-.square .reminders {
-    margin-top: 20px;
+.square .reminder {
+    background: url('../img/reminder.png') center center;
+    background-size: 100%;
+    width: 76px;
+    height: 76px;
+    color: black;
+    font-size: 50%;
+    font-weight: bold;
+    display: block;
+    margin: 5px -38px 0;
+    text-align: center;
+    position: relative;
+    box-sizing: border-box;
+    padding-top: 47px;
+    border-radius: 50%;
+    border: 3px solid black;
+    box-shadow: 0 0 10px rgba(0,0,0,0.5);
+}
+
+.square .reminder:before {
+    content: " ";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-size: 100%;
+    background-position: center 0px;
+    background-repeat: no-repeat;
 }
 
 

css/roles.css

@@ -0,0 +1,252 @@
+.square .token.baron:before {
+  background-image: url("../img/icon-baron.png");
+}
+.square .token.baron:after {
+  content: "Baron";
+}
+
+.square .reminder.baron:before {
+  background-image: url("../img/icon-baron.png");
+}
+
+.square .token.butler:before {
+  background-image: url("../img/icon-butler.png");
+}
+.square .token.butler:after {
+  content: "Butler";
+}
+
+.square .reminder.butler:before {
+  background-image: url("../img/icon-butler.png");
+}
+
+.square .token.chef:before {
+  background-image: url("../img/icon-chef.png");
+}
+.square .token.chef:after {
+  content: "Chef";
+}
+
+.square .reminder.chef:before {
+  background-image: url("../img/icon-chef.png");
+}
+
+.square .token.drunk:before {
+  background-image: url("../img/icon-drunk.png");
+}
+.square .token.drunk:after {
+  content: "Drunk";
+}
+
+.square .reminder.drunk:before {
+  background-image: url("../img/icon-drunk.png");
+}
+
+.square .token.empath:before {
+  background-image: url("../img/icon-empath.png");
+}
+.square .token.empath:after {
+  content: "Empath";
+}
+
+.square .reminder.empath:before {
+  background-image: url("../img/icon-empath.png");
+}
+
+.square .token.fortuneteller:before {
+  background-image: url("../img/icon-fortuneteller.png");
+}
+.square .token.fortuneteller:after {
+  content: "Fortune Teller";
+}
+
+.square .reminder.fortuneteller:before {
+  background-image: url("../img/icon-fortuneteller.png");
+}
+
+.square .token.imp:before {
+  background-image: url("../img/icon-imp.png");
+}
+.square .token.imp:after {
+  content: "Imp";
+}
+
+.square .reminder.imp:before {
+  background-image: url("../img/icon-imp.png");
+}
+
+.square .token.investigator:before {
+  background-image: url("../img/icon-investigator.png");
+}
+.square .token.investigator:after {
+  content: "Investigator";
+}
+
+.square .reminder.investigator:before {
+  background-image: url("../img/icon-investigator.png");
+}
+
+.square .token.librarian:before {
+  background-image: url("../img/icon-librarian.png");
+}
+.square .token.librarian:after {
+  content: "Librarian";
+}
+
+.square .reminder.librarian:before {
+  background-image: url("../img/icon-librarian.png");
+}
+
+.square .token.mayor:before {
+  background-image: url("../img/icon-mayor.png");
+}
+.square .token.mayor:after {
+  content: "Mayor";
+}
+
+.square .reminder.mayor:before {
+  background-image: url("../img/icon-mayor.png");
+}
+
+.square .token.monk:before {
+  background-image: url("../img/icon-monk.png");
+}
+.square .token.monk:after {
+  content: "Monk";
+}
+
+.square .reminder.monk:before {
+  background-image: url("../img/icon-monk.png");
+}
+
+.square .token.poisoner:before {
+  background-image: url("../img/icon-poisoner.png");
+}
+.square .token.poisoner:after {
+  content: "Poisoner";
+}
+
+.square .reminder.poisoner:before {
+  background-image: url("../img/icon-poisoner.png");
+}
+
+.square .token.recluse:before {
+  background-image: url("../img/icon-recluse.png");
+}
+.square .token.recluse:after {
+  content: "Recluse";
+}
+
+.square .reminder.recluse:before {
+  background-image: url("../img/icon-recluse.png");
+}
+
+.square .token.ravenkeeper {
+  font-size: 80%;
+}
+.square .token.ravenkeeper:before {
+  background-image: url("../img/icon-ravenkeeper.png");
+}
+.square .token.ravenkeeper:after {
+  content: "Ravenkeeper";
+}
+
+.square .reminder.ravenkeeper:before {
+  background-image: url("../img/icon-ravenkeeper.png");
+}
+
+.square .token.saint:before {
+  background-image: url("../img/icon-saint.png");
+}
+.square .token.saint:after {
+  content: "Saint";
+}
+
+.square .reminder.saint:before {
+  background-image: url("../img/icon-saint.png");
+}
+
+.square .token.slayer:before {
+  background-image: url("../img/icon-slayer.png");
+}
+.square .token.slayer:after {
+  content: "Slayer";
+}
+
+.square .reminder.slayer:before {
+  background-image: url("../img/icon-slayer.png");
+}
+
+.square .token.soldier:before {
+  background-image: url("../img/icon-soldier.png");
+}
+.square .token.soldier:after {
+  content: "Soldier";
+}
+
+.square .reminder.soldier:before {
+  background-image: url("../img/icon-soldier.png");
+}
+
+.square .token.spy:before {
+  background-image: url("../img/icon-spy.png");
+}
+.square .token.spy:after {
+  content: "Spy";
+}
+
+.square .reminder.spy:before {
+  background-image: url("../img/icon-spy.png");
+}
+
+.square .token.scarletwoman:before {
+  background-image: url("../img/icon-scarletwoman.png");
+}
+.square .token.scarletwoman:after {
+  content: "Scarlet Woman";
+}
+
+.square .reminder.scarletwoman:before {
+  background-image: url("../img/icon-scarletwoman.png");
+}
+
+.square .token.undertaker {
+  font-size: 85%;
+}
+.square .token.undertaker:before {
+  background-image: url("../img/icon-undertaker.png");
+}
+.square .token.undertaker:after {
+  content: "Undertaker";
+}
+
+.square .reminder.undertaker:before {
+  background-image: url("../img/icon-undertaker.png");
+}
+
+.square .token.virgin:before {
+  background-image: url("../img/icon-virgin.png");
+}
+.square .token.virgin:after {
+  content: "Virgin";
+}
+
+.square .reminder.virgin:before {
+  background-image: url("../img/icon-virgin.png");
+}
+
+.square .token.washerwoman {
+  font-size: 75%;
+}
+.square .token.washerwoman:before {
+  background-image: url("../img/icon-washerwoman.png");
+}
+.square .token.washerwoman:after {
+  content: "Washerwoman";
+}
+
+.square .reminder.washerwoman:before {
+  background-image: url("../img/icon-washerwoman.png");
+}
+
+/*# sourceMappingURL=roles.css.map */

css/roles.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["roles.scss"],"names":[],"mappings":"AA0BI;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAXF;EAOE,WA/BF;;AAyBE;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAXF;EAOE,WA/BF;;AAyBE;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAVA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAXF;EAOE,WA/BF;;AAyBE;EACE;;AAEF;EACE;;;AAKJ;EACE","file":"roles.css"}

css/roles.scss

@@ -0,0 +1,39 @@
+$roles:
+  'baron' 'Baron',
+  'butler' 'Butler',
+  'chef' 'Chef',
+  'drunk' 'Drunk',
+  'empath' 'Empath',
+  'fortuneteller' 'Fortune Teller',
+  'imp' 'Imp',
+  'investigator' 'Investigator',
+  'librarian' 'Librarian',
+  'mayor' 'Mayor',
+  'monk' 'Monk',
+  'poisoner' 'Poisoner',
+  'recluse' 'Recluse',
+  'ravenkeeper' 'Ravenkeeper' 80%,
+  'saint' 'Saint',
+  'slayer' 'Slayer',
+  'soldier' 'Soldier',
+  'spy' 'Spy',
+  'scarletwoman' 'Scarlet Woman',
+  'undertaker' 'Undertaker' 85%,
+  'virgin' 'Virgin',
+  'washerwoman' 'Washerwoman' 75%;
+
+@each $img, $name, $fontsize in $roles {
+  .square .token.#{$img} {
+    &:before {
+      background-image: url('../img/icon-#{$img}.png');
+    }
+    &:after {
+      content: '#{$name}';
+    }
+    font-size: $fontsize;
+  }
+
+  .square .reminder.#{$img}:before {
+    background-image: url('../img/icon-#{$img}.png');
+  }
+}

index.html

@@ -12,9 +12,11 @@
   <!-- Place favicon.ico in the root directory -->
 
   <link href="//db.onlinewebfonts.com/c/a0e1b1883c0cf520e9c50d0cd91cd0d0?family=PapyrusW01" rel="stylesheet" type="text/css"/>
+  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="css/normalize.css">
-  <link rel="stylesheet" href="css/circle.css">
   <link rel="stylesheet" href="css/main.css">
+  <link rel="stylesheet" href="css/circle.css">
+  <link rel="stylesheet" href="css/roles.css">
 
   <meta name="theme-color" content="#000000">
 </head>
@@ -28,87 +30,87 @@
   <ul class="circle">
     <li>
       <div class="player">
-        <div class="token" data-role="spy"></div>
+        <div class="token spy"></div>
         <div class="name">Steffen</div>
       </div>
-      <div class="reminders">bla</div>
+      <div class="reminder drunk">Drunk</div>
     </li>
     <li>
       <div class="player">
-        <div class="token" data-role="spy"></div>
+        <div class="token baron"></div>
         <div class="name">Steffen</div>
       </div>
-      <div class="reminders">bla</div>
+      <div class="reminder drunk">Drunk</div>
     </li>
     <li>
       <div class="player">
-        <div class="token" data-role="spy"></div>
+        <div class="token chef"></div>
         <div class="name">Steffen</div>
       </div>
-      <div class="reminders">bla</div>
+      <div class="reminder drunk">Drunk</div>
     </li>
     <li>
       <div class="player">
-        <div class="token" data-role="spy"></div>
+        <div class="token empath"></div>
         <div class="name">Steffen</div>
       </div>
-      <div class="reminders">bla</div>
+      <div class="reminder drunk">Drunk</div>
     </li>
     <li>
       <div class="player">
-        <div class="token" data-role="spy"></div>
+        <div class="token imp"></div>
         <div class="name">Steffen</div>
       </div>
-      <div class="reminders">bla</div>
+      <div class="reminder drunk">Drunk</div>
     </li>
     <li>
       <div class="player">
-        <div class="token" data-role="spy"></div>
+        <div class="token mayor"></div>
         <div class="name">Steffen</div>
       </div>
-      <div class="reminders">bla</div>
+      <div class="reminder drunk">Drunk</div>
     </li>
     <li>
       <div class="player">
-        <div class="token" data-role="spy"></div>
+        <div class="token recluse"></div>
         <div class="name">Steffen</div>
       </div>
-      <div class="reminders">bla</div>
+      <div class="reminder drunk">Drunk</div>
     </li>
     <li>
       <div class="player">
-        <div class="token" data-role="spy"></div>
+        <div class="token butler"></div>
         <div class="name">Steffen</div>
       </div>
-      <div class="reminders">bla</div>
+      <div class="reminder drunk">Drunk</div>
     </li>
     <li>
       <div class="player">
-        <div class="token" data-role="spy"></div>
+        <div class="token virgin"></div>
         <div class="name">Steffen</div>
       </div>
-      <div class="reminders">bla</div>
+      <div class="reminder drunk">Drunk</div>
     </li>
     <li>
       <div class="player">
-        <div class="token" data-role="spy"></div>
+        <div class="token ravenkeeper"></div>
         <div class="name">Steffen</div>
       </div>
-      <div class="reminders">bla</div>
+      <div class="reminder fortuneteller">Red Herring</div>
     </li>
     <li>
       <div class="player">
-        <div class="token" data-role="spy"></div>
+        <div class="token washerwoman"></div>
         <div class="name">Steffen</div>
       </div>
-      <div class="reminders">bla</div>
+      <div class="reminder drunk">Drunk</div>
     </li>
     <li>
       <div class="player">
-        <div class="token" data-role="spy"></div>
+        <div class="token undertaker"></div>
         <div class="name">Steffen</div>
       </div>
-      <div class="reminders">bla</div>
+      <div class="reminder imp">Dies</div>
     </li>
   </ul>
 </div>