refactor: content review (#265)

* typo * update peer text * build->develop * develop desc * getting started desc * dev link * rm page * rm img * change why ipfs * change open * typo * use ipfs apps * store desc * switch card order * participation copy * community cta * numbers title case * chore: update deps * rm dev mode * fix section padding * fix: contrib ctas * connect card content * social links and cal links * apply all wg card links * fix inline links * community desc * add cid docs * visual fixes * align subheads * add anytype link * update subtitle * update cards * update community cta * add browser card links * update ctas * rm duriniOS * rm browsers * add Durin apps * update links lists * use inline-block links (for now) * fix: lint * fix card layouts * font smoothing * simplify type styles * layout improvements * update data and assets * fix deep css * fix list style * fix deep css * pass custom btn labels * fix 3s logo * fix 3S logo * update snapshot url * mv antialiased to app css * add use case assets * fix 3s logo * header style cleanup * various cleanup * tweak spacing * fix layout spacing * fix: title spacing * chore: update deps * typo * refactor: rm global process * refactor: static routes * fix: wg spacing
ipfs · Jul 27, 2023 · 3470b62 · 3470b62
1 parent 0166567
commit 3470b62
Show file tree

Hide file tree

Showing 31 changed files with 1,578 additions and 1,996 deletions.
diff --git a/.github/workflows/stale.yml b/.github/workflows/stale.yml
@@ -6,4 +6,4 @@ on:
 
 jobs:
   stale:
-    uses: pl-strflt/.github/.github/workflows/reusable-stale-issue.yml@v0.3
+    uses: pl-strflt/.github/.github/workflows/reusable-stale-issue.yml@v0.3
diff --git a/app.vue b/app.vue
@@ -1,13 +1,4 @@
 <script setup lang="ts">
-const isDev = import.meta.env.DEV
-
-useHead({
-  htmlAttrs: {
-    class: {
-      'mode-dev': isDev,
-    },
-  },
-})
 useSeoMeta({
   twitterSite: '@ipfs',
 })
@@ -20,17 +11,9 @@ useSeoMeta({
   </NuxtLayout>
 </template>
 
-<style>
+<style lang="postcss">
 html {
   scroll-behavior: smooth;
-}
-
-/* debug mode */
-.mode-dev *:hover {
-  outline: 1px solid red
-}
-
-.mode-dev .setup {
-  display: block;
+  @apply antialiased;
 }
 </style>
diff --git a/assets/css/fonts.css b/assets/css/fonts.css
@@ -1,32 +1,17 @@
-html, body {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
 h1, h2, h3, h4, h5, h6 {
   font-weight: bold;
 }
-p {
-  @apply text-lg;
-}
-p:not(:last-child) {
-  @apply mb-4;
-}
 
 main a:not(.btn,.card) {
   @apply underline;
 }
 
-.list-xl {
-  @apply text-xl list-disc pl-4;
+.list-lg {
+  @apply text-lg list-disc pl-4;
 }
-.list-xl li {
+.list-lg li {
   @apply mb-8;
 }
-.list-xl li::marker {
+.list-lg li::marker {
   @apply text-brand-teal;
 }
-
-@screen lg {
-  @apply ml-8;
-}
diff --git a/components/Card.vue b/components/Card.vue
@@ -20,16 +20,18 @@ const bgColor = computed(() => {
 </script>
 
 <template>
-  <div class="flex flex-col justify-between rounded-xl p-10" :class="bgColor">
-    <div
-      :class="{ 'text-center': center }"
-    >
-      <slot />
-    </div>
-    <div class="flex-none" :class="{ 'mx-auto': center }">
-      <Btn v-if="buttonLabel" :href="buttonLink">
+  <div class="card flex flex-col justify-between gap-0 rounded-xl p-10" :class="[{ 'text-center': center }, bgColor]">
+    <slot />
+    <div v-if="buttonLabel" class="flex-none" :class="{ 'mx-auto': center }">
+      <Btn :href="buttonLink">
         {{ buttonLabel }}
       </Btn>
     </div>
   </div>
 </template>
+
+<style scoped lang="postcss">
+.card :deep(p) {
+  @apply mb-4 text-lg;
+}
+</style>
diff --git a/components/CarouselCards.vue b/components/CarouselCards.vue
@@ -9,9 +9,9 @@ interface Props {
       description?: string
       image?: string
       link?: string
+      label?: string
     },
   ]
-  buttonLabel?: string
 }
 defineProps<Props>()
 
@@ -37,12 +37,12 @@ const breakpoints = {
         v-for="(item, index) in items"
         :key="index"
       >
-        <Card background="light" :button-label="buttonLabel" :button-link="item.link" center>
+        <Card background="light" :button-label="item.label || 'Learn more'" :button-link="item.link" center>
           <img :src="`/images/${item.image}`" class="mb-8 h-32 w-full object-contain object-center">
           <h3 class="mb-8 text-xl">
             {{ item.title }}
           </h3>
-          <p class="mb-8 text-xl">
+          <p class="text-xl">
             {{ item.description }}
           </p>
         </Card>

diff --git a/components/Footer.vue b/components/Footer.vue
@@ -39,11 +39,6 @@
                     Security
                   </AppLink>
                 </li>
-                <li>
-                  <AppLink href="#">
-                    Browsers
-                  </AppLink>
-                </li>
               </ul>
             </div>
             <div>
@@ -52,27 +47,27 @@
               </Subhead>
               <ul class="mt-4 text-xs leading-7 lg:text-sm">
                 <li>
-                  <AppLink href="#">
+                  <AppLink href="https://discuss.ipfs.tech/">
                     Forums
                   </AppLink>
                 </li>
                 <li>
-                  <AppLink href="#">
+                  <AppLink href="https://ipfs.fyi/office">
                     Office Hours
                   </AppLink>
                 </li>
                 <li>
-                  <AppLink href="#">
+                  <AppLink href="https://hackathons.filecoin.io/">
                     Hackathons
                   </AppLink>
                 </li>
                 <li>
-                  <AppLink href="#">
+                  <AppLink href="https://github.com/ipfs/devgrants">
                     Developer Grants
                   </AppLink>
                 </li>
                 <li>
-                  <AppLink href="#">
+                  <AppLink href="https://ipfs.fyi/accelerators">
                     Accelerators
                   </AppLink>
                 </li>

diff --git a/components/Heading.vue b/components/Heading.vue
@@ -7,7 +7,7 @@ defineProps<Props>()
 </script>
 
 <template>
-  <h2 class="text-4xl" :class="[{ 'text-center': center }, tight ? 'mb-2' : 'mb-8']">
+  <h2 class="text-2xl lg:text-3xl sm:text-2xl" :class="[{ 'text-center': center }, tight ? 'mb-2' : 'mb-8']">
     <slot />
   </h2>
 </template>
diff --git a/components/Hero.vue b/components/Hero.vue
@@ -11,7 +11,7 @@ defineProps<Props>()
 <template>
   <PageSection id="hero" :background="background" :overlay="overlay" overlay-position="top-0 right-0">
     <div class="m-x-auto max-w-xl" :class="[tall ? 'p-y-16' : 'pt-16']">
-      <h1 class="m-b-4 text-center text-5xl text-white">
+      <h1 class="mb-4 text-center text-2xl text-white lg:text-5xl sm:text-2xl">
         <slot name="title" />
       </h1>
       <h4 class="text-center text-lg font-normal text-gray-400">

diff --git a/components/ImageSplit.vue b/components/ImageSplit.vue
@@ -25,7 +25,7 @@ const imageStyle = computed(() => {
       <slot />
     </div>
     <img v-if="imageRounded" class="tinted mx-auto rounded-full lg:ml-0" :style="imageStyle" :src="`/images/${image}`">
-    <img v-else class="mx-auto lg:ml-0" :style="imageStyle" :src="`/images/${image}`">
+    <img v-else class="mx-auto" :style="imageStyle" :src="`/images/${image}`">
   </div>
 </template>
 

diff --git a/components/ListLinks.vue b/components/ListLinks.vue
@@ -1,5 +1,5 @@
 <template>
-  <ul class="mt-8 -mb-1">
+  <ul class="mt-8 text-center -mb-1 sm:text-left">
     <slot />
   </ul>
 </template>
diff --git a/components/MobileMenu.vue b/components/MobileMenu.vue
@@ -36,7 +36,7 @@ defineEmits(['navigate'])
 <style lang="postcss" scoped>
 .mobile-nav-link {
   position: relative;
-  @apply text-4xl leading-normal font-sans;
+  @apply text-3xl leading-normal font-sans;
 }
 
 .transition-content-enter-active,

diff --git a/components/ResponsiveTable.vue b/components/ResponsiveTable.vue
@@ -46,7 +46,7 @@ thead tr {
   @apply bg-brand-teal-dark/70 text-white;
 }
 thead tr th {
-  @apply py-3.5 px-6 text-xl text-left;
+  @apply py-3.5 px-6 text-lg text-left;
 }
 thead tr th:first-child {
   @apply hidden sm:block;
@@ -55,7 +55,7 @@ tbody {
   @apply border-b border-brand-teal-dark;
 }
 tbody td {
-  @apply lg:py-4 py-3 px-6 text-xl;
+  @apply lg:py-4 py-3 px-6 text-lg;
 }
 tbody td:first-child {
   @apply font-bold;

diff --git a/components/RibbonAnnotations.vue b/components/RibbonAnnotations.vue
@@ -6,7 +6,7 @@ defineProps<Props>()
 </script>
 
 <template>
-  <ul class="annotations absolute left-1/2 top-1/2 z-1 hidden text-xl lg:block -translate-x-1/2 -translate-y-1/2">
+  <ul class="annotations absolute left-1/2 top-1/2 z-1 hidden text-sm lg:block -translate-x-1/2 -translate-y-1/2">
     <li v-for="(annotation, index) in annotations" :key="index" :class="`annotation annotation${index + 1}`">
       {{ annotation }}
       <img :src="`/images/ribbon-annotation-${index + 1}.svg`" class="absolute">
@@ -69,12 +69,12 @@ defineProps<Props>()
 
 .annotation3 img {
   top: 30px;
-  left: 185px;
+  left: 125px;
 }
 
 .annotation4 img {
   top: 30px;
-  left: -65px;
+  left: -95px;
 }
 
 .annotation5 img {
@@ -84,16 +84,16 @@ defineProps<Props>()
 
 .annotation6 img {
   bottom: 30px;
-  left: -90px;
+  left: -130px;
 }
 
 .annotation7 img {
-  bottom: 60px;
+  bottom: 35px;
   left: 0px;
 }
 
 .annotation8 img {
   bottom: 30px;
-  left: -85px;
+  left: -105px;
 }
 </style>
diff --git a/components/Subhead.vue b/components/Subhead.vue
@@ -9,7 +9,9 @@ defineProps<Props>()
 </script>
 
 <template>
-  <h3 :class="[bold ? 'font-bold' : 'font-normal', small ? 'text-lg' : 'text-2xl', tight ? 'mb-3' : 'mb-10', { 'text-center': center }]">
+  <h3
+    class="max-w-prose" :class="[bold ? 'font-bold' : 'font-normal', small ? 'text-lg' : 'text-xl', tight ? 'mb-4' : 'mb-10', { 'text-center': center }, { 'm-a': center }]"
+  >
     <slot />
   </h3>
 </template>
diff --git a/components/Testimonial.vue b/components/Testimonial.vue
@@ -8,10 +8,10 @@ defineProps<Props>()
 
 <template>
   <ImageSplit :image="image" image-width="260" flip image-rounded full-height>
-    <p class="mb-6 text-xl">
+    <p class="mb-6 sm:text-xl">
       <slot />
     </p>
-    <p class="text-xl font-bold">
+    <p class="font-bold sm:text-xl">
       {{ name }}
     </p>
   </ImageSplit>

diff --git a/components/ZebraCard.vue b/components/ZebraCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 interface Props {
-  buttonLabel?: string
-  buttonLink?: string
+  ctaLabel?: string
+  ctaLink?: string
 }
 defineProps<Props>()
 </script>
@@ -11,9 +11,9 @@ defineProps<Props>()
     <div>
       <slot />
     </div>
-    <div class="flex-none pt-4">
-      <Btn v-if="buttonLabel" :href="buttonLink" full outline>
-        {{ buttonLabel }}
+    <div v-if="ctaLabel" class="flex-none pt-4">
+      <Btn :href="ctaLink" full outline>
+        {{ ctaLabel }}
       </Btn>
     </div>
   </div>