marcel
/
congo
mirror of https://github.com/jpanther/congo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

💄 Adopt logical properties for RTL styling

pull/525/head
James Panther 2023-04-05 10:50:15 +10:00
parent 5c6695a183
commit 1a9a76d532
No known key found for this signature in database
GPG Key ID: D36F789E45745D17
19 changed files with 166 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -13,6 +13,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
### Changed ### Changed
- Search results now respect `showDate` value when displaying article metadata ([#511](https://github.com/jpanther/congo/pull/511)) - Search results now respect `showDate` value when displaying article metadata ([#511](https://github.com/jpanther/congo/pull/511))
- Adopted new Tailwind logical properties for RTL styling
- Upgrade to Tailwind v3.3.1 ([#523](https://github.com/jpanther/congo/pull/523))
- Upgrade to Mermaid v9.4.3 - Upgrade to Mermaid v9.4.3
### Fixed ### Fixed

213
assets/css/compiled/main.css
View File

@ -1083,12 +1083,9 @@ body:has(#menu-controller:checked) {
line-height: 1.375; line-height: 1.375;
} }
:is([dir="ltr"] .toc ul ul) { .toc ul ul {
padding-left: 1rem; -webkit-padding-start: 1rem;
} padding-inline-start: 1rem;
:is([dir="rtl"] .toc ul ul) {
padding-right: 1rem;
} }
.toc a { .toc a {
@ -1124,8 +1121,8 @@ body:has(#menu-controller:checked) {
.copy-button { .copy-button {
visibility: hidden; visibility: hidden;
position: absolute; position: absolute;
top: 0px;
right: 0px; right: 0px;
top: 0px;
z-index: 10; z-index: 10;
width: 5rem; width: 5rem;
cursor: pointer; cursor: pointer;
@ -1684,10 +1681,18 @@ body:has(#menu-controller:checked) {
inset: 0px; inset: 0px;
} }
.-start-6 {
inset-inline-start: -1.5rem;
}
.bottom-0 { .bottom-0 {
bottom: 0px; bottom: 0px;
} }
.end-0 {
inset-inline-end: 0px;
}
.top-0 { .top-0 {
top: 0px; top: 0px;
} }
@ -1778,6 +1783,11 @@ body:has(#menu-controller:checked) {
margin-bottom: -0.25rem; margin-bottom: -0.25rem;
} }
.-ms-5 {
-webkit-margin-start: -1.25rem;
margin-inline-start: -1.25rem;
}
.-mt-3 { .-mt-3 {
margin-top: -0.75rem; margin-top: -0.75rem;
} }
@ -1810,6 +1820,21 @@ body:has(#menu-controller:checked) {
margin-bottom: 2px; margin-bottom: 2px;
} }
.me-14 {
-webkit-margin-end: 3.5rem;
margin-inline-end: 3.5rem;
}
.me-2 {
-webkit-margin-end: 0.5rem;
margin-inline-end: 0.5rem;
}
.me-4 {
-webkit-margin-end: 1rem;
margin-inline-end: 1rem;
}
.ml-2 { .ml-2 {
margin-left: 0.5rem; margin-left: 0.5rem;
} }
@ -1818,6 +1843,16 @@ body:has(#menu-controller:checked) {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.ms-1 {
-webkit-margin-start: 0.25rem;
margin-inline-start: 0.25rem;
}
.ms-2 {
-webkit-margin-start: 0.5rem;
margin-inline-start: 0.5rem;
}
.mt-0 { .mt-0 {
margin-top: 0px; margin-top: 0px;
} }
@ -2082,6 +2117,10 @@ body:has(#menu-controller:checked) {
border-width: 1px; border-width: 1px;
} }
.border-s {
border-inline-start-width: 1px;
}
.border-t { .border-t {
border-top-width: 1px; border-top-width: 1px;
} }
@ -2243,12 +2282,34 @@ body:has(#menu-controller:checked) {
padding-bottom: 1rem; padding-bottom: 1rem;
} }
.pl-2 { .pe-2 {
padding-left: 0.5rem; -webkit-padding-end: 0.5rem;
padding-inline-end: 0.5rem;
} }
.pr-4 { .pe-3 {
padding-right: 1rem; -webkit-padding-end: 0.75rem;
padding-inline-end: 0.75rem;
}
.pe-4 {
-webkit-padding-end: 1rem;
padding-inline-end: 1rem;
}
.pe-5 {
-webkit-padding-end: 1.25rem;
padding-inline-end: 1.25rem;
}
.ps-2 {
-webkit-padding-start: 0.5rem;
padding-inline-start: 0.5rem;
}
.ps-5 {
-webkit-padding-start: 1.25rem;
padding-inline-start: 1.25rem;
} }
.pt-3 { .pt-3 {
@ -2594,11 +2655,6 @@ body:has(#menu-controller:checked) {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
} }
.group:hover .group-hover\:translate-x-\[2px\] {
--tw-translate-x: 2px;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:text-primary-300 { .group:hover .group-hover\:text-primary-300 {
--tw-text-opacity: 1; --tw-text-opacity: 1;
color: rgba(var(--color-primary-300), var(--tw-text-opacity)); color: rgba(var(--color-primary-300), var(--tw-text-opacity));
@ -2629,34 +2685,6 @@ body:has(#menu-controller:checked) {
opacity: 1; opacity: 1;
} }
:is([dir="ltr"] .ltr\:-left-6) {
left: -1.5rem;
}
:is([dir="ltr"] .ltr\:right-0) {
right: 0px;
}
:is([dir="ltr"] .ltr\:-ml-5) {
margin-left: -1.25rem;
}
:is([dir="ltr"] .ltr\:ml-1) {
margin-left: 0.25rem;
}
:is([dir="ltr"] .ltr\:ml-2) {
margin-left: 0.5rem;
}
:is([dir="ltr"] .ltr\:mr-14) {
margin-right: 3.5rem;
}
:is([dir="ltr"] .ltr\:mr-4) {
margin-right: 1rem;
}
:is([dir="ltr"] .ltr\:block) { :is([dir="ltr"] .ltr\:block) {
display: block; display: block;
} }
@ -2669,54 +2697,10 @@ body:has(#menu-controller:checked) {
display: none; display: none;
} }
:is([dir="ltr"] .ltr\:border-l) {
border-left-width: 1px;
}
:is([dir="ltr"] .ltr\:pl-5) {
padding-left: 1.25rem;
}
:is([dir="ltr"] .ltr\:pr-2) {
padding-right: 0.5rem;
}
:is([dir="ltr"] .ltr\:pr-3) {
padding-right: 0.75rem;
}
:is([dir="ltr"] .ltr\:text-right) { :is([dir="ltr"] .ltr\:text-right) {
text-align: right; text-align: right;
} }
:is([dir="rtl"] .rtl\:-right-6) {
right: -1.5rem;
}
:is([dir="rtl"] .rtl\:left-0) {
left: 0px;
}
:is([dir="rtl"] .rtl\:-mr-5) {
margin-right: -1.25rem;
}
:is([dir="rtl"] .rtl\:ml-14) {
margin-left: 3.5rem;
}
:is([dir="rtl"] .rtl\:ml-4) {
margin-left: 1rem;
}
:is([dir="rtl"] .rtl\:mr-1) {
margin-right: 0.25rem;
}
:is([dir="rtl"] .rtl\:mr-2) {
margin-right: 0.5rem;
}
:is([dir="rtl"] .rtl\:block) { :is([dir="rtl"] .rtl\:block) {
display: block; display: block;
} }
@ -2729,22 +2713,6 @@ body:has(#menu-controller:checked) {
display: none; display: none;
} }
:is([dir="rtl"] .rtl\:border-r) {
border-right-width: 1px;
}
:is([dir="rtl"] .rtl\:pl-2) {
padding-left: 0.5rem;
}
:is([dir="rtl"] .rtl\:pl-3) {
padding-left: 0.75rem;
}
:is([dir="rtl"] .rtl\:pr-5) {
padding-right: 1.25rem;
}
:is([dir="rtl"] .rtl\:text-left) { :is([dir="rtl"] .rtl\:text-left) {
text-align: left; text-align: left;
} }
@ -2905,6 +2873,11 @@ body:has(#menu-controller:checked) {
margin-bottom: 0px; margin-bottom: 0px;
} }
.sm\:me-7 {
-webkit-margin-end: 1.75rem;
margin-inline-end: 1.75rem;
}
.sm\:flex { .sm\:flex {
display: flex; display: flex;
} }
@ -2951,8 +2924,9 @@ body:has(#menu-controller:checked) {
padding-bottom: 2.5rem; padding-bottom: 2.5rem;
} }
.sm\:pr-6 { .sm\:pe-6 {
padding-right: 1.5rem; -webkit-padding-end: 1.5rem;
padding-inline-end: 1.5rem;
} }
.sm\:pt-10 { .sm\:pt-10 {
@ -2964,20 +2938,14 @@ body:has(#menu-controller:checked) {
line-height: 1.75rem; line-height: 1.75rem;
} }
:is([dir="ltr"] .ltr\:sm\:mr-7) { .sm\:last\:me-0:last-child {
margin-right: 1.75rem; -webkit-margin-end: 0px;
margin-inline-end: 0px;
} }
:is([dir="ltr"] .ltr\:sm\:last\:mr-0:last-child) { .sm\:last\:me-0\.5:last-child {
margin-right: 0px; -webkit-margin-end: 0.125rem;
} margin-inline-end: 0.125rem;
:is([dir="rtl"] .rtl\:sm\:ml-7) {
margin-left: 1.75rem;
}
:is([dir="rtl"] .rtl\:sm\:last\:ml-0:last-child) {
margin-left: 0px;
} }
} }
@ -3034,12 +3002,9 @@ body:has(#menu-controller:checked) {
padding-right: 8rem; padding-right: 8rem;
} }
:is([dir="ltr"] .ltr\:lg\:pl-8) { .lg\:ps-8 {
padding-left: 2rem; -webkit-padding-start: 2rem;
} padding-inline-start: 2rem;
:is([dir="rtl"] .rtl\:lg\:pr-8) {
padding-right: 2rem;
} }
} }

