Mansa

this is pure css. specifically, inline css only (which means unfortunately, you cannot make a turing machine in cohost. but you can still do some crazy stuff like this).

and, you can understand it! (if you know some css that is)

so, there's some things going on:

• pagination:
  • ok, the first thing to understand is one-way pagination
  • cohost allows < details > / < summary > tags. they're used for things that you can open and close to see inside. here's the mdn page.
  • when you click anywhere in the summary element, all the stuff in the rest of the details shows up. when you click it again, it hides.
  • if we put an element inside that details body that's position:absolute;top:0;left:0;width:100%;height:100%, clicking on the summary element will cause it to cover up the whole page
  • now, we can make for instance a button that causes something to pop up on a post! pretty cool
  • two way pagination (forwards and back) is black magic. so. uuh. basically, you want to move the summary element after it is clicked. one way to do that is:
    1. ok well first, make the details display:contents.
    2. then, put it inside a display:flex container. because otherwise details doesn't normally allow display:flex for whatever reason.
    3. now, inside the summary you can add an element and give it a size and when it shows, it will move the element.
    4. next: k*ll yourself because it is m*rder trying to add a back button to coposts i wouldn't wish it on my worst enemy.
    5. do some positioning or whatever and you're done! forwards and back button! amazing
• the typewriter effect:
  • so with inline css only, you can't create your own css animations
  • fortunately, cohost comes with three (3) animations for you to use in your coposts
  • there is: "bounce" (it makes stuff bounce. try it on an eggbug. eggbug bounce. bounce.), "slideupleft", and "slideupright"
  • slideupleft and slideupright start with transform:scale(0) (the element is invisible) and transition to transform:scale(1) (the element is fully visible) from the bottom left or bottom right, respectively.
  • setting animation: slideupleft 0.01s steps(1, end) 5s both makes the item appear after 5 seconds
  • specifically:
    • 0.01s is the length of the animation
    • steps(1, end) is the 'timing function'. usually this is 'linear' or 'ease-in-out', it makes the animation smooth. but 'steps(count, end)' makes it go in steps. and with 1 step, it goes from completely hidden to completely visible immediately
      • oh you know what? i bet this is completely unnecessary. if i set the animation length to like 0 or 0.000001 it would probably accomplish the exact same thing. can't believe i didn't think of that.
    • 5s is how long to wait before starting the animation
    • both is the 'fill mode' - it says what to do before the animation starts and after it ends. 'both' means before it starts, it should use the first thing in the animation (transform: scale(0)), and after it ends it should keep the last thing in the animation (transform: scale(1))

how i figured this out:

• so i already know a bunch of css, and that helps with trying to position things in horrible places. mostly from years ago when i was battling with the pain of trying to write css by hand. never do it. it's horrible. also, css was even worse years ago than it is now and it's still horrible now. i use tailwind css now, it's so much nicer. you still need to know how the css flex stuff works and you think you know how it works and it works great for a year and then you go to add something and then suddenly everything in your layout gets squished and stretched and it's a mess. css.
• my first attempt at the visual novel was this one: first attempt.
  • in that one, i originally had the typewriter animation smooth, new words would pop up from their bottom left corner. it was kinda cute but like somewhat distracting and weird. i think i looked up the syntax for the animation: property and while reading documentation for something related, i saw smoothstep and noticed hey, maybe i can use this to make the typewriter thing i want. i originally didn't think there would be any way to make the typewriter effect and just kinda stumbled into it.
  • in that first one, there is no back button. i put my attempt at a back button below. that one uses absolute positioning and a trick i copied from someone else's back button post. but i was unsatisfied with it because like it couldn't scale to any size because absolute positioning was making it so the child element couldn't retroencabulate the bioreactor uuh. the child element couldn't scale properly or something. and i was like "dang. if only i could get around this". and i went outside and was kinda mindlessly thinking about the problem and suddenly realised "oh hey, if i use flex positioning, i can skip the need for absolute and then i won't have that problem" and immediately tried it as soon as i got home.
• from other posts, i knew that details/summary is allowed
• i found the animations by looking at how other posts did animations and then searching through the stylesheets in devtools to find what animations are available

inline css copost host post

it'd be super cool. as long as it's either linear or any branching paths either never converge or rejoin immediately after one click, it could be done.