jekyll-theme-neubrutalism 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: eaa9b0c99a73fe99e8c306cfe112a2aa45653234ac1fdc5ea6f2a4b7cbe7ab2f
+  data.tar.gz: 7e165f96e96f90c46f12250b34fd744dfd327a33dc04114ec5cfc7d0c9b5b90e
+SHA512:
+  metadata.gz: e63f2be92bd16ed35676df5072f1afc85ba87d61dbeaefbe812acb593fb089999951bcb2865f350a53af2e4decb04eaedda1734b47cf35f7029ad676660ba5cd
+  data.tar.gz: 335e9d36ca71db244b3abaa47a36c030555be25d645291c8f135cb36a69b05013ff93519d4aa1e4a33c101d006ebfde451233672d31ae791d707d1e587f0c8fb

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Elycia Finch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,160 @@
+# Neubrutalist Jekyll Theme
+
+A straightforward Jekyll theme that applies neubrutalist design principles in a clean, maintainable way. The goal is to provide a functional, high‑contrast interface with clearly defined structure—useful for documentation, internal notes, and personal sites where clarity is more important than polish.
+
+## What Is Neubrutalism?
+
+Neubrutalism (Neo‑Brutalism) is a design approach that emphasizes visible structure and high‑contrast elements. Instead of minimizing visual components, it highlights them:
+
+- Thick borders (4px+)
+- Hard, offset shadows with no blur
+- Saturated, contrasting colors
+- Strong typography
+- Intentional, “unhidden” UI elements
+
+The result is a UI that is easy to read, easy to navigate, and visually explicit.
+
+## Features
+
+- **Clear, explicit visual design** using bold borders and shadows
+- **Customizable color system** built around simple CSS variables
+- **Responsive layouts** that work across devices
+- **GitHub Pages compatible** with no additional setup
+- **Space Grotesk and Space Mono** for a clean, technical type system
+- **Pure CSS** with no frameworks or unnecessary dependencies
+- **Built‑in layouts** for posts and pages
+- **Rounded corner option** for users who prefer softened edges
+
+## Color Palette (Default)
+
+```css
+--color-primary: #FF006E;
+--color-secondary: #00F5FF;
+--color-accent: #FFBE0B;
+--color-success: #06FFA5;
+--color-border: #000000;
+```
+
+
+## Installation
+
+### Option 1: GitHub Pages (Easiest)
+
+Add to your `_config.yml`:
+
+```yaml
+remote_theme: cryptonym0/jekyll-theme-neubrutalism
+plugins:
+  - jekyll-feed
+  - jekyll-seo-tag
+```
+
+### Option 2: As a Gem
+
+Add to your `Gemfile`:
+
+```ruby
+gem "jekyll-theme-neubrutalism"
+```
+
+And to your `_config.yml`:
+
+```yaml
+theme: jekyll-theme-neubrutalism
+```
+
+Then run: `bundle install`
+
+
+## 📖 Documentation
+
+- **[Installation Guide](INSTALLATION.md)** - Detailed setup instructions
+- **[Publishing Guide](PUBLISHING.md)** - How to distribute this theme
+- **[Changelog](CHANGELOG.md)** - Version history
+- **[Example Site](EXAMPLE_SITE.md)** - Example implementation
+---
+
+## Local Development
+
+```bash
+# Install dependencies
+bundle install
+
+# Start Jekyll server
+bundle exec jekyll serve
+
+# Open http://localhost:4000
+```
+
+## 🎨 Customization
+
+### Change Colors
+
+Edit `assets/css/style.css`:
+
+```css
+:root {
+  --color-primary: #YOUR_COLOR;
+  --color-secondary: #YOUR_COLOR;
+  --color-accent: #YOUR_COLOR;
+}
+```
+
+### Adjust Border Thickness
+
+```css
+:root {
+  --border-width: 6px; /* Make it even BOLDER */
+}
+```
+
+### Modify Shadows
+
+```css
+:root {
+  --shadow: 12px 12px 0 #000000; /* Bigger shadows */
+}
+```
+
+## 📝 Creating Content
+
+### Add a New Post
+
+Create a file in `_posts/`:
+
+```markdown
+---
+layout: post
+title: "Your Bold Title"
+date: 2026-03-02 12:00:00 -0800
+categories: your categories
+---
+
+Your content here...
+```
+
+### Add a New Page
+
+Create a `.markdown` or `.html` file:
+
+```markdown
+---
+layout: page
+title: "Page Title"
+permalink: /your-page/
+---
+
+Your content here...
+```
+
+## 🛠️ Built With
+
+- Jekyll 4.3+
+- Pure CSS (no frameworks)
+- Google Fonts (Space Grotesk & Space Mono)
+
+## 📄 License
+
+Free to use and customize. Make it BOLD!
+
+---

