I hereby claim:
- I am ausi on github.
- I am ausi (https://keybase.io/ausi) on keybase.
- I have a public key whose fingerprint is 5F6E EA2D FE2A 5606 A6E7 5974 CB1E 3861 1DB7 EA43
To claim this, I am signing this object:
<!doctype html> | |
<meta charset="utf-8"> | |
<body> | |
<script> | |
(function(){ | |
testElementCount(1, function() { | |
testElementCount(10, function() { | |
testElementCount(100, function() { | |
testElementCount(1000, function() { |
I hereby claim:
To claim this, I am signing this object:
With @create-container <sizes>;
you can define that a specific selector acts as a main container on your page (e.g. sidebar, content, header). As <sizes>
you set the size of this container as it will be in the rendered page, the syntax is the same as for the sizes
attribute for images.
With @container (<query>) {}
you can query against the size of the containers instead of the viewport. These queries will be translated to media queries with the container classes added.
<?php | |
declare(strict_types=1); | |
function numberToString($number, $precision = null) | |
{ | |
if (is_int($number)) { | |
return (string) $number; | |
} | |
/** | |
* SVG cursors experiments | |
*/ | |
html { | |
height: 100vh; | |
cursor: busy; | |
cursor: -webkit-image-set(url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewBox="0 0 100 100">\ | |
<style>@keyframes dance{to { transform: rotate(-10deg);}</style>\ | |
<text y="1em" style="font-size: 90px; animation: dance .5s infinite alternate">🦄</text></svg>') 2x), not-allowed; |
/** | |
* SVG cursors experiments | |
*/ | |
html { | |
height: 100vh; | |
cursor: busy; | |
cursor: -webkit-image-set(url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewBox="0 0 100 100">\ | |
<style>@keyframes dance{to { transform: rotate(-10deg);}</style>\ | |
<text y="1em" style="font-size: 90px; animation: dance .5s infinite alternate">🦄</text></svg>') 2x), not-allowed; |
/** | |
* SVG cursors experiments | |
*/ | |
html { | |
height: 100vh; | |
animation: test 0.01s infinite; | |
--image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewBox="0 0 100 100">\ | |
<style>@keyframes dance{to { transform: rotate(-10deg);}</style>\ | |
<text y="1em" style="font-size: 90px; animation: dance .5s infinite alternate">🦄</text></svg>'); |