Merge pull request #25 from elijames-codecov/typography

typography fixes
elijames-codecov · Aug 3, 2024 · 52cf698 · 52cf698
2 parents b8fc863 + aa60be4
commit 52cf698
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 36 deletions.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -165,12 +165,23 @@ const canonicalURL = `https://fair.io/${seoSlug}`;
   }
   h2 {
     font-family: 'Outfit', Arial, Helvetica, sans-serif;
-    font-size: 2.5rem;
     font-style: normal;
     font-weight: 500;
     line-height: 125%; /* 3.125rem */
     letter-spacing: -0.0575rem;
-    margin-bottom: 1rem;
+    margin-bottom: 0.5rem;
+    font-size: 1.75rem;
+    @media (min-width: 640px) {
+      font-size: 2rem;
+    }
+    @media (min-width: 1024px) {
+      font-size: 2.375rem;
+      margin-bottom: 0.75rem;
+    }
+    @media (min-width: 1440px) {
+      font-size: 2.5rem;
+      margin-bottom: 1rem;
+    }
   }
   h3 {
     font-family: 'Outfit', Arial, Helvetica, sans-serif;
@@ -203,21 +214,20 @@ const canonicalURL = `https://fair.io/${seoSlug}`;
   p {
     font-family: 'Plus Jakarta Sans', Arial, Helvetica, sans-serif;
     color: #191919;
-    font-family: "Plus Jakarta Sans";
-    font-size: 1.375rem;
     font-style: normal;
     font-weight: 500;
-    line-height: 145%; /* 1.85625rem */
+    font-size: 1rem;
+    line-height: 145%; 
     letter-spacing: -0.03438rem;
-  }
-  p.small {
-    font-family: "Plus Jakarta Sans";
-    color: #191919;
-    font-size: 1.25rem;
-    font-style: normal;
-    font-weight: 500;
-    line-height: 130%; /* 1.625rem */
-    letter-spacing: -0.03125rem;
+    @media (min-width: 640px) {
+      font-size: 1.125rem;
+    }
+    @media (min-width: 1024px) {
+      font-size: 1.3125rem;
+    }
+    @media (min-width: 1440px) {
+      font-size: 1.375rem;
+    }
   }
   p.hero {
     font-size: 1.75rem;
@@ -229,11 +239,23 @@ const canonicalURL = `https://fair.io/${seoSlug}`;
   .tag {
     display: block;
     font-family: 'Outfit', Arial, Helvetica, sans-serif;
-    font-size: 1.5rem;
     font-style: normal;
     font-weight: 500;
     line-height: 125%;
-    margin-bottom: 1rem;
+    margin-bottom: 0.5rem;
+    font-size: 1.125rem;
+    @media (min-width: 640px) {
+      font-size: 1.1875rem;
+    }
+    @media (min-width: 1024px) {
+      font-size: 1.4375rem;
+      margin-bottom: 0.75rem;
+    }
+    @media (min-width: 1440px) {
+      font-size: 1.5rem;
+      margin-bottom: 1rem;
+    }
+
   }
   main a{
     font-weight: 600;
@@ -281,6 +303,15 @@ const canonicalURL = `https://fair.io/${seoSlug}`;
   .text-balance {
     white-space: balance;
   }
+  .section-body-spacing{
+    margin-bottom: 1.5rem;
+    @media (min-width: 1024px) {
+      margin-bottom: 1.125rem;
+    }
+    @media (min-width: 1440px) {
+      margin-bottom: 1.5rem;
+    }
+  }
   .carousel-wrapper-right::after {
 	  z-index: 1;
 	  content: '';

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -50,7 +50,9 @@ const seoMeta = {
         <div class="py-[3rem] md:py-[3rem] lg:py-[4rem] xl:py-[6rem] 2xl:py-[6.9rem]">
           <span class="text-teal tag">Embrace Fair Source</span>
           <h2>Learn how to adopt Fair Source at your company</h2>
-          <p class="mb-6">Whether you’re a developer looking to contribute or a business aiming to innovate, we the provide steps to successfully implement Fair Source in your projects. Join the community of ethical and innovative software sharing, balancing collaboration with control for everyone involved.</p>
+          <div class="section-body-spacing">
+            <p>Whether you’re a developer looking to contribute or a business aiming to innovate, we the provide steps to successfully implement Fair Source in your projects. Join the community of ethical and innovative software sharing, balancing collaboration with control for everyone involved.</p>
+          </div>
           <Button type="secondary" cta="join fair source" url="/join" color="teal" />
         </div>
       </div>
@@ -64,7 +66,9 @@ const seoMeta = {
         <div class="py-[3rem] md:py-[3rem] lg:py-[4rem] xl:py-[6rem] 2xl:py-[6.9rem]">
           <span class="tag text-orange">Understand Fair Source</span>
           <h2>Find answers to your questions about Fair Source</h2>
-          <p class="mb-6">Looking for detailed information about Fair Source? Discover in-depth answers and insights to help you fully understand its benefits and applications. From licensing details to implementation tips, find everything you need to make the most of Fair Source.</p>
+          <div class="section-body-spacing">
+            <p>Looking for detailed information about Fair Source? Discover in-depth answers and insights to help you fully understand its benefits and applications. From licensing details to implementation tips, find everything you need to make the most of Fair Source.</p>
+          </div>
           <Button type="secondary" cta="learn more" url="/faq" color="orange" />
         </div>
       </div>

diff --git a/src/pages/join.astro b/src/pages/join.astro
@@ -32,12 +32,14 @@ const seoMetaData = {
           Fair source is for companies that want to engage with the developer community
           in a meaningful way.
         </h2>
-        <p>
-          Don’t overplan but don’t underplan. You’re competing with a lot of others for 
-          limited attention, so it’s likely that you won’t see a flood of engagement 
-          at first. As your product gets traction so will your community, and vice 
-          versa.
-        </p>
+        <div class="section-body-spacing">
+          <p>
+            Don’t overplan but don’t underplan. You’re competing with a lot of others for 
+            limited attention, so it’s likely that you won’t see a flood of engagement 
+            at first. As your product gets traction so will your community, and vice 
+            versa.
+          </p>
+        </div>
       </div>
       <div class="w-full xl:w-5/12">
         <div class="list pb-[2.5rem]">
@@ -91,15 +93,17 @@ const seoMetaData = {
       <div class="mt-[4rem] mb-[3rem] w-12/12 z-10 xl:w-8/12 py-[3rem] md:mt-[7rem] xl:my-0 xl:pt-[11rem] xl:pb-[9rem]">
         <span class="tag text-ltOrange">2. Choosing a License</span>
         <h2>Licensing is the heart of Fair Source</h2>
-        <p class="mb-[1rem]">
-          Our recommended approach is the Functional Source Licens 
-          (filler spacee — a robust, clear, non-compete license that offers 
-          two-year OSS conversion. FSL is ideal for companies with a SaaS business 
-          model. If you have more complex requirements, consider using the 
-          [ bdlank filler space, a hacky but works] instead. It is much more 
-          flexible than FSL at the cost of simplicity and clarity.
-        </p>
-        <p>Read more about <a href="/licenses" class="underline">all Fair Source licenses and approaches</a>.</p>
+        <div class="section-body-spacing">
+          <p>
+            Our recommended approach is the Functional Source Licens 
+            (filler spacee — a robust, clear, non-compete license that offers 
+            two-year OSS conversion. FSL is ideal for companies with a SaaS business 
+            model. If you have more complex requirements, consider using the 
+            [ bdlank filler space, a hacky but works] instead. It is much more 
+            flexible than FSL at the cost of simplicity and clarity.
+          </p>
+          <p>Read more about <a href="/licenses" class="underline">all Fair Source licenses and approaches</a>.</p>
+        </div>
       </div>
     </Section>
     <Section
@@ -114,7 +118,9 @@ const seoMetaData = {
           Before you publish your code, make sure you don’t have any secrets in your 
           repository.
         </h2>
-        <p>Tools such <a href="" class="emphasized external">TruffleHog</a> can help with this.</p>
+        <div class="section-body-spacing">
+          <p>Tools such <a href="https://trufflesecurity.com/" class="emphasized external">TruffleHog</a> can help with this.</p>
+        </div>
       </div>
     </Section>
     <Section

diff --git a/src/pages/licenses.astro b/src/pages/licenses.astro
@@ -6,8 +6,6 @@ import { Image } from 'astro:assets';
 import HeroImage from '../assets/licenses/licenses-hero-image.png';
 import FSL from '../assets/licenses/FSL-initials.png';
 import Licenses1 from '../assets/licenses/licenses-1.png';
-import IsTrue from '/images/grid/true.svg?raw';
-import IsFalse from '/images/grid/false.svg?raw';
 
 
 const seoMetaData = {