bay_jekyll_theme 1.1.5 → 1.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f2df31db5785443f6d7d2093070fc04dbcbe219ef9fdecb76939dab0f382daf4
-  data.tar.gz: c8b60471fea414469c49cc0372931a9a20569d9e37b46f2fb54c5db046ef3cd4
+  metadata.gz: 1377e4b38497fb091a4d61f54b3a272420a5a30a8dcda145cd1755cf88e69a0f
+  data.tar.gz: '0838ea3804661e26f81ed0dcea8079aa4c7dd75e199aa58b2623591a8daa7122'
 SHA512:
-  metadata.gz: 5a86503a1faec8f9a755beefb2e8f7387491efd4dcb2f0577aa546731cb66c8d05d235a4e079f6090b8d55b8d84b5df4b8b5b2266a6a23cd8dad75932b95a2f1
-  data.tar.gz: b8a605cf614b56a0649dced2389f9b12dc02596855588eb7cba394aaa786843e70423e90e4e46ba42cdad151644a2d967267e9759e377a9726b420029304ed58
+  metadata.gz: 4f5b69b5525a1c72ab707796f5fba4c54258f7a5557298e655eb3da4086b195f8717b9d45ad0ef5ddf8f79665967255aeede702b256d15503f74f6cf494d5993
+  data.tar.gz: 8be989554da3da372acb0afe0ce0546a33cb3ac0de621a26081e927150acbd1e2a4d3194a7f582f1a9087590596a9b36ab413f4c8e0d9c7c8de05c4491836b45

data/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to this project will be documented in this file.
 
+### [1.2.1](https://github.com/eliottvincent/bay/compare/v1.2.0...v1.2.1) (2025-01-02)
+
+### Improvements
+
+- Add slight border radius to pictures
+
+### [1.2.0](https://github.com/eliottvincent/bay/compare/v1.1.5...v1.2.0) (2025-01-02)
+
+### Features
+
+- Upgrade Jekyll and Sass
+
 ### [1.1.5](https://github.com/eliottvincent/bay/compare/v1.1.4...v1.1.5) (2024-12-10)
 
 ### Bug Fixes

data/README.md

