travis-jeans/Nebula-Classless-CSS
1
0
Fork
You've already forked Nebula-Classless-CSS
0
Nebula I and II are simple, minimal classless CSS themes designed to look like Gemtext from the Project Gemini web protocol. They are accessible and have text reflow at high zoom and high contrast text. https://futurehorizondesign.net.au/updates.html#nebula-classless-css
  • HTML 55%
  • CSS 45%
2025年11月05日 15:32:51 +10:00
img Added stars graphic and made minor adjustments to the text. 2025年11月05日 15:30:53 +10:00
index-I.html First commit. 2025年11月05日 15:16:20 +10:00
index-II.html First commit. 2025年11月05日 15:16:20 +10:00
LICENSE.md First commit. 2025年11月05日 15:16:20 +10:00
nebula-I.css First commit. 2025年11月05日 15:16:20 +10:00
nebula-II.css First commit. 2025年11月05日 15:16:20 +10:00
README.md Moved the CSS validation icon to underneath the Overview first line. 2025年11月05日 15:32:51 +10:00

Nebula Classless CSS

light blue diamond-shaped vector stars over a dark blue background

Overview

Nebula I and II are simple, minimal classless CSS themes designed to look like Gemtext from the Project Gemini web protocol.

Valid CSS Confirmed by W3C

Gemtext Applied to CSS

Gemtext only allows the following markup:

  • Heading levels 1-3 (h1, h2, h3)
  • Paragraphs p
  • Lists (ordered ol and unordered ul)
  • Links (a as block-level elements)
  • Preformatted text (pre)
  • Blockquotes (blockquote)

These themes only have styling for the above elements with possibility for extention.

Why make a theme for a different internet protocol?

Nebula I and II are for people who want the look and feel of Gemtext without going through the technical steps to set up documents with the Gemini protocol. This theme is good for those who want minimal, static, text-based websites.

Having these themes in CSS would also allow someone to extent the themes to have a few other elements as well (like extra heading levels) or markup Gemtext (like preformatted text or ASCII art) to be more accessible.

I made reference to the styles I had on the Kristall Small Internet Browser when making these themes.

Accessibility

The text colours meet the WCAG requirements for high contrast text (AAA):

  • Large scale text have a contrast ratio of 4.5:1
  • Text has a contrast ratio of 7:1

Text reflows when zooming up to 400%.

There is automatic light and dark mode switching.

Compared to some other high contrast themes, the colours and contrast are somewhat muted (ratio no higher than 10:1).

Screenshots

Nebula I is a blue theme and Nebula II is a red theme. They're inspired by X-Ray images of nebula clusters.

They use generous line spacing and large headings. The backgrounds are plain colour fills.

Links are not underlined and use the Gemtext double arrow indicator instead. So links pop out from paragraph text, all other text uses a small left indent.

Nebula I

Light mode.

Valid CSS Confirmed by W3C

Dark mode.

Valid CSS Confirmed by W3C

Nebula II

Light mode.

Valid CSS Confirmed by W3C

Dark mode.

Valid CSS Confirmed by W3C

License

This project uses GPLv2 or later, so this project uses the GNU General Public License V3. There's a HTML version too.

Resources

Contact

Any questions, suggestions, or bug issues, feel free to use the Codeberg bug tracker or email me (see Contact - Future Horizon Design).