Add section media

_data/media.yml

@@ -0,0 +1,30 @@
+---
+- title: "[Video] Vitalik dancing badger dance"
+  date: 2021-03-05 12:00:00 +0800
+  link: https://www.youtube.com/statusim
+  image: /assets/img/vitalik@1x.png
+
+- title: "Panel Discussion on Bitcoin Podcast: How private protocols help activists"
+  date: 2021-03-05 12:00:00 +0800
+  link: https://www.youtube.com/statusim
+  image: /assets/img/bitcoin@1x.png
+
+- title: "Coindesk: Privacy-preserving p2p economic spam protection in Waku v2"
+  date: 2021-03-05 12:00:00 +0800
+  link: https://www.youtube.com/statusim
+  image: /assets/img/coindesk@1x.png
+
+- title: "Ethereum Community Conference 4 - we’ll be there"
+  date: 2021-03-05 12:00:00 +0800
+  link: https://www.youtube.com/statusim
+  image: /assets/img/ethereum@1x.png
+
+- title: "Case Study: How to solve XYZ"
+  date: 2021-03-05 12:00:00 +0800
+  link: https://www.youtube.com/statusim
+  image: /assets/img/xyz@1x.png
+
+- title: "Vac at Bankless podcast: empowering privacy to users around the world"
+  date: 2021-03-05 12:00:00 +0800
+  link: https://www.youtube.com/statusim
+  image: /assets/img/vac@1x.png

_includes/header.html

@@ -89,7 +89,7 @@
             <li class="hover:opacity-50">
               <a
                 class="nav__link-internal"
-                href="{{site.url}}{{ site.baseurl }}/#research-log"
+                href="{{site.url}}{{ site.baseurl }}/research-log"
                 >Research log</a
               >
             </li>

index.html

@@ -506,3 +506,50 @@ layout: default
     </div>
   </div>
 </section>
+
+<section
+  id="media"
+  class="
+    media
+    container
+    max-w-screen-xl
+    flex flex-col
+    sm:flex-row
+    py-10
+    border-b
+  "
+>
+  <div class="heading-block w-full sm:w-2/12 lg:w-3/12">
+    <h2 class="text-sm font-semibold mb-5 s:text-center lg:text-center">
+      Media
+    </h2>
+  </div>
+
+  <div class="info-block w-full sm:w-10/12 lg:w-9/12">
+    <div class="flex flex-col">
+      <ul class="mb-5 container s:mx-auto flex flex-col flex-wrap sm:flex-row">
+        {% for mediapost in site.data.media limit:8 %}
+        <li
+          class="flex flex-col w-full sm:w-1/2 lm:max-w-screen-xs mb-5 lg:mb-8"
+        >
+          <time class="text-xxs opacity-75"
+            >{{ mediapost.date | date: '%B %d, %Y' }}</time
+          ><a
+            href="{{ mediapost.link }}"
+            class="text-xs lg:text-base font-semibold"
+            >{{ mediapost.title }}</a
+          >
+        </li>
+        {% endfor %}
+      </ul>
+
+      <div class="media__link container flex justify-start">
+        <a
+          class="link link--external"
+          href="{{site.url}}{{ site.baseurl }}/media"
+          >View all media</a
+        >
+      </div>
+    </div>
+  </div>
+</section>