Improve readability and spacing of inventory item-line text (foundryv…

…tt#2403) - Add standard monospace and emoji fonts for the system - Use an FA icon for invested toggle - Increase font size of header
kolontaev · Jun 10, 2022 · fdbab7f · fdbab7f
1 parent e8e98bc
commit fdbab7f
Show file tree

Hide file tree

Showing 14 changed files with 90 additions and 69 deletions.
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
@@ -6,47 +6,47 @@
   font-style: normal;
   font-weight: 400;
   src: local(""),
-       url("../fonts/gelasio-v4-latin-regular.woff2") format("woff2"),
+       url("../fonts/gelasio-v4-latin-regular.woff2") format("woff2");
 }
 /* gelasio-italic - latin */
 @font-face {
   font-family: "Gelasio";
   font-style: italic;
   font-weight: 400;
   src: local(""),
-       url("../fonts/gelasio-v4-latin-italic.woff2") format("woff2"),
+       url("../fonts/gelasio-v4-latin-italic.woff2") format("woff2");
 }
 /* gelasio-500 - latin */
 @font-face {
   font-family: "Gelasio";
   font-style: normal;
   font-weight: 500;
   src: local(""),
-       url("../fonts/gelasio-v4-latin-500.woff2") format("woff2"),
+       url("../fonts/gelasio-v4-latin-500.woff2") format("woff2");
 }
 /* gelasio-500italic - latin */
 @font-face {
   font-family: "Gelasio";
   font-style: italic;
   font-weight: 500;
   src: local(""),
-       url("../fonts/gelasio-v4-latin-500italic.woff2") format("woff2"),
+       url("../fonts/gelasio-v4-latin-500italic.woff2") format("woff2");
 }
 /* gelasio-700 - latin */
 @font-face {
   font-family: "Gelasio";
   font-style: normal;
   font-weight: 700;
   src: local(""),
-       url("../fonts/gelasio-v4-latin-700.woff2") format("woff2"),
+       url("../fonts/gelasio-v4-latin-700.woff2") format("woff2");
 }
 /* gelasio-700italic - latin */
 @font-face {
   font-family: "Gelasio";
   font-style: italic;
   font-weight: 700;
   src: local(""),
-       url("../fonts/gelasio-v4-latin-700italic.woff2") format("woff2"),
+       url("../fonts/gelasio-v4-latin-700italic.woff2") format("woff2");
 }
 
 /* la-belle-aurore-regular - latin */
@@ -55,16 +55,7 @@
   font-style: normal;
   font-weight: 400;
   src: local(""),
-       url("../fonts/la-belle-aurore-v11-latin-regular.woff2") format("woff2"),
-}
-
-/* noto-sans-jp-regular - latin */
-@font-face {
-  font-family: "Noto Sans JP";
-  font-style: normal;
-  font-weight: 400;
-  src: local(""),
-       url("../fonts/noto-sans-jp-v28-latin-regular.woff2") format("woff2"),
+       url("../fonts/la-belle-aurore-v11-latin-regular.woff2") format("woff2");
 }
 
 /* Pathfinder action glyphs */
@@ -79,63 +70,63 @@
   font-style: normal;
   font-weight: 400;
   src: local(""),
