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.

Sign up for GitHub

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

Jump to bottom

Fix: Home - Desktop - Dot spacing #384

Merged
merged 4 commits into from
Jul 31, 2024
Merged

Fix: Home - Desktop - Dot spacing #384

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
16c2e02
fix(home): desktop - reduce top/bottom margin around first dot divider
machikoyasuda Jul 30, 2024
0da2f16
fix(home): first dot divider spacing botton 65px on desktop
machikoyasuda Jul 30, 2024
4ab2caf
fix(home): reduce spacing between dots/contact
machikoyasuda Jul 30, 2024
219d72a
fix(home): mobile dot spacers
machikoyasuda Jul 31, 2024
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
20 changes: 10 additions & 10 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,7 @@
<section class="row">
<div class="col-12 col-lg-5 d-flex align-items-center">
<div class="ms-lg-4">
<h1 class="text-center text-lg-start pt-5 pt-lg-0">
A modern and consistent transportation experience throughout California
</h1>
<h1 class="text-center text-lg-start pt-5">A modern and consistent transportation experience throughout California</h1>
<p class="text-center text-lg-start">
Learn how the California Integrated Travel Project (Cal-ITP) is making riding by bus and train simpler and more
cost-effective—for providers and customers.
Expand All @@ -19,7 +17,7 @@ <h1 class="text-center text-lg-start pt-5 pt-lg-0">
<div class="col-12 offset-lg-1 col-lg-5 d-flex align-items-center justify-content-center">
<picture>
<img
class="hero-header w-100 mx-auto my-lg-5 py-lg-5 py-3 mb-5"
class="hero-header w-100 mx-auto mt-lg-5 pt-lg-4 pb-lg-0 py-3 pb-4"
src="images/hero-header.png"
alt="A trio of images, clockwise from top: a bus, a train platform with a sign that announces “Next train in 3 minutes,” and a transit rider paying their fare by tapping their smartphone’s mobile wallet on a payment reader when boarding"
/>
Expand All @@ -30,14 +28,14 @@ <h1 class="text-center text-lg-start pt-5 pt-lg-0">
<picture class="d-none d-md-block">
<img
id="tracks-0"
class="w-100 mb-md-5 pb-md-3"
class="w-100"
src="images/home-divider-1.png"
alt="Decorative element with dots and dashes, meant to resemble a transit map"
/>
</picture>
<picture class="d-md-none">
<img
id="tracks-0-sm"
id="tracks-0-sm mt-4 pt-2 mb-5"
class="w-100"
src="images/home-divider-1-sm.png"
alt="Decorative element with dots and dashes, meant to resemble a transit map"
Expand All @@ -46,7 +44,9 @@ <h1 class="text-center text-lg-start pt-5 pt-lg-0">

<section id="about" class="row justify-content-center pb-md-3 mb-md-3 pb-4 mb-3">
<div class="col-12 col-md-8 col-lg-6">
<h2 class="text-center text-md-start mt-5 mb-4">Bringing industry standards to California’s transit providers</h2>
<h2 class="text-center text-md-start mt-4 pt-2 mt-lg-5 pt-lg-3 mb-4">
Bringing industry standards to California’s transit providers
</h2>
<p>
There are hundreds of public transit providers in California—with no consistent way to collect fares, verify eligibility for
fare discounts, or provide real-time vehicle information to customers on their phones.
Expand Down Expand Up @@ -109,7 +109,7 @@ <h2 class="text-center text-md-start mb-4">Helping California achieve critical g
</picture>
<picture class="d-md-none">
<img
class="w-100 my-5"
class="w-100 mt-4 pt-2 mb-5"
id="tracks-0-sm"
src="images/home-divider-2-sm.png"
alt="Decorative element with dots and dashes, meant to resemble a transit map"
Expand All @@ -121,14 +121,14 @@ <h2 class="text-center text-md-start mb-4">Helping California achieve critical g
<picture class="d-none d-md-block">
<img
id="tracks-2"
class="w-100 my-5"
class="w-100 mb-3"
src="images/home-divider-3.png"
alt="Another decorative element with dots and dashes, meant to resemble a transit map"
/>
</picture>
<picture class="d-md-none">
<img
class="w-100 my-5"
class="w-100 mt-3 mb-4 pb-2"
id="tracks-2-sm"
src="images/home-divider-3-sm.png"
alt="Another decorative element with dots and dashes, meant to resemble a transit map"
Expand Down