Skip to content

Instantly share code, notes, and snippets.

Avatar
💖
I love you

Lucas Bonomi LukyVj

💖
I love you
View GitHub Profile
View ismini.txt
https://itty.bitty.site/#okta/data:text/html;charset=utf-8;base64,PHN0eWxlPiogew0KICBib3gtc2l6aW5nOiBib3JkZXItYm94Ow0KfQ0KDQpib2R5IHsNCiAgZm9udC1mYW1pbHk6IGFyaWFsLCBzYW5zLXNlcmlmOw0KICBmb250LXNpemU6IDIwcHg7DQogIG1hcmdpbjogMDsNCiAgcGFkZGluZzogMjBweDsNCn0NCg0KLmNvbnRhaW5lciB7DQogIGRpc3BsYXk6IGZsZXg7DQogIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47DQp9DQoNCi50b3Agew0KICBwb3NpdGlvbjogcmVsYXRpdmU7DQogIGRpc3BsYXk6IGZsZXg7DQp9DQoNCi5pbnB1dC1jb250YWluZXIgew0KICBwb3NpdGlvbjogcmVsYXRpdmU7DQogIGZsZXg6IDE7DQp9DQoNCi5zZWFyY2gtYnV0dG9uIHsNCiAgYWxpZ24tc2VsZjogc3RyZXRjaDsNCiAgZGlzcGxheTogZmxleDsNCiAgYWxpZ24taXRlbXM6IGNlbnRlcjsNCiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7DQogIHdpZHRoOiAyLjRlbTsNCiAgZm9udC1zaXplOiAxLjZlbTsNCiAgYmFja2dyb3VuZC1jb2xvcjogbGlnaHRlbigjMDA3NEQ5LCA1JSk7DQogIGNvbG9yOiB3aGl0ZTsNCiAgY3Vyc29yOiBwb2ludGVyOw0KICB0ZXh0LXNoYWRvdzogMCAycHggNnB4IHJnYmEoMCwgMCwgMCwgMC4yKTsNCiAgYm94LXNoYWRvdzogaW5zZXQgMCAtNnB4IDEycHggLThweCByZ2JhKDAsIDAsIDAsIDAuMiksIGluc2V0IDAgNnB4IDEycHggLThweCByZ2JhKDI1NSwgMjU1LCAyNTUsIDAuMik7DQogIA0KICAmOmhvdmVyIH
View vertical-center-line.sass
&:after
content: ''
display: block
position: absolute
width: 100%
height: 100%
top: 0
left: 0
background: linear-gradient(to bottom, transparent calc(50% - 1px), red calc(50% - 1px), red calc(50% + 1px), transparent calc(50% + 1px))
View 3Dview.js
let style = document.createElement('style');
style.innerHTML = '[debug="true"] { outline: 1px solid lime; outline-offset: -1px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 600px; perspective: 600px; } [debug="true"] * { outline: 1px solid lime; outline-offset: -1px; box-shadow: 0 0 100px rgba(0, 0, 0, 0.4); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } [debug="true"] *:before, [debug="true"] *:after { outline: 1px solid red; outline-offset: -1px; box-shadow: 0 0 100px rgba(0, 0, 0, 0.4); left: 40px; } [debug="true"] section, [debug="true"] div.hero { -webkit-transform: rotateY(16deg) scale(0.8) translateX(15%) skewY(-6deg); transform: rotateY(16deg) scale(0.8) translateX(15%) skewY(-6deg); } @media (min-width: 1600px) { [debug="true"] section, [debug="true"] div.hero { -webkit-transform: rotateY(16deg) scale(0.6) translateX(15%) skewY(-6deg); transform: rotateY(16deg) scale(0.6) translateX(15%) skewY(-6deg); } } [debug="true"] section p { left: 80
View diagonal-mixin.sass
@mixin diagonal($rotation, $background, $height, $pos: after)
&:#{$pos}
content: ''
display: block
position: absolute
width: 100%
height: $height
background: #{$background}
transform: skewY($rotation)
View 3Dview.css
[debug="true"] {
outline: 1px solid lime;
outline-offset: -1px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 600px;
perspective: 600px;
}
[debug="true"] * {
outline: 1px solid lime;
@LukyVj
LukyVj / outOfViewport.js
Last active Nov 15, 2017
Detect which elements overlap your document width.
View outOfViewport.js
function outOfViewport(colorWrapper, colorTag, colorClass) {
var w = document.body.offsetWidth,
it = document.querySelectorAll('*');
for ( i in it) {
if( it[i].offsetWidth > w ) {
console.log(
`%c [` +
`%c` + it[i].tagName +
`%c.`+ it[i].classList +
`%c]`+
View Strips.scss
// Background mixin
@mixin strips($color, $angle){
$color: saturate(lighten($color, 2%), 10%);
background: $color
linear-gradient($angle, $color 0%, $color 10%,
mix(black, $color, 5%) 10%, mix(black, $color, 5%) 20%,
mix(black, $color, 12%) 19%, mix(black, $color, 10%) 21%, // Thin line between gradient
mix(black, $color, 10%) 20%, mix(black, $color, 10%) 30%,
mix(black, $color, 17%) 29%, mix(black, $color, 15%) 31%, // Thin line between gradient
mix(black, $color, 15%) 30%, mix(black, $color, 15%) 40%,
@LukyVj
LukyVj / load.html
Created Jan 18, 2016
Get page load time
View load.html
<div id="test"><s><span id="time"></span></s> to display <s><span id="num"></span></s> elements</div>
@LukyVj
LukyVj / SassMeister-input.scss
Last active Oct 9, 2017
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
// SASSVG
//
// API :
// svg(<shape>, <size>, <color>, <unit>, <repeat>, <path:false>);
@mixin svg($shape, $size, $color, $unit, $repeat, $path: false) {
@LukyVj
LukyVj / SassMeister-input.scss
Last active Oct 20, 2015
Generated by SassMeister.com.
View SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
$last: 10;
@for $i from 1 through $last + 1 {
@for $j from 1 through $i + 1 {
@for $k from 1 to $i {
@for $l from 1 to $j {
You can’t perform that action at this time.