Skip to content

Instantly share code, notes, and snippets.

💭
🐝 Bzz!

Christopher Robert Van Wiemeersch cvan

💭
🐝 Bzz!
Block or report user

Report or block cvan

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@cvan
cvan / tailwind.config.js
Created Oct 21, 2019
tailwind CSS breakpoints (including iPhone 11 Pro Max)
View tailwind.config.js
// References used:
// - https://yesviz.com/devices.php
// - https://ricostacruz.com/til/css-media-query-breakpoints
// - https://tailwindcss.com/docs/responsive-design/#customizing-breakpoints
screens: {
xs: { max: '575px' }, // Mobile (iPhone 3 - iPhone XS Max).
sm: { min: '576px', max: '897px' }, // Mobile (matches max: iPhone 11 Pro Max landscape @ 896px).
md: { min: '898px', max: '1199px' }, // Tablet (matches max: iPad Pro @ 1112px).
lg: { min: '1200px' }, // Desktop smallest.
xl: { min: '1159px' }, // Desktop wide.
@cvan
cvan / tailwind.config.js
Created Oct 21, 2019
tailwind CSS breakpoints (including iPhone 11 Pro Max)
View tailwind.config.js
// References used:
// - https://yesviz.com/devices.php
// - https://ricostacruz.com/til/css-media-query-breakpoints
// - https://tailwindcss.com/docs/responsive-design/#customizing-breakpoints
screens: {
xs: { max: '575px' }, // Mobile (iPhone 3 - iPhone XS Max).
sm: { min: '576px', max: '897px' }, // Mobile (matches max: iPhone 11 Pro Max landscape @ 896px).
md: { min: '898px', max: '1199px' }, // Tablet (matches max: iPad Pro @ 1112px).
lg: { min: '1200px' }, // Desktop smallest.
xl: { min: '1159px' }, // Desktop wide.
View tailwind-css-grid.css
.grid {
display: grid;
}
.grid-dense {
grid-auto-flow: dense;
}
.grid-gap-0 {
@cvan
cvan / spacing-helpers.scss
Created Oct 9, 2019
tailwindcss-like SASS helpers
View spacing-helpers.scss
$spacings: (
xxl: 110,
xl: 80,
l: 60,
m: 40,
s: 20,
xs: 10,
xx: 8,
);
@cvan
cvan / index.css
Created Oct 9, 2019
CSS debugging tool: a visual `font-size` helper
View index.css
[data-font-size]:after {
background: rgba(255,50,190,.9);
color: #fff;
content: attr(data-font-size);
}
@cvan
cvan / fontface-loading.js
Created Oct 8, 2019
loading fonts with JavaScript using `new FontFace` (to avoid FOUF)
View fontface-loading.js
(async function () {
async function loadFonts () {
if (!('FontFace' in window)) {
return;
}
const fonts = [
new FontFace('theinhardt', 'url(/fonts/akzidenz-grotesk/AkzidenzGrotesk-Light.woff2)'), // 400
new FontFace('theinhardt', 'url(/fonts/akzidenz-grotesk/AkzidenzGrotesk-Regular.woff2)'), // 500
new FontFace('theinhardt', 'url(/fonts/akzidenz-grotesk/AkzidenzGrotesk-Medium.woff2)'), // 600
View debug.css
[data-debug-mode='true'] * {
outline: 1px solid cyan !important;
}
[data-debug-mode='true'] body:before {
background: rgb(0,0,0,.85);
color: #fff;
content: 'standard';
transition: all 1s;
font-weight: 100;
@cvan
cvan / get-root-origin.js
Created Sep 3, 2019
get root domain from URL (JavaScript) for setting `Domain` in `Cookie` header
View get-root-origin.js
const getOrigin = str => str.replace(/.*\/\//, '').replace(/:.+/, '').replace(/\/.+/, '');
const getOriginRoot = (str) => {
const originFull = getOrigin(str);
if (!originFull.includes('.')) {
return str;
}
const originFullChunks = originFull.split('.');
const originRoot = originFullChunks.slice(originFullChunks.length - 2, originFullChunks.length).join('.');
return originRoot;
@cvan
cvan / vimeo-spa-hijack-link-clicks.js
Created May 21, 2019
Vimeo.com script: hijack SPA links to do synchronous page loads (instead of single-page-app URL routing)
View vimeo-spa-hijack-link-clicks.js
You can’t perform that action at this time.