Skip to content

Commit c2c265a

Browse files
vnphanquangvnphanquang
committed
style: better gradient corner bottom left
1 parent added0c commit c2c265a

3 files changed

Lines changed: 28 additions & 20 deletions

File tree

‎.changeset/brown-guests-deliver.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@vnphanquang/green-check': patch
3+
---
4+
5+
update to better gradient settings

‎index.html‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,34 @@
99
<body>
1010
<p>"google.com" should be green (at the time of this writing):</p>
1111
<green-check hostname="google.com">
12-
<img src="/fallback.svg" width="200" height="95" />
12+
<img
13+
src="https://cdn.jsdelivr.net/gh/vnphanquang/green-check@main/public/fallback.svg"
14+
width="200"
15+
height="95"
16+
alt="fallback blank greencheck badge from The Green Web Foundation"
17+
/>
1318
</green-check>
1419

1520
<p>"github.com" should not be green (at the time of this writing):</p>
1621
<green-check hostname="github.com">
17-
<img src="/fallback.svg" width="200" height="95" />
22+
<img
23+
src="https://cdn.jsdelivr.net/gh/vnphanquang/green-check@main/public/fallback.svg"
24+
width="200"
25+
height="95"
26+
alt="fallback blank greencheck badge from The Green Web Foundation"
27+
/>
1828
</green-check>
1929

2030
<p>If "hostname" attribute is not provide:</p>
2131
<green-check>
22-
<img src="/fallback.svg" width="200" height="95" />
32+
<img
33+
src="https://cdn.jsdelivr.net/gh/vnphanquang/green-check@main/public/fallback.svg"
34+
width="200"
35+
height="95"
36+
alt="fallback blank greencheck badge from The Green Web Foundation"
37+
/>
2338
</green-check>
2439

25-
<style>
26-
html {
27-
background-color: #313131;
28-
}
29-
/* green-check { */
30-
/* --green-check-fg: #FFFFFF; */
31-
/* --green-check-bg: #000000; */
32-
/* --green-check-bg-gradient-start: #313131; */
33-
/* --green-check-bg-gradient-stop: #333333; */
34-
/* } */
35-
</style>
36-
3740
<script type="module">
3841
import { GreenCheck } from './src/index.js';
3942
customElements.define('green-check', GreenCheck);

‎src/template.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
@property --green-check-bg-gradient-stop {
1414
inherits: true;
1515
initial-value: #dffcdd;
16-
syntax: '<color>'t;
16+
syntax: '<color>';
1717
}
1818

1919
@property --green-check-bg {
@@ -68,10 +68,10 @@ a {
6868
letter-spacing: 0;
6969

7070
background-image: linear-gradient(
71-
54deg,
72-
var(--green-check-bg-gradient-start) 2.63%,
73-
var(--green-check-bg-gradient-stop) 22.76%,
74-
var(--green-check-bg) 29.86%
71+
45deg,
72+
var(--green-check-bg-gradient-start) 4%,
73+
var(--green-check-bg-gradient-stop) 24%,
74+
var(--green-check-bg) 32%
7575
);
7676
border: 2px solid currentcolor;
7777
border-radius: 8px;

0 commit comments

Comments
 (0)
⚡