Merge pull request #32 from data-miner00/fix-styles

Fix styles

README.md

@@ -157,6 +157,14 @@ To run this template project in your local for personal use or contribution, sim
    ```sh
    pnpm dev
    ```
+4. Copy the `.env.example` to `.env` and replace the value for `NUXT_PUBLIC_SITE_UR`. This is used for static-site generation.
+   ```sh
+   NUXT_PUBLIC_SITE_UR=https://www.mydomain.com
+   ```
+5. Build/generate static website
+   ```sh
+   pnpm generate
+   ```
 
 > ⚠️ Important: **Do not update** the dependencies as it will break due to incompatibilities from the latest Nuxt and Nuxt Content.
 

assets/css/styles.scss

@@ -8,6 +8,10 @@
     @apply inline-block;
   }
 
+  &.math-display {
+    @apply overflow-x-auto;
+  }
+
   &.math-display svg {
     @apply block mx-auto;
   }

components/MobileSidebar.vue

@@ -64,9 +64,9 @@ const links = [
             @click="toggleSidebar"
           >
             <NuxtLink
-              class="block px-3 py-2 rounded font-semibold text-sm hover:bg-green-200/50 dark:hover:bg-cyan-400/50"
+              class="block px-3 py-2 rounded font-semibold text-sm hover:bg-green-200/50 dark:hover:bg-green-400/50"
               :to="localePath(link.path)"
-              exact-active-class="text-green-400 bg-green-200/50 dark:bg-cyan-400/50 dark:text-cyan-400"
+              exact-active-class="text-green-400 bg-green-200/50 dark:bg-green-400/50 dark:text-green-400"
             >
               {{ $t(link.translationKey) }}
             </NuxtLink>

components/TableOfContent.vue

@@ -45,7 +45,7 @@ var scrollToTop = function () {
     <div class="py-3">
       <div v-for="(item, index) in toc" :key="index">
         <NuxtLink
-          class="py-2 block pl-7 text-gray-700 dark:text-gray-200"
+          class="py-2 block pl-7 text-gray-700 dark:text-gray-200 hover:text-green-600 dark:hover:text-green-600"
           :to="`#${item.id}`"
           >{{ item.text }}</NuxtLink
         >

components/VFooter.vue

@@ -198,7 +198,7 @@ nav {
     @apply text-gray-500 dark:text-gray-400 block my-2;
 
     &:hover {
-      @apply text-gray-700 dark:text-gray-300;
+      @apply text-green-600;
     }
   }
 }

package.json

@@ -3,8 +3,8 @@
   "description": "An opinionated template built for documentations and static websites.",
   "author": "Shaun Chong <[email protected]>",
   "license": "MIT",
-  "private": true,
-  "version": "1.2.2",
+  "private": false,
+  "version": "1.2.3",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",

pages/[...slug].vue

@@ -87,7 +87,7 @@ onBeforeUnmount(() => {
     class="mx-auto flex flex-col-reverse lg:flex-row justify-center px-6 lg:px-0"
   >
     <article
-      class="prose prose-stone dark:prose-invert sm:max-w-[65ch] prose-pre:bg-gray-100 dark:prose-pre:bg-slate-700 dark:prose-pre:text-gray-50 prose-pre:border prose-pre:border-gray-200 dark:prose-pre:border-gray-700 prose-pre:border-solid prose-pre:rounded-lg prose-pre:text-slate-800 prose-headings:text-green-600 dark:prose-hr:border-gray-700 dark:prose-li:marker:text-gray-200 dark:prose-blockquote:border-gray-200 prose-headings:scroll-mt-24 dark:prose-tr:border-gray-500 dark:prose-thead:border-gray-400"
+      class="prose prose-stone dark:prose-invert sm:max-w-[65ch] prose-pre:bg-gray-100 dark:prose-pre:bg-slate-700 dark:prose-pre:text-gray-50 prose-pre:border prose-pre:border-gray-200 dark:prose-pre:border-gray-700 prose-pre:border-solid prose-pre:rounded-lg prose-pre:text-slate-800 prose-headings:text-green-600 dark:prose-hr:border-gray-700 dark:prose-li:marker:text-gray-200 dark:prose-blockquote:border-gray-200 prose-headings:scroll-mt-24 dark:prose-tr:border-gray-500 dark:prose-thead:border-gray-400 sm:mx-auto lg:mx-0"
     >
       <ContentRenderer :value="(data as Record<string, any> | undefined)">
         <template #empty>
@@ -99,15 +99,15 @@ onBeforeUnmount(() => {
         <NuxtLink
           v-if="prev"
           :to="localePath(prev._path)"
-          class="block py-1 px-3 border border-solid border-gray-200 dark:border-gray-700 rounded"
+          class="block py-1 px-3 border border-solid border-gray-200 dark:border-gray-700 rounded hover:text-green-600"
         >
           ← {{ prev.title }}
         </NuxtLink>
         <div aria-hidden v-else />
         <NuxtLink
           v-if="next"
           :to="localePath(next._path)"
-          class="block py-1 px-3 border border-solid border-gray-200 dark:border-gray-700 rounded"
+          class="block py-1 px-3 border border-solid border-gray-200 dark:border-gray-700 rounded hover:text-green-600"
         >
           {{ next.title }} →
         </NuxtLink>