gethinode · markdumay · May 29, 2023 · May 28, 2023 · May 29, 2023 · May 29, 2023
diff --git a/config/_default/languages.toml b/config/_default/languages.toml
@@ -4,11 +4,16 @@
     weight = 1
     [en.params.head]
         tagline = "A Hugo Theme"
-    [en.params.feature]
-        link = "docs/0.9/getting-started/introduction/"
-        caption = "Get Started"
-    [en.params.demo]
-        link = "https://demo.gethinode.com"
-        caption = "Live Demo"
     [en.params.footer]
-        license = "Code licensed <a href='https://github.com/gethinode/hinode/blob/main/LICENSE' class='link-bg-footer fw-medium' target='_blank' rel='noopener noreferrer'>MIT</a>, docs <a href='https://creativecommons.org/licenses/by-nc/4.0/' class='link-bg-footer fw-medium' target='_blank' rel='noopener noreferrer'>CC BY-NC 4.0</a>"
+        license = "Code licensed <a href='https://github.com/gethinode/hinode/blob/main/LICENSE' class='link-bg-footer fw-medium' target='_blank' rel='noopener noreferrer'>MIT</a>, docs <a href='https://creativecommons.org/licenses/by-nc/4.0/' class='link-bg-footer fw-medium' target='_blank' rel='noopener noreferrer'>CC BY-NC 4.0</a>"
+
+[[en.params.featured.actions]]
+    url = "docs/0.9/getting-started/introduction/"
+    title = "Get Started"
+    icon = "fas book-open"
+
+[[en.params.featured.actions]]
+    url = "https://demo.gethinode.com"
+    title = "Live Demo"
+    icon = "fas display"
+    outline = true
diff --git a/config/_default/params.toml b/config/_default/params.toml
@@ -206,6 +206,7 @@
     bs_offcanvas = "https://getbootstrap.com/docs/5.3/components/offcanvas"
     bs_navbar_placement = "https://getbootstrap.com/docs/5.3/components/navbar/#placement"
     bs_tables = "https://getbootstrap.com/docs/5.3/content/tables"
+    caniuse_container = "https://caniuse.com/?search=%40container"
     cc_by_nc_4_0 = "https://creativecommons.org/licenses/by-nc/4.0/"
     cloudflare = "https://cloudflare.com"
     commit_message = "https://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html"

diff --git a/content/en/docs/0.9/content/icons.md b/content/en/docs/0.9/content/icons.md
@@ -1,7 +1,7 @@
 ---
 title: Icons
 description: Use out-of-the-box Font Awesome icons to style your website.
-date: 2023-02-02
+date: 2023-05-29
 layout: docs
 ---
 
@@ -104,6 +104,24 @@ The table below illustrates the absolute sizing classes and their equivalent fon
 | `fa-10x` | 10em |
 {{< /table >}}
 
+### Responsive sizing
+
+{{< release version="v0.14.5" >}}
+
+{{< alert >}}
+Container support is a relatively new CSS feature that is not supported by all browsers yet. See this overview to [check the current browser support]({{< param "links.caniuse_container" >}}). Hinode uses a fixed-size icon with a `font-size` of `5rem` as fallback.
+{{< /alert >}}
+
+Hinode supports responsive sizing of icons using so-called containers. Wrap the icon in an element with class `fa-wrapper` and add the class attribute `fa-fluid` to the icon itself. The icon is now dynamically resized. The following example demonstrates a centered, responsive icon. As Hinode includes Font Awesome as a web font, the wrapper element may have some whitespace. Use `text-center` to center the icon within the container, and `mx-auto` to center the container itself.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+<div class="fa-wrapper col-6 mx-auto text-center">
+    {{</* fas rocket bg-body-tertiary fa-fluid */>}}
+</div>
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Fixed width
 
 Add `fa-fw` to the class of the HTML element referencing your icon to apply a fixed width. This ensures icons of varying icon width are properly aligned to each other. The following example illustrates how this works.

