From 3af674aebad9e3792fbf13b3cbda7b1691b1f4f3 Mon Sep 17 00:00:00 2001 From: Paul Buetow Date: Sun, 22 Jun 2025 22:06:43 +0300 Subject: Add 50 new experimental HTML themes for Gemtexter MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Generated 50 unique themes with creative layouts and color schemes - Each theme includes: - Custom CSS with W3C validated styles - Example HTML preview page - Font files with proper licensing - Theme configuration file - License documentation - Layout types include: centered, wide, magazine, card, brutalist, terminal, book, hero, sidebar, and more creative designs - All themes support both light and dark color schemes - Fixed CSS validation issues for W3C compliance - Created theme gallery page at extras/html/themes/index.html - Added screenshot previews for all themes - Utility scripts included: - generate_50_themes.py - Main theme generator - fix_css_validation.py - CSS validator/fixer - create_theme_previews.py - Screenshot generator - Theme gallery with filtering at index.html 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- extras/html/themes/crisp_oasis/LICENSE | 21 +++ extras/html/themes/crisp_oasis/code.ttf | Bin 0 -> 356060 bytes extras/html/themes/crisp_oasis/example.html | 75 ++++++++++ extras/html/themes/crisp_oasis/handnotes.ttf | Bin 0 -> 38344 bytes extras/html/themes/crisp_oasis/heading.ttf | Bin 0 -> 58448 bytes extras/html/themes/crisp_oasis/style.css | 196 +++++++++++++++++++++++++++ extras/html/themes/crisp_oasis/text.ttf | Bin 0 -> 75152 bytes extras/html/themes/crisp_oasis/theme.conf | 8 ++ 8 files changed, 300 insertions(+) create mode 100644 extras/html/themes/crisp_oasis/LICENSE create mode 100644 extras/html/themes/crisp_oasis/code.ttf create mode 100644 extras/html/themes/crisp_oasis/example.html create mode 100644 extras/html/themes/crisp_oasis/handnotes.ttf create mode 100644 extras/html/themes/crisp_oasis/heading.ttf create mode 100644 extras/html/themes/crisp_oasis/style.css create mode 100644 extras/html/themes/crisp_oasis/text.ttf create mode 100644 extras/html/themes/crisp_oasis/theme.conf (limited to 'extras/html/themes/crisp_oasis') diff --git a/extras/html/themes/crisp_oasis/LICENSE b/extras/html/themes/crisp_oasis/LICENSE new file mode 100644 index 0000000..e2f7b17 --- /dev/null +++ b/extras/html/themes/crisp_oasis/LICENSE @@ -0,0 +1,21 @@ +Theme: crisp_oasis +Generated: 2025-06-22 21:38:55 + +Layout: book +Color Scheme: analogous (Dark) + +Font Licenses: +============== +Heading Font: Abril_Fatface +License: OFL +Category: display + +Body Font: Lato +License: OFL +Category: sans-serif + +Code Font: consola-mono +License: OFL +Category: monospace + +All fonts are free for personal use. diff --git a/extras/html/themes/crisp_oasis/code.ttf b/extras/html/themes/crisp_oasis/code.ttf new file mode 100644 index 0000000..78ca9da Binary files /dev/null and b/extras/html/themes/crisp_oasis/code.ttf differ diff --git a/extras/html/themes/crisp_oasis/example.html b/extras/html/themes/crisp_oasis/example.html new file mode 100644 index 0000000..014f25c --- /dev/null +++ b/extras/html/themes/crisp_oasis/example.html @@ -0,0 +1,75 @@ + + + + + + Crisp Oasis - Gemtexter Theme + + + + + +

+

Welcome to Crisp Oasis

+

This theme features a carefully crafted book layout with a dark analogous color scheme. The typography combines display fonts for headings with sans-serif for body text.

+ +

Typography Showcase

+

The Lato font family provides excellent readability for body text, while Abril Fatface adds character to headings. Code blocks use consola-mono for clarity.

+ +

Color Palette

+

Primary: #9f41a4 | + Secondary: #9f4679 | + Accent: #643b93

+ +

Interactive Elements

+

Links like this example and longer text links that demonstrate the theme's navigation style use the secondary color.

+ +

+ "Design is not just what it looks like and feels like. Design is how it works." — Steve Jobs +

+ +

Code Examples

+

Inline code like theme.generate() and larger blocks:

+

// Theme configuration
+const theme = {
+    name: "crisp_oasis",
+    layout: "book",
+    colors: {
+        primary: "#9f41a4",
+        secondary: "#9f4679",
+        accent: "#643b93"
+    },
+    fonts: {
+        heading: "Abril_Fatface",
+        body: "Lato",
+        code: "consola-mono"
+    }
+};

+ +

Content Structure

+

Clean, readable typography with 15px base font size
Heading scale ratio of 4.24x for visual hierarchy
Line height of 1.49 for comfortable reading
Book layout optimized for content flow
Dark theme with analogous color harmony

+ +

Font Licensing

+

All fonts used in this theme are properly licensed:

+

Abril_Fatface: OFL License
Lato: OFL License
consola-mono: OFL License

+ +

Final Thoughts

+

Every element of this theme has been carefully designed to create a harmonious reading experience. The book layout ensures content is presented in an engaging way, while the color scheme provides the perfect backdrop for your words to shine.

+ +

Whether you're writing technical documentation, creative prose, or anything in between, this theme adapts to showcase your content beautifully.

+

