CSS for iframe

Hi, thanks for this place. I like the simplicity and the ability to add CSS & HTML.

It would be nice if there was support for a query parameter like ?iframe=true on the status page which then added a div class="iframe" so that I could apply CSS in my About section that only applies if the status page is being shown within an iframe.

For example, right now I embed my status page with an iframe and it shows the about me section above the statuses but I've embedded the frame on my page so I don't need an about me section. If I could add ?iframe=true to the iframe src, then I could do CSS like ".iframe section:first-of-type { display: none; }".

Also, all links should probably be target="_top" in an iframe (e.g. with <base target="_top">). For example, clicking the main "status.cafe" link in the iframe just breaks right now.

Thanks!

Last edited on 2023-08-12 16:11:44

As a workaround, I just moved the 'About Me' column below the statuses:

body {
  display: flex;
  flex-direction: column-reverse;
}
header {
  border-top: 1px solid white;
  margin-top: 10px;
  padding-top: 10px;
}
div.cols {
  display: flex;
  flex-direction: column-reverse;
}
section:first-of-type {
  border-top: 1px solid white;
}

The status.cafe link in the header still doesn't work, I think because of the HTTP response header, Content-Security-Policy: frame-ancestors 'none', so removing that would be needed, plus the following so that all links navigate the browser instead of within the iframe:

<base target="_top">

For now, I've just moved the top links to the bottom and added a button to status.cafe above the iframe :)

Last edited on 2023-08-27 00:36:55