update components

src/assets/scss/main.scss

@@ -60,6 +60,10 @@ ul {
   @apply bg-gray-500;
 }
 
+.footerlink {
+  margin-left: 0rem !important;
+}
+
 // .animated-link:hover:after {
 //     width: 100%;
 // }

src/components/custom/Cards/PostListItem.vue

@@ -5,7 +5,7 @@
   >
     <g-link :to="path" class="post-card-image-link">
       <g-image
-        :src="record.image"
+        :src="img(record.image)"
         :alt="record.title"
         class="post-card-image"
       ></g-image>
@@ -13,7 +13,7 @@
     <div>
       <g-link :to="path">
         <h2 class="post-card-title mt-3">{{ record.title || record.name }}</h2>
-        <p class="post-card-excerpt">{{ record.excerpt }}</p>
+        <p class="post-card-excerpt text-gray-700">{{ record.excerpt }}</p>
         <section
           class="flex flex-wrap post-tags container mx-auto relative py-1"
         >
@@ -39,7 +39,7 @@
                 >
                   <g-link :to="author.path" v-tooltip="author.name">
                     <g-image
-                      :src="author.image"
+                      :src="img(author.image)"
                       :alt="author.name"
                       class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white"
                     />
@@ -66,7 +66,10 @@
               </p>
             </div>
           </div>
-          <section class="post-tags container mx-auto relative py-3" v-if="displaytags()">
+          <section
+            class="post-tags container mx-auto relative py-3"
+            v-if="displaytags()"
+          >
             <g-link
               v-for="tag in record.tags"
               :key="tag.id"
@@ -82,9 +85,7 @@
 </template>
 
 <script>
