Skip to content

Instantly share code, notes, and snippets.

View nocodesupplyco's full-sized avatar

No-Code Supply Co nocodesupplyco

View GitHub Profile
@nocodesupplyco
nocodesupplyco / scrollsnap.css
Created November 26, 2022 14:43
CSS Scroll Snap
/*Horizontal snap*/
.section {
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
}
.section > .picture {
scroll-snap-align: start;
}
@nocodesupplyco
nocodesupplyco / input-value-to-url.js
Created December 13, 2022 16:12
Redirect Form on Submit and Pass Input Value to URL
$(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
nocodesupplyco / meta-noindex.html
Created December 16, 2022 14:48
Hide Page From Google Search w/ Meta Tag
<meta name="robots" content="noindex, nofollow">
@nocodesupplyco
nocodesupplyco / prefers-reduced-motion.css
Created December 16, 2022 14:57
@media Prefers Reduced Motion
/*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
nocodesupplyco / prefers-dark-light.css
Created December 16, 2022 18:26
@media Prefers Dark/Light Mode
@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
nocodesupplyco / aspect-ratio.css
Created December 16, 2022 18:36
CSS Aspect Ratio
/* 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
nocodesupplyco / clamp.css
Created December 16, 2022 18:39
CSS Clamp
/* Static values */
font-size: clamp(1rem, 2.5vw, 2rem);
width: clamp(20rem, 30vw, 70rem);
/* Calculated values */
width: clamp(100px, calc(30% / 2rem + 10px), 900px);
@nocodesupplyco
nocodesupplyco / airtable-script-webflow-sync.js
Created May 23, 2023 19:05
Airtable Script to Webflow Create/Update Example
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',
@nocodesupplyco
nocodesupplyco / skip-nav.js
Created June 14, 2023 13:55
Skip Nav to Main Function
window.addEventListener("DOMContentLoaded", (event) => {
let skipLinkEle = document.getElementById("skip-link");
if (!skipLinkEle) {
return;
}
skipLinkEle.addEventListener("click keydown", function (e) {
if (e.type === "keydown" && e.which !== 13) {
return;
}
@nocodesupplyco
nocodesupplyco / responsive-script.js
Created July 26, 2023 01:29
Only run some javascript when the browser is 767px or smaller.
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);