status-wall-theme 1.2.0 → 1.2.2

data/_includes/theme-styles.html

@@ -0,0 +1,67 @@
+<style>
+
+    /* ============ Card Backgrounds ============ */
+    .profile-header,
+    .status-card,
+    .featured-image-card,
+    .pinned-post-card {
+        background: var(--card-bg) !important;
+        color: var(--text-color) !important;
+        border-radius: 8px !important;
+        box-shadow: var(--shadow) !important;
+    }
+
+    .featured-image-card { margin-bottom: 20px !important; }
+    .featured-image-card img { width: 100% !important; height: auto !important; display: block !important; }
+    .featured-image-card .featured-caption {
+        background: var(--card-bg) !important;
+        color: var(--meta-color) !important;
+        padding: 12px !important;
+        text-align: center !important;
+    }
+
+    .pinned-post-card { padding: 15px !important; margin-bottom: 20px !important; }
+    .pinned-post-card .pinned-label {
+        color: var(--accent-color) !important;
+        font-size: 0.7rem !important;
+        text-transform: uppercase !important;
+        letter-spacing: 1px !important;
+        font-weight: 600 !important;
+        margin-bottom: 8px !important;
+    }
+    .pinned-post-card .pinned-title { font-size: 1rem !important; margin: 0 0 8px 0 !important; line-height: 1.4 !important; }
+    .pinned-post-card .pinned-title a { color: var(--text-color) !important; text-decoration: none !important; }
+    .pinned-post-card .pinned-title a:hover { color: var(--accent-color) !important; }
+    .pinned-post-card .pinned-excerpt { color: var(--meta-color) !important; font-size: 0.85rem !important; line-height: 1.5 !important; }
+
+    /* ============ Borders & Dividers ============ */
+    .status-meta { border-bottom-color: var(--border-color) !important; }
+    .status-actions { border-top-color: var(--border-color) !important; }
+    .share-btn { border-color: var(--border-color) !important; color: var(--meta-color) !important; }
+    .share-btn:hover { background-color: var(--bg-color) !important; color: var(--accent-color) !important; }
+
+    /* ============ Footer ============ */
+    footer { color: var(--meta-color) !important; text-align: center !important; font-size: 0.8rem !important; margin-top: 40px !important; }
+
+    /* ============ Pretty Tables ============ */
+    .status-content table { width: 100% !important; border-collapse: collapse !important; margin: 20px 0 !important; background: var(--card-bg) !important; border-radius: 8px !important; overflow: hidden !important; box-shadow: var(--shadow) !important; }
+    .status-content table th { background: var(--accent-color) !important; color: #fff !important; font-weight: 600 !important; padding: 12px 15px !important; text-align: left !important; }
+    .status-content table td { padding: 12px 15px !important; border-bottom: 1px solid var(--border-color) !important; color: var(--text-color) !important; }
+    .status-content table tr:last-child td { border-bottom: none !important; }
+    .status-content table tr:hover { background: var(--bg-color) !important; }
+
+    /* ============ Pretty Code Blocks ============ */
+    .status-content pre { background: #1e1e1e !important; border-radius: 8px !important; padding: 15px !important; overflow-x: auto !important; margin: 20px 0 !important; box-shadow: var(--shadow) !important; }
+    .status-content code { font-family: 'Consolas', 'Monaco', monospace !important; font-size: 0.9rem !important; line-height: 1.5 !important; }
+    .status-content p code, .status-content li code { background: var(--bg-color) !important; color: var(--accent-color) !important; padding: 2px 6px !important; border-radius: 4px !important; font-size: 0.9em !important; }
+
+    /* ============ Blockquotes ============ */
+    .status-content blockquote { border-left: 4px solid var(--accent-color) !important; background: var(--bg-color) !important; padding: 15px 20px !important; margin: 20px 0 !important; border-radius: 0 8px 8px 0 !important; color: var(--meta-color) !important; font-style: italic !important; }
+    .status-content blockquote p { margin: 0 !important; }
+
+    /* ============ Horizontal Rule ============ */
+    .status-content hr { border: none !important; height: 2px !important; background: linear-gradient(to right, transparent, var(--accent-color), transparent) !important; margin: 30px 0 !important; }
+
+    /* ============ Images ============ */
+    .status-content img { max-width: 100% !important; height: auto !important; border-radius: 8px !important; display: block !important; margin: 15px 0 !important; }
+</style>

data/_includes/theme-switcher.html

@@ -0,0 +1,37 @@
+{% if site.theme_settings.theme_switcher != false %}
+
+<div class="theme-switcher-box">
+    <label for="theme-select"><i class="fas fa-palette"></i> Theme</label>
+    <select id="theme-select" onchange="switchTheme(this.value)">
+        <option value="dark" {% if site.theme_settings.default_theme == 'dark' %}selected{% endif %}>Dark</option>
+        <option value="gamer" {% if site.theme_settings.default_theme == 'gamer' %}selected{% endif %}>Gamer</option>
+        <option value="minimal" {% if site.theme_settings.default_theme == 'minimal' %}selected{% endif %}>Minimal</option>
+        <option value="cozy" {% if site.theme_settings.default_theme == 'cozy' %}selected{% endif %}>Cozy</option>
+        <option value="slate" {% if site.theme_settings.default_theme == 'slate' %}selected{% endif %}>Slate</option>
+        <option value="ocean" {% if site.theme_settings.default_theme == 'ocean' %}selected{% endif %}>Ocean</option>
+        <option value="default" {% if site.theme_settings.default_theme == 'default' or site.theme_settings.default_theme == 'light' %}selected{% endif %}>Light</option>
+    </select>
+</div>
+
+<script>
+    // 1. Load saved theme on page load (DON'T call switchTheme - keeps layout stable)
+    document.addEventListener('DOMContentLoaded', () => {
+        const savedTheme = localStorage.getItem('preferred-theme') || '{{ site.theme_settings.default_theme | default: "dark" }}';
+        const select = document.getElementById('theme-select');
+        if (select) select.value = savedTheme;
+    });
+
+    // 2. Function to switch theme
+    function switchTheme(themeName) {
+        // Save preference
+        localStorage.setItem('preferred-theme', themeName);
+
+        // Update CSS link
+        const themeLink = document.getElementById('theme-css');
+        if (themeLink) {
+            themeLink.href = '{{ "/assets/themes/" | relative_url }}' + themeName + '.css';
+        }
+    }
+</script>
+
+{% endif %}

data/_layouts/default.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
+
+    {% include favicon.html %}
+    {% include css-links.html %}
+    {% include meta.html %}
+    {% include theme-styles.html %}
+
+    <script>
+        const savedTheme = localStorage.getItem('preferred-theme') || 'dark';
+        document.write('<link rel="stylesheet" href="{{ "/assets/themes/" | relative_url }}' + savedTheme + '.css" id="theme-css-preload">');
+    </script>
+</head>
+<body class="{% if site.theme_settings.featured_images == false %}no-left-sidebar{% endif %}{% if site.theme_settings.pinned_posts == false %} no-right-sidebar{% endif %}{% if site.theme_settings.featured_images == false and site.theme_settings.pinned_posts == false %} no-sidebars{% endif %}">
+
+    <!-- ========== DESKTOP LAYOUT (1200px+) ========== -->
+    <div class="sidebar-wrapper">
+        {% include sidebar-left.html %}
+
+        <div class="main-content">
+            {% include header.html %}
+            <main class="feed">{{ content }}</main>
+            {% include footer.html %}
+        </div>
+
+        {% include sidebar-right.html %}
+    </div>
+
+    <!-- ========== MOBILE/TABLET LAYOUT (Below 1200px) ========== -->
+    <div class="container">
+        {% include header.html %}
+        <main class="feed">{{ content }}</main>
+        {% include footer.html %}
+    </div>
+
+</body>
+</html>

data/_layouts/pin.html

@@ -0,0 +1,44 @@
+---
+layout: default
+---
+
+<article class="status-card single-post">
+    <div class="pinned-label">📌 Pinned Post</div>
+
+    <div class="status-meta">
+        <time datetime="{{ page.date | date_to_xmlschema }}">
+            {{ page.date | date: "%B %d, %Y • %I:%M %p" }}
+        </time>
+    </div>
+
+    <div class="status-content">
+        {% if page.title %}
+            <h2 class="status-title">{{ page.title }}</h2>
+        {% endif %}
+        {{ content }}
+    </div>
+
+    <div class="status-actions">
+        <!-- Facebook Share -->
+        <a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}" target="_blank" class="share-btn">
+            <i class="fab fa-facebook-f"></i> Share
+        </a>
+
+        <!-- Pinterest Share -->
+        <a href="https://pinterest.com/pin/create/button/?url={{ site.url }}{{ page.url }}&description={{ page.title | default: site.title }}" target="_blank" class="share-btn">
+            <i class="fab fa-pinterest"></i> Pin
+        </a>
+
+        <!-- Copy Link -->
+        <button onclick="navigator.clipboard.writeText('{{ site.url }}{{ page.url }}'); alert('Link copied!')" class="share-btn">
+            <i class="fas fa-copy"></i> Copy
+        </button>
+    </div>
+
+    <!-- Back to Feed Link -->
+    <div class="back-to-feed">
+        <a href="{{ '/' | relative_url }}" class="share-btn">
+            <i class="fas fa-arrow-left"></i> Back to Feed
+        </a>
+    </div>
+</article>

data/_layouts/post.html

@@ -0,0 +1,55 @@
+---
+layout: default
+---
+
+{% if site.theme_settings.mood_indicators != false %}
+
+<article class="status-card single-post">
+    <div class="status-meta">
+        {% if page.mood %}
+            {% assign mood_color = site.moods[page.mood] | default: site.moods.default %}
+            <span class="mood-indicator" style="background-color: {{ mood_color }}; display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle;"></span>
+            <time datetime="{{ page.date | date_to_xmlschema }}">
+                {{ page.date | date: "%B %d, %Y • %I:%M %p" }}
+            </time>
+            <span style="margin-left:8px; font-style:italic; color:#65676b; font-size:0.85rem;">— feeling {{ page.mood }}</span>
+        {% else %}
+            <time datetime="{{ page.date | date_to_xmlschema }}">
+                {{ page.date | date: "%B %d, %Y • %I:%M %p" }}
+            </time>
+        {% endif %}
+    </div>
+
+    <div class="status-content">
+        {% if page.title %}
+            <h2 class="status-title">{{ page.title }}</h2>
+        {% endif %}
+        {{ content }}
+    </div>
+
+    <div class="status-actions">
+        <!-- Facebook Share -->
+        <a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ page.url }}" target="_blank" class="share-btn">
+            <i class="fab fa-facebook-f"></i> Share
+        </a>
+
+        <!-- Pinterest Share -->
+        <a href="https://pinterest.com/pin/create/button/?url={{ site.url }}{{ page.url }}&description={{ page.title | default: site.title }}" target="_blank" class="share-btn">
+            <i class="fab fa-pinterest"></i> Pin
+        </a>
+
+        <!-- Copy Link -->
+        <button onclick="navigator.clipboard.writeText('{{ site.url }}{{ page.url }}'); alert('Link copied!')" class="share-btn">
+            <i class="fas fa-copy"></i> Copy
+        </button>
+    </div>
+
+    <!-- Back to Feed Link -->
+    <div style="margin-top: 20px; text-align: center;">
+        <a href="{{ '/' | relative_url }}" class="share-btn" style="display: inline-flex;">
+            <i class="fas fa-arrow-left"></i> Back to Feed
+        </a>
+    </div>
+</article>
+
+{% endif %}

