Clean up

src/lib/components/Course/components/Navigation/index.svelte

@@ -253,7 +253,7 @@
 
 <style lang="scss">
   .root {
-    height: calc(100vh - 44px);
+    height: calc(100vh - 45px);
     display: flex;
     flex-direction: column;
     min-width: 360px;

src/lib/components/Navigation/app.svelte

@@ -100,21 +100,6 @@
     font-weight: 700;
   }
 
-  /* [aria-current] {
-    color: var(--main-primary-color);
-    position: relative;
-    display: inline-block;
-  }
-  [aria-current]::after {
-    position: absolute;
-    content: '';
-    width: calc(100% - 3em);
-    height: 2px;
-    background-color: var(--main-primary-color);
-    display: block;
-    bottom: -17px;
-  } */
-
   @media only screen and (max-width: 1002px) {
     nav.hide {
       display: none;

src/lib/components/Org/LandingPage/index.svelte

@@ -145,7 +145,7 @@
     <div class="absolute h-[80vh] top-0 w-full opacity-80 z-10 bg-white" />
 
     {#if video}
-      <div class="flex items-center justify-center">
+      <div class="flex items-center justify-center h-full">
         <div
           class="md:w-11/12 lg:w-5/6 w-full flex items-center justify-between flex-col-reverse md:flex-row z-20 relative"
         >

tailwind.config.cjs

@@ -1,12 +1,15 @@
 /** @type {import('tailwindcss').Config}*/
 const config = {
-  content: ["./src/**/*.{html,js,svelte,ts}"],
+  content: ['./src/**/*.{html,js,svelte,ts}'],
 
   theme: {
-    extend: {},
+    extend: {}
   },
 
-  plugins: [],
+  plugins: []
 };
 
 module.exports = config;
+// generic name for component
+// add theme-name dynamically on body
+// have globaly style for theme-name .bg-primary-100

tailwind.config.js

@@ -3,7 +3,7 @@ export default {
   darkMode: 'class',
   content: ['./src/**/*.{html,js,svelte,ts}'],
   theme: {
-    extend: {},
+    extend: {}
   },
-  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')],
+  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms')]
 };