feat: better browsing UX

content/academy/centers/phuket/index.md

@@ -3,6 +3,7 @@ title: Pirate Bay @ Phuket, Thailand
 description: Weekly music geeks meetups at an island makerspace.
 date: 2022-12-22
 cover: cover.jpg
+topContent: true
 ---
 
 ## Makerspace on the island

content/academy/centers/phuket/mgm/index.md

@@ -2,6 +2,7 @@
 title: Music Geeks Meetups
 description: Weekly gatherings to jam, share and create music visually
 cover: MGM10.png
+topContent: true
 ---
 
 Every Thursday at Pirate Bay we have a Music Geeks Meetup. Everyone, who is interested in any way of music, can come and share their passions with other curious people. We jam some grooves, share some ideas and thoughts and then try to combine all that into some creative output like a performance, a recording, a music instrument, or a whole setup of them.

content/academy/index.md

@@ -2,6 +2,7 @@
 title: Academy
 description: People are great in helping other people learn. We teach and inspire diving deep on music.
 date: 2021-06-01
+topContent: true
 ---
 
 Chromatone is an international music education platform for everyone to gain knowledge and new pleasant experience. The knowledge is stored in the articles and apps, but it's compressed and dryed out to be light and compact. But there's so much to dive in! And that's where guidance may be incredibly helpful.

content/contact/index.md

@@ -2,6 +2,37 @@
 title: Contact
 description: The project and it's author
 date: 2021-01-01
+org:
+  avatar: /media/logo/smooth.svg
+  name: Chromatone center
+  pos: HQ
+  place: Since 2017
+  about:
+
+  social:
+    instagram: chromatone.center
+    email: support@chromatone.center
+    github: chromatone
+    reddit: r/chromatone
+author:
+  avatar: /img/starov.jpg
+  name: Denis K Starov
+  pos: Founder, designer and developer
+  place: Born in 1987 and dwelling
+  about: I'm a broad range designer and enthusiastic open source developer. So I explore music with the web browser. And share my experiments and explorations with everyone here.
+  social:
+    instagram: starov
+    telegram: starov
+    email: davay@chromatone.center
+    github: davay42
 ---
 
-Chromatone is [my](./author/index.md) open source [sociocultural project](./official/index.md). We're open for any kind of cultural collaboration. Send us a message, you're welcome!
+<author-card :author="$frontmatter?.org" />
+
+Chromatone is a self sustaining ecosystem of music learners, music teachers and new tools to learn, practice, compose and perform music visually. The source code for them is open and is developed as an internationally funded social initiative.
+
+Our mission is to build a complete visual music ecosystem built by international community of learners, teachers and performers. With open music labs as the new form of real time creative collaboration.
+
+The stickers sales bring fuel to the research and development. Charity funding is very welcome! ✨
+
+<author-card :author="$frontmatter?.author"  />

content/shop/index.md

@@ -2,7 +2,7 @@
 title: Shop
 description: Printed posters, memos and stickers for musical instruments and more
 date: 2021-05-20
-
+topContent: true
 ---
 
 <script setup>

content/support/index.md

@@ -2,6 +2,7 @@
 title: Support
 description: Share links, contribute code or donate money to the open source development
 date: 2021-05-10
+topContent: true
 ---
 
 <script setup> 

content/theory/harmony/functional/index.md

@@ -1,7 +1,7 @@
 ---
 title: Functional tonal harmony
 description: Relating chords by their interval content
-date: 2023-03-11
+date: 2021-09-01
 ---
 
 **Functional** means based on [functions](https://en.wikipedia.org/wiki/Function_(music)), **tonal** means based on [tonality](https://en.wikipedia.org/wiki/Tonality), harmony means lively movement through all that emotional space.

content/theory/index.md

@@ -3,6 +3,7 @@ title: Theory
 description: All the knowledge of music becoming visible with the simple color coding system
 cover: tonnetz.svg
 date: 2021-10-30
+topContent: true
 ---
 
 > **Chroma** - from Greek **khrōma** - "surface of the body, skin, color of the skin," also used generically for "color"

theme/components/author/card.vue

@@ -35,7 +35,7 @@ svg.defs(style="height:0")
 
 <style lang="postcss" scoped>
 .author-card {
-  @apply max-w-65ch m-auto flex flex-col my-16 shadow-lg bg-light-100 dark-bg-dark-300;
+  @apply max-w-55ch flex flex-col my-8 shadow-lg bg-light-100 dark-bg-dark-300;
 }
 
 img.avatar {

theme/components/footer/row.vue

@@ -8,14 +8,14 @@ const route = useRoute()
 
 <template lang="pug">
 footer.flex.items-center.px-4.py-4
-  a.text-xl.p-4.flex.items-center(
+  a.text-xl.p-4.flex.items-center.gap-2(
     class="hover-no-underline"
     href="/"
     )
-    img.w-32(src="/media/logo/circle.svg")
+    img.w-16(src="/media/logo/click-logo.svg")
     .p-2 Chromatone
   .flex-1
-  //- iframe.mr-12(src="https://github.com/sponsors/chromatone/button", title="Sponsor chromatone", height="32", width="114", style="border: 0; border-radius: 6px;")
+  iframe.mr-12(src="https://github.com/sponsors/chromatone/button", title="Sponsor chromatone", height="32", width="114", style="border: 0; border-radius: 6px;")
 </template>
 
 <style scoped lang="postcss"></style>

theme/components/page/primary.vue

@@ -1,17 +1,22 @@
 <script setup>
-import { useRoute } from 'vitepress'
+import { useRoute, useData } from 'vitepress'
+import { computed } from 'vue';
 
 const route = useRoute()
+const data = useData()
+
+const topContent = computed(() => data.frontmatter.value?.topContent) 
 </script>
 
 <template lang="pug">
 main#content
   page-headline
   transition(name="fade")
     .content-container(:key="route.path")
+      row-list.my-2.max-w-full(v-if="!topContent")
       content.content.flex-auto.z-10
       shop-message
-      row-list.mb-32.max-w-full
+      row-list.my-2.max-w-full(v-if="topContent")
   nav-next-prev
   footer-row
 </template>

theme/components/row/block.vue

@@ -58,7 +58,7 @@ const bg = computed(() => `url(${props.item?.cover}`);
 
 <style lang="postcss" scoped>
 .row {
-  @apply bg-light-500 w-full dark-bg-dark-500 flex flex-col transition-all duration-300 ease no-underline rounded-3xl overflow-hidden shadow-lg;
+  @apply bg-light-500 w-full dark-bg-dark-500 flex flex-col transition-all duration-300 ease no-underline rounded-3xl overflow-hidden shadow-lg max-w-65ch;
   flex: 1 1 200px;
 }
 

theme/components/row/list.vue

@@ -26,6 +26,6 @@ const list = pages[route.path]
 
 <style lang="postcss" scoped>
 .list-blocks {
-  @apply flex flex-col max-w-full mx-1 md-mx-4 gap-24;
+  @apply flex flex-col max-w-full mx-1 md-mx-2 gap-8;
 }
 </style>