Add styles to tailwind.js

_includes/header.html

@@ -57,7 +57,7 @@
           </button>
         </div>
 
-        <nav class="nav container">
+        <nav class="nav max-w-screen-xm md:max-w-screen-sl container">
           <ul
             class="
               nav__list
@@ -155,6 +155,7 @@
             pb-5
             bg-white
             w-9/12
+            h-3/4
             z-40
           "
         >

index.html

@@ -17,7 +17,7 @@ layout: default
 >
   <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 sm:max-w-md lg:max-w-xl">
+    <h1 class="text-xl md:text-xxl mb-10 sm:max-w-md lg:max-w-xl">
       VAC researches peer-to-peer, private, censorship resistant communication.
     </h1>
     <a class="link link--external" href="https://vac.dev/" target="_blank"
@@ -40,10 +40,12 @@ layout: default
   "
 >
   <div class="heading-block w-full sm:w-2/12 lg:w-3/12">
-    <h2 class="mb-6 s:text-center lg:text-center">Work</h2>
+    <h2 class="text-sm font-semibold mb-6 s:text-center lg:text-center">
+      Work
+    </h2>
   </div>
   <div class="info-block w-full sm:w-10/12 lg:w-9/12">
-    <p class="section__text mb-6 l:max-w-md l:mb-16">
+    <p class="section__text text-s lg:text-base italic mb-6 l:max-w-md l:mb-16">
       Building protocols and products at all layers of the stack including
       underlying transports, p2p overlays and routing, initial trust
       establishment, and semantics for things like group chat.
@@ -131,8 +133,30 @@ layout: default
             </clipPath>
           </defs>
         </svg>
-        <p class="work__heading mb-2 lg:mb-6 lg:uppercase">Waku</p>
-        <p class="work__text mb-3 lg:mb-6">
+        <p
+          class="
+            work__heading
+            mb-2
+            lg:mb-6 lg:uppercase
+            font-bold
+            text-l
+            lg:text-xxl
+          "
+        >
+          Waku
+        </p>
+        <p
+          class="
+            work__text
+            text-s
+            lg:text-base
+            mb-3
+            lg:mb-6
+            opacity-75
+            text-left
+            max-w-screen-xxs
+          "
+        >
           A gossip based messaging protocol for private, secure, p2p messaging
           with implementations written in go, nim, java script.
         </p>
@@ -181,8 +205,30 @@ layout: default
             </clipPath>
           </defs>
         </svg>
-        <p class="work__heading mb-2 lg:mb-6 lg:uppercase">DApp Connect</p>
-        <p class="work__text mb-3 lg:mb-6">
+        <p
+          class="
+            work__heading
+            mb-2
+            lg:mb-6 lg:uppercase
+            font-bold
+            text-l
+            lg:text-xxl
+          "
+        >
+          DApp Connect
+        </p>
+        <p
+          class="
+            work__text
+            text-s
+            lg:text-base
+            mb-3
+            lg:mb-6
+            opacity-75
+            text-left
+            max-w-screen-xxs
+          "
+        >
           The communication layer for Ethereum. A tech stack enabling
           decentralized communication between DApps and people.
         </p>

package-lock.json

@@ -1,13 +1,11 @@
 {
-  "name": "jekyll-starter-tailwind",
+  "name": "status-vac",
   "version": "6.0.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "jekyll-starter-tailwind",
       "version": "6.0.0",
-      "license": "MIT",
       "devDependencies": {
         "autoprefixer": "10.3.1",
         "babel-preset-env": "1.7.0",
@@ -20,7 +18,7 @@
         "gulp-postcss": "9.0.0",
         "postcss": "8.3.6",
         "postcss-import": "14.0.2",
-        "tailwindcss": "2.2.7"
+        "tailwindcss": "^2.2.7"
       },
       "engines": {
         "node": "12"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "status-vac",
-  "version": "6.0.0",
+  "version": "1.0.0",
   "main": "gulpfile.babel.js",
   "devDependencies": {
     "autoprefixer": "10.3.1",
@@ -14,7 +14,7 @@
     "gulp-postcss": "9.0.0",
     "postcss": "8.3.6",
     "postcss-import": "14.0.2",
-    "tailwindcss": "2.2.7"
+    "tailwindcss": "^2.2.7"
   },
   "engines": {
     "node": "12"

src/style.css

@@ -6,25 +6,8 @@ html {
   scroll-behavior: smooth;
 }
 
-h1 {
-  font-size: 32px;
-  line-height: 44px;
-}
-
-h2 {
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: 600;
-}
-
 .link--external {
-  font-style: italic;
-  font-weight: 600;
-  font-size: 12px;
-  line-height: 16px;
-  padding-left: 12px;
-  position: relative;
-  transition: all 0.3s;
+  @apply relative italic font-semibold text-xs pl-3 transition-all duration-300;
 }
 
 .link--external::before {
@@ -52,58 +35,3 @@ h2 {
 .link--external:hover::after {
   background-color: #151512;
 }
-
-.nav {
-  max-width: 680px;
-}
-
-.nav-mobile {
-  height: 73%;
-}
-
-.section__text {
-  font-style: italic;
-  font-weight: normal;
-  font-size: 14px;
-  line-height: 170%;
-}
-
-.work__heading {
-  font-size: 32px;
-  line-height: 44px;
-  font-weight: 700;
-}
-
-.work__text {
-  font-size: 14px;
-  line-height: 180%;
-  opacity: 0.75;
-  text-align: start;
-  max-width: 370px;
-}
-
-@media (max-width: 1023px) {
-  .work__heading {
-    font-size: 18px;
-    line-height: 25px;
-  }
-
-  .work__text {
-    font-size: 12px;
-  }
-}
-
-@media (max-width: 767px) {
-  h1 {
-    font-size: 24px;
-    line-height: 33px;
-  }
-
-  .nav {
-    max-width: 480px;
-  }
-
-  .section__text {
-    font-size: 12px;
-  }
-}

tailwind.config.js

@@ -1,11 +1,18 @@
 module.exports = {
-  purge: [`_site/**/*.html`],
+  purge: [`_site/**/*.html`, `_site/**/*.css`],
   theme: {
-    extend: {},
+    extend: {
+      backgroundImage: (theme) => ({
+        arrow: "url(/assets/img/arrow.svg)",
+      }),
+    },
     screens: {
+      xxs: "370px",
       xs: "450px",
+      xm: "480px",
       sm: "570px",
       s: { max: "570px" },
+      sl: "680px",
       "md-max": { max: "768px" },
       md: "768px",
       "lg-max": { max: "1024px" },
@@ -24,12 +31,19 @@ module.exports = {
     fontFamily: {
       sans: ["Open Sans", "sans-serif"],
     },
+    fontSize: {
+      xs: ["12px", "16px"],
+      s: ["12px", "20px"],
+      sm: ["14px", "22px"],
+      base: ["14px", "24px"],
+      l: ["18px", "25px"],
+      lg: ["20px", "28px"],
+      xl: ["24px", "32px"],
+      xxl: ["32px", "44px"],
+    },
     colors: {
       white: "#fff",
       black: "#151512",
-      grey: {
-        test: "#242424",
-      },
     },
   },
   variants: {},