Merge branch 'development' of github.com:threefoldtech/www_partners_v2 into development

content/site/social.json

@@ -2,7 +2,7 @@
   "social": [
     {
       "icon": "linkedin",
-      "link": "https://www.linkedin.com"
+      "link": "https://www.linkedin.com/company/threefold-foundation/"
     }
   ]
 }

src/layouts/partials/Footer.vue

@@ -1,23 +1,33 @@
 <template>
-  <nav class="relative bg-black pt-4 pb-16 text-sm text-gray-500">
-    <div class="container mx-auto flex flex-wrap justify-between h-12 items-center">
+  <nav class="relative bg-black py-4 text-sm text-gray-500">
+    <div
+      class="container mx-auto flex flex-wrap justify-between h-12 items-center"
+    >
       <div class="w-full md:w-1/2 text-center md:text-left">
-      Copyright {{ currentYear }} by {{ $static.metadata.siteName }} 
-      | Design by <a href="https://ghost.org" target="_blank" class="hover:text-white">Ghost</a>
+        Copyright {{ currentYear }} by {{ $static.metadata.siteName }} | Design
+        by ThreeFold
       </div>
       <div class="w-full md:w-1/2">
-      <ul class="list-none flex justify-center md:justify-end">
-
-        <li 
-          :key="element.name" 
-          v-for="(element,index) in $static.metadata.navigation" 
-          class="hover:text-white"
-          v-bind:class="{'mr-6' : index != Object.keys($static.metadata.navigation).length - 1}"
-        >
-          <a :href="element.link" v-if="element.external" target="_blank" rel="noopener noreferrer">{{ element.name }}</a>
-          <g-link v-else :to="element.link" >{{element.name}}</g-link>
-        </li>      
-      </ul>
+        <ul class="list-none flex justify-center md:justify-end">
+          <li
+            :key="element.name"
+            v-for="(element, index) in $static.metadata.navigation"
+            class="hover:text-white"
+            v-bind:class="{
+              'mr-6':
+                index != Object.keys($static.metadata.navigation).length - 1,
+            }"
+          >
+            <a
+              :href="element.link"
+              v-if="element.external"
+              target="_blank"
+              rel="noopener noreferrer"
+              >{{ element.name }}</a
+            >
+            <g-link v-else :to="element.link">{{ element.name }}</g-link>
+          </li>
+        </ul>
       </div>
     </div>
   </nav>
@@ -41,7 +51,7 @@ export default {
   computed: {
     currentYear() {
       return new Date().getFullYear();
-    }
-  }
+    },
+  },
 };
 </script>

src/layouts/partials/HeaderWithNavbar.vue

@@ -1,14 +1,35 @@
 <template>
-  <header class="bg-black relative z-1000 bg-radial-t-gray-to-black" id="header">
-    <nav class="flex items-center justify-between flex-wrap container mx-auto px-4 sm:px-0 py-4">
+  <header
+    class="bg-black relative z-1000 bg-radial-t-gray-to-black"
+    id="header"
+  >
+    <nav
+      class="flex items-center justify-between flex-wrap container mx-auto px-4 sm:px-0 py-4"
+    >
       <div class="block flex-grow flex items-center w-auto height-30px">
-        <div class="text-sm flex-grow uppercase">
-          <ul class="list-none flex justify-left text-gray-300 uppercase">
+        <div class="text-sm flex-grow inline-flex">
+          <div class="inline-flex items-center flex-shrink-0 text-white mr-6">
+            <img
+              src="../../../static/img/ACI_icon-01.png"
+              class="mr-3"
+              width="50"
+              alt=""
+            />
+            <span class="font-semibold text-xl tracking-tight">{{
+              $static.metadata.siteName
+            }}</span>
+          </div>
+          <ul
+            class="list-none inline-flex justify-left text-gray-300 uppercase mt-3"
+          >
             <li
               :key="element.name"
-              v-for="(element,index) in $static.metadata.navigation"
+              v-for="(element, index) in $static.metadata.navigation"
               class="hover:text-white"
-              v-bind:class="{'mr-4' : index != Object.keys($static.metadata.navigation).length - 1}"
+              v-bind:class="{
+                'mr-4':
+                  index != Object.keys($static.metadata.navigation).length - 1,
+              }"
             >
               <a
                 :href="element.link"
@@ -16,8 +37,11 @@
                 target="_blank"
                 rel="noopener noreferrer"
                 class="animated-link"
