bay_jekyll_theme 1.2.5 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a1a9ffd37424cbd8a85690b33899cf004d0f4dc1ade37f44e063a06c78ae1f04
-  data.tar.gz: e40f7054dc6932a4362f32a0f072ed9daf0b027458cc2fb185f73670bc5c905c
+  metadata.gz: f4d65a72a7c5ce9e666c26e89b23758fa46d63d1232a2dc615b4a8aacba1e909
+  data.tar.gz: e543b4f48413385cbfbfd371403f064db901435af46bbd091513c52e9d99e5c8
 SHA512:
-  metadata.gz: b4c3d2a181a9c5048f424ed3dbfce67a27bb84b6f52f84aaf70e44ca2bed1d3e0772fcdd965b5914f344326bad8683f2abd96977a3de21827b622ae3e407f073
-  data.tar.gz: 393729c45effe97249ffc864b9317f7705717d76ee2dcc90e0105bd07dde5eebe12cfd4fe6fe92f2afdc8230eec2924b6f5054b21abf4ca209f20f83d060ba3b
+  metadata.gz: 9e2a3b566b50d8161da2dba346aa8624591eb042a2e96b9bc747d5e1dfa8243bb04ceb0df8bb3f16c7652febed693d76dd56914f0c76bd84da45f588767ae6af
+  data.tar.gz: ecb7d808467a92cc29ddce4e0c565a43fa40a4014cc9f0856c3f78cd7bc64d6dbc283d1b7d71220b37a56e03d31ac21e7284533c344d9d13a675d9701586fcd3

data/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to this project will be documented in this file.
 
+### [2.0.0](https://github.com/eliottvincent/bay/compare/v1.2.5...v2.0.0) (2026-11-13)
+
+### Breaking Changes
+
+- Replace the former `work` layout with `collection`
+
+### Features
+
+- Add new `work` layout with `timeline` and `editorial` variants
+
 ### [1.2.5](https://github.com/eliottvincent/bay/compare/v1.2.4...v1.2.5) (2026-05-08)
 
 ### Improvements

data/README.md

