Merge branch 'main' of github.com:elijames-codecov/fair.io into dylan…

…/carousel-fixes

src/layouts/Layout.astro

@@ -277,7 +277,6 @@ const canonicalURL = `https://fair.io/${seoSlug}`;
 
   a.emphasized.branded {
     color: white;
-    font-size: 22px;
     font-weight: 500;
     padding: 0.25rem 1.1875rem 0.4375rem 0.75rem;
     line-height: 1.7875rem;
@@ -296,14 +295,30 @@ const canonicalURL = `https://fair.io/${seoSlug}`;
   }
   a.emphasized.github::before {
     content: url('/images/icons/gitHub-logo.svg');
-    transform: translateY(4px);
+    transform: translateY(7px);
   }
   a.emphasized.twitter {
     background-color: #1E1E1E;
   }
   a.emphasized.twitter:before {
     content: url('/images/icons/twitter-logo.svg');
-    transform: translateY(3px);
+    transform: translateY(5px);
+  }
+
+  @media (min-width: 768px) {
+    a.emphasized.github::before {
+      transform: translateY(6px);
+    }
+  }
+
+  @media (min-width: 1024px) {
+    a.emphasized.twitter::before {
+      transform: translateY(3px);
+    }
+
+    a.emphasized.github::before {
+      transform: translateY(4px);
+    }
   }
   a.emphasized.external::after {
     content: url('/images/icons/external-link-icon.svg');

src/pages/about.astro

@@ -1,7 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import Section from '../components/Section.astro';
-import Button from '../components/Button.astro';
 import GeoLeft from '/images/background-images/geo-left.svg?raw';
 import GeoRight from '/images/background-images/geo-right.svg?raw';
 

src/pages/companies.astro

@@ -4,6 +4,8 @@ import Section from '../components/Section.astro';
 import companies from '../data/companies.json';
 import Button from '../components/Button.astro';
 import CarouselCard from '../components/CarouselCard';
+import GeoLeft from '/images/background-images/geo-left.svg?raw';
+import GeoRight from '/images/background-images/geo-right.svg?raw';
 
 const seoMetaData = {
   description: 'Read the announcements from companies that have adopted Fair Source.',
@@ -14,7 +16,7 @@ const seoMetaData = {
 
 <Layout title="Fair Source Companies" seo={seoMetaData}>
   <header class="relative flex flex-wrap justify-center items-center">
-    <div class="container w-12/12 lg:w-8/12 text-center lg:pt-[12.19rem] z-10">
+    <div class="container w-12/12 pt-[3rem] px-[0.5rem] sm:px-[1rem] md:px-[1.5rem] lg:w-8/12 text-center lg:pt-[12.19rem] z-10">
       <h1>Fair Source Companies</h1>
       <p class="mb-[1.5rem] text-[1.75rem] text-black font-[500] leading-[130%] tracking-[-0.035rem]">
         Read in their own words what companies have to say about adopting Fair Source.
@@ -23,9 +25,15 @@ const seoMetaData = {
         <Button url="/join" type="primary" cta="Join Fair Source"></Button>
       </div>
     </div>
-    <div class="relative min-w-full overflow-visible z-0">
-      <div class="absolute bg-[url('/images/background-images/companiesHero-left.svg')] bg-contain bg-no-repeat bg-left-bottom min-h-[30rem] lg:min-h-[53.5rem] w-7/12 left-0 bottom-[-7rem] md:bottom-[-12rem] lg:bottom-[-27rem] xl:bottom-[-35rem]"></div>
-      <div class="absolute bg-[url('/images/background-images/companiesHero-right.svg')] bg-contain bg-no-repeat bg-right-bottom min-h-[30rem] lg:min-h-[53.5rem] w-5/12 right-0 bottom-[-3rem] md:bottom-[-5rem] lg:bottom-[-13rem] xl:bottom-[-20rem]"></div>
+    <div class="image z-0 w-auto hidden sm:block absolute top-[10rem] left-0 right-0 bottom-[5rem] sm:top-[17rem] md:top-[18rem] md:bottom-[-12rem] md:left-0 md:right-0 lg:top-[20rem] lg:left:-0 lg:right-0 xl:bottom-[-40rem] xl:left-0 xl:right-0 2xl:top-[19rem] 3xl:top-[18rem] 3xl:left-0 3xl:right-0 3xl:bottom-[-8rem]">
+      <div class="flex items-top justify-center w-[100%] relative mx-auto columns-2 md:gap-[4rem] z-0 xl:max-h-[30rem] 2xl:max-h-[40rem] 3xl:max-h-[60rem] overflow-clip">
+        <div class="w-6/12 pt-[2rem]">
+          <Fragment set:html={GeoLeft} />
+        </div>
+        <div class="w-6/12">
+          <Fragment set:html={GeoRight} />
+        </div>
+      </div>
     </div>
   </header>
   <main>
@@ -51,7 +59,7 @@ const seoMetaData = {
           <div class="absolute bg-[url('/images/background-images/companiesWantTo-left.svg')] bg-contain bg-no-repeat bg-left-bottom min-h-[15rem] w-1/3 lg:w-1/2 left-0 bottom-0"></div>
           <div class="absolute bg-[url('/images/background-images/companiesWantTo-right.svg')] hidden md:block bg-no-repeat bg-contain bg-right-bottom h-[20rem] lg:h-full w-1/2 right-0 bottom-0"></div>
         </div>
-        <div class="flex-col w-12/12 md:w-10/12 lg:w-8/12 text-center justify-center lg:py-[12rem] z-10">
+        <div class="flex-col w-12/12 max-w-[25rem] md:w-10/12 lg:w-8/12 lg:max-w-none text-center justify-center lg:py-[12rem] z-10">
           <h2>Want to list your company?</h2>
           <div class="justify-center flex">
             <Button url="/join" type="secondary" color="black" cta="Join Fair Source"></Button>

src/pages/index.astro

@@ -22,11 +22,13 @@ const mobileSectionContentClasses = 'z-10 pt-[1.5rem] pb-[1rem] relative w-12/12
 
 <Layout title="Software Sharing for Modern Companies" seo={seoMeta}>
   <header>
-    <div class="container-spill relative mx-auto flex flex-wrap px-[0.5rem] sm:px-[1rem] md:px-[1.5rem] lg:px-[2rem] xl:px-[1.5rem] 2xl:px-[3.62rem] 3xl:px-[6.62rem] pb-[0.5rem] pb-[1rem]">
-      <div class="relative block lg:absolute lg:right-0 lg:bottom-0 lg:top-0 lg:w-1/2 xl:w-[45%] xl:right-[2rem] 2xl:right-[3.62rem] 3xl:right-0 3xl:w-[40%]">
-        <Image src={heroImage} alt="hero image" densities={[1, 1.5, 2, 3, 4]} class="relative"/>
+    <div class="container-spill relative mx-auto flex flex-wrap items-stretch px-[0.5rem] sm:px-[1rem] md:px-[1.5rem] lg:px-[2rem] xl:px-[1.5rem] 2xl:px-[3.62rem] 3xl:px-[6.62rem] pb-[0.5rem] pb-[1rem] items-stretch">
+      <div class="relative w-12/12 mx-auto flex lg:w-6/12 lg:h-[100%] lg:order-12">
+        <div class="">
+         <Image src={heroImage} alt="hero image" densities={[1, 2, 3, 4]}/>
+        </div>
       </div>
-      <div class="w-12/12 py-[3rem] lg:w-6/12 lg:py-[8rem] xl:pb-[4rem] xl:pt-[3rem] 2xl:pb-[7.5rem] 2xl:pt-[6rem]">
+      <div class="w-12/12 py-[3rem] h-[100%] lg:w-6/12 lg:py-[8rem] xl:pb-[4rem] xl:pt-[3rem] 2xl:pb-[7.5rem] 2xl:pt-[6rem]">
         <h1 class="text-black mb-4">
           Software Sharing for Modern Companies
         </h1>
@@ -45,15 +47,15 @@ const mobileSectionContentClasses = 'z-10 pt-[1.5rem] pb-[1rem] relative w-12/12
         </section>
     }
     <Section
-      sectionStyles={`${mobileSectionCommonClasses} lg:p-0 lg:items-end justify-end`}
-      backgroundStyling={`${mobileSectionBackgroundImageClasses} ${mobileSectionCenteredBackground} bg-[url('/images/background-images/embraceFairSource.svg')] w-[100%] bg-cover bg-no-repeat bg-top w-full bottom-0 top-0 left-0 right-0 min-h-[20rem] z-0 lg:bottom-0 lg:right-0 lg:left-auto lg:w-[45%] lg:bg-contain lg:top-0 lg:bg-left xl:bg-cover`}
+      sectionStyles={`${mobileSectionCommonClasses} lg:p-0 lg:items-stretch justify-end`}
+      backgroundStyling={`${mobileSectionBackgroundImageClasses} ${mobileSectionCenteredBackground} bg-[url('/images/background-images/embraceFairSource.svg')] w-[100%] bg-cover bg-no-repeat bg-top w-full bottom-0 top-0 left-0 right-0 min-h-[20rem] z-0 lg:right-0 lg:left-auto lg:w-[50%] lg:bg-contain lg:top-0 lg:bg-right lg:bottom-[26%] xl:w-[45%] xl:bottom-0 xl:bg-[position:center_right] xl:bg-contain`}
     >
       <div class="w-12/12 relative mr-[-0.5rem] lg:w-6/12 lg:order-12 overflow-clip lg:overflow-visible">
-        <div class="hidden lg:flex relative h-auto lg:mt-[1.5rem] lg:ml-[3rem] lg:w-[52%] lg:bottom-[8.5rem] lg:left-[6rem] xl:w-[62%] xl:left-[9rem] xl:bottom-[6.5rem] 2xl:bottom-[6rem] 2xl:w-[62%]">
+        <div class="hidden lg:block lg:absolute h-auto lg:w-[50%] top-[25%] left-[25%] h-auto bottom-[25%]">
           <Image src={fairSourceImage} alt="Adopt Fair Source" densities={[1, 1.5, 2, 3, 4]} class="relative w-[100%] h-auto" />
         </div>
       </div>
-      <div class={`${mobileSectionContentClasses} lg:h-full lg:w-6/12 lg:py-[3rem] lg:pr-[3rem] lg:pt-[2rem] xl:w-6/12 xl:pt-[7rem] xl:pl-[4rem] xl:pb-[7rem]`}>
+      <div class={`${mobileSectionContentClasses} lg:h-full lg:w-6/12 lg:py-[3rem] lg:pr-[3rem] lg:pt-[2rem] xl:w-6/12 xl:pt-[3rem] xl:pl-[4rem] xl:pb-[3rem]`}>
         <span class="text-teal tag">Embrace Fair Source</span>
         <h2>Learn how to adopt Fair Source at your company</h2>
         <div class="section-body-spacing">
@@ -64,10 +66,10 @@ const mobileSectionContentClasses = 'z-10 pt-[1.5rem] pb-[1rem] relative w-12/12
     </Section>
 
     <Section
-      sectionStyles={`${mobileSectionCommonClasses} lg:p-0`}
-      backgroundStyling=`${mobileSectionBackgroundImageClasses} ${mobileSectionCenteredBackground} bg-[url('/images/background-images/learnfairsource.svg')] w-[100%] bg-cover bg-no-repeat bg-top w-full bottom-0 top-0 left-0 right-0 min-h-[20rem] z-0 lg:top-[1.5rem] lg:bottom-0 lg:left-0 lg:right-auto lg:w-[45%] lg:bg-center lg:bg-contain xl:bg-cover xl:top-0 xl:bg-left`
+      sectionStyles={`${mobileSectionCommonClasses} lg:p-0 lg:items-stretch`}
+      backgroundStyling=`${mobileSectionBackgroundImageClasses} ${mobileSectionCenteredBackground} bg-[url('/images/background-images/learnfairsource.svg')] w-[100%] bg-cover bg-no-repeat bg-top w-full bottom-0 top-0 left-0 right-0 min-h-[20rem] z-0 lg:top-0 lg:bottom-0 lg:left-0 lg:right-auto lg:w-[45%] lg:bg-center lg:bg-cover lg:bg-right lg:top-0 xl:bg-cover xl:top-0 xl:bg-right`
     >
-      <div class="w-12/12 relative mr-[-0.5rem] lg:w-6/12 lg:order-12 overflow-clip lg:overflow-visible">
+      <div class="w-12/12 relative mr-[-0.5rem] lg:w-6/12 lg:h-[100%] lg:order-12 overflow-clip lg:overflow-visible">
       </div>
       <div class=`${mobileSectionContentClasses} w-12/12 lg:w-1/2 lg:order-12 lg:py-[2rem] xl:py-[7rem]`>
         <span class="tag text-orange">Understand Fair Source</span>

src/pages/licenses.astro

@@ -68,7 +68,7 @@ const cardTitleClasses = `font-sans text-[1.375rem] font-[500] color-black leadi
       </div>
       <div class="w-12/12 lg:w-6/12 mb-[1.25rem] lg:pr-[0.72rem]">
         <div class={card}>
-          <a href="https://fcl.dev/" target="_BLANK"><h4 class={cardTitleClasses}><span class="mr-[0.69rem] font-[600]">Fair Core Licence (FCL)</span><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
+          <a href="https://fcl.dev/" target="_BLANK"><h4 class={cardTitleClasses}><span class="mr-[0.69rem] font-[600]">Fair Core License (FCL)</span><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
             <path d="M1 2H13M13 2V14M13 2L1 14" stroke="black" stroke-width="2.3"/></span>
             </svg></h4></a>
           <p>A simple non-compete license with two-year delayed conversion to Open Source. Consider it for monetizing self-hosted software.</p>