mirror of
https://github.com/nunocoracao/blowfish.git
synced 2026-01-30 16:31:52 +01:00
feat: better mobile menu
This commit is contained in:
ZhenShuo Leo
@@ -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;
|
||||
}
|
||||
@@ -408,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;
|
||||
}
|
||||
@@ -1015,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;
|
||||
@@ -1068,6 +1053,9 @@
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
.inline-flex {
|
||||
display: inline-flex;
|
||||
}
|
||||
.table {
|
||||
display: table;
|
||||
}
|
||||
@@ -1090,6 +1078,9 @@
|
||||
.h-3 {
|
||||
height: calc(var(--spacing) * 3);
|
||||
}
|
||||
.h-4 {
|
||||
height: calc(var(--spacing) * 4);
|
||||
}
|
||||
.h-5 {
|
||||
height: calc(var(--spacing) * 5);
|
||||
}
|
||||
@@ -1099,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);
|
||||
}
|
||||
@@ -1168,6 +1165,9 @@
|
||||
.w-3 {
|
||||
width: calc(var(--spacing) * 3);
|
||||
}
|
||||
.w-4 {
|
||||
width: calc(var(--spacing) * 4);
|
||||
}
|
||||
.w-5 {
|
||||
width: calc(var(--spacing) * 5);
|
||||
}
|
||||
@@ -1177,6 +1177,9 @@
|
||||
.w-8 {
|
||||
width: calc(var(--spacing) * 8);
|
||||
}
|
||||
.w-10 {
|
||||
width: calc(var(--spacing) * 10);
|
||||
}
|
||||
.w-12 {
|
||||
width: calc(var(--spacing) * 12);
|
||||
}
|
||||
@@ -1231,6 +1234,9 @@
|
||||
.max-w-full {
|
||||
max-width: 100%;
|
||||
}
|
||||
.max-w-md {
|
||||
max-width: var(--container-md);
|
||||
}
|
||||
.max-w-prose {
|
||||
max-width: 65ch;
|
||||
}
|
||||
@@ -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;
|
||||
@@ -1420,6 +1432,9 @@
|
||||
.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;
|
||||
@@ -1658,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)) {
|
||||
@@ -1772,6 +1787,9 @@
|
||||
.p-1\.5 {
|
||||
padding: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
.p-2 {
|
||||
padding: calc(var(--spacing) * 2);
|
||||
}
|
||||
.p-4 {
|
||||
padding: calc(var(--spacing) * 4);
|
||||
}
|
||||
@@ -1835,6 +1853,9 @@
|
||||
.py-16 {
|
||||
padding-block: calc(var(--spacing) * 16);
|
||||
}
|
||||
.py-20 {
|
||||
padding-block: calc(var(--spacing) * 20);
|
||||
}
|
||||
.py-\[0\.4rem\] {
|
||||
padding-block: 0.4rem;
|
||||
}
|
||||
@@ -1871,9 +1892,6 @@
|
||||
.pt-16 {
|
||||
padding-top: calc(var(--spacing) * 16);
|
||||
}
|
||||
.pt-\[5px\] {
|
||||
padding-top: 5px;
|
||||
}
|
||||
.pr-8 {
|
||||
padding-right: calc(var(--spacing) * 8);
|
||||
}
|
||||
@@ -1892,6 +1910,9 @@
|
||||
.pb-32 {
|
||||
padding-bottom: calc(var(--spacing) * 32);
|
||||
}
|
||||
.pl-0 {
|
||||
padding-left: calc(var(--spacing) * 0);
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -2005,6 +2026,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;
|
||||
}
|
||||
@@ -2221,11 +2246,21 @@
|
||||
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));
|
||||
@@ -2302,12 +2337,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;
|
||||
@@ -2403,6 +2432,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);
|
||||
@@ -3025,6 +3069,11 @@
|
||||
rotate: 180deg;
|
||||
}
|
||||
}
|
||||
.dark\:block {
|
||||
&:is(.dark *) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.dark\:flex {
|
||||
&:is(.dark *) {
|
||||
display: flex;
|
||||
@@ -3148,6 +3197,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);
|
||||
@@ -3156,6 +3210,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);
|
||||
@@ -3260,16 +3322,6 @@
|
||||
opacity: 60%;
|
||||
}
|
||||
}
|
||||
.dark\:scrollbar-thumb-neutral-600 {
|
||||
&:is(.dark *) {
|
||||
--scrollbar-thumb: oklch(43.9% 0 0);
|
||||
}
|
||||
}
|
||||
.dark\:scrollbar-track-neutral-800 {
|
||||
&:is(.dark *) {
|
||||
--scrollbar-track: oklch(26.9% 0 0);
|
||||
}
|
||||
}
|
||||
.dark\:hover\:\!bg-primary-700 {
|
||||
&:is(.dark *) {
|
||||
&:hover {
|
||||
@@ -3345,6 +3397,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 {
|
||||
@@ -4170,6 +4246,9 @@ body.zen-mode-enable {
|
||||
color: var(--adm-todo-text);
|
||||
}
|
||||
}
|
||||
html:not(.dark) {
|
||||
color-scheme: light;
|
||||
}
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
@@ -4407,21 +4486,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 }}
|
||||
@@ -21,245 +20,19 @@
|
||||
</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{- end }}
|
||||
{{ end }}
|
||||
|
||||
{{/* Desktop navigation */}}
|
||||
{{ define "HeaderDesktopNavigation" }}
|
||||
<nav class="hidden md:flex items-center gap-x-5 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="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 - now includes toolbar functions */}}
|
||||
{{ define "HeaderMobileNavigation" }}
|
||||
<div class="flex md:hidden items-center gap-x-5 h-12">
|
||||
{{ 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">
|
||||
<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 }}
|
||||
|
||||
{{/* Hamburger menu button */}}
|
||||
{{ if .Site.Menus.main }}
|
||||
<div id="menu-button" class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
|
||||
{{ partial "icon.html" "bars" }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{/* Mobile menu overlay */}}
|
||||
{{ if .Site.Menus.main }}
|
||||
<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 }}
|
||||
|
||||
{{ 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 w-full gap-2 p-1">
|
||||
{{ template "HeaderLogo" . }}
|
||||
{{ if not .Site.Params.disableTextInHeader | default true }}
|
||||
<a
|
||||
href="{{ "" | relLangURL }}"
|
||||
class="text-base font-medium truncate min-w-0 shrink">
|
||||
<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">
|
||||
{{ template "HeaderDesktopNavigation" . }}
|
||||
{{ template "HeaderMobileNavigation" . }}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
@@ -275,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>
|
||||
@@ -293,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">
|
||||
<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 }}
|
||||
@@ -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 class="break-normal">
|
||||
{{ .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 break-normal">
|
||||
{{ .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