From ccb0086a352bd7a88f2e85c035bff0daf6b5e449 Mon Sep 17 00:00:00 2001
From: Maria Rushkova <maryrushkova@gmail.com>
Date: Fri, 30 Jul 2021 14:51:20 +0200
Subject: [PATCH] Add section intro

---
 _includes/header.html | 193 +++++++++++++++++++++---------------------
 assets/img/arrow.svg  |   3 +
 index.html            |  24 +++++-
 src/style.css         |  48 ++++++++++-
 tailwind.config.js    |   2 +-
 5 files changed, 171 insertions(+), 99 deletions(-)
 create mode 100644 assets/img/arrow.svg

diff --git a/_includes/header.html b/_includes/header.html
index ac1a910..3dc6052 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -1,5 +1,5 @@
 <header>
-  <div class="container max-w-screen-xl border-b">
+  <div class="container max-w-screen-xl sm:border-b">
     <div
       class="
         nav-section
@@ -16,104 +16,105 @@
           ><img src="{{ '/assets/img/logo.png' | relative_url }}"
         /></a>
       </div>
+      <div class="flex justify-between items-center w-9/12">
+        <div class="burger block sm:hidden z-50">
+          <button
+            class="
+              burger__button burger__button--open
+              fixed
+              top-2
+              right-5
+              w-12
+              h-12
+            "
+            type="button"
+            aria-label="Mobile menu button"
+          >
+            <img
+              class="burger__icon"
+              src="{{ '/assets/img/burger.svg' | relative_url }}"
+              alt="Open menu button"
+            />
+          </button>
+          <button
+            class="
+              burger__button burger__button--close
+              hidden
+              fixed
+              top-2
+              right-5
+              w-12
+              h-12
+            "
+            type="button"
+            aria-label="Close mobile menu button"
+          >
+            <img
+              class="burger__icon burger__icon--close"
+              src="{{ '/assets/img/close.svg' | relative_url }}"
+              alt="Close menu button"
+            />
+          </button>
+        </div>
 
-      <div class="burger block sm:hidden z-50">
-        <button
-          class="
-            burger__button burger__button--open
-            fixed
-            top-2
-            right-5
-            w-12
-            h-12
-          "
-          type="button"
-          aria-label="Mobile menu button"
-        >
-          <img
-            class="burger__icon"
-            src="{{ '/assets/img/burger.svg' | relative_url }}"
-            alt="Open menu button"
-          />
-        </button>
-        <button
-          class="
-            burger__button burger__button--close
-            hidden
-            fixed
-            top-2
-            right-5
-            w-12
-            h-12
-          "
-          type="button"
-          aria-label="Close mobile menu button"
-        >
-          <img
-            class="burger__icon burger__icon--close"
-            src="{{ '/assets/img/close.svg' | relative_url }}"
-            alt="Close menu button"
-          />
-        </button>
-      </div>
+        <nav class="nav container">
+          <ul
+            class="
+              nav__list
+              hidden
+              sm:flex
+              justify-between
+              container
+              text-xs
+              font-semibold
+              md:pr-8
+              l:p-0
+            "
+          >
+            <li class="hover:opacity-50">
+              <a class="nav__link" href="{{site.url}}{{ site.baseurl }}/#work"
+                >Work</a
+              >
+            </li>
+            <li class="hover:opacity-50">
+              <a class="nav__link" href="{{site.url}}{{ site.baseurl }}/#about"
+                >About</a
+              >
+            </li>
+            <li class="hover:opacity-50">
+              <a class="nav__link" href="{{site.url}}{{ site.baseurl }}/#join"
+                >Join VAC</a
+              >
+            </li>
+            <li class="hover:opacity-50">
+              <a
+                class="nav__link"
+                href="{{site.url}}{{ site.baseurl }}/research-log/"
+                >Research log</a
+              >
+            </li>
+            <li class="hover:opacity-50">
+              <a class="nav__link" href="{{site.url}}{{ site.baseurl }}/media"
+                >Media</a
+              >
+            </li>
+            <li class="hover:opacity-50">
+              <a class="nav__link" href="https://specs.vac.dev" target="_blank"
+                >Specs</a
+              >
+            </li>
+            <li class="hover:opacity-50">
+              <a class="nav__link" href="https://forum.vac.dev/" target="_blank"
+                >Forum</a
+              >
+            </li>
+          </ul>
+        </nav>
 
