From 787b5a4cb84ffdd80e66db318735f4d06a1b53a0 Mon Sep 17 00:00:00 2001
From: Marco Crapts <mcrapts@gmail.com>
Date: Sun, 30 Apr 2023 13:07:43 +0200
Subject: [PATCH] update styling

---
 src/components/Note.vue   |  2 +-
 src/components/TopBar.vue | 20 +++++++++++++--
 src/main.ts               |  2 +-
 src/style.css             | 25 ------------------
 src/style.scss            | 54 +++++++++++++++++++++++++++++++++++++++
 src/utils/defaultNotes.ts |  2 +-
 6 files changed, 75 insertions(+), 30 deletions(-)
 delete mode 100644 src/style.css
 create mode 100644 src/style.scss

diff --git a/src/components/Note.vue b/src/components/Note.vue
index 120d4e8..846d4cb 100644
--- a/src/components/Note.vue
+++ b/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"
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 93b74c0..45deb6a 100644
--- a/src/components/TopBar.vue
+++ b/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>
diff --git a/src/main.ts b/src/main.ts
index 3914ee0..346bada 100644
--- a/src/main.ts
+++ b/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'
diff --git a/src/style.css b/src/style.css
deleted file mode 100644
index 5a6bc04..0000000
--- a/src/style.css
+++ /dev/null
@@ -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;
-}
diff --git a/src/style.scss b/src/style.scss
new file mode 100644
index 0000000..eeca475
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/utils/defaultNotes.ts b/src/utils/defaultNotes.ts
index 732e4b6..cf88dc8 100644
--- a/src/utils/defaultNotes.ts
+++ b/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