This is just a simple CSS file, so that you do not have to bother with styling your nice, possibly HTML5-semantic webpage. Save the file and insert <link rel="stylesheet" href="simple.css"> into <head>.
It is responsive, it is lightweight, it is nice.
Do whatever you want with it. It is intended for simple text-based documents though.
If I will ever really use it, I will probably tweak something here and there.
Why should you even use this stylesheet?
- Lines do not get incredibly long on wide monitors
- Automatic dark mode supported
How to think about this stylesheet?
Every "content wrapper element" (<body>, <main>, <div>, …) is a flexbox column with consistant gap.
Because of this, do not forget to use <div> in <details> as wrapper for its content after <summary>, if you want propper spacing in it.
Additional classes
On .center, text-align: center will be used.
Grids with corresponding number of columns can be made by .grid-2, .grid-3, .grid-4 or .grid-responsive (useful for images).