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: Fix Desktop rhombus bug on Safari #188

Merged
merged 7 commits into from
Jun 14, 2023
Merged

Fix: Fix Desktop rhombus bug on Safari #188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0280542
fix(safari): this partially fixes rhombus bug, not for links/clicking
machikoyasuda Jun 12, 2023
269fb28
fix(rhombus): use clip-path svg with rounded corners for all pages
machikoyasuda Jun 14, 2023
bcde93a
fix: no longer necessary
machikoyasuda Jun 14, 2023
43a915e
fix: remove box-shadow class
machikoyasuda Jun 14, 2023
bbcc7e0
fix(home): bottom 2 rhombus alignment fix
machikoyasuda Jun 14, 2023
faddfa9
refactor: turn clipped-shadow into class
machikoyasuda Jun 14, 2023
d98fdd7
fix(home): manage height with align-content-stretch; flip shapes
machikoyasuda Jun 14, 2023
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
3 changes: 3 additions & 0 deletions src/_includes/clipped.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<svg class="position-absolute">
<clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"><path d="M0,0.081 C-0.001,0.051,0.007,0.026,0.018,0.026 L0.981,0 C0.992,0,1,0.025,1,0.055 L0.981,0.902 C0.981,0.928,0.973,0.949,0.963,0.95 L0.042,1 C0.033,1,0.025,0.98,0.024,0.953 L0,0.081"></path></clipPath>
</svg>
8 changes: 6 additions & 2 deletions src/_includes/initiatives.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
<svg class="position-absolute">
<clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"><path d="M0,0.048 C0,0.036,0.008,0.025,0.018,0.025 L0.982,0 C0.992,0,1,0.011,1,0.023 L0.979,0.931 C0.979,0.942,0.972,0.952,0.962,0.953 L0.048,1 C0.038,1,0.029,0.991,0.029,0.979 L0,0.048"></path></clipPath>
</svg>

<div class="row d-flex justify-content-between">
<div class="col-12 col-lg-6">
<h2 class="h1 text-center text-lg-start">Explore our initiatives</h2>
Expand Down Expand Up @@ -27,14 +31,14 @@ <h2 class="h1 text-center text-lg-start">Explore our initiatives</h2>
<div class="tab-content " id="pills-tabContent">
{% for initiative in site.data.initiatives %}
<div
class="tab-pane fade rhombus-parent {{ initiative.active }}"
class="tab-pane fade {{ initiative.active }}"
id="pills-{{ initiative.slug }}"
role="tabpanel"
aria-labelledby="pills-{{ initiative.slug }}-tab"
tabindex="0">
<div
id="{{ initiative.id }}"
class="px-5 px-md-3 py-5 my-4 rhombus-1"
class="px-5 px-md-3 py-5 my-4 clipped"
style=" background-color: var({{ initiative.class }})">
<div class="row pt-5">
<picture class="col-12 col-md-2 col-lg-2 offset-md-1 d-flex justify-content-md-end align-self-md-start justify-content-center">
Expand Down
92 changes: 51 additions & 41 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,50 +141,60 @@ <h2 class="text-center text-md-start d-block mb-3">The time is now—reach out t
</div>
</section>

<section class="row justify-content-md-center mt-5 mb-5 pb-5 rhombus-parent">
<div class="background-slate-5 shadow pt-3 pt-md-5 px-3 col-md-4 col-12 text-center rhombus-2">
<picture><img
src="images/connect.png"
alt="Two thought bubbles with dashes of various lengths, meant to represent words in a conversation"
width="105" /></picture>
<h3 class="text-white d-block my-4">Connect with Cal-ITP</h3>
<span class="text-white">Drop us a line at
<a
rel="noreferrer"
target="_blank"
class="fw-bolder text-white"
href="mailto:hello@calitp.org">hello@calitp.org</a>
to:</span>
<ul class="text-center ms-2 ms-md-4 ms-lg-5">
<li class="text-white text-start">request technical assistance</li>
<li class="text-white text-start">get more information</li>
<li class="text-white text-start">offer collaborative support</li>
<li class="text-white text-start">join our email list for updates</li>
</ul>
<svg class="position-absolute">
<clipPath id="my-clip-path-start" clipPathUnits="objectBoundingBox"><path d="M0.004,0.075 C0,0.034,0.029,0,0.066,0.002 L0.947,0.051 C0.979,0.052,1,0.081,1,0.116 V0.936 C1,0.973,0.977,1,0.944,1 H0.147 C0.117,1,0.091,0.977,0.088,0.943 L0.004,0.075"></path></clipPath>
</svg>

