Merge pull request #150 from chrisrhymes/feature/bulma-v1

Update to v1 of bulma
chrisrhymes · May 6, 2024 · 360e829 · 360e829
2 parents 93d5d20 + bd15e3a
commit 360e829
Show file tree

Hide file tree

Showing 197 changed files with 32,171 additions and 27,092 deletions.
diff --git a/.github/workflows/jekyll-build-deploy.yml b/.github/workflows/jekyll-build-deploy.yml
@@ -0,0 +1,64 @@
+# This workflow uses actions that are not certified by GitHub.
+# They are provided by a third-party and are governed by
+# separate terms of service, privacy policy, and support
+# documentation.
+
+# Sample workflow for building and deploying a Jekyll site to GitHub Pages
+name: Build and Deploy Jekyll site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: [$default-branch]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Ruby
+        uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: '3.1' # Not needed with a .ruby-version file
+          bundler-cache: true # runs 'bundle install' and caches installed gems automatically
+          cache-version: 0 # Increment this number if you need to re-download cached gems
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v5
+      - name: Build with Jekyll
+        # Outputs to the './_site' directory by default
+        run: bundle exec jekyll build --baseurl "${{ steps.pages.outputs.base_path }}"
+        env:
+          JEKYLL_ENV: production
+      - name: Upload artifact
+        # Automatically uploads an artifact from the './_site' directory by default
+        uses: actions/upload-pages-artifact@v3
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,7 @@
 _site
 Gemfile.lock
 .idea