data/_layouts/default.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{ page.title }} | {{ site.title }}</title>
+  <link rel="stylesheet" href="{{ '/assets/css/style.css' | relative_url }}">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
+  {% seo %}
+  {% feed_meta %}
+</head>
+<body>
+  <header class="site-header">
+    <div class="wrapper">
+      <a class="site-title" href="{{ '/' | relative_url }}">{{ site.title }}</a>
+      <nav class="site-nav">
+        <a href="{{ '/' | relative_url }}">HOME</a>
+        <a href="{{ '/docs/' | relative_url }}">DOCS</a>
+        <a href="{{ '/about/' | relative_url }}">ABOUT</a>
+      </nav>
+    </div>
+  </header>
+
+  <main class="page-content">
+    <div class="wrapper {% if page.layout == 'docs' %}docs-wrapper{% endif %}">
+      {{ content }}
+    </div>
+  </main>
+
+  <footer class="site-footer">
+    <div class="wrapper">
+      <div class="footer-content">
+        <p class="footer-text">{{ site.description }}</p>
+        <p class="footer-copy">&copy; {{ 'now' | date: "%Y" }} cryptonym0/jekyll-theme-neubrutalism </p>
+      </div>
+    </div>
+  </footer>
+</body>
+</html>
+

data/_layouts/docs.html

@@ -0,0 +1,164 @@
+---
+layout: default
+---
+
+<div class="docs-container">
+  <!-- Sidebar Navigation -->
+  <aside class="docs-sidebar">
+    <nav class="docs-nav">
+      <div class="docs-nav-header">
+        <h3>{{ page.category | default: "Documentation" }}</h3>
+      </div>
+
+      {% if page.docs_nav %}
+        <ul class="docs-nav-list">
+          {% for item in page.docs_nav %}
+            <li class="docs-nav-item {% if item.url == page.url %}active{% endif %}">
+              <a href="{{ item.url | relative_url }}">{{ item.title }}</a>
+              {% if item.children %}
+                <ul class="docs-nav-sublist">
+                  {% for child in item.children %}
+                    <li class="docs-nav-subitem {% if child.url == page.url %}active{% endif %}">
+                      <a href="{{ child.url | relative_url }}">{{ child.title }}</a>
+                    </li>
+                  {% endfor %}
+                </ul>
+              {% endif %}
+            </li>
+          {% endfor %}
+        </ul>
+      {% else %}
+        <!-- Auto-generate nav from site pages with same category -->
+        <ul class="docs-nav-list">
+          {% assign docs_pages = site.pages | where: "layout", "docs" | where: "category", page.category | sort: "order" %}
+          {% for doc in docs_pages %}
+            <li class="docs-nav-item {% if doc.url == page.url %}active{% endif %}">
+              <a href="{{ doc.url | relative_url }}">{{ doc.title }}</a>
+            </li>
+          {% endfor %}
+        </ul>
+      {% endif %}
+
+      <!-- Table of Contents -->
+      {% if page.toc != false %}
+        <div class="docs-toc">
+          <h4>On This Page</h4>
+          <div id="toc-content">
+            <!-- Will be populated by JavaScript -->
+          </div>
+        </div>
+      {% endif %}
+    </nav>
+  </aside>
+
+  <!-- Main Content -->
+  <main class="docs-content">
+    <article class="docs-article">
+      <!-- Breadcrumbs -->
+      {% if page.breadcrumbs %}
+        <nav class="breadcrumbs">
+          {% for crumb in page.breadcrumbs %}
+            {% if forloop.last %}
+              <span class="breadcrumb-item active">{{ crumb.title }}</span>
+            {% else %}
+              <a href="{{ crumb.url | relative_url }}" class="breadcrumb-item">{{ crumb.title }}</a>
+              <span class="breadcrumb-separator">→</span>
+            {% endif %}
+          {% endfor %}
+        </nav>
+      {% endif %}
+
+      <!-- Header -->
+      <header class="docs-header">
+        <h1 class="docs-title">{{ page.title }}</h1>
+        {% if page.description %}
+          <p class="docs-description">{{ page.description }}</p>
+        {% endif %}
+
+        <!-- Meta Info -->
+        <div class="docs-meta">
+          {% if page.version %}
+            <span class="docs-version">Version: {{ page.version }}</span>
+          {% endif %}
+          {% if page.date %}
+            <span class="docs-date">Updated: {{ page.date | date: "%b %-d, %Y" }}</span>
+          {% endif %}
+        </div>
+      </header>
+
+      <!-- Content -->
+      <div class="docs-body">
+        {{ content }}
+      </div>
+
+      <!-- Footer Navigation -->
+      <footer class="docs-footer">
+        <div class="docs-nav-buttons">
+          {% if page.previous_doc %}
+            <a href="{{ page.previous_doc.url | relative_url }}" class="docs-nav-btn docs-nav-prev">
+              <span class="docs-nav-label">← Previous</span>
+              <span class="docs-nav-title">{{ page.previous_doc.title }}</span>
+            </a>
+          {% endif %}
+
+          {% if page.next_doc %}
+            <a href="{{ page.next_doc.url | relative_url }}" class="docs-nav-btn docs-nav-next">
+              <span class="docs-nav-label">Next →</span>
+              <span class="docs-nav-title">{{ page.next_doc.title }}</span>
+            </a>
+          {% endif %}
+        </div>
+
+        <!-- Edit on GitHub -->
+        {% if site.github_repo and page.path %}
+          <div class="docs-edit">
+            <a href="{{ site.github_repo }}/edit/main/{{ page.path }}" target="_blank" class="docs-edit-link">
+              Edit this page on GitHub
+            </a>
+          </div>
+        {% endif %}
+      </footer>
+    </article>
+  </main>
+</div>
+
+<!-- Table of Contents Generator Script -->
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  const content = document.querySelector('.docs-body');
+  const tocContent = document.getElementById('toc-content');
+
+  if (!content || !tocContent) return;
+
+  const headings = content.querySelectorAll('h2, h3');
+  if (headings.length === 0) {
+    document.querySelector('.docs-toc').style.display = 'none';
+    return;
+  }
+
+  const tocList = document.createElement('ul');
+  tocList.className = 'toc-list';
+
+  headings.forEach((heading, index) => {
+    const id = heading.id || `heading-${index}`;
+    heading.id = id;
+
+    const li = document.createElement('li');
+    li.className = heading.tagName === 'H2' ? 'toc-item' : 'toc-subitem';
+
+    const a = document.createElement('a');
+    a.href = `#${id}`;
+    a.textContent = heading.textContent;
+    a.onclick = function(e) {
+      e.preventDefault();
+      heading.scrollIntoView({ behavior: 'smooth' });
+      window.history.pushState(null, null, `#${id}`);
+    };
+
+    li.appendChild(a);
+    tocList.appendChild(li);
+  });
+
+  tocContent.appendChild(tocList);
+});
+</script>

