Skip to content

Instantly share code, notes, and snippets.

View argyleink's full-sized avatar
💀
calc(dev*design)

Adam Argyle argyleink

💀
calc(dev*design)
View GitHub Profile
[{"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
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. [^1] Expose an env() variable that allows you to get the scrollbar-size. This is a fixed value, independent of whether a scrollbar is shown or not – it just gives you back the size
  2. [^2] A way to query which type of scrollbars are being used on the page.
  3. 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
argyleink / caption-color-hint.css
Created March 2, 2021 06:24
CSS gradient <color-hint> or <transition-hint> example
figcaption {
background: linear-gradient(to top,
hsla(0 0% 0% / 90%),
75%, /* <color-hint> */
hsla(0 0% 0% / 0)
);
}
@argyleink
argyleink / conic.example.css
Last active January 14, 2022 04:14
demo conic
div {
background: conic-gradient(at top right, deeppink, rebeccapurple);
}
/* 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)
@argyleink
argyleink / is.css
Last active December 9, 2022 20:15
light intro to the :is() selector syntax and value
/* before :is() */
button.focus,
button:focus {
...
}
/* after :is() */
button:is(.focus, :focus) {
...
}
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;
}
@argyleink
argyleink / css&js.css
Created December 26, 2018 23:02
css and js doing similar tasks
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%)',
}))
@argyleink
argyleink / immutables.js
Last active September 12, 2022 12:01
immutable array examples
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)]
@argyleink
argyleink / custom.element.js
Last active September 12, 2022 12:00
custom element with shadow dom
export default class CustomElement extends HTMLElement {
constructor() {
super()
this.$shadow = this.attachShadow()
this.$shadow.innerHTML = this.render()
}
connectedCallback() {}
disconnectedCallback() {}