Add section intro

_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">
+        <nav class="nav container">
-        <button
+          <ul
-          class="
+            class="
-            burger__button burger__button--open
+              nav__list
-            fixed
+              hidden
-            top-2
+              sm:flex
-            right-5
+              justify-between
-            w-12
+              container
-            h-12
+              text-xs
-          "
+              font-semibold
-          type="button"
+              md:pr-8
-          aria-label="Mobile menu button"
+              l:p-0
-        >
+            "
-          <img
+          >
-            class="burger__icon"
+            <li class="hover:opacity-50">
-            src="{{ '/assets/img/burger.svg' | relative_url }}"
+              <a class="nav__link" href="{{site.url}}{{ site.baseurl }}/#work"
-            alt="Open menu button"
+                >Work</a
-          />
+              >
-        </button>
+            </li>
-        <button
+            <li class="hover:opacity-50">
-          class="
+              <a class="nav__link" href="{{site.url}}{{ site.baseurl }}/#about"
-            burger__button burger__button--close
+                >About</a
-            hidden
+              >
-            fixed
+            </li>
-            top-2
+            <li class="hover:opacity-50">
-            right-5
+              <a class="nav__link" href="{{site.url}}{{ site.baseurl }}/#join"
-            w-12
+                >Join VAC</a
-            h-12
+              >
-          "
+            </li>
-          type="button"
+            <li class="hover:opacity-50">
-          aria-label="Close mobile menu button"
+              <a
-        >
+                class="nav__link"
-          <img
+                href="{{site.url}}{{ site.baseurl }}/research-log/"
-            class="burger__icon burger__icon--close"
+                >Research log</a
-            src="{{ '/assets/img/close.svg' | relative_url }}"
+              >
-            alt="Close menu button"
+            </li>
-          />
+            <li class="hover:opacity-50">
-        </button>
+              <a class="nav__link" href="{{site.url}}{{ site.baseurl }}/media"
-      </div>
+                >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="social items-center hidden md:flex">
-        <ul
+          {% include social.html %}
-          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>
+      </div>
-
-      <ul class="social items-center hidden md:flex">
-        {% include social.html %}
-      </ul>
 
       <div
         class="

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>

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>

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;
   }

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",