Add research page

_config.yml

@@ -1,5 +1,7 @@
 title: Vac
 description: VAC researches peer-to-peer, private, censorship resistant communication.
+baseurl: "" # the subpath of your site, e.g. /blog
+url: "http://localhost:4000/" # the base hostname & protocol for your site, e.g. http://example.com
 
 exclude:
   - Gemfile

_layouts/research-log.html

@@ -0,0 +1,96 @@
+---
+layout: default
+---
+
+<section
+  class="
+    container
+    max-w-screen-xl
+    flex flex-col
+    sm:flex-row
+    pt-10
+    pb-8
+    lg:py-10
+    border-b
+  "
+>
+  <div
+    class="
+      heading-block
+      w-full
+      sm:w-2/12
+      lg:w-3/12
+      flex
+      lg:justify-center
+      items-start
+      pb-3
+      sm:pb-0
+    "
+  >
+    <a class="link link--back" href="{{site.url}}{{ site.baseurl }}">Back</a>
+  </div>
+  <div class="info-block w-full sm:w-10/12 lg:w-9/12">
+    <h1 class="text-xl md:text-xxl mb-5 lg:mb-10 sm:max-w-md lg:max-w-xl">
+      Research log
+    </h1>
+    <p class="section__text text-s lg:text-base italic l:max-w-md">
+      We take inspiration from core internet architecture, existing survey work
+      and other efforts that have been done to decompose the problem into
+      orthogonal pieces.
+    </p>
+  </div>
+</section>
+
+<section
+  class="
+    container
+    max-w-screen-xl
+    flex flex-col
+    sm:flex-row
+    pt-10
+    pb-3
+    sm:pb-8
+    border-b
+  "
+>
+  <div class="heading-block w-full sm:w-2/12 lg:w-3/12 pr-2 ml:pr-0">
+    <h2 class="text-sm font-semibold mb-5 text-center sm:text-left">
+      Research entries
+    </h2>
+  </div>
+
+  <div class="info-block w-full sm:w-10/12 lg:w-9/12">
+    <ul class="container s:mx-auto flex-row hidden flex-wrap lg:flex">
+      {% for post in site.posts %} {% include post-preview.html %} {% endfor %}
+    </ul>
+    <ul
+      class="
+        container
+        s:mx-auto
+        flex flex-col
+        sm:flex-row sm:flex-wrap
+        lg:hidden
+      "
+    >
+      {% for post in site.posts limit:8 %} {% include post-preview.html %} {%
+      endfor %}
+    </ul>
+  </div>
+</section>
+
+<section
+  class="container max-w-screen-xl flex flex-col sm:flex-row pt-10 pb-3 sm:pb-8"
+>
+  <div class="heading-block w-full sm:w-2/12 lg:w-3/12 pr-2 ml:pr-0">
+    <h2 class="text-sm font-semibold mb-5 text-center sm:text-left">
+      Open problems
+    </h2>
+  </div>
+
+  <div class="info-block w-full sm:w-10/12 lg:w-9/12">
+    <ul class="container s:mx-auto flex flex-col flex-wrap sm:flex-row">
+      {% for post in site.posts limit:4%} {% include post-preview.html %} {%
+      endfor %}
+    </ul>
+  </div>
+</section>

research-log.md

@@ -0,0 +1,5 @@
+---
+layout: research-log
+permalink: /research-log/
+title: Research log
+---

src/style.css

@@ -6,7 +6,8 @@ html {
   scroll-behavior: smooth;
 }
 
-.link--external {
+.link--external,
+.link--back {
   @apply relative italic font-semibold text-xs pl-3 transition-all duration-300;
 }
 
@@ -23,7 +24,21 @@ html {
   background-size: cover;
 }
 
-.link--external::after {
+.link--back::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%) rotate(180deg);
+  width: 6px;
+  height: 8px;
+  background-image: url(/assets/img/arrow.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.link--external::after,
+.link--back::after {
   content: "";
   position: absolute;
   bottom: 0;
@@ -32,7 +47,8 @@ html {
   height: 1px;
 }
 
-.link--external:hover::after {
+.link--external:hover::after,
+.link--back:hover::after {
   background-color: #151512;
 }