Adjust styles to be more compact with larger text.

fear_tracker/static/css/styles.css

@@ -1,3 +1,7 @@
+body {
+  font-size: 1.75em;
+}
+
 footer hr {
   border-width: 0;
   border-top: 1px solid lightgray;
@@ -148,8 +152,25 @@ footer a, footer a:visited {
 
 .player-body {
   display: none;
+  margin-left: 2ex;
+}
+
+.player-summary {
+  padding-left: 3ex;
+  text-indent: -3ex;
 }
 
 .player-visible:checked ~ .player-body {
   display: block;
 }
+
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+select, option {
+  font-size: inherit;
+  padding: 0;
+  margin: 0;
+}

fear_tracker/templates/game.html

@@ -61,26 +61,26 @@
         <div class="player-effects" id="player-{{ player.order }}-effects">
           {% for effect_num, effect in player.fear.items %}
           <div class="effect effect-{{ effect_num }}">
-            Effect #{{ effect_num|add:1 }}
+            #{{ effect_num|add:1 }}
 
             <input type="hidden" name="player-{{ player.order }}-effect-{{ effect_num }}-fear-orig" value="{{ effect.pure_fear }}">
             <select name="player-{{ player.order }}-effect-{{ effect_num }}-fear"{% if player.ready %} disabled{% endif %}>
             {% for val in range %}
-              <option value="{{ val }}"{% if val == effect.pure_fear %} selected="selected"{% endif %}>{{ val }} 😱</option>
+              <option value="{{ val }}"{% if val == effect.pure_fear %} selected="selected"{% endif %}>{{ val }}😱</option>
             {% endfor %}
             </select>
 
             <input type="hidden" name="player-{{ player.order }}-effect-{{ effect_num }}-towns-orig" value="{{ effect.towns }}">
             <select name="player-{{ player.order }}-effect-{{ effect_num }}-towns"{% if player.ready %} disabled{% endif %}>
             {% for val in range %}
-              <option value="{{ val }}"{% if val == effect.towns %} selected="selected"{% endif %}>{{ val }} 🏠</option>
+              <option value="{{ val }}"{% if val == effect.towns %} selected="selected"{% endif %}>{{ val }}🏠</option>
             {% endfor %}
             </select>
 
             <input type="hidden" name="player-{{ player.order }}-effect-{{ effect_num }}-cities-orig" value="{{ effect.cities }}">
             <select name="player-{{ player.order }}-effect-{{ effect_num }}-cities"{% if player.ready %} disabled{% endif %}>
             {% for val in range %}
-              <option value="{{ val }}"{% if val == effect.cities %} selected="selected"{% endif %}>{{ val }} 🏙️</option>
+              <option value="{{ val }}"{% if val == effect.cities %} selected="selected"{% endif %}>{{ val }}🏙️</option>
             {% endfor %}
             </select>
           </div>
@@ -106,26 +106,26 @@
 {% if not results_only %}
   <template id="effect-template">
     <div class="effect">
-      Effect #<span class="effect-num">?</span>
+      #<span class="effect-num">?</span>
 
       <input type="hidden" class="fear-orig" value="0">
       <select class="fear">
       {% for val in range %}
-        <option value="{{ val }}"{% if val == 0 %} selected="selected"{% endif %}>{{ val }} 😱</option>
+        <option value="{{ val }}"{% if val == 0 %} selected="selected"{% endif %}>{{ val }}😱</option>
       {% endfor %}
       </select>
 
       <input type="hidden" class="towns-orig" value="0">
       <select class="towns">
       {% for val in range %}
-        <option value="{{ val }}"{% if val == 0 %} selected="selected"{% endif %}>{{ val }} 🏠</option>
+        <option value="{{ val }}"{% if val == 0 %} selected="selected"{% endif %}>{{ val }}🏠</option>
       {% endfor %}
       </select>
 
       <input type="hidden" class="cities-orig" value="0">
       <select class="cities">
       {% for val in range %}
-        <option value="{{ val }}"{% if val == 0 %} selected="selected"{% endif %}>{{ val }} 🏙️</option>
+        <option value="{{ val }}"{% if val == 0 %} selected="selected"{% endif %}>{{ val }}🏙️</option>
       {% endfor %}
       </select>
     </div>