data/_layouts/home.html

@@ -0,0 +1,33 @@
+---
+layout: default
+---
+
+<div class="home">
+  <div class="hero-section">
+    <h1 class="hero-title"> NEUBRUTALISM <br> THEME </h1>
+    <p class="hero-subtitle">Blog landing page example for those who reject the importance of UX</p>
+  </div>
+
+  {{ content }}
+
+  {% if site.posts.size > 0 %}
+    <section class="post-list-section">
+      <h2 class="section-title">LATEST POSTS</h2>
+      <ul class="post-list">
+        {% for post in site.posts %}
+          <li class="post-item">
+            <span class="post-date">{{ post.date | date: "%b %-d, %Y" }}</span>
+            <h3>
+              <a class="post-link" href="{{ post.url | relative_url }}">
+                {{ post.title | escape }}
+              </a>
+            </h3>
+            {% if post.excerpt %}
+              <p class="post-excerpt">{{ post.excerpt | strip_html | truncatewords: 30 }}</p>
+            {% endif %}
+          </li>
+        {% endfor %}
+      </ul>
+    </section>
+  {% endif %}
+</div>

data/_layouts/page.html

@@ -0,0 +1,12 @@
+---
+layout: default
+---
+<article class="page">
+  <header class="page-header">
+    <h1 class="page-title">{{ page.title }}</h1>
+  </header>
+
+  <div class="page-content-inner">
+    {{ content }}
+  </div>
+</article>

data/_layouts/post.html

@@ -0,0 +1,15 @@
+---
+layout: default
+---
+<article class="post">
+  <header class="post-header">
+    <h1 class="post-title">{{ page.title }}</h1>
+    <p class="post-meta">
+      <time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date: "%B %-d, %Y" }}</time>
+    </p>
+  </header>
+
+  <div class="post-content">
+    {{ content }}
+  </div>
+</article>