-       url("../fonts/roboto-v29-latin-ext_latin_cyrillic-regular.woff2") format("woff2"),
+       url("../fonts/roboto-v29-latin-ext_latin_cyrillic-regular.woff2") format("woff2");
 }
 /* roboto-italic - latin-ext_latin */
 @font-face {
   font-family: "Roboto";
   font-style: italic;
   font-weight: 400;
   src: local(""),
-       url("../fonts/roboto-v29-latin-ext_latin_cyrillic-italic.woff2") format("woff2"),
+       url("../fonts/roboto-v29-latin-ext_latin_cyrillic-italic.woff2") format("woff2");
 }
 /* roboto-500 - latin-ext_latin */
 @font-face {
   font-family: "Roboto";
   font-style: normal;
   font-weight: 500;
   src: local(""),
-       url("../fonts/roboto-v29-latin-ext_latin_cyrillic-500.woff2") format("woff2"),
+       url("../fonts/roboto-v29-latin-ext_latin_cyrillic-500.woff2") format("woff2");
 }
 /* roboto-700 - latin-ext_latin */
 @font-face {
   font-family: "Roboto";
   font-style: normal;
   font-weight: 700;
   src: local(""),
-       url("../fonts/roboto-v29-latin-ext_latin_cyrillic-700.woff2") format("woff2"),
+       url("../fonts/roboto-v29-latin-ext_latin_cyrillic-700.woff2") format("woff2");
 }
 /* roboto-700italic - latin-ext_latin */
 @font-face {
   font-family: "Roboto";
   font-style: italic;
   font-weight: 700;
   src: local(""),
-       url("../fonts/roboto-v29-latin-ext_latin_cyrillic-700italic.woff2") format("woff2"),
+       url("../fonts/roboto-v29-latin-ext_latin_cyrillic-700italic.woff2") format("woff2");
 }
 /* roboto-500italic - latin-ext_latin */
 @font-face {
   font-family: "Roboto";
   font-style: italic;
   font-weight: 500;
   src: local(""),
-       url("../fonts/roboto-v29-latin-ext_latin_cyrillic-500italic.woff2") format("woff2"),
+       url("../fonts/roboto-v29-latin-ext_latin_cyrillic-500italic.woff2") format("woff2");
 }
 /* roboto-900 - latin-ext_latin */
 @font-face {
   font-family: "Roboto";
   font-style: normal;
   font-weight: 900;
   src: local(""),
-       url("../fonts/roboto-v29-latin-ext_latin_cyrillic-900.woff2") format("woff2"),
+       url("../fonts/roboto-v29-latin-ext_latin_cyrillic-900.woff2") format("woff2");
 }
 /* roboto-900italic - latin-ext_latin */
 @font-face {
   font-family: "Roboto";
   font-style: italic;
   font-weight: 900;
   src: local(""),
-       url("../fonts/roboto-v29-latin-ext_latin_cyrillic-900italic.woff2") format("woff2"),
+       url("../fonts/roboto-v29-latin-ext_latin_cyrillic-900italic.woff2") format("woff2");
 }
 
 /* roboto-condensed-regular - latin-ext_latin */
@@ -144,64 +135,105 @@
   font-style: normal;
   font-weight: 400;
   src: local(""),