data/_posts/2026-03-20-Markdown-Showcase.md

@@ -0,0 +1,75 @@
+---
+layout: post
+title: "Markdown Showcase"
+date: 2026-03-20 14:45:16 -0500
+mood: 
+---
+
+# Theme Showcase
+
+A paragraph with **bold text**, *italic emphasis*, ~~strikethrough~~, `inline code`, and [a link](https://example.com). This demonstrates body text rendering, line height, and font pairing.
+
+## Lists & Structure
+
+- Unordered list item
+  - Nested item with more text to show indentation
+  - Another nested item
+- Second top-level item
+
+1. Ordered list first item
+2. Second item with **bold** and *italic* mixed in
+3. Third item showing how numbers align
+
+## Block Elements
+
+> A blockquote to demonstrate styling for quoted content. This shows how the theme handles left borders, background tints, and text contrast.
+
+---
+
+### Code & Syntax Highlighting
+
+```js
+// JavaScript example
+function greet(name) {
+  return `Hello, ${name}!`;
+}
+
+const users = ["Alice", "Bob", "Charlie"];
+users.forEach(user => {
+  console.log(greet(user));
+});
+```
+
+
+| Syntax      | Description                     | Example       |
+|-------------|---------------------------------|---------------|
+| Header      | Column title                    | `# Header`    |
+| Paragraph   | Body text                       | Plain text    |
+| `inline`    | Code within text                | `` `code` ``  |
+
+## Callouts (Admonitions)
+
+{:.callout-note}
+> Note callout
+> Important information worth highlighting. Shows how the theme styles containers with icons and background colors.
+
+{:.callout-tip}
+> Tip callout
+> Helpful advice or shortcut. Demonstrates accent colors and visual hierarchy.
+
+{:.callout-warning}
+> Warning callout
+> Something requiring caution. Tests contrast and attention-grabbing styling.
+
+## Tasks & Interactive Elements
+
+- [x] Completed task item
+- [ ] Incomplete task
+- [ ] Another pending item with **bold emphasis**
+
+## Typography Details
+
+### Heading levels (h3–h6)
+#### Level 4 heading
+##### Level 5 heading
+###### Level 6 heading

data/_posts/2026-03-20-mood-check.md

@@ -0,0 +1,7 @@
+---
+layout: post
+title: "Morning coffee"
+date: 2024-01-15 08:30:00 -0500
+mood: calm
+---
+Starting the day slow. ☕️

data/_posts/2026-03-23-Batch-Date-Addition.md

@@ -0,0 +1,38 @@
+--- 
+layout: post 
+title: "Batch Date Addition" 
+date: 2026-03-23 15:01:11 -0500 
+pin: true 
+--- 
+ 
+# Drafts and Bulk Publishing
+
+## Using the `_drafts` Folder
+
+Add a `_drafts` folder to your site root to store posts you are not ready to publish. Posts in this folder do not require a date in the filename and will not appear on your live site.
+
+## Filename Requirements
+
+All posts in the `_posts` folder must follow this format:
+
+```
+YYYY-MM-DD-post-title.md
+```
+
+Files without a date prefix will be ignored by Jekyll and will not publish.
+
+## Publishing Drafts
+
+When you are ready to publish drafts:
+
+1.  Save all unfinished posts in `_drafts/` (no date needed)
+2.  Run `add-dates.bat`
+3.  The script will add today's date to each filename and move them to `_posts/`
+4.  Build and upload your site
+
+## Quick Reference
+
+| Folder | Filename Format | Publishes? |
+|--------|-----------------|------------|
+| `_drafts/` | `post-title.md` | No |
+| `_posts/` | `YYYY-MM-DD-post-title.md` | Yes |

data/_posts/featured/2026-03-2-SOCIAL-MEDIA-SHARE-IMAGES.md

@@ -0,0 +1,49 @@
+---
+layout: pin
+title: "Social Media Share Images"
+date: 2024-01-01 12:00:00 -0500
+pin: true
+---
+
+# 📱 Social Media Share Images
+
+When you share a post on Facebook, Pinterest, Twitter, or LinkedIn, those platforms will now display a **preview image** instead of your avatar.
+
+## How It Works
+
+The theme uses **Open Graph meta tags** to tell social media platforms which image to display when a link is shared.
+
+## Setup Steps
+
+### 1. Create a Default Share Image
+
+Create a default image that will be used for all posts:
+
+```
+assets/
+└── images/
+    └── share-default.jpg    ← Create this file
+```
+
+**Recommended Size:** 1200 x 630 pixels
+
+**Tips:**
+- Use a branded image with your site name or logo
+- Keep text minimal and readable at small sizes
+- Use high contrast for better visibility
+
+### 2. Optional: Custom Image Per Post
+
+You can specify a different share image for individual posts by adding an `image` field in the front matter:
+
+```markdown
+---
+layout: post
+title: "My Status Update"
+date: 2024-01-15 14:30:00 -0500
+image: /assets/images/custom-share.jpg
+---
+Your post content here...
+```
+
+---

data/_posts/featured/2026-03-22-ADDING-IMAGES-TO-POSTS.md

@@ -0,0 +1,36 @@
+---
+layout: pin
+title: "Adding Images to Posts"
+date: 2024-01-01 12:00:00 -0500
+pin: true
+---
+
+# Adding Images to Posts
+
+### 1. Add Your Image
+
+Place images in the `assets/images/` folder:
+
+```
+assets/
+└── images/
+    ├── photo1.jpg
+    └── screenshot.png
+```
+
+### 2. Reference in Your Post
+
+Use standard Markdown image syntax:
+
+```markdown
+---
+layout: post
+title: "Check this out!"
+date: 2024-01-15 14:30:00 -0500
+---
+Just finished this project!
+
+![Project Screenshot](/assets/images/screenshot.png)
+
+#proud #completed
+```

data/_posts/featured/2026-03-22-CONFIG-YAML.md

@@ -0,0 +1,44 @@
+---
+layout: pin
+title: "Customize _config File"
+date: 2024-01-01 12:00:00 -0500
+pin: true
+---
+
+# Customization of _config.yml File
+
+## Profile Information
+
+Edit `_config.yml` to update your profile:
+
+```yaml
+title: "My Status Wall"
+description: "Quick updates and snippets."
+url: "https://yourdomain.com"
+
+author:
+  name: "Your Name"
+  bio: "Posting snippets and status updates."
+  avatar: "/assets/avatar.jpg"
+
+theme_settings:
+  theme_switcher: true #turns off auto when pinned posts is off
+  pinned_posts: true
+  featured_images: true
+  mood_indicators: true
+
+  # Additional settings
+  default_theme: dark
+  pinned_posts_limit: 5
+  featured_images_limit: 2
+
+moods:
+  calm: "#87ceeb"        # Light blue
+  happy: "#ffd700"       # Gold
+  excited: "#ff6b6b"     # Red
+  thoughtful: "#9b59b6"  # Purple
+  tired: "#95a5a6"       # Gray
+  creative: "#2ecc71"    # Green
+  focused: "#3498db"     # Blue
+  default: "#bdc3c7"     # Light gray fallback
+```

data/_posts/featured/2026-03-22-CREATING-A-POST.md

@@ -0,0 +1,36 @@
+---
+layout: pin
+title: "Creating A New Status Post"
+date: 2024-01-01 12:00:00 -0500
+pin: true
+---
+
+# 📄 Creating a New Status Post
+
+## Option 1: Using the Batch File (Windows) Recommended
+
+**Double-click `new-post.bat`** in the root folder.
+
+1. Enter your post title (or press Enter for no title)
+2. The file is automatically created in `_posts/` with the current date & time
+3. Notepad opens automatically - write your status!
+4. Add images using Markdown: `![Alt Text](/assets/images/photo.jpg)`
+5. Save and close - your post is ready!
+
+## Option 2: Manual Creation
+
+1. Create a new file in the `_posts/` folder
+2. Name it: `YYYY-MM-DD-your-title.md`
+3. Add front matter:
+
+```markdown
+---
+layout: post
+title: "Your Status Title"
+date: 2024-01-15 14:30:00 -0500
+---
+
+Write your status update here...
+```
+
+> **Note:** Adjust the timezone offset (`-0500`) to match your location.

data/_posts/featured/2026-03-22-FEATURED-IMAGES-LEFT-SIDEBAR.md

@@ -0,0 +1,53 @@
+---
+layout: pin
+title: "Left Sidebar Featured Images"
+date: 2024-01-01 12:00:00 -0500
+pin: true
+---
+
+# Featured Images (Left Sidebar)
+
+Display clickable promotional images, book covers, or favorite photos in the left sidebar on desktop screens.
+
+## How to Add Featured Images
+
+1. **Add Your Image**
+   
+   Place your image in the `assets/images/featured/` folder:
+   ```
+   assets/
+   └── images/
+       └── featured/
+           ├── book-cover.jpg
+           ├── promo-banner.png
+           └── portfolio-photo.jpg
+   ```
+
+2. **Edit the Configuration File**
+   
+   Open `_data/featured-images.yml` and add an entry:
+   ```yaml
+   - image: /assets/images/featured/book-cover.jpg
+     link: https://amazon.com/yourbook
+     alt: "My New Book - Available Now!"
+   
+   - image: /assets/images/featured/promo-banner.png
+     link: https://yourwebsite.com/promo
+     alt: "Special Promotion"
+   ```
+
+3. **Rebuild & Upload**
+   ```bash
+   bundle exec jekyll build
+   ```
+   Upload the updated `_site/` contents to your host.
+
+## Configuration Options
+
+| Field | Description | Example |
+|-------|-------------|---------|
+| `image` | Path to your image file | `/assets/images/featured/photo.jpg` |
+| `link` | URL when image is clicked | `https://yourwebsite.com` |
+| `alt` | Caption text displayed below image | "Check out my latest work!" |
+
+---

data/_posts/featured/2026-03-22-HOW-TO-USE-CALLOUTS.md

@@ -0,0 +1,36 @@
+---
+layout: pin
+title: "How to Use Callouts"
+date: 2024-01-01 12:00:00 -0500
+pin: true
+---
+
+# Using Callouts in Posts
+
+```
+---
+layout: post
+title: "Markdown Callouts"
+date: 2026-03-21 01:14:47 -0500
+mood: 
+pin: true
+---
+
+{:.callout-note}
+> **Note**
+> This is a note callout.
+
+{:.callout-tip}
+> **Tip**
+> This is a tip callout.
+
+{:.callout-warning}
+> **Warning**
+> This is a warning callout.
+
+{:.callout-danger}
+> **Danger**
+> This is a danger callout.
+
+```
+---

data/_posts/featured/2026-03-22-HOW-TO-USE-MOODS.md

@@ -0,0 +1,33 @@
+---
+layout: pin
+title: "How to Use Moods"
+date: 2024-01-01 12:00:00 -0500
+pin: true
+---
+
+# How to Use Moods
+
+Add a `mood` field to your post front matter:
+
+```markdown
+---
+layout: post
+title: "Morning Coffee"
+date: 2024-01-15 08:30:00 -0500
+mood: calm
+---
+```
+
+## Available Moods
+
+| Mood | Color | Description |
+|------|-------|-------------|
+| `calm` | 🩵 Light Blue | Peaceful, relaxed |
+| `happy` | 🟡 Gold | Joyful, positive |
+| `excited` | 🔴 Red | Energetic, thrilling |
+| `thoughtful` | 🟣 Purple | Reflective, deep |
+| `tired` | ⚪ Gray | Exhausted, low energy |
+| `creative` | 🟢 Green | Artistic, building |
+| `focused` | 🔵 Blue | Working, concentrating |
+
+---