site: Update bulma theme from 0.11 to 1.1.0

File `_sass/_main.scss` adapted from https://github.com/chrisrhymes/bulma-clean-theme/blob/v1.1.0/_sass/_main.scss Files `_sass/variables.scss` and `_sass/classes.scss` updated comparing version of the site with/without the updates. Theme hard-coded to "light" in both `default` and `home` layout. Minimum ruby version updated from 2.7.2 to 3.2.2
Slicer · Dec 24, 2024 · 3ee3638 · 3ee3638
1 parent e487fe0
commit 3ee3638
Show file tree

Hide file tree

Showing 10 changed files with 129 additions and 80 deletions.
diff --git a/.github/workflows/build-website.yml b/.github/workflows/build-website.yml
@@ -63,7 +63,7 @@ jobs:
     - name: 💎 setup ruby
       uses: ruby/setup-ruby@401c19e14f474b54450cd3905bb8b86e2c8509cf # v1.204.0
       with:
-        ruby-version: 2.7 # can change this to 2.7 or whatever version you prefer
+        ruby-version: 3.2 # can change this to 2.7 or whatever version you prefer
 
     # See https://github.com/ouzi-dev/commit-status-updater
     - name: Update status check for deploy-download-preview to pending

diff --git a/Gemfile b/Gemfile
@@ -7,10 +7,10 @@ source "https://rubygems.org"
 #
 # This will help ensure the proper Jekyll version is running.
 # Happy Jekylling!
-gem "jekyll", "~> 3.9"
+gem "jekyll", "~> 4.3"
 # This is the default theme for new Jekyll sites. You may change this to anything you like.
 #gem "minima", "~> 2.5"
-gem "bulma-clean-theme", '0.11'
+gem "bulma-clean-theme",  '1.1.0'
 
 # If you want to use GitHub Pages, remove the "gem "jekyll"" above and
 # uncomment the line below. To upgrade, run `bundle update github-pages`.

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -1,89 +1,99 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    addressable (2.8.0)
-      public_suffix (>= 2.0.2, < 5.0)
-    bulma-clean-theme (0.11)
-      jekyll (~> 3.9)
+    addressable (2.8.7)
+      public_suffix (>= 2.0.2, < 7.0)
+    bigdecimal (3.1.8)
+    bulma-clean-theme (1.1.0)
+      jekyll (>= 4.3, < 5.0)
       jekyll-feed (~> 0.15)
       jekyll-paginate (~> 1.1)
-      jekyll-seo-tag (~> 2.6)
+      jekyll-seo-tag (~> 2.7)
       jekyll-sitemap (~> 1.4)
       kramdown-parser-gfm (~> 1.1)
     colorator (1.1.0)
-    concurrent-ruby (1.1.9)
-    em-websocket (0.5.2)
+    concurrent-ruby (1.3.4)
+    em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0.6.0)
+      http_parser.rb (~> 0)
     eventmachine (1.2.7)
-    ffi (1.15.3)
+    ffi (1.17.0)
     forwardable-extended (2.6.0)
-    http_parser.rb (0.6.0)
-    i18n (0.9.5)
+    google-protobuf (4.29.2)
+      bigdecimal
+      rake (>= 13)
+    http_parser.rb (0.8.0)
+    i18n (1.14.6)
       concurrent-ruby (~> 1.0)
-    jekyll (3.9.1)
+    jekyll (4.3.4)
       addressable (~> 2.4)
       colorator (~> 1.0)
       em-websocket (~> 0.5)
-      i18n (~> 0.7)
-      jekyll-sass-converter (~> 1.0)
+      i18n (~> 1.0)
+      jekyll-sass-converter (>= 2.0, < 4.0)
       jekyll-watch (~> 2.0)
-      kramdown (>= 1.17, < 3)
+      kramdown (~> 2.3, >= 2.3.1)
+      kramdown-parser-gfm (~> 1.0)
       liquid (~> 4.0)
-      mercenary (~> 0.3.3)
+      mercenary (>= 0.3.6, < 0.5)
       pathutil (~> 0.9)
-      rouge (>= 1.7, < 4)
+      rouge (>= 3.0, < 5.0)
       safe_yaml (~> 1.0)
-    jekyll-feed (0.15.1)
+      terminal-table (>= 1.8, < 4.0)
+      webrick (~> 1.7)
+    jekyll-feed (0.17.0)
       jekyll (>= 3.7, < 5.0)
     jekyll-paginate (1.1.0)
-    jekyll-sass-converter (1.5.2)
-      sass (~> 3.4)
-    jekyll-seo-tag (2.7.1)
+    jekyll-sass-converter (3.0.0)
+      sass-embedded (~> 1.54)
+    jekyll-seo-tag (2.8.0)
       jekyll (>= 3.8, < 5.0)
     jekyll-sitemap (1.4.0)
       jekyll (>= 3.7, < 5.0)