-       url("../fonts/roboto-condensed-v24-latin-ext_latin_cyrillic-regular.woff2") format("woff2"),
+       url("../fonts/roboto-condensed-v24-latin-ext_latin_cyrillic-regular.woff2") format("woff2");
 }
 /* roboto-condensed-italic - latin-ext_latin */
 @font-face {
   font-family: "Roboto Condensed";
   font-style: italic;
   font-weight: 400;
   src: local(""),
-       url("../fonts/roboto-condensed-v24-latin-ext_latin_cyrillic-italic.woff2") format("woff2"),
+       url("../fonts/roboto-condensed-v24-latin-ext_latin_cyrillic-italic.woff2") format("woff2");
 }
 /* roboto-condensed-700 - latin-ext_latin */
 @font-face {
   font-family: "Roboto Condensed";
   font-style: normal;
   font-weight: 700;
   src: local(""),
-       url("../fonts/roboto-condensed-v24-latin-ext_latin_cyrillic-700.woff2") format("woff2"),
+       url("../fonts/roboto-condensed-v24-latin-ext_latin_cyrillic-700.woff2") format("woff2");
 }
 /* roboto-condensed-700italic - latin-ext_latin */
 @font-face {
   font-family: "Roboto Condensed";
   font-style: italic;
   font-weight: 700;
   src: local(""),
-       url("../fonts/roboto-condensed-v24-latin-ext_latin_cyrillic-700italic.woff2") format("woff2"),
+       url("../fonts/roboto-condensed-v24-latin-ext_latin_cyrillic-700italic.woff2") format("woff2");
+}
+
+/* roboto-mono-regular - latin-ext_latin_cyrillic */
+@font-face {
+  font-family: "Roboto Mono";
+  font-style: normal;
+  font-weight: 400;
+  src: local(""), url("../fonts/roboto-mono-v21-latin-ext_latin_cyrillic-regular.woff2") format("woff2");
+}
+/* roboto-mono-500 - latin-ext_latin_cyrillic */
+@font-face {
+  font-family: "Roboto Mono";
+  font-style: normal;
+  font-weight: 500;
+  src: local(""), url("../fonts/roboto-mono-v21-latin-ext_latin_cyrillic-500.woff2") format("woff2");
+}
+/* roboto-mono-700 - latin-ext_latin_cyrillic */
+@font-face {
+  font-family: "Roboto Mono";
+  font-style: normal;
+  font-weight: 700;
+  src: local(""), url("../fonts/roboto-mono-v21-latin-ext_latin_cyrillic-700.woff2") format("woff2");
 }
 
 /* vollkorn-regular - latin */
 @font-face {
   font-family: "Vollkorn";
   font-style: normal;
   font-weight: 400;
-  src: local(""),
-       url("../fonts/vollkorn-v13-latin-regular.woff2") format("woff2"),
+  src: local(""), url("../fonts/vollkorn-v13-latin-regular.woff2") format("woff2");
 }
 /* vollkorn-500 - latin */
 @font-face {
   font-family: "Vollkorn";
   font-style: normal;
   font-weight: 500;
-  src: local(""),
-       url("../fonts/vollkorn-v13-latin-500.woff2") format("woff2"),
+  src: local(""), url("../fonts/vollkorn-v13-latin-500.woff2") format("woff2");
 }
 /* vollkorn-700 - latin */
 @font-face {
   font-family: "Vollkorn";
   font-style: normal;
   font-weight: 700;
-  src: local(""),
-       url("../fonts/vollkorn-v13-latin-700.woff2") format("woff2"),
+  src: local(""), url("../fonts/vollkorn-v13-latin-700.woff2") format("woff2");
 }
 /* vollkorn-900 - latin */
 @font-face {
   font-family: "Vollkorn";
   font-style: normal;
   font-weight: 900;
-  src: local(""),
-       url("../fonts/vollkorn-v13-latin-900.woff2") format("woff2"),
+  src: local(""), url("../fonts/vollkorn-v13-latin-900.woff2") format("woff2");
+}
+
+/* noto-emoji-regular - emoji */
+@font-face {
+  font-family: "Noto Emoji";
+  font-style: normal;
+  font-weight: 400;
+  src: local(""), url("../fonts/noto-emoji-v24-emoji-regular.woff2") format("woff2");
+
+}
+/* noto-emoji-500 - emoji */
+@font-face {
+  font-family: "Noto Emoji";
+  font-style: normal;
+  font-weight: 500;
+  src: local(""), url("../fonts/noto-emoji-v24-emoji-400.woff2") format("woff2");
+}
+/* noto-emoji-700 - emoji */
+@font-face {
+  font-family: "Noto Emoji";
+  font-style: normal;
+  font-weight: 700;
+  src: local(""), url("../fonts/noto-emoji-v24-emoji-700.woff2") format("woff2");
 }
 
 :root {
@@ -222,8 +254,10 @@
 
     /** Font families */
     --body-serif: Gelasio, Georgia, serif;
+    --emoji: "Noto Emoji", serif;
     --sans-serif: Roboto, sans-serif;
     --sans-serif-condensed: "Roboto Condensed", var(--sans-serif);
+    --sans-serif-monospace: "Roboto Mono", monospace;
     --serif: Eczar, Georgia, serif;
     --serif-condensed: "Modesto Condensed", serif;
     --journal-cursive: "La Belle Aurore", cursive;

diff --git a/src/styles/actor/_inventory.scss b/src/styles/actor/_inventory.scss
@@ -62,7 +62,6 @@
             flex-wrap: wrap;
             font-size: var(--font-size-12);
             justify-content: flex-start;
-            padding: 0;
             width: 100%;
 
             &:last-child {
@@ -97,14 +96,16 @@
         .item-decrease-quantity,
         .item-increase-quantity {
             @include flex-center;
+            font-family: var(--sans-serif-monospace);
             height: 100%;
-            width: 18px;
             text-align: center;
+            width: 18px;
         }
     }
 
     .item-weight {
         flex: 0 0 36px;
+        font-weight: 500;
     }
 
     .item-controls {
@@ -169,7 +170,7 @@
 
     .inventory-header {
         font-family: var(--sans-serif);
-        font-size: var(--font-size-9);
+        font-size: var(--font-size-10);
         line-height: 1;
         text-transform: uppercase;
         letter-spacing: .05em;
@@ -207,17 +208,15 @@
 
         .item-invested-total {
             flex: none;
-            margin-right: 3px;
+            margin-right: 1em;
         }
     }
 
     .list-row {
         .item-controls {
             color: var(--body);
             .item-control {
-                &.item-toggle-invest,
-                &.item-toggle-equip,
-                &.item-carry-type {
+                &.item-toggle-invest, &.item-carry-type {
                     &.active {
                         color: var(--secondary);
                     }
@@ -230,12 +229,7 @@
 
                 &.item-toggle-invest {
                     color: rgba(black, 0.5);
-                    i {
-                        font-family: "Noto Sans JP", sans-serif;
-                        font-size: var(--font-size-16);
-                        position: relative;
-                        top: -4px;
-                    }
+                    font-size: var(--font-size-11);
                 }
             }
         }

diff --git a/src/styles/actor/character/_crafting.scss b/src/styles/actor/character/_crafting.scss
@@ -270,7 +270,7 @@
                     align-items: center;
 
                     .formula-quantity-adjust {
-                        font-family: monospace;
+                        font-family: var(--sans-serif-monospace);
                         @include flex-center;
                         height: 100%;
                         width: 18px;

diff --git a/src/styles/system/_world-clock.scss b/src/styles/system/_world-clock.scss
@@ -21,7 +21,7 @@
             }
 
             .sign {
-                font-family: monospace;
+                font-family: var(--sans-serif-monospace);
                 font-size: inherit;
             }
 

diff --git a/src/styles/ui/_icons.scss b/src/styles/ui/_icons.scss
@@ -5,7 +5,6 @@ $icons: (
     crystal-ball: \1f52e,
     dizzy: \1f4ab,
     diamond-with-dot: \1f4a0,
-    diamond-with-diamond: \25c8,
     gemstone: \1f48e,
     gem-stone: \1f48e,
     glowing-star: \1f31f,
@@ -25,6 +24,7 @@ $icons: (
 }
 
 .icon {
+    font-family: var(--emoji);
     font-style: normal;
 
     @each $name, $icon in $icons {

diff --git a/static/fonts/noto-emoji-v24-emoji-500.woff2 b/static/fonts/noto-emoji-v24-emoji-500.woff2
diff --git a/static/fonts/noto-emoji-v24-emoji-700.woff2 b/static/fonts/noto-emoji-v24-emoji-700.woff2
diff --git a/static/fonts/noto-emoji-v24-emoji-regular.woff2 b/static/fonts/noto-emoji-v24-emoji-regular.woff2
diff --git a/static/fonts/noto-sans-jp-v28-latin-regular.woff2 b/static/fonts/noto-sans-jp-v28-latin-regular.woff2
diff --git a/static/fonts/roboto-mono-v21-latin-ext_latin_cyrillic-500.woff2 b/static/fonts/roboto-mono-v21-latin-ext_latin_cyrillic-500.woff2
diff --git a/static/fonts/roboto-mono-v21-latin-ext_latin_cyrillic-700.woff2 b/static/fonts/roboto-mono-v21-latin-ext_latin_cyrillic-700.woff2
diff --git a/static/fonts/roboto-mono-v21-latin-ext_latin_cyrillic-regular.woff2 b/static/fonts/roboto-mono-v21-latin-ext_latin_cyrillic-regular.woff2
diff --git a/static/templates/actors/partials/carry-type.html b/static/templates/actors/partials/carry-type.html
@@ -1,12 +1,9 @@
-<a class="carry-type-hover item-carry-type item-control{{#if item.isEquipped}} active{{/if}}"
-    data-tooltip-content="#inventory-{{item.id}}-carryType">
-    <strong>
-        {{#if (and (eq item.data.data.equipped.carryType "held") (eq item.data.data.equipped.handsHeld 1))}}1<i class="fas fa-hand-rock"></i>{{/if}}
-        {{#if (and (eq item.data.data.equipped.carryType "held") (eq item.data.data.equipped.handsHeld 2))}}2<i class="fas fa-hand-rock"></i>{{/if}}
-        {{#if (eq item.data.data.equipped.carryType "worn")}}<i class="fas fa-tshirt"></i>{{/if}}
-        {{#if (eq item.data.data.equipped.carryType "stowed")}}<i class="fas fa-box"></i>{{/if}}
-        {{#if (eq item.data.data.equipped.carryType "dropped")}}<i class="fas fa-grip-lines"></i>{{/if}}
-    </strong>
+<a class="carry-type-hover item-carry-type item-control{{#if item.isEquipped}} active{{/if}}" data-tooltip-content="#inventory-{{item.id}}-carryType">
+    {{~#if (and (eq item.data.data.equipped.carryType "held") (eq item.data.data.equipped.handsHeld 1))}}1<i class="fas fa-hand-rock"></i>
+    {{~else if (and (eq item.data.data.equipped.carryType "held") (eq item.data.data.equipped.handsHeld 2))}}2<i class="fas fa-hand-rock"></i>
+    {{~else if (eq item.data.data.equipped.carryType "stowed")}}<i class="fas fa-box"></i>
+    {{~else if (eq item.data.data.equipped.carryType "dropped")}}<i class="fas fa-grip-lines"></i>
+    {{~else}}<i class="fas fa-tshirt"></i>{{/if~}}
 </a>
 <div class="hover-content carry-hover-content" id="inventory-{{item.id}}-carryType" data-item-id="{{item.id}}">
     <!-- {{item.data.data.usage.type}} / {{item.data.data.usage.where}} / {{item.data.data.usage.hands}} / {{item.data.data.usage.value}} -->
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,7 +21,7 @@ @@
                 }
                 .sign {
-                    font-family: monospace;
+                    font-family: var(--sans-serif-monospace);
                     font-size: inherit;
                 }
@@ Expand Down @@