View airtable-script-webflow-sync.js
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', |
View clamp.css
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); |
View aspect-ratio.css
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 */ | |
} |
View prefers-dark-light.css
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) {...} |
View prefers-reduced-motion.css
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; | |
} |
View meta-noindex.html
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"> |
View input-value-to-url.js
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); |
View scrollsnap.css
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; | |
} |