Skip to content

✨ [feat] Carousel shortcode #51

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tomy0000000 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

✨ [feat] Carousel shortcode #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
90 changes: 85 additions & 5 deletions assets/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
/* Enhenced abbr element for mobile and keyboard navigation */
/* https://bitsofco.de/making-abbr-work-for-touchscreen-keyboard-mouse/ */
/*
==========================================================================
Enhenced abbr element for mobile and keyboard navigation
https://bitsofco.de/making-abbr-work-for-touchscreen-keyboard-mouse/
==========================================================================
*/
abbr[title] {
position: relative;

Expand Down Expand Up @@ -27,8 +31,12 @@ abbr[title]:focus::after {
padding: 3px 5px;
}

/* Add icons to indicate external links */
/* https://christianoliff.com/blog/styling-external-links-with-an-icon-in-css/ */
/*
==========================================================================
Add icons to indicate external links
https://christianoliff.com/blog/styling-external-links-with-an-icon-in-css/
==========================================================================
*/
a svg {
fill: var(--tw-prose-body);
width: 0.6em;
Expand All @@ -38,9 +46,81 @@ a svg {
display: inline-block;
}

/* Hugo sometimes renders empty p and a tags */
/*
==========================================================================
Hugo sometimes renders empty p and a tags
==========================================================================
*/
p:empty,
a:empty,
a svg:first-child {
display: none;
}

/*
==========================================================================
Carousel shortcode
https://blog.logrocket.com/modern-css-carousels-no-javascript-required/
==========================================================================
*/
.carousel-scroller {
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
scroll-marker-group: after;
position: relative;
}
.carousel-scroller::-webkit-scrollbar {
display: none;
}

.carousel-scroller > figure {
flex: 0 0 100%;
scroll-snap-align: start;
margin-block: 0;
margin-inline: 0 !important;
display: flex;
flex-direction: column;
justify-content: center;
}

.carousel-scroller > figure picture {
display: block;
width: 100%;
}

.carousel-scroller > figure img {
display: block;
width: 100%;
height: auto;
margin-inline: 0;
border-radius: 0.375rem;
}

.carousel-scroller::scroll-marker-group {
display: flex;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 0;
}

.carousel-scroller > figure::scroll-marker {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: rgb(var(--color-neutral-300));
transition: background-color 0.2s;
}

.dark .carousel-scroller > figure::scroll-marker {
background: rgb(var(--color-neutral-600));
}

.carousel-scroller > figure::scroll-marker:target-current {
background: rgb(var(--color-primary-500));
}

.dark .carousel-scroller > figure::scroll-marker:target-current {
background: rgb(var(--color-primary-400));
}
8 changes: 5 additions & 3 deletions content/posts/2025-march-dump/index.zh-tw.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,11 @@ coverCaption: "征服 Mission Peak！"

雖然現在公司都有供三餐，所以我平日幾乎不怎麼需要自己打理三餐，但假日如果餐餐外食，在灣區還是有點太奢侈，於是又開始煮飯了。

![煎鮭魚搭配炒蛋和蘑菇，擺盤在淺綠色餐盤上，背景為鍵盤和桌面。](mushroom-omelette-with-salmon.jpg "15 分鐘上桌系列之蘑菇炒蛋配香煎鮭魚")
![簡單家常咖哩飯，內含雞肉、馬鈴薯和紅蘿蔔，盛放在淺色碗中。](curry-rice.jpg "~~很有進步空間的~~咖哩飯")
![日式炒麵上覆蓋海苔、日式美乃滋和太陽蛋，擺放在淺綠色餐盤中。](yakisoba.jpg "怎麼好像意外成功的[日式炒麵](https://docs.tomy.me/yakisoba)")
{{< carousel >}}
{{< figure src="mushroom-omelette-with-salmon.jpg" alt="煎鮭魚搭配炒蛋和蘑菇，擺盤在淺綠色餐盤上，背景為鍵盤和桌面。" caption="15 分鐘上桌系列之蘑菇炒蛋配香煎鮭魚" >}}
{{< figure src="curry-rice.jpg" alt="簡單家常咖哩飯，內含雞肉、馬鈴薯和紅蘿蔔，盛放在淺色碗中。" caption="~~很有進步空間的~~咖哩飯" >}}
{{< figure src="yakisoba.jpg" alt="日式炒麵上覆蓋海苔、日式美乃滋和太陽蛋，擺放在淺綠色餐盤中。" caption="怎麼好像意外成功的[日式炒麵](https://docs.tomy.me/yakisoba)" >}}
{{< /carousel >}}

## 🏞️ 放假出去玩 ⁽⁽ଘ( ˙꒳˙ )ଓ⁾⁾

Expand Down
8 changes: 8 additions & 0 deletions layouts/_shortcodes/carousel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{{ $caption := .Get "caption" }}

<figure class="my-4">
<div class="carousel-scroller overflow-x-auto gap-2 flex">{{ .Inner }}</div>
{{ with $caption }}
<figcaption class="text-center mt-1">{{ . | markdownify }}</figcaption>
{{ end }}
</figure>
Loading