-      <nav class="nav container">
-        <ul
-          class="
-            nav__list
-            hidden
-            sm:flex
-            justify-between
-            container
-            text-xs
-            font-semibold
-            md:pr-8
-            l:p-0
-          "
-        >
-          <li class="hover:opacity-50">
-            <a class="nav__link" href="{{site.url}}{{ site.baseurl }}/#work"
-              >Work</a
-            >
-          </li>
-          <li class="hover:opacity-50">
-            <a class="nav__link" href="{{site.url}}{{ site.baseurl }}/#about"
-              >About</a
-            >
-          </li>
-          <li class="hover:opacity-50">
-            <a class="nav__link" href="{{site.url}}{{ site.baseurl }}/#join"
-              >Join VAC</a
-            >
-          </li>
-          <li class="hover:opacity-50">
-            <a
-              class="nav__link"
-              href="{{site.url}}{{ site.baseurl }}/research-log/"
-              >Research log</a
-            >
-          </li>
-          <li class="hover:opacity-50">
-            <a class="nav__link" href="{{site.url}}{{ site.baseurl }}/media"
-              >Media</a
-            >
-          </li>
-          <li class="hover:opacity-50">
-            <a class="nav__link" href="https://specs.vac.dev" target="_blank"
-              >Specs</a
-            >
-          </li>
-          <li class="hover:opacity-50">
-            <a class="nav__link" href="https://forum.vac.dev/" target="_blank"
-              >Forum</a
-            >
-          </li>
+        <ul class="social items-center hidden md:flex">
+          {% include social.html %}
         </ul>
-      </nav>
-
-      <ul class="social items-center hidden md:flex">
-        {% include social.html %}
-      </ul>
+      </div>
 
       <div
         class="
diff --git a/assets/img/arrow.svg b/assets/img/arrow.svg
new file mode 100644
index 0000000..0cd5f3d
--- /dev/null
+++ b/assets/img/arrow.svg
@@ -0,0 +1,3 @@
+<svg width="6" height="8" viewBox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0L0 8L6 4L0 0Z" fill="#151512"/>
+</svg>
diff --git a/index.html b/index.html
index 2b8c59e..2542010 100644
--- a/index.html
+++ b/index.html
@@ -2,6 +2,28 @@
 layout: default
 ---
 
-<h1 class="text-4xl font-semibold">Vac</h1>
+<section
+  class="
+    intro
+    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"></div>
+  <div class="info-block w-full sm:w-10/12 lg:w-9/12">
+    <h1 class="mb-10">
+      VAC researches peer-to-peer, private, censorship resistant communication.
+    </h1>
+    <a class="link link--external" href="https://vac.dev/" target="_blank"
+      >See VAC openings</a
+    >
+  </div>
+</section>
 
 <section id="work">Work</section>
diff --git a/src/style.css b/src/style.css
index d992f23..ed1d606 100644
--- a/src/style.css
+++ b/src/style.css
@@ -2,6 +2,47 @@
 @tailwind components;
 @tailwind utilities;
 
+h1 {
+  font-size: 32px;
+  line-height: 44px;
+}
+
+.link--external {
+  font-style: italic;
+  font-weight: 600;
+  font-size: 12px;
+  line-height: 16px;
+  padding-left: 12px;
+  position: relative;
+  transition: all 0.3s;
+}
+
+.link--external::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  width: 6px;
+  height: 8px;
+  background-image: url(/assets/img/arrow.svg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.link--external::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+}
+
+.link--external:hover::after {
+  background-color: #151512;
+}
+
 .nav {
   max-width: 680px;
 }
@@ -10,7 +51,12 @@
   height: 73%;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767px) {
+  h1 {
+    font-size: 24px;
+    line-height: 33px;
+  }
+
   .nav {
     max-width: 480px;
   }
diff --git a/tailwind.config.js b/tailwind.config.js
index 6404d8e..b30185f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,7 +3,7 @@ module.exports = {
   theme: {
     extend: {},
     screens: {
-      xs: { max: "450px" },
+      xs: "450px",
       sm: "570px",
       "md-max": { max: "768px" },
       md: "768px",