Merge pull request #643 from rebeccacremona/align-baseline

Improve baseline alignment for right-side text blocks

app/_includes/contact-section.html

@@ -1,7 +1,7 @@
 <section class="container">
-  <div class="flex flex-col md:grid md:grid-cols-3 gap-6 md:gap-40">
+  <div class="flex flex-col md:grid md:grid-cols-3 gap-6 md:gap-40 items-baseline">
     <h2 class="h2">{{ include.heading }}</h2>
-    <div class="md:col-span-2 body-text flex flex-col pt-24 flex flex-col md:grid md:grid-cols-2 gap-32">
+    <div class="md:col-span-2 body-text flex flex-col flex flex-col md:grid md:grid-cols-2 gap-32">
       <div class="flex flex-col gap-28">
         <div class="label-value">
           <h3 class="label">Email</h3>

app/_layouts/project.html

@@ -15,9 +15,9 @@ <h2 class="page-hero__subtitle">{{page.what_does_it_do}}</h2>
 <div class="flex flex-col gap-48 md:gap-60 items-start">
 
   <section class="container flex flex-col gap-36 md:gap-72">
-    <div class="flex flex-col xl:grid xl:grid-cols-3 xl:gap-48">
+    <div class="flex flex-col xl:grid xl:grid-cols-3 xl:gap-48 items-baseline">
       <h2 class="h2">Where can I find {{page.title}}?</h2>
-      <div class="md:col-span-2 body-text flex flex-col gap-12 pt-20 xl:max-w-[700px]">
+      <div class="md:col-span-2 body-text flex flex-col gap-12 xl:max-w-[700px]">
         {% if page.project_website %}
           {% include arrow-link.html label=page.project_website href=page.project_website target="_blank" %}
         {% endif %}
@@ -27,9 +27,9 @@ <h2 class="h2">Where can I find {{page.title}}?</h2>
       </div>
     </div>
     {% if page.why_does_it_exist %}
-      <div class="flex flex-col xl:grid xl:grid-cols-3 xl:gap-48">
+      <div class="flex flex-col xl:grid xl:grid-cols-3 xl:gap-48 items-baseline">
         <h2 class="h2">Why does {{page.title}} exist?</h2>
-        <div class="md:col-span-2 body-text flex flex-col gap-20 pt-20 xl:max-w-[700px]">
+        <div class="md:col-span-2 body-text flex flex-col gap-20 xl:max-w-[700px]">
           {{ page.why_does_it_exist | markdownify }}
         </div>
       </div>
@@ -65,10 +65,10 @@ <h2 class="h2">News</h2>
 
   {% if page.who_contributed %}
     <section class="container">
-      <div class="flex flex-col lg:grid lg:grid-cols-3 gap-24 lg:gap-36">
+      <div class="flex flex-col lg:grid lg:grid-cols-3 gap-24 lg:gap-36 items-baseline">
         <h2 class="h2">Project Contributors</h2>
 
-        <div class="slice-body additional-contributors lg:col-span-2 lg:pt-20 body-text lg:max-w-[750px]">
+        <div class="slice-body additional-contributors lg:col-span-2 body-text lg:max-w-[750px]">
           {% for name in page.who_contributed %}
             {% assign person = site.data.people[name] %}
             <strong class="name">{{ person.name }}</strong>

app/about/index.html

@@ -15,9 +15,9 @@ <h1 class="page-hero__title">{{ page.title }}</h1>
 <div class="flex flex-col items-start gap-36 md:gap-72">
 
   <section class="container md:mb-12">
-    <div class="flex flex-col md:grid md:grid-cols-3 gap-24 md:gap-40">
+    <div class="flex flex-col md:grid md:grid-cols-3 gap-24 md:gap-40 items-baseline">
       <h2 class="h2">Who We Are</h2>
-      <div class="md:col-span-2 body-text flex flex-col gap-24 md:pt-20 max-w-[700px]">
+      <div class="md:col-span-2 body-text flex flex-col gap-24 max-w-[700px]">
         <p>We are a team of librarians, technologists, lawyers, designers, and more, and we work out of the Harvard Law School Library.</p>
         <p>We believe that libraries play a fundamental role in humanity as open, privacy-respecting, and sustainable information spaces. We also believe technology holds great power to break down barriers to information creation, preservation, and use.</p>
       </div>

app/events.html

@@ -36,9 +36,9 @@ <h1 class="page-hero__title">{{ page.title }}</h1>
       <section class="container">
         <div class="flex flex-col items-start gap-12">
           <div class="label">Next Event</div>
-          <div class="flex flex-col md:grid md:grid-cols-3 md:gap-36 pb-36 md:pb-48">
+          <div class="flex flex-col md:grid md:grid-cols-3 md:gap-36 pb-36 md:pb-48 items-baseline">
             <h1 class="h2">{{ next_event.title }} - {{ next_event.date_informal }}</h1>
