bearblog css "crimes" test
i wanted to test the limits of the site hosting this blog (bearblog.dev), since it seems like a really nice and slim blogging experience. one thing i adored from cohost were the "css crimes"; that site also allowed markdown, and while some properties and attributes were disallowed, people got really creative with their posting. it was really fun! i'd like to have the ability to go freeform like that over here, too. is it really crimes if it's my own blog? i don't think so.
test 1: inline styles
this worked on cohost, right? and that was just markdown! i see no reason why this shouldn't also work here...
(code)
<div style="display: flex; gap: 0.5rem; color: #233243">
<div style="width: 100px; height: 100px; background: #cfc8c0; border-radius: 2px; display: flex; justify-content: center; align-items: center;">1</div>
<div style="width: 100px; height: 100px; background: #cfc8c0; border-radius: 2px; display: flex; justify-content: center; align-items: center;">2</div>
<div style="width: 100px; height: 100px; background: #cfc8c0; border-radius: 2px; display: flex; justify-content: center; align-items: center;">3</div>
</div>
ok great! we have flexbox and sizing and colors and all that. i'm willing to bet that extends to most properties, even ones cohost didn't allow.
test 2: what if we have classes
the only classes i can find are the ones inserted by my theme, so we're going to use those. let's have a test
(code)
<div class="code">this is a div with the class "code"</div>
cool! also works. but it's not very useful to have to define everything in the global blog styles...
test 3: here's a big one
let's try an inline style block! this wouldn't fly on most websites that allow you to post, but again, it's just markdown... right?
(code)
<div class="flex-container">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
</div>
<style>
.flex-container{ display: flex; gap: 0.5rem; color: #233243 }
.square { width: 100px; height: 100px; background: #cfc8c0; border-radius: 2px; display: flex; justify-content: center; align-items: center; }
</style>
exciting times! it looks like it does just inline everything i write here. which brings up an interesting point...
test 4: we are escaping the realm of styles
this isn't styles at all. this is just straight up code injection. i mean, again, it's my blog. it's not like anyone else should have access to posting anything here, right? so, we test:
(code)
<div id="js-target">you shouldn't see this</div>
<script>
var el = document.getElementById("js-target");
el.innerText = "javascript works!";
</script>
oh boy.
i mean, this does at least mean i could do interactables, which is an idea i've been wanting to do. so having a space for that is nice! i probably wouldn't want to be inlining the code like that, but i assume <script src=""> works just as well.
neat! i will use these powers for nefarious purposes.
last flowers (a few extra bits)
it feels kind of silly to be surprised that all of these worked, honestly... it's just markdown! or html! however you want to see it, i guess. i mean, the docs explicitly state that content can be written in HTML,,
either way, it's neat! additionally, this should also mean that embedding things with iframes should be easy! let's test that with my music from bandcamp.
awesome tunes! and it's nice that i can just include that in here. i think i like this site. i hope i remember to use it...