docs: update font and theme documentation with links and formatting improvements

src/assets/fonts/index.ts

@@ -6,13 +6,16 @@ import {
 } from 'next/font/google';
 
 /**
- * This file shows how to customize the font by using local font or google font
+ * 1. Fonts Documentation
+ * https://mksaas.com/docs/fonts
+ *
+ * 2. This file shows how to customize the font by using local font or google font
  *
  * [1] use local font
  *
- * 1. Get font file from https://gwfh.mranftl.com/fonts
- * 2. Add font file to the assets/fonts folder
- * 3. Add font variable to the font object
+ * - Get font file from https://gwfh.mranftl.com/fonts
+ * - Add font file to the assets/fonts folder
+ * - Add font variable to the font object
  */
 // https://gwfh.mranftl.com/fonts/bricolage-grotesque?subsets=latin
 // export const fontBricolageGrotesque = localFont({
@@ -23,10 +26,10 @@ import {
 /**
  * [2] use google font
  *
- * 1. You can browser fonts at Google Fonts
+ * - You can browser fonts at Google Fonts
  * https://fonts.google.com
  *
- * 2. CSS and font files are downloaded at build time and self-hosted with the rest of your static assets.
+ * - CSS and font files are downloaded at build time and self-hosted with the rest of your static assets.
  * https://nextjs.org/docs/app/building-your-application/optimizing/fonts#google-fonts
  */
 // https://fonts.google.com/noto/specimen/Noto+Sans

src/styles/globals.css

@@ -4,7 +4,15 @@
 @custom-variant dark (&:is(.dark *));
 
 /* 
- * How to Add a Theme Selector to Your Next.js App
+ * 1. Themes Documentation
+ * https://mksaas.com/docs/themes
+
+ * 2. Theme Generator
+ * https://ui.shadcn.com/themes
+ * https://tweakcn.com/
+ * https://ui.pub/x/theme-gen
+ * 
+ * 3. How to Add a Theme Selector to Your Next.js App
  * https://ouassim.tech/notes/how-to-add-a-theme-selector-to-your-nextjs-app/
  */
 @theme inline {
@@ -61,47 +69,50 @@
   --animate-accordion-up: accordion-up 0.2s ease-out;
 
   @keyframes shiny-text {
+
     0%,
     90%,
     100% {
       background-position: calc(-100% - var(--shiny-width)) 0;
     }
+
     30%,
     60% {
       background-position: calc(100% + var(--shiny-width)) 0;
     }
   }
+
   @keyframes rainbow {
     0% {
       background-position: 0%;
     }
+
     100% {
       background-position: 200%;
     }
   }
+
   @keyframes accordion-down {
     from {
       height: 0;
     }
+
     to {
       height: var(--radix-accordion-content-height);
     }
   }
+
   @keyframes accordion-up {
     from {
       height: var(--radix-accordion-content-height);
     }
+
     to {
       height: 0;
     }
   }
 }
 
-/* shadcn ui base colors for different themes */
-/* https://tweakcn.com/ */
-/* https://ui.shadcn.com/docs/theming#base-colors */
-/* https://ui.pub/x/theme-gen */
-/* https://spectr.irung.me/ */
 :root {
   --radius: 0.5rem;
   --background: oklch(1 0 0);
@@ -180,6 +191,7 @@
   color utility to any element that depends on these defaults.
 */
 @layer base {
+
   *,
   ::after,
   ::before,
@@ -193,6 +205,7 @@
   * {
     @apply border-border outline-ring/50;
   }
+
   body {
     @apply bg-background text-foreground;
   }
@@ -252,4 +265,4 @@ body {
     --primary: var(--color-amber-500);
     --primary-foreground: var(--color-amber-50);
   }
-}
+}