From bf131dc080b71d41b61848f241531ead8931a8be Mon Sep 17 00:00:00 2001
From: Maria Rushkova <maryrushkova@gmail.com>
Date: Thu, 5 Aug 2021 15:14:49 +0200
Subject: [PATCH] Add research page

---
 _config.yml                |  2 +
 _layouts/research-log.html | 96 ++++++++++++++++++++++++++++++++++++++
 research-log.md            |  5 ++
 src/style.css              | 22 +++++++--
 4 files changed, 122 insertions(+), 3 deletions(-)
 create mode 100644 _layouts/research-log.html
 create mode 100644 research-log.md

diff --git a/_config.yml b/_config.yml
index dc52ed8..d93feb0 100644
--- a/_config.yml
+++ b/_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
diff --git a/_layouts/research-log.html b/_layouts/research-log.html
new file mode 100644
index 0000000..75eebbe
--- /dev/null
+++ b/_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>
diff --git a/research-log.md b/research-log.md
new file mode 100644
index 0000000..7f27b84
--- /dev/null
+++ b/research-log.md
@@ -0,0 +1,5 @@
+---
+layout: research-log
+permalink: /research-log/
+title: Research log
+---
diff --git a/src/style.css b/src/style.css
index 22a9d2a..dcb95b4 100644
--- a/src/style.css
+++ b/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;
 }