Skip to content

Commit

Permalink
a11y: add <main> and skiplink
Browse files Browse the repository at this point in the history
  • Loading branch information
@vladh
vladh committed Sep 4, 2024
1 parent 5bc5561 commit e43a3f3
Show file tree
Hide file tree
Showing 6 changed files with 326 additions and 308 deletions.
8 changes: 8 additions & 0 deletions src/layouts/Layout.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ const { title, navless } = Astro.props;
src="https://plausible.io/js/script.js"></script>
</head>
<body>
<a class="skiplink" href="#main-content">Skip to main content</a>
{ !navless && (
<nav class="container">
<a href="/">
Expand Down Expand Up @@ -228,6 +229,13 @@ const { title, navless } = Astro.props;
text-decoration: underline;
}
}
a.skiplink {
position: absolute;
transform: translateY(-100%);
&:focus {
transform: translateY(0);
}
}
.container {
position: relative;
margin-left: auto;
Expand Down
94 changes: 48 additions & 46 deletions src/pages/about.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,57 +15,59 @@ import Layout from "../layouts/Layout.astro";
<Blob kind="solid-fill-05" top="20%" left="-16rem"></Blob>
<Blob kind="solid-fill-04" top="90%" right="-20rem"></Blob>

<section>
<h1>About the Pledge</h1>
<main id="main-content">
<section>
<h1>About the Pledge</h1>

<p>Open Source Pledge is a group of companies with a shared commitment to
paying the maintainers of the Open Source software we all consume. We aim
to prevent maintainer burnout and reduce flare-ups of high-profile
security incidents such as XZ, Log4Shell, and Heartbleed. We invite all
companies to <a href="/join">join the Pledge</a>.</p>
<p>Open Source Pledge is a group of companies with a shared commitment to
paying the maintainers of the Open Source software we all consume. We aim
to prevent maintainer burnout and reduce flare-ups of high-profile
security incidents such as XZ, Log4Shell, and Heartbleed. We invite all
companies to <a href="/join">join the Pledge</a>.</p>

<h2>Governance and Structure</h2>
<h2>Governance and Structure</h2>

<p>Open Source Pledge is brought to you by <a href="https://sentry.io/welcome/">Sentry</a> and <a href="https://github.com/opensourcepledge/osspledge.com/graphs/contributors">contributors</a>.</p>
<p>Open Source Pledge is brought to you by <a href="https://sentry.io/welcome/">Sentry</a> and <a href="https://github.com/opensourcepledge/osspledge.com/graphs/contributors">contributors</a>.</p>

<p>We have four working groups and a steering group comprised of working group leads.</p>
<p>We have four working groups and a steering group comprised of working group leads.</p>

<table class="table--bordered">
<tr>
<th>Working Group</th>
<th>Lead</th>
</tr>
<tr>
<td>Member Outreach</td>
<td><a href="https://vladh.net">Vlad-Stefan Harbuz</a></td>
</tr>
<tr>
<td>Maintainer Outreach</td>
<td><a href="https://ethanarrowood.com/">Ethan Arrowood</a></td>
</tr>
<tr>
<td>Marketing &amp; Media</td>
<td><a href="https://github.com/selviano">Michael Selvidge</a></td>
</tr>
<tr>
<td>Design &amp; Build</td>
<td><a href="https://chadwhitacre.com/">Chad Whitacre</a></td>
</tr>
<tr>
<td>Steering</td>
<td><a href="https://chadwhitacre.com/">Chad Whitacre</a></td>
</tr>
</table>
</section>
<table class="table--bordered">
<tr>
<th>Working Group</th>
<th>Lead</th>
</tr>
<tr>
<td>Member Outreach</td>
<td><a href="https://vladh.net">Vlad-Stefan Harbuz</a></td>
</tr>
<tr>
<td>Maintainer Outreach</td>
<td><a href="https://ethanarrowood.com/">Ethan Arrowood</a></td>
</tr>
<tr>
<td>Marketing &amp; Media</td>
<td><a href="https://github.com/selviano">Michael Selvidge</a></td>
</tr>
<tr>
<td>Design &amp; Build</td>
<td><a href="https://chadwhitacre.com/">Chad Whitacre</a></td>
</tr>
<tr>
<td>Steering</td>
<td><a href="https://chadwhitacre.com/">Chad Whitacre</a></td>
</tr>
</table>
</section>

<section>
<h2>Want to help?</h2>
<p
>To help us build Open Source Pledge, please
<a href="https://github.com/opensourcepledge/osspledge.com/issues">dive into our issues</a>
or reach out to the working group leads listed here either in issues or
<a href="https://discord.gg/svH5XzDsBd">on Discord</a>.</p
>
</section>
<section>
<h2>Want to help?</h2>
<p
>To help us build Open Source Pledge, please
<a href="https://github.com/opensourcepledge/osspledge.com/issues">dive into our issues</a>
or reach out to the working group leads listed here either in issues or
<a href="https://discord.gg/svH5XzDsBd">on Discord</a>.</p
>
</section>
</main>
</div>
</Layout>
104 changes: 53 additions & 51 deletions src/pages/index.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,69 +25,71 @@ import TextButton from "../components/TextButton.astro";
<Blob kind="grad-dots-01" top="80%" left="-13rem"></Blob>
<Blob kind="solid-fill-04" top="90%" right="-20rem"></Blob>

<section class="pc-hero">
<Blob kind="grad-dots-05" top="65%" right="-3.5rem"></Blob>
<div class="pc-hero-container">
<div class="heading-and-mini-pc">
<h1>Pay your share</h1>
<div class="mini-pc">
<img src="/images/piggybank.webp" alt="A hand puts bills into a computer monitor">
<main id="main-content">
<section class="pc-hero">
<Blob kind="grad-dots-05" top="65%" right="-3.5rem"></Blob>
<div class="pc-hero-container">
<div class="heading-and-mini-pc">
<h1>Pay your share</h1>
<div class="mini-pc">
<img src="/images/piggybank.webp" alt="A hand puts bills into a computer monitor">
</div>
</div>
<p
>Whether you're a CEO, CFO, CTO, or just a dev, chances are your company depends on Open Source software. It's time to pledge back.</p
>
<Button href="/join"
>Join the Pledge</Button
>
</div>
<p
>Whether you're a CEO, CFO, CTO, or just a dev, chances are your company depends on Open Source software. It's time to pledge back.</p
>
<Button href="/join"
>Join the Pledge</Button
>
</div>
</section>

<section>
<h2>TL;DR</h2>
</section>

<div class="highlight-box highlight-box--circled">
<h3><div><span class="circled">1</span></div><span>Pay Open Source maintainers</span></h3>
<p>The minimum to participate is $2,000 per year per developer at your company.</p>
</div>
<section>
<h2>TL;DR</h2>

<div class="highlight-box highlight-box--circled">
<h3><div><span class="circled">2</span></div><span>Self-report annually</span></h3>
<p
>Each year, publish a blog post outlining your payments to maintainers.</p
>
</div>
</section>

<section class="flex-center">
<div>
<div class="text-center">
<h2>Top orgs opening up</h2>
<div class="highlight-box highlight-box--circled">
<h3><div><span class="circled">1</span></div><span>Pay Open Source maintainers</span></h3>
<p>The minimum to participate is $2,000 per year per developer at your company.</p>
</div>

<MiniLeaderboard></MiniLeaderboard>

<div class="text-center">
<TextButton href="/members"
>Go to all members</TextButton
<div class="highlight-box highlight-box--circled">
<h3><div><span class="circled">2</span></div><span>Self-report annually</span></h3>
<p
>Each year, publish a blog post outlining your payments to maintainers.</p
>
</div>
</div>
</section>
</section>

<section class="flex-center">
<div>
<div class="text-center">
<h2>Top orgs opening up</h2>
</div>

<section class="flex-center bottom-cta">
<div>
<div class="text-center">
<h2>Do the right thing, support Open Source</h2>
<MiniLeaderboard></MiniLeaderboard>

<div class="text-center">
<TextButton href="/members"
>Go to all members</TextButton
>
</div>
</div>
</section>

<div class="text-center">
<Button href="/join"
>Join the Pledge</TextButton
>
<section class="flex-center bottom-cta">
<div>
<div class="text-center">
<h2>Do the right thing, support Open Source</h2>
</div>

<div class="text-center">
<Button href="/join"
>Join the Pledge</TextButton
>
</div>
</div>
</div>
</section>
</section>
</main>
</div>
</Layout>

Expand Down
Loading

0 comments on commit e43a3f3

Please sign in to comment.