-    jekyll-target-blank (2.0.0)
+    jekyll-target-blank (2.0.2)
       jekyll (>= 3.0, < 5.0)
       nokogiri (~> 1.10)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
     jekyll_version_plugin (2.0.0)
-    kramdown (2.3.1)
-      rexml
+    kramdown (2.5.1)
+      rexml (>= 3.3.9)
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
-    liquid (4.0.3)
-    listen (3.6.0)
+    liquid (4.0.4)
+    listen (3.9.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    mercenary (0.3.6)
-    mini_portile2 (2.8.1)
-    nokogiri (1.14.3)
-      mini_portile2 (~> 2.8.0)
+    mercenary (0.4.0)
+    mini_portile2 (2.8.8)
+    nokogiri (1.17.2)
+      mini_portile2 (~> 2.8.2)
       racc (~> 1.4)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
-    public_suffix (4.0.6)
-    racc (1.6.2)
-    rb-fsevent (0.11.0)
-    rb-inotify (0.10.1)
+    public_suffix (6.0.1)
+    racc (1.8.1)
+    rake (13.2.1)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.11.1)
       ffi (~> 1.0)
-    rexml (3.3.9)
-    rouge (3.26.0)
+    rexml (3.4.0)
+    rouge (4.5.1)
     safe_yaml (1.0.5)
-    sass (3.7.4)
-      sass-listen (~> 4.0.0)
-    sass-listen (4.0.0)
-      rb-fsevent (~> 0.9, >= 0.9.4)
-      rb-inotify (~> 0.9, >= 0.9.7)
+    sass-embedded (1.83.0)
+      google-protobuf (~> 4.28)
+      rake (>= 13)
+    terminal-table (3.0.2)
+      unicode-display_width (>= 1.1.1, < 3)
+    unicode-display_width (2.6.0)
+    webrick (1.9.1)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  bulma-clean-theme (= 0.11)
-  jekyll (~> 3.9)
+  bulma-clean-theme (= 1.1.0)
+  jekyll (~> 4.3)
   jekyll-seo-tag
   jekyll-target-blank
   jekyll_version_plugin
@@ -92,4 +102,4 @@ DEPENDENCIES
   wdm (~> 0.1.1)
 
 BUNDLED WITH
-   2.1.4
+   2.4.10
diff --git a/_includes/toc.html b/_includes/toc.html
@@ -73,7 +73,7 @@
 {% endcapture %}{% assign tocWorkspace = '' %}
 
 <!-- _includes/toc.html -->
-<div class="contents">
+<div class="contents toc">
     <div class="menu">
         <p class="menu-label">{{ include.contents_title }}</p>
         {{ my_toc | markdownify | strip }}

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -6,7 +6,7 @@
     {%- assign content_width = 'is-12' -%}
 {%- endif -%}
 <!DOCTYPE html>
-<html>
+<html data-theme="light">
   {% include head.html %}
   <body>
     {% unless page.hide_navbar %}

diff --git a/_layouts/home.html b/_layouts/home.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html data-theme="light">
 
 {% include head.html %}
 <body>

diff --git a/_sass/_main.scss b/_sass/_main.scss
@@ -1,9 +1,28 @@
 @charset "utf-8";
 // @import url('https://fonts.googleapis.com/css?family=Montserrat');
 
-
 @import "variables";
-@import "classes";
-@import "../node_modules/bulma/bulma.sass";
-@import "../node_modules/bulma-block-list/src/block-list.scss";
+
+$tabs-link-active-color: $primary;
+$tabs-link-active-border-bottom-color: $primary;
+
+$modal-content-width: 800px;
+
+@import "../node_modules/bulma/sass";
+@import "../node_modules/bulma/sass/utilities/mixins";
+
+$hero-darken: $dark !default;
+
+@import "layout";
+@import "syntax";
+@import "showcase";
+@import "block-list";
+@import "promo-page";
+
+.gh-sponsor {
+  color: #ea4aaa;
+}
+
 @import "workarounds";
+
+@import "classes";
diff --git a/_sass/classes.sass b/_sass/classes.sass
@@ -1,4 +1,8 @@
 
