| title | draft |
|---|---|
Demo Starter |
true |
view(html`
Adam Argyle argyleink
💀
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [{"name":"--blue-0","syntax":"<color>","initialValue":"#e7f5ff","inherits":false},{"name":"--blue-1","syntax":"<color>","initialValue":"#d0ebff","inherits":false},{"name":"--blue-2","syntax":"<color>","initialValue":"#a5d8ff","inherits":false},{"name":"--blue-3","syntax":"<color>","initialValue":"#74c0fc","inherits":false},{"name":"--blue-4","syntax":"<color>","initialValue":"#4dabf7","inherits":false},{"name":"--blue-5","syntax":"<color>","initialValue":"#339af0","inherits":false},{"name":"--blue-6","syntax":"<color>","initialValue":"#228be6","inherits":false},{"name":"--blue-7","syntax":"<color>","initialValue":"#1c7ed6","inherits":false},{"name":"--blue-8","syntax":"<color>","initialValue":"#1971c2","inherits":false},{"name":"--blue-9","syntax":"<color>","initialValue":"#1864ab","inherits":false},{"name":"--blue-10","syntax":"<color>","initialValue":"#145591","inherits":false},{"name":"--blue-11","syntax":"<color>","initialValue":"#114678","inherits":false},{"name":"--blue-12","syntax":"<color>","initialVa |
argyleink
/ css-scrollbars.md
Created
August 1, 2023 15:04
— forked from bramus/css-scrollbars.md
CSS Scrollbars
An issue we’ve heard from authors is that they want to know what scrollbars are doing and respond to that.
There’s a bunch of issues that might go hand in hand to actually solve this:
- [^1] Expose an
env()variable that allows you to get thescrollbar-size. This is a fixed value, independent of whether a scrollbar is shown or not – it just gives you back the size - [^2] A way to query which type of scrollbars are being used on the page.
- A container state query to be able to know if something is overflowing or not
If you combine these three, authors can do things like:
argyleink
/ caption-color-hint.css
Created
March 2, 2021 06:24
CSS gradient <color-hint> or <transition-hint> example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| figcaption { | |
| background: linear-gradient(to top, | |
| hsla(0 0% 0% / 90%), | |
| 75%, /* <color-hint> */ | |
| hsla(0 0% 0% / 0) | |
| ); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| div { | |
| background: conic-gradient(at top right, deeppink, rebeccapurple); | |
| } |
argyleink
/ hsl-lch-lightness.css
Created
February 7, 2020 07:29
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* HSL's 50% lightness */ | |
| /* middle grey */ | |
| hsl(0 0% 50%) | |
| lab(53.39% 0 -0.01) | |
| /* 3.94:1 ❌ */ | |
| /* lime */ | |
| hsl(100 100% 50%) | |
| lab(88.66% -77.99 84.31) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* before :is() */ | |
| button.focus, | |
| button:focus { | |
| ... | |
| } | |
| /* after :is() */ | |
| button:is(.focus, :focus) { | |
| ... | |
| } |
argyleink
/ logical-property-border-example.css
Last active
November 6, 2019 21:22
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| main { | |
| /* writing mode contextual shorthand for border-top and border-bottom respectively */ | |
| border-block: 1px solid hotpink; | |
| /* writing mode contextual shorthand for border-left and border-right respectively */ | |
| border-inline: 1px solid hotpink; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| foo { | |
| color: hsl(100,80%,75%); | |
| background-color: hsl(100,20%,25%); | |
| } | |
| foo.map(styles => ({ | |
| ...styles, | |
| color: 'hsl(100,80%,75%)', | |
| background-color: 'hsl(100,20%,25%)', | |
| })) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const clone = x => [...x] | |
| const push = y => x => [...x, y] | |
| const pop = x => x.slice(0,-1) | |
| const unshift = y => x => [y, ...x] | |
| const shift = x => x.slice(1) | |
| const sort = f => x => [...x].sort(f) | |
| const delete = i => x => [...x.slice(0,i), ...x.slice(i+1)] | |
| const splice = (s,c,...y) => x => [...x.slice(0,s), ...y, ...x.slice(s+c)] | |
| const unique = arr => [...new Set(arr)] |
NewerOlder