Style refinements

package-lock.json

@@ -1090,6 +1090,11 @@
         }
       }
     },
+    "@fontsource/great-vibes": {
+      "version": "4.5.10",
+      "resolved": "https://registry.npmjs.org/@fontsource/great-vibes/-/great-vibes-4.5.10.tgz",
+      "integrity": "sha512-ABrgq127wEex95tVBpa6zAjKDeBzq+c2eHw2qDs/V/Iw+Agp/NHO6I5AWv0iDkWHoboVfckmrDbKO+gchMo0cw=="
+    },
     "@fontsource/material-icons": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/@fontsource/material-icons/-/material-icons-4.5.4.tgz",

package.json

@@ -14,6 +14,7 @@
     "serve": "vite preview --host"
   },
   "dependencies": {
+    "@fontsource/great-vibes": "^4.5.10",
     "@fontsource/material-icons": "^4.5.4",
     "@fontsource/roboto-mono": "^4.5.8",
     "@pixi/app": "~6.3.2",

src/App.vue

@@ -24,6 +24,7 @@ import themes from "./data/themes";
 import settings, { gameComponents } from "./game/settings";
 import "./main.css";
 import "@fontsource/roboto-mono";
+import "@fontsource/great-vibes";
 import type { CSSProperties } from "vue";
 
 const useHeader = projInfo.useHeader;

src/components/Info.vue

@@ -1,12 +1,12 @@
 <template>
-    <Modal v-model="isOpen">
+    <Modal class="info-modal" v-model="isOpen">
         <template v-slot:header>
             <div class="info-modal-header">
                 <img class="info-modal-logo" v-if="logo" :src="logo" :alt="title" />
                 <div class="info-modal-title">
-                    <h2>{{ title }}</h2>
+                    <h2>- {{ title }} -</h2>
                     <h4>
-                        v{{ versionNumber }}<span v-if="versionTitle">: {{ versionTitle }}</span>
+                        - v{{ versionNumber }}<span v-if="versionTitle">: {{ versionTitle }}</span> -
                     </h4>
                 </div>
             </div>
@@ -95,6 +95,12 @@ function openChangelog() {
 </script>
 
 <style>
+.info-modal .modal-header {
+    font-family: unset;
+    font-weight: unset;
+    font-size: unset;
+    margin-top: unset;
+}
 .info-modal-header {
     display: flex;
     margin: -20px;
@@ -114,9 +120,17 @@ function openChangelog() {
 
 .info-modal-title {
     display: flex;
+    flex-grow: 1;
     flex-direction: column;
     padding: 10px 0;
-    margin-left: 10px;
+    text-align: center;
+}
+
+.info-modal-title h2 {
+    font-family: "Great Vibes", cursive;
+    font-weight: normal;
+    font-size: 64px;
+    margin-top: -40px;
 }
 
 .info-modal-discord-link {

src/components/Modal.vue

@@ -88,9 +88,10 @@ defineExpose({ isOpen, nodes });
 .modal-container {
     width: 640px;
     max-width: 95vw;
-    max-height: 95vh;
+    max-height: calc(95vh - 20px);
     background-color: var(--background);
     padding: 20px;
+    margin-top: 20px;
     border-radius: 5px;
     transition: all 0.3s ease;
     text-align: left;
@@ -102,6 +103,13 @@ defineExpose({ isOpen, nodes });
 
 .modal-header {
     width: 100%;
+    margin-top: -50px;
+    text-align: center;
+}
+.modal-header > h2 {
+    font-family: "Great Vibes", cursive;
+    font-weight: normal;
+    font-size: 64px;
 }
 
 .modal-body {

src/components/Nav.vue

@@ -168,7 +168,8 @@ function openDiscord() {
 }
 
 .title {
-    font-size: 36px;
+    font-family: "Great Vibes", cursive;
+    font-size: 46px;
     text-align: left;
     margin-left: 12px;
     cursor: unset;
@@ -177,6 +178,7 @@ function openDiscord() {
 .nav > .title {
     width: unset;
     flex-shrink: 1;
+    padding-right: 8px;
     overflow: hidden;
     white-space: nowrap;
 }

src/components/Options.vue

@@ -1,9 +1,7 @@
 <template>
     <Modal v-model="isOpen">
         <template v-slot:header>
-            <div class="header">
+            <h2>Options</h2>
-                <h2>Options</h2>
-            </div>
         </template>
         <template v-slot:body>
             <Select title="Theme" :options="themes" v-model="theme" />
@@ -77,9 +75,6 @@ const progressMethodTitle = jsx(() => (
 </script>
 
 <style scoped>
-.header {
-    margin-bottom: -10px;
-}
 
 *:deep() .tooltip-container {
     display: inline;

src/components/common/modifiers.css

@@ -1,5 +1,6 @@
 .modifier-container {
     display: flex;
+    padding: 1px 8px;
 }
 
 .modifier-container:nth-child(2n) {
@@ -9,6 +10,7 @@
 .modifier-amount {
     flex-basis: 100px;
     flex-shrink: 0;
+    text-align: right;
 }
 
 .modifier-description {

src/data/common.tsx

@@ -308,13 +308,13 @@ export function createCollapsibleModifierSections(
             const modifiers = unref(collapsed.value[i]) ? null : (
                 <>
                     <div class="modifier-container">
+                        <span class="modifier-description">
+                            {renderJSX(unref(processed.baseText[i]) ?? "Base")}
+                        </span>
                         <span class="modifier-amount">
                             {format(unref(processed.base[i]) ?? 1)}
                             {s.unit}
                         </span>
-                        <span class="modifier-description">
-                            {renderJSX(unref(processed.baseText[i]) ?? "Base")}
-                        </span>
                     </div>
                     {renderJSX(unref(s.modifier.description))}
                 </>
@@ -331,8 +331,15 @@ export function createCollapsibleModifierSections(
                         <br />
                         {modifiers}
                         <hr />
-                        Total: {format(s.modifier.apply(unref(processed.base[i]) ?? 1))}
+                        <div class="modifier-container">
-                        {s.unit}
+                            <span class="modifier-description">
+                                Total
+                            </span>
+                            <span class="modifier-amount">
+                                {format(s.modifier.apply(unref(processed.base[i]) ?? 1))}
+                                {s.unit}
+                            </span>
+                        </div>
                     </div>
                 </>
             );

src/game/modifiers.tsx

@@ -77,16 +77,16 @@ export function createAdditiveModifier<T extends AdditiveModifierOptions>(
                     ? undefined
                     : jsx(() => (
                           <div class="modifier-container">
-                              <span class="modifier-amount">
-                                  {Decimal.gte(unref(processedAddend), 0) ? "+" : ""}
-                                  {format(unref(processedAddend))}
-                              </span>
                               {unref(processedDescription) ? (
                                   <span class="modifier-description">
                                       {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
                                       {renderJSX(unref(processedDescription)!)}
                                   </span>
                               ) : null}
+                              <span class="modifier-amount">
+                                  {Decimal.gte(unref(processedAddend), 0) ? "+" : ""}
+                                  {format(unref(processedAddend))}
+                              </span>
                           </div>
                       ))
         };
@@ -125,15 +125,15 @@ export function createMultiplicativeModifier<T extends MultiplicativeModifierOpt
                     ? undefined
                     : jsx(() => (
                           <div class="modifier-container">
-                              <span class="modifier-amount">
-                                  x{format(unref(processedMultiplier))}
-                              </span>
                               {unref(processedDescription) ? (
                                   <span class="modifier-description">
                                       {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
                                       {renderJSX(unref(processedDescription)!)}
                                   </span>
                               ) : null}
+                              <span class="modifier-amount">
+                                  ×{format(unref(processedMultiplier))}
+                              </span>
                           </div>
                       ))
         };
@@ -194,9 +194,6 @@ export function createExponentialModifier<T extends ExponentialModifierOptions>(
                     ? undefined
                     : jsx(() => (
                           <div class="modifier-container">
-                              <span class="modifier-amount">
-                                  ^{format(unref(processedExponent))}
-                              </span>
                               {unref(processedDescription) ? (
                                   <span class="modifier-description">
                                       {/* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */}
@@ -204,6 +201,9 @@ export function createExponentialModifier<T extends ExponentialModifierOptions>(
                                       {supportLowNumbers ? " (+1 effective)" : null}
                                   </span>
                               ) : null}
+                              <span class="modifier-amount">
+                                  ^{format(unref(processedExponent))}
+                              </span>
                           </div>
                       ))
         };
@@ -279,16 +279,21 @@ export function createModifierSection(
             </h3>
             <br />
             <div class="modifier-container">
+                <span class="modifier-description">{renderJSX(baseText)}</span>
                 <span class="modifier-amount">
                     {format(base)}
                     {unit}
                 </span>
-                <span class="modifier-description">{renderJSX(baseText)}</span>
             </div>
             {renderJSX(unref(modifier.description))}
             <hr />
-            Total: {format(modifier.apply(base))}
+            <div class="modifier-container">
-            {unit}
+                <span class="modifier-description">Total</span>
+                <span class="modifier-amount">
+                    {format(modifier.apply(base))}
+                    {unit}
+                </span>
+            </div>
         </div>
     );
 }