@@ -17,7 +17,8 @@ Inspired by [dangrover.com](http://dangrover.com/). Current theme used at [eliot
     2. [Footer](#footer)
     3. [Home page](#home-page)
     4. [Blog page](#blog-page)
-5. [Development instructions](#development)
+5. [GitHub Pages](#github-pages)
+6. [Development instructions](#development)
 
 
 ### Installation
@@ -66,7 +67,7 @@ jekyll serve
 
 The website will look somewhat empty at first. That's normal. Follow the next instructions to complete the header and footer components, and the home and blog pages.
 
-### Header
+#### Header
 Open the `_config.yml` file and add the following:
 ```yml
 header:
@@ -78,7 +79,7 @@ header:
 ```
 Re-run `jekyll serve` to see the header updated.
 
-### Footer
+#### Footer
 Open the `_config.yml` file and add the following:
 ```yml
 footer:
@@ -113,7 +114,7 @@ footer:
 ```
 Re-run `jekyll serve` to see the footer updated.
 
-### Home page
+#### Home page
 Create (or edit) the `index.markdown` file and add the following:
 ```yml
 ---
@@ -124,11 +125,11 @@ profile_picture:
 ---
 
 <p>
-  Welcome to mysite!
+  Welcome to my site!
 </p>
 ```
 
-### Blog page
+#### Blog page
 Create `blog.markdown` file and add the following:
 ```yml
 ---
@@ -145,6 +146,16 @@ This is an example of a "Blog" page, displaying a list of posts.
 Your website is ready!
 
 
+### GitHub Pages
+
+You can deploy your website to GitHub Pages, but you cannot use the 1-click GitHub Pages build and deploy system. The issue is that the Bay theme relies on Jekyll 4.3+ (which uses a more modern Sass processor), whereas the GitHub Pages build system uses an older version of Jekyll.
+
+However, it's fairly easy to build and deploy your website with GitHub Actions, yet use GitHub Pages to host it.
+
+Further explanations and instructions can be found on the official [Jekyll website](https://jekyllrb.com/docs/continuous-integration/github-actions/).
+
+You can also refer to the [`.github/workflows/deploy.yml`](https://github.com/eliottvincent/bay/blob/master/.github/workflows/deploy.yml) file in this repository.
+
 ### Development
 
 #### Run development instance (with hot-reload)

data/_includes/footer.html

@@ -32,20 +32,20 @@
                     id="{{ contact.type }}-link"
                     class="link email-link-cloaked"
                   >
-                    {{ contact.name }}
+                    {{- contact.name -}}
                   </span>
                 {% else %}
                   <a href="mailto:{{ contact.value }}" id="{{ contact.type }}-link">
-                    {{ contact.value }}
+                    {{- contact.value -}}
                   </a>
                 {% endif %}
               {% else %}
                 <a href="{{ contact.link }}" id="{{ contact.type }}-link">
-                  {% if contact.value and contact.value != "" and contact.value != nil %}
+                  {%- if contact.value and contact.value != "" and contact.value != nil -%}
                     {{ contact.value }}
-                  {% else %}
+                  {%- else -%}
                     {{ contact.name }}
-                  {% endif %}
+                  {%- endif -%}
                 </a>
               {% endif %}
             </div>
@@ -68,11 +68,11 @@
                   alt="{{ follow.name | downcase }}"
                 />
                 <a href="{{ follow.link }}">
-                  {% if follow.value and follow.value != "" and follow.value != nil %}
+                  {%- if follow.value and follow.value != "" and follow.value != nil -%}
                     {{ follow.value }}
-                  {% else %}
+                  {%- else -%}
                     {{ follow.name }}
-                  {% endif %}
+                  {%- endif -%}
                 </a>
               </div>
 

data/_includes/head.html

@@ -51,13 +51,13 @@
 
   <!-- Twitter -->
   <meta property="twitter:card" content="summary_large_image"/>
-  <meta property="twitter:url" content="{{ page_url }}"/>
+  <meta property="twitter:url" content="{{ page_url }}"/>
   <meta property="twitter:title" content="{{ page_title }}"/>
   <meta property="twitter:description" content="{{ page_description }}"/>
   <meta property="twitter:image" content="{{ page_image }}"/>
   {% if twitter_username %}
-    <meta property="twitter:creator" content="{{ twitter_username }}"/>
-    <meta property="twitter:site" content="{{ twitter_username }}"/>
+    <meta property="twitter:creator" content="{{ twitter_username }}"/>
+    <meta property="twitter:site" content="{{ twitter_username }}"/>
   {% endif %}
 
   <link rel="stylesheet" href="{{ "/assets/css/main.css" | absolute_url }}"/>

data/_includes/header.html

@@ -16,7 +16,7 @@
           {% endif %}
           {% assign page_link = page_link | absolute_url %}
           <a class="page-link" href="{{ page_link }}">
-            {{ page.name }}
+            {{- page.name -}}
           </a>
         {% endfor %}
       </div>

data/_layouts/blog.html

@@ -13,16 +13,13 @@
 
           <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">
-                  {{ post.title }}
+                  {{- post.title -}}
                 </a>
                 <br />
-
               {% endif %}
-
             {% endfor %}
           </p>
         </div>
@@ -30,7 +27,6 @@
     </div>
 
     {% include footer.html %}
-
     {% include foot.html %}
   </body>
 </html>

data/_layouts/default.html

@@ -12,7 +12,6 @@
     </div>
 
     {% include footer.html %}
-    
     {% include foot.html %}
   </body>
 </html>

data/_layouts/post.html

@@ -41,7 +41,6 @@
     </div>
 
     {% include footer.html %}
-
     {% include foot.html %}
   </body>
 </html>

data/_layouts/work.html

@@ -30,7 +30,6 @@
     </div>
 
     {% include footer.html %}
-
     {% include foot.html %}
   </body>
 </html>

data/_sass/_base.scss

@@ -1,3 +1,7 @@
+@use "variables" as variables;
+@use "mixins" as mixins;
+@use "extends";
+
 /**
  * Reset some basic elements
  */
@@ -26,12 +30,12 @@ figure {
  * Basic styling
  */
 body {
-  font-family: $base-font-family;
-  font-size: $base-font-size;
-  line-height: $base-line-height;
+  font-family: variables.$base-font-family;
+  font-size: variables.$base-font-size;
+  line-height: variables.$base-line-height;
   font-weight: 300;
-  color: $text-color;
-  background-color: $background-color;
+  color: variables.$color-text;
+  background-color: variables.$color-background;
   -webkit-text-size-adjust: 100%;
 }
 
@@ -52,7 +56,7 @@ ol,
 dl,
 figure,
 %vertical-rhythm {
-  margin-bottom: $spacing-unit / 2;
+  margin-bottom: calc(variables.$spacing-unit / 2);
 }
 
 /**
@@ -72,7 +76,7 @@ figure > img {
 }
 
 figcaption {
-  font-size: $small-font-size;
+  font-size: variables.$small-font-size;
 }
 
 /**
@@ -80,7 +84,7 @@ figcaption {
  */
 ul,
 ol {
-  margin-left: $spacing-unit;
+  margin-left: variables.$spacing-unit;
 }
 
 li {
@@ -111,22 +115,22 @@ h4 {
  * Links
  */
 a {
-  color: $brand-color;
+  color: variables.$color-brand;
   text-decoration: none;
 
   &:hover {
-    color: $text-color;
+    color: variables.$color-text;
     text-decoration: underline;
   }
 }
 
 span.link {
   cursor: pointer;
-  color: $brand-color;
+  color: variables.$color-brand;
   text-decoration: none;
 
   &:hover {
-    color: $text-color;
+    color: variables.$color-text;
     text-decoration: underline;
   }
 }
@@ -142,9 +146,9 @@ strong {
  * Blockquotes
  */
 blockquote {
-  color: $grey-color;
-  border-left: 4px solid $grey-color-light;
-  padding-left: $spacing-unit / 2;
+  color: variables.$color-grey;
+  border-left: 4px solid variables.$color-grey-light;
+  padding-left: calc(variables.$spacing-unit / 2);
   font-size: 100%;
   letter-spacing: -0.5px;
   font-style: italic;
@@ -160,7 +164,7 @@ blockquote {
 pre,
 code {
   font-size: 15px;
-  border: 1px solid $grey-color-light;
+  border: 1px solid variables.$color-grey-light;
   border-radius: 3px;
   background-color: #eef;
 }
@@ -184,33 +188,21 @@ pre {
  * Wrapper
  */
 .wrapper {
-  max-width: -webkit-calc(760px - (#{$spacing-unit} * 2));
-  max-width:         calc(760px - (#{$spacing-unit} * 2));
+  position: relative;
+  max-width: -webkit-calc(760px - (#{variables.$spacing-unit} * 2));
+  max-width: calc(760px - (variables.$spacing-unit * 2));
   margin-right: auto;
   margin-left: auto;
-  padding-right: $spacing-unit;
-  padding-left: $spacing-unit;
+  padding-right: variables.$spacing-unit;
+  padding-left: variables.$spacing-unit;
 
   @extend %clearfix;
 
-  @include media-query($on-laptop) {
-    max-width: -webkit-calc(800px - (#{$spacing-unit}));
-    max-width:         calc(800px - (#{$spacing-unit}));
-    padding-right: $spacing-unit / 2;
-    padding-left: $spacing-unit / 2;
-  }
-
-  position: relative;
-}
-
-/**
- * Clearfix
- */
-%clearfix {
-  &:after {
-    content: "";
-    display: table;
-    clear: both;
+  @include mixins.media-query(variables.$on-laptop) {
+    max-width: -webkit-calc(800px - (#{variables.$spacing-unit}));
+    max-width: calc(800px - variables.$spacing-unit);
+    padding-right: calc(variables.$spacing-unit / 2);
+    padding-left: calc(variables.$spacing-unit / 2);
   }
 }
 
@@ -225,7 +217,7 @@ pre {
     vertical-align: middle;
 
     path {
-      fill: $grey-color;
+      fill: variables.$color-grey;
     }
   }
 }

data/_sass/_blog.scss

@@ -1,3 +1,6 @@
+@use "variables" as variables;
+@use "mixins" as mixins;
+
 .blog-post-list {
   .blog-post-date {
     width: 6em;
@@ -5,7 +8,7 @@
     display: block;
     float: left;
 
-    @include media-query($on-mobile) {
+    @include mixins.media-query(variables.$on-mobile) {
       display: block;
       float: none;
       color: #333;

data/_sass/_extends.scss

@@ -0,0 +1,10 @@
+/**
+ * Clearfix
+ */
+%clearfix {
+  &:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+}

data/_sass/_layout.scss

@@ -1,20 +1,21 @@
+@use "variables" as variables;
+@use "mixins" as mixins;
+@use "extends";
+
 /**
  * Site header
  */
 .site-header {
-  border-bottom: 1px solid $grey-color-light;
+  position: relative;
+  border-bottom: 1px solid variables.$color-grey-light;
   min-height: 56px;
-
   padding-top: 10px;
   padding-bottom: 10px;
 
-  @include media-query($on-mobile) {
+  @include mixins.media-query(variables.$on-mobile) {
     padding-top: 0;
     padding-bottom: 0;
   }
-
-  // Positioning context for the mobile navigation icon
-  position: relative;
 }
 
 .site-title {
@@ -29,7 +30,7 @@
 
   &,
   &:visited {
-    color: $grey-color-dark;
+    color: variables.$color-grey-dark;
   }
 }
 
@@ -40,15 +41,15 @@
   z-index: 10;
   float: right;
   line-height: 56px;
-  background-color: $background-color;
+  background-color: variables.$color-background;
 
   .menu-icon {
     display: none;
   }
 
   .page-link {
-    color: $text-color;
-    line-height: $base-line-height;
+    color: variables.$color-text;
+    line-height: variables.$base-line-height;
 
     // Gaps between nav items, but not on the first one
     &:not(:first-child) {
@@ -56,12 +57,12 @@
     }
   }
 
-  @include media-query($on-mobile) {
+  @include mixins.media-query(variables.$on-mobile) {
     position: absolute;
     top: 12px;
     right: 24px;
 
-    border: 1px solid $grey-color-light;
+    border: 1px solid variables.$color-grey-light;
     border-radius: 5px;
     text-align: right;
 
@@ -69,20 +70,20 @@
       display: block;
       float: right;
       border-radius: 5px;
-      width: 36px;
+      width: 38px;
       height: 26px;
       line-height: 0;
       padding-top: 4px;
       text-align: center;
 
-      background: $background-color url($base-url + '/assets/img/menu.png') 6px 4px no-repeat;
+      background: variables.$color-background url(variables.$base-url + "/assets/img/menu.png") 6px 4px no-repeat;
       background-size: 26px 26px;
     }
 
     .menu {
       clear: both;
       display: none;
-      background-color: $background-color;
+      background-color: variables.$color-background;
       min-width: 10em;
       padding-bottom: 5px;
     }
@@ -99,17 +100,17 @@
  * Site footer
  */
 .site-footer {
-  border-top: 1px solid $grey-color-light;
-  padding: $spacing-unit 0;
+  border-top: 1px solid variables.$color-grey-light;
+  padding: variables.$spacing-unit 0;
 
-  @include media-query($on-mobile) {
+  @include mixins.media-query(variables.$on-mobile) {
     padding-top: 10px;
   }
 }
 
 .footer-heading {
   font-size: 18px;
-  margin-bottom: $spacing-unit / 2;
+  margin-bottom: calc(variables.$spacing-unit / 2);
 }
 
 .contact-list,
@@ -120,23 +121,23 @@
 
 .footer-col-wrapper {
   font-size: 15px;
-  color: $grey-color;
-  margin-left: -$spacing-unit / 2;
+  color: variables.$color-grey;
+  margin-left: calc(-1 * variables.$spacing-unit / 2);
 
   @extend %clearfix;
 }
 
 .footer-col {
   float: left;
-  margin-bottom: $spacing-unit / 2;
-  padding-left: $spacing-unit / 2;
+  margin-bottom: calc(variables.$spacing-unit / 2);
+  padding-left: calc(variables.$spacing-unit / 2);
 }
 
 .footer-col-1,
 .footer-col-2,
 .footer-col-3 {
-  width: -webkit-calc(33% - (#{$spacing-unit} / 2));
-  width: calc(33% - (#{$spacing-unit} / 2));
+  width: -webkit-calc(33% - (#{variables.$spacing-unit} / 2));
+  width: calc(33% - (variables.$spacing-unit / 2));
 }
 
 .follow-links > .social-link {
@@ -146,10 +147,10 @@
 .powered-by {
   text-align: end;
   font-size: 13px !important;
-  color: $grey-color;
+  color: variables.$color-grey;
 }
 
-@include media-query($on-mobile) {
+@include mixins.media-query(variables.$on-mobile) {
   .footer-col {
     float: none;
     width: 100%;
@@ -164,7 +165,7 @@
  * Page content
  */
 .page-content {
-  padding: $spacing-unit 0;
+  padding: variables.$spacing-unit 0;
 }
 
 .page-heading {

data/_sass/_mixins.scss

@@ -0,0 +1,5 @@
+@mixin media-query($device) {
+  @media screen and (max-width: $device) {
+    @content;
+  }
+}

data/_sass/_post.scss

@@ -1,5 +1,8 @@
+@use "variables" as variables;
+@use "mixins" as mixins;
+
 .post-header {
-  margin-bottom: $spacing-unit;
+  margin-bottom: variables.$spacing-unit;
 }
 
 .post-title {
@@ -7,9 +10,9 @@
   letter-spacing: -1px;
   line-height: 1.2;
 
-  font-family: $base-font-family;
+  font-family: variables.$base-font-family;
 
-  @include media-query($on-mobile) {
+  @include mixins.media-query(variables.$on-mobile) {
     font-size: 34px;
   }
 }
@@ -19,12 +22,12 @@
   letter-spacing: -1px;
   line-height: 1;
   color: #777;
-  font-family: $base-font-family;
+  font-family: variables.$base-font-family;
   font-style: oblique;
   position: relative;
   top: -0.3em;
 
-  @include media-query($on-mobile) {
+  @include mixins.media-query(variables.$on-mobile) {
     font-size: 24px;
   }
 }
@@ -35,12 +38,12 @@
 }
 
 .post-content {
-  margin-bottom: $spacing-unit;
+  margin-bottom: variables.$spacing-unit;
   width: 100%;
   h2 {
     font-size: 32px;
 
-    @include media-query($on-mobile) {
+    @include mixins.media-query(variables.$on-mobile) {
       font-size: 28px;
     }
   }
@@ -48,7 +51,7 @@
   h3 {
     font-size: 26px;
 
-    @include media-query($on-mobile) {
+    @include mixins.media-query(variables.$on-mobile) {
       font-size: 22px;
     }
   }
@@ -56,7 +59,7 @@
   h4 {
     font-size: 20px;
 
-    @include media-query($on-mobile) {
+    @include mixins.media-query(variables.$on-mobile) {
       font-size: 18px;
     }
   }
@@ -64,6 +67,7 @@
 
 .post-pic {
   border: #999 1px solid;
+  border-radius: 4px;
 }
 
 .magnify {

data/_sass/_site.scss

@@ -1,10 +1,14 @@
+@use "variables" as variables;
+@use "mixins" as mixins;
+
 .profile-pic {
   float: right;
   width: 202px;
   border: #ccc 1px solid;
+  border-radius: 3px;
   margin-left: 20px;
 
-  @include media-query($on-mobile) {
+  @include mixins.media-query(variables.$on-mobile) {
     float: none;
     margin-bottom: 20px;
     margin-left: 0px;
@@ -44,7 +48,7 @@
       }
     }
 
-    @include media-query($on-mobile) {
+    @include mixins.media-query(variables.$on-mobile) {
       font-size: 14px;
       line-height: 38px;
     }

data/_sass/_variables.scss

@@ -0,0 +1,21 @@
+@use "sass:color";
+
+$base-url: "" !default;
+
+$base-font-family: Charter, Georgia, Helvetica, Arial, sans-serif;
+$base-font-size: 14px;
+$small-font-size: $base-font-size * 0.875;
+$base-line-height: 1.7;
+
+$spacing-unit: 30px;
+
+$color-text: #111;
+$color-background: #fdfdfd;
+$color-brand: #2a7ae2;
+
+$color-grey: #828282;
+$color-grey-light: color.adjust($color-grey, $lightness: 40%);
+$color-grey-dark: color.adjust($color-grey, $lightness: -25%);
+
+$on-mobile: 500px;
+$on-laptop: 800px;

data/assets/css/main.scss

@@ -1,35 +1,19 @@
 ---
-# Only the main Sass file needs front matter (the dashes are enough)
+# Only the main Sass file needs Front Matter
 ---
 
 @charset "utf-8";
 
-// Our variables
-$base-url: "{{ site.baseurl }}";
-
-$base-font-family: Charter, Georgia, Helvetica, Arial, sans-serif;
-$base-font-size: 14px;
-$small-font-size: $base-font-size * 0.875;
-$base-line-height: 1.7;
-
-$spacing-unit: 30px;
-
-$text-color: #111;
-$background-color: #fdfdfd;
-$brand-color: #2a7ae2;
-
-$grey-color: #828282;
-$grey-color-light: lighten($grey-color, 40%);
-$grey-color-dark: darken($grey-color, 25%);
-
-$on-mobile: 500px;
-$on-laptop: 800px;
-
-@mixin media-query($device) {
-  @media screen and (max-width: $device) {
-    @content;
-  }
-}
-
-// Import partials from `sass_dir` (defaults to `_sass`)
-@import "base", "layout", "site", "work", "blog", "post", "404";
+@use "variables" with (
+  $base-url: "{{ site.baseurl }}"
+);
+@use "mixins";
+@use "extends";
+
+@use "base";
+@use "layout";
+@use "site";
+@use "work";
+@use "blog";
+@use "post";
+@use "not_found";

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bay_jekyll_theme
 version: !ruby/object:Gem::Version
-  version: 1.1.5
+  version: 1.2.1
 platform: ruby
 authors:
 - Eliott Vincent
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-12-10 00:00:00.000000000 Z
+date: 2025-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -16,14 +16,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '4.0'
+        version: 4.3.4
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '4.0'
+        version: 4.3.4
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -59,12 +59,15 @@ files:
 - _layouts/home.html
 - _layouts/post.html
 - _layouts/work.html
-- _sass/_404.scss
 - _sass/_base.scss
 - _sass/_blog.scss
+- _sass/_extends.scss
 - _sass/_layout.scss
+- _sass/_mixins.scss
+- _sass/_not_found.scss
 - _sass/_post.scss
 - _sass/_site.scss
+- _sass/_variables.scss
 - _sass/_work.scss
 - assets/css/main.scss
 - assets/img/content/post-example/Banner.jpg
@@ -105,7 +108,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.3.26
+rubygems_version: 3.5.22
 signing_key:
 specification_version: 4
 summary: A simple and minimal Jekyll theme..