-            <div class="md:col-span-2 body-text md:max-w-[700px] pt-20 flex flex-col items-start gap-20">
+            <div class="md:col-span-2 body-text md:max-w-[700px] flex flex-col items-start gap-20">
               {{ next_event.excerpt }}
               {% capture linkLabel %}
                 <span class="sr-only">{{ next_event.title }},</span> More Info
@@ -54,7 +54,7 @@ <h1 class="h2">{{ next_event.title }} - {{ next_event.date_informal }}</h1>
   {% if upcoming_events.size > 0 %}
     <section class="container mb-36 md:mb-60">
       <h2 class="h2">Upcoming</h2>
-      <div class="flex flex-col items-start w-full">
+      <div class="flex flex-col w-full">
 
         {% for event in upcoming_events %}
           {% capture linkLabel %}
@@ -73,7 +73,7 @@ <h2 class="h2">Upcoming</h2>
   {% if past_events.size > 0 %}
     <section class="container">
       <h2 class="h2">Past</h2>
-      <div class="flex flex-col items-start w-full">
+      <div class="flex flex-col w-full">
         {% for event in past_events %}
           {% capture linkLabel %}
             <strong>{{event.title}}</strong> - {{event.short_description}}

app/index.html

@@ -31,9 +31,9 @@ <h2 class="text-14 md:text-18 tracking-8 uppercase font-medium">Follow our lates
 </div>
 
 <div class="container flex flex-col gap-50 md:gap-100">
-  <div class="flex flex-col md:grid md:grid-cols-3 gap-28 md:gap-40 mt-36 sm:mt-48">
+  <div class="flex flex-col md:grid md:grid-cols-3 gap-28 md:gap-40 mt-36 sm:mt-48 items-baseline">
     <h2 class="h2">Who We Are</h2>
-    <div class="md:col-span-2 body-text flex flex-col gap-28 md:gap-50 md:pt-20 z-10">
+    <div class="md:col-span-2 body-text flex flex-col gap-28 md:gap-50 z-10">
       <div class="flex flex-col gap-20">
         <p>Our team combines librarians, technologists, lawyers, and more to build tools and conduct research that empowers access to our shared knowledge and cultural heritage.</p>
       </div>
@@ -68,9 +68,9 @@ <h2 class="h2">Who We Are</h2>
   </div>
 
   <div class="container flex flex-col gap-50 md:gap-100">
-    <div class="flex flex-col md:grid md:grid-cols-3 gap-28 md:gap-50 pb-50 md:pb-72 border-b-1 border-black">
+    <div class="flex flex-col md:grid md:grid-cols-3 gap-28 md:gap-50 pb-50 md:pb-72 border-b-1 border-black items-baseline">
       <h2 class="h2">Our Work</h2>
-      <div class="md:col-span-2 body-text flex flex-col gap-28 md:gap-50 md:pt-20">
+      <div class="md:col-span-2 body-text flex flex-col gap-28 md:gap-50">
         <div class="flex flex-col gap-20">
           <p>Platforms like Perma.cc translate the traditional roles of libraries into the digital age. Explorations like WARC-GPT empower practitioners to learn and leverage new technologies in the context of their field.</p>
         </div>

app/our-work.html

@@ -24,7 +24,7 @@ <h2 class="h2">Research</h2>
       {% assign subcategories = active_research | map: 'subcategory' | join: ',' | split: ',' | uniq | sort %}
 
       {% for category in subcategories %}
-        <div class="flex flex-col md:grid md:grid-cols-3 gap-24 md:gap-48 w-full {% if forloop.last == false %} border-b-1 border-black pb-48 md:pb-60{% endif %}">
+        <div class="flex flex-col md:grid md:grid-cols-3 gap-24 md:gap-48 w-full {% if forloop.last == false %} border-b-1 border-black pb-48 md:pb-60{% endif %} items-baseline">
           <h3 class="label {% unless forloop.first %} mt-12 md:mt-0 {% endunless %}">{{ category }}</h3>
           <div class="grid grid-cols-2 gap-36 md:col-span-2">
 
@@ -57,9 +57,9 @@ <h3 class="label {% unless forloop.first %} mt-12 md:mt-0 {% endunless %}">{{ ca
   </section>
 
   <section class="container pb-36">
-    <div class="flex flex-col md:grid md:grid-cols-3 gap-28 md:gap-40">
+    <div class="flex flex-col md:grid md:grid-cols-3 gap-28 md:gap-40 items-baseline">
       <h2 class="h2">Platforms</h2>
-      <div class="md:col-span-2 body-text flex flex-col gap-50 md:pt-18">
+      <div class="md:col-span-2 body-text flex flex-col gap-50">
         <p class="flex flex-col gap-20 max-w-[700px]">
           Tools are the heart of the Library Innovation Lab. We build things. Our platforms each have their own user base and long-term goals.
         </p>