Skip to content

Instantly share code, notes, and snippets.

View LeoSeyers's full-sized avatar
🏠
Working from home

Leo Seyers LeoSeyers

🏠
Working from home
View GitHub Profile
@LeoSeyers
LeoSeyers / marquee.scss
Last active March 17, 2023 17:37
Marquee Component
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(var(--offset));
}
}
.c-marquee {
@LeoSeyers
LeoSeyers / cover.scss
Last active March 1, 2023 13:14
Vimeo Full Screen Video Background
.c-cover {
--height: 100dvh;
--safe-height: var(--height, var(--vh));
--container-width: 100vw;
--container-height: var(--safe-height);
position: relative;
height: var(--container-height);
overflow: hidden;
width: var(--container-width);
@LeoSeyers
LeoSeyers / DOMAnimations.js
Last active November 9, 2022 09:43
Simple slide animation
export class DOMAnimations {
/**
* Masque un élément avec un effet de repli
* @param {HTMLElement} element
* @param {Number} duration
* @returns {Promise<boolean>}
*/
static slideUp(element, duration = 500) {
return new Promise((resolve) => {
if (window.getComputedStyle(element).display === 'none') resolve()
@LeoSeyers
LeoSeyers / cpt-element.php
Created September 21, 2022 13:40
Create custom post type
<?php
/**
* Register CPT
*
* @return void
*/
function clean($string) {
$string = str_replace(' ', '-', $string); // Replaces all spaces with hyphens.
@LeoSeyers
LeoSeyers / self-reference.scss
Created January 17, 2022 21:29
Nested element with parent self reference
.card {
$t: &;
&:hover {
#{$t}__title {
color: green;
}
}
&__title {
@LeoSeyers
LeoSeyers / responsive.scss
Created November 7, 2021 00:15
SCSS Responsive Mixins
$bps: (
"phone-sm": 20em /* 320px; dinosaurs */,
"phone-md": 23.4em /* 374; Iphone 6 -> X */,
"phone-lg": 25.625em /* 410px; Pixel2 */,
"tab": 37.5em /* 600x; Ipad */,
"tab-lg": 56.25em /* 900px; Ipad Pro:1024px */,
"desktop": 75em /* 1200px */,
"desktop-md": 85.375em /* 1366px; 1366×768 (8.44%) */,
"desktop-lg": 112.5em /* 1800px; 1920×1080 (8.89%) */,
"desktop-xlg": 137.5em /* 2200px, 4K 24"+ */,