nocodesupplyco

/* 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 */
  }

nocodesupplyco

@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) {...}

nocodesupplyco

/*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;
}

nocodesupplyco

<meta name="robots" content="noindex, nofollow">

nocodesupplyco

$(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);

nocodesupplyco

/*Horizontal snap*/
.section {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
}

.section > .picture {
	scroll-snap-align: start;
}