ipfs · cwaring · Apr 27, 2023 · Apr 20, 2023 · Apr 20, 2023 · Apr 20, 2023
diff --git a/assets/css/fonts.css b/assets/css/fonts.css
@@ -3,4 +3,25 @@ h1, h2, h3, h4, h5, h6 {
 }
 p {
   @apply text-lg;
+}
+p:not(:last-child) {
+  @apply mb-4;
+}
+
+main a:not(.btn) {
+  @apply underline;
+}
+
+.list-xl {
+  @apply text-xl list-disc pl-4;
+}
+.list-xl li {
+  @apply mb-8;
+}
+.list-xl li::marker {
+  @apply text-brand-teal;
+}
+
+@screen lg {
+  @apply ml-8;
 }
diff --git a/components/Btn.vue b/components/Btn.vue
@@ -3,6 +3,8 @@ import type { AppLinkProps } from '@/components/AppLink.vue'
 
 interface Props extends AppLinkProps {
   primary?: boolean
+  outline?: boolean
+  full?: boolean
 }
 defineProps<Props>()
 </script>
@@ -12,6 +14,8 @@ defineProps<Props>()
     class="btn" :class="
       {
         'btn-primary': primary,
+        'btn-outline': outline,
+        'w-full text-center': full,
       }"
   >
     <slot />

diff --git a/components/Card2.vue b/components/Card2.vue
@@ -29,7 +29,7 @@ defineProps<Props>()
     <div class="p-6 pt-4">
       <p v-if="excerpt" class="inline-block text-base">
         {{ excerpt }}...
-        <a class="text-brand-teal-dark underline" :href="link">Read more</a>
+        <span class="text-brand-teal-dark underline"><AppLink :href="link">Read more</AppLink></span>
       </p>
       <slot />
       <div v-if="category || tags" class="flex inline-flex mt-4 gap-1">

diff --git a/components/CardSubhead.vue b/components/CardSubhead.vue
@@ -0,0 +1,5 @@
+<template>
+  <h3 class="text-2xl text-black mb-2">
+    <slot />
+  </h3>
+</template>
diff --git a/components/Footer.vue b/components/Footer.vue
@@ -1,6 +1,6 @@
 <template>
   <footer class="relative">
-    <div class="absolute -z-1 w-full h-full bg-gradient-to-r from-brand-dark to-brand-blue" />
+    <div class="absolute -z-1 w-full h-full bg-gradient-to-r from-brand-dark to-brand-blue-dark" />
     <div class="absolute lg:overflow-visible overflow-x-hidden bottom-0 right-0">
       <img src="/images/constellations-footer.svg" alt="">
     </div>
@@ -15,53 +15,109 @@
         <div class="lg:pl-8 pl-0 lg:mt-0 mt-8">
           <div class="flex justify-between gap-4">
             <div>
-              <Subhead bold small>
+              <Subhead bold small tight>
                 About
               </Subhead>
               <ul class="lg:text-sm text-xs leading-7">
-                <li><a href="https://protocol.ai/">About Protocol Labs</a></li>
-                <li><a href="https://blog.ipfs.tech/">Blog &amp; News</a></li>
-                <li><a href="https://ipfs.tech/media">Press</a></li>
-                <li><a href="https://github.com/ipfs/community/blob/master/code-of-conduct.md">Code of conduct</a></li>
-                <li><a href="https://github.com/ipfs/community/blob/master/CONTRIBUTING.md#security-issues">Security</a></li>
-                <li><a href="#">Browsers</a></li>
+                <li>
+                  <AppLink href="https://protocol.ai/">
+                    About Protocol Labs
+                  </AppLink>
+                </li>
+                <li>
+                  <AppLink href="https://blog.ipfs.tech/">
+                    Blog &amp; News
+                  </AppLink>
+                </li>
+                <li>
+                  <AppLink href="https://ipfs.tech/media">
+                    Press
+                  </AppLink>
+                </li>
+                <li>
+                  <AppLink href="https://github.com/ipfs/community/blob/master/code-of-conduct.md">
+                    Code of conduct
+                  </AppLink>
+                </li>
+                <li>
+                  <AppLink href="https://github.com/ipfs/community/blob/master/CONTRIBUTING.md#security-issues">
+                    Security
+                  </AppLink>
+                </li>
+                <li>
+                  <AppLink href="#">
+                    Browsers
+                  </AppLink>
+                </li>
               </ul>
             </div>
             <div>
