add latest

src/components/ChainTiers.vue

@@ -3,7 +3,7 @@
     flat
     bordered
     square
-    :class="['bg-grey-3', 'q-ma-sm', 'border', 'text-center']"
+    :class="['card-background', 'q-ma-sm', 'border', 'text-center']"
   >
     <q-card-section>
       <div class="text-subtitle1 text-uppercase text-center big-font q-pa-md">

src/components/DiagramRenderer.vue

@@ -70,4 +70,12 @@ $x: 5;
     padding: 1px;
   }
 }
+
+.top-padding {
+  padding-top: 100px;
+}
+
+rect.label-container {
+  fill: $burnt !important;
+}
 </style>

src/components/production-chains.ts

@@ -18,6 +18,8 @@ import glassMakersIcon from '../assets/annoIcons/Glass.webp';
 import windowMakersIcon from '../assets/annoIcons/Windows.webp';
 import cementIcon from '../assets/annoIcons/Cement.webp';
 import concreteFactory from '../assets/annoIcons/Reinforced_concrete.webp';
+import teffIcon from '../assets/annoIcons/Icon_teff_grass_0.webp';
+import mudBricksIcon from '../assets/annoIcons/Icon_mud_bricks_0.webp';
 
 // Farmers & Workers
 import potatoIcon from '../assets/annoIcons/Potato.webp';
@@ -150,6 +152,10 @@ export const productionChains: TieredProductionChain[] = [
       {
         productionChain: 'concrete',
         mermaidDefinition: `flowchart LR; Charcoal(<img src='${charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Iron(<span class='icon-flex-row'><img src='${ironIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>) --> Steel(<img src='${steelIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Concrete(<img src='${concreteFactory}' class='icon-size' /><span class='ratio-count'>2</span>); Cement(<img src='${cementIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Concrete`
+      },
+      {
+        productionChain: 'mudBricks',
+        mermaidDefinition: `flowchart LR; Clay(<span class='icon-flex-row'><img src='${clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>25%</span><span class='ratio-count'>1</span></span></span>) & Teff(<img src='${teffIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> MudBricks(<img src='${mudBricksIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
       }
     ]
   },

src/css/app.scss

@@ -15,6 +15,22 @@
   color: $off-black !important;
 }
 
+.text-burnt {
+  color: #a47718 !important;
+}
+
 .bg-off-black {
   background: $off-black !important;
 }
+
+.toolbar-background {
+  background-color: #8f6c40;
+}
+
+.page-background {
+  background-color: #fff1d1;
+}
+
+.card-background {
+  background-color: #fbf1dc;
+}

src/css/quasar.variables.scss

@@ -25,3 +25,6 @@ $info: #31ccec;
 $warning: #f2c037;
 
 $off-black: #2e3f4e;
+$burnt-dark: #8f6c40;
+$burnt: #fff1d1;
+$burnt-light: #fbf1dc;

src/layouts/MainLayout.vue

@@ -1,25 +1,24 @@
 <template>
   <q-layout view="lHh Lpr lFf" class="custom-width">
-    <q-header>
-      <q-toolbar class="border-black-bottom-med bg-white text-black">
+    <q-header :reveal="true" :reveal-offset="0">
+      <q-toolbar class="border-black-bottom-med toolbar-background text-white">
         <q-btn
           flat
           dense
           round
           icon="menu"
           aria-label="Menu"
-          color="off-black"
           @click="toggleLeftDrawer"
         />
 
-        <q-toolbar-title class="text-off-black">
+        <q-toolbar-title class="">
           Anno 1800 Production Chains
         </q-toolbar-title>
 
         <a
           href="https://github.com/dtomlinson91/anno-production-chain-renderer"
           class="no-link-border"
-          ><q-icon name="lab la-github" color="off-black" size="2.2rem"></q-icon
+          ><q-icon name="lab la-github" color="white" size="2.2rem"></q-icon
         ></a>
       </q-toolbar>
     </q-header>
@@ -37,7 +36,8 @@
     </q-drawer>
 
     <q-page-container>
-      <router-view class="bg-grey-2" />
+      <router-view class="page-background text-burnt" />
+      <!--<router-view class="bg-grey-2" />-->
     </q-page-container>
   </q-layout>
 </template>