From 1a9a76d53288f4adf10faf4f017a5e7463b37cad Mon Sep 17 00:00:00 2001 From: James Panther <4462786+jpanther@users.noreply.github.com> Date: Wed, 5 Apr 2023 10:50:15 +1000 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Adopt=20logical=20properties=20f?= =?UTF-8?q?or=20RTL=20styling?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 2 + assets/css/compiled/main.css | 213 ++++++++----------- assets/css/main.css | 16 +- exampleSite/content/_index.md | 2 +- exampleSite/layouts/shortcodes/swatches.html | 6 +- layouts/_default/_markup/render-heading.html | 2 +- layouts/_default/baseof.html | 7 +- layouts/_default/list.html | 4 +- layouts/_default/single.html | 6 +- layouts/partials/article-link.html | 14 +- layouts/partials/article-meta.html | 3 +- layouts/partials/article-pagination.html | 18 +- layouts/partials/author.html | 2 +- layouts/partials/badge.html | 2 +- layouts/partials/footer.html | 20 +- layouts/partials/header/basic.html | 20 +- layouts/partials/header/hybrid.html | 38 ++-- layouts/partials/toc.html | 8 +- layouts/shortcodes/alert.html | 2 +- 19 files changed, 166 insertions(+), 219 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7978fe00..db46af3e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index 2ff5f9d0..d7c3cbe3 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -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; } } diff --git a/assets/css/main.css b/assets/css/main.css index 19300e52..061ae9ae 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -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 { diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md index 1697ef84..f1a4ce5e 100755 --- a/exampleSite/content/_index.md +++ b/exampleSite/content/_index.md @@ -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.
- + {{< icon "triangle-exclamation" >}} diff --git a/exampleSite/layouts/shortcodes/swatches.html b/exampleSite/layouts/shortcodes/swatches.html index 974dba74..7adf7c05 100644 --- a/exampleSite/layouts/shortcodes/swatches.html +++ b/exampleSite/layouts/shortcodes/swatches.html @@ -1,14 +1,14 @@
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html index 7ebc0452..2cb38063 100644 --- a/layouts/_default/_markup/render-heading.html +++ b/layouts/_default/_markup/render-heading.html @@ -1 +1 @@ -{{ .Text | safeHTML }} {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}#{{ end }} +{{ .Text | safeHTML }} {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}#{{ end }} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index dddd8656..009ff88b 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -22,8 +22,7 @@ ↓↓{{ i18n "nav.skip_to_main" }}
@@ -37,9 +36,7 @@
{{ block "main" . }}{{ end }} {{ if and (.Site.Params.footer.showScrollToTop | default true) (gt .WordCount 200) }} -
+
{{ if $toc }} -
-
+
+
{{ partial "toc.html" . }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html index fb030cce..70e8fe88 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -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 @@
{{ if and (.Params.showTableOfContents | default (.Site.Params.article.showTableOfContents | default false)) (in .TableOfContents " -
+
+
{{ partial "toc.html" . }}
diff --git a/layouts/partials/article-link.html b/layouts/partials/article-link.html index 39226c33..330cc07f 100644 --- a/layouts/partials/article-link.html +++ b/layouts/partials/article-link.html @@ -1,9 +1,9 @@ -
+
{{- $images := $.Resources.ByType "image" }} {{- $thumbnail := $images.GetMatch (.Params.thumbnail | default "*thumb*") }} {{- $feature := $images.GetMatch (.Params.feature | default "*feature*") | default $thumbnail }} {{- with $feature }} -
+
@@ -39,7 +39,7 @@ >{{ $.Title | emojify }} ↗ @@ -54,7 +54,7 @@ > {{ end }} {{ if and .Draft .Site.Params.article.showDraftLabel }} -
+
{{ partial "badge.html" (i18n "article.draft" | emojify) }}
{{ end }} @@ -66,7 +66,7 @@ {{ partial "article-meta.html" . }}
{{ if .Params.showSummary | default (.Site.Params.list.showSummary | default false) }} -
+
{{ .Summary | emojify }}
{{ end }} diff --git a/layouts/partials/article-meta.html b/layouts/partials/article-meta.html index f5089295..f7c1f43d 100644 --- a/layouts/partials/article-meta.html +++ b/layouts/partials/article-meta.html @@ -32,6 +32,7 @@ {{ $meta.Add "partials" (slice (partial "meta/edit.html" .)) }} {{ end }} +
{{/* Output partials */}} {{ with ($meta.Get "partials") }} @@ -40,7 +41,7 @@ {{/* Output draft label */}} {{ if and (eq $scope "single") (and .Draft .Site.Params.article.showDraftLabel) }} - {{ partial "badge.html" (i18n "article.draft" | emojify) }} + {{ partial "badge.html" (i18n "article.draft" | emojify) }} {{ end }}
diff --git a/layouts/partials/article-pagination.html b/layouts/partials/article-pagination.html index e031f67f..029c3ba6 100644 --- a/layouts/partials/article-pagination.html +++ b/layouts/partials/article-pagination.html @@ -13,12 +13,9 @@ {{ if $prev }} ← - →←→ → - ←→← {{ end }} diff --git a/layouts/partials/author.html b/layouts/partials/author.html index be812abf..f8face0e 100644 --- a/layouts/partials/author.html +++ b/layouts/partials/author.html @@ -5,7 +5,7 @@ {{ if $authorImage }} {{ $authorImage := $authorImage.Fill "192x192" }} {{ $.Site.Author.name | default {{ . }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 0301d40f..9a427333 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -2,11 +2,9 @@ {{/* Footer menu */}} {{ if .Site.Menus.footer }}