bay_jekyll_theme 1.2.4 → 2.0.0

data/_sass/_layout.scss

@@ -18,7 +18,7 @@
   }
 }
 
-.site-title {
+.site-header__title {
   font-size: 26px;
   line-height: 56px;
   letter-spacing: -1px;
@@ -43,11 +43,11 @@
   line-height: 56px;
   background-color: variables.$color-background;
 
-  .menu-icon {
+  &__toggle {
     display: none;
   }
 
-  .page-link {
+  &__link {
     color: variables.$color-text;
     line-height: variables.$base-line-height;
 
@@ -66,7 +66,7 @@
     border-radius: 5px;
     text-align: right;
 
-    .menu-icon {
+    .site-nav__toggle {
       display: block;
       float: right;
       border-radius: 5px;
@@ -80,7 +80,7 @@
       background-size: 26px 26px;
     }
 
-    .menu {
+    .site-nav__menu {
       clear: both;
       display: none;
       background-color: variables.$color-background;
@@ -88,7 +88,7 @@
       padding-bottom: 5px;
     }
 
-    .page-link {
+    .site-nav__link {
       font-size: 16px;
       display: block;
       padding: 6px 16px;
@@ -108,18 +108,7 @@
   }
 }
 
-.footer-heading {
-  font-size: 18px;
-  margin-bottom: calc(variables.$spacing-unit / 2);
-}
-
-.contact-list,
-.social-media-list {
-  list-style: none;
-  margin-left: 0;
-}
-
-.footer-col-wrapper {
+.site-footer__wrapper {
   font-size: 15px;
   color: variables.$color-grey;
   margin-left: calc(-1 * variables.$spacing-unit / 2);
@@ -127,36 +116,36 @@
   @extend %clearfix;
 }
 
-.footer-col {
+.site-footer__column {
   float: left;
   margin-bottom: calc(variables.$spacing-unit / 2);
   padding-left: calc(variables.$spacing-unit / 2);
 }
 
-.footer-col-1,
-.footer-col-2,
-.footer-col-3 {
+.site-footer__column--contact,
+.site-footer__column--follow,
+.site-footer__column--meta {
   width: -webkit-calc(33% - (#{variables.$spacing-unit} / 2));
   width: calc(33% - (variables.$spacing-unit / 2));
 }
 
-.follow-links > .social-link {
+.site-footer__links--follow > .site-footer__item {
   flex: 0 50%;
 }
 
-.powered-by {
+.site-footer__powered-by {
   text-align: end;
   font-size: 13px !important;
   color: variables.$color-grey;
 }
 
 @include mixins.media-query(variables.$on-mobile) {
-  .footer-col {
+  .site-footer__column {
     float: none;
     width: 100%;
   }
 
-  .powered-by {
+  .site-footer__powered-by {
     text-align: start;
   }
 }

data/_sass/_mixins.scss

@@ -2,4 +2,10 @@
   @media screen and (max-width: $device) {
     @content;
   }
+}
+
+@mixin image-frame {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  overflow: hidden;
 }

data/_sass/_not_found.scss

@@ -1,12 +1,12 @@
-.not-found-container {
+.not-found {
   margin: 10px auto;
   max-width: 600px;
   text-align: center;
-}
 
-h1.not-found-title {
-  margin: 30px 0;
-  font-size: 4em;
-  line-height: 1;
-  letter-spacing: -1px;
+  &__title {
+    margin: 30px 0;
+    font-size: 4em;
+    line-height: 1;
+    letter-spacing: -1px;
+  }
 }

data/_sass/_post.scss

@@ -1,23 +1,23 @@
 @use "variables" as variables;
 @use "mixins" as mixins;
 
-.post-header {
+.post__header {
   margin-bottom: variables.$spacing-unit;
 }
 
-.post-title {
+.post__title {
   font-size: 40px;
   letter-spacing: -1px;
   line-height: 1.2;
 
-  font-family: variables.$base-font-family;
+  font-family: variables.$heading-font-family;
 
   @include mixins.media-query(variables.$on-mobile) {
     font-size: 34px;
   }
 }
 
-.post-subtitle {
+.post__subtitle {
   font-size: 26px;
   letter-spacing: -1px;
   line-height: 1;
@@ -32,12 +32,12 @@
   }
 }
 
-.post-meta .post-date {
+.post__meta .post__date {
   text-transform: uppercase;
   font-size: 120%;
 }
 
-.post-content {
+.post__content {
   margin-bottom: variables.$spacing-unit;
   width: 100%;
   h2 {
@@ -65,18 +65,17 @@
   }
 }
 
-.post-pic {
-  border: #999 1px solid;
-  border-radius: 4px;
+.post__image {
+  @include mixins.image-frame;
 }
 
 .magnify {
   cursor: zoom-in;
 }
 
-.post-languages {
+.post__languages {
   font-size: 13px;
-  font-family: Helvetica, sans-serif;
+  font-family: variables.$base-font-family;
   margin-top: 30px;
   margin-bottom: 20px;
 
@@ -97,7 +96,7 @@ div.footnotes {
   text-align: center;
   padding: 1em;
   margin-bottom: 2em;
-  font-family: Helvetica, sans-serif;
+  font-family: variables.$base-font-family;
 
   border-radius: 5px;
 

data/_sass/_site.scss

@@ -1,11 +1,11 @@
 @use "variables" as variables;
 @use "mixins" as mixins;
 
-.profile-pic {
+.home__profile-image {
+  @include mixins.image-frame;
+
   float: right;
   width: 202px;
-  border: #ccc 1px solid;
-  border-radius: 3px;
   margin-left: 20px;
 
   @include mixins.media-query(variables.$on-mobile) {
@@ -15,20 +15,20 @@
   }
 }
 
-.footer-col {
+.site-footer__column {
   font-size: 12px;
 
-  h4 {
+  .site-footer__heading {
     margin-bottom: 0;
     margin-top: 0;
     line-height: 30px;
   }
 
-  .social-links {
+  .site-footer__links {
     display: flex;
     flex-wrap: wrap;
 
-    .social-link {
+    .site-footer__item {
       display: flex;
       width: 100%;
       align-items: flex-start;
@@ -36,13 +36,12 @@
       margin-top: 6.5px;
       margin-bottom: 10px;
 
-      img {
+      .site-footer__icon {
         width: 16px;
         height: 16px;
       }
 
-      span,
-      a {
+      .site-footer__link {
         margin-left: 6px;
         word-break: break-all;
       }
@@ -55,11 +54,12 @@
   }
 }
 
-#wechat-widget {
+.wechat-widget {
   display: none;
   position: absolute;
   background: #fff;
   border: #ddd 1px solid;
+  border-radius: 4px;
   box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.25);
 
   padding: 24px;
@@ -68,13 +68,13 @@
   p {
     font-size: 11px;
     line-height: 16px;
-    font-family: Helvetica, sans-serif;
+    font-family: variables.$base-font-family;
     width: 170px;
     margin: 0 auto;
     margin-bottom: 14px;
   }
 
-  #qr-code {
+  &__qr-code {
     width: 160px;
     height: 160px;
     border: none;

data/_sass/_variables.scss

@@ -2,7 +2,8 @@
 
 $base-url: "" !default;
 
-$base-font-family: Charter, Georgia, Helvetica, Arial, sans-serif;
+$base-font-family: "Liberata", Georgia, "Liberation Serif", Helvetica, Arial, sans-serif;
+$heading-font-family: "Josefin Sans", "Futura", sans-serif;
 $base-font-size: 14px;
 $small-font-size: $base-font-size * 0.875;
 $base-line-height: 1.7;

data/_sass/_work.scss

@@ -1,12 +1,236 @@
-.work-item {
-  clear: both;
-  overflow: hidden;
-  padding-bottom: 3em;
+@use "variables" as variables;
+@use "mixins" as mixins;
+
+.work {
+  &__intro {
+    color: variables.$color-text;
+    margin-bottom: calc(variables.$spacing-unit * 1.5);
+
+    p {
+      margin-bottom: 10px;
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__section {
+    margin-bottom: calc(variables.$spacing-unit * 2);
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__section-heading {
+    border-bottom: 1px solid variables.$color-grey-light;
+    color: variables.$color-grey-dark;
+    font-family: variables.$heading-font-family;
+    font-size: 11px;
+    letter-spacing: 0.18em;
+    margin-bottom: variables.$spacing-unit;
+    padding-bottom: 8px;
+    text-transform: uppercase;
+  }
+
+  &__date {
+    color: variables.$color-grey;
+    font-family: variables.$heading-font-family;
+    font-size: variables.$small-font-size;
+    letter-spacing: normal;
+    line-height: 1.9;
+    text-transform: none;
+  }
+
+  &__title {
+    color: variables.$color-text;
+    display: block;
+    font-family: variables.$heading-font-family;
+    font-size: 15.5px;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+  }
+
+  &__description {
+    color: variables.$color-grey-dark;
+    margin-bottom: 14px;
+  }
+
+  &__image {
+    @include mixins.image-frame;
+
+    background-color: variables.$color-background;
+
+    img {
+      display: block;
+      height: 100%;
+      object-fit: cover;
+      width: 100%;
+    }
+  }
+
+  &__item--linked {
+    cursor: pointer;
+    position: relative;
+  }
+
+  &__link {
+    color: variables.$color-brand;
+    font-family: variables.$base-font-family;
+    font-size: 12.5px;
+    letter-spacing: 0.03em;
+    text-transform: none;
+
+    &:hover {
+      color: variables.$color-brand;
+    }
+  }
+
+  &__link-arrow {
+    display: inline-block;
+    transition: transform 0.2s ease;
+  }
+
+  &__link::after {
+    content: "";
+    inset: 0;
+    position: absolute;
+  }
+
+  &__link:focus-visible {
+    outline: none;
+
+    &::after {
+      border-radius: 4px;
+      outline: 2px solid variables.$color-brand;
+      outline-offset: 3px;
+    }
+  }
 }
 
-.work-bubble {
-  float: left;
-  padding-right: 20px;
-  width: 100px;
-  height: 100px;
+.work--timeline {
+  .work__item {
+    border-bottom: 1px solid variables.$color-grey-light;
+    display: grid;
+    gap: calc(variables.$spacing-unit * 0.8);
+    grid-template-columns: 90px 1fr;
+    margin-bottom: calc(variables.$spacing-unit * 1.5);
+    padding-bottom: calc(variables.$spacing-unit * 1.5);
+
+    &:last-child {
+      border-bottom: 0;
+      margin-bottom: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  .work__date {
+    padding-top: 2px;
+  }
+
+  .work__title {
+    margin-bottom: 4px;
+  }
+
+  .work__image {
+    aspect-ratio: 16 / 9;
+    margin-top: 18px;
+  }
+}
+
+.work--editorial {
+  .work__section-heading {
+    border-bottom: 0;
+    margin-bottom: calc(variables.$spacing-unit * 1.2);
+    padding-bottom: 0;
+  }
+
+  .work__item {
+    display: grid;
+    gap: calc(variables.$spacing-unit * 0.8);
+    grid-template-columns: 1fr;
+    margin-bottom: calc(variables.$spacing-unit * 1.8);
+    padding-top: variables.$spacing-unit;
+    position: relative;
+
+    &--has-image {
+      grid-template-columns: 1fr 1.6fr;
+    }
+
+    &::before {
+      background: variables.$color-text;
+      content: "";
+      height: 1px;
+      left: 0;
+      position: absolute;
+      top: variables.$spacing-unit;
+      width: 24px;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .work__meta {
+    padding-top: 16px;
+  }
+
+  .work__title {
+    margin-bottom: 8px;
+  }
+
+  .work__footer {
+    align-items: center;
+    color: variables.$color-grey;
+    display: flex;
+    font-family: variables.$heading-font-family;
+    font-size: 10.5px;
+    gap: 10px;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+
+    .work__footer-dot {
+      background: variables.$color-grey;
+      border-radius: 50%;
+      display: inline-block;
+      height: 3px;
+      width: 3px;
+    }
+
+  }
+
+  .work__image {
+    aspect-ratio: 4 / 3;
+  }
+}
+
+.work__item--linked:hover .work__link,
+.work__item--linked:focus-within .work__link {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.work__item--linked:hover .work__link-arrow,
+.work__item--linked:focus-within .work__link-arrow {
+  transform: translateX(3px);
+}
+
+@media screen and (max-width: 620px) {
+  .work--timeline,
+  .work--editorial {
+    .work__item,
+    .work__item--has-image {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .work--timeline .work__date {
+    margin-bottom: 4px;
+  }
+
+  .work--editorial .work__item::before {
+    width: 18px;
+  }
 }

data/assets/css/main.scss

@@ -13,6 +13,7 @@
 @use "base";
 @use "layout";
 @use "site";
+@use "collection";
 @use "work";
 @use "blog";
 @use "post";

data/assets/js/site.js

@@ -1,8 +1,9 @@
 /**
  * Menu
  */
-$("a.menu-icon").on("click", function(event) {
-  var w = $(".menu");
+$('[data-js="menu-toggle"]').on("click", function(event) {
+  event.preventDefault();
+  var w = $('[data-js="menu"]');
 
   w.css({
     display: (w.css("display") === "none")
@@ -15,14 +16,14 @@ $("a.menu-icon").on("click", function(event) {
  * Footer year
  */
 $(document).ready(function() {
-  $("#year").text(new Date().getFullYear());
+  $('[data-js="footer-year"]').text(new Date().getFullYear());
 });
 
 /**
  * Footer email
  */
 $(document).ready(function() {
-  $(".email-link-cloaked").on("click", function(event) {
+  $('[data-js="email-link-cloaked"]').on("click", function(event) {
     const _link = event.target;
 
     const _user = reverseString(_link.getAttribute("data-resu"));
@@ -44,7 +45,7 @@ function reverseString(str) {
  * Moves WeChat widget
  */
 function moveWidget(event) {
-  var w = $("#wechat-widget");
+  var w = $('[data-js="wechat-widget"]');
 
   w.css({
     left: event.pageX - 25,
@@ -52,16 +53,16 @@ function moveWidget(event) {
   });
 }
 
-$("a#wechat-link").on("mouseenter", function(event) {
-  $("#wechat-widget").css({ display: "block" });
+$('[data-js="wechat-link"]').on("mouseenter", function(event) {
+  $('[data-js="wechat-widget"]').css({ display: "block" });
 
   moveWidget(event);
 });
 
-$("a#wechat-link").on("mousemove", function(event) {
+$('[data-js="wechat-link"]').on("mousemove", function(event) {
   moveWidget(event);
 });
 
-$("a#wechat-link").on("mouseleave", function(event) {
-  $("#wechat-widget").css({ display: "none" });
+$('[data-js="wechat-link"]').on("mouseleave", function(event) {
+  $('[data-js="wechat-widget"]').css({ display: "none" });
 });

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bay_jekyll_theme
 version: !ruby/object:Gem::Version
-  version: 1.2.4
+  version: 2.0.0
 platform: ruby
 authors:
 - Eliott Vincent
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-04-19 00:00:00.000000000 Z
+date: 2026-11-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -53,14 +53,19 @@ files:
 - _includes/footer.html
 - _includes/head.html
 - _includes/header.html
+- _includes/helpers/resolve-url.html
 - _includes/wechat-widget.html
+- _includes/work/editorial.html
+- _includes/work/timeline.html
 - _layouts/blog.html
+- _layouts/collection.html
 - _layouts/default.html
 - _layouts/home.html
 - _layouts/post.html
 - _layouts/work.html
 - _sass/_base.scss
 - _sass/_blog.scss
+- _sass/_collection.scss
 - _sass/_extends.scss
 - _sass/_layout.scss
 - _sass/_mixins.scss
@@ -70,7 +75,9 @@ files:
 - _sass/_variables.scss
 - _sass/_work.scss
 - assets/css/main.scss
-- assets/img/content/post-example/Banner.jpg
+- assets/img/collection/sand.png
+- assets/img/collection/water.png
+- assets/img/content/post-example/banner.jpg
 - assets/img/icons/dribbble.png
 - assets/img/icons/email.png
 - assets/img/icons/facebook.png
@@ -86,8 +93,10 @@ files:
 - assets/img/profile-pic.jpg
 - assets/img/title.png
 - assets/img/wechat-qr-code.png
-- assets/img/work/sand.png
-- assets/img/work/water.png
+- assets/img/work/experiment-1/banner.jpg
+- assets/img/work/side-project-1/banner.jpg
+- assets/img/work/work-item-1/banner.jpg
+- assets/img/work/work-item-2/banner.jpg
 - assets/js/site.js
 - assets/js/vendor/cash-4.1.5.min.js
 homepage: https://github.com/eliottvincent/bay