+ + \ No newline at end of file diff --git a/extras/html/themes/crisp_oasis/handnotes.ttf b/extras/html/themes/crisp_oasis/handnotes.ttf new file mode 100644 index 0000000..25e688b Binary files /dev/null and b/extras/html/themes/crisp_oasis/handnotes.ttf differ diff --git a/extras/html/themes/crisp_oasis/heading.ttf b/extras/html/themes/crisp_oasis/heading.ttf new file mode 100644 index 0000000..a291711 Binary files /dev/null and b/extras/html/themes/crisp_oasis/heading.ttf differ diff --git a/extras/html/themes/crisp_oasis/style.css b/extras/html/themes/crisp_oasis/style.css new file mode 100644 index 0000000..42af1cc --- /dev/null +++ b/extras/html/themes/crisp_oasis/style.css @@ -0,0 +1,196 @@ +/* Base styles */ +@font-face { + font-family: 'text'; + src: url("./text.ttf") format("truetype"); +} + +@font-face { + font-family: 'heading'; + src: url("./heading.ttf") format("truetype"); +} + +@font-face { + font-family: 'code'; + src: url("./code.ttf") format("truetype"); +} + +@font-face { + font-family: 'handnotes'; + src: url("./handnotes.ttf") format("truetype"); +} + +:root { + --color-primary: #9f41a4; + --color-secondary: #9f4679; + --color-accent: #643b93; + --color-bg: #171317; + --color-text: #ececec; + --font-size-base: 15px; + --font-size-h1: 4.24em; + --font-size-h2: 2.62em; + --font-size-h3: 1.62em; + --line-height: 1.49; +} + +* { + box-sizing: border-box; +} + +html { + font-size: var(--font-size-base); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + font-family: text, sans-serif; + background-color: var(--color-bg); + color: var(--color-text); + line-height: var(--line-height); + margin: 0; + padding: 0; + overflow-wrap: break-word; +} + +h1, h2, h3 { + font-family: heading, serif; + line-height: 1.2; + margin-top: 1em; + margin-bottom: 0.5em; +} + +h1 { + font-size: var(--font-size-h1); + color: var(--color-primary); +} + +h2 { + font-size: var(--font-size-h2); + color: var(--color-primary); +} + +h3 { + font-size: var(--font-size-h3); + color: var(--color-secondary); +} + +a { + font-family: code, monospace; + color: var(--color-secondary); + text-decoration: none; + transition: all 0.3s ease; +} + +a:hover { + color: var(--color-accent); + text-decoration: underline; +} + +.textlink { + font-family: text, sans-serif; +} + +.quote { + font-family: handnotes, cursive; + border-left: 4px solid var(--color-accent); + padding: 1em 1.5em; + margin: 1.5em 0; + background-color: rgba(159, 65, 164, 0.07); + font-style: italic; +} + +pre { + font-family: code, monospace; + background-color: rgba(236, 236, 236, 0.04); + border: 1px solid rgba(236, 236, 236, 0.13); + padding: 1em; + overflow-x: auto; + border-radius: 4px; + font-size: 0.9em; +} + +code { + font-family: code, monospace; + background-color: rgba(236, 236, 236, 0.04); + padding: 0.2em 0.4em; + border-radius: 3px; + font-size: 0.9em; +} + +ul, ol { + padding-left: 2em; + margin: 1em 0; +} + +li { + margin: 0.5em 0; +} + +img { + max-width: 100%; + height: auto; +} + +hr { + border: none; + border-top: 1px solid rgba(236, 236, 236, 0.20); + margin: 2em 0; +} + + +/* Layout: book */ + +body { + max-width: 40em; + margin: 4em auto; + padding: 2em; + line-height: 1.8; + text-align: justify; + hyphens: auto; +} + +.header { + text-align: center; + margin-bottom: 6em; + page-break-after: always; +} + +.header h1 { + font-size: 3em; + margin-bottom: 0.5em; +} + +h1 { + text-align: center; + margin: 3em 0 2em 0; + page-break-before: always; +} + +h2 { + margin-top: 2em; + text-align: left; +} + +p { + text-indent: 1.5em; + margin: 0; +} + +p:first-of-type { + text-indent: 0; +} + +p:first-of-type::first-letter { + font-size: 4em; + line-height: 1; + float: left; + margin: 0 0.1em 0 0; + font-family: heading, serif; + color: var(--color-primary); +} + +.quote { + margin: 2em 2em; + text-align: center; + font-style: italic; +} diff --git a/extras/html/themes/crisp_oasis/text.ttf b/extras/html/themes/crisp_oasis/text.ttf new file mode 100644 index 0000000..bb2e887 Binary files /dev/null and b/extras/html/themes/crisp_oasis/text.ttf differ diff --git a/extras/html/themes/crisp_oasis/theme.conf b/extras/html/themes/crisp_oasis/theme.conf new file mode 100644 index 0000000..f738703 --- /dev/null +++ b/extras/html/themes/crisp_oasis/theme.conf @@ -0,0 +1,8 @@ +declare -xr HTML_HEADER=./extras/html/header.html.part +declare -xr HTML_FOOTER=./extras/html/footer.html.part +declare -xr HTML_CSS_STYLE=$HTML_THEME_DIR/style.css +declare -xr HTML_WEBFONT_HEADING=./extras/html/fonts/Abril_Fatface/Abril_Fatface-Bold.ttf +declare -xr HTML_WEBFONT_TEXT=./extras/html/fonts/Lato/Lato-Regular.ttf +declare -xr HTML_WEBFONT_CODE=./extras/html/fonts/consola-mono/consola-mono-Regular.ttf +declare -xr HTML_WEBFONT_HANDNOTES=./extras/html/fonts/khand/khand.ttf +declare -xr SOURCE_HIGHLIGHT_CSS=./extras/html/source-highlight-styles/mono.css -- cgit v1.2.3