+:root
+  --bulma-link-text: #{$primary}
+  --bulma-navbar-dropdown-arrow: #{$bg-color-light-grey}
+
 // Site Structure ====================================
 .site-wrapper
   min-height: calc(100vh - #{$header-height + $footer-height}) // to keep footer at page bottom.
@@ -11,18 +15,32 @@
   h2
     font-weight: 800
 
+.title, .subtitle
+  margin-bottom: 1.5rem
+
 .description
   margin-bottom: 25px
   a:hover
     text-decoration: underline
     color: $primary
 
+.card
+  --bulma-card-radius: 4px
+
+.buttons
+  gap: 0.5rem
+  margin-bottom: 1.5rem
+
 .button
+  color: white
+  background-color: $primary
+  font-weight: normal
   transition: background .15s ease-in-out, color .15s ease-in-out
+  border-color: $primary
   border-width: 2px
   &:hover
+    color: $primary
     background-color: white
-    border-width: 2px
   &.logo-blue
     background-color: $logo-color-blue
     &:hover
@@ -121,12 +139,25 @@
 
 // nav ================================
 .navbar
-  background-color: rgba(244,247,252,.95) !important
+  background-color: rgba(244,247,252,.95)
   box-shadow: 0 0 10px rgba(0,0,0,0.4)
+  --bulma-navbar-dropdown-arrow: $bg-color-light-grey
 
 .navbar-dropdown
   background-color: #fff !important
 
+.is-active a
+  color: var(--bulma-link-text) !important
+
+.navbar-item
+  &.is-active
+    background-color: #fff
+    color: var(--bulma-link-text)
+
+.navbar-item, .navbar-link
+  &:hover
+    background-color: $bg-color-light-grey
+
 .navbar:before
   background: linear-gradient(to right, $logo-color-blue 0%,$logo-color-blue 20%,$logo-color-green 20%, $logo-color-green 40%, $logo-color-red 40%, $logo-color-red 60%, $logo-color-orange 60%, $logo-color-orange 80%, $logo-color-yellow 80%, $logo-color-yellow 100%)
   content: ''
@@ -167,6 +198,8 @@
 // Hero section ====================================
 .hero
   box-shadow: 0 2px 10px rgba(0, 0, 0, .2)
+  h1
+    margin-bottom: 1.5rem
   @media (max-width: 768px)  // for mobile version
     h1
       font-size: 8.5vw
@@ -188,7 +221,6 @@
       right: 0
       top: 0
 
-
 .hero-logo
   max-width: 220px
 @media (max-width: 768px)  // for mobile version
@@ -197,6 +229,8 @@
 
 .hero-button
   width: 240px
+  border-width: 0px
+  border-radius: 4px
   background-color: $logo-color-orange
 @media (max-width: 768px)  // for mobile version
   .hero-button
@@ -285,6 +319,12 @@
   a#revision
     text-decoration: none
 
+// toc ====================================
+.toc
+  --bulma-shadow: none
+  margin-bottom: 0
+  padding: 0
+
 // classes for default internal pages ====================================
 
 .internal-page
@@ -305,6 +345,7 @@
   .heading
     color: $text-color
     font-weight: 400
+    letter-spacing: 1px
     text-transform: none
 
   .commercial-products-logo

diff --git a/_sass/variables.sass b/_sass/variables.sass
@@ -1,5 +1,5 @@
 // common variables ==========================
-$font-family: Assistant
+$font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
 $primary: #1F65B0 !default
 $text-color: #576071
 
@@ -25,37 +25,16 @@ $footer-height: 82px
 // END Variables ====================================
 
 // START Overridding theme variables ==========================
-// ------------- Nav bar --------------------------------------
-$navbar-background-color: lighten($bg-color-light-grey, 10%)
-$navbar-dropdown-background-color: $navbar-background-color
-$navbar-item-color: $text-color
-$navbar-dropdown-arrow: $navbar-item-color
-$navbar-item-hover-background-color: $bg-color-light-grey
-$navbar-dropdown-item-hover-background-color: $navbar-item-hover-background-color
 
 // ------------- hero --------------------------------------
 $hero-body-padding-medium: 6rem 1.5rem //for home page hero
 
-// ------------- Section --------------------------------------
-// $section-padding: 9rem 1.55rem
-// $section-padding-medium: 9rem 1.55rem
-
-// ------------- button --------------------------------------
-$button-color: white
-$button-background-color: $primary
-$button-hover-color: $primary
-$button-hover-border-color: $primary
-$button-hover-background-color: white
-$button-focus-color: $primary
-
 // ------------- Text --------------------------------------
 $title-color: $text-color
 $title-weight: 200
 $subtitle-color: $text-color
 $subtitle-weight: 400
 
-// ------------- Card --------------------------------------
-
 // ------------- Footer --------------------------------------
 $footer-background-color: $text-color
 $footer-color: white

diff --git a/netlify.toml b/netlify.toml
@@ -4,7 +4,7 @@
   publish = "_site/"
 
 [build.environment]
-  RUBY_VERSION = "2.7.2"
+  RUBY_VERSION = "3.2.2"
 
 # Copied from https://answers.netlify.com/t/jekyll-site-uses-absolute-urls-deploy-previews-navigate-to-main-site/8441/12
 [context.deploy-preview]