<svg class="position-absolute">
<clipPath id="my-clip-path-end" clipPathUnits="objectBoundingBox"><path d="M0.041,0.125 C0.043,0.092,0.066,0.066,0.096,0.063 L0.878,0 C0.91,-0.003,0.939,0.024,0.941,0.06 L1,0.929 C1,0.967,0.977,1,0.942,1 H0.061 C0.027,1,0,0.968,0.002,0.931 L0.041,0.125"></path></clipPath>
</svg>

<section class="row justify-content-md-center mt-5 mb-5 pb-5 align-content-stretch">
<div class="col-12 col-md-4 clipped-shadow">
<div class="background-slate-5 pt-3 pt-md-5 px-3 text-center clipped-end">
<picture><img
src="images/connect.png"
alt="Two thought bubbles with dashes of various lengths, meant to represent words in a conversation"
width="105" /></picture>
<h3 class="text-white d-block my-4">Connect with Cal-ITP</h3>
<span class="text-white">Drop us a line at
<a
rel="noreferrer"
target="_blank"
class="fw-bolder text-white"
href="mailto:hello@calitp.org">hello@calitp.org</a>
to:</span>
<ul class="text-center ms-2 ms-md-4 ms-lg-5">
<li class="text-white text-start">request technical assistance</li>
<li class="text-white text-start">get more information</li>
<li class="text-white text-start">offer collaborative support</li>
<li class="text-white text-start">join our email list for updates</li>
</ul>
</div>
</div>
<div class="col-md-auto">
&nbsp;
</div>
<div class="background-slate-5 shadow pt-3 pt-md-5 px-md-5 px-3 col-md-4 col-12 text-center rhombus-3">
<picture><img
src="images/stay-up-to-date.png"
alt="A bus nearly surrounded by a semicircular arrow, meant to indicate that transit content is being refreshed"
width="86" /></picture>
<h3 class="text-white d-block mt-3 mb-4">Stay up to date</h3>
<p class="text-white text-start ps-lg-3">
See our
<a
class="text-white fw-bolder"
href="https://dot.ca.gov/cal-itp"
rel="noreferrer"
target="_blank">latest milestones</a>, and subscribe to the
<a
class="text-white fw-bolder"
href="https://lp.constantcontactpages.com/su/eLbtFoE/calitp?website"
rel="noreferrer"
target="_blank">Caltrans Mobility Newsletter</a>, a free biweekly resource with frequent Cal-ITP project updates.
</p>
<div class="col-12 col-md-4 clipped-shadow">
<div class="background-slate-5 pt-3 pt-md-5 px-md-5 px-3 pt-2 text-center clipped-start">
<picture><img
src="images/stay-up-to-date.png"
alt="A bus nearly surrounded by a semicircular arrow, meant to indicate that transit content is being refreshed"
width="86" /></picture>
<h3 class="text-white d-block mt-3 mb-4">Stay up to date</h3>
<p class="text-white text-start ps-lg-3">
See our
<a
class="text-white fw-bolder"
href="https://dot.ca.gov/cal-itp"
rel="noreferrer"
target="_blank">latest milestones</a>, and subscribe to the
<a
class="text-white fw-bolder"
href="https://lp.constantcontactpages.com/su/eLbtFoE/calitp?website"
rel="noreferrer"
target="_blank">Caltrans Mobility Newsletter</a>, a free biweekly resource with frequent Cal-ITP project updates.
</p>
</div>
</div>
</section>

{% include rounded.html %}
24 changes: 12 additions & 12 deletions src/press.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,18 @@
permalink: /press
---

<div class="rhombus-parent">
<div class="row justify-content-center">
<div class="background-calitp-blue rhombus-1 mt-5 mb-4 col-10 py-5 px-4 px-md-0">
<div class="offset-md-2 col-md-8 py-5 px-4 px-md-0">
<h1 class="text-white">Press</h1>
<p class="text-white">Below you’ll find news about Cal-ITP and our initiatives, including press releases and media coverage about new launches and project milestones. Interested in getting in touch? Reach out to us at <a
rel="noreferrer"
target="_blank"
class="fw-bolder text-white"
href="mailto:hello@calitp.org">hello@calitp.org</a>.</span></p>
{% include pills.html tags=site.data.press_tags %}
</div>
{% include clipped.html %}

