jekyll-theme-dreamcast 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 00f2a258d4eef7c1d87abe34b096b4f78fb6a56bfa9eb12175aa00dd46da409c
+  data.tar.gz: b375e12372002188c8ad228c12f3759d472ca72ac4b827f6321c8db05d9914cf
+SHA512:
+  metadata.gz: 3280372310952d1532246f7b30a74e0f09a9617562a22d723882733412fc6cae5f3eed8a3f5344c5ab109da1e912fb07b641b8e1181b86e5021f9c1a0a2860d4
+  data.tar.gz: 20be9ee415530aeaea67e7acc68aaeae24d551d9a5ca72815d27ee7eddfca4f37ec5e57465365ba84cd356e1e13e89c5b1a5d63ae313e634ae6b480fbc070004

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Jack Killilea
+
+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,190 @@
+# Jekyll Theme: Dreamcast
+
+A retro-futuristic Jekyll theme inspired by the iconic **Sega Dreamcast** console. Features the signature orange and blue color scheme, smooth animations, and a nostalgic gaming aesthetic.
+
+![Dreamcast Theme](screenshot.png)
+
+## Features
+
+- **Iconic Dreamcast Colors**: Orange (#FF6600) and Blue (#0052CC) color scheme
+- **Dark/Light Mode**: Smooth theme switching with localStorage persistence
+- **Responsive Design**: Mobile-friendly cards and layouts
+- **Typography**: Modern Exo 2 font for that futuristic feel
+- **Dreamcast-Inspired Elements**:
+  - Orange swirl accent dots on headings
+  - VMU-inspired code block styling
+  - Gradient hover effects
+  - Circular theme toggle button
+- **Blog Support**: Post listings with reading time
+- **Project Cards**: Showcase your portfolio with animated cards
+- **Syntax Highlighting**: Beautiful code blocks with Dreamcast colors
+
+## Installation
+
+### As a Remote Theme (GitHub Pages)
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "jekyll-remote-theme"
+```
+
+And add this to your `_config.yml`:
+
+```yaml
+plugins:
+  - jekyll-remote-theme
+
+remote_theme: jackkillilea/jekyll-theme-dreamcast
+```
+
+### As a Gem-based Theme
+
+Add this line to your Jekyll site's `Gemfile`:
+
+```ruby
+gem "jekyll-theme-dreamcast"
+```
+
+And add this to your `_config.yml`:
+
+```yaml
+theme: jekyll-theme-dreamcast
+```
+
+Then execute:
+
+```bash
+bundle install
+```
+
+## Configuration
+
+Add the following configuration to your `_config.yml`:
+
+```yaml
+title: Your Name
+author: Your Name
+url: https://yoursite.com
+description: >
+  Your site description here
+
+theme_config:
+  appearance: "dark" # can be "light", "dark" or "auto"
+  appearance_toggle: true # show theme toggle button
+  back_home_text: "home.." # text for back to home link
+  date_format: "%Y-%m-%d" # date format for posts
+  show_description: true # show site description on home page
+  show_navbar: true # show navigation bar
+  show_footer: false # show footer links
+  show_copyright: true # show copyright in footer
+  show_projects: true # show projects section
+  show_blog: false # show blog posts on home page
+  show_old_projects: false # show old projects section
+  show_misc_list: false # show miscellaneous list
+  show_reading_time: true # show reading time in posts
+  show_tags: false # show tags in posts
+
+  # Section titles
+  home:
+    title_projects: Portfolio
+    title_misc_list: Details
+    title_blog: Blog
+    title_old_projects: Old Projects
+
+highlighter: rouge
+
+plugins:
+  - jekyll-feed
+  - jekyll-seo-tag
+```
+
+## Data Files
+
+Create a `_data/home.yml` file for your homepage content:
+
+```yaml
+navbar_entries:
+  - title: about
+    url: /about
+  - title: blog
+    url: /blog
+
+project_entries:
+  - title: My Project
+    url: https://github.com/username/project
+    desc: A cool project description
+    highlight: NEW
+
+footer_entries:
+  - title: github
+    url: https://github.com/username
+```
+
+## Layouts
+
+The theme includes the following layouts:
+
+- `default` - Base layout for all pages
+- `home` - Homepage layout with projects and blog
+- `post` - Blog post layout
+- `blog` - Blog listing page
+
+## Color Scheme
+
+### Light Mode
+- Background: #FAFAFA
+- Text: #2A2A2A
+- Headings: #0052CC (Dreamcast Blue)
+- Links: #FF6600 (Dreamcast Orange)
+
+### Dark Mode
+- Background: #1A2332
+- Text: #D0D0D0
+- Headings: #FF8533 (Light Orange)
+- Links: #FF6600 (Dreamcast Orange)
+
+## Customization
+
+### Custom Head Content
+
+Create `_includes/custom_head.html` to add custom meta tags, analytics, or other head content.
+
+### Override Styles
+
+Create your own CSS file and import the theme styles first:
+
+```scss
+---
+---
+
+@import "dreamcast";
+@import "list";
+@import "syntax";
+
+// Your custom styles here
+```
+
+## Development
+
+To set up your environment to develop this theme:
+
+```bash
+git clone https://github.com/jackkillilea/jekyll-theme-dreamcast
+cd jekyll-theme-dreamcast
+bundle install
+```
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/jackkillilea/jekyll-theme-dreamcast.
+
+## License
+
+The theme is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+## Credits
+
+Inspired by the legendary Sega Dreamcast console (1998-2001) and its iconic visual design.
+
+Built on the foundation of the [Moonwalk](https://github.com/abhinavs/moonwalk) Jekyll theme.

data/_includes/card_list.html

@@ -0,0 +1,26 @@
+<ul class="horizontal-list">
+  {% for item in include.collection %}
+
+    <li class="card">
+      <a href="{{ item.url }}">
+        <span class="header">
+          {{ item.title }}
+
+          {% if item.highlight %}
+            <mark>{{ item.highlight }}</mark>
+          {% endif %}
+
+        </span>
+
+        <hr />
+
+        {% if item.desc != false %}
+        <p class="body">
+          {{ item.desc }}
+        </p>
+        {% endif %}
+      </a>
+    </li>
+
+  {% endfor %}
+</ul>

data/_includes/custom_head.html

@@ -0,0 +1 @@
+<!-- Add your custom head content here -->

data/_includes/date_and_social_share.html

@@ -0,0 +1,31 @@
+<p class="post-date text-bold">
+  {% if page.author %}
+    <span class="text-upcase">{{ page.author }}</span> /
+  {% endif %}
+  {% if page.date %}
+    <span class="text-upcase">{{ page.date | date: "%B %Y"}}</span>
+  {% endif %}
+
+{% if site.theme_config.show_reading_time == true %}
+  {% capture words %}
+  {{ content | number_of_words | minus: 180 }}
+  {% endcapture %}
+  {% unless words contains '-' %}
+  {{ words | strip | prepend: '(' | append: ' Words, ' }}
+  {{ words | plus: 180 | divided_by: 180 | append: ' Minutes)' }}
+  {% endunless %}
+{% endif %}
+</p>
+
+<div class="soopr-btn"
+   data-twitter="SooprCo"
+>
+</div>
+
+{% if site.theme_config.show_tags == true %}
+  <div class="">
+    {% for tag in page.tags %}
+    <span class="tag">{{ tag }}</span>
+    {% endfor %}
+  </div>
+{% endif %}

data/_includes/head.html

@@ -0,0 +1,23 @@
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <title>
+    {% if page.title %}
+      {{ page.title }}
+    {% else %}
+      {{ site.title }}
+    {% endif %}
+  </title>
+
+  {% seo title=false %}
+  {% feed_meta %}
+
+  <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}" />
+  {% if site.theme_config.appearance_toggle %}
+    {% include toggle_theme_js.html %}
+  {% endif %}
+
+  {%- include custom_head.html -%}
+</head>

data/_includes/horizontal_list.html

@@ -0,0 +1,10 @@
+<ul class="horizontal-list font-base font-heading text-upcase">
+  {% for item in include.collection %}
+    <li>
+      <a href="{{ item.url }}">
+        {{ item.title }}
+      </a>
+      &nbsp;&nbsp;
+    </li>
+  {% endfor %}
+</ul>

data/_includes/post_list.html

@@ -0,0 +1,12 @@
+{% if site.posts.size > 0 %}
+  <ul>
+    {% for post in site.posts %}
+      <li class="post-list-item">
+        <span class="home-date">
+          {{ post.date | date: site.theme_config.date_format }}»
+        </span>
+        <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
+      </li>
+    {% endfor %}
+  </ul>
+{% endif %}

data/_includes/toggle_theme_button.html

@@ -0,0 +1,10 @@
+<button title="Toggle Theme" class="theme-toggle">
+  <svg viewBox="0 0 32 32" width="24" height="24" fill="currentcolor">
+    <circle cx="16" cy="16" r="14" fill="none" stroke="currentcolor" stroke-width="4"></circle>
+    <path d="
+             M 16 0
+             A 16 16 0 0 0 16 32
+             z">
+    </path>
+  </svg>
+</button>

data/_includes/toggle_theme_js.html

@@ -0,0 +1,30 @@
+<script type="text/javascript">
+  window.addEventListener('load', themeChange);
+  const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
+  if (currentTheme)
+    document.documentElement.setAttribute('data-theme', currentTheme);
+
+  function themeChange() {
+    let button = document.querySelector('.theme-toggle');
+
+    button.addEventListener('click', function (e) {
+      let currentTheme = document.documentElement.getAttribute('data-theme');
+      if (currentTheme === 'dark') {
+        transition();
+        document.documentElement.setAttribute('data-theme', 'light');
+        localStorage.setItem('theme', 'light');
+      } else {
+        transition();
+        document.documentElement.setAttribute('data-theme', 'dark');
+        localStorage.setItem('theme', 'dark');
+      }
+    });
+
+    let transition = () => {
+      document.documentElement.classList.add('transition');
+      window.setTimeout(() => {
+        document.documentElement.classList.remove('transition');
+      }, 1000);
+    }
+  }
+</script>

data/_includes/vertical_list.html

@@ -0,0 +1,19 @@
+<ul>
+  {% for item in include.collection %}
+    <li>
+    {% if item.url != false %}
+      <a href="{{ item.url }}">{{ item.title }}</a>
+    {% else %}
+      {{ item.title }}
+    {% endif %}
+
+    {% if item.post_list == true %}
+      {% include post_list.html %}
+    {% endif %}
+
+    {% if item.entries %}
+      {% include vertical_list.html collection=item.entries %}
+    {% endif %}
+    </li>
+  {% endfor %}
+</ul>

data/_layouts/blog.html

@@ -0,0 +1,10 @@
+---
+layout: default
+---
+<a href="{{ "/" | relative_url }}">{{ site.theme_config.back_home_text }}</a>
+
+<header>
+  <h1>{{ site.title }}</h1>
+</header>
+
+{% include post_list.html %}

data/_layouts/default.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: "en" }}" class="html" data-theme="{{ site.theme_config.appearance | default: "auto" }}">
+  {%- include head.html -%}
+  <body>
+    <main class="page-content" aria-label="Content">
+      <div class="w">
+        {{ content }}
+        {% if site.theme_config.appearance_toggle %}
+          {% include toggle_theme_button.html %}
+        {% endif %}
+      </div>
+    </main>
+
+    {%- if site.soopr -%}
+      {%- if site.soopr.publish_token and jekyll.environment == "production" -%}
+        <script async defer data-soopr-token="{{site.soopr.publish_token}}" src="https://sdk.soopr.co/soopr.js"></script>
+      {%- else -%}
+        <script async defer src="https://sdk.soopr.co/soopr.js"></script>
+      {%- endif -%}
+    {%- endif -%}
+  </body>
+</html>

data/_layouts/home.html

@@ -0,0 +1,44 @@
+---
+layout: default
+---
+
+<header>
+{% if site.theme_config.show_navbar == true %}
+  {% include horizontal_list.html collection=site.data.home.navbar_entries %}
+  <div class="dashed"></div>
+{% endif %}
+
+  <h1>{{ site.title }}</h1>
+  {% if site.theme_config.show_description == true %}
+    <p>{{ site.description }}</p>
+  {% endif %}
+</header>
+
+{{ content }}
+
+{% if site.theme_config.show_projects == true %}
+  <h2>{{ site.theme_config.home.title_projects }}</h2>
+  {% include card_list.html collection=site.data.home.project_entries %}
+{% endif %}
+
+{% if site.theme_config.show_misc_list == true %}
+  <h2>{{ site.theme_config.home.title_misc_list }}</h2>
+  {% include vertical_list.html collection=site.data.home.misc_entries %}
+{% endif %}
+
+{% if site.theme_config.show_blog == true %}
+  <h2>{{ site.theme_config.home.title_blog }}</h2>
+  {% include post_list.html %}
+{% endif %}
+
+{% if site.theme_config.show_old_projects == true %}
+  <h2>{{ site.theme_config.home.title_old_projects }}</h2>
+  {% include card_list.html collection=site.data.home.old_project_entries %}
+{% endif %}
+
+{% if site.theme_config.show_footer == true %}
+  <footer>
+    <div class="dashed"></div>
+    {% include horizontal_list.html collection=site.data.home.footer_entries %}
+  </footer>
+{% endif %}

data/_layouts/post.html

@@ -0,0 +1,8 @@
+---
+layout: default
+---
+
+<a href="{{ "/" | relative_url }}">{{ site.theme_config.back_home_text }}</a>
+<h1 class="post-title">{{ page.title }}</h1>
+{% include date_and_social_share.html %}
+{{ content }}

data/_sass/dreamcast.scss

@@ -0,0 +1,344 @@
+@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
+
+html { height: 100%; }
+
+body {
+  font-family: "Exo 2", -apple-system, "avenir next", avenir, roboto, noto, ubuntu, "helvetica neue", helvetica, sans-serif;
+  font-size: 1.0rem;
+  line-height: 1.8;
+  margin: 0;
+  min-height: 100%;
+}
+
+pre, code {
+  font-family: "Roboto Mono", "Courier New", monospace;
+  font-size: 0.9rem;
+}
+
+h1 {
+  font-weight: 700;
+  letter-spacing: -0.5px;
+}
+
+h2, h3, h4, h5 {
+  margin-top: 1.5em;
+  font-weight: 600;
+}
+
+hr { margin: 1em 0; }
+
+hr.page-break {
+  text-align: center;
+  border: 0;
+
+  &:before { content: '-----' }
+  &:after { content: attr(data-content) '-----' }
+}
+
+p { margin: 1em 0; }
+
+li { margin: 0.4em 0; }
+
+.w {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 4em 2em;
+}
+
+table, th, td {
+  width: 100%;
+  border: thin solid var(--border);
+  border-collapse: collapse;
+  padding: 0.4em;
+}
+
+div.highlighter-rouge pre code, pre code.highlighter-rouge {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+
+blockquote {
+  font-style: italic;
+  border-left: 4px solid var(--dreamcast-orange);
+  padding: 1em;
+  background-color: var(--bg-secondary);
+  margin: 1em 0;
+
+  p { margin: 0; }
+}
+
+img {
+  max-width: 100%;
+  display: block;
+  margin: 0 auto;
+  border-radius: 8px;
+}
+
+// -------------- DREAMCAST THEME COLORS -------------- //
+@mixin light-appearance {
+  html, body {
+      --bg: #FAFAFA;
+      --bg-secondary: #F0F0F0;
+      --headings: #0052CC;
+      --text: #2A2A2A;
+      --text-secondary: #666666;
+      --links: #FF6600;
+      --links-hover: #FF8533;
+      --highlight: #FFE0CC;
+      --code-text: #0052CC;
+      --share-text: #999;
+      --border: #DDDDDD;
+      --dreamcast-orange: #FF6600;
+      --dreamcast-blue: #0052CC;
+      --dreamcast-swirl-glow: rgba(255, 102, 0, 0.15);
+  }
+}
+
+@mixin dark-appearance {
+  html, body  {
+    --bg: #1A2332;
+    --bg-secondary: #243447;
+    --headings: #FF8533;
+    --text: #D0D0D0;
+    --text-secondary: #9CA3AF;
+    --links: #FF6600;
+    --links-hover: #FF8533;
+    --highlight: #FF6600;
+    --code-text: #6CB6FF;
+    --border: #3A4558;
+    --dreamcast-orange: #FF6600;
+    --dreamcast-blue: #6CB6FF;
+    --dreamcast-swirl-glow: rgba(255, 102, 0, 0.2);
+  };
+}
+
+html[data-theme="dark"] { @include dark-appearance; }
+html[data-theme="light"] { @include light-appearance; }
+
+@media (prefers-color-scheme: dark) {
+  body[data-theme="auto"] { @include dark-appearance; }
+}
+@media (prefers-color-scheme: light) {
+  body[data-theme="auto"] { @include light-appearance; }
+}
+
+// -------------------------------------------- //
+
+html, body {
+    background-color: var(--bg);
+    color: var(--text);
+}
+
+h1, h2, h3, h4, h5, h6 {
+    color: var(--headings);
+}
+
+p, strong, b, em, small, li, hr, table, figcaption {
+    color: var(--text);
+}
+
+.highlight, pre code {
+  border-radius: 8px;
+  border: 2px solid var(--border);
+}
+
+blockquote {
+  border-radius: 4px;
+}
+
+a {
+  color: var(--links);
+  text-decoration: none;
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s ease;
+
+  &:hover {
+    color: var(--links-hover);
+    border-bottom-color: var(--links-hover);
+  }
+}
+
+*:target {
+  background-color: var(--bg-secondary);
+  box-shadow: 0 0 0 4px var(--bg-secondary);
+  border-radius: 4px;
+}
+
+html.transition,
+html.transition *,
+html.transition *:before,
+html.transition *:after {
+    transition: all 250ms !important;
+    transition-delay: 0 !important;
+}
+
+// Dreamcast-inspired theme toggle button
+.theme-toggle {
+  color: var(--dreamcast-orange);
+  background-color: var(--bg-secondary);
+  padding: 8px;
+  cursor: pointer;
+  margin: 1em;
+  position: fixed;
+  right: 0;
+  top: 0;
+  border: 2px solid var(--dreamcast-orange);
+  border-radius: 50%;
+  outline: none;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px var(--dreamcast-swirl-glow);
+}
+
+.theme-toggle:hover {
+  background-color: var(--dreamcast-orange);
+  color: var(--bg);
+  transform: rotate(180deg);
+  box-shadow: 0 4px 16px var(--dreamcast-swirl-glow);
+}
+
+.theme-toggle:focus {
+  outline: none;
+}
+
+.dashed {
+  border-top: 2px var(--border) dashed;
+  margin: 0.5em 0;
+}
+
+mark {
+  padding: 0.4em;
+  background-color: var(--highlight);
+  color: var(--text);
+  font-size: 0.8em;
+  letter-spacing: 0.5px;
+  border-radius: 4px;
+  font-weight: 600;
+}
+
+.post-date {
+  color: var(--text-secondary);
+  margin-top: 1rem;
+  font-size: 0.8em;
+  font-family: "Roboto Mono", "Courier New", monospace;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.home-date {
+  font-family: "Roboto Mono", "Courier New", monospace;
+  color: var(--text-secondary);
+  font-size: 0.85em;
+}
+
+.post-list-item a {
+  text-decoration: none;
+}
+
+.text-bold {
+  font-weight: 700;
+}
+
+.text-upcase {
+  text-transform: uppercase;
+  letter-spacing: 1.5px;
+  font-weight: 600;
+}
+
+p code, li code {
+  background-color: var(--bg-secondary);
+  padding: 0.3rem 0.5rem;
+  color: var(--code-text);
+  font-weight: 600;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+}
+
+.post-title {
+  margin-bottom: -1.5rem;
+}
+
+.project-title {
+  margin-bottom: 0.8rem;
+  color: var(--headings);
+}
+
+.credits {
+  font-size: 0.8em;
+  color: var(--text-secondary);
+  margin: 8em auto -4em auto;
+  text-align: center;
+
+  a {
+    color: var(--text-secondary);
+    text-decoration: none;
+    font-weight: bold;
+  }
+
+  a:hover {
+    color: var(--dreamcast-orange);
+  }
+}
+
+.tag {
+  font-family: "Roboto Mono", "Courier New", monospace;
+  color: var(--bg);
+  background-color: var(--dreamcast-orange);
+  padding: 0.4em 1em;
+  margin-right: 0.5em;
+  border-radius: 20px;
+  font-size: 0.7em;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  display: inline-block;
+  transition: all 0.2s ease;
+
+  &:hover {
+    background-color: var(--dreamcast-blue);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  }
+}
+
+// Dreamcast swirl-inspired accent for headings
+h1::before {
+  content: "";
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  background: var(--dreamcast-orange);
+  border-radius: 50%;
+  margin-right: 12px;
+  box-shadow: 0 0 12px var(--dreamcast-swirl-glow);
+}
+
+// VMU-inspired pixel border effect for code blocks
+.highlight {
+  position: relative;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    background: linear-gradient(45deg, var(--dreamcast-orange) 0%, var(--dreamcast-blue) 100%);
+    border-radius: 8px;
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  &:hover::before {
+    opacity: 0.3;
+  }
+}

data/_sass/list.scss

@@ -0,0 +1,66 @@
+ul.horizontal-list {
+  display: flex;
+  margin-top: 0em;
+  margin-left: -40px;
+  flex-wrap: wrap;
+
+  li {
+    display:inline;
+    margin-right: 1em;
+  }
+
+  li a {
+    text-decoration: none;
+    font-weight: normal
+  }
+
+}
+
+.card {
+  padding: 1em;
+  border: 2px var(--dreamcast-orange) solid;
+  width: 11em;
+  height: auto;
+  text-align: center;
+  font-size: 1em;
+  align-items: center;
+  background-color: var(--bg-secondary);
+  margin-bottom: 0.8em;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 6px 16px var(--dreamcast-swirl-glow);
+    border-color: var(--dreamcast-blue);
+  }
+
+  .header {
+    color: var(--links);
+    font-weight: 600;
+  }
+
+  .body {
+    font-size: 0.8em;
+  }
+
+  hr {
+    margin: 0.5em 0;
+    border-color: var(--border);
+  }
+
+}
+
+/* Responsive cards - one column layout on small screens */
+@media screen and (max-width: 600px) {
+  ul.horizontal-list li.card {
+    width: 100%;
+    display: block;
+    margin-bottom: 1em;
+    margin-left: 1em;
+    a, .header {
+      font-size: 1em;
+    }
+  }
+}

data/_sass/syntax.scss

@@ -0,0 +1,72 @@
+.highlight .hll { background-color: #515151 }
+.highlight  { background: #1A2332; color: #f2f0ec }
+.highlight .c { color: #747369 } /* Comment */
+.highlight .err { color: #f2777a } /* Error */
+.highlight .k { color: #cc99cc } /* Keyword */
+.highlight .l { color: #f99157 } /* Literal */
+.highlight .n { color: #f2f0ec } /* Name */
+.highlight .o { color: #66cccc } /* Operator */
+.highlight .p { color: #f2f0ec } /* Punctuation */
+.highlight .ch { color: #747369 } /* Comment.Hashbang */
+.highlight .cm { color: #747369 } /* Comment.Multiline */
+.highlight .cp { color: #747369 } /* Comment.Preproc */
+.highlight .cpf { color: #747369 } /* Comment.PreprocFile */
+.highlight .c1 { color: #747369 } /* Comment.Single */
+.highlight .cs { color: #747369 } /* Comment.Special */
+.highlight .gd { color: #f2777a } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gh { color: #f2f0ec; font-weight: bold } /* Generic.Heading */
+.highlight .gi { color: #99cc99 } /* Generic.Inserted */
+.highlight .gp { color: #747369; font-weight: bold } /* Generic.Prompt */
+.highlight .gs { font-weight: bold } /* Generic.Strong */
+.highlight .gu { color: #66cccc; font-weight: bold } /* Generic.Subheading */
+.highlight .kc { color: #cc99cc } /* Keyword.Constant */
+.highlight .kd { color: #cc99cc } /* Keyword.Declaration */
+.highlight .kn { color: #66cccc } /* Keyword.Namespace */
+.highlight .kp { color: #cc99cc } /* Keyword.Pseudo */
+.highlight .kr { color: #cc99cc } /* Keyword.Reserved */
+.highlight .kt { color: #ffcc66 } /* Keyword.Type */
+.highlight .ld { color: #99cc99 } /* Literal.Date */
+.highlight .m { color: #f99157 } /* Literal.Number */
+.highlight .s { color: #99cc99 } /* Literal.String */
+.highlight .na { color: #6699cc } /* Name.Attribute */
+.highlight .nb { color: #f2f0ec } /* Name.Builtin */
+.highlight .nc { color: #ffcc66 } /* Name.Class */
+.highlight .no { color: #f2777a } /* Name.Constant */
+.highlight .nd { color: #66cccc } /* Name.Decorator */
+.highlight .ni { color: #f2f0ec } /* Name.Entity */
+.highlight .ne { color: #f2777a } /* Name.Exception */
+.highlight .nf { color: #6699cc } /* Name.Function */
+.highlight .nl { color: #f2f0ec } /* Name.Label */
+.highlight .nn { color: #ffcc66 } /* Name.Namespace */
+.highlight .nx { color: #6699cc } /* Name.Other */
+.highlight .py { color: #f2f0ec } /* Name.Property */
+.highlight .nt { color: #66cccc } /* Name.Tag */
+.highlight .nv { color: #f2777a } /* Name.Variable */
+.highlight .ow { color: #66cccc } /* Operator.Word */
+.highlight .w { color: #f2f0ec } /* Text.Whitespace */
+.highlight .mb { color: #f99157 } /* Literal.Number.Bin */
+.highlight .mf { color: #f99157 } /* Literal.Number.Float */
+.highlight .mh { color: #f99157 } /* Literal.Number.Hex */
+.highlight .mi { color: #f99157 } /* Literal.Number.Integer */
+.highlight .mo { color: #f99157 } /* Literal.Number.Oct */
+.highlight .sa { color: #99cc99 } /* Literal.String.Affix */
+.highlight .sb { color: #99cc99 } /* Literal.String.Backtick */
+.highlight .sc { color: #f2f0ec } /* Literal.String.Char */
+.highlight .dl { color: #99cc99 } /* Literal.String.Delimiter */
+.highlight .sd { color: #747369 } /* Literal.String.Doc */
+.highlight .s2 { color: #99cc99 } /* Literal.String.Double */
+.highlight .se { color: #f99157 } /* Literal.String.Escape */
+.highlight .sh { color: #99cc99 } /* Literal.String.Heredoc */
+.highlight .si { color: #f99157 } /* Literal.String.Interpol */
+.highlight .sx { color: #99cc99 } /* Literal.String.Other */
+.highlight .sr { color: #99cc99 } /* Literal.String.Regex */
+.highlight .s1 { color: #99cc99 } /* Literal.String.Single */
+.highlight .ss { color: #99cc99 } /* Literal.String.Symbol */
+.highlight .bp { color: #f2f0ec } /* Name.Builtin.Pseudo */
+.highlight .fm { color: #6699cc } /* Name.Function.Magic */
+.highlight .vc { color: #f2777a } /* Name.Variable.Class */
+.highlight .vg { color: #f2777a } /* Name.Variable.Global */
+.highlight .vi { color: #f2777a } /* Name.Variable.Instance */
+.highlight .vm { color: #f2777a } /* Name.Variable.Magic */
+.highlight .il { color: #f99157 } /* Literal.Number.Integer.Long */

data/assets/css/main.scss

@@ -0,0 +1,6 @@
+---
+---
+
+@import "dreamcast";
+@import "list";
+@import "syntax";

metadata

@@ -0,0 +1,134 @@
+--- !ruby/object:Gem::Specification
+name: jekyll-theme-dreamcast
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Jack Killilea
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2025-10-13 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.2'
+- !ruby/object:Gem::Dependency
+  name: jekyll-feed
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.15'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.15'
+- !ruby/object:Gem::Dependency
+  name: jekyll-seo-tag
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.7'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.7'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+description: A retro-futuristic Jekyll theme inspired by the iconic Sega Dreamcast
+  console, featuring the signature orange and blue color scheme, smooth animations,
+  and a nostalgic gaming aesthetic.
+email:
+- ''
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE
+- README.md
+- _includes/card_list.html
+- _includes/custom_head.html
+- _includes/date_and_social_share.html
+- _includes/head.html
+- _includes/horizontal_list.html
+- _includes/post_list.html
+- _includes/toggle_theme_button.html
+- _includes/toggle_theme_js.html
+- _includes/vertical_list.html
+- _layouts/blog.html
+- _layouts/default.html
+- _layouts/home.html
+- _layouts/post.html
+- _sass/dreamcast.scss
+- _sass/list.scss
+- _sass/syntax.scss
+- assets/css/main.scss
+homepage: https://github.com/jackkillilea/jekyll-theme-dreamcast
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.5.11
+signing_key: 
+specification_version: 4
+summary: A Sega Dreamcast-inspired Jekyll theme
+test_files: []