diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css index ad972136..5acb1f11 100644 --- a/assets/css/compiled/main.css +++ b/assets/css/compiled/main.css @@ -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; diff --git a/assets/css/main.css b/assets/css/main.css index 6a36911d..9482c139 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -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 { diff --git a/assets/js/mobilemenu.js b/assets/js/mobilemenu.js deleted file mode 100644 index a6503650..00000000 --- a/assets/js/mobilemenu.js +++ /dev/null @@ -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); diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 6370e932..44c6acfe 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -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" }} - +
{{ 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 }}
{{ end }} - {{- end }} -{{ end }} - -{{/* Desktop navigation */}} -{{ define "HeaderDesktopNavigation" }} - -{{ end }} - -{{/* Mobile navigation */}} -{{ define "HeaderMobileToolbar" }} -
- - - {{ partial "translations.html" . }} - {{ if .Site.Params.enableA11y | default false }} - {{ template "HeaderA11y" (dict "prefix" "mobile-" "Site" .Site) }} - {{ end }} - - {{ if .Site.Params.enableSearch | default false }} - - {{ end }} - - {{ if .Site.Params.footer.showAppearanceSwitcher | default false }} - - {{ end }} -
-{{ end }} - -{{ define "HeaderMobileNavigation" }} -
- @@ -298,10 +66,17 @@ {{ if .Site.Params.highlightCurrentMenuArea }} diff --git a/layouts/partials/header/components/a11y.html b/layouts/partials/header/components/a11y.html new file mode 100644 index 00000000..85ec3779 --- /dev/null +++ b/layouts/partials/header/components/a11y.html @@ -0,0 +1,88 @@ +{{- $prefix := .prefix | default "" -}} +
+ + + + + +
diff --git a/layouts/partials/header/components/desktop-menu.html b/layouts/partials/header/components/desktop-menu.html new file mode 100644 index 00000000..2ae3c0ef --- /dev/null +++ b/layouts/partials/header/components/desktop-menu.html @@ -0,0 +1,116 @@ + + +{{ define "DesktopMenu" }} + {{ if .HasChildren }} +
+
+ + {{ if .Pre }} + + {{ partial "icon.html" .Pre }} + + {{ end }} + + {{ .Name | markdownify }} + + + {{ partial "icon.html" "chevron-down" }} + + +
+
+
+
+ {{ range .Children }} + + {{ if .Pre }} + + {{ partial "icon.html" .Pre }} + + {{ end }} + + {{ .Name | markdownify }} + + + {{ end }} +
+
+
+
+ {{ else }} + + {{ if .Pre }} + + {{ partial "icon.html" .Pre }} + + {{ end }} + {{ if .Name }} + + {{ .Name | markdownify }} + + {{ end }} + + {{ end }} +{{ end }} diff --git a/layouts/partials/header/components/mobile-menu.html b/layouts/partials/header/components/mobile-menu.html new file mode 100644 index 00000000..7a644dbb --- /dev/null +++ b/layouts/partials/header/components/mobile-menu.html @@ -0,0 +1,152 @@ +
+ {{ if .Site.Params.enableSearch | default false }} + + {{ end }} + + {{ if .Site.Params.footer.showAppearanceSwitcher | default false }} + + {{ end }} + + {{ if or + .Site.Menus.main + .Site.Menus.subnavigation + .Site.Params.enableA11y + }} + + + + + {{ end }} +
+ +{{ define "mobile-main-menu" }} + {{ range .Site.Menus.main }} + {{ $submenuId := printf "fullscreen-submenu-%s" (.Identifier | default .Name | anchorize) }} +
+ + {{ if .Pre }} + + {{ partial "icon.html" .Pre }} + + {{ end }} + + {{ .Name | markdownify }} + + {{ if .HasChildren }} + + {{ end }} + + + {{ if .HasChildren }} + + +
+
+
+ {{ range .Children }} + + {{ if .Pre }} + + {{ partial "icon.html" .Pre }} + + {{ end }} + + {{ .Name | markdownify }} + + + {{ end }} +
+
+
+ {{ end }} +
+ {{ end }} +{{ end }} + +{{ define "mobile-subnavigation" }} + {{ if .Site.Menus.subnavigation }} +
+ {{ range .Site.Menus.subnavigation }} + + {{ if .Pre }} + + {{ partial "icon.html" .Pre }} + + {{ end }} + {{ .Name | markdownify }} + + {{ end }} +
+ {{ end }} +{{ end }} + +{{ define "mobile-footer-components" }} + {{ if or + hugo.IsMultilingual + .Site.Params.enableA11y + }} +
+ {{ partial "header/components/translations.html" . }} + + {{ if .Site.Params.enableA11y | default false }} + {{ partial "header/components/a11y.html" (dict "prefix" "mobile-menu-") }} + {{ end }} +
+ {{ end }} +{{ end }} diff --git a/layouts/partials/header/components/translations.html b/layouts/partials/header/components/translations.html new file mode 100644 index 00000000..c0a24d9f --- /dev/null +++ b/layouts/partials/header/components/translations.html @@ -0,0 +1,23 @@ +{{ if .IsTranslated }} +
+ + +
+{{ end }} diff --git a/layouts/partials/header/fixed-fill-blur.html b/layouts/partials/header/fixed-fill-blur.html index 5bf8aa10..318e6d00 100644 --- a/layouts/partials/header/fixed-fill-blur.html +++ b/layouts/partials/header/fixed-fill-blur.html @@ -2,7 +2,7 @@
+ 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">
{{ partial "header/basic.html" . }}
@@ -13,4 +13,4 @@ type="text/javascript" src="{{ $backgroundBlur.RelPermalink }}" integrity="{{ $backgroundBlur.Data.Integrity }}" - data-blur-id="menu-blur"> + data-blur-id="menu-blur"> \ No newline at end of file diff --git a/layouts/partials/header/fixed.html b/layouts/partials/header/fixed.html index 25ebabe2..bad68611 100644 --- a/layouts/partials/header/fixed.html +++ b/layouts/partials/header/fixed.html @@ -2,7 +2,7 @@
+ 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">
{{ partial "header/basic.html" . }}
diff --git a/layouts/partials/header/header-mobile-option-nested.html b/layouts/partials/header/header-mobile-option-nested.html deleted file mode 100644 index 3614e496..00000000 --- a/layouts/partials/header/header-mobile-option-nested.html +++ /dev/null @@ -1,41 +0,0 @@ -
  • - - {{ if .Pre }} - - {{ partial "icon.html" .Pre }} - - {{ end }} -

    - {{ .Name | markdownify }} -

    - - {{ partial "icon.html" "chevron-down" }} - -     -
    • -{{ range .Children }} -
  • - - {{ if .Pre }} - - {{ partial "icon.html" .Pre }} - - {{ end }} -

    - {{ .Name | markdownify }} -

    -     -
    • -{{ end }} -
  • diff --git a/layouts/partials/header/header-mobile-option-simple.html b/layouts/partials/header/header-mobile-option-simple.html deleted file mode 100644 index ff6cdab5..00000000 --- a/layouts/partials/header/header-mobile-option-simple.html +++ /dev/null @@ -1,23 +0,0 @@ -
  • - - {{ if .Pre }} -
    - {{ partial "icon.html" .Pre }} -
    - {{ end }} - {{ if .Name }} -

    - {{ .Name | markdownify }} -

    - {{ end }} -     -
    • diff --git a/layouts/partials/header/header-mobile-option.html b/layouts/partials/header/header-mobile-option.html deleted file mode 100644 index ab37b369..00000000 --- a/layouts/partials/header/header-mobile-option.html +++ /dev/null @@ -1,5 +0,0 @@ -{{ if .HasChildren }} - {{ partial "header/header-mobile-option-nested.html" . }} -{{ else }} - {{ partial "header/header-mobile-option-simple.html" . }} -{{ end }} diff --git a/layouts/partials/header/header-option-nested.html b/layouts/partials/header/header-option-nested.html deleted file mode 100644 index 02036b77..00000000 --- a/layouts/partials/header/header-option-nested.html +++ /dev/null @@ -1,50 +0,0 @@ -
    -
    - {{ if .Pre }} - - {{ partial "icon.html" .Pre }} - - {{ end }} - -

    - {{ .Name | markdownify }} -

    -     - - {{ partial "icon.html" "chevron-down" }} - -
    -
    -
    -
    - {{ range .Children }} - - {{ if .Pre }} - - {{ partial "icon.html" .Pre }} - - {{ end }} -

    - {{ .Name | markdownify }} -

    -     - {{ end }} -
    -
    -
    -
    diff --git a/layouts/partials/header/header-option-simple.html b/layouts/partials/header/header-option-simple.html deleted file mode 100644 index a9a87870..00000000 --- a/layouts/partials/header/header-option-simple.html +++ /dev/null @@ -1,17 +0,0 @@ - - {{ if .Pre }} - - {{ partial "icon.html" .Pre }} - - {{ end }} - {{ if .Name }} -

    - {{ .Name | markdownify }} -

    - {{ end }} -     diff --git a/layouts/partials/header/header-option.html b/layouts/partials/header/header-option.html deleted file mode 100644 index 73cc1b77..00000000 --- a/layouts/partials/header/header-option.html +++ /dev/null @@ -1,5 +0,0 @@ -{{ if .HasChildren }} - {{ partial "header/header-option-nested.html" . }} -{{ else }} - {{ partial "header/header-option-simple.html" . }} -{{ end }} diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html index 316d764d..3d55fc1f 100644 --- a/layouts/partials/toc.html +++ b/layouts/partials/toc.html @@ -1,7 +1,7 @@