Skip to content

Instantly share code, notes, and snippets.

Avatar

No-Code Supply Co nocodesupplyco

View GitHub Profile
@nocodesupplyco
nocodesupplyco / clamp.css
Created December 16, 2022 18:39
CSS Clamp
View clamp.css
/* 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 / aspect-ratio.css
Created December 16, 2022 18:36
CSS Aspect Ratio
View aspect-ratio.css
/* 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 / prefers-dark-light.css
Created December 16, 2022 18:26
@media Prefers Dark/Light Mode
View prefers-dark-light.css
@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 / prefers-reduced-motion.css
Created December 16, 2022 14:57
@media Prefers Reduced Motion
View prefers-reduced-motion.css
/*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 / meta-noindex.html
Created December 16, 2022 14:48
Hide Page From Google Search w/ Meta Tag
View meta-noindex.html
<meta name="robots" content="noindex, nofollow">
@nocodesupplyco
nocodesupplyco / input-value-to-url.js
Created December 13, 2022 16:12
Redirect Form on Submit and Pass Input Value to URL
View input-value-to-url.js
$(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 / scrollsnap.css
Created November 26, 2022 14:43
CSS Scroll Snap
View scrollsnap.css
/*Horizontal snap*/
.section {
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
}
.section > .picture {
scroll-snap-align: start;
}