-              >{{ element.name }}</a>
-              <g-link v-else :to="element.link" class="animated-link">{{element.name}}</g-link>
+                >{{ element.name }}</a
+              >
+              <g-link v-else :to="element.link" class="animated-link">{{
+                element.name
+              }}</g-link>
             </li>
           </ul>
         </div>
@@ -25,41 +49,36 @@
         <div class="inline-block text-gray-400">
           <ul class="list-none flex justify-center md:justify-end">
             <li class="mr-0 sm:mr-6">
-              <theme-switcher v-on="$listeners" :theme="theme"/>
+              <theme-switcher v-on="$listeners" :theme="theme" />
             </li>
             <li
               :key="element.name"
-              v-for="(element,index) in $static.metadata.social"
+              v-for="(element, index) in $static.metadata.social"
               class="hover:text-white hidden sm:block"
-              v-bind:class="{'mr-6' : index != Object.keys($static.metadata.social).length - 1}"
+              v-bind:class="{
+                'mr-6':
+                  index != Object.keys($static.metadata.social).length - 1,
+              }"
             >
               <span class="text-sm">
-                <a :href="element.link" target="_blank" rel="noopener noreferrer">
+                <a
+                  :href="element.link"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
                   <font-awesome :icon="['fab', element.icon]" />
                 </a>
               </span>
             </li>
           </ul>
         </div>
-
       </div>
     </nav>
-
-    <div class="logo pt-0 pb-16 md:pb-32 md:pt-16 container mx-auto text-center text-white">
-      <h2 class="m-0">
-        <span class="text-4xl">
-          <font-awesome :icon="['fas', 'ghost']" class="mb-1 mr-3"></font-awesome>
-        </span>
-        <span class="text-5xl text-white">{{ $static.metadata.siteName }}</span>
-      </h2>
-      <div class="text-gray-400 font-thin text-xl">{{ $static.metadata.siteDescription }}</div>
-    </div>
   </header>
 </template>
 
 <script>
-
-import ThemeSwitcher from '~/components/ThemeSwitcher'
+import ThemeSwitcher from "~/components/ThemeSwitcher";
 
 export default {
   props: {
@@ -67,9 +86,9 @@ export default {
       type: String,
     },
   },
-  components : {
-    ThemeSwitcher
-  }
+  components: {
+    ThemeSwitcher,
+  },
 };
 </script>
 

src/layouts/partials/Navbar.vue

@@ -7,10 +7,17 @@
       'opacity-0': !disableScroll && scrollPosition < headerHeight
     }">
       <div class="block flex-grow flex items-center w-auto">
-        <div class="flex items-center flex-shrink-0 text-white mr-6">
-          <font-awesome :icon="['fas', 'ghost']" class="mr-3"></font-awesome>
-          <span class="font-semibold text-xl tracking-tight">{{ $static.metadata.siteName }}</span>
-        </div>
+          <div class="inline-flex items-center flex-shrink-0 text-white mr-6">
+            <img
+              src="../../../static/img/ACI_icon-01.png"
+              class="mr-3"
+              width="50"
+              alt=""
+            />
+            <span class="font-semibold text-xl tracking-tight">{{
+              $static.metadata.siteName
+            }}</span>
+          </div>
         <div class="text-sm flex-grow uppercase">
           <ul 
           class="list-none flex justify-left text-gray-300 uppercase transition-all transition-500">

src/templates/BlogPost.vue

@@ -1,18 +1,25 @@
 <template>
   <Layout :hideHeader="true" :disableScroll="true">
     <div class="container sm:pxi-0 mx-auto overflow-x-hidden pt-20">
-      <div class="lg:mx-32 md:mx-16 sm:mx-8 mx-4 pt-8">
+      <div class="pt-8">
         <section class="post-header container mx-auto px-0 mb-4 border-b">
-          
-          <h1 class="text-5xl font-medium leading-none mt-0">{{ $page.blog.title}}</h1>
-          
-          <div class="text-2xl pt-4 pb-10 text-gray-700 font-serif" v-html="$page.blog.excerpt"></div>
+          <h1 class="text-5xl font-medium leading-none mt-0">
+            {{ $page.blog.title }}
+          </h1>
+          <div
+            class="text-2xl pt-4 pb-10 text-gray-700"
+            v-html="$page.blog.excerpt"
+          ></div>
         </section>
         <section class="post-author-list mb-10 mx-0">
           <div class="flex items-center">
             <div class="flex justify-between items-center">
               <ul class="list-none flex author-list">