-
 export default {
-  
   props: {
     record: {},
     showtags: false,
@@ -96,34 +97,36 @@ export default {
   },
 
   computed: {
-    path(){
+    path() {
-       if (this.pathPrefix)
+      if (this.pathPrefix) return this.pathPrefix + "/" + this.record.id;
-          return this.pathPrefix + "/" + this.record.id
+      return this.record.path;
-        return this.record.path
     },
 
-    memberships(){
+    memberships() {
-      var res = []
+      var res = [];
-      var memberships = this.record.memberships
+      var memberships = this.record.memberships;
-      if (!memberships){
+      if (!memberships) {
-        return []
+        return [];
       }
-      memberships.forEach(function(membership){
+      memberships.forEach(function (membership) {
-        if(["foundation", "tech"].includes(membership.title)){
+        if(["foundation", "tech", "cofounders"].includes(membership.title)){
-          res.push(membership)
+          res.push(membership);
         }
       });
-      return res
+      return res;
-    }
+    },
-
   },
-
   methods: {
-    displaytags(){
+    displaytags() {
-      return this.showtags
+      return this.showtags;
-    }
+    },
-  }
+    img(image) {
-}
+      if (!image) return "";
+      if (image.src) return image.src;
+      return image;
+    },
+  },
+};
 </script>
 
 <style scoped>
@@ -135,6 +138,6 @@ export default {
 
 .post-card-image {
   max-width: 100%;
-  height: auto;
+  /* height: auto; */
 }
 </style>

src/components/custom/Navbar/Navbar.vue

@@ -2,7 +2,7 @@
   <div class="fixed inset-0 h-16 bg-white">
     <header
       class="flex items-center justify-between flex-wrap container mx-auto px-4 sm:px-0 py-4 transition-all transition-500"
-      v-bind:class="{
+      :class="{
         'opacity-100': !disableScroll && scrollPosition > headerHeight,
         'opacity-0': !disableScroll && scrollPosition < headerHeight,
       }"
@@ -61,8 +61,8 @@
               :key="element.name"
               v-for="(element, index) in navigation.social"
               class="hover:text-white sm:block"
-              v-bind:class="{
+              :class="{
-                'mr-6': index != Object.keys(navigation.social).length - 1,
+                'px-2 mr-2': index != Object.keys(navigation.navLinks).length,
               }"
             >
               <span class="telegram_icon">
@@ -81,35 +81,29 @@
 
       <nav
         :class="isOpen ? 'block' : 'hidden'"
-        class="md:order-2 px-2 pt-2 pb-4 sm:flex sm:p-0 bg-white"
+        class="navbar md:order-2 px-2 pt-2 pb-4 sm:flex sm:p-0 sm:w-100 bg-white"
       >
-        <ul
+        <div
-          class="list-none sm:flex justify-left uppercase transition-all transition-500"
+          :key="index"
-        >
-          <li
-            class="py-1"
-            :key="element.name"
           v-for="(element, index) in navigation.navLinks"
-            :class="{
+          class="w-auto"
-              'mr-2': index != Object.keys(navigation.navLinks).length - 1,
-            }"
         >
           <div
             v-if="element.expandable"
-              class="relative"
+            class="relative mt-2"
             x-data="{ open: false }"
           >
             <button
               @click="setActive(index)"
               class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
             >
-                <span class="uppercase">{{ element.name }}</span>
+              <span class="uppercase py-1 pl-2">{{ element.name }}</span>
               <svg
                 fill="currentColor"
                 viewBox="0 0 20 20"
                 :class="{
                   'rotate-180': active == index,
-                    'rotate-0': !active == index,
+                  'rotate-0': active == !index,
                 }"
                 class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
               >
@@ -129,13 +123,13 @@
               x-transition:leave="transition ease-in duration-75"
               x-transition:leave-start="transform opacity-100 scale-100"
               x-transition:leave-end="transform opacity-0 scale-95"
-                class="absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
+              class="absolute w-auto mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
             >
               <div
                 v-if="open"
                 class="px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700"
               >
-                  <div v-for="link in element.submenu" :key="link.title">
+                <div v-for="(link, i) in element.submenu" :key="i">
                   <a
                     v-if="link.external"
                     class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
@@ -159,16 +153,20 @@
           <g-link
             v-else-if="element.external"
             :to="element.link"
+            @click.native="clicked"
             target="_blank"
-              class="animated-link"
+            class="inline-flex sm:flex uppercase p-2 mr-4 animated-link"
             >{{ element.name }}</g-link
           >
-            <g-link v-else :to="element.link" class="animated-link">{{
+          <g-link
-              element.name
+            v-else
-            }}</g-link>
+            :to="element.link"
-          </li>
+            @click.native="clicked"
-        </ul>
+            class="inline-flex sm:flex uppercase p-2 mr-4 animated-link"
-        <div
+            >{{ element.name }}</g-link
+          >
+        </div>
+        <!-- <div
           class="md:hidden inline-flex rounded-full border-2 border-gray-200 w-1/2"
         >
           <span class="w-auto flex justify-end items-center p-2">
@@ -181,10 +179,10 @@
             v-model="search"
             @keyup.enter="result"
           />
-        </div>
+        </div> -->
       </nav>
       <div class="hidden md:ml-auto md:inline-block md:order-last">
-        <div class="inline-flex rounded-full border-2 border-gray-200 w-1/2">
+        <!-- <div class="inline-flex rounded-full border-2 border-gray-200 w-1/2">
           <span class="w-auto flex justify-end items-center p-2">
             <font-awesome :icon="['fas', 'search']" />
           </span>
@@ -195,7 +193,7 @@
             v-model="search"
             @keyup.enter="result"
           />
-        </div>
+        </div> -->
         <ul class="list-none inline-flex justify-center md:justify-end">
           <li class="mr-0 sm:mr-6">
             <ThemeSwitcher v-on="$listeners" :theme="theme" />
@@ -229,9 +227,7 @@
  * Will be used to add/remove the additional
  * css classes to show the sticky navbar
  */
-
 import ThemeSwitcher from "~/components/custom/ThemeSwitcher.vue";
-
 export default {
   components: {
     ThemeSwitcher,
@@ -256,6 +252,7 @@ export default {
       search: "",
       open: false,
       active: null,
+      currentLink: -1,
     };
   },
   methods: {
@@ -275,10 +272,14 @@ export default {
     close(e) {
       if (!this.$el.contains(e.target)) {
         this.open = false;
+        this.active = !this.active;
+        this.isOpen = !this.isOpen;
       }
     },
+    clicked() {
+      this.isOpen = false;
+    },
   },
-
   mounted() {
     if (!this.disableScroll) {
       var height = document.getElementById("header").clientHeight;
@@ -297,8 +298,23 @@ input:focus,
 button:focus {
   outline: 0;
 }
-
 .inset-0 {
   z-index: 999;
 }
+nav li a {
+  padding-right: 10px;
+}
+a.active--exact.active {
+  background-color: rgba(237, 242, 247, 1);
+  border-radius: 0.5rem;
+}
+
+.navbar {
+  width: auto;
+}
+@media (max-width: 768px) {
+  .navbar {
+    width: 100%;
+  }
+}
 </style>

src/components/marketing/sections/cta-sections/Footer.vue

@@ -7,14 +7,14 @@
     <div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
       <div class="xl:grid xl:grid-cols-3 xl:gap-8">
         <div class="space-y-8 xl:col-span-1">
-          <img
+          <g-image
             class="h-10"
             src="/img/tf_icon_black.svg"
             alt="Company name"
             v-if="theme == 'light'"
           />
 
-          <img
+          <g-image
             class="h-10"
             src="/img/tf_icon_white.svg"
             alt="Company name"
@@ -136,17 +136,16 @@
               >
                 {{ footerLink.title }}
               </h4>
-              <ul class="mt-4 space-y-4">
+              <ul class="mt-4 space-y-4 footerlink">
                 <li v-for="item in footerLink.links" :key="item.name">
                   <a
                     v-if="item.link.includes('http')"
-                    target="_blank"
                     :href="item.link"
+                    target="_blank"
                     class="text-base leading-6 text-gray-500 hover:text-gray-900"
                   >
                     {{ item.name }}
                   </a>
-
                   <a
                     v-else
                     :href="item.link"
@@ -155,112 +154,14 @@
                     {{ item.name }}
                   </a>
                 </li>
-                <!-- <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Analytics
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Commerce
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Insights
-                </a>
-              </li> -->
               </ul>
             </div>
-            <!-- <div class="mt-12 md:mt-0">
-            <h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
-              Support
-            </h4>
-            <ul class="mt-4 space-y-4">
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Pricing
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Documentation
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Guides
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  API Status
-                </a>
-              </li>
-            </ul>
-          </div> -->
           </div>
-          <!-- <div class="md:grid md:grid-cols-2 md:gap-8">
-          <div>
-            <h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
-              Company
-            </h4>
-            <ul class="mt-4 space-y-4">
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  About
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Blog
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Jobs
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Press
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Partners
-                </a>
-              </li>
-            </ul>
-          </div>
-          <div class="mt-12 md:mt-0">
-            <h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
-              Legal
-            </h4>
-            <ul class="mt-4 space-y-4">
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Claim
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Privacy
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Terms
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div> -->
         </div>
       </div>
       <div class="mt-12 border-t border-gray-200 pt-8">
         <p class="text-base leading-6 text-gray-400 xl:text-center">
-          &#xA9; 2020 Workflow, Inc. All rights reserved.
+          &#xA9; 2021 ThreeFold, All rights reserved.
         </p>
       </div>
     </div>
@@ -276,5 +177,5 @@ export default {
 <style scoped>
 ul {
   list-style-type: none;
-}
+};
 </style>

src/templates/BlogPost.vue

@@ -53,7 +53,7 @@
                   }}</time>
                 </g-link>
                 <!-- &nbsp;&middot;&nbsp; {{ $page.blog.timeToRead }} min read -->
-                &nbsp;&middot;&nbsp;
+                <!-- &nbsp;&middot;&nbsp; -->
                 <g-link :to="$page.blog.path">
                   <time :datetime="$page.blog.datetime">{{
                     $page.blog.startDate
@@ -68,7 +68,7 @@
         <g-image :src="$page.blog.image"></g-image>
       </section>
 
-      <div class="">
+      <div class="py-12">
         <section
           class="post-content container mx-auto relative font-serif text-gray-700"
         >
@@ -167,6 +167,9 @@
         path
       }
     }
+
+
+    
   }
 </page-query>