Merge pull request #16 from harmendv/improve/branding

add logo to header
harmendv · Feb 11, 2024 · 32e3cf8 · 32e3cf8
2 parents 5709c13 + a0ee2d5
commit 32e3cf8
Showing 1 changed file with 30 additions and 24 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -10,6 +10,28 @@
             ></lv-theme-toggle>
         </div>
 
+        <lv-flex
+            align-items="center"
+            justify-content="center"
+            direction="column"
+            v-space-after="2"
+        >
+            <img
+                src="/logo.svg"
+                alt=""
+                width="200"
+            />
+            <span v-space-after="1">
+                made by
+                <a
+                    class="link"
+                    target="_blank"
+                    href="https://github.com/harmendv"
+                >harmendv</a
+                >
+            </span >
+        </lv-flex>
+
         <vue-fretboard
             :strings="strings"
             :highlight="highlight"
@@ -28,7 +50,7 @@
         </lv-fieldset>
 
         <div
-            v-space-after="3"
+            v-space-after="1"
             class="options"
         >
             <lv-grid
@@ -119,30 +141,14 @@
         <lv-flex
             align-items="center"
             justify-content="center"
-            direction="column"
+            direction="row"
+            v-if="!breakpoints.greaterOrEqual.lg"
         >
-            <img
-                src="/logo.svg"
-                alt=""
-                width="200"
-            />
-            <span v-space-after="1">
-                made by
-                <a
-                    class="link"
-                    target="_blank"
-                    href="https://github.com/harmendv"
-                    >harmendv</a
-                >
-            </span >
-            <div
-                v-if="!breakpoints.greaterOrEqual.lg"
-            >
-                <lv-theme-toggle
-                    class="theme-toggle"
-                    v-model="theme"
-                ></lv-theme-toggle>
-            </div>
+            <lv-theme-toggle
+                class="theme-toggle"
+                v-model="theme"
+            ></lv-theme-toggle>
+            toggle dark/night
         </lv-flex>
     </div>
 </template>