responsive design

src/components/Player.vue

@@ -234,15 +234,14 @@ export default {
       return indexAdjusted < session.lockedVote - 1;
     },
     zoom: function() {
-      const unit = window.innerWidth > window.innerHeight ? "vh" : "vw";
       if (this.players.length < 7) {
-        return { width: 18 + this.grimoire.zoom + unit };
+        return { width: 18 + this.grimoire.zoom + "vmin" };
       } else if (this.players.length <= 10) {
-        return { width: 16 + this.grimoire.zoom + unit };
+        return { width: 16 + this.grimoire.zoom + "vmin" };
       } else if (this.players.length <= 15) {
-        return { width: 14 + this.grimoire.zoom + unit };
+        return { width: 14 + this.grimoire.zoom + "vmin" };
       } else {
-        return { width: 12 + this.grimoire.zoom + unit };
+        return { width: 12 + this.grimoire.zoom + "vmin" };
       }
     }
   },

src/components/TownSquare.vue

@@ -362,15 +362,16 @@ export default {
 
 .circle {
   padding: 0;
-  width: 100%;
-  height: 100%;
+  width: 100vmin;
+  height: 100vmin;
   list-style: none;
   margin: 0;
 
   > li {
     position: absolute;
     left: 50%;
-    height: 50%;
+    height: 50vmin;
+    max-height: 50%;
     transform-origin: 0 100%;
     pointer-events: none;
 
@@ -498,7 +499,7 @@ export default {
     top: 10px;
   }
   &.storytelling{
-    bottom: 20vmin;
+    bottom: 10px;
     left: auto;
     right: 10px;
     width: min-content;
@@ -556,8 +557,8 @@ export default {
     align-items: center;
     justify-content: center;
     li {
-      width: 14vh;
-      height: 14vh;
+      width: 14vmin;
+      height: 14vmin;
       margin: 0 0.5%;
       display: inline-block;
       transition: all 250ms;

src/components/modals/FabledModal.vue

@@ -48,7 +48,7 @@ export default {
 
 ul.tokens li {
   border-radius: 50%;
-  width: 8vw;
+  width: 8vmax;
   margin: 0.5%;
   transition: transform 500ms ease;
 

src/components/modals/Modal.vue

@@ -66,7 +66,8 @@ export default {
   display: flex;
   flex-direction: column;
   max-height: 80vh;
-  max-width: 80vw;
+  width:90vw;
+  max-width: 1800px;
 
   .editions &,
   .vote-history &,
@@ -78,7 +79,6 @@ export default {
   .roles &,
   .characters & {
     max-height: 100vh;
-    max-width: 60vw;
   }
 
   ul {

src/components/modals/ReferenceModal.vue

@@ -214,7 +214,6 @@ h3 {
 .team {
   display: flex;
   align-items: stretch;
-  width: 100%;
   &:not(:last-child):after {
     content: " ";
     display: block;
@@ -254,20 +253,25 @@ h3 {
 
 ul {
   flex-grow: 1;
-  display: flex;
-  padding: 5px 0;
+  display: grid;
+  width: calc(100% - 35px);
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  padding: 15px 5px;
 
   li {
     display: flex;
     align-items: center;
-    flex-grow: 1;
-    width: 420px;
+    max-width: 100%;
+    text-align: justify;
     .icon {
-      width: 8vh;
-      background-size: cover;
-      background-position: 0 -5px;
+      width: 12vmin;
+      background-size: contain;
+      background-position: center right;
+      background-repeat: no-repeat;
       flex-shrink: 0;
       flex-grow: 0;
+      position: relative;
+      top: 0.5em;
       &:after {
         content: " ";
         display: block;
@@ -294,16 +298,11 @@ ul {
   }
 }
 
-/** break into 1 column below 1200px **/
-@media screen and (max-width: 1199.98px) {
-  .modal {
-    max-width: 60%;
-  }
+/** break into 1 column below 600px **/
+@media screen and (max-width: 600px) {
   ul {
+    grid-template-columns: 1fr;
     li {
-      .icon {
-        width: 6vh;
-      }
       .role {
         line-height: 100%;
       }
@@ -318,12 +317,8 @@ ul {
       }
     }
   }
-}
-
-/** trim icon size on maximized one-column sheet **/
-@media screen and (max-width: 991.98px) {
-  .characters .modal.maximized ul li .icon {
-    width: 5.1vh;
+  .team aside {
+    width: 15px;
   }
 }
 

src/components/modals/RoleModal.vue

@@ -117,7 +117,7 @@ export default {
 
 ul.tokens li {
   border-radius: 50%;
-  width: 6vw;
+  width: 6vmax;
   margin: 1%;
   transition: transform 500ms ease;
 

src/components/modals/RolesModal.vue

@@ -173,10 +173,10 @@ export default {
 @import "../../vars.scss";
 
 ul.tokens {
-  padding-left: 5%;
+  padding-left: 5vmin;
   li {
     border-radius: 50%;
-    width: 5vw;
+    width: 5vmax;
     margin: 5px;
     opacity: 0.5;
     transition: all 250ms;