From aa4da569104b9efed3089124d07e6fb634d6ac39 Mon Sep 17 00:00:00 2001 From: Mark Dumay <61946753+markdumay@users.noreply.github.com> Date: Fri, 23 Aug 2024 07:58:43 +0200 Subject: [PATCH] Fix border behavior of card zoom animation --- assets/scss/components/_card.scss | 12 +++++++- exampleSite/hugo_stats.json | 3 +- hugo_stats.json | 50 ++++++++++++++++++++++++++++++- package-lock.json | 4 +-- package.json | 2 +- 5 files changed, 65 insertions(+), 6 deletions(-) diff --git a/assets/scss/components/_card.scss b/assets/scss/components/_card.scss index 4f04c78b..90327192 100644 --- a/assets/scss/components/_card.scss +++ b/assets/scss/components/_card.scss @@ -5,11 +5,21 @@ background-color: var(--#{$prefix}secondary-bg); } -.card-img-wrap { +.card .card-img-wrap { overflow: hidden; position: relative; } +.card .card-img-wrap:has(.card-img-top) { + border-top-left-radius: var(--#{$prefix}card-inner-border-radius); + border-top-right-radius: var(--#{$prefix}card-inner-border-radius); +} + +.card .card-img-wrap:has(.card-img-bottom) { + border-bottom-right-radius: var(--#{$prefix}card-inner-border-radius); + border-bottom-left-radius: var(--#{$prefix}card-inner-border-radius); +} + .card-zoom { cursor: pointer; } diff --git a/exampleSite/hugo_stats.json b/exampleSite/hugo_stats.json index 7c54ca67..32dd43cf 100644 --- a/exampleSite/hugo_stats.json +++ b/exampleSite/hugo_stats.json @@ -237,6 +237,7 @@ "fade", "fas", "figure-caption", + "fixed-top", "flex-column", "flex-fill", "flex-grow-1", @@ -332,10 +333,10 @@ "navbar-container", "navbar-contrast", "navbar-expand-md", + "navbar-fixed-top", "navbar-mode-selector", "navbar-nav", "navbar-nav-scroll", - "navbar-overlay", "navbar-title", "navbar-toggler", "next", diff --git a/hugo_stats.json b/hugo_stats.json index afa11423..5d5464d4 100644 --- a/hugo_stats.json +++ b/hugo_stats.json @@ -16,6 +16,7 @@ "link", "meta", "nav", + "noscript", "ol", "p", "path", @@ -38,6 +39,7 @@ "bg-body", "bg-opacity-10", "bg-primary", + "border-0", "bottom-0", "bottom-bar", "breadcrumb", @@ -45,10 +47,19 @@ "btn", "btn-close", "btn-primary", + "btn-social", + "card", + "card-body", + "card-body-link", + "card-text", + "card-title", + "card-zoom", "checkbox", "col", "col-12", "col-6", + "col-lg-2", + "col-lg-8", "col-md-2", "col-md-3", "col-md-4", @@ -61,7 +72,9 @@ "container-xxl", "d-flex", "d-inline", + "d-lg-block", "d-md-block", + "d-md-none", "d-none", "display-1", "display-4", @@ -73,12 +86,17 @@ "fa-book-open", "fa-ellipsis", "fa-face-frown", + "fa-facebook", "fa-fw", "fa-github", + "fa-link", "fa-linkedin", "fa-medium", "fa-moon", + "fa-share-nodes", "fa-sun", + "fa-whatsapp", + "fa-x-twitter", "fab", "fas", "fixed-top", @@ -88,8 +106,13 @@ "form-control", "fs-3", "fs-5", + "fs-6", + "fs-lg-5", "fw-30", "fw-bold", + "g-4", + "gap-1", + "h-100", "hstack", "img-fluid", "img-wrap", @@ -99,10 +122,14 @@ "justify-content-end", "justify-content-start", "label", + "lead", "link-bg-footer", "link-secondary", "main-content", "main-nav-toggler", + "mb-3", + "mb-5", + "mb-lg-5", "me-auto", "middle-bar", "min-vh-100", @@ -114,6 +141,7 @@ "mx-auto", "mx-md-0", "my-auto", + "my-md-0", "my-md-auto", "nav-item", "nav-link", @@ -136,6 +164,7 @@ "p-3", "p-4", "pb-4", + "pb-5", "pb-md-0", "position-fixed", "position-relative", @@ -150,40 +179,59 @@ "row", "row-cols-1", "row-cols-2", + "row-cols-lg-3", "row-cols-md-2", + "row-cols-md-3", + "row-cols-sm-2", "row-cols-sm-3", "search", "search-input", "search-suggestions", "shadow", + "sidebar-overflow", + "sticky-top", + "stretched-link", "svg-inline--fa", + "text-body-secondary", "text-center", "text-decoration-none", + "text-end", "text-muted", "text-secondary", "text-sm-start", "text-start", + "text-uppercase", "toast", "toast-body", "toast-container", "toast-header", + "toc", + "toc-sidebar", "toggler-icon", "top-bar" ], "ids": [ + "blogs", + "btn-webshare", "fa-face-frown", + "fab-facebook", "fab-github", "fab-linkedin", "fab-medium", + "fab-whatsapp", + "fab-x-twitter", "fas-book-open", "fas-ellipsis", + "fas-link", "fas-moon", + "fas-share-nodes", "fas-sun", "navbar-0-collapse", "navbar-mode", "navbar-mode-checkbox", "toast-container", - "toast-copied-code-message" + "toast-copied-code-message", + "toast-message-email-4" ] } } diff --git a/package-lock.json b/package-lock.json index 9f7aa7f2..b6e85989 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@gethinode/hinode", - "version": "0.26.4", + "version": "0.26.5", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@gethinode/hinode", - "version": "0.26.4", + "version": "0.26.5", "license": "MIT", "dependencies": { "@fullhuman/postcss-purgecss": "^6.0.0", diff --git a/package.json b/package.json index 58c529c6..2be09123 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@gethinode/hinode", - "version": "0.26.4", + "version": "0.26.5", "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator", "keywords": [ "hugo",