💄 Adopt logical properties for RTL styling

This commit is contained in:
James Panther
2023-04-05 10:50:15 +10:00
parent 5c6695a183
commit 1a9a76d532
19 changed files with 166 additions and 219 deletions
+9 -11
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" }}