-              <Subhead bold small>
+              <Subhead bold small tight>
                 Community
               </Subhead>
               <ul class="mt-4 lg:text-sm text-xs leading-7">
-                <li><a href="#">Forums</a></li>
-                <li><a href="#">Office Hours</a></li>
-                <li><a href="#">Hackathons</a></li>
-                <li><a href="#">Developer Grants</a></li>
-                <li><a href="#">Accelerators</a></li>
+                <li>
+                  <AppLink href="#">
+                    Forums
+                  </AppLink>
+                </li>
+                <li>
+                  <AppLink href="#">
+                    Office Hours
+                  </AppLink>
+                </li>
+                <li>
+                  <AppLink href="#">
+                    Hackathons
+                  </AppLink>
+                </li>
+                <li>
+                  <AppLink href="#">
+                    Developer Grants
+                  </AppLink>
+                </li>
+                <li>
+                  <AppLink href="#">
+                    Accelerators
+                  </AppLink>
+                </li>
               </ul>
             </div>
             <div>
-              <Subhead bold small>
+              <Subhead bold small tight>
                 Resources
               </Subhead>
               <ul class="mt-4 lg:text-sm text-xs leading-7">
-                <li><a href="#">Specs</a></li>
-                <li><a href="#">Examples</a></li>
-                <li><a href="#">Research</a></li>
+                <li>
+                  <AppLink href="">
+                    Specs
+                  </AppLink>
+                </li>
+                <li>
+                  <AppLink href="">
+                    Examples
+                  </AppLink>
+                </li>
+                <li>
+                  <AppLink href="">
+                    Research
+                  </AppLink>
+                </li>
               </ul>
             </div>
           </div>
         </div>
       </div>
       <div class="flex gap-4 justify-end mt-4">
-        <a href="http://twitter.com/ipfs">
+        <AppLink href="http://twitter.com/ipfs">
           <img src="/images/social-twitter.svg" alt="Twitter logo" class="w-8">
-        </a>
-        <a href="https://github.com/ipfs">
+        </AppLink>
+        <AppLink href="https://github.com/ipfs">
           <img src="/images/social-github.svg" alt="Github logo" class="w-8">
-        </a>
-        <a href="https://www.youtube.com/channel/UCdjsUXJ3QawK4O5L1kqqsew">
+        </AppLink>
+        <AppLink href="https://www.youtube.com/channel/UCdjsUXJ3QawK4O5L1kqqsew">
           <img src="/images/social-youtube.svg" alt="Youtube logo" class="w-8">
-        </a>
+        </AppLink>
       </div>
     </div>
   </footer>

diff --git a/components/Heading.vue b/components/Heading.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 interface Props {
   center?: boolean
+  tight?: boolean
 }
 defineProps<Props>()
 </script>
 
 <template>
-  <h2 class="text-4xl m-b-8" :class="{ 'text-center': center }">
+  <h2 class="text-4xl" :class="[{ 'text-center': center }, tight ? 'mb-2' : 'mb-8']">
     <slot />
   </h2>
 </template>
diff --git a/components/ListLink.vue b/components/ListLink.vue
@@ -8,8 +8,8 @@ defineProps<Props>()
 
 <template>
   <li class="inline-block text-sm font-bold text-brand-teal-dark border-brand-teal-dark border-r-2 last:border-r-0 pr-3 mr-3 last:pr-0 last:mr-0">
-    <a :href="link">
+    <AppLink :href="link">
       {{ label }}
-    </a>
+    </AppLink>
   </li>
 </template>
