Wednesday, November 05, 2025

simple.css

That's the stylesheet colleagues use when they make some internal website. This is what my HiFi remote control over HTTP is lacking... https://simplecss.org/

Although, I may like it better with a few CSS transitions, especially for the navigation header:


header > nav a,
header > nav a:visited {
  margin: 0 0.5rem 1rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--standard-border-radius);
  color: var(--text);
  display: inline-block;
  padding: 0.1rem 1rem;
  text-decoration: none;
  transition-duration: 0.2s; // added
  
}

header > nav a.current,
header > nav a[aria-current="page"],
header > nav a[aria-current="true"] {
  border-color: var(--accent);
  color: var(--accent);
  cursor: pointer;
}

header > nav a:hover { // forked out of block above
  border-color: var(--accent);
  color: var(--accent);
  cursor: pointer;
  transform: scale(1.1); // added
  transition-duration: 0s; // added
}

It acts on <a> tags that sit withing the <nav> in <header> section, making them more ... playful and engaging ? It's been sitting here for a while, but now that I'm toying a bit with codeberg pages, It's time to publish my original (Nov '24) notes as well ^^"

The basis of  simple.css is to create a grid at page level, and to indicate on which cells of the grid each item should fit. Lines are created automatically by titles, paragraphs and things alike, while columns are templated once for all.

The core layout of the document is defined by grid-template-columns: 1fr min(45rem, 90%) 1fr;, which is where the 3 columns come from.

  • column 2 is 720px (45*16) if that fits, 90% of the page width otherwise.
  • columns 1 and 3 are as large as allowed, the fr unit being "how much space is left". Apparently, balancing available space between the two is automatic although you could have used .5fr 45rem 1.5fr to get one margin bigger than the other.

45em is more or less the size you need for a 60-75 characters amount in English (the target of most LaTeX documents). There will be another rule stating grid-column: 2; within body > *, meaning that anything within any tag within <body> goes into column 2. That's why my blogger-to-simple script ends up with some text weirdly on column 3 when it isn't in any tag, but just sitting directly within <body>

Tags:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)