@@ -5,7 +5,7 @@
 
 Bay is a simple theme for Jekyll. [[view live]](https://eliottvincent.github.io/bay)
 
-Inspired by [dangrover.com](http://dangrover.com/). Current theme used at [eliottvincent.com](http://eliottvincent.com/).
+Current theme used at [elio.tt](http://elio.tt/).
 
 ![](/screenshot.png)
 
@@ -17,9 +17,12 @@ Inspired by [dangrover.com](http://dangrover.com/). Current theme used at [eliot
     1. [Header](#header)
     2. [Footer](#footer)
     3. [Home page](#home-page)
-    4. [Blog page](#blog-page)
-5. [GitHub Pages](#github-pages)
-6. [Development instructions](#development)
+    4. [Collection page](#collection-page)
+    5. [Work page](#work-page)
+    6. [Blog page](#blog-page)
+3. [Migrating from Bay 1.x](#migrating-from-bay-1x)
+4. [GitHub Pages](#github-pages)
+5. [Development instructions](#development)
 
 
 ### Installation
@@ -132,6 +135,80 @@ profile_picture:
 </p>
 ```
 
+#### Collection page
+
+Create `collection.md` to display a simple image-and-text collection:
+
+```yml
+---
+layout: collection
+title: Collection
+slug: /collection
+permalink: /collection/
+items:
+  - title: Collection item
+    image:
+      src: /assets/img/collection/example.jpg
+      alt: A camera
+    description: A short description of the item.
+---
+
+This is an optional introduction.
+```
+
+#### Work page
+
+Create `work.md` with the `work` layout. The `variant` can be `timeline`
+(the default) or `editorial`:
+
+```yml
+---
+layout: work
+title: Work
+slug: /work
+permalink: /work/
+variant: timeline
+sections:
+  - title: Work
+    items:
+      - date_from: "2023"
+        date_to: Now
+        title: Example project
+        description: A short description of the project.
+        image:
+          src: /assets/img/work/example-project/image.jpg
+          alt: Example project
+        link:
+          label: Read more
+          url: /work/example-project/
+---
+
+A selection of things I have built.
+```
+
+Dates render as a range when both `date_from` and `date_to` are present, or
+as a single date when only one is set. Links and images are optional. An image
+is rendered only when `image.src` is supplied, using a 16:9 timeline or 4:3
+editorial frame. Group each project's images under `assets/img/work/<project-slug>/`.
+
+When `link` is supplied, its anchor covers the entire item. Items without `link` remain
+noninteractive. Store linked detail pages as regular Markdown pages under
+`work/`:
+
+```md
+---
+layout: post
+title: Example project
+permalink: /work/example-project/
+---
+
+Detailed project content.
+```
+
+This generates `/work/example-project/` without additional `_config.yml`
+setup. Work details use the `post` layout without appearing in the Blog
+listing or feed.
+
 #### Blog page
 
 ```yml
@@ -149,6 +226,27 @@ This is an example of a "Blog" page, displaying a list of posts.
 
 Your website is ready!
 
+### Migrating from Bay 1.x
+
+Bay 2.0 replaces the former `work` layout with `collection` and moves the example
+page from `/work/` to `/collection/`. Update existing pages from
+`layout: work` to `layout: collection`, change their route if needed, and move
+their images from `assets/img/work/` to `assets/img/collection/`.
+
+The `work` layout now owns `/work/` and uses the section-based schema shown
+above. The example site exposes both variants alongside the collection:
+
+```yml
+header:
+  pages:
+    - name: Collection
+      slug: /collection/
+    - name: Work (Timeline)
+      slug: /work/
+    - name: Work (Editorial)
+      slug: /work-editorial/
+```
+
 
 ### GitHub Pages
 

data/_includes/foot.html

@@ -1,2 +1,2 @@
-<script type="text/javascript" src="{{ "/assets/js/vendor/cash-4.1.5.min.js" | absolute_url }}"></script>
-<script type="text/javascript" src="{{ "/assets/js/site.js" | absolute_url }}"></script>
+<script type="text/javascript" src="{{ "/assets/js/vendor/cash-4.1.5.min.js" | relative_url }}"></script>
+<script type="text/javascript" src="{{ "/assets/js/site.js" | relative_url }}"></script>

data/_includes/footer.html

@@ -1,15 +1,16 @@
 <footer class="site-footer">
   <div class="wrapper">
-    <div class="footer-col-wrapper">
-      <div class="footer-col footer-col-1">
-        <h4>CONTACT</h4>
+    <div class="site-footer__wrapper">
+      <div class="site-footer__column site-footer__column--contact">
+        <h4 class="site-footer__heading">CONTACT</h4>
 
-        <div class="social-links">
+        <div class="site-footer__links site-footer__links--contact">
           {% for contact in site.footer.contact %}
-            <div class="social-link contact-links">
+            <div class="site-footer__item">
 
-              {% assign contact_icon_path = "/assets/img/icons/" | append: contact.type | downcase | append: ".png" | absolute_url %}
+              {% assign contact_icon_path = "/assets/img/icons/" | append: contact.type | downcase | append: ".png" | relative_url %}
               <img
+                class="site-footer__icon"
                 src="{{ contact_icon_path }}"
                 alt="{{ contact.type }}"
               />
@@ -29,18 +30,18 @@
                     data-resu="{{ reversed_user }}"
                     data-eman-niamod="{{ reversed_domain_name }}"
                     data-dlt-niamod="{{ reversed_domain_tld }}"
-                    id="{{ contact.type }}-link"
-                    class="link email-link-cloaked"
+                    data-js="email-link-cloaked"
+                    class="link site-footer__link"
                   >
                     {{- contact.name -}}
                   </span>
                 {% else %}
-                  <a href="mailto:{{ contact.value }}" id="{{ contact.type }}-link">
+                  <a class="site-footer__link" href="mailto:{{ contact.value }}">
                     {{- contact.value -}}
                   </a>
                 {% endif %}
               {% else %}
-                <a href="{{ contact.link }}" id="{{ contact.type }}-link">
+                <a class="site-footer__link" href="{{ contact.link }}"{% if contact.type == "wechat" %} data-js="wechat-link"{% endif %}>
                   {%- if contact.value and contact.value != "" and contact.value != nil -%}
                     {{ contact.value }}
                   {%- else -%}
@@ -54,20 +55,21 @@
         </div>
       </div>
 
-      <div class="footer-col footer-col-2">
+      <div class="site-footer__column site-footer__column--follow">
         {% if site.footer.follow and site.footer.follow.size > 0 %}
-          <h4>FOLLOW</h4>
+          <h4 class="site-footer__heading">FOLLOW</h4>
 
-          <div class="social-links follow-links">
+          <div class="site-footer__links site-footer__links--follow">
             {% for follow in site.footer.follow %}
-              <div class="social-link">
+              <div class="site-footer__item">
 
-                {% assign follow_icon_path = "/assets/img/icons/" | append: follow.name | downcase | append: ".png" | absolute_url %}
+                {% assign follow_icon_path = "/assets/img/icons/" | append: follow.name | downcase | append: ".png" | relative_url %}
                 <img
+                  class="site-footer__icon"
                   src="{{ follow_icon_path }}"
                   alt="{{ follow.name | downcase }}"
                 />
-                <a href="{{ follow.link }}" target="_blank" rel="noopener noreferrer">
+                <a class="site-footer__link" href="{{ follow.link }}" target="_blank" rel="noopener noreferrer">
                   {%- if follow.value and follow.value != "" and follow.value != nil -%}
                     {{ follow.value }}
                   {%- else -%}
@@ -82,9 +84,9 @@
       </div>
 
       {% if site.footer.show_powered_by == true %}
-        <div class="footer-col footer-col-3 powered-by">
+        <div class="site-footer__column site-footer__column--meta site-footer__powered-by">
           <p>
-            powered by <a href="https://github.com/eliottvincent/bay" target="_blank" rel="noopener noreferrer">Bay</a> | <span id="year"></span>
+            powered by <a href="https://github.com/eliottvincent/bay" target="_blank" rel="noopener noreferrer">Bay</a> | <span data-js="footer-year"></span>
           </p>
         </div>
       {% endif %}

data/_includes/head.html

@@ -60,9 +60,9 @@
     <meta property="twitter:site" content="{{ twitter_username }}"/>
   {% endif %}
 
-  <link rel="stylesheet" href="{{ "/assets/css/main.css" | absolute_url }}"/>
+  <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}"/>
   <link rel="canonical" href="{{ page_url }}"/>
-  <link rel="shortcut icon" href="{{ "/favicon.ico" | absolute_url }}" type="image/x-icon"/>
+  <link rel="shortcut icon" href="{{ "/favicon.ico" | relative_url }}" type="image/x-icon"/>
 
   <!-- Google Analytics -->
   <script>

data/_includes/header.html

@@ -1,21 +1,21 @@
 <header class="site-header">
   <div class="wrapper">
-    <a class="site-title" href="{{ "" | prepend: site.baseurl | prepend: site.url }}/">
-      <img src="{{ "/assets/img/title.png" | absolute_url }}" alt="{{ site.title }}" />
+    <a class="site-header__title" href="{{ "/" | relative_url }}">
+      <img src="{{ "/assets/img/title.png" | relative_url }}" alt="{{ site.title }}" />
     </a>
 
     <nav class="site-nav">
-      <a href="#" class="menu-icon"></a>
+      <a href="#" class="site-nav__toggle" data-js="menu-toggle" aria-label="Toggle navigation"></a>
 
-      <div class="menu">
+      <div class="site-nav__menu" data-js="menu">
         {% for page in site.header.pages %}
           {% if page.slug and page.slug != "" and page.slug != nil %}
             {% assign page_link = page.slug %}
           {% else %}
             {% assign page_link = "/" | append: page.name | downcase %}
           {% endif %}
-          {% assign page_link = page_link | absolute_url %}
-          <a class="page-link" href="{{ page_link }}">
+          {% assign page_link = page_link | relative_url %}
+          <a class="site-nav__link" href="{{ page_link }}">
             {{- page.name -}}
           </a>
         {% endfor %}

data/_includes/helpers/resolve-url.html

@@ -0,0 +1,8 @@
+{%- assign resolved_url = include.url -%}
+{%- assign resolved_url_prefix = resolved_url | slice: 0, 2 -%}
+{%- assign resolved_url_anchor = resolved_url | slice: 0, 1 -%}
+{%- if resolved_url contains "://" or resolved_url_prefix == "//" or resolved_url_anchor == "#" or resolved_url contains "mailto:" or resolved_url contains "tel:" or resolved_url contains "data:" -%}
+  {{- resolved_url -}}
+{%- else -%}
+  {{- resolved_url | relative_url -}}
+{%- endif -%}

data/_includes/wechat-widget.html

@@ -6,11 +6,15 @@
 {% endfor %}
 
 {% if wechat_username %}
-  <div id="wechat-widget">
+  <div class="wechat-widget" data-js="wechat-widget">
     <p>
       Find me on WeChat with the ID <strong>{{ wechat_username }}</strong>, or scan my QR code:
     </p>
 
-    <img src="{{ "/assets/img/wechat-qr-code.png" | absolute_url }}" alt="QR code" id="qr-code" />
+    <img
+      class="wechat-widget__qr-code"
+      src="{{ "/assets/img/wechat-qr-code.png" | relative_url }}"
+      alt="QR code"
+    />
   </div>
 {% endif %}

data/_includes/work/editorial.html

@@ -0,0 +1,46 @@
+{% for section in include.sections %}
+  <section class="work__section">
+    <h2 class="work__section-heading">{{ section.title | escape }}</h2>
+
+    {% for item in section.items %}
+      <article class="work__item{% if item.image.src %} work__item--has-image{% endif %}{% if item.link %} work__item--linked{% endif %}">
+        <div class="work__meta">
+          <h3 class="work__title">{{ item.title | escape }}</h3>
+          <p class="work__description">{{ item.description | escape }}</p>
+
+          {% if item.date_from or item.date_to or item.link %}
+            <div class="work__footer">
+              {% if item.date_from and item.date_to %}
+                <span class="work__date">{{ item.date_from | escape }} – {{ item.date_to | escape }}</span>
+              {% elsif item.date_from %}
+                <span class="work__date">{{ item.date_from | escape }}</span>
+              {% elsif item.date_to %}
+                <span class="work__date">{{ item.date_to | escape }}</span>
+              {% endif %}
+
+              {% if item.link %}
+                {% if item.date_from or item.date_to %}
+                  <span class="work__footer-dot" aria-hidden="true"></span>
+                {% endif %}
+                {% capture work_link_url %}{% include helpers/resolve-url.html url=item.link.url %}{% endcapture %}
+                <a class="work__link" href="{{ work_link_url | strip | escape }}">
+                  {{ item.link.label | escape }} <span class="work__link-arrow" aria-hidden="true">→</span>
+                </a>
+              {% endif %}
+            </div>
+          {% endif %}
+        </div>
+
+        {% if item.image.src %}
+          {% capture work_image_url %}{% include helpers/resolve-url.html url=item.image.src %}{% endcapture %}
+          <div class="work__image">
+            <img
+              src="{{ work_image_url | strip | escape }}"
+              alt="{{ item.image.alt | default: item.title | escape }}"
+            />
+          </div>
+        {% endif %}
+      </article>
+    {% endfor %}
+  </section>
+{% endfor %}

data/_includes/work/timeline.html

@@ -0,0 +1,41 @@
+{% for section in include.sections %}
+  <section class="work__section">
+    <h2 class="work__section-heading">{{ section.title | escape }}</h2>
+
+    {% for item in section.items %}
+      <article class="work__item{% if item.link %} work__item--linked{% endif %}">
+        <div class="work__date">
+          {% if item.date_from and item.date_to %}
+            {{ item.date_from | escape }} – {{ item.date_to | escape }}
+          {% elsif item.date_from %}
+            {{ item.date_from | escape }}
+          {% elsif item.date_to %}
+            {{ item.date_to | escape }}
+          {% endif %}
+        </div>
+
+        <div class="work__body">
+          <h3 class="work__title">{{ item.title | escape }}</h3>
+          <p class="work__description">{{ item.description | escape }}</p>
+
+          {% if item.link %}
+            {% capture work_link_url %}{% include helpers/resolve-url.html url=item.link.url %}{% endcapture %}
+            <a class="work__link" href="{{ work_link_url | strip | escape }}">
+              {{ item.link.label | escape }} <span class="work__link-arrow" aria-hidden="true">→</span>
+            </a>
+          {% endif %}
+
+          {% if item.image.src %}
+            {% capture work_image_url %}{% include helpers/resolve-url.html url=item.image.src %}{% endcapture %}
+            <div class="work__image">
+              <img
+                src="{{ work_image_url | strip | escape }}"
+                alt="{{ item.image.alt | default: item.title | escape }}"
+              />
+            </div>
+          {% endif %}
+        </div>
+      </article>
+    {% endfor %}
+  </section>
+{% endfor %}

data/_layouts/blog.html

@@ -11,11 +11,11 @@
           <h1 class="page-heading">{{ page.title }}</h1>
           {{ content }}
 
-          <p class="blog-post-list">
+          <p class="blog__post-list">
             {% for post in site.posts %}
               {% if post.draft != true %}
-                <span class="blog-post-date">{{ post.date | date: "%-m/%-d/%y" }}</span>
-                <a href="{{ post.url | replace:".html","" | prepend: site.baseurl }}" class="blog-post-title">
+                <span class="blog__post-date">{{ post.date | date: "%-m/%-d/%y" }}</span>
+                <a href="{{ post.url | replace:".html","" | prepend: site.baseurl }}" class="blog__post-title">
                   {{- post.title -}}
                 </a>
                 <br />

data/_layouts/collection.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  {% include head.html %}
+
+  <body>
+    {% include header.html %}
+
+    <div class="page-content">
+      <div class="wrapper">
+        <div class="collection">
+          <h1 class="page-heading">{{ page.title }}</h1>
+          {{ content }}
+
+          {% for item in page.items %}
+          <div class="collection__item">
+            {% capture collection_image_url %}{% include helpers/resolve-url.html url=item.image.src %}{% endcapture %}
+            <img
+              src="{{ collection_image_url | strip | escape }}"
+              alt="{{ item.image.alt }}"
+              class="collection__image"
+            />
+            <span class="collection__text">
+              <strong>{{ item.title }}</strong>
+              &mdash;
+              {{ item.description }}
+            </span>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+
+    {% include footer.html %}
+    {% include foot.html %}
+  </body>
+</html>

data/_layouts/home.html

@@ -8,10 +8,11 @@
     <div class="page-content">
       <div class="wrapper">
         <div class="home">
+          {% capture profile_image_url %}{% include helpers/resolve-url.html url=page.profile_picture.src %}{% endcapture %}
           <img
-            src="{{ page.profile_picture.src | absolute_url }}"
+            src="{{ profile_image_url | strip | escape }}"
             alt="{{ page.profile_picture.alt }}"
-            class="profile-pic"
+            class="home__profile-image"
           />
 
           {{ content }}

data/_layouts/post.html

@@ -9,13 +9,13 @@
       <div class="wrapper">
         <div class="post">
 
-          <header class="post-header">
+          <header class="post__header">
 
             {% if page.draft %}
               {% include draft-banner.html %}
             {% endif %}
 
-            <h1 class="post-title">
+            <h1 class="post__title">
             {% if page.headline_formatted_title %}
               {{ page.headline_formatted_title | newline_to_br }}
             {% else %}
@@ -23,12 +23,23 @@
             {% endif %}
             </h1>
 
-            {% if page.subtitle %}<h1 class="post-subtitle">{{ page.subtitle }}</h1>{% endif %}
-            <p class="post-meta"><span class="post-date">{{ page.date | date: "%B %-d, %Y" }}
-            </span>{% if page.author %} • {{ page.author }}{% endif %}{% if page.meta %} • {{ page.meta }}{% endif %}</p>
+            {% if page.subtitle %}<h1 class="post__subtitle">{{ page.subtitle }}</h1>{% endif %}
+            {% if page.date or page.author or page.meta %}
+              <p class="post__meta">
+                {% if page.date %}
+                  <span class="post__date">{{ page.date | date: "%B %-d, %Y" }}</span>
+                {% endif %}
+                {% if page.author %}
+                  {% if page.date %} • {% endif %}{{ page.author }}
+                {% endif %}
+                {% if page.meta %}
+                  {% if page.date or page.author %} • {% endif %}{{ page.meta }}
+                {% endif %}
+              </p>
+            {% endif %}
           </header>
 
-          <article class="post-content">
+          <article class="post__content">
             {{ content }}
           </article>
 

data/_layouts/work.html

@@ -7,25 +7,25 @@
 
     <div class="page-content">
       <div class="wrapper">
-        <div class="work">
+        {% assign work_variant = page.variant | default: "timeline" %}
+        {% unless work_variant == "editorial" %}
+          {% assign work_variant = "timeline" %}
+        {% endunless %}
+
+        <main class="work work--{{ work_variant }}">
           <h1 class="page-heading">{{ page.title }}</h1>
-          {{ content }}
 
-          {% for item in page.items %}
-          <div class="work-item">
-            <img
-              src="{{ item.image.src | absolute_url }}"
-              alt="{{ item.image.alt }}"
-              class="work-bubble"
-            />
-            <span class="work-text">
-              <strong>{{ item.title }}</strong>
-              &mdash;
-              {{ item.description }}
-            </span>
-          </div>
-          {% endfor %}
-        </div>
+          {% assign intro = content | strip %}
+          {% unless intro == empty %}
+            <div class="work__intro">{{ content }}</div>
+          {% endunless %}
+
+          {% if work_variant == "editorial" %}
+            {% include work/editorial.html sections=page.sections %}
+          {% else %}
+            {% include work/timeline.html sections=page.sections %}
+          {% endif %}
+        </main>
       </div>
     </div>
 

data/_sass/_base.scss

@@ -104,7 +104,7 @@ h4,
 h5,
 h6 {
   font-weight: 300;
-  font-family: "Futura", sans-serif;
+  font-family: variables.$heading-font-family;
 }
 
 h4 {

data/_sass/_blog.scss

@@ -1,8 +1,8 @@
 @use "variables" as variables;
 @use "mixins" as mixins;
 
-.blog-post-list {
-  .blog-post-date {
+.blog__post-list {
+  .blog__post-date {
     width: 6em;
     color: #777;
     display: block;
@@ -17,7 +17,7 @@
     }
   }
 
-  .blog-post-title {
+  .blog__post-title {
     font-size: 100%;
     letter-spacing: normal;
   }

data/_sass/_collection.scss

@@ -0,0 +1,12 @@
+.collection__item {
+  clear: both;
+  overflow: hidden;
+  padding-bottom: 3em;
+}
+
+.collection__image {
+  float: left;
+  padding-right: 20px;
+  width: 100px;
+  height: 100px;
+}