diff --git a/components/NewsletterForm.vue b/components/NewsletterForm.vue
@@ -11,11 +11,11 @@ function onSubmit() {
 
 <template>
   <div id="newsletter-form">
-    <Subhead bold small>
+    <Subhead bold small tight>
       Stay informed
     </Subhead>
     <p class="text-sm mb-8 ">
-      Sign up for the IPFS Weekly newsletter (<a class="text-blueGreenLight hover:underline" href="https://blog.ipfs.tech/?tags=weekly">example</a>) for the latest on releases, upcoming developments, community events, and more.
+      Sign up for the IPFS Weekly newsletter (<span class="text-brand-teal underline"><AppLink href="https://blog.ipfs.tech/?tags=weekly">example</AppLink></span>) for the latest on releases, upcoming developments, community events, and more.
     </p>
     <form
       id="mc-embedded-subscribe-form"

diff --git a/components/PageSection.vue b/components/PageSection.vue
@@ -9,6 +9,7 @@ interface Props {
   textWhite?: boolean
   contentClasses?: string
   tight?: boolean
+  bottomTight?: boolean
 }
 defineProps<Props>()
 </script>
@@ -17,13 +18,13 @@ defineProps<Props>()
   <section
     :id="id" class="relative" :class="{ 'text-white': textWhite }"
   >
-    <div v-if="darkGradient" class="absolute -z-1 w-full h-full bg-gradient-to-r from-brand-dark to-brand-blue" />
+    <div v-if="darkGradient" class="absolute -z-1 w-full h-full bg-gradient-to-r from-brand-dark to-brand-blue-dark" />
     <div v-if="lightGradient" class="absolute -z-1 w-full h-full bg-gradient-to-b from-brand-teal-light to-white" />
     <img v-if="background" :src="`./images/${background}`" alt="" class="absolute -z-1 w-full h-full object-cover">
-    <div :class="`absolute lg:overflow-visible overflow-x-hidden ${overlayPosition}`">
-      <img v-if="overlay" :src="`./images/${overlay}`" alt="">
+    <div v-if="overlay" class="absolute inset-0 lg:overflow-visible overflow-x-hidden">
+      <img :src="`./images/${overlay}`" :class="`absolute ${overlayPosition}`">
     </div>
-    <div class="relative max-w-screen-xl mx-auto lg:p-x-32 px-7" :class="[tight ? 'lg:py-14 py-6' : 'lg:py-28 py-14']">
+    <div class="relative max-w-screen-xl mx-auto lg:p-x-32 px-7" :class="[tight ? 'lg:py-14 py-6' : 'lg:py-20 py-14', bottomTight ? 'lg:pb-0 pb-0' : 'lg:pb-28 pb-14']">
       <slot />
     </div>
   </section>

diff --git a/components/Subhead.vue b/components/Subhead.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
 interface Props {
+  center?: boolean
   bold?: boolean
   small?: boolean
+  tight?: boolean
 }
 defineProps<Props>()
 </script>
 
 <template>
-  <h3 :class="[bold ? 'font-bold' : 'font-normal', small ? 'text-lg mb-3' : 'text-2xl mb-13']">
+  <h3 :class="[bold ? 'font-bold' : 'font-normal', small ? 'text-lg' : 'text-2xl', tight ? 'mb-3' : 'mb-10', { 'text-center': center }]">
     <slot />
   </h3>
 </template>
diff --git a/components/ZebraCard.vue b/components/ZebraCard.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+interface Props {
+  buttonLabel?: string
+  buttonLink?: string
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="zebra-card p-6 rounded-xl flex flex-col justify-between odd:bg-brand-blue even:border-1">
+    <div>
+      <slot />
+    </div>
+    <div class="flex-none pt-4">
+      <Btn v-if="buttonLabel" :href="buttonLink" outline full>
+        {{ buttonLabel }}
+      </Btn>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss">
+.zebra-card h3 {
+  @apply text-teal mb-6;
+}
+.zebra-card p {
+  @apply text-sm mb-4;
+}
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -52,7 +52,9 @@ export default {
 
 <template>
   <div class="flex flex-col min-h-screen font-sans">
-    <slot />
+    <main>
+      <slot />
+    </main>
     <Footer />
   </div>
 </template>

diff --git a/package.json b/package.json
@@ -14,9 +14,11 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.38.5",
+    "@iconify-json/carbon": "^1.1.16",
     "@nuxt/content": "^2.6.0",
     "@nuxtjs/plausible": "^0.2.0",
     "@unocss/nuxt": "^0.51.8",
+    "@unocss/preset-icons": "^0.51.8",
     "@vueuse/nuxt": "^10.1.0",
     "eslint": "^8.39.0",
     "nuxt": "^3.4.2",