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,7 +16,7 @@
           ><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="
@@ -114,6 +114,7 @@
         <ul class="social items-center hidden md:flex">
           {% include social.html %}
         </ul>
+      </div>
 
       <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",