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

Add plain HTML/CSS version with wider browser support #5

Closed
wants to merge 1 commit into from
Closed

Add plain HTML/CSS version with wider browser support #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
93 changes: 92 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,95 @@ If you want to use a specific version, you can update the [unpkg](https://unpkg.
<script src="https://unpkg.com/[email protected]/black-lives.js" type="module"></script>
```

_This should work in all modern browsers. If you need to support legacy browsers, you may need to include some polyfills or run the script through a transpiler, like [Babel](https://babeljs.io/), first._
## Older browsers

The above should work in all modern browsers. If you'd like to support legacy browsers however, consider copying the below plain HTML version instead.

This uses CSS instead of a Shadow DOM, and thus is not isolated from your web page's own styles. This will work fine on most sites in practice, but you may need to make minor adjustments to the CSS if there are significant conflicts.

```html
<!-- <blacklives> -->
<style>
.blacklives-i-stand {
background: #0a0a0a;
box-sizing: border-box;
color: #fafafa;
display: block;
font-family: sans-serif;
font-size: 16px;
line-height: 1.5;
padding: 32px;
width: 100%;
}
.blacklives-i-stand p {
margin: 0;
}
.blacklives-i-stand a {
color: #dbdbdb;
}
.blacklives-i-stand a:focus,
.blacklives-i-stand a:hover {
color: #fafafa;
text-decoration: underline;
}
.blacklives-i-stand .blacklives-names {
font-size: 24px;
margin: 0 0 16px 0;
}
.blacklives-i-stand .blacklives-red {
color: #ff470f;
}
</style>
<div class="blacklives-i-stand">
<p class="blacklives-names">
<strong>I stand in solidarity</strong> with
<a href="https://en.wikipedia.org/wiki/Killing_of_George_Floyd" target="_blank" rel="noreferrer">George Floyd</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Breonna_Taylor" target="_blank" rel="noreferrer">Breonna Taylor</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Ahmaud_Arbery" target="_blank" rel="noreferrer">Ahmaud Arbery</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Tony_McDade" target="_blank" rel="noreferrer">Tony McDade</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Anthony_Hill" target="_blank" rel="noreferrer">Anthony Hill</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Jamarion_Robinson" target="_blank" rel="noreferrer">Jamarion Robinson</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Willie_McCoy" target="_blank" rel="noreferrer">Willie McCoy</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Emantic_Fitzgerald_Bradford_Jr." target="_blank" rel="noreferrer">Emantic Fitzgerald Bradford J</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Jemel_Roberson" target="_blank" rel="noreferrer">Jemel Roberson</a>,
<a href="https://en.wikipedia.org/wiki/Murder_of_Botham_Jean" target="_blank" rel="noreferrer">Botham Shem Jean</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Anthony_Lamar_Smith" target="_blank" rel="noreferrer">Anthony Lamar Smith</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Ramarley_Graham" target="_blank" rel="noreferrer">Ramarley Graham</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Trayvon_Martin" target="_blank" rel="noreferrer">Trayvon Martin</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Larry_Jackson_Jr." target="_blank" rel="noreferrer">Larry Jackson Jr</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Jonathan_Ferrell" target="_blank" rel="noreferrer">Jonathan Ferrell</a>,
<a href="https://en.wikipedia.org/wiki/Death_of_Chavis_Carter" target="_blank" rel="noreferrer">Chavis Carter</a>,
<a href="https://en.wikipedia.org/wiki/Death_of_Chavis_Carter#Similar_deaths" target="_blank" rel="noreferrer">Victor White III</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Dontre_Hamilton" target="_blank" rel="noreferrer">Dontre Hamilton</a>,
<a href="https://en.wikipedia.org/wiki/Death_of_Eric_Garner" target="_blank" rel="noreferrer">Eric Garner</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_John_Crawford_III" target="_blank" rel="noreferrer">John Crawford III</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Michael_Brown" target="_blank" rel="noreferrer">Michael Brown</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Ezell_Ford" target="_blank" rel="noreferrer">Ezell Ford</a>,
<a href="https://en.wikipedia.org/wiki/Ferguson_unrest#Kajieme_Powell" target="_blank" rel="noreferrer">Kajieme Powell</a>,
<a href="https://en.wikipedia.org/wiki/Murder_of_Laquan_McDonald" target="_blank" rel="noreferrer">Laquan McDonald</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Akai_Gurley" target="_blank" rel="noreferrer">Akai Gurley</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Tamir_Rice" target="_blank" rel="noreferrer">Tamir Rice</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Jerame_Reid" target="_blank" rel="noreferrer">Jerame Reid</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Charley_Leundeu_Keunang" target="_blank" rel="noreferrer">Charly Keunang</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Tony_Robinson" target="_blank" rel="noreferrer">Tony Robinson</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Walter_Scott" target="_blank" rel="noreferrer">Walter Scott</a>,
<a href="https://en.wikipedia.org/wiki/Death_of_Freddie_Gray" target="_blank" rel="noreferrer">Freddie Gray</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Samuel_DuBose" target="_blank" rel="noreferrer">Samuel DuBose</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Jamar_Clark" target="_blank" rel="noreferrer">Jamar Clark</a>,
<a href="https://en.wikipedia.org/wiki/Dismissal_of_Robert_Rialmo#Quintonio_LeGrier" target="_blank" rel="noreferrer">Quintonio LeGrier</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Greg_Gunn" target="_blank" rel="noreferrer">Gregory Gunn</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Alton_Sterling" target="_blank" rel="noreferrer">Alton Sterling</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Philando_Castile" target="_blank" rel="noreferrer">Philando Castile</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Terence_Crutcher" target="_blank" rel="noreferrer">Terence Crutcher</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Keith_Lamont_Scott" target="_blank" rel="noreferrer">Keith Lamont Scott</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Alfred_Olango" target="_blank" rel="noreferrer">Alfred Olango</a>,
<a href="https://en.wikipedia.org/wiki/Murder_of_Jordan_Edwards" target="_blank" rel="noreferrer">Jordan Edwards</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Stephon_Clark" target="_blank" rel="noreferrer">Stephon Clark</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Patrick_Harmon" target="_blank" rel="noreferrer">Patrick Harmon</a>,
and countless others who have been victims of <span class="blacklives-red">racism</span> and <span class="blacklives-red">police brutality</span>.
</p>
<p><strong><a href="https://blacklivesmatters.carrd.co/" target="_blank" rel="noreferrer">Go here to find out how <em>you</em> can help.</a></strong></p>
<p><small><a href="https://github.com/trentmwillis/i-stand" target="_blank" rel="noreferrer">Embed this on your site.</a></small></p>
</div>
<!-- </blacklives> -->
```
96 changes: 96 additions & 0 deletions test-compat.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test Page</title>
</head>
<body>

<!-- <blacklives> -->
<style>
.blacklives-i-stand {
background: #0a0a0a;
box-sizing: border-box;
color: #fafafa;
display: block;
font-family: sans-serif;
font-size: 16px;
line-height: 1.5;
padding: 32px;
width: 100%;
}
.blacklives-i-stand p {
margin: 0;
}
.blacklives-i-stand a {
color: #dbdbdb;
}
.blacklives-i-stand a:focus,
.blacklives-i-stand a:hover {
color: #fafafa;
text-decoration: underline;
}
.blacklives-i-stand .blacklives-names {
font-size: 24px;
margin: 0 0 16px 0;
}
.blacklives-i-stand .blacklives-red {
color: #ff470f;
}
</style>
<div class="blacklives-i-stand">
<p class="blacklives-names">
<strong>I stand in solidarity</strong> with
<a href="https://en.wikipedia.org/wiki/Killing_of_George_Floyd" target="_blank" rel="noreferrer">George Floyd</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Breonna_Taylor" target="_blank" rel="noreferrer">Breonna Taylor</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Ahmaud_Arbery" target="_blank" rel="noreferrer">Ahmaud Arbery</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Tony_McDade" target="_blank" rel="noreferrer">Tony McDade</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Anthony_Hill" target="_blank" rel="noreferrer">Anthony Hill</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Jamarion_Robinson" target="_blank" rel="noreferrer">Jamarion Robinson</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Willie_McCoy" target="_blank" rel="noreferrer">Willie McCoy</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Emantic_Fitzgerald_Bradford_Jr." target="_blank" rel="noreferrer">Emantic Fitzgerald Bradford J</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Jemel_Roberson" target="_blank" rel="noreferrer">Jemel Roberson</a>,
<a href="https://en.wikipedia.org/wiki/Murder_of_Botham_Jean" target="_blank" rel="noreferrer">Botham Shem Jean</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Anthony_Lamar_Smith" target="_blank" rel="noreferrer">Anthony Lamar Smith</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Ramarley_Graham" target="_blank" rel="noreferrer">Ramarley Graham</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Trayvon_Martin" target="_blank" rel="noreferrer">Trayvon Martin</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Larry_Jackson_Jr." target="_blank" rel="noreferrer">Larry Jackson Jr</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Jonathan_Ferrell" target="_blank" rel="noreferrer">Jonathan Ferrell</a>,
<a href="https://en.wikipedia.org/wiki/Death_of_Chavis_Carter" target="_blank" rel="noreferrer">Chavis Carter</a>,
<a href="https://en.wikipedia.org/wiki/Death_of_Chavis_Carter#Similar_deaths" target="_blank" rel="noreferrer">Victor White III</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Dontre_Hamilton" target="_blank" rel="noreferrer">Dontre Hamilton</a>,
<a href="https://en.wikipedia.org/wiki/Death_of_Eric_Garner" target="_blank" rel="noreferrer">Eric Garner</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_John_Crawford_III" target="_blank" rel="noreferrer">John Crawford III</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Michael_Brown" target="_blank" rel="noreferrer">Michael Brown</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Ezell_Ford" target="_blank" rel="noreferrer">Ezell Ford</a>,
<a href="https://en.wikipedia.org/wiki/Ferguson_unrest#Kajieme_Powell" target="_blank" rel="noreferrer">Kajieme Powell</a>,
<a href="https://en.wikipedia.org/wiki/Murder_of_Laquan_McDonald" target="_blank" rel="noreferrer">Laquan McDonald</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Akai_Gurley" target="_blank" rel="noreferrer">Akai Gurley</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Tamir_Rice" target="_blank" rel="noreferrer">Tamir Rice</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Jerame_Reid" target="_blank" rel="noreferrer">Jerame Reid</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Charley_Leundeu_Keunang" target="_blank" rel="noreferrer">Charly Keunang</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Tony_Robinson" target="_blank" rel="noreferrer">Tony Robinson</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Walter_Scott" target="_blank" rel="noreferrer">Walter Scott</a>,
<a href="https://en.wikipedia.org/wiki/Death_of_Freddie_Gray" target="_blank" rel="noreferrer">Freddie Gray</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Samuel_DuBose" target="_blank" rel="noreferrer">Samuel DuBose</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Jamar_Clark" target="_blank" rel="noreferrer">Jamar Clark</a>,
<a href="https://en.wikipedia.org/wiki/Dismissal_of_Robert_Rialmo#Quintonio_LeGrier" target="_blank" rel="noreferrer">Quintonio LeGrier</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Greg_Gunn" target="_blank" rel="noreferrer">Gregory Gunn</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Alton_Sterling" target="_blank" rel="noreferrer">Alton Sterling</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Philando_Castile" target="_blank" rel="noreferrer">Philando Castile</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Terence_Crutcher" target="_blank" rel="noreferrer">Terence Crutcher</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Keith_Lamont_Scott" target="_blank" rel="noreferrer">Keith Lamont Scott</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Alfred_Olango" target="_blank" rel="noreferrer">Alfred Olango</a>,
<a href="https://en.wikipedia.org/wiki/Murder_of_Jordan_Edwards" target="_blank" rel="noreferrer">Jordan Edwards</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Stephon_Clark" target="_blank" rel="noreferrer">Stephon Clark</a>,
<a href="https://en.wikipedia.org/wiki/Shooting_of_Patrick_Harmon" target="_blank" rel="noreferrer">Patrick Harmon</a>,
and countless others who have been victims of <span class="blacklives-red">racism</span> and <span class="blacklives-red">police brutality</span>.
</p>
<p><strong><a href="https://blacklivesmatters.carrd.co/" target="_blank" rel="noreferrer">Go here to find out how <em>you</em> can help.</a></strong></p>
<p><small><a href="https://github.com/trentmwillis/i-stand" target="_blank" rel="noreferrer">Embed this on your site.</a></small></p>
</div>
<!-- </blacklives> -->

</body>
</html>