mirror of
https://github.com/nunocoracao/blowfish.git
synced 2026-01-30 16:31:52 +01:00
Merge pull request #2683 from ZhenShuo2021/fix/header
✨ Feat: improve the appearance of the header
This commit is contained in:
Nuno C.
GitHub
@@ -11,6 +11,7 @@
|
||||
--spacing: 0.25rem;
|
||||
--container-2xs: 18rem;
|
||||
--container-xs: 20rem;
|
||||
--container-md: 28rem;
|
||||
--container-xl: 36rem;
|
||||
--container-3xl: 48rem;
|
||||
--container-7xl: 80rem;
|
||||
@@ -36,6 +37,7 @@
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
--font-weight-extrabold: 800;
|
||||
--tracking-tight: -0.025em;
|
||||
--tracking-normal: 0em;
|
||||
--leading-snug: 1.375;
|
||||
--leading-relaxed: 1.625;
|
||||
@@ -267,12 +269,18 @@
|
||||
.end-6 {
|
||||
inset-inline-end: calc(var(--spacing) * 6);
|
||||
}
|
||||
.end-8 {
|
||||
inset-inline-end: calc(var(--spacing) * 8);
|
||||
}
|
||||
.top-0 {
|
||||
top: calc(var(--spacing) * 0);
|
||||
}
|
||||
.top-1\/2 {
|
||||
top: calc(1/2 * 100%);
|
||||
}
|
||||
.top-5 {
|
||||
top: calc(var(--spacing) * 5);
|
||||
}
|
||||
.top-20 {
|
||||
top: calc(var(--spacing) * 20);
|
||||
}
|
||||
@@ -303,9 +311,6 @@
|
||||
.z-10 {
|
||||
z-index: 10;
|
||||
}
|
||||
.z-30 {
|
||||
z-index: 30;
|
||||
}
|
||||
.z-50 {
|
||||
z-index: 50;
|
||||
}
|
||||
@@ -390,9 +395,6 @@
|
||||
.mx-auto {
|
||||
margin-inline: auto;
|
||||
}
|
||||
.-my-2 {
|
||||
margin-block: calc(var(--spacing) * -2);
|
||||
}
|
||||
.my-0 {
|
||||
margin-block: calc(var(--spacing) * 0);
|
||||
}
|
||||
@@ -411,6 +413,9 @@
|
||||
.ms-6 {
|
||||
margin-inline-start: calc(var(--spacing) * 6);
|
||||
}
|
||||
.ms-7 {
|
||||
margin-inline-start: calc(var(--spacing) * 7);
|
||||
}
|
||||
.ms-auto {
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
@@ -1018,29 +1023,6 @@
|
||||
height: var(--scrollbar-height, 16px);
|
||||
}
|
||||
}
|
||||
.scrollbar-thin {
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: var(--scrollbar-track);
|
||||
border-radius: var(--scrollbar-track-radius);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scrollbar-thumb);
|
||||
border-radius: var(--scrollbar-thumb-radius);
|
||||
}
|
||||
&::-webkit-scrollbar-corner {
|
||||
background-color: var(--scrollbar-corner);
|
||||
border-radius: var(--scrollbar-corner-radius);
|
||||
}
|
||||
@supports (-moz-appearance:none) {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
.line-clamp-3 {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
@@ -1071,6 +1053,9 @@
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
.inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
.table {
|
||||
display: table;
|
||||
}
|
||||
@@ -1093,6 +1078,9 @@
|
||||
.h-3 {
|
||||
height: calc(var(--spacing) * 3);
|
||||
}
|
||||
.h-4 {
|
||||
height: calc(var(--spacing) * 4);
|
||||
}
|
||||
.h-5 {
|
||||
height: calc(var(--spacing) * 5);
|
||||
}
|
||||
@@ -1102,9 +1090,15 @@
|
||||
.h-8 {
|
||||
height: calc(var(--spacing) * 8);
|
||||
}
|
||||
.h-10 {
|
||||
height: calc(var(--spacing) * 10);
|
||||
}
|
||||
.h-12 {
|
||||
height: calc(var(--spacing) * 12);
|
||||
}
|
||||
.h-14 {
|
||||
height: calc(var(--spacing) * 14);
|
||||
}
|
||||
.h-24 {
|
||||
height: calc(var(--spacing) * 24);
|
||||
}
|
||||
@@ -1144,8 +1138,8 @@
|
||||
.max-h-3 {
|
||||
max-height: calc(var(--spacing) * 3);
|
||||
}
|
||||
.max-h-\[5rem\] {
|
||||
max-height: 5rem;
|
||||
.max-h-20 {
|
||||
max-height: calc(var(--spacing) * 20);
|
||||
}
|
||||
.min-h-0 {
|
||||
min-height: calc(var(--spacing) * 0);
|
||||
@@ -1171,6 +1165,9 @@
|
||||
.w-3 {
|
||||
width: calc(var(--spacing) * 3);
|
||||
}
|
||||
.w-4 {
|
||||
width: calc(var(--spacing) * 4);
|
||||
}
|
||||
.w-5 {
|
||||
width: calc(var(--spacing) * 5);
|
||||
}
|
||||
@@ -1180,6 +1177,9 @@
|
||||
.w-8 {
|
||||
width: calc(var(--spacing) * 8);
|
||||
}
|
||||
.w-10 {
|
||||
width: calc(var(--spacing) * 10);
|
||||
}
|
||||
.w-12 {
|
||||
width: calc(var(--spacing) * 12);
|
||||
}
|
||||
@@ -1213,8 +1213,8 @@
|
||||
.max-w-7xl {
|
||||
max-width: var(--container-7xl);
|
||||
}
|
||||
.max-w-\[5rem\] {
|
||||
max-width: 5rem;
|
||||
.max-w-20 {
|
||||
max-width: calc(var(--spacing) * 20);
|
||||
}
|
||||
.max-w-\[200px\] {
|
||||
max-width: 200px;
|
||||
@@ -1234,6 +1234,9 @@
|
||||
.max-w-full {
|
||||
max-width: 100%;
|
||||
}
|
||||
.max-w-md {
|
||||
max-width: var(--container-md);
|
||||
}
|
||||
.max-w-prose {
|
||||
max-width: 65ch;
|
||||
}
|
||||
@@ -1267,6 +1270,9 @@
|
||||
.flex-none {
|
||||
flex: none;
|
||||
}
|
||||
.shrink {
|
||||
flex-shrink: 1;
|
||||
}
|
||||
.shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
@@ -1359,6 +1365,9 @@
|
||||
.appearance-none {
|
||||
appearance: none;
|
||||
}
|
||||
.grid-rows-\[0fr\] {
|
||||
grid-template-rows: 0fr;
|
||||
}
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
}
|
||||
@@ -1386,16 +1395,12 @@
|
||||
.gap-2 {
|
||||
gap: calc(var(--spacing) * 2);
|
||||
}
|
||||
.gap-3 {
|
||||
gap: calc(var(--spacing) * 3);
|
||||
}
|
||||
.gap-4 {
|
||||
gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
.space-y-2 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
|
||||
margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
|
||||
}
|
||||
}
|
||||
.space-y-3 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-y-reverse: 0;
|
||||
@@ -1410,6 +1415,13 @@
|
||||
margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
|
||||
}
|
||||
}
|
||||
.space-y-6 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
|
||||
margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
|
||||
}
|
||||
}
|
||||
.space-y-10 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-y-reverse: 0;
|
||||
@@ -1417,12 +1429,12 @@
|
||||
margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
|
||||
}
|
||||
}
|
||||
.gap-x-3 {
|
||||
column-gap: calc(var(--spacing) * 3);
|
||||
}
|
||||
.gap-x-5 {
|
||||
column-gap: calc(var(--spacing) * 5);
|
||||
}
|
||||
.gap-x-6 {
|
||||
column-gap: calc(var(--spacing) * 6);
|
||||
}
|
||||
.space-x-2 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-x-reverse: 0;
|
||||
@@ -1450,6 +1462,11 @@
|
||||
.self-center {
|
||||
align-self: center;
|
||||
}
|
||||
.truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.\!overflow-hidden {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
@@ -1656,15 +1673,15 @@
|
||||
.bg-neutral-50 {
|
||||
background-color: rgba(var(--color-neutral-50), 1);
|
||||
}
|
||||
.bg-neutral-50\/97 {
|
||||
background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-50), 1), 1) 97%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, rgba(var(--color-neutral-50), 1) 97%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-neutral-100 {
|
||||
background-color: rgba(var(--color-neutral-100), 1);
|
||||
}
|
||||
.bg-neutral-100\/50 {
|
||||
background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-100), 1), 1) 50%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, rgba(var(--color-neutral-100), 1) 50%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-neutral-100\/75 {
|
||||
background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-100), 1), 1) 75%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
@@ -1680,6 +1697,12 @@
|
||||
background-color: color-mix(in oklab, rgba(var(--color-neutral-500), 1) 50%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-neutral\/25 {
|
||||
background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral), 1), 1) 25%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, rgba(var(--color-neutral), 1) 25%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-neutral\/50 {
|
||||
background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral), 1), 1) 50%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
@@ -1692,6 +1715,12 @@
|
||||
.bg-primary-200 {
|
||||
background-color: rgba(var(--color-primary-200), 1);
|
||||
}
|
||||
.bg-primary-200\/50 {
|
||||
background-color: color-mix(in srgb, rgba(rgba(var(--color-primary-200), 1), 1) 50%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, rgba(var(--color-primary-200), 1) 50%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-primary-500 {
|
||||
background-color: rgba(var(--color-primary-500), 1);
|
||||
}
|
||||
@@ -1704,6 +1733,13 @@
|
||||
.bg-white {
|
||||
background-color: #fff;
|
||||
}
|
||||
.bg-linear-65 {
|
||||
--tw-gradient-position: 65deg;
|
||||
@supports (background-image: linear-gradient(in lab, red, red)) {
|
||||
--tw-gradient-position: 65deg in oklab;
|
||||
}
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
.bg-gradient-to-b {
|
||||
--tw-gradient-position: to bottom in oklab;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
@@ -1764,9 +1800,15 @@
|
||||
.p-0 {
|
||||
padding: calc(var(--spacing) * 0);
|
||||
}
|
||||
.p-1 {
|
||||
padding: calc(var(--spacing) * 1);
|
||||
}
|
||||
.p-1\.5 {
|
||||
padding: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
.p-2 {
|
||||
padding: calc(var(--spacing) * 2);
|
||||
}
|
||||
.p-4 {
|
||||
padding: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -1830,6 +1872,9 @@
|
||||
.py-16 {
|
||||
padding-block: calc(var(--spacing) * 16);
|
||||
}
|
||||
.py-20 {
|
||||
padding-block: calc(var(--spacing) * 20);
|
||||
}
|
||||
.py-\[0\.4rem\] {
|
||||
padding-block: 0.4rem;
|
||||
}
|
||||
@@ -1866,15 +1911,6 @@
|
||||
.pt-16 {
|
||||
padding-top: calc(var(--spacing) * 16);
|
||||
}
|
||||
.pt-\[2px\] {
|
||||
padding-top: 2px;
|
||||
}
|
||||
.pt-\[5px\] {
|
||||
padding-top: 5px;
|
||||
}
|
||||
.pr-2 {
|
||||
padding-right: calc(var(--spacing) * 2);
|
||||
}
|
||||
.pr-8 {
|
||||
padding-right: calc(var(--spacing) * 8);
|
||||
}
|
||||
@@ -1893,9 +1929,6 @@
|
||||
.pb-32 {
|
||||
padding-bottom: calc(var(--spacing) * 32);
|
||||
}
|
||||
.pb-\[3px\] {
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
.pl-0 {
|
||||
padding-left: calc(var(--spacing) * 0);
|
||||
}
|
||||
@@ -2012,6 +2045,10 @@
|
||||
--tw-tracking: var(--tracking-normal);
|
||||
letter-spacing: var(--tracking-normal);
|
||||
}
|
||||
.tracking-tight {
|
||||
--tw-tracking: var(--tracking-tight);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
}
|
||||
.text-wrap {
|
||||
text-wrap: wrap;
|
||||
}
|
||||
@@ -2223,16 +2260,36 @@
|
||||
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
}
|
||||
.backdrop-brightness-112 {
|
||||
--tw-backdrop-brightness: brightness(112%);
|
||||
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
}
|
||||
.backdrop-saturate-220 {
|
||||
--tw-backdrop-saturate: saturate(220%);
|
||||
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
}
|
||||
.transition {
|
||||
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
.transition-\[grid-template-rows\] {
|
||||
transition-property: grid-template-rows;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
.transition-\[height\] {
|
||||
transition-property: height;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
.transition-\[opacity\,visibility\] {
|
||||
transition-property: opacity,visibility;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
.transition-\[transform\,_opacity\] {
|
||||
transition-property: transform, opacity;
|
||||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
@@ -2309,12 +2366,6 @@
|
||||
.\!\[clip\:rect\(0\,0\,0\,0\)\] {
|
||||
clip: rect(0,0,0,0) !important;
|
||||
}
|
||||
.scrollbar-thumb-neutral-400 {
|
||||
--scrollbar-thumb: oklch(70.8% 0 0);
|
||||
}
|
||||
.scrollbar-track-neutral-200 {
|
||||
--scrollbar-track: oklch(92.2% 0 0);
|
||||
}
|
||||
.group-open\:rotate-0 {
|
||||
&:is(:where(.group):is([open], :popover-open, :open) *) {
|
||||
rotate: 0deg;
|
||||
@@ -2410,6 +2461,21 @@
|
||||
border-top-color: transparent;
|
||||
}
|
||||
}
|
||||
.peer-checked\:visible {
|
||||
&:is(:where(.peer):checked ~ *) {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
.peer-checked\:opacity-100 {
|
||||
&:is(:where(.peer):checked ~ *) {
|
||||
opacity: 100%;
|
||||
}
|
||||
}
|
||||
.peer-checked\/full\:grid-rows-\[1fr\] {
|
||||
&:is(:where(.peer\/full):checked ~ *) {
|
||||
grid-template-rows: 1fr;
|
||||
}
|
||||
}
|
||||
.before\:absolute {
|
||||
&::before {
|
||||
content: var(--tw-content);
|
||||
@@ -2762,11 +2828,6 @@
|
||||
margin-right: calc(var(--spacing) * 7);
|
||||
}
|
||||
}
|
||||
.md\:ml-12 {
|
||||
@media (width >= 853px) {
|
||||
margin-left: calc(var(--spacing) * 12);
|
||||
}
|
||||
}
|
||||
.md\:flex {
|
||||
@media (width >= 853px) {
|
||||
display: flex;
|
||||
@@ -2822,11 +2883,6 @@
|
||||
padding-inline: calc(var(--spacing) * 24);
|
||||
}
|
||||
}
|
||||
.md\:pr-4 {
|
||||
@media (width >= 853px) {
|
||||
padding-right: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
.lg\:absolute {
|
||||
@media (width >= 1024px) {
|
||||
position: absolute;
|
||||
@@ -3042,6 +3098,11 @@
|
||||
rotate: 180deg;
|
||||
}
|
||||
}
|
||||
.dark\:block {
|
||||
&:is(.dark *) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.dark\:flex {
|
||||
&:is(.dark *) {
|
||||
display: flex;
|
||||
@@ -3149,6 +3210,14 @@
|
||||
background-color: rgba(var(--color-neutral-800), 1);
|
||||
}
|
||||
}
|
||||
.dark\:bg-neutral-800\/25 {
|
||||
&:is(.dark *) {
|
||||
background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-800), 1), 1) 25%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, rgba(var(--color-neutral-800), 1) 25%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:bg-neutral-800\/50 {
|
||||
&:is(.dark *) {
|
||||
background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-800), 1), 1) 50%, transparent);
|
||||
@@ -3165,6 +3234,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:bg-neutral-900 {
|
||||
&:is(.dark *) {
|
||||
background-color: rgba(var(--color-neutral-900), 1);
|
||||
}
|
||||
}
|
||||
.dark\:bg-neutral-900\/50 {
|
||||
&:is(.dark *) {
|
||||
background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 50%, transparent);
|
||||
@@ -3173,6 +3247,14 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:bg-neutral-900\/99 {
|
||||
&:is(.dark *) {
|
||||
background-color: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 99%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, rgba(var(--color-neutral-900), 1) 99%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dark\:bg-primary-300 {
|
||||
&:is(.dark *) {
|
||||
background-color: rgba(var(--color-primary-300), 1);
|
||||
@@ -3199,18 +3281,46 @@
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
}
|
||||
.dark\:from-neutral-900\/88 {
|
||||
&:is(.dark *) {
|
||||
--tw-gradient-from: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 88%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--tw-gradient-from: color-mix(in oklab, rgba(var(--color-neutral-900), 1) 88%, transparent);
|
||||
}
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
}
|
||||
.dark\:from-primary-600 {
|
||||
&:is(.dark *) {
|
||||
--tw-gradient-from: rgba(var(--color-primary-600), 1);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
}
|
||||
.dark\:via-neutral-800\/72 {
|
||||
&:is(.dark *) {
|
||||
--tw-gradient-via: color-mix(in srgb, rgba(rgba(var(--color-neutral-800), 1), 1) 72%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--tw-gradient-via: color-mix(in oklab, rgba(var(--color-neutral-800), 1) 72%, transparent);
|
||||
}
|
||||
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops);
|
||||
}
|
||||
}
|
||||
.dark\:to-neutral-800 {
|
||||
&:is(.dark *) {
|
||||
--tw-gradient-to: rgba(var(--color-neutral-800), 1);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
}
|
||||
.dark\:to-neutral-900\/55 {
|
||||
&:is(.dark *) {
|
||||
--tw-gradient-to: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 55%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--tw-gradient-to: color-mix(in oklab, rgba(var(--color-neutral-900), 1) 55%, transparent);
|
||||
}
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
}
|
||||
.dark\:to-secondary-800 {
|
||||
&:is(.dark *) {
|
||||
--tw-gradient-to: rgba(var(--color-secondary-800), 1);
|
||||
@@ -3277,14 +3387,18 @@
|
||||
opacity: 60%;
|
||||
}
|
||||
}
|
||||
.dark\:scrollbar-thumb-neutral-600 {
|
||||
.dark\:backdrop-brightness-95 {
|
||||
&:is(.dark *) {
|
||||
--scrollbar-thumb: oklch(43.9% 0 0);
|
||||
--tw-backdrop-brightness: brightness(95%);
|
||||
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
}
|
||||
}
|
||||
.dark\:scrollbar-track-neutral-800 {
|
||||
.dark\:backdrop-saturate-180 {
|
||||
&:is(.dark *) {
|
||||
--scrollbar-track: oklch(26.9% 0 0);
|
||||
--tw-backdrop-saturate: saturate(180%);
|
||||
-webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
|
||||
}
|
||||
}
|
||||
.dark\:hover\:\!bg-primary-700 {
|
||||
@@ -3362,6 +3476,30 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.\[\&_\.translation_\.menuhide_span\]\:text-sm\! {
|
||||
& .translation .menuhide span {
|
||||
font-size: var(--text-sm) !important;
|
||||
line-height: var(--tw-leading, var(--text-sm--line-height)) !important;
|
||||
}
|
||||
}
|
||||
.\[\&_\.translation_button_\.icon\]\:text-4xl\! {
|
||||
& .translation button .icon {
|
||||
font-size: var(--text-4xl) !important;
|
||||
line-height: var(--tw-leading, var(--text-4xl--line-height)) !important;
|
||||
}
|
||||
}
|
||||
.\[\&_\.translation_button_span\]\:text-base\! {
|
||||
& .translation button span {
|
||||
font-size: var(--text-base) !important;
|
||||
line-height: var(--tw-leading, var(--text-base--line-height)) !important;
|
||||
}
|
||||
}
|
||||
.\[\&_span\]\:text-2xl {
|
||||
& span {
|
||||
font-size: var(--text-2xl);
|
||||
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
||||
}
|
||||
}
|
||||
}
|
||||
@layer utilities {
|
||||
.highlight-wrapper {
|
||||
@@ -4187,6 +4325,9 @@ body.zen-mode-enable {
|
||||
color: var(--adm-todo-text);
|
||||
}
|
||||
}
|
||||
html:not(.dark) {
|
||||
color-scheme: light;
|
||||
}
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
@@ -4424,21 +4565,98 @@ pre {
|
||||
.medium-zoom-image--opened {
|
||||
z-index: 100;
|
||||
}
|
||||
.nested-menu:hover + .menuhide {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: visibility 0.3s, opacity 0.3s ease-in-out;
|
||||
@layer utilities {
|
||||
.bf-border-color {
|
||||
border-color: rgba(var(--color-neutral-300), 1);
|
||||
&:is(.dark *) {
|
||||
border-color: rgba(var(--color-neutral-700), 1);
|
||||
}
|
||||
}
|
||||
.bf-border-color-hover {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
border-color: rgba(var(--color-primary-600), 1);
|
||||
}
|
||||
}
|
||||
&:is(.dark *) {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
border-color: rgba(var(--color-primary-400), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bf-icon-color-hover {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
color: rgba(var(--color-primary-600), 1);
|
||||
}
|
||||
}
|
||||
&:is(.dark *) {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
color: rgba(var(--color-primary-400), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bf-scrollbar {
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: var(--scrollbar-track);
|
||||
border-radius: var(--scrollbar-track-radius);
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: var(--scrollbar-thumb);
|
||||
border-radius: var(--scrollbar-thumb-radius);
|
||||
}
|
||||
&::-webkit-scrollbar-corner {
|
||||
background-color: var(--scrollbar-corner);
|
||||
border-radius: var(--scrollbar-corner-radius);
|
||||
}
|
||||
@supports (-moz-appearance:none) {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
--scrollbar-thumb: oklch(70.8% 0 0);
|
||||
--scrollbar-track: oklch(92.2% 0 0);
|
||||
&:is(.dark *) {
|
||||
--scrollbar-thumb: oklch(43.9% 0 0);
|
||||
}
|
||||
&:is(.dark *) {
|
||||
--scrollbar-track: oklch(26.9% 0 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
.menuhide:hover {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: visibility 0.3s, opacity 0.3s ease-in-out;
|
||||
body:has(#mobile-menu-toggle:checked) {
|
||||
overflow: hidden;
|
||||
}
|
||||
@media (min-width: 853px) {
|
||||
body {
|
||||
position: static !important;
|
||||
}
|
||||
}
|
||||
#bmc-wbtn {
|
||||
z-index: 50 !important;
|
||||
}
|
||||
.nested-menu {
|
||||
position: relative;
|
||||
}
|
||||
.menuhide {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: visibility 0.3s, opacity 0.3s ease-in-out;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: visibility 0.3s, opacity 0.3s ease-in-out;
|
||||
}
|
||||
.nested-menu:hover .menuhide, .nested-menu:focus-within .menuhide {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.active {
|
||||
text-decoration-line: underline;
|
||||
|
||||
@@ -9,6 +9,10 @@
|
||||
@import "./components/a11y.css";
|
||||
@import "./components/admonition.css" layer(components);
|
||||
|
||||
html:not(.dark) {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
@@ -247,29 +251,62 @@ pre {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nested-menu:hover + .menuhide {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition:
|
||||
visibility 0.3s,
|
||||
opacity 0.3s ease-in-out;
|
||||
@layer utilities {
|
||||
.bf-border-color {
|
||||
@apply border-neutral-300 dark:border-neutral-700;
|
||||
}
|
||||
|
||||
.bf-border-color-hover {
|
||||
@apply hover:border-primary-600 dark:hover:border-primary-400;
|
||||
}
|
||||
|
||||
.bf-icon-color-hover {
|
||||
@apply hover:text-primary-600 dark:hover:text-primary-400;
|
||||
}
|
||||
|
||||
.bf-scrollbar {
|
||||
@apply scrollbar-thin scrollbar-track-neutral-200 scrollbar-thumb-neutral-400 dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600;
|
||||
}
|
||||
}
|
||||
|
||||
.menuhide:hover {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition:
|
||||
visibility 0.3s,
|
||||
opacity 0.3s ease-in-out;
|
||||
/* Prevent body scroll when mobile menu is open */
|
||||
body:has(#mobile-menu-toggle:checked) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Reset body position for desktop after it was modified on mobile */
|
||||
@media (min-width: 853px) {
|
||||
body {
|
||||
position: static !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Hide buy me a coffee in mobile menu */
|
||||
#bmc-wbtn {
|
||||
z-index: 50 !important;
|
||||
}
|
||||
|
||||
.nested-menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menuhide {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
white-space: nowrap;
|
||||
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
|
||||
transition:
|
||||
visibility 0.3s,
|
||||
opacity 0.3s ease-in-out;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.nested-menu:hover .menuhide,
|
||||
.nested-menu:focus-within .menuhide {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.active {
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
var menuButton = document.getElementById("menu-button");
|
||||
var menuCloseButton = document.getElementById("menu-close-button");
|
||||
var menuWrapper = document.getElementById("menu-wrapper");
|
||||
|
||||
var menuOpen = false;
|
||||
|
||||
var openMenu = function () {
|
||||
if (!menuOpen) {
|
||||
menuOpen = true;
|
||||
document.body.style.overflowY = "hidden";
|
||||
menuButton.style.visibility = "hidden";
|
||||
menuWrapper.style.visibility = "visible";
|
||||
menuWrapper.style.opacity = "1";
|
||||
window.onbeforeunload = function () {
|
||||
closeMenu();
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
var closeMenu = function (e) {
|
||||
if (menuOpen) {
|
||||
menuOpen = false;
|
||||
document.body.style.overflowY = "auto";
|
||||
menuButton.style.visibility = "visible";
|
||||
menuWrapper.style.visibility = "hidden";
|
||||
menuWrapper.style.opacity = "0";
|
||||
window.onbeforeunload = function () {};
|
||||
e.stopPropagation();
|
||||
}
|
||||
};
|
||||
|
||||
menuButton && menuButton.addEventListener("click", openMenu);
|
||||
menuCloseButton && menuCloseButton.addEventListener("click", closeMenu);
|
||||
@@ -10,8 +10,7 @@
|
||||
|
||||
{{ $bodyLayout := "flex flex-col h-screen m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32" }}
|
||||
{{ $bodyColor := "text-lg bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral" }}
|
||||
{{ $bodyScrollbar := "scrollbar-thin scrollbar-track-neutral-200 scrollbar-thumb-neutral-400 dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600" }}
|
||||
<body class="{{ $bodyLayout }} {{ $bodyColor }} {{ if site.Params.enableStyledScrollbar | default true }}{{ $bodyScrollbar }}{{ end }}">
|
||||
<body class="{{ $bodyLayout }} {{ $bodyColor }} {{ if site.Params.enableStyledScrollbar | default true }}bf-scrollbar{{ end }}">
|
||||
<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 focus:translate-y-0 dark:bg-neutral-600"
|
||||
|
||||
@@ -154,7 +154,6 @@
|
||||
{{ if .Site.Params.rtl | default false }}
|
||||
{{ $jsResources = $jsResources | append (resources.Get "js/rtl.js") }}
|
||||
{{ end }}
|
||||
{{ $jsResources = $jsResources | append (resources.Get "js/mobilemenu.js") }}
|
||||
{{ $jsResources = $jsResources | append (resources.Get "js/button-likes.js") }}
|
||||
{{ $jsResources = $jsResources | append (resources.Get "js/katex-render.js") }}
|
||||
{{ $jsResources = $jsResources | append (resources.Get "js/print-support.js") }}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
{{/* Logo section */}}
|
||||
{{ define "HeaderLogo" }}
|
||||
<div class="main-menu flex items-center w-full gap-2 p-1 pl-0">
|
||||
{{ if .Site.Params.Logo }}
|
||||
{{ $logo := resources.Get .Site.Params.Logo }}
|
||||
{{ if $logo }}
|
||||
@@ -15,257 +14,26 @@
|
||||
src="{{ $logo.RelPermalink }}"
|
||||
width="{{ div $logo.Width 2 }}"
|
||||
height="{{ div $logo.Height 2 }}"
|
||||
class="logo max-h-[5rem] max-w-[5rem] object-scale-down object-left nozoom"
|
||||
class="logo max-h-20 max-w-20 object-scale-down object-left nozoom"
|
||||
alt="">
|
||||
{{ end }}
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{- end }}
|
||||
{{ end }}
|
||||
|
||||
{{/* Desktop navigation */}}
|
||||
{{ define "HeaderDesktopNavigation" }}
|
||||
<nav class="hidden md:flex items-center gap-x-5 md:ml-12 h-12">
|
||||
{{ if .Site.Menus.main }}
|
||||
{{ range .Site.Menus.main }}
|
||||
{{ partial "header/header-option.html" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ partial "translations.html" . }}
|
||||
{{ if .Site.Params.enableA11y | default false }}
|
||||
{{ template "HeaderA11y" (dict "prefix" "desktop-" "Site" .Site) }}
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.enableSearch | default false }}
|
||||
<button
|
||||
id="search-button"
|
||||
aria-label="Search"
|
||||
class="text-base hover:text-primary-600 dark:hover:text-primary-400"
|
||||
title="{{ i18n "search.open_button_title" }}">
|
||||
{{ partial "icon.html" "search" }}
|
||||
</button>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
|
||||
<div class="{{ if .Site.Params.footer.showScrollToTop | default true -}}{{- end }} flex items-center">
|
||||
<button
|
||||
id="appearance-switcher"
|
||||
aria-label="Dark mode switcher"
|
||||
type="button"
|
||||
class="text-base hover:text-primary-600 dark:hover:text-primary-400">
|
||||
<div class="flex items-center justify-center dark:hidden">
|
||||
{{ partial "icon.html" "moon" }}
|
||||
</div>
|
||||
<div class="items-center justify-center hidden dark:flex">
|
||||
{{ partial "icon.html" "sun" }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{{ end }}
|
||||
</nav>
|
||||
{{ end }}
|
||||
|
||||
{{/* Mobile navigation */}}
|
||||
{{ define "HeaderMobileToolbar" }}
|
||||
<div class="flex md:hidden items-center gap-x-5 md:ml-12 h-12">
|
||||
<span></span>
|
||||
|
||||
{{ partial "translations.html" . }}
|
||||
{{ if .Site.Params.enableA11y | default false }}
|
||||
{{ template "HeaderA11y" (dict "prefix" "mobile-" "Site" .Site) }}
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.enableSearch | default false }}
|
||||
<button
|
||||
id="search-button-mobile"
|
||||
aria-label="Search"
|
||||
class="text-base hover:text-primary-600 dark:hover:text-primary-400"
|
||||
title="{{ i18n "search.open_button_title" }}">
|
||||
{{ partial "icon.html" "search" }}
|
||||
</button>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
|
||||
<button
|
||||
id="appearance-switcher-mobile"
|
||||
aria-label="Dark mode switcher"
|
||||
type="button"
|
||||
class="text-base hover:text-primary-600 dark:hover:text-primary-400 me-1">
|
||||
<div class="flex items-center justify-center dark:hidden">
|
||||
{{ partial "icon.html" "moon" }}
|
||||
</div>
|
||||
<div class="items-center justify-center hidden dark:flex">
|
||||
{{ partial "icon.html" "sun" }}
|
||||
</div>
|
||||
</button>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ define "HeaderMobileNavigation" }}
|
||||
<div class="-my-2 md:hidden">
|
||||
<div id="menu-button" class="block">
|
||||
{{ if .Site.Menus.main }}
|
||||
<div class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
|
||||
{{ partial "icon.html" "bars" }}
|
||||
</div>
|
||||
<div
|
||||
id="menu-wrapper"
|
||||
class="fixed inset-0 z-30 invisible w-screen h-screen m-0 overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50 pt-[5px]">
|
||||
<ul
|
||||
class="flex space-y-2 mt-3 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none text-end max-w-7xl">
|
||||
<li id="menu-close-button">
|
||||
<span
|
||||
class="cursor-pointer inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400">
|
||||
{{ partial "icon.html" "xmark" }}
|
||||
</span>
|
||||
</li>
|
||||
|
||||
{{ range .Site.Menus.main }}
|
||||
{{ partial "header/header-mobile-option.html" . }}
|
||||
{{ end }}
|
||||
|
||||
</ul>
|
||||
{{ if .Site.Menus.subnavigation }}
|
||||
<hr>
|
||||
<ul
|
||||
class="flex mt-4 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none text-end max-w-7xl">
|
||||
{{ range .Site.Menus.subnavigation }}
|
||||
<li class="mb-1">
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:") }}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
class="flex items-center">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name }}class="mr-3"{{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<p class="text-sm font-sm" title="{{ .Title }}">
|
||||
{{ .Name | markdownify }}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if not .Site.Params.disableTextInHeader | default true }}
|
||||
<a href="{{ "" | relLangURL }}" class="text-base font-medium truncate min-w-0 shrink">
|
||||
{{ .Site.Title | markdownify }}
|
||||
</a>
|
||||
{{ end }}
|
||||
<div class="flex items-center ms-auto">
|
||||
<div class="hidden md:flex">
|
||||
{{ partial "header/components/desktop-menu.html" . }}
|
||||
</div>
|
||||
<div class="flex md:hidden">
|
||||
{{ partial "header/components/mobile-menu.html" . }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ define "HeaderA11y" }}
|
||||
{{- $prefix := .prefix | default "" -}}
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
id="{{ $prefix }}a11y-toggle"
|
||||
aria-label="Open accessibility panel"
|
||||
aria-expanded="false"
|
||||
type="button"
|
||||
class="text-base hover:text-primary-600 dark:hover:text-primary-400"
|
||||
role="button"
|
||||
aria-pressed="false">
|
||||
{{ partial "icon.html" "a11y" }}
|
||||
</button>
|
||||
|
||||
<div id="{{ $prefix }}a11y-overlay" class="fixed inset-0 z-500 hidden"></div>
|
||||
|
||||
<div
|
||||
id="{{ $prefix }}a11y-panel"
|
||||
role="dialog"
|
||||
aria-labelledby="{{ $prefix }}a11y-panel-title"
|
||||
class="a11y-panel-enter fixed hidden z-500 p-6 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 rounded-lg shadow-xl bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700"
|
||||
style="min-width: 20rem;">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3
|
||||
id="{{ $prefix }}a11y-panel-title"
|
||||
class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
{{ i18n "a11y.title" }}
|
||||
</h3>
|
||||
<button
|
||||
id="{{ $prefix }}a11y-close"
|
||||
class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
|
||||
aria-label="Close a11y panel">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-5">
|
||||
{{ $toggles := slice }}
|
||||
{{ $shouldDisableBlur := or site.Params.homepage.layoutBackgroundBlur site.Params.article.layoutBackgroundBlur site.Params.list.layoutBackgroundBlur }}
|
||||
{{ $shouldDisableBackgroundImage := or
|
||||
(eq site.Params.homepage.layout "background")
|
||||
(eq site.Params.article.heroStyle "background")
|
||||
(eq site.Params.list.heroStyle "background")
|
||||
(eq site.Params.taxonomy.heroStyle "background")
|
||||
(eq site.Params.term.heroStyle "background")
|
||||
}}
|
||||
{{ if $shouldDisableBlur }}
|
||||
{{ $toggles = $toggles | append (dict "id" (print $prefix "disable-blur") "label" (i18n "a11y.disable_blur")) }}
|
||||
{{ end }}
|
||||
{{ if $shouldDisableBackgroundImage }}
|
||||
{{ $toggles = $toggles | append (dict "id" (print $prefix "disable-images") "label" (i18n "a11y.disable_images")) }}
|
||||
{{ end }}
|
||||
{{- $toggles = $toggles | append
|
||||
(dict "id" (print $prefix "underline-links") "label" (i18n "a11y.show_link_underline"))
|
||||
(dict "id" (print $prefix "zen-mode") "label" (i18n "article.zen_mode_title.enable"))
|
||||
-}}
|
||||
|
||||
{{- range $toggles }}
|
||||
<div class="flex items-center justify-between">
|
||||
<label for="{{ .id }}" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
||||
{{ .label }}
|
||||
</label>
|
||||
<div class="ios-toggle">
|
||||
<input type="checkbox" id="{{ .id }}">
|
||||
</div>
|
||||
</div>
|
||||
{{- end }}
|
||||
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<label
|
||||
for="{{ $prefix }}font-size-select"
|
||||
class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
||||
{{ i18n "a11y.font_size" }}
|
||||
</label>
|
||||
<select
|
||||
id="{{ $prefix }}font-size-select"
|
||||
class="border rounded-lg px-3 py-1.5 pr-8 text-neutral-900 text-sm dark:bg-neutral-700 dark:text-neutral-200 focus:ring-primary-500 focus:border-primary-500">
|
||||
{{ $fontSizes := slice "default" "12px" "14px" "16px" "18px" "20px" "22px" "24px" }}
|
||||
{{ range $fontSizes }}
|
||||
<option value="{{ . }}">{{ . }}</option>
|
||||
{{ end }}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{/* ========== Render HTML ========== */}}
|
||||
<div
|
||||
class="main-menu flex items-center justify-between py-6 md:justify-start gap-x-3 pt-[2px] pr-2 md:pr-4 pb-[3px] pl-0">
|
||||
{{ template "HeaderLogo" . }}
|
||||
<div class="flex flex-1 items-center justify-between">
|
||||
<nav class="flex space-x-3">
|
||||
{{ if not .Site.Params.disableTextInHeader | default true }}
|
||||
<a href="{{ "" | relLangURL }}" class="text-base font-medium">
|
||||
{{ .Site.Title | markdownify }}
|
||||
</a>
|
||||
{{ end }}
|
||||
</nav>
|
||||
{{ template "HeaderDesktopNavigation" . }}
|
||||
{{ template "HeaderMobileToolbar" . }}
|
||||
</div>
|
||||
{{ template "HeaderMobileNavigation" . }}
|
||||
</div>
|
||||
|
||||
{{ if .Site.Menus.subnavigation }}
|
||||
@@ -280,15 +48,15 @@
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
class="flex items-center">
|
||||
class="flex items-center bf-icon-color-hover">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<p class="text-xs font-light" title="{{ .Title }}">
|
||||
<span class="text-xs font-light" title="{{ .Title }}">
|
||||
{{ .Name | markdownify }}
|
||||
</p>
|
||||
</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
@@ -298,10 +66,17 @@
|
||||
{{ if .Site.Params.highlightCurrentMenuArea }}
|
||||
<script>
|
||||
(function () {
|
||||
var $mainmenu = $(".main-menu");
|
||||
var mainmenu = document.querySelector(".main-menu");
|
||||
if (!mainmenu) return;
|
||||
|
||||
var path = window.location.pathname;
|
||||
$mainmenu.find('a[href="' + path + '"]').each(function (i, e) {
|
||||
$(e).children("p").addClass("active");
|
||||
var links = mainmenu.querySelectorAll('a[href="' + path + '"]');
|
||||
|
||||
links.forEach(function (link) {
|
||||
var targets = link.querySelectorAll("span");
|
||||
targets.forEach(function (el) {
|
||||
el.classList.add("active");
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
88
layouts/partials/header/components/a11y.html
Normal file
88
layouts/partials/header/components/a11y.html
Normal file
@@ -0,0 +1,88 @@
|
||||
{{- $prefix := .prefix | default "" -}}
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
id="{{ $prefix }}a11y-toggle"
|
||||
aria-label="Open accessibility panel"
|
||||
aria-expanded="false"
|
||||
type="button"
|
||||
class="bf-icon-color-hover"
|
||||
role="button"
|
||||
aria-pressed="false">
|
||||
{{ partial "icon.html" "a11y" }}
|
||||
</button>
|
||||
|
||||
<div id="{{ $prefix }}a11y-overlay" class="fixed inset-0 hidden" style="z-index:9999;"></div>
|
||||
|
||||
<div
|
||||
id="{{ $prefix }}a11y-panel"
|
||||
role="dialog"
|
||||
aria-labelledby="{{ $prefix }}a11y-panel-title"
|
||||
class="a11y-panel-enter fixed hidden p-6 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 rounded-lg shadow-xl bg-neutral-50 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-700"
|
||||
style="min-width: 20rem; z-index:9999;">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3
|
||||
id="{{ $prefix }}a11y-panel-title"
|
||||
class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
|
||||
{{ i18n "a11y.title" }}
|
||||
</h3>
|
||||
<button
|
||||
id="{{ $prefix }}a11y-close"
|
||||
class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
|
||||
aria-label="Close a11y panel">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="space-y-5">
|
||||
{{ $toggles := slice }}
|
||||
{{ $shouldDisableBlur := or site.Params.homepage.layoutBackgroundBlur site.Params.article.layoutBackgroundBlur site.Params.list.layoutBackgroundBlur }}
|
||||
{{ $shouldDisableBackgroundImage := or
|
||||
(eq site.Params.homepage.layout "background")
|
||||
(eq site.Params.article.heroStyle "background")
|
||||
(eq site.Params.list.heroStyle "background")
|
||||
(eq site.Params.taxonomy.heroStyle "background")
|
||||
(eq site.Params.term.heroStyle "background")
|
||||
}}
|
||||
{{ if $shouldDisableBlur }}
|
||||
{{ $toggles = $toggles | append (dict "id" (print $prefix "disable-blur") "label" (i18n "a11y.disable_blur")) }}
|
||||
{{ end }}
|
||||
{{ if $shouldDisableBackgroundImage }}
|
||||
{{ $toggles = $toggles | append (dict "id" (print $prefix "disable-images") "label" (i18n "a11y.disable_images")) }}
|
||||
{{ end }}
|
||||
{{- $toggles = $toggles | append
|
||||
(dict "id" (print $prefix "underline-links") "label" (i18n "a11y.show_link_underline"))
|
||||
(dict "id" (print $prefix "zen-mode") "label" (i18n "article.zen_mode_title.enable"))
|
||||
-}}
|
||||
|
||||
{{- range $toggles }}
|
||||
<div class="flex items-center justify-between">
|
||||
<label for="{{ .id }}" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
||||
{{ .label }}
|
||||
</label>
|
||||
<div class="ios-toggle">
|
||||
<input type="checkbox" id="{{ .id }}">
|
||||
</div>
|
||||
</div>
|
||||
{{- end }}
|
||||
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<label
|
||||
for="{{ $prefix }}font-size-select"
|
||||
class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
||||
{{ i18n "a11y.font_size" }}
|
||||
</label>
|
||||
<select
|
||||
id="{{ $prefix }}font-size-select"
|
||||
class="border rounded-lg px-3 py-1.5 pr-8 text-neutral-900 text-sm dark:bg-neutral-700 dark:text-neutral-200 focus:ring-primary-500 focus:border-primary-500">
|
||||
{{ $fontSizes := slice "default" "12px" "14px" "16px" "18px" "20px" "22px" "24px" }}
|
||||
{{ range $fontSizes }}
|
||||
<option value="{{ . }}">{{ . }}</option>
|
||||
{{ end }}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
116
layouts/partials/header/components/desktop-menu.html
Normal file
116
layouts/partials/header/components/desktop-menu.html
Normal file
@@ -0,0 +1,116 @@
|
||||
<nav class="flex items-center gap-x-5 h-12">
|
||||
{{ if .Site.Menus.main }}
|
||||
{{ range .Site.Menus.main }}
|
||||
{{ template "DesktopMenu" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ partial "header/components/translations.html" . }}
|
||||
{{ if .Site.Params.enableA11y | default false }}
|
||||
{{ partial "header/components/a11y.html" (dict "prefix" "desktop-") }}
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.enableSearch | default false }}
|
||||
<button
|
||||
id="search-button"
|
||||
aria-label="Search"
|
||||
class="text-base bf-icon-color-hover"
|
||||
title="{{ i18n "search.open_button_title" }}">
|
||||
{{ partial "icon.html" "search" }}
|
||||
</button>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
|
||||
<div class="flex items-center">
|
||||
<button
|
||||
id="appearance-switcher"
|
||||
aria-label="Dark mode switcher"
|
||||
type="button"
|
||||
class="text-base bf-icon-color-hover">
|
||||
<div class="flex items-center justify-center dark:hidden">
|
||||
{{ partial "icon.html" "moon" }}
|
||||
</div>
|
||||
<div class="items-center justify-center hidden dark:flex">
|
||||
{{ partial "icon.html" "sun" }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
{{ end }}
|
||||
</nav>
|
||||
|
||||
{{ define "DesktopMenu" }}
|
||||
{{ if .HasChildren }}
|
||||
<div class="nested-menu">
|
||||
<div class="cursor-pointer flex items-center">
|
||||
<a
|
||||
{{ if .URL }}
|
||||
href="{{ .URL }}"
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
{{ else }}
|
||||
tabindex="0"
|
||||
{{ end }}
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
class="flex items-center text-base font-medium bf-icon-color-hover"
|
||||
title="{{ .Title }}">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<span class="text-bg font-bg break-normal" title="{{ .Title }}">
|
||||
{{ .Name | markdownify }}
|
||||
</span>
|
||||
<span>
|
||||
{{ partial "icon.html" "chevron-down" }}
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="menuhide">
|
||||
<div class="pt-2 p-5 mt-2 rounded-xl backdrop-blur shadow-2xl bg-neutral/25 dark:bg-neutral-800/25">
|
||||
<div class="flex flex-col space-y-3">
|
||||
{{ range .Children }}
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
class="flex items-center bf-icon-color-hover">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<span class="text-sm font-sm" title="{{ .Title }}">
|
||||
{{ .Name | markdownify }}
|
||||
</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ else }}
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
class="flex items-center bf-icon-color-hover"
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
title="{{ .Title }}">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
{{ if .Name }}
|
||||
<span class="text-base font-medium break-normal">
|
||||
{{ .Name | markdownify }}
|
||||
</span>
|
||||
{{ end }}
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
152
layouts/partials/header/components/mobile-menu.html
Normal file
152
layouts/partials/header/components/mobile-menu.html
Normal file
@@ -0,0 +1,152 @@
|
||||
<div class="flex items-center h-14 gap-4">
|
||||
{{ if .Site.Params.enableSearch | default false }}
|
||||
<button
|
||||
id="search-button-mobile"
|
||||
aria-label="Search"
|
||||
class="flex items-center justify-center bf-icon-color-hover"
|
||||
title="{{ i18n "search.open_button_title" }}">
|
||||
{{ partial "icon.html" "search" }}
|
||||
</button>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Site.Params.footer.showAppearanceSwitcher | default false }}
|
||||
<button
|
||||
id="appearance-switcher-mobile"
|
||||
type="button"
|
||||
aria-label="Dark mode switcher"
|
||||
class="flex items-center justify-center text-neutral-900 hover:text-primary-600 dark:text-neutral-200 dark:hover:text-primary-400">
|
||||
<div class="dark:hidden">
|
||||
{{ partial "icon.html" "moon" }}
|
||||
</div>
|
||||
<div class="hidden dark:block">
|
||||
{{ partial "icon.html" "sun" }}
|
||||
</div>
|
||||
</button>
|
||||
{{ end }}
|
||||
|
||||
{{ if or
|
||||
.Site.Menus.main
|
||||
.Site.Menus.subnavigation
|
||||
.Site.Params.enableA11y
|
||||
}}
|
||||
<input type="checkbox" id="mobile-menu-toggle" autocomplete="off" class="hidden peer">
|
||||
<label for="mobile-menu-toggle" class="flex items-center justify-center cursor-pointer bf-icon-color-hover">
|
||||
{{ partial "icon.html" "bars" }}
|
||||
</label>
|
||||
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
style="scrollbar-gutter: stable;"
|
||||
class="fixed inset-0 z-50 invisible overflow-y-auto px-6 py-20 opacity-0 transition-[opacity,visibility] duration-300 peer-checked:visible peer-checked:opacity-100 bg-neutral-50/97 dark:bg-neutral-900/99
|
||||
{{ if site.Params.enableStyledScrollbar | default true }}bf-scrollbar{{ end }}">
|
||||
<label
|
||||
for="mobile-menu-toggle"
|
||||
class="fixed end-8 top-5 flex items-center justify-center z-50 h-12 w-12 cursor-pointer select-none rounded-full bf-icon-color-hover border bf-border-color bf-border-color-hover bg-neutral-50 dark:bg-neutral-900">
|
||||
{{ partial "icon.html" "xmark" }}
|
||||
</label>
|
||||
<nav class="mx-auto max-w-md space-y-6">
|
||||
{{ template "mobile-main-menu" . }}
|
||||
{{ template "mobile-subnavigation" . }}
|
||||
{{ template "mobile-footer-components" . }}
|
||||
</nav>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{ define "mobile-main-menu" }}
|
||||
{{ range .Site.Menus.main }}
|
||||
{{ $submenuId := printf "fullscreen-submenu-%s" (.Identifier | default .Name | anchorize) }}
|
||||
<div class="px-2">
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
class="flex items-center gap-4 group bf-icon-color-hover text-neutral-700 dark:text-neutral-200">
|
||||
{{ if .Pre }}
|
||||
<span class="flex items-center justify-center h-8 w-8 text-2xl">
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<span title="{{ .Title }}" class="text-2xl font-bold tracking-tight">
|
||||
{{ .Name | markdownify }}
|
||||
</span>
|
||||
{{ if .HasChildren }}
|
||||
<label
|
||||
for="{{ $submenuId }}"
|
||||
class="ms-auto flex items-center justify-center h-10 w-10 cursor-pointer rounded-lg bf-icon-color-hover border bf-border-color bf-border-color-hover">
|
||||
{{ partial "icon.html" "chevron-down" }}
|
||||
</label>
|
||||
{{ end }}
|
||||
</a>
|
||||
|
||||
{{ if .HasChildren }}
|
||||
<input checked type="checkbox" id="{{ $submenuId }}" autocomplete="off" class="hidden peer/full">
|
||||
|
||||
<div
|
||||
class="grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 peer-checked/full:grid-rows-[1fr]">
|
||||
<div class="overflow-hidden">
|
||||
<div class="ms-7 mt-4">
|
||||
{{ range .Children }}
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
class="flex items-center gap-3 p-2 group bf-icon-color-hover text-neutral-700 dark:text-neutral-200">
|
||||
{{ if .Pre }}
|
||||
<span class="flex items-center justify-center h-5 w-5">
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<span title="{{ .Title }}" class="text-lg">
|
||||
{{ .Name | markdownify }}
|
||||
</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "mobile-subnavigation" }}
|
||||
{{ if .Site.Menus.subnavigation }}
|
||||
<div class="flex flex-wrap gap-4 mt-8 pt-8 border-t bf-border-color">
|
||||
{{ range .Site.Menus.subnavigation }}
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
class="inline-flex items-center gap-2 px-2 py-2 bf-icon-color-hover rounded-full text-sm">
|
||||
{{ if .Pre }}
|
||||
<span class="flex items-center justify-center h-4 w-4">
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<span title="{{ .Title }}">{{ .Name | markdownify }}</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
{{ define "mobile-footer-components" }}
|
||||
{{ if or
|
||||
hugo.IsMultilingual
|
||||
.Site.Params.enableA11y
|
||||
}}
|
||||
<div
|
||||
class="flex flex-wrap items-center [&_span]:text-2xl [&_.translation_button_.icon]:text-4xl! [&_.translation_button_span]:text-base! [&_.translation_.menuhide_span]:text-sm! gap-x-6 ps-2 mt-8 pt-8 border-t bf-border-color">
|
||||
{{ partial "header/components/translations.html" . }}
|
||||
|
||||
{{ if .Site.Params.enableA11y | default false }}
|
||||
{{ partial "header/components/a11y.html" (dict "prefix" "mobile-menu-") }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
23
layouts/partials/header/components/translations.html
Normal file
23
layouts/partials/header/components/translations.html
Normal file
@@ -0,0 +1,23 @@
|
||||
{{ if .IsTranslated }}
|
||||
<div class="translation nested-menu">
|
||||
<button class="cursor-pointer flex items-center">
|
||||
<span class="me-1">
|
||||
{{ partial "icon.html" "language" }}
|
||||
</span>
|
||||
<span class="text-sm font-medium bf-icon-color-hover" title="{{ .Title }}">
|
||||
{{- i18n "global.language" | markdownify -}}
|
||||
</span>
|
||||
</button>
|
||||
<ul class="menuhide">
|
||||
<li class="rounded-xl backdrop-blur shadow-2xl p-2 flex flex-col gap-1">
|
||||
{{ range .AllTranslations }}
|
||||
<a href="{{ .RelPermalink }}" class="flex items-center bf-icon-color-hover px-3 py-1">
|
||||
<span class="text-sm font-sm" title="{{ .Title }}">
|
||||
{{ .Language.Params.displayName | emojify }}
|
||||
</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{{ end }}
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="fixed inset-x-0 z-100">
|
||||
<div
|
||||
id="menu-blur"
|
||||
class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom bg-neutral dark:bg-neutral-800"></div>
|
||||
class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl backdrop-saturate-220 backdrop-brightness-112 dark:backdrop-saturate-180 dark:backdrop-brightness-95 bg-primary-200/50 bg-linear-65 dark:from-neutral-900/88 dark:via-neutral-800/72 dark:to-neutral-900/55 shadow-xl"></div>
|
||||
<div class="relative m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32">
|
||||
{{ partial "header/basic.html" . }}
|
||||
</div>
|
||||
@@ -13,4 +13,4 @@
|
||||
type="text/javascript"
|
||||
src="{{ $backgroundBlur.RelPermalink }}"
|
||||
integrity="{{ $backgroundBlur.Data.Integrity }}"
|
||||
data-blur-id="menu-blur"></script>
|
||||
data-blur-id="menu-blur"></script>
|
||||
@@ -2,7 +2,7 @@
|
||||
<div class="fixed inset-x-0 z-100">
|
||||
<div
|
||||
id="menu-blur"
|
||||
class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl shadow-2xl"></div>
|
||||
class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl shadow-2xl bg-neutral/25 dark:bg-neutral-800/25"></div>
|
||||
<div class="relative m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32">
|
||||
{{ partial "header/basic.html" . }}
|
||||
</div>
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
<li class="mt-1">
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
class="flex items-center hover:text-primary-600 dark:hover:text-primary-400">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<p class="text-bg font-bg" title="{{ .Title }}">
|
||||
{{ .Name | markdownify }}
|
||||
</p>
|
||||
<span>
|
||||
{{ partial "icon.html" "chevron-down" }}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{{ range .Children }}
|
||||
<li class="mt-1">
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
|
||||
)
|
||||
}}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
class="flex items-center hover:text-primary-600 dark:hover:text-primary-400">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<p class="text-sm font-small" title="{{ .Title }}">
|
||||
{{ .Name | markdownify }}
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
<li class="mb-2"></li>
|
||||
@@ -1,23 +0,0 @@
|
||||
<li class="mt-1">
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:"
|
||||
)
|
||||
}}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
class="flex items-center hover:text-primary-600 dark:hover:text-primary-400"
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
title="{{ .Title }}">
|
||||
{{ if .Pre }}
|
||||
<div {{ if and .Pre .Name }}class="mr-2"{{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ if .Name }}
|
||||
<p class="text-bg font-bg">
|
||||
{{ .Name | markdownify }}
|
||||
</p>
|
||||
{{ end }}
|
||||
</a>
|
||||
</li>
|
||||
@@ -1,5 +0,0 @@
|
||||
{{ if .HasChildren }}
|
||||
{{ partial "header/header-mobile-option-nested.html" . }}
|
||||
{{ else }}
|
||||
{{ partial "header/header-mobile-option-simple.html" . }}
|
||||
{{ end }}
|
||||
@@ -1,50 +0,0 @@
|
||||
<div>
|
||||
<div class="cursor-pointer flex items-center nested-menu">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<a
|
||||
{{ if .URL }}
|
||||
href="{{ .URL }}"
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
class="text-base font-medium hover:text-primary-600 dark:hover:text-primary-400"
|
||||
title="{{ .Title }}">
|
||||
<p>
|
||||
{{ .Name | markdownify }}
|
||||
</p>
|
||||
</a>
|
||||
<span>
|
||||
{{ partial "icon.html" "chevron-down" }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="absolute menuhide">
|
||||
<div class="pt-2 p-5 mt-2 rounded-xl backdrop-blur shadow-2xl">
|
||||
<div class="flex flex-col space-y-3">
|
||||
{{ range .Children }}
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}
|
||||
target="_blank"
|
||||
{{ end }}
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
class="flex items-center hover:text-primary-600 dark:hover:text-primary-400">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
<p class="text-sm font-sm" title="{{ .Title }}">
|
||||
{{ .Name | markdownify }}
|
||||
</p>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,17 +0,0 @@
|
||||
<a
|
||||
href="{{ .URL }}"
|
||||
{{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}target="_blank"{{ end }}
|
||||
class="flex items-center hover:text-primary-600 dark:hover:text-primary-400"
|
||||
{{ with or .Name .Pre }}aria-label="{{ . }}"{{ end }}
|
||||
title="{{ .Title }}">
|
||||
{{ if .Pre }}
|
||||
<span {{ if and .Pre .Name }}class="mr-1"{{ end }}>
|
||||
{{ partial "icon.html" .Pre }}
|
||||
</span>
|
||||
{{ end }}
|
||||
{{ if .Name }}
|
||||
<p class="text-base font-medium">
|
||||
{{ .Name | markdownify }}
|
||||
</p>
|
||||
{{ end }}
|
||||
</a>
|
||||
@@ -1,5 +0,0 @@
|
||||
{{ if .HasChildren }}
|
||||
{{ partial "header/header-option-nested.html" . }}
|
||||
{{ else }}
|
||||
{{ partial "header/header-option-simple.html" . }}
|
||||
{{ end }}
|
||||
@@ -1,7 +1,7 @@
|
||||
<details
|
||||
open
|
||||
id="TOCView"
|
||||
class="toc-right mt-0 overflow-y-auto overscroll-contain scrollbar-thin scrollbar-track-neutral-200 scrollbar-thumb-neutral-400 dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600 rounded-lg -ms-5 ps-5 pe-2 hidden lg:block">
|
||||
class="toc-right mt-0 overflow-y-auto overscroll-contain bf-scrollbar rounded-lg -ms-5 ps-5 pe-2 hidden lg:block">
|
||||
<summary
|
||||
class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 -ms-5 ps-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">
|
||||
{{ i18n "article.table_of_contents" }}
|
||||
|
||||
@@ -1,29 +0,0 @@
|
||||
{{ if .IsTranslated }}
|
||||
<div>
|
||||
<div class="cursor-pointer flex items-center nested-menu">
|
||||
<span class="me-1">
|
||||
{{ partial "icon.html" "language" }}
|
||||
</span>
|
||||
<div
|
||||
class="text-sm font-medium hover:text-primary-600 dark:hover:text-primary-400"
|
||||
title="{{ .Title }}">
|
||||
{{- i18n "global.language" | markdownify -}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute menuhide">
|
||||
<div class="pt-2 p-5 mt-2 rounded-xl backdrop-blur shadow-2xl">
|
||||
<div class="flex flex-col space-y-3">
|
||||
{{ range .AllTranslations }}
|
||||
<a href="{{ .RelPermalink }}" class="flex items-center">
|
||||
<p
|
||||
class="text-sm font-sm hover:text-primary-600 dark:hover:text-primary-400"
|
||||
title="{{ .Title }}">
|
||||
{{ .Language.Params.displayName | emojify }}
|
||||
</p>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
Reference in New Issue
Block a user