mirror of
https://github.com/imfing/hextra.git
synced 2025-06-19 20:21:22 -04:00
feat: add hx-
prefix to Hextra Tailwind CSS classes (#300)
* feat: add prefix to tailwind css classes * fix: remove unnecessary prefixes * fix: add missing prefix in other places * chore: regenerate hugo_stats.json * chore: run `npm run build:css` * chore: add `hx-` prefix to _index.fa.md * fix: lang switcher display issue * fix: add `hx-` prefix to showcase/index.fa.md * fix: lang switch param mistake
This commit is contained in:
@ -4,26 +4,26 @@
|
||||
{{- $logoHeight := .Site.Params.navbar.logo.height | default "20" -}}
|
||||
{{- $logoDarkPath := .Site.Params.navbar.logo.dark | default $logoPath -}}
|
||||
|
||||
{{- $navWidth := "max-w-[90rem]" -}}
|
||||
{{- $navWidth := "hx-max-w-[90rem]" -}}
|
||||
{{- with .Site.Params.navbar.width -}}
|
||||
{{ if eq . "normal" -}}
|
||||
{{ $navWidth = "max-w-screen-xl" -}}
|
||||
{{ $navWidth = "hx-max-w-screen-xl" -}}
|
||||
{{ else if eq . "full" -}}
|
||||
{{ $navWidth = "max-w-full" -}}
|
||||
{{ end -}}
|
||||
{{- end -}}
|
||||
|
||||
<div class="nav-container sticky top-0 z-20 w-full bg-transparent print:hidden">
|
||||
<div class="nav-container-blur pointer-events-none absolute z-[-1] h-full w-full bg-white dark:bg-dark shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] contrast-more:shadow-[0_0_0_1px_#000] dark:shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] contrast-more:dark:shadow-[0_0_0_1px_#fff]"></div>
|
||||
<div class="nav-container hx-sticky hx-top-0 hx-z-20 hx-w-full hx-bg-transparent print:hx-hidden">
|
||||
<div class="nav-container-blur hx-pointer-events-none hx-absolute hx-z-[-1] hx-h-full hx-w-full hx-bg-white dark:hx-bg-dark hx-shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] contrast-more:hx-shadow-[0_0_0_1px_#000] dark:hx-shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] contrast-more:dark:hx-shadow-[0_0_0_1px_#fff]"></div>
|
||||
|
||||
<nav class="mx-auto flex items-center justify-end gap-2 h-16 px-6 {{ $navWidth }}">
|
||||
<a class="flex items-center hover:opacity-75 ltr:mr-auto rtl:ml-auto" href="{{ $logoLink }}">
|
||||
<nav class="hx-mx-auto hx-flex hx-items-center hx-justify-end hx-gap-2 hx-h-16 hx-px-6 {{ $navWidth }}">
|
||||
<a class="hx-flex hx-items-center hover:hx-opacity-75 ltr:hx-mr-auto rtl:hx-ml-auto" href="{{ $logoLink }}">
|
||||
{{- if (.Site.Params.navbar.displayLogo | default true) }}
|
||||
<img class="block dark:hidden" src="{{ $logoPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
|
||||
<img class="hidden dark:block" src="{{ $logoDarkPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
|
||||
<img class="hx-block dark:hx-hidden" src="{{ $logoPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
|
||||
<img class="hx-hidden dark:hx-block" src="{{ $logoDarkPath | relURL }}" alt="{{ .Site.Title }}" height="{{ $logoHeight }}" width="{{ $logoWidth }}" />
|
||||
{{- end }}
|
||||
{{- if (.Site.Params.navbar.displayTitle | default true) }}
|
||||
<span class="mx-2 font-extrabold inline select-none" title="{{ .Site.Title }}">{{- .Site.Title -}}</span>
|
||||
<span class="hx-mx-2 hx-font-extrabold hx-inline hx-select-none" title="{{ .Site.Title }}">{{- .Site.Title -}}</span>
|
||||
{{- end }}
|
||||
</a>
|
||||
|
||||
@ -43,27 +43,27 @@
|
||||
{{/* Display icon menu item */}}
|
||||
{{- if .Params.icon -}}
|
||||
{{- $rel := cond (eq .Params.icon "mastodon") "noreferer me" "noreferer" }}
|
||||
<a class="p-2 text-current" {{ if $external }}target="_blank" rel="{{ $rel }}"{{ end }} href="{{ $link }}" title="{{ or (T .Identifier) .Name | safeHTML }}">
|
||||
<a class="hx-p-2 hx-text-current" {{ if $external }}target="_blank" rel="{{ $rel }}"{{ end }} href="{{ $link }}" title="{{ or (T .Identifier) .Name | safeHTML }}">
|
||||
{{- partial "utils/icon.html" (dict "name" .Params.icon "attributes" "height=24") -}}
|
||||
<span class="sr-only">{{ or (T .Identifier) .Name | safeHTML }}</span>
|
||||
<span class="hx-sr-only">{{ or (T .Identifier) .Name | safeHTML }}</span>
|
||||
</a>
|
||||
{{- else -}}
|
||||
{{- $active := or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .) -}}
|
||||
{{- $activeClass := cond $active "font-medium" "text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200" -}}
|
||||
{{- $activeClass := cond $active "hx-font-medium" "hx-text-gray-600 hover:hx-text-gray-800 dark:hx-text-gray-400 dark:hover:hx-text-gray-200" -}}
|
||||
<a
|
||||
title="{{ or (T .Identifier) .Name | safeHTML }}"
|
||||
href="{{ $link }}"
|
||||
{{ if $external }}target="_blank" rel="noreferer"{{ end }}
|
||||
class="text-sm contrast-more:text-gray-700 contrast-more:dark:text-gray-100 relative -ml-2 hidden whitespace-nowrap p-2 md:inline-block {{ $activeClass }}"
|
||||
class="hx-text-sm contrast-more:hx-text-gray-700 contrast-more:dark:hx-text-gray-100 hx-relative -hx-ml-2 hx-hidden hx-whitespace-nowrap hx-p-2 md:hx-inline-block {{ $activeClass }}"
|
||||
>
|
||||
<span class="text-center">{{ or (T .Identifier) .Name | safeHTML }}</span>
|
||||
<span class="hx-text-center">{{ or (T .Identifier) .Name | safeHTML }}</span>
|
||||
</a>
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
{{- end -}}
|
||||
|
||||
|
||||
<button type="button" aria-label="Menu" class="hamburger-menu -mr-2 rounded p-2 active:bg-gray-400/20 md:hidden">
|
||||
<button type="button" aria-label="Menu" class="hamburger-menu -hx-mr-2 hx-rounded hx-p-2 active:hx-bg-gray-400/20 md:hx-hidden">
|
||||
{{- partial "utils/icon.html" (dict "name" "hamburger-menu" "attributes" "height=24") -}}
|
||||
</button>
|
||||
</nav>
|
||||
|
Reference in New Issue
Block a user