diff --git a/hugo_stats.json b/hugo_stats.json
@@ -238,6 +238,7 @@
       "fa-beat",
       "fa-beat-fade",
       "fa-bell",
+      "fa-book-open",
       "fa-bootstrap",
       "fa-bounce",
       "fa-brands",
@@ -253,6 +254,7 @@
       "fa-circle-info",
       "fa-code-pull-request",
       "fa-coffee",
+      "fa-display",
       "fa-ellipsis",
       "fa-envelope-circle-check",
       "fa-eye-slash",
@@ -264,6 +266,8 @@
       "fa-flip-both",
       "fa-flip-horizontal",
       "fa-flip-vertical",
+      "fa-flui",
+      "fa-fluid",
       "fa-folder",
       "fa-font-awesome",
       "fa-fw",
@@ -285,6 +289,7 @@
       "fa-pulse",
       "fa-quote-left",
       "fa-regular",
+      "fa-rocket",
       "fa-rotate-180",
       "fa-rotate-270",
       "fa-rotate-90",
@@ -312,6 +317,7 @@
       "fa-ul",
       "fa-up-right-from-square",
       "fa-whatsapp",
+      "fa-wrapper",
       "fa-xl",
       "fa-xs",
       "fade",
@@ -347,6 +353,7 @@
       "g-3",
       "g-lg-3",
       "gap-2",
+      "gap-3",
       "gradient",
       "gradient-featured",
       "h-100",
@@ -358,13 +365,15 @@
       "h6",
       "heading",
       "highlight",
+      "hstack",
       "img-fluid",
       "img-wrap",
       "invisible",
       "is-search",
       "justify-content-between",
       "justify-content-center",
       "justify-content-end",
+      "justify-content-start",
       "lead",
       "link-bg-black",
       "link-bg-body",
@@ -467,6 +476,7 @@
       "pb-2",
       "pb-3",
       "pb-5",
+      "pe-1",
       "pe-3",
       "pe-5",
       "persona",
@@ -489,7 +499,6 @@
       "ptw-5",
       "ptw-lg-5",
       "ptw-sm-4",
-      "px-1",
       "px-3",
       "px-xxl-0",
       "py-1",
@@ -1000,6 +1009,7 @@
       "reference-style-links",
       "relative-sizing",
       "remarks",
+      "responsive-sizing",
       "responsive-tables",
       "rotating-icons",
       "running-a-local-development-server",

diff --git a/layouts/partials/home/featured.html b/layouts/partials/home/featured.html
@@ -7,13 +7,11 @@
             </div>
             <p class="display-4">{{ .Title }}</p>
             <span class="fs-5 text-muted">{{ .Content }}</span>
-            {{- if .Site.Params.feature.link }}
-                <a class="btn btn-primary" href="{{ .Site.Params.feature.link | safeURL }}" role="button">{{ .Site.Params.feature.caption | default (T "about") }}</a>
-            {{- end }}
-            &nbsp;
-            {{ if .Site.Params.demo.link -}}
-                <a class="btn btn-outline-primary" href="{{ .Site.Params.demo.link | safeURL }}" target="_blank" rel="noopener noreferrer" role="button">{{ .Site.Params.demo.caption | default (T "demo") }}</a>
-            {{- end -}}
+            <div class="hstack gap-3 justify-content-center">
+                {{ range .Site.Params.featured.actions }}
+                    {{ partial "assets/button.html" (dict "href" .url "icon" .icon "title" .title "outline" .outline "order" "first" "justify" "start") }}
+                {{ end }}
+            </div>
         </div>
         <div class="col col-md-3 d-none d-md-block"></div>
     </div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -38,7 +38,7 @@
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^6.4.0",
     "@fullhuman/postcss-purgecss": "^5.0.0",
-    "@gethinode/hinode": "^0.14.4",
+    "@gethinode/hinode": "^0.14.5",
     "autoprefixer": "^10.4.14",
     "bootstrap": "^5.3.0-alpha3",
     "cssnano": "^6.0.1",