-                <li v-for="author in $page.blog.author" :key="author.id" class="author-list-item">
+                <li
+                  v-for="author in $page.blog.author"
+                  :key="author.id"
+                  class="author-list-item"
+                >
                   <g-link :to="author.path" v-tooltip="author.name">
                     <g-image
                       :src="author.image"
@@ -24,26 +31,33 @@
               </ul>
             </div>
 
-            
             <div class="pl-3 flex flex-col text-xs leading-none uppercase">
               <p>
-                <span v-for="(author, index) in $page.blog.author" :key="author.id">
+                <span
+                  v-for="(author, index) in $page.blog.author"
+                  :key="author.id"
+                >
                   <g-link
                     :to="author.path"
                     v-tooltip="author.name"
                     class="hover:underline"
-                  >{{ author.name }}</g-link>
-                  <span v-if="index < $page.blog.author.length-1">,</span>
+                    >{{ author.name }}</g-link
+                  >
+                  <span v-if="index < $page.blog.author.length - 1">,</span>
                 </span>
               </p>
               <p class="text-gray-700">
-                 <g-link :to="$page.blog.path">
-                <time :datetime="$page.blog.datetime">{{ $page.blog.humanTime }}</time>
-                 </g-link>
+                <g-link :to="$page.blog.path">
+                  <time :datetime="$page.blog.datetime">{{
+                    $page.blog.humanTime
+                  }}</time>
+                </g-link>
                 <!-- &nbsp;&middot;&nbsp; {{ $page.blog.timeToRead }} min read -->
-                 &nbsp;&middot;&nbsp;
-                 <g-link :to="$page.blog.path">
-                <time :datetime="$page.blog.datetime" >{{ $page.blog.startDate }}</time>
+                &nbsp;&middot;&nbsp;
+                <g-link :to="$page.blog.path">
+                  <time :datetime="$page.blog.datetime">{{
+                    $page.blog.startDate
+                  }}</time>
                 </g-link>
               </p>
             </div>
@@ -54,9 +68,14 @@
         <g-image :src="$page.blog.image"></g-image>
       </section>
 
-      <div class="lg:mx-32 md:mx-16 px-4 sm:px-0">
-        <section class="post-content container mx-auto relative font-serif text-gray-700">
-          <div class="post-content-text text-xl" v-html="$page.blog.content"></div>
+      <div class="">
+        <section
+          class="post-content container mx-auto relative font-serif text-gray-700"
+        >
+          <div
+            class="post-content-text text-xl"
+            v-html="$page.blog.content"
+          ></div>
         </section>
 
         <section class="post-tags container mx-auto relative py-10">
@@ -65,16 +84,27 @@
             :key="tag.id"
             :to="tag.path"
             class="text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full"
-          >{{ tag.title }}</g-link>
+            >{{ tag.title }}</g-link
+          >
         </section>
       </div>
     </div>
 
-    <section class="post-related bg-black text-gray-200 pt-10 border-b border-b-gray-900">
+    <section
+      class="post-related bg-black text-gray-200 pt-10 border-b border-b-gray-900"
+    >
       <div class="container mx-auto">
         <div class="flex flex-wrap pt-8 pb-8 mx-4 sm:-mx-4">
-          <PostListItem v-if="$page.previous" :record="$page.previous" :border=false></PostListItem>
-          <PostListItem v-if="$page.next" :record="$page.next" :border=false></PostListItem>
+          <PostListItem
+            v-if="$page.previous"
+            :record="$page.previous"
+            :border="false"
+          ></PostListItem>
+          <PostListItem
+            v-if="$page.next"
+            :record="$page.next"
+            :border="false"
+          ></PostListItem>
         </div>
       </div>
     </section>
@@ -152,13 +182,21 @@ import PostListItem from "~/components/PostListItem.vue";
 
 export default {
   components: {
-    PostListItem
+    PostListItem,
   },
   metaInfo() {
     return {
-      title: this.$page.blog.title
+      title: this.$page.blog.title,
     };
-  }
-  
+  },
 };
 </script>
+
+<style scoped>
+@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
+.post-card-excerpt,
+.post-content-text {
+  font-family: "Roboto", sans-serif !important;
+  line-height: 1.2;
+}
+</style>