<div class="row justify-content-center">
<div class="clipped background-calitp-blue rhombus-1 mt-5 mb-4 col-10 py-5 px-4 px-md-0">
<div class="offset-md-2 col-md-8 py-5 px-4 px-md-0">
<h1 class="text-white">Press</h1>
<p class="text-white">Below you’ll find news about Cal-ITP and our initiatives, including press releases and media coverage about new launches and project milestones. Interested in getting in touch? Reach out to us at <a
rel="noreferrer"
target="_blank"
class="fw-bolder text-white"
href="mailto:hello@calitp.org">hello@calitp.org</a>.</span></p>
{% include pills.html tags=site.data.press_tags %}
</div>
</div>
</div>
Expand Down
28 changes: 13 additions & 15 deletions src/resources.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,19 @@
permalink: /resources
---

<div class="rhombus-parent">
<div class="row justify-content-center">
<div class="background-purple-4 mt-5 mb-4 col-10 py-5 px-4 px-md-0 rhombus-1">
<div class="offset-md-2 col-md-8 py-5 px-4 px-md-0">
<h1 class="text-white">Resources</h1>
<p class="text-white">Below you’ll find information about Cal-ITP and our initiatives, including fact sheets, case studies, and more. Don’t see what you’re looking for? Reach out to us at
<a
rel="noreferrer"
target="_blank"
class="fw-bolder text-white"
href="mailto:hello@calitp.org">hello@calitp.org</a>.</p>
{% include pills.html tags=site.data.resource_tags %}
</div>
{% include clipped.html %}

<div class="row justify-content-center">
<div class="clipped background-purple-4 mt-5 mb-4 col-10 py-5 px-4 px-md-0 rhombus-1">
<div class="offset-md-2 col-md-8 py-5 px-4 px-md-0">
<h1 class="text-white">Resources</h1>
<p class="text-white">Below you’ll find information about Cal-ITP and our initiatives, including fact sheets, case studies, and more. Don’t see what you’re looking for? Reach out to us at
<a
rel="noreferrer"
target="_blank"
class="fw-bolder text-white"
href="mailto:hello@calitp.org">hello@calitp.org</a>.</p>
{% include pills.html tags=site.data.resource_tags %}
</div>
</div>
</div>
Expand Down Expand Up @@ -66,5 +66,3 @@ <h2 class="mb-4 mt-5">{{ group.name }}</h2>
</section>

<script src="/scripts/pill-behavior.js"></script>

{% include rounded.html %}
53 changes: 30 additions & 23 deletions src/stylesheets/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,19 +162,6 @@ footer nav .links a:hover {
color: var(--calitp-gray-2) !important;
}

/* Shared */

.rhombus-parent {
filter: none;
clip-path: none;
}

.rhombus-1,
.rhombus-2,
.rhombus-3 {
border-radius: 1.25rem;
}

/* Press Release */

.press-release a {
Expand Down Expand Up @@ -281,6 +268,23 @@ footer nav .links a:hover {
border-color: rgba(var(--bs-white-rgb), 0.8);
}

.clipped,
.clipped-start,
.clipped-end {
-webkit-clip-path: none;
clip-path: none;
border-radius: 1.25rem;
}

.clipped-start,
.clipped-end {
min-height: 100%;
}

.clipped-shadow {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15));
}

@media (min-width: 992px) {
.navbar {
--bs-navbar-nav-link-padding-x: 40px;
Expand All @@ -298,22 +302,25 @@ footer nav .links a:hover {
--bs-nav-link-padding-y: 0;
}

.rhombus-parent {
filter: url("#rounded");
overflow: hidden;
z-index: 1;
.clipped,
.clipped-start,
.clipped-end {
border-radius: 0;
}

.rhombus-1 {
clip-path: polygon(0 3%, 100% 0, 96% 98%, 3% 100%);
.clipped {
-webkit-clip-path: url(#my-clip-path);
clip-path: url(#my-clip-path);
}

.rhombus-2 {
clip-path: polygon(8% 10%, 91% 2.5%, 100% 100%, 0 100%);
.clipped-start {
-webkit-clip-path: url(#my-clip-path-start);
clip-path: url(#my-clip-path-start);
}

.rhombus-3 {
clip-path: polygon(0 0, 100% 9%, 100% 100%, 7% 100%);
.clipped-end {
-webkit-clip-path: url(#my-clip-path-end);
clip-path: url(#my-clip-path-end);
}
}

Expand Down