cmlibs · akhuoa · Sep 4, 2025 · Sep 4, 2025 · Sep 4, 2025 · Sep 4, 2025
diff --git a/.github/workflows/deploy-new-design.yml b/.github/workflows/deploy-new-design.yml
@@ -0,0 +1,53 @@
+name: Deploy New Design to GitHub Pages
+
+on:
+  push:
+    branches:
+      - new-design
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages-new-design"
+  cancel-in-progress: false
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build website
+        env:
+          NEW_DESIGN_DEPLOY: 'true'
+        run: yarn build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './dist'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="CMLibs: Libraries for modelling physiological systems, featuring the Zinc library." />
     <title>CMLibs</title>
     <script type="text/javascript">
       ;(function () {
@@ -14,9 +15,9 @@
         }
       })()
     </script>
-    <script type="module" src="/src/main.js"></script>
   </head>
   <body>
     <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -12,18 +12,23 @@
   },
   "dependencies": {
     "pinia": "^2.1.3",
-    "vue": "^3.3.4",
-    "vue-router": "^4.2.2",
-    "vue3-doxygen-xml": "^0.2.0",
-    "wave-ui": "^3.4.0"
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
+    "vue3-doxygen-xml": "^0.3.0"
   },
   "devDependencies": {
+    "@unocss/preset-attributify": "^66.1.4",
+    "@unocss/preset-icons": "^66.1.4",
+    "@unocss/preset-uno": "^66.1.4",
+    "unocss": "^66.1.4",
     "@rushstack/eslint-patch": "^1.2.0",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "@vitejs/plugin-vue-jsx": "^4.1.2",
     "@vue/eslint-config-prettier": "^7.1.0",
     "eslint": "^8.39.0",
     "eslint-plugin-vue": "^9.11.0",
     "prettier": "^2.8.8",
-    "vite": "^4.3.9"
+    "vite": "^6.2.4",
+    "vite-plugin-vue-devtools": "^7.7.2"
   }
 }
diff --git a/public/404.html b/public/404.html
@@ -7,8 +7,16 @@
       // This text is simply to make sure the 404.html file is bigger than 512 bytes, else, internet explorer will ignore it.
       // Thank you internet explorer for requiring such awesome workarounds in order to work properly
       // ====================================================================================================================
-      sessionStorage.redirect = location.href
+      sessionStorage.redirect = location.pathname + location.search + location.hash;
+      let basePath = '/';
+      if (location.hostname.endsWith('.github.io') && location.pathname.startsWith('/website-src/')) {
+        basePath = '/website-src/';
+      }
+      location.replace(basePath);
     </script>
-    <meta http-equiv="refresh" content="0;URL='/'" />
+    <title>Redirecting...</title>
   </head>
+  <body>
+    <p>Redirecting to the main app...</p>
+  </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
@@ -1,30 +1,22 @@
+<script setup>
+import { RouterView } from 'vue-router'
+import TheHeader from './components/TheHeader.vue'
+import TheFooter from './components/TheFooter.vue'
+import BackToTop from '@/components/BackToTop.vue'
+</script>
+
 <template>
-  <div id="app">
-    <router-view />
+  <div class="min-h-screen bg-gray-50 flex flex-col relative">
+
+    <div class="relative flex flex-col min-h-screen">
+      <TheHeader />
+
+      <main class="container w-full mx-auto px-4 py-6 flex-1">
+        <router-view />
+      </main>
+
+      <TheFooter />
+    </div>
+    <BackToTop />
   </div>
 </template>
-
-<style scoped>
-/* Demo styles - can be discarded. */
-header,
-footer,
-aside,
-main {
-  margin: 4px;
-  padding: 12px;
-  text-transform: uppercase;
-  color: #666;
-  border: 1px solid rgba(0, 0, 0, 0.07);
-}
-header,
-footer {
-  background-color: #e9f8fe;
-  min-height: 60px;
-}
-aside {
-  background-color: #fef2ff;
-}
-main {
-  background-color: #efffed;
-}
-</style>
diff --git a/src/assets/base.css b/src/assets/base.css
@@ -19,70 +19,6 @@
   --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
   --vt-c-text-dark-1: var(--vt-c-white);
   --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-