-.DS_Store
+.DS_Store
+node_modules/*
+!node_modules/bulma
+!node_modules/bulma-block-list
diff --git a/README.md b/README.md
@@ -11,6 +11,7 @@ The theme uses [Alpine.js](https://github.com/alpinejs/alpine) for its interacti
 
 * [Installation](#installation)
 * [Documentation](#documentation)
+* [Upgrading to v1](#upgrading-to-v1)
 * [Contributing](#contributing)
 * [Development](#development)
 * [Licence](#licence)
@@ -49,6 +50,10 @@ Or install it yourself as:
 
 Check out the demo site for the [Documentation](https://www.csrhymes.com/bulma-clean-theme/docs/)
 
+## Upgrading to v1
+
+There are several breaking changes for v1. Please read the [upgrade guide](https://www.csrhymes.com/bulma-clean-theme/docs/upgrading-to-v1/) for more information.
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/chrisrhymes/bulma-clean-theme. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.

diff --git a/_config.yml b/_config.yml
@@ -49,6 +49,8 @@ livereload: true
 sass:
   style: compressed
   source_dir: _sass
+  # load_paths: 
+    # - node_modules
 
 #google_analytics: UA-code-here
 cookie_policy: /cookie-policy/

diff --git a/_data/docs_menu.yml b/_data/docs_menu.yml
@@ -2,6 +2,8 @@
   items:
     - name: Installation
       link: /docs/getting-started/installation/
+    - name: Upgrading to v1
+      link: /docs/getting-started/upgrading-to-v1/
     - name: Configuration
       link: /docs/getting-started/configuration/
     - name: Theming

diff --git a/_includes/callouts.html b/_includes/callouts.html
@@ -19,15 +19,22 @@
                             <p class="subtitle is-5">{{ callout.subtitle }}</p>
 
                             {% if callout.description %}
-                                <div class="content">
-                                    <p>{{ callout.description | newline_to_br }}</p>
+                                <div class="my-4">
+                                    <div class="content">
+                                        <p>{{ callout.description | newline_to_br }}</p>
+                                    </div>
                                 </div>
                             {% endif %}
 
                             {% if callout.call_to_action_name %}
-                                <a href="{{ callout.call_to_action_link | relative_url }}" class="button is-primary">
-                                    {{ callout.call_to_action_name }}
-                                </a>
+                                <div class="my-4">
+                                    <a
+                                        href="{{ callout.call_to_action_link | relative_url }}"
+                                        class="button is-primary"
+                                    >
+                                        {{ callout.call_to_action_name }}
+                                    </a>
+                                </div>
                             {% endif %}
                         </div>
                     {% endfor %}

diff --git a/_includes/cookie-banner.html b/_includes/cookie-banner.html
@@ -14,7 +14,7 @@
                     </p>
                 </div>
 
-                <div class="buttons">
+                <div class="buttons mt-4">
                     <button class="button is-primary" onclick="acceptCookies()">Accept all cookies</button>
                     <button class="button is-primary" onclick="rejectCookies()">Reject all cookies</button>
                 </div>

diff --git a/_includes/hero.html b/_includes/hero.html
@@ -9,9 +9,11 @@
             <h1 class="title is-2">{{ page.title }}</h1>
             <p class="subtitle is-3">{{ page.subtitle }}</p>
             {% if page.hero_link %}
-                <a href="{{ page.hero_link | relative_url }}" class="button is-info is-large">
-                    {{- page.hero_link_text -}}
-                </a>
+                <div class="my-4">
+                    <a href="{{ page.hero_link | relative_url }}" class="button is-info is-large">
+                        {{- page.hero_link_text -}}
+                    </a>
+                </div>
             {% endif %}
         </div>
     </div>

diff --git a/_includes/showcase.html b/_includes/showcase.html
@@ -17,7 +17,7 @@
                         <p class="subtitle">{{ item.subtitle }}</p>
 
                         {% if item.github %}
-                            <div class="buttons is-centered">
+                            <div class="buttons is-centered my-4">
                                 <a
                                     href="https://github.com/{{ item.github }}/stargazers"
                                     class="button is-white is-small"
@@ -53,7 +53,7 @@
                         </div>
 
                         {% if item.features %}
-                            <ul class="block-list {{ item.features_styles }}">
+                            <ul class="block-list is-dark {{ item.features_styles }}">
                                 {% for feature in item.features %}
                                     <li>{{ feature }}</li>
                                 {% endfor %}
@@ -62,16 +62,18 @@
 
                         {% if item.tags %}
                             {% assign tags = item.tags | split: ',' %}
-                            <div class="tags is-centered">
+                            <div class="tags is-centered my-4">
                                 {% for tag in tags %}
                                     {% include tag.html tag=tag style="is-dark" %}
                                 {% endfor %}
                             </div>
                         {% endif %}
 
-                        <a href="{{ item.link }}" class="button is-primary">
-                            {{ item.link_text }}
-                        </a>
+                        <div class="my-4">
+                            <a href="{{ item.link }}" class="button is-primary">
+                                {{ item.link_text }}
+                            </a>
+                        </div>
                     </div>
                 </div>
             </div>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -17,6 +17,7 @@
     {% if site.fixed_navbar %}
         class="has-navbar-fixed-{{ site.fixed_navbar }}"
     {% endif %}
+    class="theme-light"
 >
     {% include head.html %}
     <body>

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -11,16 +11,20 @@
     {{ content }}
 </div>
 
-<div class="tags">
+<div class="tags my-4">
     {% for tag in page.tags %}
         {% include tag.html tag=tag %}
     {% endfor %}
 </div>
 
 {% unless site.hide_share_buttons %}
-    {% include share-buttons.html %}
+    <div class="my-4">
+        {% include share-buttons.html %}
+    </div>
 {% endunless %}
 
 {% if site.disqus.shortname %}
-    {% include disqus.html %}
+    <div class="my-4">
+        {% include disqus.html %}
+    </div>
 {% endif %}
diff --git a/_sass/_block-list.scss b/_sass/_block-list.scss
@@ -0,0 +1,130 @@
+@charset "utf-8";
+
+@use 'sass:math';
+
+@import '../node_modules/bulma/sass/utilities/initial-variables';
+@import '../node_modules/bulma/sass/utilities/derived-variables';
+
+$block-list-separator: 0.25rem !default;
+$block-list-highlight-width: 5px !default;
+
+.content {
+  ul.block-list {
+    list-style: none;
+    margin-left: 0;
+  }
+}
+
+.block-list {
+  list-style: none;
+
+  li {
+    padding: math.div($gap, 2);
+    background: var(--bulma-body-background-color);
+    margin-bottom: $block-list-separator;
+  }
+
+  li.is-left,
+  &.is-left > li {
+    text-align: left;
+  }
+
+  li.is-centered,
+  &.is-centered > li {
+    text-align: center;
+  }
+
+  li.is-right,
+  &.is-right > li {
+    text-align: right;
+  }
+
+  li.is-small,
+  &.is-small > li {
+    font-size: $size-7;
+    padding: math.div($gap, 3);
+  }
+
+  li.is-normal,
+  &.is-normal > li {
+    font-size: $size-6;
+  }
+
+  li.is-large,
+  &.is-large > li {
+    font-size: $size-5;
+  }
+
+  li.has-radius,
+  &.has-radius > li {
+    border-radius: $radius;
+  }
+
+  li.is-highlighted,
+  &.is-highlighted > li {
+    border-left: $block-list-highlight-width var(--bulma-dark) solid;
+  }
+
+  @mixin outlined($color) {
+    background: transparent;
+    color: var(--bulma-#{$color});
+    border: 1px solid var(--bulma-#{$color});
+  }
+
+  li.is-outlined,
+  &.is-outlined > li {
+    @include outlined('light');
+  }
+
+  li.has-icon {
+    display: flex;
+
+    .icon {
+      flex-grow: 0;
+      flex-shrink: 0;
+      flex-basis: auto;
+      margin-right: 1em;
+    }
+
+    span {
+      flex-grow: 1;
+    }
+
+    &.is-right {
+      .icon {
+        margin-right: 0;
+        margin-left: 1em;
+      }
+    }
+  }
+
+  @each $name, $pair in $colors {
+    li.is-#{$name},
+    &.is-#{$name} > li {
+      background: var(--bulma-#{$name});
+      color: var(--bulma-#{$name}-invert);
+    }
+
+    li.is-#{$name}.is-outlined {
+      @include outlined($name);
+    }
+
+    li.is-#{$name}.is-highlighted {
+      @include outlined($name);
+      border-left: $block-list-highlight-width var(--bulma-#{$name}) solid;
+    }
+
+    &.is-#{$name} {
+      li.is-outlined,
+      &.is-outlined > li {
+        @include outlined($name);
+      }
+
+      li.is-highlighted,
+      &.is-highlighted > li {
+        @include outlined($name);
+        border-left: $block-list-highlight-width var(--bulma-#{$name}) solid;
+      }
+    }
+  }
+}
diff --git a/_sass/_main.scss b/_sass/_main.scss
@@ -9,13 +9,14 @@ $tabs-link-active-border-bottom-color: $primary;
 
 $modal-content-width: 800px;
 
-@import "../node_modules/bulma/bulma.sass";
+@import "../node_modules/bulma/sass";
+@import "../node_modules/bulma/sass/utilities/mixins";
 $hero-darken: $dark !default;
 
 @import "layout";
 @import "syntax";
 @import "showcase";
-@import "../node_modules/bulma-block-list/src/block-list.scss";
+@import "block-list";
 
 .gh-sponsor {
   color: #ea4aaa;