Skip to content

πŸ”– Fun functions, surreal when applied to websites you're familiar with

License

Notifications You must be signed in to change notification settings

1j01/bookmarklets

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

5 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Bookmarklets

Oh you know, just some silly bookmarklets...

Silly Flexbox Mayhem

or: "Hexaflexagone.js" - because it makes much of the UI get gone (and it flexes in unexpected ways)

Go here to get the bookmarklet. (I can't make a javascript: link on a GitHub README, that would be a huge security issue!)

It toggles between two different layouts (but not the original layout; for that you'll have to delete the stylesheet (<link id="bookmarklet-custom-css"> or <link id="bookmarklet-custom-css-2"> in <head>))

Unminified and sane-ified:

function applyTo(window){
	var stylesheetID = "bookmarklet-custom-css";
	var link = window.document.getElementById(stylesheetID) || window.document.head.appendChild(window.document.createElement("style"));
	link.id = stylesheetID;

	var css = `
body,
body *:not(style):not(script) {
	display: flex;
	flex: 1;
	transition: flex .2s ease;
}
body *:hover {
	flex: 2;
}
`;
	link.reverse = !link.reverse;
	var reverse = link.reverse;
	var i = 5;
	while (i--) {
		css += `
body${Array(i).join(" > *")} {
	flex-direction: ${((i % 2) ^ reverse) ? "row" : "column"};
}`;
	}
	link.textContent = css;
}
if (frames.length) {
	Array.from(frames).forEach(applyTo);
} else {
	applyTo(window);
}

More to come

I've got more of these that I might add, including some funky CSS filter animation ones and some actually potentially useful ones like for controlling YouTube (or other video) playback. So far I've just created this repo because I was unminifying this bookmarklet, and it seemed like there should be a place for it to go.

Also this bookmarklet could be made way more fun pretty easily by assigning specific flex values etc. in a similar fasion (i.e. maybe going 1 2 3 1 2 3 with i % 3)

About

πŸ”– Fun functions, surreal when applied to websites you're familiar with

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages