Skip to content

Instantly share code, notes, and snippets.

View ZakClayton's full-sized avatar

Zak Clayton ZakClayton

  • London, UK
View GitHub Profile
@ZakClayton
ZakClayton / css-only-star-rating.html
Last active October 29, 2020 12:10
Star rating using CSS and Unicode characters utilizing background clip
<div class="stars" style="--rating: 3.5;" aria-label="Rating of this product is 3.5 out of 5."></div>
<style>
.stars {
--percent: calc(var(--rating) / 5 * 100%);
display: inline-block;
margin-bottom: 1rem;
text-align: center;
font-size: 40px;
font-family: Times, serif; // make sure ★ appears correctly
@ZakClayton
ZakClayton / gist:ef02c155bf8a8a819483f0b5bfe81b7d
Created February 16, 2018 11:47 — forked from pitch-gist/gist:2999707
HTML: Simple Maintenance Page
<!doctype html>
<title>Site Maintenance</title>
<style>
body { text-align: center; padding: 150px; }
h1 { font-size: 50px; }
body { font: 20px Helvetica, sans-serif; color: #333; }
article { display: block; text-align: left; width: 650px; margin: 0 auto; }
a { color: #dc8100; text-decoration: none; }
a:hover { color: #333; text-decoration: none; }
</style>