Skip to content

Instantly share code, notes, and snippets.

@ciceronianus
Last active August 27, 2022 16:28
Show Gist options
  • Save ciceronianus/c3f822a6e2127847249dd679a49ae80b to your computer and use it in GitHub Desktop.
Save ciceronianus/c3f822a6e2127847249dd679a49ae80b to your computer and use it in GitHub Desktop.
Roam-tricks by @CatoMinor3 - resizing images, pdf, iframes by triggering tags.
/*
Author: @CatoMinor3
Version: 1.1
Date: June 10th, 2020
PayPal support: https://twitter.com/CatoMinor3/status/1284173182245769216?s=20
How to use it: Write #make:wide etc. in front of an image, pdf or iframe.
*/
/*Installation: https://twitter.com/amirkhan_____/status/1270511701448781824?s=20 */
[data-tag="make:wide"] ~ div {
width: 110% !important;
}
[data-tag="make:wide-x"] ~ div {
width: 120% !important;
}
[data-tag="make:wide-xx"] ~ div {
width: 130% !important;
}
[data-tag="make:wide-xxl"] ~ div {
width: 150% !important;
}
[data-tag="make:wide-on-hover"] ~ div:hover {
transform: scale(1.5);
}
[data-tag*="make:wide"] ~ div div:nth-child(2){
width: 100% !important;
}
[data-tag="make:long"] ~ div {
height: 660px !important;
}
[data-tag="make:long-x"] ~ div {
height: 760px !important;
}
[data-tag="make:long-xx"] ~ div {
height: 860px !important;
}
[data-tag="make:long-xxl"] ~ div {
height: 960px !important;
}
[data-tag*="make:long"] ~ div div:nth-child(2){
height: 100% !important;
}
@JasperGeh
Copy link

I'm revisiting this CSS after I started playing around with embedded Google docs. Making the iframe full-width works great but I can only modify the height by setting a specific pixel size (like you did in make:long). Did anything change in the last two years which enables flexible iframe heights, so I can set it to 100% as well and have it fill the whole page regardless of the monitor size I'm using?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment