update styling

src/components/Note.vue

@@ -32,7 +32,7 @@ const references = computed<Note[]>(() => {
 </script>
 <template>
   <div class="flex flex-col">
-    <h1 class="mb-2 flex items-center rounded-md text-3xl hover:bg-gray-200">
+    <h1 class="mb-2 flex items-center rounded-md font-semibold text-3xl hover:bg-gray-200">
       <i
         class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"
         v-if="props.note.isRoot"

src/components/TopBar.vue

@@ -2,7 +2,7 @@
 import Hamburger from '@/components/Hamburger.vue'
 import SearchBar from '@/components/SearchBar.vue'
 import Logo from './Logo.vue'
-import { addNote } from '@/composables/useNotes'
+import { addNote, activeNote, rootNote } from '@/composables/useNotes'
 const props = defineProps<{
   sideBarCollapsed: boolean
 }>()
@@ -24,7 +24,11 @@ const emit = defineEmits<{
           :side-bar-collapsed="props.sideBarCollapsed"
           @toggle-side-bar="emit('toggleSideBar')"
         />
-        <Logo class="ml-auto pl-5 text-2xl" />
+        <Logo
+          class="ml-auto pl-5 text-2xl hover:drop-shadow"
+          id="logo"
+          @click="activeNote = rootNote"
+        />
       </div>
       <div class="flex h-full flex-1 flex-row items-center gap-2 pl-5 pr-3">
         <SearchBar />
@@ -41,3 +45,15 @@ const emit = defineEmits<{
     </div>
   </div>
 </template>
+<style lang="css">
+#logo {
+  @apply cursor-pointer transition-all duration-200 hover:text-primary;
+}
+#logo:hover {
+  text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px #1e4bc4,
+    0 0 35px #1e4bc4, 0 0 40px #1e4bc4, 0 0 50px #1e4bc4, 0 0 75px #1e4bc4;
+}
+.btn-outline {
+  @apply hover:border-white hover:bg-white hover:text-primary focus-visible:outline-white;
+}
+</style>

src/main.ts

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import '@/style.css'
+import '@/style.scss'
 import '@fortawesome/fontawesome-free/css/all.min.css'
 import App from './App.vue'
 import { setDefaultNotes } from '@/composables/useNotes'

src/style.css

@@ -1,25 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-body,
-body > div,
-html {
-  height: 100%;
-}
-
-body {
-  overflow-y: auto;
-}
-
-.ck-body-wrapper {
-  height: 0;
-}
-
-.ck-content ol {
-  @apply list-inside list-decimal;
-}
-
-.ck-content ul {
-  @apply list-inside list-disc;
-}

src/style.scss

@@ -0,0 +1,54 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body,
+body > div,
+html {
+  height: 100%;
+}
+
+body {
+  overflow-y: auto;
+}
+
+.ck-body-wrapper {
+  height: 0;
+}
+
+.ck-content {
+  line-height: 2rem;
+  ol,
+  ul {
+    @apply ps-8 my-2;
+  }
+  ol {
+    @apply list-decimal;
+  }
+  ul {
+    @apply list-disc;
+  }
+  p {
+    @apply mb-2;
+    margin-top: 0 !important;
+    // margin-block: 0;
+  }
+  h1,
+  h2,
+  h3,
+  h4 {
+    @apply font-semibold;
+  }
+  h1 {
+    @apply text-3xl;
+  }
+  h2 {
+    @apply text-2xl;
+  }
+  h3 {
+    @apply text-xl;
+  }
+  h4 {
+    @apply text-lg;
+  }
+}

src/utils/defaultNotes.ts

@@ -5,7 +5,7 @@ export const defaultNotes: BaseNote[] = [
     isRoot: true,
     title: 'Your first note',
     content: `Contexted is a **relational note-taking app**. Use it as your personal knowledge base, research assistent or just to map out thoughts.\n\n
-### **How does it work?**
+# How does it work?
 *   Create a new note by typing words between [[brackets]]
 *   Click on **Mindmap mode** in the menu left to visualize your notes
 \n