🎨 Standardise Tailwind CSS class order

pull/278/head
James Panther 2022-08-18 14:59:46 +10:00
parent 03c8a02144
commit 73e16a25a2
No known key found for this signature in database
GPG Key ID: D36F789E45745D17
22 changed files with 54 additions and 53 deletions

View File

@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
### Added
- Traditional Chinese (Taiwan) translation ([#262](https://github.com/jpanther/congo/pull/262))
- Tailwind plugin for Prettier to standardise the order of CSS classes ([#268](https://github.com/jpanther/congo/pull/268))
### Changed

View File

@ -15,13 +15,13 @@
>
{{- partial "head.html" . -}}
<body
class="flex flex-col h-screen px-6 m-auto text-lg leading-7 bg-neutral text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-neutral max-w-7xl"
class="flex flex-col h-screen px-6 m-auto text-lg leading-7 max-w-7xl bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral sm:px-14 md:px-24 lg:px-32"
>
<div id="the-top" class="absolute flex self-center">
<a
class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 dark:bg-neutral-600 focus:translate-y-0"
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 ltr:pr-2 rtl:pl-2 text-primary-600 dark:text-primary-400"
><span class="font-bold text-primary-600 ltr:pr-2 rtl:pl-2 dark:text-primary-400"
>&darr;</span
>{{ i18n "nav.skip_to_main" }}</a
>
@ -37,11 +37,11 @@
{{ block "main" . }}{{ end }}
{{ if and (.Site.Params.footer.showScrollToTop | default true) (gt .WordCount 200) }}
<div
class="absolute top-[100vh] ltr:right-0 rtl:left-0 w-12 pointer-events-none bottom-0"
class="pointer-events-none absolute top-[100vh] bottom-0 w-12 ltr:right-0 rtl:left-0"
>
<a
href="#the-top"
class="w-12 h-12 sticky pointer-events-auto top-[calc(100vh-5.5rem)] bg-neutral/50 dark:bg-neutral-800/50 backdrop-blur rounded-full text-xl flex items-center justify-center text-neutral-700 dark:text-neutral hover:text-primary-600 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"
aria-label="{{ i18n "nav.scroll_to_top_title" }}"
title="{{ i18n "nav.scroll_to_top_title" }}"
>

View File

@ -7,15 +7,15 @@
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
</header>
<section
class="flex flex-col max-w-full prose lg:flex-row dark:prose-invert {{ if $toc -}}
class="{{ if $toc -}}
mt-12
{{- else -}}
mt-0
{{- end }}"
{{- end }} prose flex max-w-full flex-col dark:prose-invert lg:flex-row"
>
{{ if $toc }}
<div class="order-first px-0 lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8 lg:order-last">
<div class="ltr:pl-5 rtl:pr-5 toc lg:sticky lg:top-10">
<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">
{{ partial "toc.html" . }}
</div>
</div>
@ -28,10 +28,10 @@
<section>
{{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
{{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
<h2 class="mt-12 text-2xl font-bold first:mt-8 text-neutral-700 dark:text-neutral-300">
<h2 class="mt-12 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
{{ .Key }}
</h2>
<hr class="border-dotted border-neutral-400 w-36" />
<hr class="border-dotted w-36 border-neutral-400" />
{{ end }}
{{ range .Pages }}
{{ partial "article-link.html" . }}

View File

@ -11,10 +11,10 @@
{{ partial "article-meta.html" (dict "context" . "scope" "single") }}
</div>
</header>
<section class="flex flex-col max-w-full mt-0 prose lg:flex-row dark:prose-invert">
<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:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8 lg:order-last">
<div class="ltr:pl-5 rtl:pr-5 toc lg:sticky lg:top-10 print:hidden">
<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">
{{ partial "toc.html" . }}
</div>
</div>

View File

@ -6,7 +6,7 @@
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
</header>
{{ if .Content }}
<section class="flex flex-col max-w-full mt-0 prose lg:flex-row dark:prose-invert">
<section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">
<div class="min-w-0 min-h-0 max-w-prose">
{{ .Content | emojify }}
</div>
@ -17,7 +17,7 @@
<article class="w-full px-2 my-3 overflow-hidden sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5">
<h2 class="flex items-center">
<a
class="text-xl font-medium hover:underline decoration-primary-500 hover:underline-offset-2"
class="text-xl font-medium decoration-primary-500 hover:underline hover:underline-offset-2"
href="{{ .Page.RelPermalink }}"
>{{ .Page.Title }}</a
>

View File

@ -6,7 +6,7 @@
<h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">{{ .Title }}</h1>
</header>
{{ if .Content }}
<section class="flex flex-col max-w-full mt-0 prose lg:flex-row dark:prose-invert">
<section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row">
<div class="min-w-0 min-h-0 max-w-prose">
{{ .Content | emojify }}
</div>
@ -15,10 +15,10 @@
<section>
{{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
{{ if $.Params.groupByYear | default ($.Site.Params.list.groupByYear | default true) }}
<h2 class="mt-12 text-2xl font-bold first:mt-8 text-neutral-700 dark:text-neutral-300">
<h2 class="mt-12 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
{{ .Key }}
</h2>
<hr class="border-dotted border-neutral-400 w-36" />
<hr class="border-dotted w-36 border-neutral-400" />
{{ end }}
{{ range .Pages }}
{{ partial "article-link.html" . }}

View File

@ -3,7 +3,7 @@
{{ with .Params.externalUrl }}
<div>
<a
class="decoration-primary-500 hover:underline hover:underline-offset-2 text-neutral-800 dark:text-neutral"
class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
href="{{ . }}"
target="_blank"
rel="external"
@ -19,7 +19,7 @@
</div>
{{ else }}
<a
class="decoration-primary-500 hover:underline hover:underline-offset-2 text-neutral-800 dark:text-neutral"
class="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"
href="{{ .RelPermalink }}"
>{{ .Title | emojify }}</a
>

View File

@ -53,7 +53,7 @@
{{ range $context.GetTerms $taxonomy }}
<a
href="{{ .RelPermalink }}"
class="px-1 py-[1px] border rounded-md border-neutral-200 dark:border-neutral-600 hover:border-primary-300 hover:text-primary-700 dark:hover:border-primary-600 dark:hover:text-primary-400"
class="rounded-md border border-neutral-200 px-1 py-[1px] hover:border-primary-300 hover:text-primary-700 dark:border-neutral-600 dark:hover:border-primary-600 dark:hover:text-primary-400"
>{{ .LinkTitle }}</a
>
{{ end }}

View File

@ -13,11 +13,11 @@
{{ if $prev }}
<a class="flex group" href="{{ $prev.RelPermalink }}">
<span
class="mr-3 ltr:inline rtl:hidden text-neutral-700 dark:text-neutral group-hover:text-primary-600 dark:group-hover:text-primary-400"
class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
>&larr;</span
>
<span
class="ml-3 ltr:hidden rtl:inline text-neutral-700 dark:text-neutral group-hover:text-primary-600 dark:group-hover:text-primary-400"
class="ml-3 text-neutral-700 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">
@ -49,11 +49,11 @@
</span>
</span>
<span
class="ml-3 ltr:inline rtl:hidden text-neutral-700 dark:text-neutral group-hover:text-primary-600 dark:group-hover:text-primary-400"
class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400"
>&rarr;</span
>
<span
class="mr-3 ltr:hidden rtl:inline text-neutral-700 dark:text-neutral group-hover:text-primary-600 dark:group-hover:text-primary-400"
class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400"
>&larr;</span
>
</a>

View File

@ -5,7 +5,7 @@
{{ if $authorImage }}
{{ $authorImage := $authorImage.Fill "192x192" }}
<img
class="w-24 h-24 !mt-0 !mb-0 ltr:mr-4 rtl:ml-4 rounded-full"
class="!mt-0 !mb-0 h-24 w-24 rounded-full ltr:mr-4 rtl:ml-4"
width="96"
height="96"
alt="{{ $.Site.Author.name | default "Author" }}"
@ -15,7 +15,7 @@
{{ end }}
<div class="place-self-center">
{{ with .Site.Author.name | markdownify | emojify }}
<div class="text-[0.6rem] leading-3 text-neutral-500 dark:text-neutral-400 uppercase">
<div class="text-[0.6rem] uppercase leading-3 text-neutral-500 dark:text-neutral-400">
{{ i18n "author.byline_title" | markdownify | emojify }}
</div>
<div class="font-semibold leading-6 text-neutral-800 dark:text-neutral-300">

View File

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

View File

@ -1,4 +1,4 @@
<header class="py-6 font-semibold sm:py-10 text-neutral-900 dark:text-neutral print:hidden">
<header class="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10">
<nav class="flex justify-between">
{{/* Site logo/title */}}
<div>
@ -10,7 +10,7 @@
src="{{ $logo.RelPermalink }}"
width="{{ div $logo.Width 2 }}"
height="{{ div $logo.Height 2 }}"
class="max-w-[10rem] max-h-[10rem] object-scale-down object-left"
class="max-h-[10rem] max-w-[10rem] object-scale-down object-left"
alt="{{ .Site.Title }}"
/>
</a>

View File

@ -1,4 +1,4 @@
<header class="py-6 font-semibold sm:py-10 text-neutral-900 dark:text-neutral print:hidden">
<header class="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10">
<nav class="flex justify-between">
{{/* Site logo/title */}}
<div class="z-40">
@ -10,7 +10,7 @@
src="{{ $logo.RelPermalink }}"
width="{{ div $logo.Width 2 }}"
height="{{ div $logo.Height 2 }}"
class="max-w-[10rem] max-h-[10rem] object-scale-down object-left"
class="max-h-[10rem] max-w-[10rem] object-scale-down object-left"
alt="{{ .Site.Title }}"
/>
</a>
@ -37,7 +37,7 @@
class="fixed inset-0 z-30 invisible w-screen h-screen m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50"
>
<ul
class="flex flex-col w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl sm:px-14 md:px-24 lg:px-32 sm:py-10 sm:pt-10"
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"
>
<li class="mb-1">
<span class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400"

View File

@ -1,7 +1,7 @@
<article
class="flex flex-col items-center justify-center text-center {{ if not .Site.Params.homepage.showRecent }}
class="{{ if not .Site.Params.homepage.showRecent }}
h-full
{{ end }}"
{{ end }} flex flex-col items-center justify-center text-center"
>
<header class="flex flex-col items-center mb-3">
{{ with .Site.Author.image }}
@ -9,7 +9,7 @@
{{ if $authorImage }}
{{ $authorImage := $authorImage.Fill "288x288" }}
<img
class="mb-2 rounded-full w-36 h-36"
class="mb-2 rounded-full h-36 w-36"
width="144"
height="144"
alt="{{ $.Site.Author.name | default "Author" }}"

View File

@ -5,7 +5,7 @@
<li>
<a
href="{{ $paginator.Prev.URL }}"
class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-neutral rounded"
class="mx-1 block min-w-[1.8rem] rounded text-center hover:bg-primary-600 hover:text-neutral"
rel="prev"
>
&larr;
@ -16,9 +16,9 @@
<li>
<a
href="{{ .URL }}"
class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-neutral rounded {{ if eq . $paginator }}
class="{{ if eq . $paginator }}
bg-primary-200 dark:bg-primary-400 dark:text-neutral-800
{{ end }}"
{{ end }} mx-1 block min-w-[1.8rem] rounded text-center hover:bg-primary-600 hover:text-neutral"
>
{{ .PageNumber }}
</a>
@ -28,7 +28,7 @@
<li>
<a
href="{{ $paginator.Next.URL }}"
class="mx-1 block min-w-[1.8rem] text-center hover:bg-primary-600 hover:text-neutral rounded"
class="mx-1 block min-w-[1.8rem] rounded text-center hover:bg-primary-600 hover:text-neutral"
rel="next"
>
&rarr;

View File

@ -1,11 +1,11 @@
<div
id="search-wrapper"
class="fixed inset-0 z-50 flex flex-col p-4 sm:p-6 md:p-[10vh] lg:p-[12vh] w-screen h-screen cursor-default bg-neutral-500/50 backdrop-blur-sm dark:bg-neutral-900/50 invisible"
class="invisible fixed inset-0 z-50 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh]"
data-url="{{ "" | absLangURL }}"
>
<div
id="search-modal"
class="flex flex-col w-full max-w-3xl min-h-0 mx-auto border rounded-md shadow-lg border-neutral-200 top-20 bg-neutral dark:bg-neutral-800 dark:border-neutral-700"
class="flex flex-col w-full max-w-3xl min-h-0 mx-auto border rounded-md shadow-lg top-20 border-neutral-200 bg-neutral dark:border-neutral-700 dark:bg-neutral-800"
>
<header class="relative z-10 flex items-center justify-between flex-none px-2">
<form class="flex items-center flex-auto min-w-0">
@ -15,14 +15,14 @@
<input
type="search"
id="search-query"
class="flex flex-auto h-12 mx-1 bg-transparent appearance-none focus:outline-dotted focus:outline-transparent focus:outline-2"
class="flex flex-auto h-12 mx-1 bg-transparent appearance-none focus:outline-dotted focus:outline-2 focus:outline-transparent"
placeholder="{{ i18n "search.input_placeholder" }}"
tabindex="0"
/>
</form>
<button
id="close-search-button"
class="flex items-center justify-center w-8 h-8 text-neutral-700 dark:text-neutral hover:text-primary-600 dark:hover:text-primary-400"
class="flex items-center justify-center w-8 h-8 text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"
title="{{ i18n "search.close_button_title" }}"
>
{{ partial "icon.html" "xmark" }}

View File

@ -4,7 +4,7 @@
{{ range . }}
{{ with index $links . }}
<a
class="bg-neutral-300 text-neutral-700 dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800 m-1 hover:bg-primary-500 hover:text-neutral rounded min-w-[2.4rem] inline-block text-center p-1"
class="m-1 inline-block min-w-[2.4rem] rounded bg-neutral-300 p-1 text-center text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800"
href="{{ printf .url $.Permalink $.Title }}"
title="{{ i18n .title }}"
aria-label="{{ i18n .title }}"

View File

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

View File

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

View File

@ -1,5 +1,5 @@
<a
class="px-4 py-2 !text-neutral !no-underline !rounded-md bg-primary-600 hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
class="!rounded-md bg-primary-600 px-4 py-2 !text-neutral !no-underline hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700"
{{ with .Get "href" }}href="{{ . }}"{{ end }}
{{ with .Get "target" }}target="{{ . }}"{{ end }}
role="button"

View File

@ -1,3 +1,3 @@
<div class="!mb-9 text-xl lead">
<div class="lead !mb-9 text-xl">
{{ .Inner | markdownify }}
</div>