Merge pull request #40 from markdumay/develop

Adjust clipboard button to match Bootstrap style

.github/workflows/lint.yml

@@ -14,7 +14,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x, 16.x]
+        node-version: [14.x, 16.x, 18.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:

README.md

@@ -155,8 +155,8 @@ The `hugo-theme-hinode` and `hugo-theme-hinode-child` codebase is released under
 <!-- MARKDOWN MAINTAINED LINKS -->
 <!-- TODO: add blog link
 [blog]: https://markdumay.com
--->
 [blog]: https://github.com/markdumay
+-->
 [demo]: https://hinode-demo.markdumay.org/
 [license]: https://github.com/markdumay/hugo-theme-hinode/blob/main/LICENSE
 [repository]: https://github.com/markdumay/hugo-theme-hinode.git

assets/js/index.js

@@ -163,7 +163,7 @@ Source:
 */
 
 const svgCopy =
-  '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path><path fill-rule="evenodd" d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"></path></svg>';
+  '<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"><path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/><path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/></svg>';
 const svgCheck =
   '<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true"><path fill-rule="evenodd" fill="rgb(63, 185, 80)" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>';
 

assets/scss/app.scss

@@ -9,6 +9,7 @@ $themeColor: {{ site.Params.style.themeColor | default "#007bff" }};
 
 // Import Bootstrap configuration
 @import "bootstrap/scss/variables";
+@import "bootstrap/scss/maps";
 @import "bootstrap/scss/mixins";
 @import "bootstrap/scss/utilities";
 

assets/scss/common/_variables.scss

@@ -1,5 +1,6 @@
 // Bootstrap variables overrides for theme
 $primary:                       $themeColor;
+$enable-negative-margins:       true;
 
 // Font awesome variables overrides for theme
 $fa-font-path:                  "../fonts";

assets/scss/components/_clipboard.scss

@@ -5,11 +5,9 @@
     right: 0;
     padding: 2px 7px 5px;
     margin: 5px;
-    color: #767676;
+    color: $secondary;
-    border-color: #767676;
+    background-color: transparent;
-    background-color: #ededed;
+    border-style: none;
-    border: 1px solid;
-    border-radius: 6px;
     font-size: 0.8em;
     z-index: 1;
     opacity: 0;
@@ -17,17 +15,16 @@
 }
 
 .clipboard-button > svg {
-    fill: #767676;
+    fill: $secondary;
 }
 
 .clipboard-button:hover {
     cursor: pointer;
-    border-color: #696969;
+    color: $primary;
-    background-color: #e0e0e0;
 }
 
 .clipboard-button:hover > svg {
-    fill: #696969;
+    fill: $primary;
 }
 
 .clipboard-button:focus {

layouts/_default/list.html

@@ -1,7 +1,7 @@
 {{ define "main" -}}
-    <div class="p-5">
+    <div class="p-4">
         <h1>{{ .Title }}</h1>
-        <div class="container-fluid">
+        <div class="container-fluid p-0">
             <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
                 {{ $max := sub (len .Pages) 1 -}}
                 {{ range $index, $element := (.Paginate .RegularPagesRecursive).Pages -}}

layouts/_default/single.html

@@ -3,7 +3,7 @@
     {{ $datestr := (partial "utilities/date.html" (dict "date" .Date "language" $.Page.Language "format" "long")) -}}
     
     <div class="container-fluid">
-        <div class="row row-cols-1 row-cols-sm-3 align-items-center p-5">
+        <div class="row row-cols-1 row-cols-sm-3 align-items-center p-3">
             <div class="col col-md-2 d-none d-md-block"></div>
             <div class="col col-sm-12 col-md-8">
                 {{ range .Params.tags -}}
@@ -27,7 +27,7 @@
         </div>    
 
         {{ if .Params.thumbnail -}}
-            <div class="row row-cols-1 row-cols-sm-3 align-items-center p-5">
+            <div class="row row-cols-1 row-cols-sm-3 align-items-center p-3">
                 <div class="col col-md-2 d-none d-md-block"></div>
                 <div class="col col-sm-12 col-md-8">
                     {{- partial "image.html" (dict "url" .Params.thumbnail "ratio" "21x9" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Params.title "caption" .Params.credits) -}}
@@ -36,7 +36,7 @@
             </div>    
         {{ end -}}
         
-        <div class="row row-cols-1 row-cols-sm-2 p-5">
+        <div class="row row-cols-1 row-cols-sm-2 p-3">
             <div class="col col-md-2 d-none d-md-block"></div>
             <div class="col col-sm-12 col-md-8">
                 {{ .Content }}
@@ -69,7 +69,7 @@
 
     {{- if and .Site.Params.comments.enabled .Params.showComments | default true -}}
         <div class="container-fluid">
-            <div class="row row-cols-1 row-cols-sm-2 p-5">
+            <div class="row row-cols-1 row-cols-sm-2 p-3">
                 <div class="col col-md-2 d-none d-md-block"></div>
                 <div class="col col-sm-12 col-md-8">
                     <hr>

layouts/index.html

@@ -3,14 +3,14 @@
 
     {{ range $section, $taxonomy := .Site.Sections -}}
         {{ if eq $section 0 -}}
-            <div class="p-5">
+            <div class="p-4">
                 <h1>Recent posts</h1>
-                <div class="container-fluid">
+                <div class="container-fluid p-0">
-                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4">
+                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3">
                         {{ $items := first 3 ($taxonomy.Pages.ByDate.Reverse) -}}
                         {{ $max := sub (len $items) 1 -}}
                         {{ range $index, $element := $items -}}
-                            <div class="col">
+                            <div class="col gx-4">
                                 {{- partial "assets/blog-card.html" $element -}}
                             </div>
                             {{ if (lt $index $max) -}}
@@ -27,13 +27,13 @@
                 {{ end -}}
             </div>
         {{ else -}}
-            <div class="p-5">
+            <div class="p-4">
                 <h1>{{ $taxonomy.Title }}</h1>
                 <div class="container-fluid">
                     <div class="row row-cols-1 g-4">
                         {{ $items := first 3 ($taxonomy.Pages) -}}
                         {{ range $index, $element := $items -}}
-                            <div class="col">
+                            <div class="col p-0">
                                 {{- partial "assets/project-card.html" $element -}}
                             </div>
                         {{ end -}}

layouts/partials/assets/blog-card.html

@@ -4,7 +4,7 @@
             {{- partial "image.html" (dict "url" .Params.thumbnail "ratio" "16x9" "outerClass" "card-img-wrap" "innerClass" "card-img-top" "title" .Params.title) -}}
         </a>
     {{ end }}
-    <div class="card-body d-flex flex-column">
+    <div class="card-body d-flex flex-column p-0">
         <p class="card-text">
             <small class="text-muted text-uppercase">
                 {{- partial "utilities/date.html" (dict "date" .Date "language" $.Page.Language "format" "long") -}}

layouts/partials/assets/navbar.html

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-expand-sm bg-white navbar-light ps-4 pe-4">
+<nav class="navbar navbar-expand-sm bg-white navbar-light m-3">
 	<div class="container-fluid">
         <a class="navbar-brand" href="{{ .Site.Home.RelPermalink }}">
             {{ if .Site.Params.main.logo -}}
@@ -8,7 +8,7 @@
             {{ end -}}
         </a>
 
-		<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
+		<button class="navbar-toggler collapsed me-n3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
 			aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 			<span class="toggler-icon top-bar"></span>
 			<span class="toggler-icon middle-bar"></span>

layouts/partials/footer/social.html

@@ -1,9 +1,9 @@
 <div class="container-fluid">
-    <div class="row row-cols-1 row-cols-sm-4 bg-primary p-5 bg-opacity-{{ .Site.Params.style.themeOpacity | default "25" | safeHTML }} align-items-center">
+    <div class="row row-cols-1 row-cols-sm-4 bg-primary p-3 bg-opacity-{{ .Site.Params.style.themeOpacity | default "25" | safeHTML }} align-items-center">
         <div class="col col-md-2 d-none d-md-block"></div>
         <div class="col col-sm-6 col-md-4">
             <div class="fs-3 fw-bold">{{ .Site.Params.socialTitle }}</div>
-            {{ .Site.Params.socialCaption }}
+            <p>{{ .Site.Params.socialCaption }}</p>
         </div>
         <div class="col text-sm-start text-center col-sm-6 col-md-4">
             {{ range .Site.Menus.social -}}

layouts/partials/intro.html

@@ -1,5 +1,5 @@
 <div class="container-fluid">
-    <div class="row row-cols-1 row-cols-sm-4 bg-primary p-5 bg-opacity-{{ .Site.Params.style.themeOpacity | default "25" | safeHTML }} align-items-center">
+    <div class="row row-cols-1 row-cols-sm-4 bg-primary p-3 bg-opacity-{{ .Site.Params.style.themeOpacity | default "25" | safeHTML }} align-items-center">
         <div class="col col-md-2 d-none d-md-block"></div>
         <div class="col col-sm-6 col-md-4">
             <p class="fs-1 fw-bold">{{ .Site.Params.introTitle }}</p>

layouts/shortcodes/figure.html

@@ -13,7 +13,7 @@
     /><!-- Closing img tag -->
     {{- if .Get "link" }}</a>{{ end -}}
     {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
-        <figcaption>
+    <figcaption class="figure-caption">
             {{ with (.Get "title") -}}
                 <h4>{{ . }}</h4>
             {{- end -}}

layouts/tags/list.html

@@ -1,6 +1,6 @@
 {{ define "main" }}
     <div class="container-fluid">
-        <div class="row row-cols-1 row-cols-sm-3 align-items-center p-5">
+        <div class="row row-cols-1 row-cols-sm-3 align-items-center p-3">
             <div class="col col-md-2 d-none d-md-block"></div>
             <div class="col col-sm-12 col-md-8">
                 <h1>{{ .Name | humanize }}</h1>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@markdumay/hugo-theme-hinode",
-  "version": "0.3.0",
+  "version": "0.4.6",
   "description": "Hinode is a clean blog theme for Hugo, an open-source static site generator",
   "main": "index.js",
   "publishConfig": {
@@ -31,6 +31,7 @@
     "copy:fonts": "shx cp ./node_modules/@fortawesome/fontawesome-free/webfonts/* ./static/fonts/",
     "create:syntax": "exec-bin node_modules/.bin/hugo/hugo gen chromastyles --style=monokailight > ./assets/scss/components/_syntax.scss",
     "postinstall": "hugo-installer --version otherDependencies.hugo --extended --destination node_modules/.bin/hugo",
+    "upgrade": "npx npm-check-updates -u",
     "version": "auto-changelog -p && git add CHANGELOG.md"
   },
   "repository": {
@@ -44,26 +45,26 @@
   },
   "homepage": "https://github.com/markdumay/hugo-theme-hinode#readme",
   "devDependencies": {
-    "@fortawesome/fontawesome-free": "^6.0.0",
+    "@fortawesome/fontawesome-free": "^6.2.0",
-    "@fullhuman/postcss-purgecss": "^4.1.3",
+    "@fullhuman/postcss-purgecss": "^5.0.0",
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.12",
-    "bootstrap": "^5.1.3",
+    "bootstrap": "^5.2.2",
-    "eslint": "^7.32.0",
+    "eslint": "^8.25.0",
-    "eslint-config-standard": "^16.0.3",
+    "eslint-config-standard": "^17.0.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-n": "^15.3.0",
-    "eslint-plugin-promise": "^5.2.0",
+    "eslint-plugin-promise": "^6.1.1",
     "exec-bin": "^1.0.0",
-    "flexsearch": "^0.7.21",
+    "flexsearch": "^0.7.31",
-    "hugo-installer": "^3.1.0",
+    "hugo-installer": "^4.0.1",
-    "markdownlint-cli2": "^0.4.0",
+    "markdownlint-cli2": "^0.5.1",
-    "postcss-cli": "^9.1.0",
+    "postcss-cli": "^10.0.0",
     "purgecss-whitelister": "^2.4.0",
     "shx": "^0.3.4",
-    "stylelint": "^14.6.1",
+    "stylelint": "^14.14.0",
-    "stylelint-config-standard-scss": "^3.0.0"
+    "stylelint-config-standard-scss": "^5.0.0"
   },
   "otherDependencies": {
-    "hugo": "0.97.0"
+    "hugo": "0.104.3"
   }
 }

theme.toml

@@ -1,7 +1,7 @@
 name = "Hinode"
 license = "MIT"
 licenselink = "https://github.com/markdumay/hugo-theme-hinode/blob/main/LICENSE"
-description = "Hinode is a clean blog theme for Hugo, an open-source static site generator."
+description = "A clean blog theme for your Hugo site based on Bootstrap 5."
 homepage = "https://github.com/markdumay/hugo-theme-hinode"
 demosite = "https://hinode-demo.markdumay.org/"
 tags = ["blog", "minimal", "modern", "customizable", "search", "bootstrap"]