Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve baseline alignment for right-side text blocks #643

Merged
merged 1 commit into from
Dec 5, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions app/_includes/contact-section.html
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
12 changes: 6 additions & 6 deletions app/_layouts/project.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions app/about/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions app/events.html
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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 %}
Expand All @@ -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}}
Expand Down
8 changes: 4 additions & 4 deletions app/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions app/our-work.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">

Expand Down Expand Up @@ -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>
Expand Down