add latest

src/components/ChainTiers.vue

@@ -3,10 +3,10 @@
     flat
     bordered
     square
-    :class="[getColWidth, 'bg-grey-3', 'q-ma-sm', 'border']"
+    :class="[getColWidth, 'bg-grey-3', '', 'border']"
   >
     <q-card-section>
-      <div class="text-subtitle1 text-uppercase text-center">
+      <div class="text-subtitle1 text-uppercase text-center big-font">
         {{ title }}
       </div>
     </q-card-section>
@@ -34,4 +34,8 @@ const getColWidth = computed(() => {
 .border {
   border: 0.1rem solid $off-black;
 }
+
+.big-font {
+  font-size: 1.5rem;
+}
 </style>

src/components/DiagramRenderer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="row">
+  <div class="row q-gutter-sm q-mt-sm">
     <ChainTiers
       v-for="tier in productionChains"
       :key="tier.tierName"

src/components/ProductionChain.vue

@@ -31,17 +31,19 @@ watchEffect(() => {
 
 <style lang="scss">
 .icon-size {
-  width: 40px;
+  width: 55px;
-  height: 40px;
+  height: 55px;
 }
 
 .ratio-count {
   font-weight: bold;
+  font-size: 1.5rem;
   text-align: center;
 }
 
 .efficiency-perc {
   font-weight: bold;
+  font-size: 1.5rem;
   color: $green-9 !important;
 }
 

src/components/production-chains.ts

@@ -95,7 +95,7 @@ import steamMotorsIcon from '../assets/annoIcons/Steam_motors.webp';
 export const productionChains: TieredProductionChain[] = [
   {
     tierName: 'Building Materials',
-    width: 2,
+    width: 1,
     productionChains: [
       {
         productionChain: 'timber',
@@ -121,7 +121,7 @@ export const productionChains: TieredProductionChain[] = [
   },
   {
     tierName: 'Farmers | Workers',
-    width: 2,
+    width: 1,
     productionChains: [
       {
         productionChain: 'workClothes',
@@ -151,7 +151,7 @@ export const productionChains: TieredProductionChain[] = [
   },
   {
     tierName: 'Artisans',
-    width: 3,
+    width: 1,
     productionChains: [
       {
         productionChain: 'cannedFood',
@@ -173,7 +173,7 @@ export const productionChains: TieredProductionChain[] = [
   },
   {
     tierName: 'Jornaleros | Obreros',
-    width: 2,
+    width: 1,
     productionChains: [
       {
         productionChain: 'plantains',
@@ -207,7 +207,7 @@ export const productionChains: TieredProductionChain[] = [
   },
   {
     tierName: 'Engineers',
-    width: 2,
+    width: 1,
     productionChains: [
       {
         productionChain: 'highWheeler',
@@ -229,7 +229,7 @@ export const productionChains: TieredProductionChain[] = [
   },
   {
     tierName: 'Weapons',
-    width: 3,
+    width: 2,
     productionChains: [
       {
         productionChain: 'weapons',
@@ -243,7 +243,7 @@ export const productionChains: TieredProductionChain[] = [
   },
   {
     tierName: 'Sails',
-    width: 2,
+    width: 1,
     productionChains: [
       {
         productionChain: 'oldWorldSails',
@@ -257,7 +257,7 @@ export const productionChains: TieredProductionChain[] = [
   },
   {
     tierName: 'Machinery',
-    width: 2,
+    width: 1,
     productionChains: [
       {
         productionChain: 'steamMotors',

src/layouts/MainLayout.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-layout view="lHh Lpr lFf">
+  <q-layout view="lHh Lpr lFf" class="custom-width">
     <q-header>
       <q-toolbar class="border-black-bottom-med bg-white text-black">
         <q-btn
@@ -62,4 +62,8 @@ function toggleLeftDrawer() {
 .no-link-border {
   text-decoration: none;
 }
+
+.custom-width {
+  width: 5000px;
+}
 </style>