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; | |
} |
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
<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
/*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
@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
/* 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
/* Static values */ | |
font-size: clamp(1rem, 2.5vw, 2rem); | |
width: clamp(20rem, 30vw, 70rem); | |
/* Calculated values */ | |
width: clamp(100px, calc(30% / 2rem + 10px), 900px); |
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
const config = input.config ({ | |
title: 'Airtable <> Webflow sync', | |
description: 'An example script that could be used to send or update records from Airtable to Webflow', | |
items: [ | |
input.config.text ('apiKey', { | |
label: 'Webflow API Key', | |
description: 'note: anyone with access to this base can see your API key' | |
}), | |
input.config.text('webflowSiteID',{ | |
label:'Webflow Site ID', |
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 responsiveScript() { | |
// only run script below 767 px screen width | |
if (window.innerWidth <= 767) { | |
// do something awesome on mobile only here | |
} | |
} | |
// run script on page load | |
responsiveScript(); | |
// run script on window resize | |
window.addEventListener("resize", responsiveScript); |
OlderNewer