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,8 +66,11 @@
               </p>
             </div>
           </div>
-          <section class="post-tags container mx-auto relative py-3" v-if="displaytags()">
+          <section
-            <g-link 
+            class="post-tags container mx-auto relative py-3"
+            v-if="displaytags()"
+          >
+            <g-link
               v-for="tag in record.tags"
               :key="tag.id"
               :to="tag.path"
@@ -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,94 +81,92 @@
 
       <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"
+          v-for="(element, index) in navigation.navLinks"
+          class="w-auto"
         >
-          <li
+          <div
-            class="py-1"
+            v-if="element.expandable"
-            :key="element.name"
+            class="relative mt-2"
-            v-for="(element, index) in navigation.navLinks"
+            x-data="{ open: false }"
-            :class="{
-              'mr-2': index != Object.keys(navigation.navLinks).length - 1,
-            }"
           >
-            <div
+            <button
-              v-if="element.expandable"
+              @click="setActive(index)"
-              class="relative"
+              class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
-              x-data="{ open: false }"
             >
-              <button
+              <span class="uppercase py-1 pl-2">{{ element.name }}</span>
-                @click="setActive(index)"
+              <svg
-                class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                :class="{
+                  'rotate-180': active == index,
+                  'rotate-0': active == !index,
+                }"
+                class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
               >
-                <span class="uppercase">{{ element.name }}</span>
+                <path
-                <svg
+                  fill-rule="evenodd"
-                  fill="currentColor"
+                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                  viewBox="0 0 20 20"
+                  clip-rule="evenodd"
-                  :class="{
+                ></path>
-                    'rotate-180': active == index,
+              </svg>
-                    'rotate-0': !active == index,
+            </button>
-                  }"
+            <div
-                  class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
+              v-if="active == index"
-                >
+              x-show="open"
-                  <path
+              x-transition:enter="transition ease-out duration-100"
-                    fill-rule="evenodd"
+              x-transition:enter-start="transform opacity-0 scale-95"
-                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+              x-transition:enter-end="transform opacity-100 scale-100"
-                    clip-rule="evenodd"
+              x-transition:leave="transition ease-in duration-75"
-                  ></path>
+              x-transition:leave-start="transform opacity-100 scale-100"
-                </svg>
+              x-transition:leave-end="transform opacity-0 scale-95"
-              </button>
+              class="absolute w-auto mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
+            >
               <div
-                v-if="active == index"
+                v-if="open"
-                x-show="open"
+                class="px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700"
-                x-transition:enter="transition ease-out duration-100"
-                x-transition:enter-start="transform opacity-0 scale-95"
-                x-transition:enter-end="transform opacity-100 scale-100"
-                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"
               >
-                <div
+                <div v-for="(link, i) in element.submenu" :key="i">
-                  v-if="open"
+                  <a
-                  class="px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700"
+                    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"
-                  <div v-for="link in element.submenu" :key="link.title">
+                    @click="open = false"
-                    <a
+                    :href="link.path"
-                      v-if="link.external"
+                    target="_blank"
-                      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"
+                    >{{ link.title }}</a
-                      @click="open = false"
+                  >
-                      :href="link.path"
+                  <a
-                      target="_blank"
+                    v-else
-                      >{{ link.title }}</a
+                    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"
-                    >
+                    @click="open = false"
-                    <a
+                    :href="link.path"
-                      v-else
+                    >{{ link.title }}</a
-                      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"
+                  >
-                      @click="open = false"
-                      :href="link.path"
-                      >{{ link.title }}</a
-                    >
-                  </div>
                 </div>
               </div>
             </div>
+          </div>
 
-            <g-link
+          <g-link
-              v-else-if="element.external"
+            v-else-if="element.external"
-              :to="element.link"
+            :to="element.link"
-              target="_blank"
+            @click.native="clicked"
-              class="animated-link"
+            target="_blank"
-              >{{ element.name }}</g-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">{{
+          >
-              element.name
+          <g-link
-            }}</g-link>
+            v-else
-          </li>
+            :to="element.link"
-        </ul>
+            @click.native="clicked"
-        <div
+            class="inline-flex sm:flex uppercase p-2 mr-4 animated-link"
+            >{{ 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;
 }
-</style>
+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"
         >
@@ -166,7 +166,10 @@
         image(width:64, height:64, fit:inside)
         path
       }
-    }    
+    }
+
+
+    
   }
 </page-query>
 

static/img/tf_icon_black.svg

@@ -1,15 +1,15 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 55.3 60" style="enable-background:new 0 0 55.3 60;" xml:space="preserve">
+	 viewBox="0 0 55.3 60" style="enable-background:new 0 0 55.3 60;" xml:space="preserve">
-<style type="text/css">
+<style type="text/css">
-	.st0{fill:#2D2D2D;}
+	.st0{fill:#2D2D2D;}
-</style>
+</style>
-<g>
+<g>
-	<rect x="17" y="22.8" class="st0" width="36.9" height="14.4"/>
+	<rect x="17" y="22.8" class="st0" width="36.9" height="14.4"/>
-	<g>
+	<g>
-		<path class="st0" d="M53.9,16.2H1.7V1.8h43.4c4.8,0,8.7,3.9,8.7,8.7L53.9,16.2L53.9,16.2z"/>
+		<path class="st0" d="M53.9,16.2H1.7V1.8h43.4c4.8,0,8.7,3.9,8.7,8.7L53.9,16.2L53.9,16.2z"/>
-		<path class="st0" d="M43.4,58.2H1.7V43.8h52.2v3.9C53.9,53.5,49.2,58.2,43.4,58.2"/>
+		<path class="st0" d="M43.4,58.2H1.7V43.8h52.2v3.9C53.9,53.5,49.2,58.2,43.4,58.2"/>
-	</g>
+	</g>
-</g>
+</g>
-</svg>
+</svg>

static/img/tf_icon_white.svg

@@ -1,15 +1,15 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 55.3 60" style="enable-background:new 0 0 55.3 60;" xml:space="preserve">
+	 viewBox="0 0 55.3 60" style="enable-background:new 0 0 55.3 60;" xml:space="preserve">
-<style type="text/css">
+<style type="text/css">
-	.st0{fill:#FFFFFF;}
+	.st0{fill:#FFFFFF;}
-</style>
+</style>
-<g>
+<g>
-	<rect x="17" y="22.8" class="st0" width="36.9" height="14.4"/>
+	<rect x="17" y="22.8" class="st0" width="36.9" height="14.4"/>
-	<g>
+	<g>
-		<path class="st0" d="M53.9,16.2H1.7V1.8h43.4c4.8,0,8.7,3.9,8.7,8.7L53.9,16.2L53.9,16.2z"/>
+		<path class="st0" d="M53.9,16.2H1.7V1.8h43.4c4.8,0,8.7,3.9,8.7,8.7L53.9,16.2L53.9,16.2z"/>
-		<path class="st0" d="M43.4,58.2H1.7V43.8h52.2v3.9C53.9,53.5,49.2,58.2,43.4,58.2"/>
+		<path class="st0" d="M43.4,58.2H1.7V43.8h52.2v3.9C53.9,53.5,49.2,58.2,43.4,58.2"/>
-	</g>
+	</g>
-</g>
+</g>
-</svg>
+</svg>