-  --bright-red: #a93caf;
-  --deep-red: #90479b;
-  --bright-red-transparent: #af3c4225;
-  --cmlibs-main-colour: #a93caf;
-
-  --code-bg-colour: #F8F8FA;
-  --code-bg-border-colour: #F0E8E8;
-  --mid-grey: #777777;
-  --pale-grey: #dddddd;
-  --very-pale-grey: #f6f6f6;
-
-  --transparent-grey: rgba(27, 31, 35, 0.05);
-  --pale-transparent-grey: rgba(62, 72, 82, 0.05);
-  --deep-blue: #476582;
-  --deep-blue-grey: #2d4046c7;
-  --bright-blue: #1f76be;
-
-  --very-pale-green: #fbfff6;
-  --mid-green: rgb(80, 121, 0);
-  --dark-green: #22440b;
-
-  --very-pale-yellow: rgba(255, 229, 100, 0.3);
-  --mid-yellow: #e7c000;
-  --dark-yellow: #6b5900;
-
-  --dothis-background-color: var(--very-pale-green);
-  --dothis-border-colour: var(--mid-green);
-  --dothis-colour: var(--dark-green);
-
-  --useful-background-colour: #f3f5f7;
-  --useful-border-colour: #144b79;
-  --useful-colour: #144b79;
-  /*#0f3555;*/
-  --useful-link-colour: var(--bright-blue);
-
-  --nb-background-colour: var(--very-pale-yellow);
-  --nb-border-colour: var(--mid-yellow);
-  --nb-colour: var(--dark-yellow);
-
-  --text-colour: #333333;
-  --menu-link-colour: var(--mid-grey);
-
-  /* Link styling for readability */
-  --link-colour: var(--mid-grey);
-  --active-link: var(--deep-red);
-  --text-link-colour: var(--bright-red);
-  --link-underline-colour: var(--pale-grey);
-  --link-decoration-line: underline;
-  --link-decoration-style: solid;
-  --link-decoration-color: var(--link-underline-colour);
-  --link-underline-offset: 0.2em;
-
-  --warning-background: rgb(251, 239, 239);
-  --warning-text: var(--deep-red);
-
-  --terminal-colour: var(--pale-grey) !important;
-  --border-colour: var(--pale-grey);
-  --code-colour: var(--deep-blue);
-
-  --text-font: 'Lato', 'proxima-nova', 'Helvetica Neue', 'Arial', sans-serif;
-  --heading-font: Verdana, Geneva, Tahoma, sans-serif;
-  --code-font: monospace;
-  --mono-font: monospace;
 }
 
 /* semantic color variables for this project */
@@ -94,33 +30,23 @@
   --color-border: var(--vt-c-divider-light-2);
   --color-border-hover: var(--vt-c-divider-light-1);
 
-  --color-heading: var(--cmlibs-main-colour);
-  --color-subheading: #333333;
+  --color-heading: var(--vt-c-text-light-1);
   --color-text: var(--vt-c-text-light-1);
 
   --section-gap: 160px;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --cmlibs-main-colour: #BB86FC;
     --color-background: var(--vt-c-black);
     --color-background-soft: var(--vt-c-black-soft);
     --color-background-mute: var(--vt-c-black-mute);
 
     --color-border: var(--vt-c-divider-dark-2);
     --color-border-hover: var(--vt-c-divider-dark-1);
 
-    --color-heading: var(--cmlibs-main-colour);
-    --color-subheading: #d2d2d2;
-    --color-text: #e6e6e6;
-
-    --code-colour: #fff;
-    --code-bg-colour: #2f2f2f;
-    --code-bg-border-colour: #404040;
-
-    --text-colour: #fff;
-    --text-link-colour: #BB86FC;
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
   }
 }
 
@@ -136,12 +62,25 @@ body {
   min-height: 100vh;
   color: var(--color-text);
   background: var(--color-background);
-  transition: color 0.5s, background-color 0.5s;
+  transition:
+    color 0.5s,
+    background-color 0.5s;
   line-height: 1.6;
-  /* font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  font-size: 15px; */
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
+}