This file contains 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
/* Set aspect ratio on an element/class */ | |
.div { | |
aspect-ratio: 16 / 9; | |
} | |
/* Minimum aspect ratio */ | |
@media (min-aspect-ratio: 8/5) { | |
div { | |
background: #9af; /* blue */ | |
} |
This file contains 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
@media (prefers-color-scheme: dark) { | |
--lightness: 90%; | |
--text-1: hsl(200 10% var(--lightness)); | |
} | |
/*Other uses:*/ | |
@media (prefers-contrast: high) {...} | |
@media (prefers-reduce-transparency: reduce) {...} | |
@media (forced-colors: high) {...} | |
@media (light-level: dim) {...} |
This file contains 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
/*example motion*/ | |
animation: wobbley 1s linear infinite; | |
@media (prefers-reduced-motion: reduce) { | |
/*example motion altered for reduced preference*/ | |
animation: cross-fade 3s ease-in-out infinite; | |
} |
This file contains 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
<meta name="robots" content="noindex, nofollow"> |
This file contains 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
$(function() { | |
//run when form submits - ID must be on the <form> element! | |
$("#your-form").submit(function(event) { | |
//store email input value | |
var emailValue = $("#email").val(); | |
//redirect to sign up | |
window.location.replace("example.com/signup?email=" + emailValue); |
This file contains 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
/*Horizontal snap*/ | |
.section { | |
overflow-x: auto; | |
overscroll-behavior-x: contain; | |
scroll-snap-type: x mandatory; | |
} | |
.section > .picture { | |
scroll-snap-align: start; | |
} |
NewerOlder