ReedyBear's Blog

Some styles for expandable/collapsable content

Making these for my bestie, but you can use them too. The styles apply to <details><summary> elements.

Also see: Idea #2

Example HTML:

<details><summary>Heading</summary>  
Extended description that displays after summary is clicked  
</details>  
Heading Extended description that displays after summary is clicked
Probability Math

I've spent some time in the last two months working on Probability Math. So basically, there's this stupid RNG dice game called Dog Witch (its fun, but it is also stupid), and another stupid dice game called Dice-A-Million (also stupid, also fun) and ... I worked on some probability math for Dog Witch, trying to calculate the best choices (after watching some Olexa & him raising questions about it). The latest iteration was in Dice-A-Million where it was a question of: Is it better to have 5 dice that can roll 10, 2, or 3 ... OR is it better to have a D4 that rolls 10, 2, 3, or 4.

And y'all ... probability math is HARD. It's much less intuitive than you might think. Anyway, this was just filler for the example so let me get on with it. I did draft a probability math post a little while ago, but I never finished it because I kept getting lost in the formulation of equations. I know the equations already exist. I don't care. Math is fun because of the discovery, not because of the ability to look up equations.

Lorem Ipsum Lorem Ipsum Dolor blah blah I don't remember the rest

The Styles:

<style>  
details > summary {  
  font-size: 1.4em;  
  font-weight: bold;   
  display: inline;  
  align-self: center;  
  min-width: 50%;  
  text-align: center;  
  cursor: pointer;  
}  
details[open] summary {  
  border-bottom: 2px solid black;  
  margin-bottom: 8px;  
}  
details {  
  list-style-type: none;  

  padding: 8px;  
  display: flex;  
  flex-direction: column;  
  margin-bottom: 16px;  
  border: 1px solid black;  
}  
</style>  

#blog