Skip to content

Instantly share code, notes, and snippets.

Avatar
🤘
~ whoami

Eduardo Gómez eddiesigner

🤘
~ whoami
View GitHub Profile
View infinitescroll.js
(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{25:function(n,o,e){n.exports=e(26)},26:function(n,o,e){"use strict";e.r(o);var t=e(0),a=e.n(t),d=e(3),i=e.n(d),s=2;a()(window).scroll((function(){if(a()(window).scrollTop()+a()(window).height()===a()(document).height()){var n=ghostHost+"page/"+s;a.a.get(n,(function(n){s<=maxPages&&(a()(".l-content .l-wrapper .l-grid").append(a()(n).find(".m-article-card.post").fadeIn()),s+=1,i()(".lozad",{loaded:function(n){n.classList.add("loaded")}}).observe())}))}}))}},[[25,0,1]]]);
@eddiesigner
eddiesigner / README.md
Last active Apr 18, 2020
Liebling infinite scrolling
View README.md
@eddiesigner
eddiesigner / script.html
Last active Mar 19, 2020
Weiss Pro - Set dark mode as default
View script.html
<script>
const currentSavedTheme = localStorage.getItem('theme')
if (!currentSavedTheme) {
const checkboxes = document.querySelectorAll('.js-toggle-darkmode')
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = true
}
}
@eddiesigner
eddiesigner / weiss-pro-logo-filter.html
Last active Feb 26, 2020
Weiss Pro logo filter for dark mode
View weiss-pro-logo-filter.html
<style>
[data-theme="dark"] .m-logo.in-desktop-topbar img,
[data-theme="dark"] .m-logo.in-mobile-topbar img {
filter: invert();
}
@media (prefers-color-scheme: dark) {
.m-logo.in-desktop-topbar img,
.m-logo.in-mobile-topbar img {
filter: invert();
@eddiesigner
eddiesigner / liebling-light-mode.css
Last active Jul 7, 2020
Liebling Ghost theme - Force light mode
View liebling-light-mode.css
:root,
[data-theme="light"],
[data-theme="dark"],
:root:not([data-theme="light"]) {
--background-color: #fff;
--primary-foreground-color: #4a4a4a;
--secondary-foreground-color: #000;
--primary-subtle-color: #04aeee;
--secondary-subtle-color: #f4f8fd;
--titles-color: #333;
@eddiesigner
eddiesigner / _mixins.scss
Last active Jan 22, 2019
Useful Sass mixins
View _mixins.scss
/* Media queries breakpoints */
$break-small: 35.5rem; // >= 568px @ 16px
$break-medium: 48rem; // >= 768px @ 16px
$break-large: 64rem; // >= 1024px @ 16px
$break-extra-large: 80rem; // >= 1280px @ 16px
$break-largest: 90rem; // >= 1440px @ 16px
/* Media query mixin */
@mixin respond-to( $condition ) {
@if $condition == 'initialize' { @media only screen and (min-width: 1px) { @content; } }
@eddiesigner
eddiesigner / Card.js
Created Sep 1, 2018
Recreating the Airbnb scaling effect on components with React native
View Card.js
import React, { PureComponent } from 'react';
import { Dimensions, Animated, TouchableWithoutFeedback } from 'react-native';
import styled from 'styled-components';
// I use these values because I have two columns of cards with some space and because
// I want to keep a vertical ratio.
// You can change them for some fixed values or anything else, it depends of your needs
const cardWidth = (Dimensions.get('window').width / 2) - 30;
const cardHeight = cardWidth * 1.4
@eddiesigner
eddiesigner / simple-media-queries-override.js
Created May 14, 2017
Simple Media Queries Override Configuration
View simple-media-queries-override.js
...
var processors = [
simple_media_queries({
'mobile': '32em',
'tablet': '45em',
'desktop': '64em',
'extra-large': '80em',
'super-large': '96em'
}),
postcss_nested
@eddiesigner
eddiesigner / simple-media-queries-default.js
Created May 14, 2017
Simple Media Queries Default Configuration
View simple-media-queries-default.js
{
'initialize': '1px',
'small': '35.5em', // >= 568px @ 16px
'medium': '48em', // >= 768px @ 16px
'large': '64em', // >= 1024px @ 16px
'extra-large': '80em' // >= 1280px @ 16px
}
@eddiesigner
eddiesigner / simple-media-queries-destination.css
Created May 14, 2017
Simple Media Queries Destination Example
View simple-media-queries-destination.css
p {
margin: 0;
}
@media only screen and ( min-width: 42em ) {
p {
margin: 25px 0;
}
}
You can’t perform that action at this time.