mirror of
https://github.com/TrezOne/congo-hindi-gujarati.git
synced 2026-07-20 09:51:37 -04:00
💄 Adopt logical properties for RTL styling
This commit is contained in:
James Panther
@@ -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">↗</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 }}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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"
|
||||
>←</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"
|
||||
>→</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">←</span
|
||||
><span class="ltr:hidden rtl:inline">→</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"
|
||||
>→</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"
|
||||
>←</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">→</span
|
||||
><span class="ltr:hidden rtl:inline">←</span></span
|
||||
>
|
||||
</a>
|
||||
{{ end }}
|
||||
|
||||
@@ -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" }}"
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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" }}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user