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
- 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
### Fixed

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

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

16
assets/css/main.css
View File

@ -61,10 +61,10 @@ body:has(#menu-controller:checked) {
/* Table of Contents */
.toc ul,
.toc li {
@apply px-0 leading-snug list-none;
@apply list-none px-0 leading-snug;
}
.toc ul ul {
@apply ltr:pl-4 rtl:pr-4;
@apply ps-4;
}
.toc a {
@apply font-normal text-neutral-700 dark:text-neutral-400;
@ -84,7 +84,7 @@ body:has(#menu-controller:checked) {
@apply visible;
}
.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:focus,
@ -99,20 +99,20 @@ body:has(#menu-controller:checked) {
/* -- Chroma Highlight -- */
/* Background */
.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 {
@apply p-0 m-0;
@apply m-0 p-0;
}
/* LineTable */
.chroma .lntable {
@apply block w-auto m-0 overflow-auto text-base;
@apply m-0 block w-auto overflow-auto text-base;
}
/* LineNumbersTable */
/* LineNumbers */
.chroma .lnt,
.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 {
@apply p-0 align-top;
@ -274,7 +274,7 @@ body:has(#menu-controller:checked) {
}
/* CommentHashbang */
.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 */
.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.
<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" >}}
</span>
<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">
<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 }}
></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 }}
></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 }}
></span>
</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
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"
><span class="font-bold text-primary-600 ltr:pr-2 rtl:pl-2 dark:text-primary-400"
>&darr;</span
><span class="font-bold pe-2 text-primary-600 dark:text-primary-400">&darr;</span
>{{ i18n "nav.skip_to_main" }}</a
>
</div>
@ -37,9 +36,7 @@
<main id="main-content" class="grow">
{{ block "main" . }}{{ end }}
{{ if and (.Site.Params.footer.showScrollToTop | default true) (gt .WordCount 200) }}
<div
class="pointer-events-none absolute top-[100vh] bottom-0 w-12 ltr:right-0 rtl:left-0"
>
<div class="pointer-events-none absolute bottom-0 end-0 top-[100vh] w-12">
<a
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"

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"
>
{{ 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="toc ltr:pl-5 rtl:pr-5 lg:sticky lg:top-10">
<div class="order-first px-0 lg:order-last lg:max-w-xs lg:ps-8">
<div class="toc ps-5 lg:sticky lg:top-10">
{{ partial "toc.html" . }}
</div>
</div>

6
layouts/_default/single.html
View File

@ -28,7 +28,7 @@
{{- (.Resize "660x").RelPermalink }} 660w,
{{- (.Resize "1024x").RelPermalink }} 1024w,
{{- (.Resize "1320x").RelPermalink }} 2x"
{{ end }}
{{ end }}
{{ end }}
alt="{{ $.Params.featureAlt | default $.Params.coverAlt | default "" }}"
/>
@ -40,8 +40,8 @@
</header>
<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") }}
<div class="order-first px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8">
<div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10">
<div class="order-first px-0 lg:order-last lg:max-w-xs lg:ps-8">
<div class="toc pe-5 print:hidden lg:sticky lg:top-10">
{{ partial "toc.html" . }}
</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" }}
{{- $thumbnail := $images.GetMatch (.Params.thumbnail | default "*thumb*") }}
{{- $feature := $images.GetMatch (.Params.feature | default "*feature*") | default $thumbnail }}
{{- with $feature }}
<div class="flex-none pr-4 sm:pr-6 ">
<div class="flex-none pe-4 sm:pe-6 ">
<a
href="{{ with $.Params.externalUrl }}
{{ . }}
@ -19,8 +19,8 @@
sm:max-w-[10rem]" src="{{ .RelPermalink }}"
{{ else }}
class="w-24 rounded-md sm:w-40" srcset="
{{- (.Fill "160x120 smart").RelPermalink }} 160w,
{{- (.Fill "320x240 smart").RelPermalink }} 2x"
{{- (.Fill "160x120 smart").RelPermalink }}
160w, {{- (.Fill "320x240 smart").RelPermalink }} 2x"
src="{{ (.Fill "160x120 smart").RelPermalink }}"
{{ end }}
/>
@ -39,7 +39,7 @@
>{{ $.Title | emojify }}</a
>
<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" }}"
>
<span class="rtl:hidden">&#8599;</span>
@ -54,7 +54,7 @@
>
{{ end }}
{{ 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) }}
</div>
{{ end }}
@ -66,7 +66,7 @@
{{ partial "article-meta.html" . }}
</div>
{{ 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 }}
</div>
{{ end }}

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

@ -32,6 +32,7 @@
{{ $meta.Add "partials" (slice (partial "meta/edit.html" .)) }}
{{ end }}
<div class="flex flex-row flex-wrap items-center">
{{/* Output partials */}}
{{ with ($meta.Get "partials") }}
@ -40,7 +41,7 @@
{{/* Output draft label */}}
{{ 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 }}
</div>

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

@ -13,12 +13,9 @@
{{ if $prev }}
<a class="group flex" href="{{ $prev.RelPermalink }}">
<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"
>&larr;</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
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"
><span class="ltr:inline rtl:hidden">&larr;</span
><span class="ltr:hidden rtl:inline">&rarr;</span></span
>
<span class="flex flex-col">
<span
@ -49,12 +46,9 @@
</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"
>&rarr;</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
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"
><span class="ltr:inline rtl:hidden">&rarr;</span
><span class="ltr:hidden rtl:inline">&larr;</span></span
>
</a>
{{ end }}

2
layouts/partials/author.html
View File

@ -5,7 +5,7 @@
{{ if $authorImage }}
{{ $authorImage := $authorImage.Fill "192x192" }}
<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"
height="96"
alt="{{ $.Site.Author.name | default "Author" }}"

2
layouts/partials/badge.html
View File

@ -1,6 +1,6 @@
<span class="flex">
<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>

20
layouts/partials/footer.html
View File

@ -2,11 +2,9 @@
{{/* Footer menu */}}
{{ if .Site.Menus.footer }}
<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 }}
<li
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"
>
<li class="group mb-1 ltr:text-right rtl:text-left sm:mb-0 sm:me-7 sm:last:me-0">
{{ if eq .Params.action "search" }}
{{ $.Scratch.Add "searchCount" 1 }}
{{ if $.Site.Params.enableSearch | default false }}
@ -16,7 +14,7 @@
>
{{ with .Params.icon }}
<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" . }}
</span>
@ -36,13 +34,13 @@
aria-label="appearance switcher"
>
<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" }}"
>
{{ partial "icon.html" "moon" }}
</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" }}"
>
{{ partial "icon.html" "sun" }}
@ -55,7 +53,7 @@
{{ with .Params.target }}target="{{ . }}"{{ end }}
>{{ with .Params.icon }}
<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" . }}
</span>
@ -101,18 +99,18 @@
{{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
<div
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"
>
<button id="appearance-switcher-0" type="button" aria-label="appearance switcher">
<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" }}"
>
{{ partial "icon.html" "moon" }}
</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" }}"
>
{{ partial "icon.html" "sun" }}

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

@ -7,12 +7,10 @@
</div>
{{/* Main menu */}}
{{ 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 }}
{{ range .Site.Menus.main }}
<li
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"
>
<li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5">
{{ if eq .Params.action "search" }}
{{ $.Scratch.Add "searchCount" 1 }}
{{ if $.Site.Params.enableSearch | default false }}
@ -22,7 +20,7 @@
>
{{ with .Params.icon | default "search" }}
<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" . }}
</span>
@ -42,7 +40,7 @@
aria-label="appearance switcher"
>
<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" }}"
>
{{ with .Params.icon | default "moon" }}
@ -56,7 +54,7 @@
{{ end }}
</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" }}"
>
{{ with .Params.icon | default "sun" }}
@ -77,7 +75,7 @@
{{ with .Params.target }}target="{{ . }}"{{ end }}
>{{ with .Params.icon }}
<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" . }}
</span>
@ -92,12 +90,10 @@
</li>
{{ end }}
{{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
<li
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"
>
<li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0">
<button id="search-button-m0" title="{{ i18n "search.open_button_title" }}">
<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" }}
</span>

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

@ -14,10 +14,10 @@
</div>
<div
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
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">
<span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400"
@ -26,7 +26,7 @@
</li>
{{ if .Site.Menus.main }}
{{ range .Site.Menus.main }}
<li class="mb-1 group">
<li class="group mb-1">
{{ if eq .Params.action "search" }}
{{ $.Scratch.Add "searchCount" 1 }}
{{ if $.Site.Params.enableSearch | default false }}
@ -36,7 +36,7 @@
>
{{ with .Params.icon | default "search" }}
<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" . }}
</span>
@ -56,7 +56,7 @@
aria-label="appearance switcher"
>
<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" }}"
>
{{ with .Params.icon | default "moon" }}
@ -70,7 +70,7 @@
{{ end }}
</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" }}"
>
{{ with .Params.icon | default "sun" }}
@ -91,7 +91,7 @@
{{ with .Params.target }}target="{{ . }}"{{ end }}
>{{ with .Params.icon }}
<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" . }}
</span>
@ -106,10 +106,10 @@
</li>
{{ end }}
{{ 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" }}">
<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" }}
</span>
@ -121,12 +121,10 @@
</div>
</label>
{{/* 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 }}
{{ range .Site.Menus.main }}
<li
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"
>
<li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0">
{{ if eq .Params.action "search" }}
{{ $.Scratch.Add "searchCount" 1 }}
{{ if $.Site.Params.enableSearch | default false }}
@ -136,7 +134,7 @@
>
{{ with .Params.icon | default "search" }}
<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" . }}
</span>
@ -156,7 +154,7 @@
aria-label="appearance switcher"
>
<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" }}"
>
{{ with .Params.icon | default "moon" }}
@ -170,7 +168,7 @@
{{ end }}
</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" }}"
>
{{ with .Params.icon | default "sun" }}
@ -191,7 +189,7 @@
{{ with .Params.target }}target="{{ . }}"{{ end }}
>{{ with .Params.icon }}
<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" . }}
</span>
@ -206,12 +204,10 @@
</li>
{{ end }}
{{ if and ($.Site.Params.enableSearch | default false) (eq ($.Scratch.Get "searchCount") 0) }}
<li
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"
>
<li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0">
<button id="search-button-m1" title="{{ i18n "search.open_button_title" }}">
<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" }}
</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
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" }}
</summary>
<div
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"
>
<div class="-ms-5 border-s border-dotted border-neutral-300 py-2 ps-5 dark:border-neutral-600">
{{ .TableOfContents | emojify }}
</div>
</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">
<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") }}
</span>
<span class="dark:text-neutral-300">