16
assets/css/main.css
View File

@ -61,10 +61,10 @@ body:has(#menu-controller:checked) {
/* Table of Contents */ /* Table of Contents */
.toc ul, .toc ul,
.toc li { .toc li {
@apply px-0 leading-snug list-none; @apply list-none px-0 leading-snug;
} }
.toc ul ul { .toc ul ul {
@apply ltr:pl-4 rtl:pr-4; @apply ps-4;
} }
.toc a { .toc a {
@apply font-normal text-neutral-700 dark:text-neutral-400; @apply font-normal text-neutral-700 dark:text-neutral-400;
@ -84,7 +84,7 @@ body:has(#menu-controller:checked) {
@apply visible; @apply visible;
} }
.copy-button { .copy-button {
@apply absolute top-0 right-0 z-10 invisible w-20 py-1 font-mono text-sm cursor-pointer whitespace-nowrap rounded-bl-md rounded-tr-md bg-neutral-200 text-neutral-700 opacity-90 dark:bg-neutral-600 dark:text-neutral-200; @apply invisible absolute right-0 top-0 z-10 w-20 cursor-pointer whitespace-nowrap rounded-bl-md rounded-tr-md bg-neutral-200 py-1 font-mono text-sm text-neutral-700 opacity-90 dark:bg-neutral-600 dark:text-neutral-200;
} }
.copy-button:hover, .copy-button:hover,
.copy-button:focus, .copy-button:focus,
@ -99,20 +99,20 @@ body:has(#menu-controller:checked) {
/* -- Chroma Highlight -- */ /* -- Chroma Highlight -- */
/* Background */ /* Background */
.chroma { .chroma {
@apply py-3 rounded-md bg-neutral-50 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200; @apply rounded-md bg-neutral-50 py-3 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200;
} }
.chroma pre { .chroma pre {
@apply p-0 m-0; @apply m-0 p-0;
} }
/* LineTable */ /* LineTable */
.chroma .lntable { .chroma .lntable {
@apply block w-auto m-0 overflow-auto text-base; @apply m-0 block w-auto overflow-auto text-base;
} }
/* LineNumbersTable */ /* LineNumbersTable */
/* LineNumbers */ /* LineNumbers */
.chroma .lnt, .chroma .lnt,
.chroma .ln { .chroma .ln {
@apply px-2 mr-2 text-neutral-600 dark:text-neutral-300; @apply mr-2 px-2 text-neutral-600 dark:text-neutral-300;
} }
.chroma .lntd { .chroma .lntd {
@apply p-0 align-top; @apply p-0 align-top;
@ -274,7 +274,7 @@ body:has(#menu-controller:checked) {
} }
/* CommentHashbang */ /* CommentHashbang */
.chroma .ch { .chroma .ch {
@apply italic font-semibold text-neutral-500 dark:text-neutral-400; @apply font-semibold italic text-neutral-500 dark:text-neutral-400;
} }
/* GenericEmph */ /* GenericEmph */
.chroma .ge { .chroma .ge {

2
exampleSite/content/_index.md
View File

@ -10,7 +10,7 @@ A powerful, lightweight theme for Hugo built with Tailwind CSS.
This is a demo site built entirely using Congo. It also contains a complete set of [theme documentation]({{< ref "docs" >}}). Congo is flexible and is great for both static page-based content (like this demo) or a traditional blog with a feed of recent posts. This is a demo site built entirely using Congo. It also contains a complete set of [theme documentation]({{< ref "docs" >}}). Congo is flexible and is great for both static page-based content (like this demo) or a traditional blog with a feed of recent posts.
<div class="flex px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900"> <div class="flex px-4 py-2 mb-8 text-base rounded-md bg-primary-100 dark:bg-primary-900">
<span class="flex items-center ltr:pr-3 rtl:pl-3 text-primary-400"> <span class="flex items-center pe-3 text-primary-400">
{{< icon "triangle-exclamation" >}} {{< icon "triangle-exclamation" >}}
</span> </span>
<span class="flex items-center justify-between grow dark:text-neutral-300"> <span class="flex items-center justify-between grow dark:text-neutral-300">

6
exampleSite/layouts/shortcodes/swatches.html
View File

@ -1,14 +1,14 @@
<div class="flex justify-between"> <div class="flex justify-between">
<span <span
class="w-full py-6 mr-2 rounded-md" class="mr-2 w-full rounded-md py-6"
{{ with .Get 0 }}style="background-color: {{ . }}"{{ end }} {{ with .Get 0 }}style="background-color: {{ . }}"{{ end }}
></span> ></span>
<span <span
class="w-full py-6 mr-2 rounded-md" class="mr-2 w-full rounded-md py-6"
{{ with .Get 1 }}style="background-color: {{ . }}"{{ end }} {{ with .Get 1 }}style="background-color: {{ . }}"{{ end }}
></span> ></span>
<span <span
class="w-full py-6 mr-2 rounded-md" class="mr-2 w-full rounded-md py-6"
{{ with .Get 2 }}style="background-color: {{ . }}"{{ end }} {{ with .Get 2 }}style="background-color: {{ . }}"{{ end }}
></span> ></span>
</div> </div>

2
layouts/_default/_markup/render-heading.html
View File

@ -1 +1 @@
<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="relative group">{{ .Text | safeHTML }} {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}<span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#{{ .Anchor | safeURL }}" aria-label="{{ i18n "article.anchor_label" }}">#</a></span>{{ end }}</h{{ .Level }}> <h{{ .Level }} id="{{ .Anchor | safeURL }}" class="relative group">{{ .Text | safeHTML }} {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}<span class="absolute top-0 w-6 transition-opacity opacity-0 -start-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style="text-decoration-line: none !important;" href="#{{ .Anchor | safeURL }}" aria-label="{{ i18n "article.anchor_label" }}">#</a></span>{{ end }}</h{{ .Level }}>

7
layouts/_default/baseof.html
View File

@ -22,8 +22,7 @@
<a <a
class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 focus:translate-y-0 dark:bg-neutral-600" class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 focus:translate-y-0 dark:bg-neutral-600"
href="#main-content" href="#main-content"
><span class="font-bold text-primary-600 ltr:pr-2 rtl:pl-2 dark:text-primary-400" ><span class="font-bold pe-2 text-primary-600 dark:text-primary-400">&darr;</span
>&darr;</span
>{{ i18n "nav.skip_to_main" }}</a >{{ i18n "nav.skip_to_main" }}</a
> >
</div> </div>
@ -37,9 +36,7 @@
<main id="main-content" class="grow"> <main id="main-content" class="grow">
{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }}
{{ if and (.Site.Params.footer.showScrollToTop | default true) (gt .WordCount 200) }} {{ if and (.Site.Params.footer.showScrollToTop | default true) (gt .WordCount 200) }}
<div <div class="pointer-events-none absolute bottom-0 end-0 top-[100vh] w-12">
class="pointer-events-none absolute top-[100vh] bottom-0 w-12 ltr:right-0 rtl:left-0"
>
<a <a
href="#the-top" href="#the-top"
class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 backdrop-blur hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400" class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 backdrop-blur hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400"

4
layouts/_default/list.html
View File

@ -14,8 +14,8 @@
{{- end }} prose flex max-w-full flex-col dark:prose-invert lg:flex-row" {{- end }} prose flex max-w-full flex-col dark:prose-invert lg:flex-row"
> >
{{ if $toc }} {{ if $toc }}
<div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8"> <div class="order-first px-0 lg:order-last lg:max-w-xs lg:ps-8">
<div class="toc ltr:pl-5 rtl:pr-5 lg:sticky lg:top-10"> <div class="toc ps-5 lg:sticky lg:top-10">
{{ partial "toc.html" . }} {{ partial "toc.html" . }}
</div> </div>
</div> </div>

4
layouts/_default/single.html
View File

@ -40,8 +40,8 @@
</header> </header>
<section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row"> <section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">
{{ if and (.Params.showTableOfContents | default (.Site.Params.article.showTableOfContents | default false)) (in .TableOfContents "<ul") }} {{ if and (.Params.showTableOfContents | default (.Site.Params.article.showTableOfContents | default false)) (in .TableOfContents "<ul") }}
<div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8"> <div class="order-first px-0 lg:order-last lg:max-w-xs lg:ps-8">
<div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10"> <div class="toc pe-5 print:hidden lg:sticky lg:top-10">
{{ partial "toc.html" . }} {{ partial "toc.html" . }}
</div> </div>
</div> </div>

14
layouts/partials/article-link.html
View File

@ -1,9 +1,9 @@
<article class="flex flex-row mt-6 max-w-prose"> <article class="mt-6 flex max-w-prose flex-row">
{{- $images := $.Resources.ByType "image" }} {{- $images := $.Resources.ByType "image" }}
{{- $thumbnail := $images.GetMatch (.Params.thumbnail | default "*thumb*") }} {{- $thumbnail := $images.GetMatch (.Params.thumbnail | default "*thumb*") }}
{{- $feature := $images.GetMatch (.Params.feature | default "*feature*") | default $thumbnail }} {{- $feature := $images.GetMatch (.Params.feature | default "*feature*") | default $thumbnail }}
{{- with $feature }} {{- with $feature }}
<div class="flex-none pr-4 sm:pr-6 "> <div class="flex-none pe-4 sm:pe-6 ">
<a <a
href="{{ with $.Params.externalUrl }} href="{{ with $.Params.externalUrl }}
{{ . }} {{ . }}
@ -19,8 +19,8 @@
sm:max-w-[10rem]" src="{{ .RelPermalink }}" sm:max-w-[10rem]" src="{{ .RelPermalink }}"
{{ else }} {{ else }}
class="w-24 rounded-md sm:w-40" srcset=" class="w-24 rounded-md sm:w-40" srcset="
{{- (.Fill "160x120 smart").RelPermalink }} 160w, {{- (.Fill "160x120 smart").RelPermalink }}
{{- (.Fill "320x240 smart").RelPermalink }} 2x" 160w, {{- (.Fill "320x240 smart").RelPermalink }} 2x"
src="{{ (.Fill "160x120 smart").RelPermalink }}" src="{{ (.Fill "160x120 smart").RelPermalink }}"
{{ end }} {{ end }}
/> />
@ -39,7 +39,7 @@
>{{ $.Title | emojify }}</a >{{ $.Title | emojify }}</a
> >
<span <span
class="text-xs align-top cursor-default text-neutral-400 dark:text-neutral-500" class="cursor-default align-top text-xs text-neutral-400 dark:text-neutral-500"
title="{{ i18n "list.externalurl_title" }}" title="{{ i18n "list.externalurl_title" }}"
> >
<span class="rtl:hidden">&#8599;</span> <span class="rtl:hidden">&#8599;</span>
@ -54,7 +54,7 @@
> >
{{ end }} {{ end }}
{{ if and .Draft .Site.Params.article.showDraftLabel }} {{ if and .Draft .Site.Params.article.showDraftLabel }}
<div class=" ltr:ml-2 rtl:mr-2"> <div class="ms-2">
{{ partial "badge.html" (i18n "article.draft" | emojify) }} {{ partial "badge.html" (i18n "article.draft" | emojify) }}
</div> </div>
{{ end }} {{ end }}
@ -66,7 +66,7 @@
{{ partial "article-meta.html" . }} {{ partial "article-meta.html" . }}
</div> </div>
{{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }} {{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }}
<div class="py-1 prose dark:prose-invert"> <div class="prose py-1 dark:prose-invert">
{{ .Summary | emojify }} {{ .Summary | emojify }}
</div> </div>
{{ end }} {{ end }}

3
layouts/partials/article-meta.html
View File

@ -32,6 +32,7 @@
{{ $meta.Add "partials" (slice (partial "meta/edit.html" .)) }} {{ $meta.Add "partials" (slice (partial "meta/edit.html" .)) }}
{{ end }} {{ end }}
<div class="flex flex-row flex-wrap items-center"> <div class="flex flex-row flex-wrap items-center">
{{/* Output partials */}} {{/* Output partials */}}
{{ with ($meta.Get "partials") }} {{ with ($meta.Get "partials") }}
@ -40,7 +41,7 @@
{{/* Output draft label */}} {{/* Output draft label */}}
{{ if and (eq $scope "single") (and .Draft .Site.Params.article.showDraftLabel) }} {{ if and (eq $scope "single") (and .Draft .Site.Params.article.showDraftLabel) }}
<span class="pl-2">{{ partial "badge.html" (i18n "article.draft" | emojify) }}</span> <span class="ps-2">{{ partial "badge.html" (i18n "article.draft" | emojify) }}</span>
{{ end }} {{ end }}
</div> </div>

18
layouts/partials/article-pagination.html
View File

@ -13,12 +13,9 @@
{{ if $prev }} {{ if $prev }}
<a class="group flex" href="{{ $prev.RelPermalink }}"> <a class="group flex" href="{{ $prev.RelPermalink }}">
<span <span
class="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400" class="me-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 dark:text-neutral dark:group-hover:text-primary-400"
>&larr;</span ><span class="ltr:inline rtl:hidden">&larr;</span
> ><span class="ltr:hidden rtl:inline">&rarr;</span></span
<span
class="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
>&rarr;</span
> >
<span class="flex flex-col"> <span class="flex flex-col">
<span <span
@ -49,12 +46,9 @@
</span> </span>
</span> </span>
<span <span
class="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400" class="ms-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 dark:text-neutral dark:group-hover:text-primary-400"
>&rarr;</span ><span class="ltr:inline rtl:hidden">&rarr;</span
> ><span class="ltr:hidden rtl:inline">&larr;</span></span
<span
class="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
>&larr;</span
> >
</a> </a>
{{ end }} {{ end }}

2
layouts/partials/author.html
View File

@ -5,7 +5,7 @@
{{ if $authorImage }} {{ if $authorImage }}
{{ $authorImage := $authorImage.Fill "192x192" }} {{ $authorImage := $authorImage.Fill "192x192" }}
<img <img
class="!mt-0 !mb-0 h-24 w-24 rounded-full ltr:mr-4 rtl:ml-4" class="!mb-0 !mt-0 me-4 h-24 w-24 rounded-full"
width="96" width="96"
height="96" height="96"
alt="{{ $.Site.Author.name | default "Author" }}" alt="{{ $.Site.Author.name | default "Author" }}"

2
layouts/partials/badge.html
View File

@ -1,6 +1,6 @@
<span class="flex"> <span class="flex">
<span <span
class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 ltr:ml-1 rtl:mr-1 dark:border-primary-600 dark:text-primary-400" class="ms-1 rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"
> >
{{ . }} {{ . }}
</span> </span>

20
layouts/partials/footer.html
View File

@ -2,11 +2,9 @@
{{/* Footer menu */}} {{/* Footer menu */}}
{{ if .Site.Menus.footer }} {{ if .Site.Menus.footer }}
<nav class="pb-4 text-base font-medium text-neutral-500 dark:text-neutral-400"> <nav class="pb-4 text-base font-medium text-neutral-500 dark:text-neutral-400">
<ul class="flex flex-col list-none sm:flex-row"> <ul class="flex list-none flex-col sm:flex-row">
{{ range .Site.Menus.footer }} {{ range .Site.Menus.footer }}
<li <li class="group mb-1 ltr:text-right rtl:text-left sm:mb-0 sm:me-7 sm:last:me-0">
class="mb-1 group ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
>
{{ if eq .Params.action "search" }} {{ if eq .Params.action "search" }}
{{ $.Scratch.Add "searchCount" 1 }} {{ $.Scratch.Add "searchCount" 1 }}
{{ if $.Site.Params.enableSearch | default false }} {{ if $.Site.Params.enableSearch | default false }}
@ -16,7 +14,7 @@
> >
{{ with .Params.icon }} {{ with .Params.icon }}
<span <span
class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600" class="group-dark:hover:text-primary-400 transition-colors group-hover:text-primary-600"
> >
{{ partial "icon.html" . }} {{ partial "icon.html" . }}
</span> </span>
@ -36,13 +34,13 @@
aria-label="appearance switcher" aria-label="appearance switcher"
> >
<span <span
class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden" class="group-dark:hover:text-primary-400 inline transition-colors group-hover:text-primary-600 dark:hidden"
title="{{ i18n "footer.dark_appearance" }}" title="{{ i18n "footer.dark_appearance" }}"
> >
{{ partial "icon.html" "moon" }} {{ partial "icon.html" "moon" }}
</span> </span>
<span <span
class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline" class="group-dark:hover:text-primary-400 hidden transition-colors group-hover:text-primary-600 dark:inline"
title="{{ i18n "footer.light_appearance" }}" title="{{ i18n "footer.light_appearance" }}"
> >
{{ partial "icon.html" "sun" }} {{ partial "icon.html" "sun" }}
@ -55,7 +53,7 @@
{{ with .Params.target }}target="{{ . }}"{{ end }} {{ with .Params.target }}target="{{ . }}"{{ end }}
>{{ with .Params.icon }} >{{ with .Params.icon }}
<span <span
class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600" class="group-dark:hover:text-primary-400 transition-colors group-hover:text-primary-600"
> >
{{ partial "icon.html" . }} {{ partial "icon.html" . }}
</span> </span>
@ -101,18 +99,18 @@
{{ if .Site.Params.footer.showAppearanceSwitcher | default false }} {{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
<div <div
class="{{ if .Site.Params.footer.showScrollToTop | default true -}} class="{{ if .Site.Params.footer.showScrollToTop | default true -}}
ltr:mr-14 rtl:ml-14 me-14
{{- end }} cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400" {{- end }} cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"
> >
<button id="appearance-switcher-0" type="button" aria-label="appearance switcher"> <button id="appearance-switcher-0" type="button" aria-label="appearance switcher">
<div <div
class="flex items-center justify-center w-12 h-12 dark:hidden" class="flex h-12 w-12 items-center justify-center dark:hidden"
title="{{ i18n "footer.dark_appearance" }}" title="{{ i18n "footer.dark_appearance" }}"
> >
{{ partial "icon.html" "moon" }} {{ partial "icon.html" "moon" }}
</div> </div>
<div <div
class="items-center justify-center hidden w-12 h-12 dark:flex" class="hidden h-12 w-12 items-center justify-center dark:flex"
title="{{ i18n "footer.light_appearance" }}" title="{{ i18n "footer.light_appearance" }}"
> >
{{ partial "icon.html" "sun" }} {{ partial "icon.html" "sun" }}

20
layouts/partials/header/basic.html
View File

@ -7,12 +7,10 @@
</div> </div>
{{/* Main menu */}} {{/* Main menu */}}
{{ if or .Site.Menus.main (.Site.Params.enableSearch | default false) }} {{ if or .Site.Menus.main (.Site.Params.enableSearch | default false) }}
<ul class="flex flex-col list-none ltr:text-right rtl:text-left sm:flex-row"> <ul class="flex list-none flex-col ltr:text-right rtl:text-left sm:flex-row">
{{ if .Site.Menus.main }} {{ if .Site.Menus.main }}
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
<li <li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5">
class="mb-1 group sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
>
{{ if eq .Params.action "search" }} {{ if eq .Params.action "search" }}
{{ $.Scratch.Add "searchCount" 1 }} {{ $.Scratch.Add "searchCount" 1 }}
{{ if $.Site.Params.enableSearch | default false }} {{ if $.Site.Params.enableSearch | default false }}
@ -22,7 +20,7 @@
> >
{{ with .Params.icon | default "search" }} {{ with .Params.icon | default "search" }}
<span <span
class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600" class="group-dark:hover:text-primary-400 transition-colors group-hover:text-primary-600"
> >
{{ partial "icon.html" . }} {{ partial "icon.html" . }}
</span> </span>
@ -42,7 +40,7 @@
aria-label="appearance switcher" aria-label="appearance switcher"
> >
<span <span
class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden" class="group-dark:hover:text-primary-400 inline transition-colors group-hover:text-primary-600 dark:hidden"
title="{{ i18n "footer.dark_appearance" }}" title="{{ i18n "footer.dark_appearance" }}"
> >
{{ with .Params.icon | default "moon" }} {{ with .Params.icon | default "moon" }}
@ -56,7 +54,7 @@
{{ end }} {{ end }}
</span> </span>
<span <span
class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline" class="group-dark:hover:text-primary-400 hidden transition-colors group-hover:text-primary-600 dark:inline"
title="{{ i18n "footer.light_appearance" }}" title="{{ i18n "footer.light_appearance" }}"
> >
{{ with .Params.icon | default "sun" }} {{ with .Params.icon | default "sun" }}
@ -77,7 +75,7 @@
{{ with .Params.target }}target="{{ . }}"{{ end }} {{ with .Params.target }}target="{{ . }}"{{ end }}
>{{ with .Params.icon }} >{{ with .Params.icon }}
<span <span
class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600" class="group-dark:hover:text-primary-400 transition-colors group-hover:text-primary-600"
> >
{{ partial "icon.html" . }} {{ partial "icon.html" . }}
</span> </span>
@ -92,12 +90,10 @@
</li> </li>
{{ end }} {{ end }}
{{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }} {{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
<li <li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0">
class="mb-1 group sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
>
<button id="search-button-m0" title="{{ i18n "search.open_button_title" }}"> <button id="search-button-m0" title="{{ i18n "search.open_button_title" }}">
<span <span
class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600" class="group-dark:hover:text-primary-400 transition-colors group-hover:text-primary-600"
> >
{{ partial "icon.html" "search" }} {{ partial "icon.html" "search" }}
</span> </span>

38
layouts/partials/header/hybrid.html
View File

@ -14,10 +14,10 @@
</div> </div>
<div <div
id="menu-wrapper" id="menu-wrapper"
class="fixed inset-0 z-30 invisible w-full h-full m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50" class="invisible fixed inset-0 z-30 m-auto h-full w-full cursor-default overflow-auto bg-neutral-100/50 opacity-0 backdrop-blur-sm transition-opacity dark:bg-neutral-900/50"
> >
<ul <ul
class="flex flex-col w-full px-6 py-6 mx-auto overflow-visible list-none max-w-7xl ltr:text-right rtl:text-left sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32" class="mx-auto flex w-full max-w-7xl list-none flex-col overflow-visible px-6 py-6 ltr:text-right rtl:text-left sm:px-14 sm:py-10 sm:pt-10 md:px-24 lg:px-32"
> >
<li class="mb-1"> <li class="mb-1">
<span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400" <span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400"
@ -26,7 +26,7 @@
</li> </li>
{{ if .Site.Menus.main }} {{ if .Site.Menus.main }}
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
<li class="mb-1 group"> <li class="group mb-1">
{{ if eq .Params.action "search" }} {{ if eq .Params.action "search" }}
{{ $.Scratch.Add "searchCount" 1 }} {{ $.Scratch.Add "searchCount" 1 }}
{{ if $.Site.Params.enableSearch | default false }} {{ if $.Site.Params.enableSearch | default false }}
@ -36,7 +36,7 @@
> >
{{ with .Params.icon | default "search" }} {{ with .Params.icon | default "search" }}
<span <span
class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600" class="group-dark:hover:text-primary-400 transition-colors group-hover:text-primary-600"
> >
{{ partial "icon.html" . }} {{ partial "icon.html" . }}
</span> </span>
@ -56,7 +56,7 @@
aria-label="appearance switcher" aria-label="appearance switcher"
> >
<span <span
class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden" class="group-dark:hover:text-primary-400 inline transition-colors group-hover:text-primary-600 dark:hidden"
title="{{ i18n "footer.dark_appearance" }}" title="{{ i18n "footer.dark_appearance" }}"
> >
{{ with .Params.icon | default "moon" }} {{ with .Params.icon | default "moon" }}
@ -70,7 +70,7 @@
{{ end }} {{ end }}
</span> </span>
<span <span
class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline" class="group-dark:hover:text-primary-400 hidden transition-colors group-hover:text-primary-600 dark:inline"
title="{{ i18n "footer.light_appearance" }}" title="{{ i18n "footer.light_appearance" }}"
> >
{{ with .Params.icon | default "sun" }} {{ with .Params.icon | default "sun" }}
@ -91,7 +91,7 @@
{{ with .Params.target }}target="{{ . }}"{{ end }} {{ with .Params.target }}target="{{ . }}"{{ end }}
>{{ with .Params.icon }} >{{ with .Params.icon }}
<span <span
class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600" class="group-dark:hover:text-primary-400 transition-colors group-hover:text-primary-600"
> >
{{ partial "icon.html" . }} {{ partial "icon.html" . }}
</span> </span>
@ -106,10 +106,10 @@
</li> </li>
{{ end }} {{ end }}
{{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }} {{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
<li class="mb-1 group"> <li class="group mb-1">
<button id="search-button-m0" title="{{ i18n "search.open_button_title" }}"> <button id="search-button-m0" title="{{ i18n "search.open_button_title" }}">
<span <span
class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600" class="group-dark:hover:text-primary-400 transition-colors group-hover:text-primary-600"
> >
{{ partial "icon.html" "search" }} {{ partial "icon.html" "search" }}
</span> </span>
@ -121,12 +121,10 @@
</div> </div>
</label> </label>
{{/* Basic menu */}} {{/* Basic menu */}}
<ul class="flex-row hidden list-none ltr:text-right rtl:text-left sm:flex"> <ul class="hidden list-none flex-row ltr:text-right rtl:text-left sm:flex">
{{ if .Site.Menus.main }} {{ if .Site.Menus.main }}
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
<li <li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0">
class="mb-1 group sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
>
{{ if eq .Params.action "search" }} {{ if eq .Params.action "search" }}
{{ $.Scratch.Add "searchCount" 1 }} {{ $.Scratch.Add "searchCount" 1 }}
{{ if $.Site.Params.enableSearch | default false }} {{ if $.Site.Params.enableSearch | default false }}
@ -136,7 +134,7 @@
> >
{{ with .Params.icon | default "search" }} {{ with .Params.icon | default "search" }}
<span <span
class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600" class="group-dark:hover:text-primary-400 transition-colors group-hover:text-primary-600"
> >
{{ partial "icon.html" . }} {{ partial "icon.html" . }}
</span> </span>
@ -156,7 +154,7 @@
aria-label="appearance switcher" aria-label="appearance switcher"
> >
<span <span
class="inline transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:hidden" class="group-dark:hover:text-primary-400 inline transition-colors group-hover:text-primary-600 dark:hidden"
title="{{ i18n "footer.dark_appearance" }}" title="{{ i18n "footer.dark_appearance" }}"
> >
{{ with .Params.icon | default "moon" }} {{ with .Params.icon | default "moon" }}
@ -170,7 +168,7 @@
{{ end }} {{ end }}
</span> </span>
<span <span
class="hidden transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600 dark:inline" class="group-dark:hover:text-primary-400 hidden transition-colors group-hover:text-primary-600 dark:inline"
title="{{ i18n "footer.light_appearance" }}" title="{{ i18n "footer.light_appearance" }}"
> >
{{ with .Params.icon | default "sun" }} {{ with .Params.icon | default "sun" }}
@ -191,7 +189,7 @@
{{ with .Params.target }}target="{{ . }}"{{ end }} {{ with .Params.target }}target="{{ . }}"{{ end }}
>{{ with .Params.icon }} >{{ with .Params.icon }}
<span <span
class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600" class="group-dark:hover:text-primary-400 transition-colors group-hover:text-primary-600"
> >
{{ partial "icon.html" . }} {{ partial "icon.html" . }}
</span> </span>
@ -206,12 +204,10 @@
</li> </li>
{{ end }} {{ end }}
{{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }} {{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
<li <li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0">
class="mb-1 group sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"
>
<button id="search-button-m1" title="{{ i18n "search.open_button_title" }}"> <button id="search-button-m1" title="{{ i18n "search.open_button_title" }}">
<span <span
class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600" class="group-dark:hover:text-primary-400 transition-colors group-hover:text-primary-600"
> >
{{ partial "icon.html" "search" }} {{ partial "icon.html" "search" }}
</span> </span>

8
layouts/partials/toc.html
View File

@ -1,12 +1,10 @@
<details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5"> <details open class="-ms-5 mt-0 overflow-hidden rounded-lg ps-5">
<summary <summary
class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden" class="-ms-5 block cursor-pointer bg-neutral-100 py-1 ps-5 text-lg font-semibold text-neutral-800 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden"
> >
{{ i18n "article.table_of_contents" }} {{ i18n "article.table_of_contents" }}
</summary> </summary>
<div <div class="-ms-5 border-s border-dotted border-neutral-300 py-2 ps-5 dark:border-neutral-600">
class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"
>
{{ .TableOfContents | emojify }} {{ .TableOfContents | emojify }}
</div> </div>
</details> </details>

2
layouts/shortcodes/alert.html
View File

@ -1,5 +1,5 @@
<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900"> <div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
<span class="text-primary-400 ltr:pr-3 rtl:pl-3"> <span class="pe-3 text-primary-400">
{{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }} {{ partial "icon.html" (.Get 0 | default "triangle-exclamation") }}
</span> </span>
<span class="dark:text-neutral-300"> <span class="dark:text-neutral-300">